1 // widget_circularbar.ysl2 |
1 // widget_circularbar.ysl2 |
2 |
2 |
|
3 template "widget[@type='CircularBar']", mode="widget_class"{ |
|
4 || |
|
5 class CircularBarWidget extends Widget{ |
|
6 frequency = 10; |
|
7 range = undefined; |
|
8 |
|
9 dispatch(value) { |
|
10 if(this.value_elt) |
|
11 this.value_elt.textContent = String(value); |
|
12 let [min,max,start,end] = this.range; |
|
13 let [cx,cy] = this.center; |
|
14 let [rx,ry] = this.proportions; |
|
15 let tip = start + (end-start)*Number(value)/(max-min); |
|
16 let size = 0; |
|
17 if (tip-start > Math.PI) { |
|
18 size = 1; |
|
19 } else { |
|
20 size = 0; |
|
21 } |
|
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))); |
|
23 } |
|
24 |
|
25 init() { |
|
26 let start = Number(this.path_elt.getAttribute('sodipodi:start')); |
|
27 let end = Number(this.path_elt.getAttribute('sodipodi:end')); |
|
28 let cx = Number(this.path_elt.getAttribute('sodipodi:cx')); |
|
29 let cy = Number(this.path_elt.getAttribute('sodipodi:cy')); |
|
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; |
|
34 } |
|
35 if (start > end) { |
|
36 end = end + 2*Math.PI; |
|
37 } |
|
38 let min = this.min_elt ? |
|
39 Number(this.min_elt.textContent) : |
|
40 this.args.length >= 1 ? this.args[0] : 0; |
|
41 let max = this.max_elt ? |
|
42 Number(this.max_elt.textContent) : |
|
43 this.args.length >= 2 ? this.args[1] : 100; |
|
44 this.range = [min, max, start, end]; |
|
45 this.center = [cx, cy]; |
|
46 this.proportions = [rx, ry]; |
|
47 } |
|
48 } |
|
49 || |
|
50 } |
3 |
51 |
4 template "widget[@type='CircularBar']", mode="widget_defs" { |
52 template "widget[@type='CircularBar']", mode="widget_defs" { |
5 param "hmi_element"; |
53 param "hmi_element"; |
6 | frequency: 10, |
|
7 labels("path"); |
54 labels("path"); |
8 optional_labels("value min max"); |
55 optional_labels("value min max"); |
9 | dispatch: function(value) { |
56 |, |
10 | if(this.value_elt) |
|
11 | this.value_elt.textContent = String(value); |
|
12 | let [min,max,start,end] = this.range; |
|
13 | let [cx,cy] = this.center; |
|
14 | let [rx,ry] = this.proportions; |
|
15 | let tip = start + (end-start)*Number(value)/(max-min); |
|
16 | let size = 0; |
|
17 | if (tip-start > Math.PI) { |
|
18 | size = 1; |
|
19 | } else { |
|
20 | size = 0; |
|
21 | } |
|
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))); |
|
23 | }, |
|
24 | range: undefined, |
|
25 | init: function() { |
|
26 | let start = Number(this.path_elt.getAttribute('sodipodi:start')); |
|
27 | let end = Number(this.path_elt.getAttribute('sodipodi:end')); |
|
28 | let cx = Number(this.path_elt.getAttribute('sodipodi:cx')); |
|
29 | let cy = Number(this.path_elt.getAttribute('sodipodi:cy')); |
|
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; |
|
34 | } |
|
35 | if (start > end) { |
|
36 | end = end + 2*Math.PI; |
|
37 | } |
|
38 | let min = this.min_elt ? |
|
39 | Number(this.min_elt.textContent) : |
|
40 | this.args.length >= 1 ? this.args[0] : 0; |
|
41 | let max = this.max_elt ? |
|
42 | Number(this.max_elt.textContent) : |
|
43 | this.args.length >= 2 ? this.args[1] : 100; |
|
44 | this.range = [min, max, start, end]; |
|
45 | this.center = [cx, cy]; |
|
46 | this.proportions = [rx, ry]; |
|
47 | }, |
|
48 } |
57 } |