dejvino/NixieClockWeb
1
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity
ea4e896e6a
NixieClockWeb/nixie.html
Dejvino ea4e896e6a Import
2021-01-24 12:13:08 +01:00

288 lines
9.2 KiB
HTML
Raw Blame History

<!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" />
<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; display: none">
<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 &nbsp; [Q] sqr &nbsp; [^] pow &nbsp; [m] +/- &nbsp; [p] PI &nbsp; [Enter] = &nbsp; [Esc] clear
</div>
</td></tr></table>
</div>
<script type="text/javascript">
// *** Simple display ***
nixieDate1 = new NixieDisplay();
nixieDate1.id = 'ndDate1';
nixieDate1.charCount = 8;
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 = 'zm1082_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 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();
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:
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;
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>
Reference in New Issue View Git Blame Copy Permalink