NixieClockWeb/nixie.js

/****************************************************************************

    Virtual nixie tube display, clock & calculator DHTML components

    v 1.05, 20080214a

    (c) 2007-08 Cestmir Hybl, cestmir.hybl@nustep.net
    http://cestmir.freeside.sk/projects/dhtml-nixie-display

    license: free for non-commercial use, copyright must be preserved

 ****************************************************************************/



/*   NixieDisplay   */

// public class NixieDisplay
function NixieDisplay()
{
  // public
  this.id = 'nixie';
  this.elContainer = null;
  this.charCount = 10;
  this.autoDecimalPoint = true;  // automatically extracts decimal point index in setText() call
  this.align = 'left';           // alignment of text via setText() call
  this.afterUpdate = null;   // after display update callback

  this.charWidth = 62;
  this.charHeight = 150;
  this.charGapWidth = 0;
  this.extraGapsWidths = [];
  this.createCharElements = true;

  this.text = '';
  this.decimalPoint = -1;

  this.urlCharsetImage = 'nixie/zm1082_l1_09bdm_62x150_8b.png';
  this.charMap = {
      0: 0,   1: 1,   2: 2,   3: 3,   4: 4,   5: 5,   6: 6,   7: 7,   8: 8,   9: 9,
    '0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9, ' ': 10, '-': 11,
    'default': 10
  };
    // maps displayable chars onto glyph matrix indexes

  // protected
  function _drawChar(index)
  {
    var el = document.getElementById(this.id + '_d' + index);
    var charIndex = this.charMap[this.text.charAt(index)];
    if (!charIndex && charIndex !== 0)
      charIndex = this.charMap['default'];
    var x = - (charIndex * this.charWidth);
    var y = (index === this.decimalPoint ? - this.charHeight : 0);
    el.style.backgroundPosition = x + 'px ' + y + 'px';
  }
  this._drawChar = _drawChar;

  // Shows given string on display
  // public
  function setText(text, updateDecimalPoint)
  {
    // force string type
    this.text = text + '';

    // extract decimal point
    updateDecimalPoint = (typeof(updateDecimalPoint) != 'undefined' ? updateDecimalPoint : this.autoDecimalPoint);
    if (updateDecimalPoint) {
      var i = this.text.indexOf('.');
      if (i >= 0) {
        this.decimalPoint = i - 1;
        // alert(this.decimalPoint);
        this.text = this.text.substr(0, i) + this.text.substr(i + 1);
      } else
        this.decimalPoint = -1;
    }

    // pad up to display width (from left/right acording to this.align)
    if (this.text.length < this.charCount) {
      var pad = '';
      var padWidth = this.charCount - this.text.length;
      for (var i = 0; i < padWidth; i++)
        pad += ' ';
      if (this.align == 'left')
        this.text = this.text + pad;
      else {
        if (this.decimalPoint >= 0)
          this.decimalPoint += padWidth;
        this.text = pad + this.text;
      }
    }

    if (this.text.length > this.charCount)
      this.text = this.text.substr(0, this.charCount);

    // draw chars
    for (var i = 0; i < this.text.length; i++) {
      this._drawChar(i);
    }

    if (this.afterUpdate)
      this.afterUpdate(this);
  }
  this.setText = setText;

  // Sets char at given display position
  // public
  function setChar(index, chr)
  {
    // alert(chr);
    this.text = this.text.substring(0, index) + chr + this.text.substring(index + 1);
    this.setText(this.text, false);
  }
  this.setChar = setChar;

  function setDecimalPoint(index)
  {
    var oldDecimalPoint = this.decimalPoint;
    this.decimalPoint = ((!index && index !== 0) ? -1 : index);
    if (oldDecimalPoint != this.decimalPoint) {
      if (oldDecimalPoint >= 0)
        this._drawChar(oldDecimalPoint);
      if (this.decimalPoint >= 0)
        this._drawChar(this.decimalPoint);
    }
  }
  this.setDecimalPoint = setDecimalPoint;

  // Clears display - fills all positions with given char (space by default).
  // public
  function clear(chr)
  {
    chr = (typeof(chr) == 'undefined' ? ' ' : chr);
    this.text = '';
    for (var i = 0; i < this.charCount; i++)
      this.text += chr;
    this.decimalPoint = -1;
    this.setText(this.text);
  }
  this.clear = clear;

  // Shifts display contents left or right
  // public
  function shift(direction, step)
  {
    step = (!step && step !== 0 ? 1 : step);
    direction = (!direction ? 'left' : direction);

    if (this.decimalPoint >= 0) {
      this.decimalPoint += (direction == 'left' ? - step : + step);
      if (this.decimalPoint >= this.charCount)
        this.decimalPoint = -1;
    }

    if (direction == 'left')
      this.text = this.text.substr(step) + ' '; // @todo padding for step != +/-1
    else if (direction == 'right')
      this.text = ' ' + this.text.substr(0, this.text.length - 1); // @todo padding for step != +/-1
    this.setText(this.text, false);
  }
  this.shift = shift;

  // public
  function init()
  {
    if (!this.elContainer) {
      this.elContainer = document.getElementById(this.id);
      if (!this.elContainer)
        throw "Container element '" + this.id + "' not found";
    }
    this.elContainer.style.position = 'relative';

    if (this.createCharElements) {
      var totalWidth = 0;
      for (var i = 0; i < this.charCount; i++) {
        var charWidthIncludingGap = (this.charWidth + this.charGapWidth);

        var elId = this.id + '_d' + i;
        var el0 = document.getElementById(elId);
        var el = (el0 ? el0 : document.createElement('div'));
        el.id = this.id + '_d' + i;
        el.className = 'digit d' + i;
        el.style.position = 'absolute';
        el.style.left = totalWidth + 'px';
        el.style.width = this.charWidth + 'px';
        el.style.height = this.charHeight + 'px';
        el.style.background = 'url(' + this.urlCharsetImage + ')';
        if (!el.parentNode)
          this.elContainer.appendChild(el);

        totalWidth += charWidthIncludingGap + (this.extraGapsWidths[i] ? this.extraGapsWidths[i] : 0);
      }
      this.elContainer.style.width = totalWidth + 'px';
      this.elContainer.style.height = this.charHeight + 'px';
    }

    if (this.text)
      this.setText(this.text)
    else
      this.clear();
  }
  this.init = init;
}



/*   NixieClock   */

// public class NixieClock : NixieDisplay
function NixieClock()
{
  // public

  // private
  this.lastSeconds = -1;

  // Show current time on "display"
  // public
  function showCurrentTime(refreshAfterChangeOnly)
  {
    var d = new Date();

    var s = d.getSeconds();

    if (refreshAfterChangeOnly && s == this.lastSeconds)
      return;
    else
      this.lastSeconds = s;

    var h = d.getHours();
    var m = d.getMinutes();

    var digits = '';

    digits += (h / 10) | 0;
    digits += h % 10;
    digits += (m / 10) | 0;
    digits += m % 10;
    digits += (s / 10) | 0;
    digits += s % 10;

    this.setText(digits);
  }
  this.showCurrentTime = showCurrentTime;

  // Run clock (via scheduling a periodic callback to showCurrentTime())
  // public
  function run()
  {
    if (!this.elContainer)
      this.init();
    var __nixieClock = this;
    window.setInterval(function() { __nixieClock.showCurrentTime(true); }, 100);
  }
  this.run = run;

  this.ancestor = NixieDisplay;
  this.ancestor();

  this.charCount = 6;
  this.extraGapsWidths[1] = 20;
  this.extraGapsWidths[3] = 20;
}



/*  NixieCalculator  */

// @todo rounding of rightmost digit

// public class NixieCalculator : NixieDisplay
function NixieCalculator()
{
  // public
  this.id = 'nixieCalc';
  this.digitCount = 13;
  this.display = new NixieDisplay();

  // private
  this.operandStack = [];
  this.newValueAtNextChar = false;
  this.fullPrecisionValue = 0;

  // private
  function push(value)
  {
    this.operandStack[this.operandStack.length] = value; // JS50 compatible .push()
  }
  this.push = push;

  // private
  function pop()
  {
    if (!this.operandStack.length)
      return null;
    var v = this.operandStack[this.operandStack.length - 1];
    this.operandStack = this.operandStack.slice(0, this.operandStack.length - 1); // JS50 compatible .pop()
    return v;
  }
  this.pop = pop;

  // public
  function getValue()
  {
    if (this.fullPrecisionValue !== null)
      return this.fullPrecisionValue;

    var v = this.display.text;

    // insert decimal point
    if (this.display.decimalPoint >= 0 && this.display.decimalPoint < this.digitCount - 1)
      v = v.substr(0, this.display.decimalPoint + 1) + '.' + v.substr(this.display.decimalPoint + 1);

    // remove padding spaces
    var i = 0;
    while (i < v.length && v.charAt(i) == ' ')
      i++;
    v = v.substr(i);

    // convert to number
    v = parseFloat(v);

    return v;
  }
  this.getValue = getValue;

  // public
  function setValue(v)
  {
    if (typeof(v) != 'number')
      v = parseFloat(v);
    if (isNaN(v) || v > this.maxNumber || v < -this.maxNumber)
      this.error();
    else {
      this.fullPrecisionValue = v;
      if (v.toFixed) {
        // force fixed-point notation (JS5.5+)
        var s = (v >= 0 ? ' ' : '') + v.toFixed(1);
        s = s.substring(0, s.length - 2);
        // (s now contains string with integer part of value, prefixed by either ' ' or '-')
        v = v.toFixed(this.digitCount - s.length); // to fixed point + round rightmost digit
      } else {
        v = v.toString();
        if (v.toLowerCase().indexOf('e') >= 0) {
          // we won't handle exp notation in JS<5.5
          this.error();
          return;
        }
      }
      if (v !== '0') {
        if (v.charAt(0) != '-')
          v = ' ' + v;
        var c = this.digitCount + (v.indexOf('.') >= 0 ? 1 : 0);
        if (v.length > c)
          v = v.substr(0, c);
        v = v.replace(/^(.{1,}?)\.?0+$/g, '$1'); // strip zero's from right
      }
      this.display.setText(v);
    }
  }
  this.setValue = setValue;

  // private
  function eval(v1, o, v2)
  {
    try {
      switch (o) {
        case '+':
          return v1 + v2;
        case '-':
          return v1 - v2;
        case '*':
          return v1 * v2;
        case '/':
          return v1 / v2;
        case '^':
          return Math.pow(v1, v2);
        case 'sqrt':
          return Math.sqrt(v1);
        case 'sqr':
          return v1 * v1;
        default:
          throw "Unsupported operand: '" + o + "'";
      }
    } catch(e) {
      this.error();
    }
  }
  this.eval = eval;

  // public
  function error()
  {
    var s= '';
    for (var i = 0; i < this.digitCount; i++)
      s += '-';
    this.operandStack = [];
    this.newValueAtNextChar = true;
    this.fullPrecisionValue = null;
    this.display.setText(s);
  }
  this.error = error;

  // public
  function clear()
  {
    this.display.clear();
    this.setValue(0);
    this.operandStack = [];
    this.fullPrecisionValue = null;
  }
  this.clear = clear;

  // public
  function keyDown(event0)
  {
    var e = (event0 ? event0 : event);
    var k = e.keyCode;

    var cancelEvent = true;

    if (k == 8) {
      // backspace
      if (this.display.text.charAt(this.digitCount - 2) == ' ')
        this.display.setChar(this.digitCount - 1, '0');
      else
        this.display.shift('right');
      this.fullPrecisionValue = null;
    } else if (k == 27) {
      // escape
      this.clear();
    } else
      cancelEvent = false;

    return !cancelEvent;
  }
  this.keyDown = keyDown;

  // public
  function keyPress(event0)
  {
    var e = (event0 ? event0 : event);
    var k = (e.keyCode ? e.keyCode : e.which); // IE: .keyCode, FF: .which
    var chr = String.fromCharCode(k);

    var cancelEvent = true;

    var newValueAtThisChar =  this.newValueAtNextChar;
    this.newValueAtNextChar = true;

    if (chr >= '0' && chr <= '9') {
      this.fullPrecisionValue = null;
      if (newValueAtThisChar) {
        this.display.clear();
      }
      if (this.display.text.charAt(1) == ' ' || this.display.text.charAt(1) == '-') {
        if (this.display.text.charAt(this.digitCount - 1) == '0' && this.display.text.charAt(this.digitCount - 2) == ' ' && this.display.decimalPoint < 0)
          ;
        else
          this.display.shift('left');
        this.display.setChar(this.digitCount - 1, chr);
      }
      this.newValueAtNextChar = false;
    }
    else if (chr == '.' || chr == ',') {
      this.fullPrecisionValue = null;
      if (newValueAtThisChar)
        this.display.setText(0);
      if (this.display.decimalPoint < 0)
        this.display.setDecimalPoint(this.digitCount - 1);
      this.newValueAtNextChar = false;
    }
    else if (chr == '+' || chr == '-' || chr == '*' || chr == '/' || chr == '^') {
      if (this.operandStack.length > 2)
        // cancel repeated evaluation
        this.operandStack = [];
      if (this.operandStack.length == 2) {
        // previous expression without explicit '=', evaluate it
        this.setValue(this.eval(this.operandStack[this.operandStack.length - 2], this.operandStack[this.operandStack.length - 1], this.getValue()));
        this.operandStack = [];
      }
      // push left operand
      this.push(this.getValue());
      // push operator
      this.push(chr);
    }
    else if (chr == 'm' || chr == 'M') {
      this.setValue(- this.getValue());
      this.newValueAtNextChar = false;
    }
    else if (chr == 'p' || chr == 'P') {
      this.setValue(Math.PI);
    }
    else if (chr == 'q') {
      this.setValue(this.eval(this.getValue(), 'sqrt', null));
    }
    else if (chr == 'Q') {
      this.setValue(this.eval(this.getValue(), 'sqr', null));
    }
    else if (k == 13 || chr == '=') {
      if (this.operandStack.length >= 2) {
        if (this.operandStack.length <= 2)
          // push right operand
          this.push(this.getValue())
        else
          // repeated evaluation (e.g. [1] [+] [1] [=] [=] ...), replace left operand with current display value
          this.operandStack[this.operandStack.length - 3] = this.getValue();
        // alert(this.operandStack);
        var result = this.eval(this.operandStack[this.operandStack.length - 3], this.operandStack[this.operandStack.length - 2], this.operandStack[this.operandStack.length - 1]);
        this.setValue(result);
        // this.operandStack = [];
      }
    }
    // else if (k == 27) {  // Fix: chromium: Esc not handled in keyPress(), http://code.google.com/p/chromium/issues/detail?id=12744
    //   // escape
    //   this.clear();
    // }
    else {
      cancelEvent = false;
      this.newValueAtNextChar = false;
    }

    return !cancelEvent;
  }
  this.keyPress = keyPress;

  // public
  function init()
  {
    this.display.id = this.id;
    this.display.charCount = this.digitCount;
    this.display.align = 'right';
    this.display.init();
    this.display.setText('0');
    this.maxNumber = Math.pow(10, this.digitCount - 1) - 1;
  }
  this.init = init;

  // assign default glyph matrix
  this.display.urlCharsetImage = 'nixie/zm1080_l2_09bdm_45x75_8b.png';
  this.display.charWidth = 45;
  this.display.charHeight = 75;
  this.display.charGapWidth = 5;
}