4 this.done = 100; |
4 this.done = 100; |
5 this.color_done = "green"; |
5 this.color_done = "green"; |
6 this.color_budget = "blue"; |
6 this.color_budget = "blue"; |
7 this.color_todo = "#cccccc"; // grey |
7 this.color_todo = "#cccccc"; // grey |
8 this.height = 16; |
8 this.height = 16; |
9 this.middle = this.height/2; |
9 this.middle = this.height / 2; |
10 this.radius = 4; |
10 this.radius = 4; |
11 } |
11 } |
12 |
12 |
13 ProgressBar.prototype.draw_one_rect = function(ctx, pos, color, fill) { |
13 ProgressBar.prototype.draw_one_rect = function(ctx, pos, color, fill) { |
14 ctx.beginPath(); |
14 ctx.beginPath(); |
15 ctx.lineWidth = 1; |
15 ctx.lineWidth = 1; |
16 ctx.strokeStyle = color; |
16 ctx.strokeStyle = color; |
17 if (fill) { |
17 if (fill) { |
18 ctx.fillStyle = color; |
18 ctx.fillStyle = color; |
19 ctx.fillRect(0,0,pos,this.middle*2); |
19 ctx.fillRect(0, 0, pos, this.middle * 2); |
20 } else { |
20 } else { |
21 ctx.lineWidth = 2; |
21 ctx.lineWidth = 2; |
22 ctx.strokeStyle = "black"; |
22 ctx.strokeStyle = "black"; |
23 ctx.moveTo(pos,0); |
23 ctx.moveTo(pos, 0); |
24 ctx.lineTo(pos,this.middle*2); |
24 ctx.lineTo(pos, this.middle * 2); |
25 ctx.stroke(); |
25 ctx.stroke(); |
26 } |
26 } |
27 }; |
27 }; |
28 |
28 |
29 ProgressBar.prototype.draw_one_circ = function(ctx, pos, color) { |
29 ProgressBar.prototype.draw_one_circ = function(ctx, pos, color) { |
30 ctx.beginPath(); |
30 ctx.beginPath(); |
31 ctx.lineWidth = 2; |
31 ctx.lineWidth = 2; |
32 ctx.strokeStyle = color; |
32 ctx.strokeStyle = color; |
33 ctx.moveTo(0,this.middle); |
33 ctx.moveTo(0, this.middle); |
34 ctx.lineTo(pos,this.middle); |
34 ctx.lineTo(pos, this.middle); |
35 ctx.arc(pos,this.middle,this.radius,0,Math.PI*2,true); |
35 ctx.arc(pos, this.middle, this.radius, 0, Math.PI * 2, true); |
36 ctx.stroke(); |
36 ctx.stroke(); |
37 }; |
37 }; |
38 |
38 |
39 |
|
40 ProgressBar.prototype.draw_circ = function(ctx) { |
39 ProgressBar.prototype.draw_circ = function(ctx) { |
41 this.draw_one_circ(ctx,this.budget,this.color_budget); |
40 this.draw_one_circ(ctx, this.budget, this.color_budget); |
42 this.draw_one_circ(ctx,this.todo,this.color_todo); |
41 this.draw_one_circ(ctx, this.todo, this.color_todo); |
43 this.draw_one_circ(ctx,this.done,this.color_done); |
42 this.draw_one_circ(ctx, this.done, this.color_done); |
44 }; |
43 }; |
45 |
44 |
46 |
|
47 ProgressBar.prototype.draw_rect = function(ctx) { |
45 ProgressBar.prototype.draw_rect = function(ctx) { |
48 this.draw_one_rect(ctx,this.todo,this.color_todo,true); |
46 this.draw_one_rect(ctx, this.todo, this.color_todo, true); |
49 this.draw_one_rect(ctx,this.done,this.color_done,true); |
47 this.draw_one_rect(ctx, this.done, this.color_done, true); |
50 this.draw_one_rect(ctx,this.budget,this.color_budget,false); |
48 this.draw_one_rect(ctx, this.budget, this.color_budget, false); |
51 }; |
49 }; |
52 |
|
53 |
50 |
54 function draw_progressbar(cid, done, todo, budget, color) { |
51 function draw_progressbar(cid, done, todo, budget, color) { |
55 var canvas = document.getElementById(cid); |
52 var canvas = document.getElementById(cid); |
56 if (canvas.getContext) { |
53 if (canvas.getContext) { |
57 var ctx = canvas.getContext("2d"); |
54 var ctx = canvas.getContext("2d"); |
58 var bar = new ProgressBar(); |
55 var bar = new ProgressBar(); |
59 bar.budget = budget; |
56 bar.budget = budget; |
60 bar.todo = todo; |
57 bar.todo = todo; |
61 bar.done = done; |
58 bar.done = done; |
62 bar.color_done = color; |
59 bar.color_done = color; |
63 bar.draw_rect(ctx); |
60 bar.draw_rect(ctx); |
64 } |
61 } |
65 } |
62 } |
|
63 |