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.


Pluviometer
Value:

Value:

Value:

Value:


Thermometer
Value:

Value:

Value:

Value:


Direction
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
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
Try to combine Style, BG, border.
Style:
BG: Black White None
AWA:
  With Border

Jumbos
Value:
Value:
Value:
Value:

Compass (concave) 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
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
Type: Hemisphere: Stars. Const. Star Names. Const Names. Visible sky. Sky grid. Wandering bodies.
LHA Aries / Date
0
Latitude
35

Led Panel

Marquee Panel
Marquee Text:
Marquee Text:

Analog Watch
Value:
With Border
Value:
With Border

With Border

With Border

Direction, 16 points
Value:

Calendar

Split-Flap Display

Change the text, and tab out...

Oliv did it Oliv did it