SOURCE CODE: Seven Segment Display
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Seven Segment Display | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="widget animation Uize.Widgets.SegmentDisplay.Seven.Widget Uize.Fade.Factory"/>
  <meta name="description" content="See an interactive demonstration of a seven segment display widget, much like the classic LED / LCD digit displays on calculators and digital watches."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <style type="text/css">
    .main a.buttonLink,
    .main a.buttonLink:link,
    .main a.buttonLink:visited,
    .main a.buttonLink:hover,
    .main a.buttonLink:active {
      display:block;
      margin-bottom:2px;
      padding:4px 10px 5px 10px;
      border-radius:3px;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
      text-transform:uppercase;
      font-size:11px;
    }

    td.pane {
      padding:8px;
      background:#1e252e url(../images/page-contents-bg.gif) repeat-x left top;
      border-left:1px solid #555;
      border-right:1px solid #222;
      border-bottom:1px solid #000;
    }
    td.paneSpacer {
      width:10px;
    }

    /*** value selector heading ***/
      .valueSelectorHeading {
        font-size:11px;
        color:#000;
        text-align:center;
        letter-spacing:2px;
        background:#b7babf url(../images/title-bg-brushed-metal.jpg) repeat left top;
        padding:0;
        margin-top:4px;
        border:1px solid #abb;
      }

    /*** segment tables ***/
      .segmentTable {
        margin-top:10px;
      }
      .segmentTable td {
        text-align:center;
      }
      .segmentTable tr.heading td {
        color:#fff;
      }
      .segmentTable tr.segmentValues td {
        background:#fff;
        border:1px solid #bcc;
      }
      .segmentTable tr.segmentsStateAsHex td {
        font-family:Courier;
        color:#000;
        background:#b7babf url(../images/title-bg-brushed-metal.jpg) repeat left top;
        border:1px solid #abb;
      }

    /*** segment labels ***/
      table.segmentLabel {
        position:absolute;
        width:100%;
        height:100%;
        cursor:pointer;
      }
      table.segmentLabel td {
        font-size:16px;
        font-weight:bold;
        color:#000;
        text-align:center;
      }
  </style>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Seven Segment Display
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/seven-segment-display.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of the <a href="../reference/Uize.Widgets.SegmentDisplay.Seven.Widget.html"><code>Uize.Widgets.SegmentDisplay.Seven.Widget</code></a> widget class is being used to wire up a <a href="http://en.wikipedia.org/wiki/Seven-segment_display" class="externalSiteLink" target="_top">seven segment display</a> 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 <b>"VALUE SELECTOR"</b> 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 <b>"SEGMENTS STATE"</b> 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 <b>"ANIMATE VALUE"</b> pane to the right.</p>
  </div>

  <!-- UI for seven segment display and interactive tests -->
    <form>
    <table cellspacing="0" style="margin:auto;">
      <tr>
        <td class="fancyHeading">Display</td>
        <td class="paneSpacer"></td>
        <td class="fancyHeading">Segments State</td>
        <td class="paneSpacer"></td>
        <td class="fancyHeading">Animate Value</td>
      </tr>
      <tr valign="top">
        <td class="pane" style="background:#000;">
          <div id="page-sevenSegmentDisplay" style="padding:12px;"></div>
        </td>
        <td class="paneSpacer"></td>
        <td class="pane">
          <div class="valueSelectorHeading">VALUE SELECTOR</div>
          <select id="page-valueSelector" style="width:100%;"></select>
          <br/>

          <table cellspacing="0" class="segmentTable" style="width:100%;">
            <tr class="heading">
              <td>A</td>
              <td>B</td>
              <td>C</td>
              <td>D</td>
              <td>E</td>
              <td>F</td>
              <td>G</td>
            </tr>
            <tr class="segmentValues">
              <td id="page-abcdefgSegmentsA">0</td>
              <td id="page-abcdefgSegmentsB">0</td>
              <td id="page-abcdefgSegmentsC">0</td>
              <td id="page-abcdefgSegmentsD">0</td>
              <td id="page-abcdefgSegmentsE">0</td>
              <td id="page-abcdefgSegmentsF">0</td>
              <td id="page-abcdefgSegmentsG">0</td>
            </tr>
            <tr class="segmentsStateAsHex">
              <td id="page-abcdefgHex" colspan="7"></td>
            </tr>
          </table>

          <table cellspacing="0" class="segmentTable" style="width:100%; margin-bottom:10px;">
            <tr class="heading">
              <td>G</td>
              <td>F</td>
              <td>E</td>
              <td>D</td>
              <td>C</td>
              <td>B</td>
              <td>A</td>
            </tr>
            <tr class="segmentValues">
              <td id="page-gfedcbaSegmentsG">0</td>
              <td id="page-gfedcbaSegmentsF">0</td>
              <td id="page-gfedcbaSegmentsE">0</td>
              <td id="page-gfedcbaSegmentsD">0</td>
              <td id="page-gfedcbaSegmentsC">0</td>
              <td id="page-gfedcbaSegmentsB">0</td>
              <td id="page-gfedcbaSegmentsA">0</td>
            </tr>
            <tr class="segmentsStateAsHex">
              <td id="page-gfedcbaHex" colspan="7"></td>
            </tr>
          </table>

          <a id="page-allSegmentsOn" href="javascript://" class="buttonLink">all segments on</a>
          <a id="page-allSegmentsOff" href="javascript://" class="buttonLink">all segments off</a>
          <a id="page-invertSegmentsState" href="javascript://" class="buttonLink">invert all segments</a>
        </td>
        <td class="paneSpacer"></td>
        <td class="pane">
          <a id="page-animate0to9" href="javascript://" class="buttonLink ">count up from 0 to 9</a>
          <a id="page-animate9to0" href="javascript://" class="buttonLink ">count down from 9 to 0</a>
          <a id="page-animateAllSegmentsOn" href="javascript://" class="buttonLink ">animate all segments on</a>
          <a id="page-animateClockwise" href="javascript://" class="buttonLink ">animate clockwise</a>
          <a id="page-animateCounterClockwise" href="javascript://" class="buttonLink ">animate counter-clockwise</a>
          <a id="page-animateMoveUpwards" href="javascript://" class="buttonLink ">animate move upwards</a>
          <a id="page-animateMoveDownwards" href="javascript://" class="buttonLink ">animate move downwards</a>
          <a id="page-animEight" href="javascript://" class="buttonLink ">anim-eight</a>
          <a id="page-animateBlinky" href="javascript://" class="buttonLink ">blinky</a>
          <a id="page-animateThroughAll" href="javascript://" class="buttonLink ">animate through all values</a>
        </td>
      </tr>
    </table>
    </form>
</div>

<!-- JavaScript code to make the static slider HTML "come alive" -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widgets.SegmentDisplay.Seven.Widget',
    'Uize.Fade.Factory',
    'Uize.Curve'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    /*** build the values set for the value selector (before wiring the UI, so there's no UI updating) ***/
      var
        alphaValues = [],
        miscCharValues = [],
        hexValues = []
      ;
      for (var segmentsState = -1; ++segmentsState < 128;) {
        var value = Uize.Widgets.SegmentDisplay.Seven.Widget.getValueFromSegmentsState (segmentsState);
        (value.length > 1 ? hexValues : /^[0-9a-zA-Z]$/.test (value) ? alphaValues : miscCharValues).push (value);
      }
      alphaValues.sort ();
      var values = alphaValues.concat (miscCharValues,hexValues);

    /*** add the Uize.Widgets.SegmentDisplay.Seven.Widget child widget ***/
      var sevenSegmentDisplay = page.addChild (
        'sevenSegmentDisplay',
        Uize.Widgets.SegmentDisplay.Seven.Widget,
        {
          segmentThickness:26,
          width:164,
          height:246,
          built:false
        }
      );

    /*** wire up the page widget ***/
      page.wireUi ();

    /*** wire toggling behavior for individual segments of seven segment display ***/
      sevenSegmentDisplay.forEachSegment (
        function (segmentNo,segmentCode) {
          var segmentNode = this.getNode ('segment' + segmentCode);
          page.injectNodeHtml (
            segmentNode,
            '<table cellspacing="0" cellpadding="0" class="segmentLabel">' +
              '<tr valign="center">' +
                '<td>' + segmentCode + '</td>' +
              '</tr>' +
            '</table>'
          );
          this.setNodeProperties (
            segmentNode,
            {title:'Segment ' + segmentCode + ' (click to toggle state)'}
          );
          this.wireNode (
            segmentNode,
            'click',
            function () {sevenSegmentDisplay.toggleSegmentState (segmentNo)}
          );
        }
      );

    /*** wire up ABCDEFG and GFEDCBA segment tables ***/
      function updateSegmentTables () {
        sevenSegmentDisplay.forEachSegment (
          function (segmentNo,segmentCode) {
            page.setNodeInnerHtml (
              ['abcdefgSegments' + segmentCode,'gfedcbaSegments' + segmentCode],
              +this.getSegmentState (segmentNo)
            );
          }
        );
        page.setNodeInnerHtml ('abcdefgHex','HEX VALUE: ' + sevenSegmentDisplay.getSegmentsStateAsHex ());
        page.setNodeInnerHtml ('gfedcbaHex','HEX VALUE: ' + sevenSegmentDisplay.getSegmentsStateAsHex (true));
      }
      sevenSegmentDisplay.forEachSegment (
        function (segmentNo,segmentCode) {
          var segmentNodeNames = ['abcdefgSegments' + segmentCode,'gfedcbaSegments' + segmentCode];
          page.setNodeProperties (segmentNodeNames,{title:'Click to toggle state'});
          page.setNodeStyle (segmentNodeNames,{cursor:'pointer'});
          page.wireNode (
            segmentNodeNames,
            'click',
            function () {sevenSegmentDisplay.toggleSegmentState (segmentNo)}
          );
        }
      );

    /*** populate and wire up value selector ***/
      /*** populate values for the value selector ***/
        var valueSelectorOptions = page.getNode ('valueSelector').options;
        for (var valueNo = -1; ++valueNo < 128;) {
          var value = values [valueNo];
          valueSelectorOptions [valueSelectorOptions.length] = new Option (
            (
              /^[0-9]$/.test (value)
                ? 'digit'
                : /^[a-z]$/.test (value)
                  ? 'lowercase'
                  : /^[A-Z]$/.test (value)
                    ? 'capital'
                    : value.length == 1
                      ? 'punctuation'
                      : 'hex'
            ) + ': ' + value,
            value
          );
        }

      /*** wire events for the value selector ***/
        function syncSeventSegmentDisplayToValueSelector () {
          sevenSegmentDisplay.set ({value:page.getNodeValue ('valueSelector')});
        }
        page.wireNode ('valueSelector','change',syncSeventSegmentDisplayToValueSelector);

      /*** wire seven segment display widget to sync value selector ***/
        sevenSegmentDisplay.wire (
          'Changed.value',
          function () {
            page.setNodeValue ('valueSelector',sevenSegmentDisplay + '');
            updateSegmentTables ();
          }
        );

    /*** wire up all on, all off, and invert links ***/
      page.wireNode ('allSegmentsOn','click',function () {sevenSegmentDisplay.setAllSegmentsState (1)});
      page.wireNode ('allSegmentsOff','click',function () {sevenSegmentDisplay.setAllSegmentsState (0)});
      page.wireNode ('invertSegmentsState','click',function () {sevenSegmentDisplay.invertAllSegmentsState ()});

    /*** wire up animation links ***/
      function wireAnimateThroughValuesLink (nodeName,values,duration,repeats) {
        page.wireNode (
          nodeName,
          'click',
          function () {
            Uize.Fade.Factory.fade (
              function (valueNo) {sevenSegmentDisplay.set ({value:values [valueNo]})},
              0,
              values.length - 1,
              duration,
              {
                quantization:1,
                curve:repeats && repeats > 1 ? Uize.Curve.saw (repeats,1) : null
              }
            );
          }
        );
      }
      wireAnimateThroughValuesLink ('animate0to9',[0,1,2,3,4,5,6,7,8,9],3000);
      wireAnimateThroughValuesLink ('animate9to0',[9,8,7,6,5,4,3,2,1,0],3000);
      wireAnimateThroughValuesLink ('animateAllSegmentsOn',[' ','0x40','0x60','7',']','0x7c','0','8'],3000);
      wireAnimateThroughValuesLink ('animateClockwise',['0x40','0x20','0x10','_','i','0x02',],2000,5);
      wireAnimateThroughValuesLink ('animateCounterClockwise',['0x40','0x02','i','_','0x10','0x20'],2000,5);
      wireAnimateThroughValuesLink ('animateMoveUpwards',['_','0x14','-','0x22','0x40'],2000,5);
      wireAnimateThroughValuesLink ('animateMoveDownwards',['0x40','0x22','-','0x14','_'],2000,5);
      wireAnimateThroughValuesLink ('animEight',['_','i','-','0x20','0x40','0x02','-','0x10'],4000,5);
      wireAnimateThroughValuesLink (
        'animateBlinky',
        ['0x06',' ','0x06',' ','0x06',' ','0x49',' ','0x49',' ','0x49',' ',1,' ',1,' ',1,' '],
        2000
      );
      wireAnimateThroughValuesLink ('animateThroughAll',values,15000);

    /*** initialize ***/
      syncSeventSegmentDisplayToValueSelector ();
  }
);

</script>

</body>
</html>