Apr 062019
 

http://cestmir.freeside.sk/projects/dhtml-nixie-display/

 

Virtual nixie tube (digitron) display – DHTML component library

© 2007-08 Čestmír Hýbl <cestmir.hybl@nustep.net>

Current date (NixieDisplay example)

Current time (NixieClock example)

Calculator (NixieCalculator example)

(just type expressions on keyboard as on any basic electronic calculator)
[q] sqrt   [Q] sqr   [^] pow   [m] +/-   [p] PI   [Enter] =   [Esc] clear

About

This DHTML component collection was developed for fun and is meant as tribute to nixie tube display era.

Features:

  • object-oriented JavaScript, DHTML, CSS
  • simple, well-designed API
  • fully customizable (custom glyph matrix images, between-digit gaps, custom character support using configurable map from char to glyph index)
  • decimal separator support via separate glyph matrix row
  • should be compatible with any modern browser (tested in IE 6.0, FF 2.0, Opera 8.5)

Notices:

  • included nixie glyphs were taken using real nixie tubes (Philips ZM1080, Tesla ZM1082, RFT Z573M). Decimal point and minus signs were added artificially for devices not containing them.
  • components are not limited to emulate nixie-looking displays, glyphs containing any sign types can be used

Usage

(suppose you have package archive extracted in ./nixie directory)

1. include library in head section of the page:

    <script type="text/javascript" src="nixie/nixie.js"></script>

2. drop some box element to serve as display container:

    <div id="nd1"></div>

3. instantiate and use component:

    <script type="text/javascript">
      var nd = new NixieDisplay();
      nd.id = 'nd1';
      nd.charCount = 12;
      nd.urlCharsetImage = 'nixie/nixie/zm1082_l1_09bdm_62x150_8b.png';
      nd.charWidth = 62;
      nd.charHeight = 150;
      nd.charGapWidth = 5;
      nd.align = 'right';
      nd.init();

      nd.setText('-1.234567890');
    </script>

Explore library and this demo page sources for more info.

Download

  • nixie_display_20080214a.zip [1032 kB]
    • DHTML component package (including several screen-resolution glyph matrices)
    • changelog:
      2012-10-08 rev. 20080214a: Calculator: Chrome [Esc] handlig bug fix
  • nixie_display_fullres_glyphs_20080214.zip [8.9 MB]
    • high-resolution photos of nixie tube signs, useful for creating custom resolution glyphs
    • tips:
      • when resampling whole matrix, keep in mind, that each single contained glyph must be of same dimensions and both it’s width and height must be integer number – i.e. total matrix image width has to be divisible by 12 and (at the same time) total height by 2 (this would eventually require a slight change of aspect ratio)
      • use anti-aliased algorithm to resample glyphs
      • consider applying decent sharpen effect after resampling to emphasize edges, blured by resampling
      • consider saving resulting glyph matrix as optimized indexed color (paletted) image to reduce size. Don’t use lossy format (JPEG) to save low resolution glyphs.
      • bitmap editor, supporting scripts and batch operations is useful for preparing custom glyph sets

License

Free for non-commercial use only. Copyright and project URL has to be preserved.

(this holds for both the code and the images)

References

[1] Wikipedia: Nixie tube
http://en.wikipedia.org/wiki/Nixie_tube
 Posted by at 5:10 pm

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)