dejvino/NixieClockWeb
1
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

Compare commits

base: dejvino:v0.0.1
Branches Tags
dejvino:master
dejvino:v0.0.1
...
compare: dejvino:master
Branches Tags
dejvino:master
dejvino:v0.0.1

1 Commits
v0.0.1 ... master

Author SHA1 Message Date
Dejvino
37a400187a Add date 2021-01-24 13:20:08 +01:00
1 changed files with 23 additions and 52 deletions
Show Stats Expand all files Collapse all files

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