259 lines
7.9 KiB
HTML
259 lines
7.9 KiB
HTML
<!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" />
|
|
<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">
|
|
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;">
|
|
<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 [Q] sqr [^] pow [m] +/- [p] PI [Enter] = [Esc] clear
|
|
</div>
|
|
</td></tr></table>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
// *** Simple display ***
|
|
|
|
nixieDate1 = new NixieDisplay();
|
|
nixieDate1.id = 'ndDate1';
|
|
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'));
|
|
|
|
// 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 = 'zm1080_d1_09bdm_62x100_8b.png';
|
|
nd.charWidth = 62;
|
|
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:
|
|
break;
|
|
case 2:
|
|
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:
|
|
break;
|
|
case 1:
|
|
break;
|
|
case 2:
|
|
break;
|
|
case 3:
|
|
nd.urlCharsetImage = 'zm1080_d1_09bdm_62x100_8b.png';
|
|
nd.charWidth = 62;
|
|
nd.charHeight = 100;
|
|
nd.extraGapsWidths[1] = 30;
|
|
nd.extraGapsWidths[3] = 30;
|
|
nd.charGapWidth = 20;
|
|
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>
|