var $displayThermometer; function Thermometer() { this.currentTemperature = 0; // default val this.targetTemperature = 180; // default val this.thermoOverlayImg = new Image(); this.thermoOverlayImgSrc = "img/thermometer_fg_overlay.png"; // ../img/thermometer_fg_overlay.png this.thermoWidth= 40; this.thermoHeight = 100; this.$canvas; this.canvas; this.context; this.isInitted = false; this.thermoColors = [ [50, 200, 244], // 'cold' [244, 190, 10], // 'warming up' [244, 50, 50] // 'ready / hot' ]; this.init = function(targCanvas, targCanvasContainer) { console.log("Thermometer.init()"); $displayThermometer = targCanvasContainer; this.$canvas = targCanvas; this.canvas = this.$canvas[0]; this.context = this.canvas.getContext('2d'); var self = this; this.thermoOverlayImg.onload = function() { console.log("canvasThermoOverlay img loaded"); self.isInitted = true; self.update(self.currentTemperature, self.targetTemperature); }; this.thermoOverlayImg.src = this.thermoOverlayImgSrc; } this.update = function(curr, targ) { // console.log("Thermometer.update(" + curr + "," + targ + ")"); if (this.isInitted) { if (curr == undefined) curr = 0; if (targ== undefined) targ = 180; // prevent divide by zero var progress = curr / targ; progress = Math.min(progress, 1.0); progress = Math.max(progress, 0); var h = this.thermoHeight; // 94 // px var paddingUnder = 15; // how far is beginpoint from bottom of thermometer var paddingAbove = 25; // how far is endpoint from top of thermometer var endPoint = h * .8; var p = Math.floor((h - paddingUnder - paddingAbove) * progress); // % // var tempHeight = var currColor = this.thermoColors[0]; if (progress > 0.98) { currColor = this.thermoColors[2]; } else if (progress > 0.25) { currColor = this.thermoColors[1]; } // clear this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = "10pt sans-serif"; // draw the thermometer clipping path this.context.save(); this.context.beginPath(); this.context.arc(40, 80, 16, 0, 2 * Math.PI, false); // circle bottom of thermometer this.context.arc(40, 10, 4, 0, 2 * Math.PI, false); // circle at top of thermometer tube this.context.rect(36, 11, 8, 70); // thermometer tube this.context.fillStyle = '#fff'; this.context.fill(); this.context.clip(); // draw rectangle which represents temperature // rect will be clipped by the thermometer outlines this.context.beginPath(); this.context.rect(20, h - paddingUnder - p, 60, p + paddingUnder); console.log(" currColor: " + currColor); //todo Math.floor?? this.context.fillStyle = "rgb(" + currColor[0] + "," + currColor[1] + "," + currColor[2] + ")"; this.context.fill(); this.context.restore(); // additional text labels this.context.save(); this.context.beginPath(); this.context.moveTo(32, paddingAbove); this.context.lineTo(52, paddingAbove); this.context.lineWidth = 2; this.context.strokeStyle = '#000'; this.context.stroke(); this.context.fillStyle = '#000'; this.context.textAlign = "left"; this.context.textBaseline = "middle"; this.context.fillText(targ + "°", 55, paddingAbove); this.context.restore(); // the thermometer outline png this.context.drawImage(this.thermoOverlayImg, 20, 0); // text this.context.fillStyle = '#000'; this.context.textAlign="center"; this.context.fillText(curr + "°", 40, h + paddingUnder); } else { console.log("Thermometer.setTemperature() -> thermometer not initialized!"); } } }