|
|
@@ -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; |
|
|
|
} |