SOURCE CODE: Seven Segment Display: View Example

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

<div class="explanation">
<p>In this example, an instance of the <a
href="../reference/Uize.Widget.SegmentDisplay.Seven.html"><code>Uize.Widget.Se
gmentDisplay.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>


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

<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 () {
page.setNodeInnerHtml (
['abcdefgSegments' + segmentCode,'gfedcbaSegments' +
segmentCode],
+this.getSegmentState (segmentNo)
);
}
);
page.setNodeInnerHtml ('abcdefgHex','HEX VALUE: ' +
sevenSegmentDisplay.getSegmentsStateAsHex ());
page.setNodeInnerHtml ('gfedcbaHex','HEX VALUE: ' +
sevenSegmentDisplay.getSegmentsStateAsHex (true));
}
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>
SHARE THIS USING...
Personal E-mail...Facebook...Twitter...StumbleUpon...del.icio.us...Digg...Reddit...FriendFeed...MySpace...Google
Bookmarks...LinkedIn...Mixx...Technorati...Posterous...Plurk...Ping.fm...Diigo...Faves...Mister
Wong...dzone...Connotea...
© 1997-2011 UIZE (UIZE JavaScript Framework) -- Available under MIT License or GNU General Public
License
INDISPENSABLE ONLINE
RESOURCES: w3c.org | w3schools.com | webmonkey.com | webreference.com | wikipedia.org
RELEVANT BLOG SITES: ajaxian.com | sixrevisions.com | alistapart.com | quirksmode.org
STANDARDS: ECMA-262 | ECMA-327 | ECMA-357 | XHTML 1.1 | CSS 2.1
B U Y U I Z E S W A G A T T H E O F F I C I A L M E R C H A N D I S E S T O R E

SOURCE CODE: Seven Segment Display: View Example

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SOURCE CODE: Seven Segment Display: View Example

Uploaded by

Copyright:

Available Formats

SOURCE CODE: Seven Segment Display

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

/* value selector heading */

/* segment tables */

/* segment labels */

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

<table cellspacing="0" class="segmentTable" style="width:100%;">

<table cellspacing="0" class="segmentTable" style="width:100%;

<a id="page-allSegmentsOn" href="javascript://"

/* add the Uize.Widget.SegmentDisplay.Seven child widget */

/* wire up the page widget */

/*** wire toggling behavior for individual segments of seven segment

/* wire up ABCDEFG and GFEDCBA segment tables */

/* populate and wire up value selector */

/* wire events for the value selector */

/* wire up animation links */

/* initialize */

You might also like