diff --git a/js/Progressbar.js b/js/Progressbar.js new file mode 100644 index 0000000..147c18d --- /dev/null +++ b/js/Progressbar.js @@ -0,0 +1,91 @@ +function Progressbar() { + this.currProgress = 0; // default val + + this.progressbarFGImg = new Image(); + this.progressbarFGImgSrc = "img/progress_fg.png"; + this.progressbarBGImg = new Image(); + this.progressbarBGImgSrc = "img/progress_bg.png"; + + this.progressWidth= 93; + this.progressHeight = 82; + + this.quartPI = .5 * Math.PI; + this.twoPI = 2 * Math.PI; + + + this.$canvas; + this.canvas; + this.context; + + this.isInitted = false; + + this.init = function(targCanvas) { + console.log("Thermometer.init()"); + + this.$canvas = targCanvas; + this.canvas = this.$canvas[0]; + this.context = this.canvas.getContext('2d'); + + + var self = this; + this.progressbarBGImg.onload = function() { + console.log("progressbarBGImg img loaded"); + // self.isInitted = true; + // self.update(self.currentTemperature, self.targetTemperature); + + self.progressbarFGImg.onload = function() { + console.log("progressbarFGImg img loaded"); + self.isInitted = true; + self.update(0, 100); + }; + self.progressbarFGImg.src = self.progressbarFGImgSrc; + }; + this.progressbarBGImg.src = this.progressbarBGImgSrc; + } + + this.update = function(part, total) { + console.log("Progressbar.update(" + part + "," + total + ")"); + + var pct = part / total; + if (this.isInitted) { + if (part == undefined) part = 0; + if (total== undefined) total = 100; // prevent divide by zero + + var progress = part / total; + progress = Math.min(progress, 1.0); + progress = Math.max(progress, 0); + console.log("progressbar >> f:update() >> progress: " + progress); + + // clear + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + + this.context.drawImage(this.progressbarBGImg, 0, 0); + + this.context.font = "7pt sans-serif"; + + // draw the progressbar foreground's clipping path + this.context.save(); + this.context.beginPath(); + this.context.moveTo(45, 45); + this.context.lineTo(45, 0); + this.context.arc(45, 45, 45, -this.quartPI, -this.quartPI + (progress * (this.twoPI)), false); // circle bottom of thermometer + this.context.lineTo(45, 45); + this.context.clip(); + + this.context.drawImage(this.progressbarFGImg, 0, 0); + this.context.restore(); + + if (debugMode) { + this.context.fillStyle = '#222'; + this.context.strokeStyle = '#fff'; + this.context.lineWidth = 3; + this.context.textAlign="center"; + this.context.strokeText(part + " / " + total, 45, 45, 90); + this.context.fillText(part + " / " + total, 45, 45, 90); + } + + } else { + console.log("Progressbar.setTemperature() -> thermometer not initialized!"); + } + } +}