FANDOM


Posted below is a code snippet to draw digits from "old style" LCD displays. If you are already using the Javable Widget Project (or just the Javable Library) you should remove the AbstractDrawable mini-class below.

// Adapter for use without the Javable Library.
function AbstractDrawable() {
	var width = 0;
	var height = 0;
	this.setWidth = function(value) {
		width = Number(value);
	};
	this.setHeight = function(value) {
		height = Number(value);
	};
	this.setSize = function(w,h) {
		width = Number(w);
		height = Number(h);
	};
	this.getWidth = function() {
		return (width);
	};
	this.getHeight = function() {
		return (height);
	};
	this.toString = function() {
		return ("[" + width + ", " + height + "]");
	};
}

// The "display" panel at the top of the Widget.
function Display(value) {
	AbstractDrawable(this);

	this.watch("value", function(prop, old, nw) {
		nw = nw.toString();
		if(nw !== undefined && nw !== null) {
			if(nw.length < 3) {
				nw = "   " + nw;
			}
			return (nw.substr(nw.length-3));
		}
		return (nw);
	});
	// The string displayed by this Display.
	this.value = (value !== undefined)? value : "";

	// Used to display the digits in the displays.
	var digit = new Digit();

	this.draw = function(ctx) {
		digit.setSize(this.getWidth()/3-1,this.getHeight());

		// 1st digit
		digit.value = this.value.charAt(0);
		digit.draw(ctx);
		// 2nd digit
		ctx.save();
		ctx.translate(this.getWidth()/3,0);
		digit.value = this.value.charAt(1);
		digit.draw(ctx);
		ctx.restore();
		// 3rd digit
		ctx.save();
		ctx.translate(2*this.getWidth()/3,0);
		digit.value = this.value.charAt(2);
		digit.draw(ctx);
		ctx.restore();
	};
}
Display.prototype = new AbstractDrawable;




// Displays digits as on an LCD screen.
// 11x21 was my reference image size.
function Digit(value) {
	AbstractDrawable.call(this);

	this.watch("value", function(prop, old, nw) {
		if(nw !== undefined && nw !== null) {
			return (nw.charAt(0));
		}
		return (nw);
	});
	// The string displayed by this digit.
	this.value = (value !== undefined)? value : "";

	var ctx = null;
	var onew = 0;
	var oneh = 0;
	var w = 0;
	var h = 0;

	// Segments
	var segments = {
		seg0: function() {
			ctx.fillRect(0,oneh,onew,oneh*9);
			ctx.fillRect(onew,2*oneh,onew,oneh*7);
			ctx.fillRect(2*onew,3*oneh,onew,oneh*5);
		},
		seg1: function() {
			ctx.fillRect(onew,0,onew*9,oneh);
			ctx.fillRect(2*onew,oneh,onew*7,oneh);
			ctx.fillRect(3*onew,2*oneh,onew*5,oneh);
		},
		seg2: function() {
			ctx.fillRect(w-onew,oneh,onew,oneh*9);
			ctx.fillRect(w-2*onew,2*oneh,onew,oneh*7);
			ctx.fillRect(w-3*onew,3*oneh,onew,oneh*5);
		},
		seg3: function() {
			ctx.save();
			ctx.translate(0,oneh*10);
			this.seg2();
			ctx.restore();
		},
		seg4: function() {
			ctx.fillRect(onew,h-oneh,onew*9,oneh);
			ctx.fillRect(2*onew,h-2*oneh,onew*7,oneh);
			ctx.fillRect(3*onew,h-3*oneh,onew*5,oneh);
		},
		seg5: function() {
			ctx.save();
			ctx.translate(0,oneh*10);
			this.seg0();
			ctx.restore();
		},
		seg6: function() {
			ctx.fillRect(3*onew,oneh*9,onew*5,oneh);
			ctx.fillRect(2*onew,oneh*10,onew*7,oneh);
			ctx.fillRect(3*onew,oneh*11,onew*5,oneh);
		}
	};

	// Turn segments on or off, based on opacity.
	function on(segs) {
		ctx.globalAlpha = 1;
		for(var i = 0; i < segs.length; i++) segments["seg"+segs[i]]();
	}
	function off(segs) {
		ctx.globalAlpha = 100/255;
		for(var i = 0; i < segs.length; i++) segments["seg"+segs[i]]();
	}

	// Digits.
	// M, m, W, and w, are missing: they can't be displayed and still understand what letter it is.
	var digits = {
		A: function() { this.a(); },
		a: function() { on([0,1,2,3,5,6]);   },
		B: function() { on([0,1,2,3,4,5,6]); },
		b: function() { on([0,3,4,5,6]);     },
		C: function() { on([0,1,4,5]);       },
		c: function() { on([4,5,6]);         },
		D: function() { on([0,1,2,3,4,5]);   },
		d: function() { on([2,3,4,5,6]);     },
		E: function() { on([0,1,4,5,6]);     },
		e: function() { this.E();            },
		F: function() { on([0,1,5,6]);       },
		f: function() { this.F();            },
		G: function() { on([0,1,3,4,5,6]);   },
		g: function() { on([0,1,2,3,4,6]);   },
		H: function() { on([0,2,3,5,6]);     },
		h: function() { on([0,4,5,6]);       },
		I: function() { on([1,4]);           },
		i: function() { on([3]);             },
		J: function() { on([2,3,4,5]);       },
		j: function() { this.J();            },
		K: function() { on([0,1,3,5,6]);     },
		k: function() { this.K();            },
		L: function() { on([0,4,5]);         },
		l: function() { on([2,3]);           },
		N: function() { on([0,1,2,3,5]);     },
		n: function() { on([3,5,6]);         },
		O: function() { on([0,1,2,3,4,5]);   },
		o: function() { on([3,4,5,6]);       },
		P: function() { on([0,1,2,5,6]);     },
		p: function() { this.P();            },
		Q: function() { this.q();            },
		q: function() { on([0,1,2,3,6]);     },
		R: function() { this.A();            },
		r: function() { on([5,6]);           },
		S: function() { on([0,1,3,4,6]);     },
		s: function() { this.S();            },
		T: function() { on([1]);             },
		t: function() { on([6]);             },
		U: function() { on([0,2,3,4,5]);     },
		u: function() { on([3,4,5]);         },
		V: function() { on([0,2,4]);         },
		v: function() { this.V();            },
		X: function() { on([0,3,6]);         },
		x: function() { this.X();            },
		Y: function() { on([0,2,4,6]);       },
		y: function() { on([0,2,3,4,6]);     },
		Z: function() { on([1,2,4,5]);       },
		z: function() { on([4,6]);           },
		0: function() { this.O();            },
		1: function() { this.l();            },
		2: function() {	on([1,2,4,5,6]);     },
		3: function() { on([1,2,3,4,6]);     },
		4: function() { on([0,2,3,6]);       },
		5: function() { this.S();            },
		6: function() { this.b();            },
		7: function() { on([0,1,2,3]);       },
		8: function() { this.B();            },
		9: function() { this.q();            },
	      "-": function() { this.t();            }
	};

	this.draw = function(cnvs) {
		cnvs.fillStyle = "rgb(255,0,0)";

		ctx = cnvs;
		onew = this.getWidth()/11;
		oneh = this.getHeight()/21;
		w = this.getWidth();
		h = this.getHeight();

		off([0,1,2,3,4,5,6]);
		try {
			digits[this.value]();
		} catch(e) {
			// empty, because I know there are letters I didn't map.
		}
		cnvs.globalAlpha = 1;
	};
}
Digit.prototype = new AbstractDrawable;


Category: Resources Category: Code Resources Category: Canvas

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.