5 class CircularSliderWidget extends Widget{ |
5 class CircularSliderWidget extends Widget{ |
6 frequency = 5; |
6 frequency = 5; |
7 range = undefined; |
7 range = undefined; |
8 circle = undefined; |
8 circle = undefined; |
9 handle_pos = undefined; |
9 handle_pos = undefined; |
|
10 svg_dist = undefined; |
10 drag = false; |
11 drag = false; |
11 enTimer = false; |
12 enTimer = false; |
|
13 last_drag = false; |
12 |
14 |
13 dispatch(value) { |
15 dispatch(value) { |
14 if(!this.drag){ |
16 if(this.value_elt) |
15 if(this.value_elt) |
17 this.value_elt.textContent = String(value); |
16 this.value_elt.textContent = String(value); |
18 |
17 |
19 this.update_DOM(value, this.handle_elt); |
18 this.handle_position(value); |
20 } |
19 } |
21 |
20 } |
22 update_DOM(value, elt){ |
21 |
|
22 handle_position(value){ |
|
23 let [min,max,totalDistance] = this.range; |
23 let [min,max,totalDistance] = this.range; |
24 let length = Math.max(0,Math.min((totalDistance),(Number(value)-min)/(max-min)*(totalDistance))); |
24 let length = Math.max(0,Math.min((totalDistance),(Number(value)-min)/(max-min)*(totalDistance))); |
25 let tip = this.range_elt.getPointAtLength(length); |
25 let tip = this.range_elt.getPointAtLength(length); |
26 this.handle_elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")"); |
26 elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")"); |
|
27 |
|
28 if(this.setpoint_elt != undefined){ |
|
29 if(this.last_drag!= this.drag){ |
|
30 if(this.drag){ |
|
31 this.setpoint_elt.setAttribute("style", this.setpoint_style); |
|
32 }else{ |
|
33 this.setpoint_elt.setAttribute("style", "display:none"); |
|
34 } |
|
35 this.last_drag = this.drag; |
|
36 } |
|
37 } |
27 } |
38 } |
28 |
39 |
29 on_release(evt) { |
40 on_release(evt) { |
|
41 window.removeEventListener("touchmove", this.on_bound_drag, true); |
|
42 window.removeEventListener("mousemove", this.on_bound_drag, true); |
|
43 |
|
44 window.removeEventListener("mouseup", this.bound_on_release, true) |
|
45 window.removeEventListener("touchend", this.bound_on_release, true); |
|
46 window.removeEventListener("touchcancel", this.bound_on_release, true); |
30 if(this.drag){ |
47 if(this.drag){ |
31 this.drag = false; |
48 this.drag = false; |
|
49 } |
|
50 this.update_position(evt); |
|
51 } |
|
52 |
|
53 on_drag(evt){ |
|
54 if(this.enTimer && this.drag){ |
|
55 this.update_position(evt); |
|
56 //reset timer |
|
57 this.enTimer = false; |
|
58 setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); |
32 } |
59 } |
33 } |
60 } |
34 |
61 |
35 update_position(evt){ |
62 update_position(evt){ |
36 if(this.drag && this.enTimer){ |
63 if(this.drag && this.enTimer){ |
74 fi = fi + 2*Math.PI; |
101 fi = fi + 2*Math.PI; |
75 } |
102 } |
76 |
103 |
77 //get handle distance from mouse position |
104 //get handle distance from mouse position |
78 if(fi<fiEnd){ |
105 if(fi<fiEnd){ |
79 svg_dist=(fi)/(fiEnd)*(this.range[1]-this.range[0]); |
106 this.svg_dist=(fi)/(fiEnd)*(this.range[1]-this.range[0]); |
80 } |
107 } |
81 else if(fiEnd<fi && fi<fiEnd+minMax){ |
108 else if(fiEnd<fi && fi<fiEnd+minMax){ |
82 svg_dist = this.range[1]; |
109 this.svg_dist = this.range[1]; |
83 } |
110 } |
84 else{ |
111 else{ |
85 svg_dist = this.range[0]; |
112 this.svg_dist = this.range[0]; |
86 } |
113 } |
87 |
114 |
88 //redraw handle --TODO is it fast enough if I just call change_hmi_value??? |
115 |
89 this.handle_position(svg_dist); |
116 this.apply_hmi_value(0, Math.ceil(this.svg_dist)); |
90 if(this.value_elt) |
117 |
91 this.value_elt.textContent = String(Math.ceil(svg_dist)); |
118 // update ghost cursor |
92 this.apply_hmi_value(0, Math.ceil(svg_dist)); |
119 if(this.setpoint_elt != undefined){ |
93 |
120 this.request_animate(); |
94 //reset timer |
121 } |
95 this.enTimer = false; |
122 } |
96 setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); |
123 |
97 } |
124 } |
98 |
125 |
|
126 animate(){ |
|
127 this.update_DOM(this.svg_dist, this.setpoint_elt); |
99 } |
128 } |
100 |
129 |
101 on_select(evt){ |
130 on_select(evt){ |
102 this.drag = true; |
131 this.drag = true; |
103 this.enTimer = true; |
132 this.enTimer = true; |
|
133 window.addEventListener("touchmove", this.on_bound_drag, true); |
|
134 window.addEventListener("mousemove", this.on_bound_drag, true); |
|
135 |
|
136 window.addEventListener("mouseup", this.bound_on_release, true) |
|
137 window.addEventListener("touchend", this.bound_on_release, true); |
|
138 window.addEventListener("touchcancel", this.bound_on_release, true); |
104 this.update_position(evt); |
139 this.update_position(evt); |
105 } |
140 } |
106 |
141 |
107 init() { |
142 init() { |
108 //get min max |
143 //get min max |
133 this.range = [min, max,this.range_elt.getTotalLength()]; |
168 this.range = [min, max,this.range_elt.getTotalLength()]; |
134 let cPos = this.range_elt.getBBox(); |
169 let cPos = this.range_elt.getBBox(); |
135 this.handle_pos = this.range_elt.getPointAtLength(0); |
170 this.handle_pos = this.range_elt.getPointAtLength(0); |
136 this.circle = [cX, cY,fiStart,fiEnd,minMax,cPos.x,cPos.y,cPos.width,cPos.height]; |
171 this.circle = [cX, cY,fiStart,fiEnd,minMax,cPos.x,cPos.y,cPos.width,cPos.height]; |
137 |
172 |
|
173 //bind functions |
|
174 this.bound_on_select = this.on_select.bind(this); |
|
175 this.bound_on_release = this.on_release.bind(this); |
|
176 this.on_bound_drag = this.on_drag.bind(this); |
|
177 |
138 //init events |
178 //init events |
139 this.handle_elt.addEventListener("touchstart", hmi_widgets[this.element_id].on_select.bind(this)); |
179 this.element.addEventListener("mousedown", this.bound_on_select); |
140 this.handle_elt.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this)); |
180 this.element.addEventListener("touchstart", this.bound_on_select); |
141 this.element.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this)); |
181 |
|
182 if(this.setpoint_elt != undefined){ |
|
183 this.setpoint_style = this.setpoint_elt.getAttribute("style"); |
|
184 this.setpoint_elt.setAttribute("style", "display:none"); |
|
185 } |
|
186 |
142 |
187 |
143 window.addEventListener("touchmove", hmi_widgets[this.element_id].update_position.bind(this)); |
188 window.addEventListener("touchmove", hmi_widgets[this.element_id].update_position.bind(this)); |
144 window.addEventListener("mousemove", hmi_widgets[this.element_id].update_position.bind(this)); |
189 window.addEventListener("mousemove", hmi_widgets[this.element_id].update_position.bind(this)); |
145 |
190 |
146 window.addEventListener("mouseup", hmi_widgets[this.element_id].on_release.bind(this)) |
191 window.addEventListener("mouseup", hmi_widgets[this.element_id].on_release.bind(this)) |