Pretty basic 7-segment display module for a node.js project I'm working on in secret. Couldn't resist sharing this though, I really like it! Expects a canvas of bare minimum size 144x60, ideally 150x66 to give it symmetrical padding. Oh, and it doesn't unencode BCD yet, because that's not yet important. If you feed it a raw value, it should disp…

SevenSegmentDisplay.js

/*
My 7-seg is a bit weird, sorry, here's how it works:
/ --- 0 --- \
|           |
|           |
1           5
|           |
|           |
> --- 6 --- <
|           |
|           |
2           4
|           |
|           |
\ --- 3 --- /

*/

define("SevenSegmentDisplay",[],function() {
	var SevenSegmentDisplay = function(canvas) {
		this.ctx = canvas.getContext('2d');
		this.update(0,true);
	}
	// convert from a digit value to a display-compatible value
	var BCD_LOOKUP = {
		0: 0x3F,
		1: 0x30,
		2: 0x6D,
		3: 0x79,
		4: 0x72,
		5: 0x5B,
		6: 0x5F,
		7: 0x31,
		8: 0x7F,
		9: 0x7B
	}
	function encode_bcd(v) {
		var thousands = Math.floor(v / 1000) % 10;
		var hundreds = Math.floor(v / 100) % 10;
		var tens = Math.floor(v / 10) % 10;
		var ones = Math.floor(v) % 10;
		return (
			(BCD_LOOKUP[thousands]) |
			(BCD_LOOKUP[hundreds] 	<< (7*1)) |
			(BCD_LOOKUP[tens] 		<< (7*2)) |
			(BCD_LOOKUP[ones] 		<< (7*3))
		);
	}
	function unencode_bcd(v) {
		return 0;
	}
	SevenSegmentDisplay.prototype = {
		update: function(value,raw) {
			if(raw) {
				this._raw = value;
				this.value = unencode_bcd(value);
			} else {
				this._raw = encode_bcd(value);
				this.value = value;
			}
			for(var i = 0; i < 4; i++) {
				this.updateDigit(i);
			}
		},
		updateDigit: function(digit) {
			this.ctx.save();
			var horizontal_offset = digit * 36;
			this.ctx.translate(horizontal_offset,0);
			for(var i = 0; i < 7; i++) {
				var lit = !!((this._raw >> (digit * 7)) & (1<<i));
				this.drawSegment(i,lit);
			}
			this.ctx.restore();
		},
		drawSegment: function(segNumber,lit) {
			this.ctx.save();
			// the ugliest of ugly hacks
			this.ctx.translate(3,0);
			this.ctx.fillStyle = (lit ? "rgb(0,255,0)" : "rgb(0,64,0)");
			switch(segNumber) {
				case 0: {
					this.ctx.beginPath();
					this.ctx.moveTo(6,9);
					this.ctx.lineTo(12,6);
					this.ctx.lineTo(24,6);
					this.ctx.lineTo(30,9);
					this.ctx.lineTo(24,12);
					this.ctx.lineTo(12,12);
					this.ctx.lineTo(6,9);
					this.ctx.fill();
					break;
				}
				case 1: {
					this.ctx.beginPath();
					this.ctx.moveTo(6,12);
					this.ctx.lineTo(9,15);
					this.ctx.lineTo(9,27);
					this.ctx.lineTo(6,30);
					this.ctx.lineTo(3,27);
					this.ctx.lineTo(3,15);
					this.ctx.lineTo(6,12);
					this.ctx.fill();
					break;
				}
				case 2: {
					this.ctx.translate(0,24);
					this.ctx.beginPath();
					this.ctx.moveTo(6,12);
					this.ctx.lineTo(9,15);
					this.ctx.lineTo(9,27);
					this.ctx.lineTo(6,30);
					this.ctx.lineTo(3,27);
					this.ctx.lineTo(3,15);
					this.ctx.lineTo(6,12);
					this.ctx.fill();
					break;
				}
				case 3: {
					this.ctx.translate(0,48);
					this.ctx.beginPath();
					this.ctx.moveTo(6,9);
					this.ctx.lineTo(12,6);
					this.ctx.lineTo(24,6);
					this.ctx.lineTo(30,9);
					this.ctx.lineTo(24,12);
					this.ctx.lineTo(12,12);
					this.ctx.lineTo(6,9);
					this.ctx.fill();
					break;
				}
				case 4: {
					this.ctx.translate(24,24);
					this.ctx.beginPath();
					this.ctx.moveTo(6,12);
					this.ctx.lineTo(9,15);
					this.ctx.lineTo(9,27);
					this.ctx.lineTo(6,30);
					this.ctx.lineTo(3,27);
					this.ctx.lineTo(3,15);
					this.ctx.lineTo(6,12);
					this.ctx.fill();
					break;
				}
				case 5: {
					this.ctx.translate(24,0);
					this.ctx.beginPath();
					this.ctx.moveTo(6,12);
					this.ctx.lineTo(9,15);
					this.ctx.lineTo(9,27);
					this.ctx.lineTo(6,30);
					this.ctx.lineTo(3,27);
					this.ctx.lineTo(3,15);
					this.ctx.lineTo(6,12);
					this.ctx.fill();
					break;
				}
				case 6: {
					this.ctx.translate(0,24);
					this.ctx.beginPath();
					this.ctx.moveTo(6,9);
					this.ctx.lineTo(12,6);
					this.ctx.lineTo(24,6);
					this.ctx.lineTo(30,9);
					this.ctx.lineTo(24,12);
					this.ctx.lineTo(12,12);
					this.ctx.lineTo(6,9);
					this.ctx.fill();
					break;
				}
			}
			this.ctx.restore();
		},
		value: 0,
		_raw: 0
	}
	return SevenSegmentDisplay;
});