dejvino
/
NixieClockWeb


			
							<!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>