diff -r 895bbeced72d -r 49799de67540 svghmi/widget_slider.ysl2 --- a/svghmi/widget_slider.ysl2 Mon Aug 10 14:00:20 2020 +0200 +++ b/svghmi/widget_slider.ysl2 Mon Aug 10 15:25:57 2020 +0200 @@ -8,95 +8,127 @@ fi = undefined; drag = false; enTimer = false; - svg_dist = 0 dispatch(value) { if(this.value_elt) this.value_elt.textContent = String(value); - this.handle_position(value); + this.update_DOM(value, this.handle_elt); + } - handle_position(value){ + last_drag = false; + + update_DOM(value, elt){ let [min,max,start,totallength] = this.range; let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min))); let tip = this.range_elt.getPointAtLength(length); - this.handle_elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")"); + elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")"); + + if(this.setpoint_elt != undefined){ + if(this.last_drag!= this.drag){ + if(this.drag){ + this.setpoint_elt.setAttribute("style", this.setpoint_style); + }else{ + this.setpoint_elt.setAttribute("style", "display:none"); + } + this.last_drag = this.drag; + } + } } on_release(evt) { + window.removeEventListener("touchmove", this.on_bound_drag, true); + window.removeEventListener("mousemove", this.on_bound_drag, true); + + window.removeEventListener("mouseup", this.bound_on_release, true) + window.removeEventListener("touchend", this.bound_on_release, true); + window.removeEventListener("touchcancel", this.bound_on_release, true); if(this.drag){ this.drag = false; } + this.update_position(evt); + } + + + on_drag(evt){ + if(this.enTimer && this.drag){ + this.update_position(evt); + //reset timer + this.enTimer = false; + setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); + } } update_position(evt){ - if(this.drag){ - var html_dist = 0; + var html_dist = 0; - //calculate size of widget in html - var range_borders = this.range_elt.getBoundingClientRect(); - var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width ); - var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top]; + //calculate size of widget in html + var range_borders = this.range_elt.getBoundingClientRect(); + var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width ); + var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top]; - //get range and mouse coordinates - var mouseX = undefined; - var mouseY = undefined; - if (evt.type.startsWith("touch")){ - mouseX = Math.ceil(evt.touches[0].clientX); - mouseY = Math.ceil(evt.touches[0].clientY); + //get range and mouse coordinates + var mouseX = undefined; + var mouseY = undefined; + if (evt.type.startsWith("touch")){ + mouseX = Math.ceil(evt.touches[0].clientX); + mouseY = Math.ceil(evt.touches[0].clientY); + } + else{ + mouseX = evt.pageX; + mouseY = evt.pageY; + } + + //get handle distance from mouse position + if (minX > mouseX && minY < mouseY){ + html_dist = 0; + } + else if (maxX < mouseX && maxY > mouseY){ + html_dist = range_length; + } + else{ + // calculate distace + if(this.fi > 0.7){ + html_dist = (minY - mouseY)/Math.sin(this.fi); } else{ - mouseX = evt.pageX; - mouseY = evt.pageY; + html_dist = (mouseX - minX)/Math.cos(this.fi); } - //get handle distance from mouse position - if (minX > mouseX && minY < mouseY){ + //check if in range + if (html_dist > range_length){ + html_dist = range_length; + } + else if (html_dist < 0){ html_dist = 0; } - else if (maxX < mouseX && maxY > mouseY){ - html_dist = range_length; - } - else{ - // calculate distace - if(this.fi > 0.7){ - html_dist = (minY - mouseY)/Math.sin(this.fi); - } - else{ - html_dist = (mouseX - minX)/Math.cos(this.fi); - } - //check if in range - if (html_dist > range_length){ - html_dist = range_length; - } - else if (html_dist < 0){ - html_dist = 0; - } - } + } - this.svg_dist=(html_dist/range_length)*this.range[1]; + this.svg_dist=Math.ceil((html_dist/range_length)*this.range[1]); - //redraw handle - //this.handle_position(svg_dist=(html_dist/range_length)*this.range[1]); - //this.value_elt.textContent = String(Math.ceil(svg_dist)); + this.apply_hmi_value(0, this.svg_dist); - if(this.enTimer){ - this.apply_hmi_value(0, Math.ceil(this.svg_dist)); + // update ghost cursor + if(this.setpoint_elt != undefined){ + this.request_animate(); + } + } - // TODO : update ghost cursor and call this.request_animate() - - //reset timer - this.enTimer = false; - setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); - } - } + animate(){ + this.update_DOM(this.svg_dist, this.setpoint_elt); } on_select(evt){ this.drag = true; this.enTimer = true; + window.addEventListener("touchmove", this.on_bound_drag, true); + window.addEventListener("mousemove", this.on_bound_drag, true); + + window.addEventListener("mouseup", this.bound_on_release, true) + window.addEventListener("touchend", this.bound_on_release, true); + window.addEventListener("touchcancel", this.bound_on_release, true); this.update_position(evt); } @@ -113,17 +145,17 @@ let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength()); this.fi = Math.atan2(start.y-end.y, end.x-start.x); + this.bound_on_select = this.on_select.bind(this); + this.bound_on_release = this.on_release.bind(this); + this.on_bound_drag = this.on_drag.bind(this); - this.handle_elt.addEventListener("touchstart", hmi_widgets[this.element_id].on_select.bind(this)); - this.handle_elt.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this)); - this.element.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this)); + this.element.addEventListener("mousedown", this.bound_on_select); + this.element.addEventListener("touchstart", this.bound_on_select); - window.addEventListener("touchmove", hmi_widgets[this.element_id].update_position.bind(this)); - window.addEventListener("mousemove", hmi_widgets[this.element_id].update_position.bind(this)); - - window.addEventListener("mouseup", hmi_widgets[this.element_id].on_release.bind(this)) - window.addEventListener("touchend", hmi_widgets[this.element_id].on_release.bind(this)); - window.addEventListener("touchcancel", hmi_widgets[this.element_id].on_release.bind(this)); + if(this.setpoint_elt != undefined){ + this.setpoint_style = this.setpoint_elt.getAttribute("style"); + this.setpoint_elt.setAttribute("style", "display:none"); + } } } @@ -132,6 +164,6 @@ template "widget[@type='Slider']", mode="widget_defs" { param "hmi_element"; labels("handle range"); - optional_labels("value min max"); + optional_labels("value min max setpoint"); |, }