Virtual nixie tube (digitron) display – DHTML component library
© 2007-08 Čestmír Hýbl <email@example.com>
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
This DHTML component collection was developed for fun and is meant as tribute to nixie tube display era.
- 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)
- 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
(suppose you have package archive extracted in ./nixie directory)
1. include library in head section of the page:
2. drop some box element to serve as display container:
3. instantiate and use component:
Explore library and this demo page sources for more info.
- nixie_display_20080214a.zip [1032 kB]
- DHTML component package (including several screen-resolution glyph matrices)
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
- 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
Free for non-commercial use only. Copyright and project URL has to be preserved.
(this holds for both the code and the images)
|||Wikipedia: Nixie tube