UIZE JavaScript Framework

JAVASCRIPT EXAMPLES Seven Segment Display

In this example, an instance of the Uize.Widget.SegmentDisplay.Seven widget class is being used to wire up a seven segment display UI. The seven segment display is an old style of display device for displaying decimal numerals and a limited number of alphabetical characters (often utilizing LED or LCD electonics), which is often found in displays in pocket calculators, VHS and DVD players, digital watches, audio recording hardware, etc. The seven segment display shown in this example is interactive. You can choose a value to display by using the "VALUE SELECTOR" droplist. You can toggle the lit state of individual segments of the display by clicking directly on the segments of the display, or you can click on the binary digits in the ABCDEFG and GFEDCBA segments state tables. Various buttons are also provided in the "SEGMENTS STATE" pane to let you easily change the lit state of all segments at once. To see animations of the display state, use the buttons in the "ANIMATE VALUE" pane to the right.

Display Segments State Animate Value
VALUE SELECTOR

A B C D E F G
0 0 0 0 0 0 0
G F E D C B A
0 0 0 0 0 0 0
all segments on all segments off invert all segments
count up from 0 to 9 count down from 9 to 0 animate all segments on animate clockwise animate counter-clockwise animate move upwards animate move downwards anim-eight blinky animate through all values