web/data/cubicweb.iprogress.js
branchstable
changeset 4700 b981c7d3e3c0
child 5658 7b9553a9db65
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/data/cubicweb.iprogress.js	Thu Feb 25 17:42:51 2010 +0100
@@ -0,0 +1,65 @@
+function ProgressBar() {
+    this.budget = 100;
+    this.todo = 100;
+    this.done = 100;
+    this.color_done = "green";
+    this.color_budget = "blue";
+    this.color_todo = "#cccccc"; //  grey
+    this.height = 16;
+    this.middle = this.height/2;
+    this.radius = 4;
+}
+
+ProgressBar.prototype.draw_one_rect = function(ctx, pos, color, fill) {
+    ctx.beginPath();
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = color;
+    if (fill) {
+	ctx.fillStyle = color;
+	ctx.fillRect(0,0,pos,this.middle*2);
+    } else {
+	ctx.lineWidth = 2;
+	ctx.strokeStyle = "black";
+	ctx.moveTo(pos,0);
+	ctx.lineTo(pos,this.middle*2);
+	ctx.stroke();
+    }
+};
+
+ProgressBar.prototype.draw_one_circ = function(ctx, pos, color) {
+    ctx.beginPath();
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = color;
+    ctx.moveTo(0,this.middle);
+    ctx.lineTo(pos,this.middle);
+    ctx.arc(pos,this.middle,this.radius,0,Math.PI*2,true);
+    ctx.stroke();
+};
+
+
+ProgressBar.prototype.draw_circ = function(ctx) {
+    this.draw_one_circ(ctx,this.budget,this.color_budget);
+    this.draw_one_circ(ctx,this.todo,this.color_todo);
+    this.draw_one_circ(ctx,this.done,this.color_done);
+};
+
+
+ProgressBar.prototype.draw_rect = function(ctx) {
+    this.draw_one_rect(ctx,this.todo,this.color_todo,true);
+    this.draw_one_rect(ctx,this.done,this.color_done,true);
+    this.draw_one_rect(ctx,this.budget,this.color_budget,false);
+};
+
+
+function draw_progressbar(cid, done, todo, budget, color) {
+    var canvas = document.getElementById(cid);
+    if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+	var bar = new ProgressBar();
+	bar.budget = budget;
+	bar.todo = todo;
+	bar.done = done;
+        bar.color_done = color;
+	bar.draw_rect(ctx);
+    }
+}