|
1 // widget_slider.ysl2 |
|
2 |
|
3 widget_desc("Slider") { |
|
4 longdesc |
|
5 || |
|
6 Slider - DEPRECATED - use ScrollBar or PathSlider instead |
|
7 || |
|
8 |
|
9 shortdesc > Slider - DEPRECATED - use ScrollBar instead |
|
10 |
|
11 path name="value" accepts="HMI_INT" > value |
|
12 path name="range" accepts="HMI_INT" > range |
|
13 path name="visible" accepts="HMI_INT" > visible |
|
14 |
|
15 } |
|
16 |
|
17 widget_class("Slider") |
|
18 || |
|
19 frequency = 5; |
|
20 range = undefined; |
|
21 handle_orig = undefined; |
|
22 scroll_size = undefined; |
|
23 scroll_range = 0; |
|
24 scroll_visible = 7; |
|
25 min_size = 0.07; |
|
26 fi = undefined; |
|
27 curr_value = 0; |
|
28 drag = false; |
|
29 enTimer = false; |
|
30 handle_click = undefined; |
|
31 last_drag = false; |
|
32 |
|
33 dispatch(value,oldval, index) { |
|
34 if (index == 0){ |
|
35 let [min,max,start,totallength] = this.range; |
|
36 //save current value inside widget |
|
37 this.curr_value = value; |
|
38 |
|
39 //check if in range |
|
40 if (this.curr_value > max){ |
|
41 this.curr_value = max; |
|
42 this.apply_hmi_value(0, this.curr_value); |
|
43 } |
|
44 else if (this.curr_value < min){ |
|
45 this.curr_value = min; |
|
46 this.apply_hmi_value(0, this.curr_value); |
|
47 } |
|
48 |
|
49 if(this.value_elt) |
|
50 this.value_elt.textContent = String(value); |
|
51 } |
|
52 else if(index == 1){ |
|
53 this.scroll_range = value; |
|
54 this.set_scroll(); |
|
55 } |
|
56 else if(index == 2){ |
|
57 this.scroll_visible = value; |
|
58 this.set_scroll(); |
|
59 } |
|
60 |
|
61 //don't update if draging and setpoint ghost doesn't exist |
|
62 if(!this.drag || (this.setpoint_elt != undefined)){ |
|
63 this.update_DOM(this.curr_value, this.handle_elt); |
|
64 } |
|
65 } |
|
66 |
|
67 set_scroll(){ |
|
68 //check if range is bigger than visible and set scroll size |
|
69 if(this.scroll_range > this.scroll_visible){ |
|
70 this.scroll_size = this.scroll_range - this.scroll_visible; |
|
71 this.range[0] = 0; |
|
72 this.range[1] = this.scroll_size; |
|
73 } |
|
74 else{ |
|
75 this.scroll_size = 1; |
|
76 this.range[0] = 0; |
|
77 this.range[1] = 1; |
|
78 } |
|
79 } |
|
80 |
|
81 update_DOM(value, elt){ |
|
82 let [min,max,start,totallength] = this.range; |
|
83 // check if handle is resizeable |
|
84 if (this.scroll_size != undefined){ //size changes |
|
85 //get parameters |
|
86 let length = Math.max(min,Math.min(max,(Number(value)-min)*max/(max-min))); |
|
87 let tip = this.range_elt.getPointAtLength(length); |
|
88 let handle_min = totallength*this.min_size; |
|
89 |
|
90 let step = 1; |
|
91 //check if range is bigger than max displayed and recalculate step |
|
92 if ((totallength/handle_min) < (max-min+1)){ |
|
93 step = (max-min+1)/(totallength/handle_min-1); |
|
94 } |
|
95 |
|
96 let kx,ky,offseY,offseX = undefined; |
|
97 //scale on x or y axes |
|
98 if (this.fi > 0.75){ |
|
99 //get scale factor |
|
100 if(step > 1){ |
|
101 ky = handle_min/this.handle_orig.height; |
|
102 } |
|
103 else{ |
|
104 ky = (totallength-handle_min*(max-min))/this.handle_orig.height; |
|
105 } |
|
106 kx = 1; |
|
107 //get 0 offset to stay inside range |
|
108 offseY = start.y - (this.handle_orig.height + this.handle_orig.y) * ky; |
|
109 offseX = 0; |
|
110 //get distance from value |
|
111 tip.y =this.range_elt.getPointAtLength(0).y - length/step *handle_min; |
|
112 } |
|
113 else{ |
|
114 //get scale factor |
|
115 if(step > 1){ |
|
116 kx = handle_min/this.handle_orig.width; |
|
117 } |
|
118 else{ |
|
119 kx = (totallength-handle_min*(max-min))/this.handle_orig.width; |
|
120 } |
|
121 ky = 1; |
|
122 //get 0 offset to stay inside range |
|
123 offseX = start.x - (this.handle_orig.x * kx); |
|
124 offseY = 0; |
|
125 //get distance from value |
|
126 tip.x =this.range_elt.getPointAtLength(0).x + length/step *handle_min; |
|
127 } |
|
128 elt.setAttribute('transform',"matrix("+(kx)+" 0 0 "+(ky)+" "+(tip.x-start.x+offseX)+" "+(tip.y-start.y+offseY)+")"); |
|
129 } |
|
130 else{ //size stays the same |
|
131 let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min))); |
|
132 let tip = this.range_elt.getPointAtLength(length); |
|
133 elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")"); |
|
134 } |
|
135 |
|
136 // show or hide ghost if exists |
|
137 if(this.setpoint_elt != undefined){ |
|
138 if(this.last_drag!= this.drag){ |
|
139 if(this.drag){ |
|
140 this.setpoint_elt.setAttribute("style", this.setpoint_style); |
|
141 }else{ |
|
142 this.setpoint_elt.setAttribute("style", "display:none"); |
|
143 } |
|
144 this.last_drag = this.drag; |
|
145 } |
|
146 } |
|
147 } |
|
148 |
|
149 on_release(evt) { |
|
150 //unbind events |
|
151 window.removeEventListener("touchmove", this.on_bound_drag, true); |
|
152 window.removeEventListener("mousemove", this.on_bound_drag, true); |
|
153 |
|
154 window.removeEventListener("mouseup", this.bound_on_release, true); |
|
155 window.removeEventListener("touchend", this.bound_on_release, true); |
|
156 window.removeEventListener("touchcancel", this.bound_on_release, true); |
|
157 |
|
158 //reset drag flag |
|
159 if(this.drag){ |
|
160 this.drag = false; |
|
161 } |
|
162 |
|
163 // get final position |
|
164 this.update_position(evt); |
|
165 |
|
166 } |
|
167 |
|
168 on_drag(evt){ |
|
169 //ignore drag event for X amount of time and if not selected |
|
170 if(this.enTimer && this.drag){ |
|
171 this.update_position(evt); |
|
172 |
|
173 //reset timer |
|
174 this.enTimer = false; |
|
175 setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); |
|
176 } |
|
177 } |
|
178 |
|
179 update_position(evt){ |
|
180 var html_dist = 0; |
|
181 let [min,max,start,totallength] = this.range; |
|
182 |
|
183 //calculate size of widget in html |
|
184 var range_borders = this.range_elt.getBoundingClientRect(); |
|
185 var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top]; |
|
186 var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width ); |
|
187 |
|
188 //get range and mouse coordinates |
|
189 var mouseX = undefined; |
|
190 var mouseY = undefined; |
|
191 if (evt.type.startsWith("touch")){ |
|
192 mouseX = Math.ceil(evt.touches[0].clientX); |
|
193 mouseY = Math.ceil(evt.touches[0].clientY); |
|
194 } |
|
195 else{ |
|
196 mouseX = evt.pageX; |
|
197 mouseY = evt.pageY; |
|
198 } |
|
199 |
|
200 // calculate position |
|
201 if (this.handle_click){ //if clicked on handle |
|
202 let moveDist = 0, resizeAdd = 0; |
|
203 let range_percent = 1; |
|
204 |
|
205 //set paramters for resizeable handle |
|
206 if (this.scroll_size != undefined){ |
|
207 // add one more object to stay inside range |
|
208 resizeAdd = 1; |
|
209 |
|
210 //chack if range is bigger than display option and |
|
211 // calculate percent of range with out handle |
|
212 if(((max/(max*this.min_size)) < (max-min+1))){ |
|
213 range_percent = 1-this.min_size; |
|
214 } |
|
215 else{ |
|
216 range_percent = 1-(max-max*this.min_size*(max-min))/max; |
|
217 } |
|
218 } |
|
219 |
|
220 //calculate value difference on x or y axis |
|
221 if(this.fi > 0.7){ |
|
222 moveDist = ((max-min+resizeAdd)/(range_length*range_percent))*((this.handle_click[1]-mouseY)/Math.sin(this.fi)); |
|
223 } |
|
224 else{ |
|
225 moveDist = ((max-min+resizeAdd)/(range_length*range_percent))*((mouseX-this.handle_click[0])/Math.cos(this.fi)); |
|
226 } |
|
227 |
|
228 this.curr_value = Math.ceil(this.handle_click[2] + moveDist); |
|
229 } |
|
230 else{ //if clicked on widget |
|
231 //get handle distance from mouse position |
|
232 if (minX > mouseX && minY < mouseY){ |
|
233 html_dist = 0; |
|
234 } |
|
235 else if (maxX < mouseX && maxY > mouseY){ |
|
236 html_dist = range_length; |
|
237 } |
|
238 else{ |
|
239 if(this.fi > 0.7){ |
|
240 html_dist = (minY - mouseY)/Math.sin(this.fi); |
|
241 } |
|
242 else{ |
|
243 html_dist = (mouseX - minX)/Math.cos(this.fi); |
|
244 } |
|
245 } |
|
246 //calculate distance |
|
247 this.curr_value=Math.ceil((html_dist/range_length)*(this.range[1]-this.range[0])+this.range[0]); |
|
248 } |
|
249 |
|
250 //check if in range and apply |
|
251 if (this.curr_value > max){ |
|
252 this.curr_value = max; |
|
253 } |
|
254 else if (this.curr_value < min){ |
|
255 this.curr_value = min; |
|
256 } |
|
257 this.apply_hmi_value(0, this.curr_value); |
|
258 |
|
259 //redraw handle |
|
260 this.request_animate(); |
|
261 |
|
262 } |
|
263 |
|
264 animate(){ |
|
265 // redraw handle on screen refresh |
|
266 // check if setpoint(ghost) handle exsist otherwise update main handle |
|
267 if(this.setpoint_elt != undefined){ |
|
268 this.update_DOM(this.curr_value, this.setpoint_elt); |
|
269 } |
|
270 else{ |
|
271 this.update_DOM(this.curr_value, this.handle_elt); |
|
272 } |
|
273 } |
|
274 |
|
275 on_select(evt){ |
|
276 //enable drag flag and timer |
|
277 this.drag = true; |
|
278 this.enTimer = true; |
|
279 |
|
280 //bind events |
|
281 window.addEventListener("touchmove", this.on_bound_drag, true); |
|
282 window.addEventListener("mousemove", this.on_bound_drag, true); |
|
283 |
|
284 window.addEventListener("mouseup", this.bound_on_release, true); |
|
285 window.addEventListener("touchend", this.bound_on_release, true); |
|
286 window.addEventListener("touchcancel", this.bound_on_release, true); |
|
287 |
|
288 // check if handle was pressed |
|
289 if (evt.currentTarget == this.handle_elt){ |
|
290 //get mouse position on the handle |
|
291 let mouseX = undefined; |
|
292 let mouseY = undefined; |
|
293 if (evt.type.startsWith("touch")){ |
|
294 mouseX = Math.ceil(evt.touches[0].clientX); |
|
295 mouseY = Math.ceil(evt.touches[0].clientY); |
|
296 } |
|
297 else{ |
|
298 mouseX = evt.pageX; |
|
299 mouseY = evt.pageY; |
|
300 } |
|
301 //save coordinates and orig value |
|
302 this.handle_click = [mouseX,mouseY,this.curr_value]; |
|
303 } |
|
304 else{ |
|
305 // get new handle position and reset if handle was not pressed |
|
306 this.handle_click = undefined; |
|
307 this.update_position(evt); |
|
308 } |
|
309 |
|
310 //prevent next events |
|
311 evt.stopPropagation(); |
|
312 |
|
313 } |
|
314 |
|
315 |
|
316 init() { |
|
317 //set min max value if not defined |
|
318 let min = this.min_elt ? |
|
319 Number(this.min_elt.textContent) : |
|
320 this.args.length >= 1 ? this.args[0] : 0; |
|
321 let max = this.max_elt ? |
|
322 Number(this.max_elt.textContent) : |
|
323 this.args.length >= 2 ? this.args[1] : 100; |
|
324 |
|
325 |
|
326 // save initial parameters |
|
327 this.range_elt.style.strokeMiterlimit="0"; |
|
328 this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()]; |
|
329 let start = this.range_elt.getPointAtLength(0); |
|
330 let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength()); |
|
331 this.fi = Math.atan2(start.y-end.y, end.x-start.x); |
|
332 this.handle_orig = this.handle_elt.getBBox(); |
|
333 |
|
334 //bind functions |
|
335 this.bound_on_select = this.on_select.bind(this); |
|
336 this.bound_on_release = this.on_release.bind(this); |
|
337 this.on_bound_drag = this.on_drag.bind(this); |
|
338 |
|
339 this.handle_elt.addEventListener("mousedown", this.bound_on_select); |
|
340 this.element.addEventListener("mousedown", this.bound_on_select); |
|
341 this.element.addEventListener("touchstart", this.bound_on_select); |
|
342 //touch recognised as page drag without next command |
|
343 document.body.addEventListener("touchstart", function(e){}, false); |
|
344 |
|
345 //save ghost style |
|
346 if(this.setpoint_elt != undefined){ |
|
347 this.setpoint_style = this.setpoint_elt.getAttribute("style"); |
|
348 this.setpoint_elt.setAttribute("style", "display:none"); |
|
349 } |
|
350 |
|
351 } |
|
352 || |
|
353 |
|
354 widget_defs("Slider") { |
|
355 labels("handle range"); |
|
356 optional_labels("value min max setpoint"); |
|
357 } |