Dejvino
3 years ago
1 changed files with 23 additions and 52 deletions
Split View
Diff Options
-
+23 -52index.html
nixie.html → index.html
View File
| @@ -3,6 +3,16 @@ | |||
| <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"> | |||
| @@ -66,7 +76,7 @@ | |||
| <body> | |||
| <div style="text-align: center; display: none"> | |||
| <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; "> | |||
| @@ -78,7 +88,7 @@ | |||
| <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> | |||
| <table style="margin: 0 auto; "><tr><td> | |||
| <div style="background: white; padding: 5px 20px; border: none;"> | |||
| <div id="ndTime1" style=""> | |||
| </div> | |||
| @@ -107,12 +117,12 @@ | |||
| nixieDate1 = new NixieDisplay(); | |||
| nixieDate1.id = 'ndDate1'; | |||
| nixieDate1.charCount = 8; | |||
| 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')); | |||
| 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; | |||
| @@ -122,33 +132,17 @@ | |||
| nd.__skinId = (nd.__skinId + 1) % nd.__skinCount; | |||
| switch (nd.__skinId) { | |||
| case 0: | |||
| nd.urlCharsetImage = 'zm1082_l1_09bdm_62x150_8b.png'; | |||
| nd.urlCharsetImage = 'zm1080_d1_09bdm_62x100_8b.png'; | |||
| nd.charWidth = 62; | |||
| nd.charHeight = 150; | |||
| nixieDate1.extraGapsWidths[3] = 20; | |||
| nixieDate1.extraGapsWidths[5] = 20; | |||
| nd.charGapWidth = 0; | |||
| document.getElementById(nd.id).parentNode.style.background = "white"; | |||
| document.getElementById(nd.id).parentNode.style.border = "none"; | |||
| 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: | |||
| nd.urlCharsetImage = 'zm1080_l1_09bdm_62x150_8b.png'; | |||
| nd.charWidth = 62; | |||
| nd.charHeight = 150; | |||
| nixieDate1.extraGapsWidths[3] = 20; | |||
| nixieDate1.extraGapsWidths[5] = 20; | |||
| 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; | |||
| nixieDate1.extraGapsWidths[3] = 20; | |||
| nixieDate1.extraGapsWidths[5] = 20; | |||
| nd.charGapWidth = 10; | |||
| document.getElementById(nd.id).parentNode.style.background = "black"; | |||
| break; | |||
| } | |||
| nd.init(); | |||
| @@ -175,41 +169,18 @@ | |||
| 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.extraGapsWidths[1] = 15; | |||
| nd.extraGapsWidths[3] = 15; | |||
| 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.extraGapsWidths[1] = 15; | |||
| nd.extraGapsWidths[3] = 15; | |||
| 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.extraGapsWidths[1] = 12; | |||
| nd.extraGapsWidths[3] = 12; | |||
| nd.charGapWidth = 10; | |||
| document.getElementById(nd.id).parentNode.style.background = "black"; | |||
| break; | |||
| case 3: | |||
| nd.urlCharsetImage = 'zm1080_d1_09bdm_62x100_8b.png'; | |||
| nd.charWidth = 62; | |||
| nd.charHeight = 100; | |||
| nd.extraGapsWidths[1] = 20; | |||
| nd.extraGapsWidths[3] = 20; | |||
| nd.charGapWidth = 10; | |||
| nd.extraGapsWidths[1] = 30; | |||
| nd.extraGapsWidths[3] = 30; | |||
| nd.charGapWidth = 20; | |||
| document.getElementById(nd.id).parentNode.style.background = "black"; | |||
| break; | |||
| } | |||