Skip to content

Instantly share code, notes, and snippets.

@highwaycoder
Created November 28, 2013 21:17
Show Gist options
  • Save highwaycoder/7698223 to your computer and use it in GitHub Desktop.
Save highwaycoder/7698223 to your computer and use it in GitHub Desktop.
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…
/*
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;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment