You are on page 1of 10

c

cc  
c  
cc
c  c

<!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 name="keywords" content="widget Uize.Widget.SegmentDisplay.Seven"/>
<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"/>
<link rel="stylesheet" href="../css/widget.segmentdisplay.seven.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:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
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>

<script type="text/javascript">

var
segmentThickness = 26,
displayWidth = 164,
displayHeight = 246,
segmentGap = 1,
segmentThicknessDiv2 = segmentThickness / 2,
segmentThicknessPlusSegmentGap = segmentThickness + segmentGap,
styleTag =
'<style type="text/css">\n' +
' .sevenSeg {\n' +
' width:' + displayWidth + 'px;\n' +
' height:' + displayHeight + 'px;\n' +
' }\n' +
' .sevenSegSegmentEnd {\n' +
' border-width:' + segmentThicknessDiv2 + 'px;\n' +
' }\n' +
' .sevenSegHorzSegment {\n' +
' height:' + segmentThickness + 'px;\n' +
' }\n' +
' .sevenSegHorzSegmentMiddle {\n' +
' top:' + (displayHeight / 2 - segmentThicknessDiv2) + 'px;\n' +
' }\n' +
' .sevenSegSegmentLeftEnd {\n' +
' left:' + segmentGap + 'px;\n' +
' }\n' +
' .sevenSegHorzSegment .sevenSegSegmentBar {\n' +
' left:' + segmentThicknessPlusSegmentGap + 'px;\n' +
' right:' + segmentThicknessPlusSegmentGap + 'px;\n' +
' }\n' +
' .sevenSegSegmentRightEnd {\n' +
' right:' + segmentGap + 'px;\n' +
' }\n' +
' .sevenSegVertSegment {\n' +
' width:' + segmentThickness + 'px;\n' +
' }\n' +
' .sevenSegSegmentTopEnd {\n' +
' top:' + segmentGap + 'px;\n' +
' }\n' +
' .sevenSegVertSegment .sevenSegSegmentBar {\n' +
' top:' + segmentThicknessPlusSegmentGap + 'px;\n' +
' bottom:' + segmentThicknessPlusSegmentGap + 'px;\n' +
' }\n' +
' .sevenSegSegmentBottomEnd {\n' +
' bottom:' + segmentGap + 'px;\n' +
' }\n' +
' .sevenSegVertSegmentTop .sevenSegSegmentBottomEnd {\n' +
' bottom:' + (segmentGap - segmentThicknessDiv2) + 'px;\n' +
' }\n' +
' .sevenSegVertSegmentTop .sevenSegSegmentBar {\n' +
' bottom:' + (segmentGap + segmentThicknessDiv2) + 'px;\n' +
' }\n' +
' .sevenSegVertSegmentBottom .sevenSegSegmentTopEnd {\n' +
' top:' + (segmentGap - segmentThicknessDiv2) + 'px;\n' +
' }\n' +
' .sevenSegVertSegmentBottom .sevenSegSegmentBar {\n' +
' top:' + (segmentGap + segmentThicknessDiv2) + 'px;\n' +
' }\n' +
'</style>\n'
;

document.writeln (styleTag);

</script>

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

<div class="main">
<!-- explanation copy -->

<div class="explanation">
<p>In this example, an instance of the <a
href="../reference/Uize.Widget.SegmentDisplay.Seven.html"><code>Uize.Widget.S
egmentDisplay.Seven</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-shell"
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.module ({
required:[
'UizeDotCom.Page.Example.library',
'UizeDotCom.Page.Example',
'Uize.Widget.SegmentDisplay.Seven',
'Uize.Templates.SevenSegmentDisplay',
'Uize.Node',
'Uize.Fade',
'Uize.Fade.xFactory',
'Uize.Curve'
],
builder:function () {
/*** create the example page widget ***/
var page = window.page = new UizeDotCom.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.Widget.SegmentDisplay.Seven.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.Widget.SegmentDisplay.Seven child widget ***/


var sevenSegmentDisplay = page.addChild (
'sevenSegmentDisplay',
Uize.Widget.SegmentDisplay.Seven,
{html:Uize.Templates.SevenSegmentDisplay,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.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>

c c  c
— 
       
                 

  !  ""  # —  — —  $
  %    
& ' (  
)*++, -.**!/0!/1%  
2 3%   !   4  — 
  
!4!—43 54 !4
5(67 87# 
8 
  
8  $   
8     
 934 5!6:"  
8 " %   
8  
8; 
 
3436(3 -<-8(3 7-,8(3 7=,8>? * *8(- *
  @   ! /    & 3   3    ?   5 ! ( ! 3     ( ? 3 4  !      5   
c