4 || |
4 || |
5 class SliderWidget extends Widget{ |
5 class SliderWidget extends Widget{ |
6 frequency = 5; |
6 frequency = 5; |
7 range = undefined; |
7 range = undefined; |
8 handle_orig = undefined; |
8 handle_orig = undefined; |
9 scroll_size = 10; |
9 scroll_size = undefined; |
|
10 scroll_range = 0; |
|
11 scroll_visible = 7; |
10 min_size = 0.07; |
12 min_size = 0.07; |
11 fi = undefined; |
13 fi = undefined; |
12 curr_value = 0; |
14 curr_value = 0; |
13 drag = false; |
15 drag = false; |
14 enTimer = false; |
16 enTimer = false; |
15 handle_click = undefined; |
17 handle_click = undefined; |
16 last_drag = false; |
18 last_drag = false; |
17 |
19 |
18 dispatch(value) { |
20 dispatch(value,oldval, index) { |
19 //save current value inside widget |
21 if (index == 0){ |
20 this.curr_value = value; |
22 let [min,max,start,totallength] = this.range; |
21 |
23 //save current value inside widget |
22 if(this.value_elt) |
24 this.curr_value = value; |
23 this.value_elt.textContent = String(value); |
25 |
|
26 //check if in range |
|
27 if (this.curr_value > max){ |
|
28 this.curr_value = max; |
|
29 this.apply_hmi_value(0, this.curr_value); |
|
30 } |
|
31 else if (this.curr_value < min){ |
|
32 this.curr_value = min; |
|
33 this.apply_hmi_value(0, this.curr_value); |
|
34 } |
|
35 |
|
36 if(this.value_elt) |
|
37 this.value_elt.textContent = String(value); |
|
38 } |
|
39 else if(index == 1){ |
|
40 this.scroll_range = value; |
|
41 this.set_scroll(); |
|
42 } |
|
43 else if(index == 2){ |
|
44 this.scroll_visible = value; |
|
45 this.set_scroll(); |
|
46 } |
24 |
47 |
25 //don't update if draging and setpoint ghost doesn't exist |
48 //don't update if draging and setpoint ghost doesn't exist |
26 if(!this.drag || (this.setpoint_elt != undefined)){ |
49 if(!this.drag || (this.setpoint_elt != undefined)){ |
27 this.update_DOM(value, this.handle_elt); |
50 this.update_DOM(this.curr_value, this.handle_elt); |
|
51 } |
|
52 } |
|
53 |
|
54 set_scroll(){ |
|
55 //check if range is bigger than visible and set scroll size |
|
56 if(this.scroll_range > this.scroll_visible){ |
|
57 this.scroll_size = this.scroll_range - this.scroll_visible; |
|
58 this.range[0] = 0; |
|
59 this.range[1] = this.scroll_size; |
|
60 } |
|
61 else{ |
|
62 this.scroll_size = 1; |
|
63 this.range[0] = 0; |
|
64 this.range[1] = 1; |
28 } |
65 } |
29 } |
66 } |
30 |
67 |
31 update_DOM(value, elt){ |
68 update_DOM(value, elt){ |
32 let [min,max,start,totallength] = this.range; |
69 let [min,max,start,totallength] = this.range; |
222 this.update_DOM(this.curr_value, this.handle_elt); |
258 this.update_DOM(this.curr_value, this.handle_elt); |
223 } |
259 } |
224 } |
260 } |
225 |
261 |
226 on_select(evt){ |
262 on_select(evt){ |
227 if (evt.currentTarget != this.up_elt || evt.currentTarget != this.down_elt){ |
263 //enable drag flag and timer |
228 //enable drag flag and timer |
264 this.drag = true; |
229 this.drag = true; |
265 this.enTimer = true; |
230 this.enTimer = true; |
266 |
231 |
267 //bind events |
232 //bind events |
268 window.addEventListener("touchmove", this.on_bound_drag, true); |
233 window.addEventListener("touchmove", this.on_bound_drag, true); |
269 window.addEventListener("mousemove", this.on_bound_drag, true); |
234 window.addEventListener("mousemove", this.on_bound_drag, true); |
270 |
235 |
271 window.addEventListener("mouseup", this.bound_on_release, true); |
236 window.addEventListener("mouseup", this.bound_on_release, true); |
272 window.addEventListener("touchend", this.bound_on_release, true); |
237 window.addEventListener("touchend", this.bound_on_release, true); |
273 window.addEventListener("touchcancel", this.bound_on_release, true); |
238 window.addEventListener("touchcancel", this.bound_on_release, true); |
274 |
239 |
275 // check if handle was pressed |
240 // check if handle was pressed |
276 if (evt.currentTarget == this.handle_elt){ |
241 if (evt.currentTarget == this.handle_elt){ |
277 //get mouse position on the handle |
242 //get mouse position on the handle |
278 let mouseX = undefined; |
243 let mouseX = undefined; |
279 let mouseY = undefined; |
244 let mouseY = undefined; |
280 if (evt.type.startsWith("touch")){ |
245 if (evt.type.startsWith("touch")){ |
281 mouseX = Math.ceil(evt.touches[0].clientX); |
246 mouseX = Math.ceil(evt.touches[0].clientX); |
282 mouseY = Math.ceil(evt.touches[0].clientY); |
247 mouseY = Math.ceil(evt.touches[0].clientY); |
|
248 } |
|
249 else{ |
|
250 mouseX = evt.pageX; |
|
251 mouseY = evt.pageY; |
|
252 } |
|
253 //save coordinates and orig value |
|
254 this.handle_click = [mouseX,mouseY,this.curr_value]; |
|
255 } |
283 } |
256 else{ |
284 else{ |
257 // get new handle position and reset if handle was not pressed |
285 mouseX = evt.pageX; |
258 this.handle_click = undefined; |
286 mouseY = evt.pageY; |
259 this.update_position(evt); |
287 } |
260 } |
288 //save coordinates and orig value |
261 |
289 this.handle_click = [mouseX,mouseY,this.curr_value]; |
262 //prevent next events |
|
263 evt.stopPropagation(); |
|
264 } |
290 } |
265 else{ |
291 else{ |
266 //prevent next events if up/down were pressed |
292 // get new handle position and reset if handle was not pressed |
267 evt.stopPropagation(); |
293 this.handle_click = undefined; |
268 } |
294 this.update_position(evt); |
269 } |
295 } |
270 |
296 |
271 on_up_button(evt){ |
297 //prevent next events |
272 // go one position up and check if in bounds |
298 evt.stopPropagation(); |
273 this.curr_value = this.curr_value + 1; |
299 |
274 if (this.curr_value > this.range[1]){ |
300 } |
275 this.curr_value = this.range[1]; |
301 |
276 } |
|
277 |
|
278 this.apply_hmi_value(0, this.curr_value); |
|
279 |
|
280 //redraw handle |
|
281 this.request_animate(); |
|
282 } |
|
283 |
|
284 on_down_button(evt){ |
|
285 // go one position down |
|
286 this.curr_value = this.curr_value - 1; |
|
287 if (this.curr_value < this.range[0]){ |
|
288 this.curr_value = this.range[0]; |
|
289 } |
|
290 |
|
291 this.apply_hmi_value(0, this.curr_value); |
|
292 |
|
293 //redraw handle |
|
294 this.request_animate(); |
|
295 } |
|
296 |
302 |
297 init() { |
303 init() { |
298 //set min max value if not defined |
304 //set min max value if not defined |
299 let min = this.min_elt ? |
305 let min = this.min_elt ? |
300 Number(this.min_elt.textContent) : |
306 Number(this.min_elt.textContent) : |
301 this.args.length >= 1 ? this.args[0] : 0; |
307 this.args.length >= 1 ? this.args[0] : 0; |
302 let max = this.max_elt ? |
308 let max = this.max_elt ? |
303 Number(this.max_elt.textContent) : |
309 Number(this.max_elt.textContent) : |
304 this.args.length >= 2 ? this.args[1] : 100; |
310 this.args.length >= 2 ? this.args[1] : 100; |
305 |
311 |
306 //init up down button if exists |
|
307 if(this.up_elt){ |
|
308 this.up_elt.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_up_button(evt)"); |
|
309 } |
|
310 if(this.down_elt){ |
|
311 this.down_elt.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_down_button(evt)"); |
|
312 } |
|
313 |
312 |
314 // save initial parameters |
313 // save initial parameters |
315 this.range_elt.style.strokeMiterlimit="0"; |
314 this.range_elt.style.strokeMiterlimit="0"; |
316 this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()]; |
315 this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()]; |
317 let start = this.range_elt.getPointAtLength(0); |
316 let start = this.range_elt.getPointAtLength(0); |
323 this.bound_on_select = this.on_select.bind(this); |
322 this.bound_on_select = this.on_select.bind(this); |
324 this.bound_on_release = this.on_release.bind(this); |
323 this.bound_on_release = this.on_release.bind(this); |
325 this.on_bound_drag = this.on_drag.bind(this); |
324 this.on_bound_drag = this.on_drag.bind(this); |
326 |
325 |
327 this.handle_elt.addEventListener("mousedown", this.bound_on_select); |
326 this.handle_elt.addEventListener("mousedown", this.bound_on_select); |
328 this.range_elt.addEventListener("mousedown", this.bound_on_select); |
327 this.element.addEventListener("mousedown", this.bound_on_select); |
329 this.range_elt.addEventListener("touchstart", this.bound_on_select); |
328 this.element.addEventListener("touchstart", this.bound_on_select); |
330 |
329 //touch recognised as page drag without next command |
|
330 document.body.addEventListener("touchstart", function(e){}, false); |
|
331 |
|
332 //save ghost style |
331 if(this.setpoint_elt != undefined){ |
333 if(this.setpoint_elt != undefined){ |
332 this.setpoint_style = this.setpoint_elt.getAttribute("style"); |
334 this.setpoint_style = this.setpoint_elt.getAttribute("style"); |
333 this.setpoint_elt.setAttribute("style", "display:none"); |
335 this.setpoint_elt.setAttribute("style", "display:none"); |
334 } |
336 } |
335 |
337 |