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

Add date

Browse Source
This commit is contained in:
Dejvino 2021-01-24 13:20:08 +01:00
parent ea4e896e6a
commit 37a400187a
1 changed files with 23 additions and 52 deletions
Show Stats Download Patch File Download Diff File 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"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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> <title>Virtual nixie tube display</title>
<script type="text/javascript" src="nixie.js?1"></script> <script type="text/javascript" src="nixie.js?1"></script>
<style type="text/css"> <style type="text/css">
@ -66,7 +76,7 @@
<body> <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> <div style="position: absolute; right: 3em;"><a href="#" id="ndDate1SkinSwitch" class="skin-switch">skin...</a></div>
<table style="margin: 0 auto;"><tr><td> <table style="margin: 0 auto;"><tr><td>
<div style="background: black; padding: 5px 20px; "> <div style="background: black; padding: 5px 20px; ">
@ -78,7 +88,7 @@
<div style="text-align: center; margin-top: 4em;"> <div style="text-align: center; margin-top: 4em;">
<div style="position: absolute; right: 3em;"><a href="#" id="ndTime1SkinSwitch" class="skin-switch">skin...</a></div> <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 style="background: white; padding: 5px 20px; border: none;">
<div id="ndTime1" style=""> <div id="ndTime1" style="">
</div> </div>
@ -107,12 +117,12 @@
nixieDate1 = new NixieDisplay(); nixieDate1 = new NixieDisplay();
nixieDate1.id = 'ndDate1'; nixieDate1.id = 'ndDate1';
nixieDate1.charCount = 8; nixieDate1.charCount = 8 + 2;
nixieDate1.extraGapsWidths[3] = 20; nixieDate1.extraGapsWidths[3] = 20;
nixieDate1.extraGapsWidths[5] = 20; nixieDate1.extraGapsWidths[5] = 20;
nixieDate1.init(); nixieDate1.init();
var d = new Date(); 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 // setup skin switching
nixieDate1.__skinId = 0 - 1; nixieDate1.__skinId = 0 - 1;
@ -122,33 +132,17 @@
nd.__skinId = (nd.__skinId + 1) % nd.__skinCount; nd.__skinId = (nd.__skinId + 1) % nd.__skinCount;
switch (nd.__skinId) { switch (nd.__skinId) {
case 0: case 0:
nd.urlCharsetImage = 'zm1082_l1_09bdm_62x150_8b.png'; nd.urlCharsetImage = 'zm1080_d1_09bdm_62x100_8b.png';
nd.charWidth = 62; nd.charWidth = 62;
nd.charHeight = 150; nd.charHeight = 100;
nixieDate1.extraGapsWidths[3] = 20; nd.extraGapsWidths[3] = 0;
nixieDate1.extraGapsWidths[5] = 20; nd.extraGapsWidths[5] = 0;
nd.charGapWidth = 0; nd.charGapWidth = 4;
document.getElementById(nd.id).parentNode.style.background = "white"; document.getElementById(nd.id).parentNode.style.background = "black";
document.getElementById(nd.id).parentNode.style.border = "none";
break; break;
case 1: 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; break;
case 2: 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; break;
} }
nd.init(); nd.init();
@ -175,41 +169,18 @@
nd.__skinId = (nd.__skinId + 1) % nd.__skinCount; nd.__skinId = (nd.__skinId + 1) % nd.__skinCount;
switch (nd.__skinId) { switch (nd.__skinId) {
case 0: 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; break;
case 1: 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; break;
case 2: 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; break;
case 3: case 3:
nd.urlCharsetImage = 'zm1080_d1_09bdm_62x100_8b.png'; nd.urlCharsetImage = 'zm1080_d1_09bdm_62x100_8b.png';
nd.charWidth = 62; nd.charWidth = 62;
nd.charHeight = 100; nd.charHeight = 100;
nd.extraGapsWidths[1] = 20; nd.extraGapsWidths[1] = 30;
nd.extraGapsWidths[3] = 20; nd.extraGapsWidths[3] = 30;
nd.charGapWidth = 10; nd.charGapWidth = 20;
document.getElementById(nd.id).parentNode.style.background = "black"; document.getElementById(nd.id).parentNode.style.background = "black";
break; break;
} }