# HG changeset patch # User Edouard Tisserant # Date 1600335022 -7200 # Node ID 6ea4b7e1a9ed5c25dfd070227118507b42cf5852 # Parent 6dd617cc9c050afc57ea631d23d071e965609a2d# Parent 696301e869d56c1acb009346c93a6b88deb28f4f Merge + fix side effects of making warning instead of errors in case of missing HMI variable diff -r 6dd617cc9c05 -r 6ea4b7e1a9ed svghmi/gen_index_xhtml.xslt --- a/svghmi/gen_index_xhtml.xslt Tue Sep 15 13:57:06 2020 +0200 +++ b/svghmi/gen_index_xhtml.xslt Thu Sep 17 11:30:22 2020 +0200 @@ -915,7 +915,7 @@ - + Widget id=" @@ -924,6 +924,10 @@ " in HMI tree + undefined + + , + " @@ -1179,6 +1183,8 @@ let index = this.get_variable_index(i); + if(index == undefined) continue; + subscribers(index).add(this); } @@ -1197,6 +1203,8 @@ let realindex = this.get_variable_index(index); + if(realindex == undefined) continue; + let cached_val = cache[realindex]; if(cached_val != undefined) @@ -1231,9 +1239,13 @@ } - change_hmi_value(index,opstr) { - - return change_hmi_value(this.get_variable_index(index), opstr); + change_hmi_value(index, opstr) { + + let realindex = this.get_variable_index(index); + + if(realindex == undefined) return undefined; + + return change_hmi_value(realindex, opstr); } @@ -1241,7 +1253,11 @@ apply_hmi_value(index, new_val) { - return apply_hmi_value(this.get_variable_index(index), new_val); + let realindex = this.get_variable_index(index); + + if(realindex == undefined) return undefined; + + return apply_hmi_value(realindex, new_val); } @@ -1255,6 +1271,8 @@ let refindex = this.get_variable_index(i); + if(refindex == undefined) continue; + if(index == refindex) { @@ -1490,83 +1508,101 @@ state = 0; + plc_lock = false; + active_style = undefined; inactive_style = undefined; - // TODO decouple update of DOM from event (i.e use animate()) - - - - - - // TODO State of the button should distinguish UI feedbak from current PLC value - - - - on_mouse_down(evt) { + dispatch(value) { + + if(value){ + + this.button_release(); + + } + + } + + + + on_mouse_down(evt) { + + if (this.active_style && this.inactive_style) { + + this.active_elt.setAttribute("style", this.active_style); + + this.inactive_elt.setAttribute("style", "display:none"); + + } + + this.apply_hmi_value(0, 1); + + this.plc_lock = false; + + } + + + + on_mouse_up(evt) { + + this.button_release(); + + } + + + + button_release(){ + + if(!this.plc_lock){ + + this.plc_lock = true; + + } + + else{ + + if (this.active_style && this.inactive_style) { + + this.active_elt.setAttribute("style", "display:none"); + + this.inactive_elt.setAttribute("style", this.inactive_style); + + } + + this.apply_hmi_value(0, 0); + + } + + } + + + + init() { + + this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined; + + this.inactive_style = this.inactive_elt ? this.inactive_elt.style.cssText : undefined; + + if (this.active_style && this.inactive_style) { - this.active_elt.setAttribute("style", this.active_style); - - this.inactive_elt.setAttribute("style", "display:none"); + this.active_elt.setAttribute("style", "display:none"); + + this.inactive_elt.setAttribute("style", this.inactive_style); } - this.apply_hmi_value(0, 1); - - // TODO inhibit all mouse/touch events except mouse up (in other word grab cursor) - - } - - - - on_mouse_up(evt) { - - if (this.active_style && this.inactive_style) { - - this.active_elt.setAttribute("style", "display:none"); - - this.inactive_elt.setAttribute("style", this.inactive_style); - - } - - this.apply_hmi_value(0, 0); - - // TODO release inhibited events - - } - - - - init() { - - // TODO : move to widget_defs so that we can have generated string literals directly - - this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined; - - this.inactive_style = this.inactive_elt ? this.inactive_elt.style.cssText : undefined; - - - - if (this.active_style && this.inactive_style) { - - this.active_elt.setAttribute("style", "display:none"); - - this.inactive_elt.setAttribute("style", this.inactive_style); - - } - - - - this.element.setAttribute("onmousedown", "hmi_widgets[\""+this.element_id+"\"].on_mouse_down(evt)"); - - this.element.setAttribute("onmouseup", "hmi_widgets[\""+this.element_id+"\"].on_mouse_up(evt)"); - - } + + + this.element.setAttribute("onmousedown", "hmi_widgets["+this.element_id+"].on_mouse_down(evt)"); + + this.element.setAttribute("onmouseup", "hmi_widgets["+this.element_id+"].on_mouse_up(evt)"); + + } } @@ -4718,47 +4754,163 @@ range = undefined; + handle_orig = undefined; + + scroll_size = 10; + + min_size = 0.07; + fi = undefined; - svg_dist = undefined; + curr_value = 0; drag = false; enTimer = false; + handle_click = undefined; + + last_drag = false; + dispatch(value) { + //save current value inside widget + + this.curr_value = value; + + + if(this.value_elt) this.value_elt.textContent = String(value); - this.update_DOM(value, this.handle_elt); - - + //don't update if draging and setpoint ghost doesn't exist + + if(!this.drag || (this.setpoint_elt != undefined)){ + + this.update_DOM(value, this.handle_elt); + + } } - 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); - - elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")"); - - + // check if handle is resizeable + + if (this.scroll_size != undefined){ //size changes + + //get parameters + + let length = Math.max(min,Math.min(max,(Number(value)-min)*max/(max-min))); + + let tip = this.range_elt.getPointAtLength(length); + + let handle_min = totallength*this.min_size; + + + + let step = 1; + + //check if range is bigger than max displayed and recalculate step + + if ((totallength/handle_min) < (max-min+1)){ + + step = (max-min+1)/(totallength/handle_min-1); + + } + + + + let kx,ky,offseY,offseX = undefined; + + //scale on x or y axes + + if (this.fi > 0.75){ + + //get scale factor + + if(step > 1){ + + ky = handle_min/this.handle_orig.height; + + } + + else{ + + ky = (totallength-handle_min*(max-min))/this.handle_orig.height; + + } + + kx = 1; + + //get 0 offset to stay inside range + + offseY = start.y - (this.handle_orig.height + this.handle_orig.y) * ky; + + offseX = 0; + + //get distance from value + + tip.y =this.range_elt.getPointAtLength(0).y - length/step *handle_min; + + } + + else{ + + //get scale factor + + if(step > 1){ + + kx = handle_min/this.handle_orig.width; + + } + + else{ + + kx = (totallength-handle_min*(max-min))/this.handle_orig.width; + + } + + ky = 1; + + //get 0 offset to stay inside range + + offseX = start.x - (this.handle_orig.x * kx); + + offseY = 0; + + //get distance from value + + tip.x =this.range_elt.getPointAtLength(0).x + length/step *handle_min; + + } + + elt.setAttribute('transform',"matrix("+(kx)+" 0 0 "+(ky)+" "+(tip.x-start.x+offseX)+" "+(tip.y-start.y+offseY)+")"); + + } + + else{ //size stays the same + + let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min))); + + let tip = this.range_elt.getPointAtLength(length); + + elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")"); + + } + + + + // show or hide ghost if exists if(this.setpoint_elt != undefined){ @@ -4786,6 +4938,8 @@ on_release(evt) { + //unbind events + window.removeEventListener("touchmove", this.on_bound_drag, true); window.removeEventListener("mousemove", this.on_bound_drag, true); @@ -4798,26 +4952,38 @@ window.removeEventListener("touchcancel", this.bound_on_release, true); + + + //reset drag flag + if(this.drag){ this.drag = false; } + + + // get final position + this.update_position(evt); + + } - - on_drag(evt){ + //ignore drag event for X amount of time and if not selected + if(this.enTimer && this.drag){ this.update_position(evt); + + //reset timer this.enTimer = false; @@ -4834,16 +5000,18 @@ var html_dist = 0; + let [min,max,start,totallength] = this.range; + //calculate size of widget in html var range_borders = this.range_elt.getBoundingClientRect(); + var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top]; + 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 @@ -4870,112 +5038,240 @@ - //get handle distance from mouse position - - if (minX > mouseX && minY < mouseY){ - - html_dist = 0; + // calculate position + + if (this.handle_click){ //if clicked on handle + + let moveDist = 0, resizeAdd = 0; + + let range_percent = 1; + + + + //set paramters for resizeable handle + + if (this.scroll_size != undefined){ + + // add one more object to stay inside range + + resizeAdd = 1; + + + + //chack if range is bigger than display option and + + // calculate percent of range with out handle + + if(((max/(max*this.min_size)) < (max-min+1))){ + + range_percent = 1-this.min_size; + + } + + else{ + + range_percent = 1-(max-max*this.min_size*(max-min))/max; + + } + + } + + + + //calculate value difference on x or y axis + + if(this.fi > 0.7){ + + moveDist = ((max-min+resizeAdd)/(range_length*range_percent))*((this.handle_click[1]-mouseY)/Math.sin(this.fi)); + + } + + else{ + + moveDist = ((max-min+resizeAdd)/(range_length*range_percent))*((mouseX-this.handle_click[0])/Math.cos(this.fi)); + + } + + + + this.curr_value = Math.ceil(this.handle_click[2] + moveDist); } - else if (maxX < mouseX && maxY > mouseY){ - - html_dist = range_length; + else{ //if clicked on widget + + //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{ + + if(this.fi > 0.7){ + + html_dist = (minY - mouseY)/Math.sin(this.fi); + + } + + else{ + + html_dist = (mouseX - minX)/Math.cos(this.fi); + + } + + } + + //calculate distance + + this.curr_value=Math.ceil((html_dist/range_length)*(this.range[1]-this.range[0])+this.range[0]); } + + + //check if in range + + if (this.curr_value > max){ + + this.curr_value = max; + + } + + else if (this.curr_value < min){ + + this.curr_value = min; + + } + + + + this.apply_hmi_value(0, this.curr_value); + + + + //redraw handle + + this.request_animate(); + + + + } + + + + animate(){ + + // redraw handle on screen refresh + + // check if setpoint(ghost) handle exsist otherwise update main handle + + if(this.setpoint_elt != undefined){ + + this.update_DOM(this.curr_value, this.setpoint_elt); + + } + else{ - // calculate distace - - if(this.fi > 0.7){ - - html_dist = (minY - mouseY)/Math.sin(this.fi); + this.update_DOM(this.curr_value, this.handle_elt); + + } + + } + + + + on_select(evt){ + + //enable drag flag and timer + + this.drag = true; + + this.enTimer = true; + + + + //bind events + + 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); + + + + // check if handle was pressed + + if (evt.currentTarget == this.handle_elt){ + + //get mouse position on the handle + + let mouseX = undefined; + + let mouseY = undefined; + + if (evt.type.startsWith("touch")){ + + mouseX = Math.ceil(evt.touches[0].clientX); + + mouseY = Math.ceil(evt.touches[0].clientY); } else{ - html_dist = (mouseX - minX)/Math.cos(this.fi); + mouseX = evt.pageX; + + mouseY = evt.pageY; } - - - //check if in range - - if (html_dist > range_length){ - - html_dist = range_length; - - } - - else if (html_dist < 0){ - - html_dist = 0; - - } - - + //save coordinates and orig value + + this.handle_click = [mouseX,mouseY,this.curr_value]; } - - - this.svg_dist=Math.ceil((html_dist/range_length)*this.range[1]); - - - - this.apply_hmi_value(0, this.svg_dist); - - - - // update ghost cursor - - if(this.setpoint_elt != undefined){ - - this.request_animate(); + else{ + + // get new handle position and reset if handle was not pressed + + this.handle_click = undefined; + + this.update_position(evt); } + + + //prevent next events + + evt.stopPropagation(); + } - 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); - - } - - - init() { + //set min max value if not defined + let min = this.min_elt ? Number(this.min_elt.textContent) : @@ -4990,6 +5286,10 @@ + // save initial parameters + + this.range_elt.style.strokeMiterlimit="0"; + this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()]; let start = this.range_elt.getPointAtLength(0); @@ -4998,7 +5298,11 @@ this.fi = Math.atan2(start.y-end.y, end.x-start.x); - + this.handle_orig = this.handle_elt.getBBox(); + + + + //bind functions this.bound_on_select = this.on_select.bind(this); @@ -5008,6 +5312,8 @@ + this.handle_elt.addEventListener("mousedown", this.bound_on_select); + this.element.addEventListener("mousedown", this.bound_on_select); this.element.addEventListener("touchstart", this.bound_on_select); @@ -5119,38 +5425,56 @@ dispatch(value) { - this.state = value; + if(this.state != value){ + + this.state = value; + + if (this.state) { + + this.active_elt.setAttribute("style", this.active_style); + + this.inactive_elt.setAttribute("style", "display:none"); + + } else { + + this.inactive_elt.setAttribute("style", this.inactive_style); + + this.active_elt.setAttribute("style", "display:none"); + + } + + } + + } + + + + on_click(evt) { if (this.state) { + this.inactive_elt.setAttribute("style", this.inactive_style); + + this.active_elt.setAttribute("style", "display:none"); + + this.state = 0; + + } else { + this.active_elt.setAttribute("style", this.active_style); this.inactive_elt.setAttribute("style", "display:none"); - this.state = 0; - - } else { - - this.inactive_elt.setAttribute("style", this.inactive_style); - - this.active_elt.setAttribute("style", "display:none"); - this.state = 1; } + this.apply_hmi_value(0, this.state); + } - on_click(evt) { - - this.apply_hmi_value(0, this.state); - - } - - - init() { this.active_style = this.active_elt.style.cssText; @@ -5159,6 +5483,10 @@ this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)"); + this.inactive_elt.setAttribute("style", this.inactive_style); + + this.active_elt.setAttribute("style", "display:none"); + } } diff -r 6dd617cc9c05 -r 6ea4b7e1a9ed svghmi/widget_button.ysl2 --- a/svghmi/widget_button.ysl2 Tue Sep 15 13:57:06 2020 +0200 +++ b/svghmi/widget_button.ysl2 Thu Sep 17 11:30:22 2020 +0200 @@ -5,45 +5,54 @@ class ButtonWidget extends Widget{ frequency = 5; state = 0; + plc_lock = false; active_style = undefined; inactive_style = undefined; - // TODO decouple update of DOM from event (i.e use animate()) - - - // TODO State of the button should distinguish UI feedbak from current PLC value - - on_mouse_down(evt) { - if (this.active_style && this.inactive_style) { - this.active_elt.setAttribute("style", this.active_style); - this.inactive_elt.setAttribute("style", "display:none"); + dispatch(value) { + if(value){ + this.button_release(); } - this.apply_hmi_value(0, 1); - // TODO inhibit all mouse/touch events except mouse up (in other word grab cursor) } - on_mouse_up(evt) { + on_mouse_down(evt) { + if (this.active_style && this.inactive_style) { + this.active_elt.setAttribute("style", this.active_style); + this.inactive_elt.setAttribute("style", "display:none"); + } + this.apply_hmi_value(0, 1); + this.plc_lock = false; + } + + on_mouse_up(evt) { + this.button_release(); + } + + button_release(){ + if(!this.plc_lock){ + this.plc_lock = true; + } + else{ + if (this.active_style && this.inactive_style) { + this.active_elt.setAttribute("style", "display:none"); + this.inactive_elt.setAttribute("style", this.inactive_style); + } + this.apply_hmi_value(0, 0); + } + } + + init() { + this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined; + this.inactive_style = this.inactive_elt ? this.inactive_elt.style.cssText : undefined; + if (this.active_style && this.inactive_style) { this.active_elt.setAttribute("style", "display:none"); this.inactive_elt.setAttribute("style", this.inactive_style); } - this.apply_hmi_value(0, 0); - // TODO release inhibited events - } - init() { - // TODO : move to widget_defs so that we can have generated string literals directly - this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined; - this.inactive_style = this.inactive_elt ? this.inactive_elt.style.cssText : undefined; - - if (this.active_style && this.inactive_style) { - this.active_elt.setAttribute("style", "display:none"); - this.inactive_elt.setAttribute("style", this.inactive_style); - } - - this.element.setAttribute("onmousedown", "hmi_widgets[\""+this.element_id+"\"].on_mouse_down(evt)"); - this.element.setAttribute("onmouseup", "hmi_widgets[\""+this.element_id+"\"].on_mouse_up(evt)"); - } + this.element.setAttribute("onmousedown", "hmi_widgets["+this.element_id+"].on_mouse_down(evt)"); + this.element.setAttribute("onmouseup", "hmi_widgets["+this.element_id+"].on_mouse_up(evt)"); + } } || } diff -r 6dd617cc9c05 -r 6ea4b7e1a9ed svghmi/widget_slider.ysl2 --- a/svghmi/widget_slider.ysl2 Tue Sep 15 13:57:06 2020 +0200 +++ b/svghmi/widget_slider.ysl2 Thu Sep 17 11:30:22 2020 +0200 @@ -5,27 +5,85 @@ class SliderWidget extends Widget{ frequency = 5; range = undefined; + handle_orig = undefined; + scroll_size = 10; + min_size = 0.07; fi = undefined; - svg_dist = undefined; + curr_value = 0; drag = false; enTimer = false; + handle_click = undefined; + last_drag = false; dispatch(value) { + //save current value inside widget + this.curr_value = value; + if(this.value_elt) this.value_elt.textContent = String(value); - this.update_DOM(value, this.handle_elt); - - } - - last_drag = false; + //don't update if draging and setpoint ghost doesn't exist + if(!this.drag || (this.setpoint_elt != undefined)){ + this.update_DOM(value, this.handle_elt); + } + } 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); - elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")"); - + // check if handle is resizeable + if (this.scroll_size != undefined){ //size changes + //get parameters + let length = Math.max(min,Math.min(max,(Number(value)-min)*max/(max-min))); + let tip = this.range_elt.getPointAtLength(length); + let handle_min = totallength*this.min_size; + + let step = 1; + //check if range is bigger than max displayed and recalculate step + if ((totallength/handle_min) < (max-min+1)){ + step = (max-min+1)/(totallength/handle_min-1); + } + + let kx,ky,offseY,offseX = undefined; + //scale on x or y axes + if (this.fi > 0.75){ + //get scale factor + if(step > 1){ + ky = handle_min/this.handle_orig.height; + } + else{ + ky = (totallength-handle_min*(max-min))/this.handle_orig.height; + } + kx = 1; + //get 0 offset to stay inside range + offseY = start.y - (this.handle_orig.height + this.handle_orig.y) * ky; + offseX = 0; + //get distance from value + tip.y =this.range_elt.getPointAtLength(0).y - length/step *handle_min; + } + else{ + //get scale factor + if(step > 1){ + kx = handle_min/this.handle_orig.width; + } + else{ + kx = (totallength-handle_min*(max-min))/this.handle_orig.width; + } + ky = 1; + //get 0 offset to stay inside range + offseX = start.x - (this.handle_orig.x * kx); + offseY = 0; + //get distance from value + tip.x =this.range_elt.getPointAtLength(0).x + length/step *handle_min; + } + elt.setAttribute('transform',"matrix("+(kx)+" 0 0 "+(ky)+" "+(tip.x-start.x+offseX)+" "+(tip.y-start.y+offseY)+")"); + } + else{ //size stays the same + let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min))); + let tip = this.range_elt.getPointAtLength(length); + elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")"); + } + + // show or hide ghost if exists if(this.setpoint_elt != undefined){ if(this.last_drag!= this.drag){ if(this.drag){ @@ -39,22 +97,29 @@ } on_release(evt) { + //unbind events 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); + + //reset drag flag if(this.drag){ this.drag = false; } + + // get final position this.update_position(evt); - } - + + } on_drag(evt){ + //ignore drag event for X amount of time and if not selected if(this.enTimer && this.drag){ this.update_position(evt); + //reset timer this.enTimer = false; setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); @@ -63,11 +128,12 @@ update_position(evt){ var html_dist = 0; + let [min,max,start,totallength] = this.range; //calculate size of widget in html var range_borders = this.range_elt.getBoundingClientRect(); + var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top]; 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; @@ -81,59 +147,123 @@ 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; + // calculate position + if (this.handle_click){ //if clicked on handle + let moveDist = 0, resizeAdd = 0; + let range_percent = 1; + + //set paramters for resizeable handle + if (this.scroll_size != undefined){ + // add one more object to stay inside range + resizeAdd = 1; + + //chack if range is bigger than display option and + // calculate percent of range with out handle + if(((max/(max*this.min_size)) < (max-min+1))){ + range_percent = 1-this.min_size; + } + else{ + range_percent = 1-(max-max*this.min_size*(max-min))/max; + } + } + + //calculate value difference on x or y axis + if(this.fi > 0.7){ + moveDist = ((max-min+resizeAdd)/(range_length*range_percent))*((this.handle_click[1]-mouseY)/Math.sin(this.fi)); + } + else{ + moveDist = ((max-min+resizeAdd)/(range_length*range_percent))*((mouseX-this.handle_click[0])/Math.cos(this.fi)); + } + + this.curr_value = Math.ceil(this.handle_click[2] + moveDist); + } + else{ //if clicked on widget + //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{ + if(this.fi > 0.7){ + html_dist = (minY - mouseY)/Math.sin(this.fi); + } + else{ + html_dist = (mouseX - minX)/Math.cos(this.fi); + } + } + //calculate distance + this.curr_value=Math.ceil((html_dist/range_length)*(this.range[1]-this.range[0])+this.range[0]); + } + + //check if in range + if (this.curr_value > max){ + this.curr_value = max; + } + else if (this.curr_value < min){ + this.curr_value = min; + } + + this.apply_hmi_value(0, this.curr_value); + + //redraw handle + this.request_animate(); + + } + + animate(){ + // redraw handle on screen refresh + // check if setpoint(ghost) handle exsist otherwise update main handle + if(this.setpoint_elt != undefined){ + this.update_DOM(this.curr_value, this.setpoint_elt); } 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=Math.ceil((html_dist/range_length)*this.range[1]); - - this.apply_hmi_value(0, this.svg_dist); - - // update ghost cursor - if(this.setpoint_elt != undefined){ - this.request_animate(); - } - } - - animate(){ - this.update_DOM(this.svg_dist, this.setpoint_elt); + this.update_DOM(this.curr_value, this.handle_elt); + } } on_select(evt){ + //enable drag flag and timer this.drag = true; this.enTimer = true; + + //bind events 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); + + // check if handle was pressed + if (evt.currentTarget == this.handle_elt){ + //get mouse position on the handle + let mouseX = undefined; + let 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; + } + //save coordinates and orig value + this.handle_click = [mouseX,mouseY,this.curr_value]; + } + else{ + // get new handle position and reset if handle was not pressed + this.handle_click = undefined; + this.update_position(evt); + } + + //prevent next events + evt.stopPropagation(); } init() { + //set min max value if not defined let min = this.min_elt ? Number(this.min_elt.textContent) : this.args.length >= 1 ? this.args[0] : 0; @@ -141,15 +271,20 @@ Number(this.max_elt.textContent) : this.args.length >= 2 ? this.args[1] : 100; + // save initial parameters + this.range_elt.style.strokeMiterlimit="0"; this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()]; let start = this.range_elt.getPointAtLength(0); let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength()); this.fi = Math.atan2(start.y-end.y, end.x-start.x); - + this.handle_orig = this.handle_elt.getBBox(); + + //bind functions 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("mousedown", this.bound_on_select); this.element.addEventListener("mousedown", this.bound_on_select); this.element.addEventListener("touchstart", this.bound_on_select); diff -r 6dd617cc9c05 -r 6ea4b7e1a9ed svghmi/widget_tooglebutton.ysl2 --- a/svghmi/widget_tooglebutton.ysl2 Tue Sep 15 13:57:06 2020 +0200 +++ b/svghmi/widget_tooglebutton.ysl2 Thu Sep 17 11:30:22 2020 +0200 @@ -10,19 +10,28 @@ inactive_style = undefined; dispatch(value) { - this.state = value; - if (this.state) { - this.active_elt.setAttribute("style", this.active_style); - this.inactive_elt.setAttribute("style", "display:none"); - this.state = 0; - } else { - this.inactive_elt.setAttribute("style", this.inactive_style); - this.active_elt.setAttribute("style", "display:none"); - this.state = 1; + if(this.state != value){ + this.state = value; + if (this.state) { + this.active_elt.setAttribute("style", this.active_style); + this.inactive_elt.setAttribute("style", "display:none"); + } else { + this.inactive_elt.setAttribute("style", this.inactive_style); + this.active_elt.setAttribute("style", "display:none"); + } } } on_click(evt) { + if (this.state) { + this.inactive_elt.setAttribute("style", this.inactive_style); + this.active_elt.setAttribute("style", "display:none"); + this.state = 0; + } else { + this.active_elt.setAttribute("style", this.active_style); + this.inactive_elt.setAttribute("style", "display:none"); + this.state = 1; + } this.apply_hmi_value(0, this.state); } @@ -30,6 +39,8 @@ this.active_style = this.active_elt.style.cssText; this.inactive_style = this.inactive_elt.style.cssText; this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)"); + this.inactive_elt.setAttribute("style", this.inactive_style); + this.active_elt.setAttribute("style", "display:none"); } } || diff -r 6dd617cc9c05 -r 6ea4b7e1a9ed svghmi/widgets_common.ysl2 --- a/svghmi/widgets_common.ysl2 Tue Sep 15 13:57:06 2020 +0200 +++ b/svghmi/widgets_common.ysl2 Thu Sep 17 11:30:22 2020 +0200 @@ -29,8 +29,10 @@ choose { when "not(@index)" { choose { - when "not(@type)" - error > Widget «$widget/@type» id="«$eltid»" : No match for path "«@value»" in HMI tree + when "not(@type)" { + warning > Widget «$widget/@type» id="«$eltid»" : No match for path "«@value»" in HMI tree + > undefined`if "position()!=last()" > ,` + } when "@type = 'PAGE_LOCAL'" > "«@value»"`if "position()!=last()" > ,` when "@type = 'HMI_LOCAL'" @@ -152,6 +154,7 @@ if(!this.unsubscribable) for(let i = 0; i < this.indexes.length; i++) { let index = this.get_variable_index(i); + if(index == undefined) continue; subscribers(index).add(this); } need_cache_apply.push(this); @@ -161,6 +164,7 @@ if(!this.unsubscribable) for(let index in this.indexes){ /* dispatch current cache in newly opened page widgets */ let realindex = this.get_variable_index(index); + if(realindex == undefined) continue; let cached_val = cache[realindex]; if(cached_val != undefined) this._dispatch(cached_val, cached_val, index); @@ -178,18 +182,23 @@ } return index; } - change_hmi_value(index,opstr) { - return change_hmi_value(this.get_variable_index(index), opstr); + change_hmi_value(index, opstr) { + let realindex = this.get_variable_index(index); + if(realindex == undefined) return undefined; + return change_hmi_value(realindex, opstr); } apply_hmi_value(index, new_val) { - return apply_hmi_value(this.get_variable_index(index), new_val); + let realindex = this.get_variable_index(index); + if(realindex == undefined) return undefined; + return apply_hmi_value(realindex, new_val); } new_hmi_value(index, value, oldval) { // TODO avoid searching, store index at sub() for(let i = 0; i < this.indexes.length; i++) { let refindex = this.get_variable_index(i); + if(refindex == undefined) continue; if(index == refindex) { this._dispatch(value, oldval, i); diff -r 6dd617cc9c05 -r 6ea4b7e1a9ed tests/svghmi_v2/plc.xml --- a/tests/svghmi_v2/plc.xml Tue Sep 15 13:57:06 2020 +0200 +++ b/tests/svghmi_v2/plc.xml Thu Sep 17 11:30:22 2020 +0200 @@ -1,7 +1,7 @@ - + @@ -55,6 +55,21 @@ + + + + + + + + + + + + + + + @@ -88,7 +103,7 @@ TargetPressure - + @@ -100,7 +115,9 @@ - + + + TestLocal @@ -190,34 +207,12 @@ TargetPressure - - - - - - - - - - - - - Sloth - - - - - - - - - @@ -559,6 +554,13 @@ 0 + + + + + + Sloth + diff -r 6dd617cc9c05 -r 6ea4b7e1a9ed tests/svghmi_v2/svghmi_0@svghmi/svghmi.svg --- a/tests/svghmi_v2/svghmi_0@svghmi/svghmi.svg Tue Sep 15 13:57:06 2020 +0200 +++ b/tests/svghmi_v2/svghmi_0@svghmi/svghmi.svg Thu Sep 17 11:30:22 2020 +0200 @@ -16,7 +16,7 @@ version="1.1" id="hmi0" sodipodi:docname="svghmi.svg" - inkscape:version="0.92.3 (2405546, 2018-03-11)" + inkscape:version="0.92.5 (0.92.5+68)" inkscape:label="Layer"> @@ -53,17 +53,6 @@ inkscape:vp_z="1272 : 385 : 1" inkscape:persp3d-origin="536 : 237 : 1" id="perspective445" /> - - - - @@ -91,26 +80,6 @@ id="path924" inkscape:connector-curvature="0" /> - - - - - - - @@ -200,7 +169,7 @@ y="-64.195457" x="113.27539" sodipodi:role="line" - id="tspan1409">100 + id="tspan1409">10 100 + id="tspan1409-1">1000 000 + + + + + + + + + + + +