# HG changeset patch # User usveticic # Date 1600941160 -7200 # Node ID e0db3f6a5f3932bbe069532884d04a812ba7949d # Parent 6ea4b7e1a9ed5c25dfd070227118507b42cf5852 Button and toggle reworked to use animate and dispatch Slider added buttons to incremente/decrement by 1 Init for animate widget Changed test svg and plc diff -r 6ea4b7e1a9ed -r e0db3f6a5f39 svghmi/widget_animate.ysl2 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/svghmi/widget_animate.ysl2 Thu Sep 24 11:52:40 2020 +0200 @@ -0,0 +1,35 @@ +// widget_animate.ysl2 + +template "widget[@type='Animate']", mode="widget_class"{ + || + class AnimateWidget extends Widget{ + frequency = 5; + speed = 0; + + dispatch(value) { + this.speed = value; + + //reconfigure animation + this.request_animate(); + } + + animate(){ + // change animation properties + this.element.children[0].setAttribute("dur", String(this.speed)+"s") + } + + 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); + } + } + || +} + + +template "widget[@type='Animate']", mode="widget_defs" { + param "hmi_element"; + |, +} diff -r 6ea4b7e1a9ed -r e0db3f6a5f39 svghmi/widget_button.ysl2 --- a/svghmi/widget_button.ysl2 Thu Sep 17 11:30:22 2020 +0200 +++ b/svghmi/widget_button.ysl2 Thu Sep 24 11:52:40 2020 +0200 @@ -4,42 +4,53 @@ || class ButtonWidget extends Widget{ frequency = 5; - state = 0; + state_plc = 0; + state_hmi = 0; plc_lock = false; active_style = undefined; inactive_style = undefined; dispatch(value) { - if(value){ - this.button_release(); + this.state_plc = value; + if(this.plc_lock){ + if(this.state_plc == 1){ + this.apply_hmi_value(0, 0); + this.plc_lock = false; + } } + + //redraw button + this.state_hmi = this.state_plc; + this.request_animate(); } - 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; - } + 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"); + } + } - on_mouse_up(evt) { - this.button_release(); - } + on_click(evt) { + //set state and apply if plc is 0 + this.plc_lock = true; + if(this.state_plc == 0){ + this.apply_hmi_value(0, 1); + } + //redraw button + this.request_animate(); + } - 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); - } - } + on_press(evt) { + //set graphic + this.state_hmi = 1; + //redraw button + this.request_animate(); + } init() { this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined; @@ -50,8 +61,8 @@ 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("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)"); + this.element.setAttribute("onmousedown", "hmi_widgets['"+this.element_id+"'].on_press(evt)"); } } || diff -r 6ea4b7e1a9ed -r e0db3f6a5f39 svghmi/widget_slider.ysl2 --- a/svghmi/widget_slider.ysl2 Thu Sep 17 11:30:22 2020 +0200 +++ b/svghmi/widget_slider.ysl2 Thu Sep 24 11:52:40 2020 +0200 @@ -101,7 +101,7 @@ 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("mouseup", this.bound_on_release, true); window.removeEventListener("touchend", this.bound_on_release, true); window.removeEventListener("touchcancel", this.bound_on_release, true); @@ -224,42 +224,74 @@ } 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); + 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]; } else{ - mouseX = evt.pageX; - mouseY = evt.pageY; - } - //save coordinates and orig value - this.handle_click = [mouseX,mouseY,this.curr_value]; + // get new handle position and reset if handle was not pressed + this.handle_click = undefined; + this.update_position(evt); + } + + //prevent next events + evt.stopPropagation(); } 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(); + //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(); } init() { @@ -271,6 +303,14 @@ 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"; this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()]; @@ -285,8 +325,8 @@ 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); + this.range_elt.addEventListener("mousedown", this.bound_on_select); + this.range_elt.addEventListener("touchstart", this.bound_on_select); if(this.setpoint_elt != undefined){ this.setpoint_style = this.setpoint_elt.getAttribute("style"); @@ -300,6 +340,6 @@ template "widget[@type='Slider']", mode="widget_defs" { param "hmi_element"; labels("handle range"); - optional_labels("value min max setpoint"); + optional_labels("value min max setpoint up down"); |, } diff -r 6ea4b7e1a9ed -r e0db3f6a5f39 svghmi/widget_tooglebutton.ysl2 --- a/svghmi/widget_tooglebutton.ysl2 Thu Sep 17 11:30:22 2020 +0200 +++ b/svghmi/widget_tooglebutton.ysl2 Thu Sep 24 11:52:40 2020 +0200 @@ -10,37 +10,45 @@ inactive_style = undefined; dispatch(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"); - } - } + this.state = value; + //redraw toggle button + this.request_animate(); } on_click(evt) { + //toggle state and apply 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); + + //redraw toggle button + this.request_animate(); + } + + animate(){ + // redraw toggle button on screen refresh + 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"); + } } init() { - this.active_style = this.active_elt.style.cssText; - this.inactive_style = this.inactive_elt.style.cssText; + 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("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)"); - this.inactive_elt.setAttribute("style", this.inactive_style); - this.active_elt.setAttribute("style", "display:none"); } } || @@ -48,6 +56,6 @@ template "widget[@type='ToggleButton']", mode="widget_defs" { param "hmi_element"; - labels("active inactive"); + optional_labels("active inactive"); |, } diff -r 6ea4b7e1a9ed -r e0db3f6a5f39 tests/svghmi_v2/plc.xml --- a/tests/svghmi_v2/plc.xml Thu Sep 17 11:30:22 2020 +0200 +++ b/tests/svghmi_v2/plc.xml Thu Sep 24 11:52:40 2020 +0200 @@ -1,7 +1,7 @@ - + @@ -75,6 +75,11 @@ + + + + + diff -r 6ea4b7e1a9ed -r e0db3f6a5f39 tests/svghmi_v2/svghmi_0@svghmi/svghmi.svg --- a/tests/svghmi_v2/svghmi_0@svghmi/svghmi.svg Thu Sep 17 11:30:22 2020 +0200 +++ b/tests/svghmi_v2/svghmi_0@svghmi/svghmi.svg Thu Sep 24 11:52:40 2020 +0200 @@ -110,8 +110,8 @@ showgrid="false" units="px" inkscape:zoom="1.4142136" - inkscape:cx="462.89448" - inkscape:cy="318.79031" + inkscape:cx="660.12647" + inkscape:cy="334.93826" inkscape:window-width="2503" inkscape:window-height="1416" inkscape:window-x="57" @@ -183,6 +183,52 @@ y="-121.97556" style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.26458332px" id="tspan102-1">000 + + + UP + + + + DN + + inkscape:label="HMI:Button@/TOGGLE"> + + + + + + +