Canvas Digital Display

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