0
0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-12-12 01:05:53 +01:00
doodle3d-client/js/Progressbar.js
2014-02-10 14:46:23 +01:00

118 lines
3.5 KiB
JavaScript

/*
* This file is part of the Doodle3D project (http://doodle3d.com).
*
* Copyright (c) 2013, Doodle3D
* This software is licensed under the terms of the GNU GPL v2 or later.
* See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
*/
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;
// To make the progressbar start with a minimal amount of 'progress'
// so that you can visually see that there is progress
this.progressPadding = Math.PI * .1;
this.$canvas;
this.canvas;
this.context;
this.$container;
this.isInitted = false;
this.enabled = true;
this.init = function(targCanvas, targCanvasContainer) {
console.log("Thermometer.init()");
this.$container = targCanvasContainer;
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 + this.progressPadding + (progress * (this.twoPI - this.progressPadding)), 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!");
}
}
this.show = function() {
this.$container.addClass("progressbarAppear");
// this.$container.show();
this.enabled = true;
}
this.hide = function() {
this.$container.removeClass("progressbarAppear");
// this.$container.hide();
this.enabled = false;
}
}