Web Components Samples

Web Components Samples

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.


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"
                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

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:

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

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:

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...
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

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