Web Components Samples. It's a very biiiiiiig file...

Small machines may not like it...

Web Components Samples. It's a very biiiiiiig file...

Small machines may not like it...
Requires absolutely NO external library Requires absolutely NO external library
+ Head up
☾ ☼

Click on the category titles below, they all represent different configurations of one WebComponent each.
All the different visual configurations are driven by one stylesheet, web-components.css.

Note:
The stylesheet web-components.css is nothing but an example illustrating some of the widgets' possibilities. Do feel free to come up with your own ones.
For animation buttons: in this demo, only one animation can run at a given time. This is not a limitation of the components, this is just because this demo is implemented this way.
Some samples of tags are given for each component. All the attribute combinations are not given, several have default values.

Expand All Collapse All
Web Comp Skeleton
<web-component-skeleton id="skeleton-01"
                        title="This is a Skeleton in the closet"/>
Value:
Pluviometer
<pluvio-meter id="pluviometer-01"
              class="pluviometer-day"
              title="m/m per hour"
              min-value="0"
              max-value="10"
              major-ticks="1"
              minor-ticks="0.25"
              value="2.3"
              width="80"
              height="220"></pluvio-meter>
Value:

Value:

Value:

Value:

Thermometer
<thermo-meter id="thermometer-01"
              class="thermometer-day"
              title="Celcius"
              min-value="-10"
              max-value="60"
              major-ticks="10"
              minor-ticks="1"
              value="12.34"
              unit="C"
              width="100"
              height="360"></thermo-meter>
Value:

Value:

Value:

Value:

Direction
<direction-display class="analogdisplay-day"
                   title="Heading, animated"
                   id="compass-01"
                   value="38"
                   major-ticks="45"
                   minor-ticks="5"
                   with-rose="true"
                   with-border="true"
                   hand="regular|wind|boat|cata|tri|plane"
                   label="HDG"
                   width="200"
                   height="200"></direction-display>
Value:

With Border With Rose
Value:

With Border With Rose
Value:

With Border With Rose
Value:

With Border With Rose
Value:

With Border With Rose
Value:

With Border With Rose
Value:

With Border With Rose
Value:

With Border With Rose
Value:

With Border With Rose
Value:

With Border With Rose
Start/Stop Animation
Analog Displays
<analog-display class="analogdisplay-day"
                title="Boat Speed in Knots"
                id="bsp-01"
                min-value="0"
                max-value="15"
                value="6.7"
                major-ticks="3"
                minor-ticks="0.25"
                overlap="-10"
                with-border="true"
                rotate-digits="true"
                width="200"
                height="100"></analog-display>
                                        
<analog-display class="analogdisplay-monochrome-orange"
                title="True Wind Speed in knots and m/s, rotate-digits: false"
                id="analog-dyn-02"
                min-value="0"
                max-value="60"
                value="12.5"
                value-2="6.4305625"
                major-ticks="10"
                minor-ticks="1"
                with-border="true"
                rotate-digits="false"
                overlap="40"
                label="TWS"
                max-value-2="30.8667"
                major-ticks-2="5"
                minor-ticks-2="1"
                unit="kn"
                unit-2="m/s"
                width="300"
                height="300"></analog-display>
Try to combine Style, BG, border.
Style:
BG: Black White None
Value:

With Border With Min & Max
Value:

With Border With Min & Max
Value:

With Border With Min & Max
Value:

With Border With Min & Max
Try to combine Style, BG, border.
Style:
BG: Black White None
Value:

With Border With Min & Max
Try to combine Style, BG, border.
Style:
BG: Black White None
Value:

With Border With Min & Max
Value:

Bottom Val:
With Border With Min & Max
Value:

With Border With Min & Max
Value:

With Border With Min & Max
Value:

With Border With Min & Max
Try to combine Style, BG, border.
Style:
BG: Black White None
Value:

With Border With Min & Max
With extra attributes: 
                    abs-tick-value="true"
                    rotate-digits="false"
                    value="2.5"
                    display-value="E 2.5"
Value:

Wind Angle Displays
<wind-angle-display class="analogdisplay-day"
                    title="Apparent Wind Speed in Knots"
                    id="aw-01"
                    value="{ 'wa': 60, 'ws': 10.2 }"
                    major-ticks="45"
                    minor-ticks="5"
                    with-border="true"
                    with-digits="true"
                    label="App Wind"
                    width="300"
                    height="300"></wind-angle-display>
Try to combine Style, BG, border.
Style:
BG: Black White None
AWA:
  With Border
Try to combine Style, BG, border.
Style:
BG: Black White None
AWA:
  With Border
Jumbos
<jumbo-display id="jumbo-02"
               class="jumbo-02"
               value="-12.34"
               label="Value-A"
               width="180"
               height="80"></jumbo-display>
Value:
Value:
Value:
Value:
Value:
Big Jumbos
 <jumbo-plus-display id="jumbo-plus-01"
                     class="jumbo-plus"
                     value="01-JAN-1970|00:00:00"
                     label="UTC Date Time"
                     width="400"
                     height="140"></jumbo-plus-display>
Value:
Compass (concave) Rose 
<compass-rose id="compass-rose-01"
              class="day"
              title="Heading"
              value="45"
              width="500"
              height="50"></compass-rose>
Warning: The rose in concave. This means that it has to be seen as if the user was sitting at the center of the rose.
Value:
Value:
Value:
Value:
Value:
Start/Stop Animation
Compass Rose (flat) 
<compass-display id="compass-display-01"
                 class="day"
                 title="Heading"
                 value="45"
                 label="HDG"
                 width="300"
                 height="300"></compass-display>
Value:
Value: With Border With Rose
Compass Globe
 <compass-globe id="compass-globe-01"
                title="Compass"
                width="400"
                height="400"
                value="180"
                label="Contest"/>
Warning: The rose in convex. You see it from behind.
Heading:
Heading:
World Map
<world-map id="world-map-01"
           class="worldmap-display"
           title="World Map"
           width="500"
           height="500"></world-map>
Transparent Grid Sun Moon Sunlight Moonlight
Anti Sun & Moon Wandering bodies Stars Tropics
Spin
Globe Mercator Square
Callback samples:   
Transparent Grid Sun Moon Sunlight Moonlight
Anti Sun & Moon Wandering bodies Stars Tropics
Spin
Globe Mercator Square
Transparent Grid Sun Moon Sunlight Moonlight
Anti Sun & Moon Wandering bodies Stars Tropics
      
    
  <world-map id="world-map-04"
             class="worldmap-display"
             title="World Map - Mercator"
             projection="MERCATOR"
             east="40"
             west="180"
             north="60"
             south="-60"
             width="800"
             height="600"></world-map>
Move the mouse on the map, and see its coordinates below.


Sky Map
<sky-map id="sky-map-01"
         class="skymap-display-01"
         width="600"
         height="600"
         latitude="35"/>
Type: Hemisphere: Stars. Const. Star Names. Const Names. Visible sky. Sky grid. Wandering bodies.
Type: Hemisphere: Stars. Const. Star Names. Const Names. Visible sky. Sky grid. Wandering bodies.
LHA Aries / Date
0
Latitude
35
Led Panel
<led-panel id="led-panel-01"
           class="led-panel-01"
           width="200"
           height="200"
           nb-cols="8"
           nb-lines="8"/>
Marquee Panel
<marquee-panel id="marquee-panel-01"
               class="marquee-01"
               width="1000"
               height="125"
               nb-cols="128"
               nb-lines="16"
               display-data='{ "text": "Hello Web Components!", "x": 4, "y": 12 }'/>
Marquee Text:
Marquee Text:
Analog Watch
<analog-watch id="analog-watch-01"
              class="analogdisplay-day"
              title="Custom Time"
              width="220"
              height="220"
              hours-ticks="1"
              minutes-ticks="1"
              digital-value="6"
              with-second-hand="true"
              value="01:20:12"></analog-watch>
Value:
With Border
Value:
With Border

With Border

With Border
Direction, 16 points
<dir-16-points id="dir-16-01"
               class="dir-16-day"
               title="16 points"
               width="220"
               height="220"
               value="N"></dir-16-points>
Value:
Calendar
<calendar-display id="calendar-01"
                  class="calendar-01"
                  title="Day-Month-Year"
                  width="300"
                  height="360"
                  value="28-08-2018-tuesday"></calendar-display>
Split-Flap Display
<split-flap-display id="split-flap-display-01"
                    nb-char="24"
                    font-size="60"
                    value="02-sep-2018 10:19:00"></split-flap-display>

Change the text, and tab out...
Scroll Digit Display
<scroll-digit-display id="split-flap-display-01"
                      nb-char="6"
                      font-size="40"
                      justified="RIGHT"
                      nb-dec="2"
                      value="12.43"></scroll-digit-display>

Change the value, and tab out...
Auto:
Boat Overview
<boat-overview id="boat-overview-01" width="800" height="600"
               sog="6.9" cog="215" bsp="7.1" hdg="222" aws="15.8"
               awa="-112" tws="20.5" twa="-130" twd="91"
               cdr="49" csp="0.32" lwy="0" cmg="222"
               decl="10" dev="-0.98" b2wp="230" vmg="-3.85"
               with-current="true" with-vmg="false"/>
Interactive interface.
Change the values in the right pane to see the graphic moving.
It simulates the data read from the NMEA station, Boat Speed (BSP), Apparent Wind Angle (AWA), Apparent Wind Speed (AWS), Speed Over Ground from the GPS (COG), Speed Over Ground from the GPS (SOG), Compass Heading (HDC), subject to 2 corrections (Declination and deviation) to become HDG (through HDM).
Note: The True Wind (TW) is calculated with the GPS data (SOG, COG).
Those data read from the station are displayed in a color different from the others, calculated.

With GPS
With Wind
With True Wind
With Current
With VMG
With Norths
With Labels
BSP: 8.0
SOG: 8.2
COG: 215
AWS: 15.8
AWA: -112
HDC: 222
Max Leeway D d (from dev curve)
° ' ° '
Style:
Sun-Path Display
<sun-path id="sun-path-01"
          tilt="-10"></sun-path>
Northern Hemisphere
Southern Hemisphere
Northern Hemisphere, with Rise and Set data
Slide Show
Shows how to use nested custom components... 
<slide-show id="slide-show-01"
            width="400"
            height="300">
  <slide-show-image src="..." title="..."></slide-show-image>
  <slide-show-image src="..." title="..."></slide-show-image>
</slide-show>
You can click on the slides...
You can click on the slides...
Auto Auto
GPS Satellites Plotter
<satellite-plotter class="sat-plot-01"
                   title="Satellite Plotter"
                   id="sp-01"
                   width="400"
                   height="400"></satellite-plotter>
With Border
With Border
With Border
Knob and Display
<knob-and-display id="knob-01"
                  width="200"
                  height="200"
                  value="0.5"
                  label="Weight"
                  onchange="knobCallback"
                  title="Drag the knob's index around to change the value"/>
Value:

You can also use arrow-keys on this one
Value:
Value:
Graph Display
<graph-display id="graph-01"
               width="600"
               height="200"
               padding="5"
               value="123.45" <= can be "null" (not displayed)
               vgrid="0:0.5"
               hgrid="0:1"
               label="Work in Progress"
               title="Ooooh!"/>



Moon Phase
<moon-phase id="moon-phase-01"
            title="Moon Phase"/>
Tilt:
Phase:
Moon Phase - 2
This one uses an image (full-moon.jpg), located next to the script (MoonPhase.js). 
 <moon-phase-2 id="moon-phase-2-01"
               title="Moon Phase"
               width="400"
               height="400"
               title="Moon Phase"
               phase="45"
               tilt="-15"
               label="This is the Moon"/>
Tilt:
Phase:
Tilt:
Phase:
Colored Scale
 <colored-scale id="colored-01"
                class="colored-01"
                value="12.34"
                orientation="VERTICAL"
                unit="°C"
                scale="2"
                width="100"
                height="390"></colored-scale>
Value:

Value:

Value:

Beaufort Scale
 <beaufort-scale id="beaufort-01"
               class="beaufort-01"
               value="12.34"
               orientation="VERTICAL"
               width="100"
               height="390"></beaufort-scale>
TWS Value:

TWS Value:

TWS Value:

Chartless Map
 <chartless-map id="chartless-map-01"
                 class="chartless-map-01"
                 center-lat="47.677667"
                 center-lng="-3.135667"
                 chart-width="5.0"
                 width="800"
                 height="600"></chartless-map>
Can be used to plot a grid, markers, tracks... without having to have a cartography available. (or a device supporting it).
Only Mercator projection is supported for now.
Map is draggable and zoomable.
See how to use the doAfter callback.
See how to use the _mouseMoveFeedback callback.
Use the slider at the bottom to change the chart's scale.
Style:
Cursor:
X
Y
Pos:
Chart Width: 5.00°
Oliv did it Oliv did it
See (some of) them live on CodePen.io.
See them on Github.