5 class CircularBarWidget extends Widget{ |
5 class CircularBarWidget extends Widget{ |
6 frequency = 10; |
6 frequency = 10; |
7 range = undefined; |
7 range = undefined; |
8 |
8 |
9 dispatch(value) { |
9 dispatch(value) { |
|
10 this.display_val = value; |
|
11 this.request_animate(); |
|
12 } |
|
13 |
|
14 animate(){ |
10 if(this.value_elt) |
15 if(this.value_elt) |
11 this.value_elt.textContent = String(value); |
16 this.value_elt.textContent = String(this.display_val); |
12 let [min,max,start,end] = this.range; |
17 let [min,max,start,end] = this.range; |
13 let [cx,cy] = this.center; |
18 let [cx,cy] = this.center; |
14 let [rx,ry] = this.proportions; |
19 let [rx,ry] = this.proportions; |
15 let tip = start + (end-start)*Number(value)/(max-min); |
20 let tip = start + (end-start)*Number(this.display_val)/(max-min); |
16 let size = 0; |
21 let size = 0; |
17 if (tip-start > Math.PI) { |
22 |
|
23 if (tip-start > Math.PI) |
18 size = 1; |
24 size = 1; |
19 } else { |
25 else |
20 size = 0; |
26 size = 0; |
21 } |
27 |
22 this.path_elt.setAttribute('d', "M "+(cx+rx*Math.cos(start))+","+(cy+ry*Math.sin(start))+" A "+rx+","+ry+" 0 "+size+" 1 "+(cx+rx*Math.cos(tip))+","+(cy+ry*Math.sin(tip))); |
28 this.path_elt.setAttribute('d', "M "+(cx+rx*Math.cos(start))+","+(cy+ry*Math.sin(start))+ |
|
29 " A "+rx+","+ry+ |
|
30 " 0 "+size+ |
|
31 " 1 "+(cx+rx*Math.cos(tip))+","+(cy+ry*Math.sin(tip))); |
23 } |
32 } |
24 |
33 |
25 init() { |
34 init() { |
26 let start = Number(this.path_elt.getAttribute('sodipodi:start')); |
35 let [start, end, cx, cy, rx, ry] = ["start", "end", "cx", "cy", "rx", "ry"]. |
27 let end = Number(this.path_elt.getAttribute('sodipodi:end')); |
36 map(tag=>Number(this.path_elt.getAttribute('sodipodi:'+tag))) |
28 let cx = Number(this.path_elt.getAttribute('sodipodi:cx')); |
37 |
29 let cy = Number(this.path_elt.getAttribute('sodipodi:cy')); |
38 if (ry == 0) |
30 let rx = Number(this.path_elt.getAttribute('sodipodi:rx')); |
|
31 let ry = Number(this.path_elt.getAttribute('sodipodi:ry')); |
|
32 if (ry == 0) { |
|
33 ry = rx; |
39 ry = rx; |
34 } |
40 |
35 if (start > end) { |
41 if (start > end) |
36 end = end + 2*Math.PI; |
42 end = end + 2*Math.PI; |
37 } |
43 |
38 let min = this.min_elt ? |
44 let [min,max] = [[this.min_elt,0],[this.max_elt,100]].map(([elt,def],i)=>elt? |
39 Number(this.min_elt.textContent) : |
45 Number(elt.textContent) : |
40 this.args.length >= 1 ? this.args[0] : 0; |
46 this.args.length >= i+1 ? this.args[i] : def); |
41 let max = this.max_elt ? |
47 |
42 Number(this.max_elt.textContent) : |
|
43 this.args.length >= 2 ? this.args[1] : 100; |
|
44 this.range = [min, max, start, end]; |
48 this.range = [min, max, start, end]; |
45 this.center = [cx, cy]; |
49 this.center = [cx, cy]; |
46 this.proportions = [rx, ry]; |
50 this.proportions = [rx, ry]; |
47 } |
51 } |
48 } |
52 } |