Web Components Samples

Web Components Samples


+ Head up
Pluviometer, Thermometer, Displays and other such marvels...
Page Background Dark Light

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.


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"
              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"
                   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
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"
                width="200"
                height="100"></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
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

Wind Angle Displays
<wind-angle-display class="analogdisplay-day"
                    title="Apparent Wind Speed in Knots"
                    id="aw-01"
                    value="{ &quot;wa&quot;: 60, &quot;ws&quot;: 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:

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

World Map
<world-map id="world-map-01"
           class="worldmap-display"
           title="World Map"
           width="700"
           height="500"></world-map>
					
Transparent Grid Sun Moon Sunlight Moonlight Wandering bodies Stars Tropics
Spin
Globe Mercator Square
Callback samples:   
Transparent Grid Sun Moon Sunlight Moonlight Wandering bodies Stars Tropics
Spin
Globe Mercator Square

Sky Map
<sky-map id="sky-map-01"
          width="600"
          height="600"
          latitude="35"/>
					
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...

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:

Oliv did it Oliv did it
See (some of) them live on CodePen.io.
See them on Github.