beremiz

SVGHMI: Quicker update path for input widget when pressing on buttons, do not wait until data comes back, and simply update value text of the pressed widget. Updated PLC prog for more amimated value to display
svghmi
2019-10-27, Edouard Tisserant
7d0e81cdedb0
Parents e521e0d133d5
Children 7fa21b3b5f9f
SVGHMI: Quicker update path for input widget when pressing on buttons, do not wait until data comes back, and simply update value text of the pressed widget. Updated PLC prog for more amimated value to display
4 files changed, 153 insertions(+), 41 deletions(-)
  • +9 -15
    svghmi/gen_index_xhtml.xslt
  • +3 -1
    svghmi/gen_index_xhtml.ysl2
  • +3 -3
    svghmi/svghmi.js
  • +138 -22
    tests/svghmi/plc.xml
    • --- a/svghmi/gen_index_xhtml.xslt Sun Oct 27 21:38:10 2019 +0100
    +++ b/svghmi/gen_index_xhtml.xslt Sun Oct 27 22:28:51 2019 +0100
    @@ -426,8 +426,6 @@
    </xsl:text>
    <xsl:text> let i = 0;
    </xsl:text>
    - <xsl:text> //console.log("Recv something.");
    -</xsl:text>
    <xsl:text> try {
    </xsl:text>
    <xsl:text> for(let hash_int of hmi_hash) {
    @@ -444,16 +442,10 @@
    </xsl:text>
    <xsl:text>
    </xsl:text>
    - <xsl:text> //console.log("Recv something GOOD.");
    -</xsl:text>
    - <xsl:text>
    -</xsl:text>
    <xsl:text> while(i &lt; data.byteLength){
    </xsl:text>
    <xsl:text> let index = dv.getUint32(i, true);
    </xsl:text>
    - <xsl:text> //console.log("Recv something index is "+index);
    -</xsl:text>
    <xsl:text> i += 4;
    </xsl:text>
    <xsl:text> let iectype = hmitree_types[index];
    @@ -586,7 +578,7 @@
    </xsl:text>
    <xsl:text> }
    </xsl:text>
    - <xsl:text>
    + <xsl:text>
    </xsl:text>
    <xsl:text> if(previous_period != new_period) {
    </xsl:text>
    @@ -596,14 +588,12 @@
    </xsl:text>
    <xsl:text> new Uint8Array([2]), /* subscribe = 2 */
    </xsl:text>
    - <xsl:text> new Uint32Array([index]),
    + <xsl:text> new Uint32Array([index]),
    </xsl:text>
    <xsl:text> new Uint16Array([new_period]));
    </xsl:text>
    <xsl:text> }
    </xsl:text>
    - <xsl:text>
    -</xsl:text>
    <xsl:text> }
    </xsl:text>
    <xsl:text> send_blob(delta);
    @@ -670,7 +660,9 @@
    </xsl:text>
    <xsl:text> if(new_val != undefined &amp;&amp; old_val != new_val)
    </xsl:text>
    - <xsl:text> return send_hmi_value(index, new_val);
    + <xsl:text> send_hmi_value(index, new_val);
    +</xsl:text>
    + <xsl:text> return new_val;
    </xsl:text>
    <xsl:text>}
    </xsl:text>
    @@ -901,9 +893,11 @@
    </xsl:text>
    <xsl:text> "click",
    </xsl:text>
    - <xsl:text> evt =&gt; change_hmi_value(this.indexes[0], "</xsl:text>
    + <xsl:text> evt =&gt; {let new_val = change_hmi_value(this.indexes[0], "</xsl:text>
    <xsl:value-of select="@inkscape:label"/>
    - <xsl:text>"));
    + <xsl:text>");
    +</xsl:text>
    + <xsl:text> this.value_elt.textContent = String(new_val);});
    </xsl:text>
    </xsl:for-each>
    <xsl:text>},
    --- a/svghmi/gen_index_xhtml.ysl2 Sun Oct 27 21:38:10 2019 +0100
    +++ b/svghmi/gen_index_xhtml.ysl2 Sun Oct 27 22:28:51 2019 +0100
    @@ -345,7 +345,9 @@
    foreach "$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-][0-9]+')]" {
    | document.getElementById("«@id»").addEventListener(
    | "click",
    - | evt => change_hmi_value(this.indexes[0], "«@inkscape:label»"));
    + | evt => {let new_val = change_hmi_value(this.indexes[0], "«@inkscape:label»");
    + | this.value_elt.textContent = String(new_val);});
    + /* could gray out value until refreshed */
    }
    | },
    }
    --- a/svghmi/svghmi.js Sun Oct 27 21:38:10 2019 +0100
    +++ b/svghmi/svghmi.js Sun Oct 27 22:28:51 2019 +0100
    @@ -134,10 +134,9 @@
    subscriptions[index] = new_period;
    delta.push(
    new Uint8Array([2]), /* subscribe = 2 */
    - new Uint32Array([index]),
    + new Uint32Array([index]),
    new Uint16Array([new_period]));
    }
    -
    }
    send_blob(delta);
    };
    @@ -171,7 +170,8 @@
    break;
    }
    if(new_val != undefined && old_val != new_val)
    - return send_hmi_value(index, new_val);
    + send_hmi_value(index, new_val);
    + return new_val;
    }
    var current_page;
    --- a/tests/svghmi/plc.xml Sun Oct 27 21:38:10 2019 +0100
    +++ b/tests/svghmi/plc.xml Sun Oct 27 22:28:51 2019 +0100
    @@ -1,7 +1,7 @@
    <?xml version='1.0' encoding='utf-8'?>
    <project xmlns:ns1="http://www.plcopen.org/xml/tc6_0201" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://www.plcopen.org/xml/tc6_0201">
    <fileHeader companyName="Unknown" productName="Unnamed" productVersion="1" creationDateTime="2019-08-06T14:23:42"/>
    - <contentHeader name="Unnamed" modificationDateTime="2019-10-23T11:12:09">
    + <contentHeader name="Unnamed" modificationDateTime="2019-10-27T21:48:33">
    <coordinateInfo>
    <fbd>
    <scaling x="5" y="5"/>
    @@ -91,43 +91,159 @@
    </interface>
    <body>
    <FBD>
    - <inVariable localId="3" executionOrderId="0" height="25" width="30" negated="false">
    - <position x="380" y="140"/>
    + <inVariable localId="5" executionOrderId="0" height="30" width="125" negated="false">
    + <position x="150" y="100"/>
    <connectionPointOut>
    - <relPosition x="30" y="10"/>
    + <relPosition x="125" y="15"/>
    </connectionPointOut>
    - <expression>23</expression>
    + <expression>TargetPressure</expression>
    </inVariable>
    - <outVariable localId="4" executionOrderId="0" height="30" width="60" negated="false">
    - <position x="640" y="135"/>
    + <inOutVariable localId="4" executionOrderId="0" height="30" width="60" negatedOut="false" negatedIn="false">
    + <position x="510" y="80"/>
    <connectionPointIn>
    <relPosition x="0" y="15"/>
    - <connection refLocalId="3">
    - <position x="640" y="150"/>
    - <position x="410" y="150"/>
    + <connection refLocalId="6" formalParameter="OUT">
    + <position x="510" y="95"/>
    + <position x="470" y="95"/>
    </connection>
    </connectionPointIn>
    + <connectionPointOut>
    + <relPosition x="60" y="15"/>
    + </connectionPointOut>
    <expression>Sloth</expression>
    - </outVariable>
    - <outVariable localId="1" executionOrderId="0" height="30" width="75" negated="false">
    - <position x="285" y="105"/>
    + </inOutVariable>
    + <block localId="6" typeName="ADD" executionOrderId="0" height="60" width="65">
    + <position x="405" y="65"/>
    + <inputVariables>
    + <variable formalParameter="IN1">
    + <connectionPointIn>
    + <relPosition x="0" y="30"/>
    + <connection refLocalId="4">
    + <position x="405" y="95"/>
    + <position x="385" y="95"/>
    + <position x="385" y="50"/>
    + <position x="580" y="50"/>
    + <position x="580" y="95"/>
    + <position x="570" y="95"/>
    + </connection>
    + </connectionPointIn>
    + </variable>
    + <variable formalParameter="IN2">
    + <connectionPointIn>
    + <relPosition x="0" y="50"/>
    + <connection refLocalId="7" formalParameter="OUT">
    + <position x="405" y="115"/>
    + <position x="360" y="115"/>
    + </connection>
    + </connectionPointIn>
    + </variable>
    + </inputVariables>
    + <inOutVariables/>
    + <outputVariables>
    + <variable formalParameter="OUT">
    + <connectionPointOut>
    + <relPosition x="65" y="30"/>
    + </connectionPointOut>
    + </variable>
    + </outputVariables>
    + </block>
    + <inVariable localId="1" executionOrderId="0" height="30" width="75" negated="false">
    + <position x="150" y="135"/>
    + <connectionPointOut>
    + <relPosition x="75" y="15"/>
    + </connectionPointOut>
    + <expression>Pressure</expression>
    + </inVariable>
    + <block localId="7" typeName="SUB" executionOrderId="0" height="60" width="65">
    + <position x="295" y="85"/>
    + <inputVariables>
    + <variable formalParameter="IN1">
    + <connectionPointIn>
    + <relPosition x="0" y="30"/>
    + <connection refLocalId="5">
    + <position x="295" y="115"/>
    + <position x="275" y="115"/>
    + </connection>
    + </connectionPointIn>
    + </variable>
    + <variable formalParameter="IN2">
    + <connectionPointIn>
    + <relPosition x="0" y="50"/>
    + <connection refLocalId="1">
    + <position x="295" y="135"/>
    + <position x="285" y="135"/>
    + <position x="285" y="150"/>
    + <position x="225" y="150"/>
    + </connection>
    + </connectionPointIn>
    + </variable>
    + </inputVariables>
    + <inOutVariables/>
    + <outputVariables>
    + <variable formalParameter="OUT">
    + <connectionPointOut>
    + <relPosition x="65" y="30"/>
    + </connectionPointOut>
    + </variable>
    + </outputVariables>
    + </block>
    + <inVariable localId="2" executionOrderId="0" height="30" width="60" negated="false">
    + <position x="240" y="190"/>
    + <connectionPointOut>
    + <relPosition x="60" y="15"/>
    + </connectionPointOut>
    + <expression>Sloth</expression>
    + </inVariable>
    + <outVariable localId="3" executionOrderId="0" height="30" width="75" negated="false">
    + <position x="435" y="205"/>
    <connectionPointIn>
    <relPosition x="0" y="15"/>
    - <connection refLocalId="5">
    - <position x="285" y="120"/>
    - <position x="240" y="120"/>
    - <position x="240" y="115"/>
    - <position x="195" y="115"/>
    + <connection refLocalId="8" formalParameter="OUT">
    + <position x="435" y="220"/>
    + <position x="410" y="220"/>
    </connection>
    </connectionPointIn>
    <expression>Pressure</expression>
    </outVariable>
    - <inVariable localId="5" executionOrderId="0" height="30" width="125" negated="false">
    - <position x="70" y="100"/>
    + <block localId="8" typeName="DIV" executionOrderId="0" height="60" width="65">
    + <position x="345" y="190"/>
    + <inputVariables>
    + <variable formalParameter="IN1">
    + <connectionPointIn>
    + <relPosition x="0" y="30"/>
    + <connection refLocalId="2">
    + <position x="345" y="220"/>
    + <position x="335" y="220"/>
    + <position x="335" y="205"/>
    + <position x="300" y="205"/>
    + </connection>
    + </connectionPointIn>
    + </variable>
    + <variable formalParameter="IN2">
    + <connectionPointIn>
    + <relPosition x="0" y="50"/>
    + <connection refLocalId="9">
    + <position x="345" y="240"/>
    + <position x="305" y="240"/>
    + </connection>
    + </connectionPointIn>
    + </variable>
    + </inputVariables>
    + <inOutVariables/>
    + <outputVariables>
    + <variable formalParameter="OUT">
    + <connectionPointOut>
    + <relPosition x="65" y="30"/>
    + </connectionPointOut>
    + </variable>
    + </outputVariables>
    + </block>
    + <inVariable localId="9" executionOrderId="0" height="30" width="60" negated="false">
    + <position x="245" y="225"/>
    <connectionPointOut>
    - <relPosition x="125" y="15"/>
    + <relPosition x="60" y="15"/>
    </connectionPointOut>
    - <expression>TargetPressure</expression>
    + <expression>100</expression>
    </inVariable>
    </FBD>
    </body>