Virtual nixie tube (digitron) display - DHTML component library
© 2007-08 Čestmír Hýbl <>
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]
-
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
