# HG changeset patch # User usveticic # Date 1601555007 -7200 # Node ID 9ec338a99a181126b13feb458e307b9c444da0b3 # Parent 6dc33dae4074d43d21c23e2d2a3237579af13c7e Button fix if no active or inactive state, Widget animate changed to use anitmateTransform and added option to change rotation Widget circular slider fixed so it is working on got and reprogramed so it similar to normal slider Widget slider added support for changing size still need some changes to work properly Added slider to svghmi test project Changed svg in svhgmi_v2 project diff -r 6dc33dae4074 -r 9ec338a99a18 svghmi/widget_animate.ysl2 --- a/svghmi/widget_animate.ysl2 Wed Sep 30 12:31:59 2020 +0200 +++ b/svghmi/widget_animate.ysl2 Thu Oct 01 14:23:27 2020 +0200 @@ -5,9 +5,10 @@ class AnimateWidget extends Widget{ frequency = 5; speed = 0; + widget_center = undefined; dispatch(value) { - this.speed = value; + this.speed = value / 5; //reconfigure animation this.request_animate(); @@ -15,14 +16,29 @@ animate(){ // change animation properties - this.element.children[0].setAttribute("dur", String(this.speed)+"s") + for(let child of this.element.children){ + if(child.nodeName == "animateTransform"){ + if(this.speed > 0){ + child.setAttribute("dur", this.speed+"s"); + child.setAttribute("from", "0 "+this.widget_center[0]+" "+this.widget_center[1]); + child.setAttribute("to", "360 "+this.widget_center[0]+" "+this.widget_center[1]); + } + else if(this.speed < 0){ + child.setAttribute("dur", (-1)*this.speed+"s"); + child.setAttribute("from", "360 "+this.widget_center[0]+" "+this.widget_center[1]); + child.setAttribute("to", "0 "+this.widget_center[0]+" "+this.widget_center[1]); + } + else{ + child.setAttribute("from", "0 "+this.widget_center[0]+" "+this.widget_center[1]); + child.setAttribute("to", "0 "+this.widget_center[0]+" "+this.widget_center[1]); + } + } + } } init() { - let width = this.element.getAttribute("width"); - let height = this.element.getAttribute("height"); - this.element.setAttribute("x",width/-2); - this.element.setAttribute("y",height/-2); + let widget_pos = this.element.getBBox(); + this.widget_center = [(widget_pos.x+widget_pos.width/2), (widget_pos.y+widget_pos.height/2)]; } } || diff -r 6dc33dae4074 -r 9ec338a99a18 svghmi/widget_button.ysl2 --- a/svghmi/widget_button.ysl2 Wed Sep 30 12:31:59 2020 +0200 +++ b/svghmi/widget_button.ysl2 Thu Oct 01 14:23:27 2020 +0200 @@ -25,13 +25,15 @@ } animate(){ - // redraw button on screen refresh - if (this.state_hmi) { - 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"); + if (this.active_style && this.inactive_style) { + // redraw button on screen refresh + if (this.state_hmi) { + 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"); + } } } diff -r 6dc33dae4074 -r 9ec338a99a18 svghmi/widget_circularslider.ysl2 --- a/svghmi/widget_circularslider.ysl2 Wed Sep 30 12:31:59 2020 +0200 +++ b/svghmi/widget_circularslider.ysl2 Thu Oct 01 14:23:27 2020 +0200 @@ -7,16 +7,33 @@ range = undefined; circle = undefined; handle_pos = undefined; - svg_dist = undefined; + curr_value = 0; drag = false; enTimer = false; last_drag = false; dispatch(value) { + let [min,max,start,totallength] = this.range; + //save current value inside widget + this.curr_value = value; + + //check if in range + if (this.curr_value > max){ + this.curr_value = max; + this.apply_hmi_value(0, this.curr_value); + } + else if (this.curr_value < min){ + this.curr_value = min; + this.apply_hmi_value(0, this.curr_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); + } } update_DOM(value, elt){ @@ -25,6 +42,7 @@ let tip = this.range_elt.getPointAtLength(length); elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")"); + // show or hide ghost if exists if(this.setpoint_elt != undefined){ if(this.last_drag!= this.drag){ if(this.drag){ @@ -38,21 +56,28 @@ } 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); @@ -103,40 +128,54 @@ //get handle distance from mouse position if(fi max){ + this.curr_value = max; + this.apply_hmi_value(0, this.curr_value); + } + else if (this.curr_value < min){ + this.curr_value = min; + this.apply_hmi_value(0, this.curr_value); + } + + if(this.value_elt) + this.value_elt.textContent = String(value); + } + else if(index == 1){ + this.scroll_range = value; + this.set_scroll(); + } + else if(index == 2){ + this.scroll_visible = value; + this.set_scroll(); + } //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); + this.update_DOM(this.curr_value, this.handle_elt); + } + } + + set_scroll(){ + //check if range is bigger than visible and set scroll size + if(this.scroll_range > this.scroll_visible){ + this.scroll_size = this.scroll_range - this.scroll_visible; + this.range[0] = 0; + this.range[1] = this.scroll_size; + } + else{ + this.scroll_size = 1; + this.range[0] = 0; + this.range[1] = 1; } } @@ -197,14 +234,13 @@ this.curr_value=Math.ceil((html_dist/range_length)*(this.range[1]-this.range[0])+this.range[0]); } - //check if in range + //check if in range and apply 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 @@ -224,75 +260,45 @@ } on_select(evt){ - if (evt.currentTarget != this.up_elt || evt.currentTarget != this.down_elt){ - //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{ - mouseX = evt.pageX; - mouseY = evt.pageY; - } - //save coordinates and orig value - this.handle_click = [mouseX,mouseY,this.curr_value]; + //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{ - // get new handle position and reset if handle was not pressed - this.handle_click = undefined; - this.update_position(evt); - } - - //prevent next events - evt.stopPropagation(); + mouseX = evt.pageX; + mouseY = evt.pageY; + } + //save coordinates and orig value + this.handle_click = [mouseX,mouseY,this.curr_value]; } else{ - //prevent next events if up/down were pressed - evt.stopPropagation(); - } - } - - on_up_button(evt){ - // go one position up and check if in bounds - this.curr_value = this.curr_value + 1; - if (this.curr_value > this.range[1]){ - this.curr_value = this.range[1]; - } - - this.apply_hmi_value(0, this.curr_value); - - //redraw handle - this.request_animate(); - } - - on_down_button(evt){ - // go one position down - this.curr_value = this.curr_value - 1; - if (this.curr_value < this.range[0]){ - this.curr_value = this.range[0]; - } - - this.apply_hmi_value(0, this.curr_value); - - //redraw handle - this.request_animate(); - } + // 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 @@ -303,13 +309,6 @@ Number(this.max_elt.textContent) : this.args.length >= 2 ? this.args[1] : 100; - //init up down button if exists - if(this.up_elt){ - this.up_elt.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_up_button(evt)"); - } - if(this.down_elt){ - this.down_elt.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_down_button(evt)"); - } // save initial parameters this.range_elt.style.strokeMiterlimit="0"; @@ -325,9 +324,12 @@ this.on_bound_drag = this.on_drag.bind(this); this.handle_elt.addEventListener("mousedown", this.bound_on_select); - this.range_elt.addEventListener("mousedown", this.bound_on_select); - this.range_elt.addEventListener("touchstart", this.bound_on_select); - + this.element.addEventListener("mousedown", this.bound_on_select); + this.element.addEventListener("touchstart", this.bound_on_select); + //touch recognised as page drag without next command + document.body.addEventListener("touchstart", function(e){}, false); + + //save ghost style if(this.setpoint_elt != undefined){ this.setpoint_style = this.setpoint_elt.getAttribute("style"); this.setpoint_elt.setAttribute("style", "display:none"); @@ -340,6 +342,6 @@ template "widget[@type='Slider']", mode="widget_defs" { param "hmi_element"; labels("handle range"); - optional_labels("value min max setpoint up down"); + optional_labels("value min max setpoint"); |, } diff -r 6dc33dae4074 -r 9ec338a99a18 tests/svghmi/svghmi_0@svghmi/svghmi.svg --- a/tests/svghmi/svghmi_0@svghmi/svghmi.svg Wed Sep 30 12:31:59 2020 +0200 +++ b/tests/svghmi/svghmi_0@svghmi/svghmi.svg Thu Oct 01 14:23:27 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)"> @@ -197,16 +197,16 @@ inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:document-units="px" - inkscape:current-layer="g1384" + inkscape:current-layer="hmi0" showgrid="false" units="px" - inkscape:zoom="1.0913159" - inkscape:cx="-911.00114" - inkscape:cy="181.96708" - inkscape:window-width="1800" - inkscape:window-height="836" - inkscape:window-x="0" - inkscape:window-y="27" + inkscape:zoom="2.1826317" + inkscape:cx="-408.38959" + inkscape:cy="176.28106" + inkscape:window-width="1863" + inkscape:window-height="1176" + inkscape:window-x="57" + inkscape:window-y="24" inkscape:window-maximized="1" showguides="true" inkscape:guide-bbox="true" /> @@ -5223,6 +5223,9 @@ + + id="g1766" + inkscape:label="HMI:Slider@.position@.range@.alarmVisible"> + + + + + + - - + width="42.374725" + height="82.841492" + x="-255.19838" + y="565.71338" + rx="7.6034913" + ry="7" + inkscape:label="handle" /> Status - TODO - + @@ -77,7 +77,7 @@ - + diff -r 6dc33dae4074 -r 9ec338a99a18 tests/svghmi_v2/svghmi_0@svghmi/svghmi.svg --- a/tests/svghmi_v2/svghmi_0@svghmi/svghmi.svg Wed Sep 30 12:31:59 2020 +0200 +++ b/tests/svghmi_v2/svghmi_0@svghmi/svghmi.svg Thu Oct 01 14:23:27 2020 +0200 @@ -16,7 +16,7 @@ version="1.1" id="hmi0" sodipodi:docname="svghmi.svg" - inkscape:version="0.92.5 (0.92.5+68)" + inkscape:version="0.92.4 (5da689c313, 2019-01-14)" inkscape:label="Layer"> @@ -109,13 +109,13 @@ inkscape:current-layer="hmi0" showgrid="false" units="px" - inkscape:zoom="1.4142136" - inkscape:cx="660.12647" - inkscape:cy="334.93826" - inkscape:window-width="2503" - inkscape:window-height="1416" - inkscape:window-x="57" - inkscape:window-y="24" + inkscape:zoom="0.7071068" + inkscape:cx="-76.932824" + inkscape:cy="317.38961" + inkscape:window-width="1920" + inkscape:window-height="1137" + inkscape:window-x="-8" + inkscape:window-y="-8" inkscape:window-maximized="1" showguides="true" inkscape:guide-bbox="true" /> @@ -129,7 +129,7 @@ inkscape:label="HMI:Page:Home" sodipodi:insensitive="true" /> - - - + + + + + +