|
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!-- SOURCE: http://cestmir.freeside.sk/projects/dhtml-nixie-display/ -->
- <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
- <script type='text/javascript' charset='utf-8'>
- // Hides mobile browser's address bar when page is done loading.
- window.addEventListener('load', function(e) {
- setTimeout(function() { window.scrollTo(0, 1); }, 1);
- }, false);
- </script>
-
- <title>Virtual nixie tube display</title>
- <script type="text/javascript" src="nixie.js?1"></script>
- <style type="text/css">
- html, body, td, th {
- font-family: Verdana, Arial, Helvetica, sans-serif;
- font-size: 12px;
- color: black;
- background-color: black;
- }
- body {
- margin: 30px;
- }
- th {
- text-align: left;
- vertical-align: top;
- font-weight: normal;
- font-style: italic;
- white-space: nowrap;
- }
- h1, h2, h3, h4, h5, h6 {
- border-bottom: 1px solid #DFDFDF;
- color: #660000;
- font-weight: normal;
- }
- h1 {
- font-size: 24px;
- }
- h2 {
- font-size: 18px;
- margin-top: 1.5em;
- }
- h3 {
- font-size: 16px;
- }
- h4 {
- font-size: 12px;
- }
- h5 {
- font-size: 12px;
- font-weight: bold;
- }
- .note {
- font-size: 9px;
- }
- li {
- margin: 0.2em;
- }
- table.references td {
- vertical-align: top;
- }
- .skin-switch {
- display: none;
- font-size: 9px;
- }
- pre {
- font-weight: bold;
- color: #333333;
- }
- </style>
- </head>
-
- <body>
-
- <div style="text-align: center;">
- <div style="position: absolute; right: 3em;"><a href="#" id="ndDate1SkinSwitch" class="skin-switch">skin...</a></div>
- <table style="margin: 0 auto;"><tr><td>
- <div style="background: black; padding: 5px 20px; ">
- <div id="ndDate1" style="">
- </div>
- </div>
- </td></tr></table>
- </div>
-
- <div style="text-align: center; margin-top: 4em;">
- <div style="position: absolute; right: 3em;"><a href="#" id="ndTime1SkinSwitch" class="skin-switch">skin...</a></div>
- <table style="margin: 0 auto; "><tr><td>
- <div style="background: white; padding: 5px 20px; border: none;">
- <div id="ndTime1" style="">
- </div>
- </div>
- </td></tr></table>
- </div>
-
- <div style="text-align: center; display:none;">
- <div style="position: absolute; right: 3em;"><a href="#" id="ndCalc1SkinSwitch" class="skin-switch">skin...</a></div>
- <table style="margin: 0 auto;"><tr><td>
- <div style="background: black; padding: 5px 20px; ">
- <div id="ndCalc1" style="">
- </div>
- </div>
- <div style="font-size: 80%; line-height: 150%;">
- (just type expressions on keyboard as on any basic electronic calculator)<br />
- [q] sqrt [Q] sqr [^] pow [m] +/- [p] PI [Enter] = [Esc] clear
- </div>
- </td></tr></table>
- </div>
-
-
- <script type="text/javascript">
-
- // *** Simple display ***
-
- nixieDate1 = new NixieDisplay();
- nixieDate1.id = 'ndDate1';
- nixieDate1.charCount = 8 + 2;
- nixieDate1.extraGapsWidths[3] = 20;
- nixieDate1.extraGapsWidths[5] = 20;
- nixieDate1.init();
- var d = new Date();
- nixieDate1.setText(d.getFullYear().toString() + '-' + (d.getMonth() + 1).toString().replace(/^(\d)$/, '0$1') + '-' + d.getDate().toString().replace(/^(\d)$/, '0$1'));
-
- // setup skin switching
- nixieDate1.__skinId = 0 - 1;
- nixieDate1.__skinCount = 3;
- nixieDate1.__skinSwitch = function() {
- var nd = nixieDate1;
- nd.__skinId = (nd.__skinId + 1) % nd.__skinCount;
- switch (nd.__skinId) {
- case 0:
- nd.urlCharsetImage = 'zm1080_d1_09bdm_62x100_8b.png';
- nd.charWidth = 62;
- nd.charHeight = 100;
- nd.extraGapsWidths[3] = 0;
- nd.extraGapsWidths[5] = 0;
- nd.charGapWidth = 4;
- document.getElementById(nd.id).parentNode.style.background = "black";
- break;
- case 1:
- break;
- case 2:
- break;
- }
- nd.init();
-
- return false;
- }
- document.getElementById('ndDate1SkinSwitch').onclick = nixieDate1.__skinSwitch; // attach skinswitch event handler
- nixieDate1.__skinSwitch(); // assign primary skin
-
-
-
- // *** Clock ***
-
- nixieTime1 = new NixieClock(); // create component instance
- nixieTime1.id = 'ndTime1'; // assign instance id
- nixieTime1.init(); // initialize component (after assigning params)
- nixieTime1.run(); // run clock
-
- // setup skin switching
- nixieTime1.__skinId = 3 - 1;
- nixieTime1.__skinCount = 4;
- nixieTime1.__skinSwitch = function() {
- var nd = nixieTime1;
- nd.__skinId = (nd.__skinId + 1) % nd.__skinCount;
- switch (nd.__skinId) {
- case 0:
- break;
- case 1:
- break;
- case 2:
- break;
- case 3:
- nd.urlCharsetImage = 'zm1080_d1_09bdm_62x100_8b.png';
- nd.charWidth = 62;
- nd.charHeight = 100;
- nd.extraGapsWidths[1] = 30;
- nd.extraGapsWidths[3] = 30;
- nd.charGapWidth = 20;
- document.getElementById(nd.id).parentNode.style.background = "black";
- break;
- }
- nd.init();
-
- return false;
- }
- document.getElementById('ndTime1SkinSwitch').onclick = nixieTime1.__skinSwitch; // attach skinswitch event handler
- nixieTime1.__skinSwitch(); // assign primary skin
-
-
-
- // *** Calculaor ***
-
- nixieCalc1 = new NixieCalculator(); // create component instance
- nixieCalc1.id = 'ndCalc1'; // assign instance id
-
- // assign keyboard event handlers
- document.onkeydown = function(e0) { return nixieCalc1.keyDown(e0); };
- document.onkeypress = function(e0) { return nixieCalc1.keyPress(e0); };
-
- nixieCalc1.init(); // initialize component (after assigning params)
-
- // setup skin switching
- nixieCalc1.display.__skinId = 2 - 1;
- nixieCalc1.display.__skinCount = 4;
- nixieCalc1.__skinSwitch = function() {
- var nd = nixieCalc1.display;
- nd.__skinId = (nd.__skinId + 1) % nd.__skinCount;
- switch (nd.__skinId) {
- case 0:
- nd.urlCharsetImage = 'zm1082_l1_09bdm_62x150_8b.png';
- nd.charWidth = 62;
- nd.charHeight = 150;
- nd.charGapWidth = 0;
- document.getElementById(nd.id).parentNode.style.background = "white";
- document.getElementById(nd.id).parentNode.style.border = "none";
- break;
- case 1:
- nd.urlCharsetImage = 'zm1080_l1_09bdm_62x150_8b.png';
- nd.charWidth = 62;
- nd.charHeight = 150;
- nd.charGapWidth = 0;
- document.getElementById(nd.id).parentNode.style.background = "white";
- document.getElementById(nd.id).parentNode.style.border = "none";
- break;
- case 2:
- nd.urlCharsetImage = 'zm1080_l2_09bdm_45x75_8b.png';
- nd.charWidth = 45;
- nd.charHeight = 75;
- nd.charGapWidth = 10;
- document.getElementById(nd.id).parentNode.style.background = "black";
- document.getElementById(nd.id).parentNode.style.border = "2px solid #AAAAAA";
- break;
- case 3:
- nd.urlCharsetImage = 'zm1080_d1_09bdm_46x75_8b.png';
- nd.charWidth = 46;
- nd.charHeight = 75;
- nd.charGapWidth = 10;
- document.getElementById(nd.id).parentNode.style.background = "black";
- document.getElementById(nd.id).parentNode.style.border = "2px solid #AAAAAA";
- break;
- }
- nd.init();
-
- return false;
- }
- document.getElementById('ndCalc1SkinSwitch').onclick = nixieCalc1.__skinSwitch; // attach skinswitch event handler
- nixieCalc1.__skinSwitch(); // assign primary skin
-
- </script>
-
- </body>
-
- </html>
|