--- a/svghmi/gen_index_xhtml.xslt Mon Oct 19 09:29:11 2020 +0200
+++ b/svghmi/gen_index_xhtml.xslt Mon Oct 19 10:15:26 2020 +0200
@@ -1475,6 +1475,180 @@
+ <xsl:template mode="widget_class" match="widget[@type='Animate']"> + <xsl:text>class AnimateWidget extends Widget{ + <xsl:text> frequency = 5; + <xsl:text> start = false; + <xsl:text> widget_center = undefined; + <xsl:text> dispatch(value) { + <xsl:text> this.speed = value / 5; + <xsl:text> //reconfigure animation + <xsl:text> this.request_animate(); + <xsl:text> // change animation properties + <xsl:text> for(let child of this.element.children){ + <xsl:text> if(child.nodeName.startsWith("animate")){ + <xsl:text> if(this.speed != 0 && !this.start){ + <xsl:text> this.start = true; + <xsl:text> this.element.beginElement(); + <xsl:text> if(this.speed > 0){ + <xsl:text> child.setAttribute("dur", this.speed+"s"); + <xsl:text> else if(this.speed < 0){ + <xsl:text> child.setAttribute("dur", (-1)*this.speed+"s"); + <xsl:text> this.start = false; + <xsl:text> this.element.endElement(); + <xsl:text> let widget_pos = this.element.getBBox(); + <xsl:text> this.widget_center = [(widget_pos.x+widget_pos.width/2), (widget_pos.y+widget_pos.height/2)]; + <xsl:template mode="widget_defs" match="widget[@type='Animate']"> + <xsl:param name="hmi_element"/> + <xsl:template mode="widget_class" match="widget[@type='AnimateRotation']"> + <xsl:text>class AnimateRotationWidget extends Widget{ + <xsl:text> frequency = 5; + <xsl:text> widget_center = undefined; + <xsl:text> dispatch(value) { + <xsl:text> this.speed = value / 5; + <xsl:text> //reconfigure animation + <xsl:text> this.request_animate(); + <xsl:text> // change animation properties + <xsl:text> for(let child of this.element.children){ + <xsl:text> if(child.nodeName == "animateTransform"){ + <xsl:text> if(this.speed > 0){ + <xsl:text> child.setAttribute("dur", this.speed+"s"); + <xsl:text> child.setAttribute("from", "0 "+this.widget_center[0]+" "+this.widget_center[1]); + <xsl:text> child.setAttribute("to", "360 "+this.widget_center[0]+" "+this.widget_center[1]); + <xsl:text> else if(this.speed < 0){ + <xsl:text> child.setAttribute("dur", (-1)*this.speed+"s"); + <xsl:text> child.setAttribute("from", "360 "+this.widget_center[0]+" "+this.widget_center[1]); + <xsl:text> child.setAttribute("to", "0 "+this.widget_center[0]+" "+this.widget_center[1]); + <xsl:text> child.setAttribute("from", "0 "+this.widget_center[0]+" "+this.widget_center[1]); + <xsl:text> child.setAttribute("to", "0 "+this.widget_center[0]+" "+this.widget_center[1]); + <xsl:text> let widget_pos = this.element.getBBox(); + <xsl:text> this.widget_center = [(widget_pos.x+widget_pos.width/2), (widget_pos.y+widget_pos.height/2)]; + <xsl:template mode="widget_defs" match="widget[@type='AnimateRotation']"> + <xsl:param name="hmi_element"/> <xsl:template mode="widget_class" match="widget[@type='Back']">
<xsl:text>class BackWidget extends Widget{
@@ -1506,7 +1680,9 @@
<xsl:text> frequency = 5;
+ <xsl:text> state_plc = 0; + <xsl:text> state_hmi = 0; <xsl:text> plc_lock = false;
@@ -1518,65 +1694,89 @@
<xsl:text> dispatch(value) {
- <xsl:text> this.button_release();+ <xsl:text> this.state_plc = value; + <xsl:text> if(this.plc_lock){ + <xsl:text> if(this.state_plc == 1){ + <xsl:text> this.apply_hmi_value(0, 0); + <xsl:text> this.plc_lock = false; + <xsl:text> //redraw button + <xsl:text> this.state_hmi = this.state_plc; + <xsl:text> this.request_animate(); - <xsl:text> on_mouse_down(evt) {- <xsl:text> if (this.active_style && this.inactive_style) {- <xsl:text> this.active_elt.setAttribute("style", this.active_style);- <xsl:text> this.inactive_elt.setAttribute("style", "display:none");- <xsl:text> this.apply_hmi_value(0, 1);- <xsl:text> this.plc_lock = false;- <xsl:text> on_mouse_up(evt) {- <xsl:text> this.button_release();- <xsl:text> button_release(){- <xsl:text> if(!this.plc_lock){- <xsl:text> this.plc_lock = true;+ <xsl:text> if (this.active_style && this.inactive_style) { + <xsl:text> // redraw button on screen refresh + <xsl:text> if (this.state_hmi) { + <xsl:text> this.active_elt.setAttribute("style", this.active_style); + <xsl:text> this.inactive_elt.setAttribute("style", "display:none"); + <xsl:text> this.inactive_elt.setAttribute("style", this.inactive_style); + <xsl:text> this.active_elt.setAttribute("style", "display:none"); + <xsl:text> on_click(evt) { + <xsl:text> //set state and apply if plc is 0 + <xsl:text> this.plc_lock = true; + <xsl:text> if(this.state_plc == 0){ + <xsl:text> this.apply_hmi_value(0, 1);
- <xsl:text> if (this.active_style && this.inactive_style) {- <xsl:text> this.active_elt.setAttribute("style", "display:none");- <xsl:text> this.inactive_elt.setAttribute("style", this.inactive_style);- <xsl:text> this.apply_hmi_value(0, 0);+ <xsl:text> //redraw button + <xsl:text> this.request_animate(); + <xsl:text> on_press(evt) { + <xsl:text> //set graphic + <xsl:text> this.state_hmi = 1; + <xsl:text> //redraw button + <xsl:text> this.request_animate(); @@ -1598,9 +1798,9 @@
- <xsl:text> this.element.setAttribute("onmousedown", "hmi_widgets["+this.element_id+"].on_mouse_down(evt)");- <xsl:text> this.element.setAttribute("onmouseup", "hmi_widgets["+this.element_id+"].on_mouse_up(evt)");+ <xsl:text> this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)"); + <xsl:text> this.element.setAttribute("onmousedown", "hmi_widgets['"+this.element_id+"'].on_press(evt)"); @@ -1738,7 +1938,7 @@
<xsl:text> handle_pos = undefined;
- <xsl:text> svg_dist = undefined;+ <xsl:text> curr_value = 0; @@ -1750,13 +1950,47 @@
<xsl:text> dispatch(value) {
+ <xsl:text> let [min,max,start,totallength] = this.range; + <xsl:text> //save current value inside widget + <xsl:text> this.curr_value = value; + <xsl:text> //check if in range + <xsl:text> if (this.curr_value > max){ + <xsl:text> this.curr_value = max; + <xsl:text> this.apply_hmi_value(0, this.curr_value); + <xsl:text> else if (this.curr_value < min){ + <xsl:text> this.curr_value = min; + <xsl:text> this.apply_hmi_value(0, this.curr_value); <xsl:text> if(this.value_elt)
<xsl:text> this.value_elt.textContent = String(value);
- <xsl:text> this.update_DOM(value, this.handle_elt);+ <xsl:text> //don't update if draging and setpoint ghost doesn't exist + <xsl:text> if(!this.drag || (this.setpoint_elt != undefined)){ + <xsl:text> this.update_DOM(value, this.handle_elt); @@ -1774,6 +2008,8 @@
+ <xsl:text> // show or hide ghost if exists <xsl:text> if(this.setpoint_elt != undefined){
<xsl:text> if(this.last_drag!= this.drag){
@@ -1800,6 +2036,8 @@
<xsl:text> on_release(evt) {
+ <xsl:text> //unbind events <xsl:text> window.removeEventListener("touchmove", this.on_bound_drag, true);
<xsl:text> window.removeEventListener("mousemove", this.on_bound_drag, true);
@@ -1812,12 +2050,20 @@
<xsl:text> window.removeEventListener("touchcancel", this.bound_on_release, true);
+ <xsl:text> //reset drag flag <xsl:text> if(this.drag){
<xsl:text> this.drag = false;
+ <xsl:text> // get final position <xsl:text> this.update_position(evt);
@@ -1826,10 +2072,14 @@
+ <xsl:text> //ignore drag event for X amount of time and if not selected <xsl:text> if(this.enTimer && this.drag){
<xsl:text> this.update_position(evt);
<xsl:text> this.enTimer = false;
@@ -1930,37 +2180,35 @@
<xsl:text> if(fi<fiEnd){
- <xsl:text> this.svg_dist=(fi)/(fiEnd)*(this.range[1]-this.range[0]);+ <xsl:text> this.curr_value=(fi)/(fiEnd)*(this.range[1]-this.range[0]); <xsl:text> else if(fiEnd<fi && fi<fiEnd+minMax){
- <xsl:text> this.svg_dist = this.range[1];+ <xsl:text> this.curr_value = this.range[1]; - <xsl:text> this.svg_dist = this.range[0];+ <xsl:text> this.curr_value = this.range[0];
- <xsl:text> this.apply_hmi_value(0, Math.ceil(this.svg_dist));- <xsl:text> // update ghost cursor- <xsl:text> if(this.setpoint_elt != undefined){- <xsl:text> this.request_animate();+ <xsl:text> //apply value to hmi + <xsl:text> this.apply_hmi_value(0, Math.ceil(this.curr_value)); + <xsl:text> //redraw handle + <xsl:text> this.request_animate(); @@ -1972,7 +2220,21 @@
- <xsl:text> this.update_DOM(this.svg_dist, this.setpoint_elt);+ <xsl:text> // redraw handle on screen refresh + <xsl:text> // check if setpoint(ghost) handle exsist otherwise update main handle + <xsl:text> if(this.setpoint_elt != undefined){ + <xsl:text> this.update_DOM(this.curr_value, this.setpoint_elt); + <xsl:text> this.update_DOM(this.curr_value, this.handle_elt); @@ -1980,24 +2242,40 @@
<xsl:text> on_select(evt){
+ <xsl:text> //enable drag flag and timer <xsl:text> this.drag = true;
<xsl:text> this.enTimer = true;
+ <xsl:text> //bind events <xsl:text> window.addEventListener("touchmove", this.on_bound_drag, true);
<xsl:text> window.addEventListener("mousemove", this.on_bound_drag, true);
- <xsl:text> window.addEventListener("mouseup", this.bound_on_release, true)+ <xsl:text> window.addEventListener("mouseup", this.bound_on_release, true); <xsl:text> window.addEventListener("touchend", this.bound_on_release, true);
<xsl:text> window.addEventListener("touchcancel", this.bound_on_release, true);
+ <xsl:text> //update postion on mouse press <xsl:text> this.update_position(evt);
+ <xsl:text> //prevent next events + <xsl:text> evt.stopPropagation(); @@ -2074,13 +2352,21 @@
- <xsl:text> //init events+ <xsl:text> this.handle_elt.addEventListener("mousedown", this.bound_on_select); <xsl:text> this.element.addEventListener("mousedown", this.bound_on_select);
<xsl:text> this.element.addEventListener("touchstart", this.bound_on_select);
+ <xsl:text> //touch recognised as page drag without next command + <xsl:text> document.body.addEventListener("touchstart", function(e){}, false); + <xsl:text> //save ghost style + <xsl:text> //save ghost style <xsl:text> if(this.setpoint_elt != undefined){
@@ -2092,22 +2378,6 @@
- <xsl:text> window.addEventListener("touchmove", hmi_widgets[this.element_id].update_position.bind(this));- <xsl:text> window.addEventListener("mousemove", hmi_widgets[this.element_id].update_position.bind(this));- <xsl:text> window.addEventListener("mouseup", hmi_widgets[this.element_id].on_release.bind(this))- <xsl:text> window.addEventListener("touchend", hmi_widgets[this.element_id].on_release.bind(this));- <xsl:text> window.addEventListener("touchcancel", hmi_widgets[this.element_id].on_release.bind(this));@@ -2124,13 +2394,66 @@
<xsl:call-template name="defs_by_labels">
<xsl:with-param name="hmi_element" select="$hmi_element"/>
<xsl:with-param name="labels">
- <xsl:text>value min max</xsl:text>+ <xsl:text>value min max setpoint</xsl:text> <xsl:with-param name="mandatory" select="'no'"/>
+ <xsl:template mode="widget_class" match="widget[@type='CustomHtml']"> + <xsl:text>class CustomHtmlWidget extends Widget{ + <xsl:text> frequency = 5; + <xsl:text> widget_size = undefined; + <xsl:text> dispatch(value) { + <xsl:text> this.request_animate(); + <xsl:text> this.widget_size = this.container_elt.getBBox(); + <xsl:text> this.element.innerHTML ='<foreignObject x="'+ + <xsl:text> this.widget_size.x+'" y="'+this.widget_size.y+ + <xsl:text> '" width="'+this.widget_size.width+'" height="'+this.widget_size.height+'"> '+ + <xsl:text> this.code_elt.textContent+ + <xsl:text> ' </foreignObject>'; + <xsl:template mode="widget_defs" match="widget[@type='CustomHtml']"> + <xsl:param name="hmi_element"/> + <xsl:call-template name="defs_by_labels"> + <xsl:with-param name="hmi_element" select="$hmi_element"/> + <xsl:with-param name="labels"> + <xsl:text>container code</xsl:text> <xsl:template mode="widget_class" match="widget[@type='Display']">
<xsl:text>class DisplayWidget extends Widget{
@@ -2162,7 +2485,9 @@
<xsl:when test="@type='HMI_STRING'">
- <xsl:otherwise>0</xsl:otherwise> <xsl:if test="position()!=last()">
@@ -3501,7 +3826,7 @@
<xsl:template mode="widget_class" match="widget[@type='JsonTable']">
<xsl:text>class JsonTableWidget extends Widget{
+ <xsl:text> cache = [100,50]; <xsl:text> do_http_request(...opt) {
@@ -3509,7 +3834,9 @@
<xsl:text> args: this.args,
- <xsl:text> vars: this.cache,+ <xsl:text> range: this.cache[1], + <xsl:text> position: this.cache[2], <xsl:text> visible: this.visible,
@@ -3848,6 +4175,8 @@
<xsl:text> this.apply_hmi_value(2, position);
+ <xsl:text> this.apply_hmi_value(3, this.visible); <xsl:text> console.log(range,position,jdata);
<xsl:apply-templates mode="json_table_render_except_comments" select="$data_elt">
@@ -4756,7 +5085,11 @@
<xsl:text> handle_orig = undefined;
- <xsl:text> scroll_size = 10;+ <xsl:text> scroll_size = undefined; + <xsl:text> scroll_range = 0; + <xsl:text> scroll_visible = 7; <xsl:text> min_size = 0.07;
@@ -4774,17 +5107,59 @@
- <xsl:text> dispatch(value) {- <xsl:text> //save current value inside widget- <xsl:text> this.curr_value = value;- <xsl:text> if(this.value_elt)- <xsl:text> this.value_elt.textContent = String(value);+ <xsl:text> dispatch(value,oldval, index) { + <xsl:text> if (index == 0){ + <xsl:text> let [min,max,start,totallength] = this.range; + <xsl:text> //save current value inside widget + <xsl:text> this.curr_value = value; + <xsl:text> //check if in range + <xsl:text> if (this.curr_value > max){ + <xsl:text> this.curr_value = max; + <xsl:text> this.apply_hmi_value(0, this.curr_value); + <xsl:text> else if (this.curr_value < min){ + <xsl:text> this.curr_value = min; + <xsl:text> this.apply_hmi_value(0, this.curr_value); + <xsl:text> if(this.value_elt) + <xsl:text> this.value_elt.textContent = String(value); + <xsl:text> else if(index == 1){ + <xsl:text> this.scroll_range = value; + <xsl:text> this.set_scroll(); + <xsl:text> else if(index == 2){ + <xsl:text> this.scroll_visible = value; + <xsl:text> this.set_scroll(); @@ -4792,7 +5167,35 @@
<xsl:text> if(!this.drag || (this.setpoint_elt != undefined)){
- <xsl:text> this.update_DOM(value, this.handle_elt);+ <xsl:text> this.update_DOM(this.curr_value, this.handle_elt); + <xsl:text> set_scroll(){ + <xsl:text> //check if range is bigger than visible and set scroll size + <xsl:text> if(this.scroll_range > this.scroll_visible){ + <xsl:text> this.scroll_size = this.scroll_range - this.scroll_visible; + <xsl:text> this.range[0] = 0; + <xsl:text> this.range[1] = this.scroll_size; + <xsl:text> this.scroll_size = 1; + <xsl:text> this.range[0] = 0; + <xsl:text> this.range[1] = 1; @@ -4946,7 +5349,7 @@
- <xsl:text> window.removeEventListener("mouseup", this.bound_on_release, true)+ <xsl:text> window.removeEventListener("mouseup", this.bound_on_release, true); <xsl:text> window.removeEventListener("touchend", this.bound_on_release, true);
@@ -5138,7 +5541,7 @@
- <xsl:text> //check if in range+ <xsl:text> //check if in range and apply <xsl:text> if (this.curr_value > max){
@@ -5152,8 +5555,6 @@
<xsl:text> this.apply_hmi_value(0, this.curr_value);
@@ -5208,7 +5609,7 @@
- <xsl:text> window.addEventListener("mouseup", this.bound_on_release, true)+ <xsl:text> window.addEventListener("mouseup", this.bound_on_release, true); <xsl:text> window.addEventListener("touchend", this.bound_on_release, true);
@@ -5264,10 +5665,14 @@
<xsl:text> evt.stopPropagation();
<xsl:text> //set min max value if not defined
@@ -5286,6 +5691,8 @@
<xsl:text> // save initial parameters
<xsl:text> this.range_elt.style.strokeMiterlimit="0";
@@ -5318,7 +5725,13 @@
<xsl:text> this.element.addEventListener("touchstart", this.bound_on_select);
+ <xsl:text> //touch recognised as page drag without next command + <xsl:text> document.body.addEventListener("touchstart", function(e){}, false); + <xsl:text> //save ghost style <xsl:text> if(this.setpoint_elt != undefined){
@@ -5425,25 +5838,11 @@
<xsl:text> dispatch(value) {
- <xsl:text> if(this.state != value){- <xsl:text> this.state = value;- <xsl:text> if (this.state) {- <xsl:text> this.active_elt.setAttribute("style", this.active_style);- <xsl:text> this.inactive_elt.setAttribute("style", "display:none");- <xsl:text> this.inactive_elt.setAttribute("style", this.inactive_style);- <xsl:text> this.active_elt.setAttribute("style", "display:none");+ <xsl:text> this.state = value; + <xsl:text> //redraw toggle button + <xsl:text> this.request_animate(); @@ -5451,42 +5850,72 @@
<xsl:text> on_click(evt) {
+ <xsl:text> //toggle state and apply <xsl:text> if (this.state) {
- <xsl:text> this.inactive_elt.setAttribute("style", this.inactive_style);- <xsl:text> this.active_elt.setAttribute("style", "display:none"); <xsl:text> this.state = 0;
- <xsl:text> this.active_elt.setAttribute("style", this.active_style);- <xsl:text> this.inactive_elt.setAttribute("style", "display:none"); <xsl:text> this.state = 1;
<xsl:text> this.apply_hmi_value(0, this.state);
+ <xsl:text> //redraw toggle button + <xsl:text> this.request_animate(); + <xsl:text> // redraw toggle button on screen refresh + <xsl:text> if (this.state) { + <xsl:text> this.active_elt.setAttribute("style", this.active_style); + <xsl:text> this.inactive_elt.setAttribute("style", "display:none"); + <xsl:text> this.inactive_elt.setAttribute("style", this.inactive_style); + <xsl:text> this.active_elt.setAttribute("style", "display:none"); - <xsl:text> this.active_style = this.active_elt.style.cssText;- <xsl:text> this.inactive_style = this.inactive_elt.style.cssText;+ <xsl:text> this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined; + <xsl:text> this.inactive_style = this.inactive_elt ? this.inactive_elt.style.cssText : undefined; + <xsl:text> if (this.active_style && this.inactive_style) { + <xsl:text> this.active_elt.setAttribute("style", "display:none"); + <xsl:text> this.inactive_elt.setAttribute("style", this.inactive_style); <xsl:text> this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
- <xsl:text> this.inactive_elt.setAttribute("style", this.inactive_style);- <xsl:text> this.active_elt.setAttribute("style", "display:none");@@ -5499,6 +5928,7 @@
<xsl:with-param name="labels">
<xsl:text>active inactive</xsl:text>
+ <xsl:with-param name="mandatory" select="'no'"/> --- a/tests/svghmi/py_ext_0@py_ext/pyfile.xml Mon Oct 19 09:29:11 2020 +0200
+++ b/tests/svghmi/py_ext_0@py_ext/pyfile.xml Mon Oct 19 10:15:26 2020 +0200
@@ -30,8 +30,9 @@
def render_POST(self, request):
newstr = request.content.getvalue()
newdata = json.loads(newstr)
- vars = newdata[u'vars']+ range_feedback = newdata[u'range'] + slider_position = newdata[u'position'] visible = newdata[u'visible']
options = newdata[u'options']
@@ -40,14 +41,11 @@
if action == "onClick[acknowledge]":
AlarmIndex[int(alarmid)][2] = "ack"
- svars = (vars + [0,0])[:3]- range_feedback = svars[1]- slider_position = svars[2]- answer = self.renderTable(range_feedback, slider_position, visible, *(args+svars[3:]))+ answer = self.renderTable(range_feedback, slider_position, visible) janswer = json.dumps(answer)
- def renderTable(self, old_range, old_position, visible, *options):+ def renderTable(self, old_range, old_position, visible): delta = new_range - visible
new_position = 0 if delta <= 0 else delta if old_position > delta else old_position
