Class for Progressbar

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!");
+    }
+  }
+}