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
--- 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 < 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 && 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 => change_hmi_value(this.indexes[0], "</xsl:text>
+ <xsl:text> evt => {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"/>
- <connectionPointOut>
- <relPosition x="30" y="10"/>
- </connectionPointOut>
- <expression>23</expression>
- </inVariable>
- <outVariable localId="4" executionOrderId="0" height="30" width="60" negated="false">
- <position x="640" y="135"/>
+ <inVariable localId="5" executionOrderId="0" height="30" width="125" negated="false">
+ <position x="150" y="100"/>
+ <connectionPointOut>
+ <relPosition x="125" y="15"/>
+ </connectionPointOut>
+ <expression>TargetPressure</expression>
+ </inVariable>
+ <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"/>
- <connectionPointOut>
- <relPosition x="125" y="15"/>
- </connectionPointOut>
- <expression>TargetPressure</expression>
+ <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="60" y="15"/>
+ </connectionPointOut>
+ <expression>100</expression>
</inVariable>
</FBD>
</body>