99 on_release(evt) { |
99 on_release(evt) { |
100 //unbind events |
100 //unbind events |
101 window.removeEventListener("touchmove", this.on_bound_drag, true); |
101 window.removeEventListener("touchmove", this.on_bound_drag, true); |
102 window.removeEventListener("mousemove", this.on_bound_drag, true); |
102 window.removeEventListener("mousemove", this.on_bound_drag, true); |
103 |
103 |
104 window.removeEventListener("mouseup", this.bound_on_release, true) |
104 window.removeEventListener("mouseup", this.bound_on_release, true); |
105 window.removeEventListener("touchend", this.bound_on_release, true); |
105 window.removeEventListener("touchend", this.bound_on_release, true); |
106 window.removeEventListener("touchcancel", this.bound_on_release, true); |
106 window.removeEventListener("touchcancel", this.bound_on_release, true); |
107 |
107 |
108 //reset drag flag |
108 //reset drag flag |
109 if(this.drag){ |
109 if(this.drag){ |
222 this.update_DOM(this.curr_value, this.handle_elt); |
222 this.update_DOM(this.curr_value, this.handle_elt); |
223 } |
223 } |
224 } |
224 } |
225 |
225 |
226 on_select(evt){ |
226 on_select(evt){ |
227 //enable drag flag and timer |
227 if (evt.currentTarget != this.up_elt || evt.currentTarget != this.down_elt){ |
228 this.drag = true; |
228 //enable drag flag and timer |
229 this.enTimer = true; |
229 this.drag = true; |
230 |
230 this.enTimer = true; |
231 //bind events |
231 |
232 window.addEventListener("touchmove", this.on_bound_drag, true); |
232 //bind events |
233 window.addEventListener("mousemove", this.on_bound_drag, true); |
233 window.addEventListener("touchmove", this.on_bound_drag, true); |
234 |
234 window.addEventListener("mousemove", this.on_bound_drag, true); |
235 window.addEventListener("mouseup", this.bound_on_release, true) |
235 |
236 window.addEventListener("touchend", this.bound_on_release, true); |
236 window.addEventListener("mouseup", this.bound_on_release, true); |
237 window.addEventListener("touchcancel", this.bound_on_release, true); |
237 window.addEventListener("touchend", this.bound_on_release, true); |
238 |
238 window.addEventListener("touchcancel", this.bound_on_release, true); |
239 // check if handle was pressed |
239 |
240 if (evt.currentTarget == this.handle_elt){ |
240 // check if handle was pressed |
241 //get mouse position on the handle |
241 if (evt.currentTarget == this.handle_elt){ |
242 let mouseX = undefined; |
242 //get mouse position on the handle |
243 let mouseY = undefined; |
243 let mouseX = undefined; |
244 if (evt.type.startsWith("touch")){ |
244 let mouseY = undefined; |
245 mouseX = Math.ceil(evt.touches[0].clientX); |
245 if (evt.type.startsWith("touch")){ |
246 mouseY = Math.ceil(evt.touches[0].clientY); |
246 mouseX = Math.ceil(evt.touches[0].clientX); |
|
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]; |
247 } |
255 } |
248 else{ |
256 else{ |
249 mouseX = evt.pageX; |
257 // get new handle position and reset if handle was not pressed |
250 mouseY = evt.pageY; |
258 this.handle_click = undefined; |
251 } |
259 this.update_position(evt); |
252 //save coordinates and orig value |
260 } |
253 this.handle_click = [mouseX,mouseY,this.curr_value]; |
261 |
|
262 //prevent next events |
|
263 evt.stopPropagation(); |
254 } |
264 } |
255 else{ |
265 else{ |
256 // get new handle position and reset if handle was not pressed |
266 //prevent next events if up/down were pressed |
257 this.handle_click = undefined; |
267 evt.stopPropagation(); |
258 this.update_position(evt); |
268 } |
259 } |
269 } |
260 |
270 |
261 //prevent next events |
271 on_up_button(evt){ |
262 evt.stopPropagation(); |
272 // go one position up and check if in bounds |
|
273 this.curr_value = this.curr_value + 1; |
|
274 if (this.curr_value > this.range[1]){ |
|
275 this.curr_value = this.range[1]; |
|
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(); |
263 } |
295 } |
264 |
296 |
265 init() { |
297 init() { |
266 //set min max value if not defined |
298 //set min max value if not defined |
267 let min = this.min_elt ? |
299 let min = this.min_elt ? |
269 this.args.length >= 1 ? this.args[0] : 0; |
301 this.args.length >= 1 ? this.args[0] : 0; |
270 let max = this.max_elt ? |
302 let max = this.max_elt ? |
271 Number(this.max_elt.textContent) : |
303 Number(this.max_elt.textContent) : |
272 this.args.length >= 2 ? this.args[1] : 100; |
304 this.args.length >= 2 ? this.args[1] : 100; |
273 |
305 |
|
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 |
274 // save initial parameters |
314 // save initial parameters |
275 this.range_elt.style.strokeMiterlimit="0"; |
315 this.range_elt.style.strokeMiterlimit="0"; |
276 this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()]; |
316 this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()]; |
277 let start = this.range_elt.getPointAtLength(0); |
317 let start = this.range_elt.getPointAtLength(0); |
278 let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength()); |
318 let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength()); |
283 this.bound_on_select = this.on_select.bind(this); |
323 this.bound_on_select = this.on_select.bind(this); |
284 this.bound_on_release = this.on_release.bind(this); |
324 this.bound_on_release = this.on_release.bind(this); |
285 this.on_bound_drag = this.on_drag.bind(this); |
325 this.on_bound_drag = this.on_drag.bind(this); |
286 |
326 |
287 this.handle_elt.addEventListener("mousedown", this.bound_on_select); |
327 this.handle_elt.addEventListener("mousedown", this.bound_on_select); |
288 this.element.addEventListener("mousedown", this.bound_on_select); |
328 this.range_elt.addEventListener("mousedown", this.bound_on_select); |
289 this.element.addEventListener("touchstart", this.bound_on_select); |
329 this.range_elt.addEventListener("touchstart", this.bound_on_select); |
290 |
330 |
291 if(this.setpoint_elt != undefined){ |
331 if(this.setpoint_elt != undefined){ |
292 this.setpoint_style = this.setpoint_elt.getAttribute("style"); |
332 this.setpoint_style = this.setpoint_elt.getAttribute("style"); |
293 this.setpoint_elt.setAttribute("style", "display:none"); |
333 this.setpoint_elt.setAttribute("style", "display:none"); |
294 } |
334 } |