# HG changeset patch # User Edouard Tisserant <edouard.tisserant@gmail.com> # Date 1589388607 -7200 # Node ID 00825316ed00f30871166e8fc9516dd1099a91d5 # Parent 5ad82541b46e60484256f74d0e6d4e6410169731 SVGHMI: Update Button widget to class declaration, and add a button widget in tests/svghmi. diff -r 5ad82541b46e -r 00825316ed00 svghmi/gen_index_xhtml.xslt --- a/svghmi/gen_index_xhtml.xslt Wed May 13 18:47:09 2020 +0200 +++ b/svghmi/gen_index_xhtml.xslt Wed May 13 18:50:07 2020 +0200 @@ -868,6 +868,8 @@ </xsl:text> <xsl:text> constructor(elt_id,args,indexes,members){ </xsl:text> + <xsl:text> this.element_id = elt_id; +</xsl:text> <xsl:text> this.element = id(elt_id); </xsl:text> <xsl:text> this.args = args; @@ -880,6 +882,8 @@ </xsl:text> <xsl:text> } </xsl:text> + <xsl:text> +</xsl:text> <xsl:text> unsub(){ </xsl:text> <xsl:text> /* remove subsribers */ @@ -1078,9 +1082,10 @@ </xsl:otherwise> </xsl:choose> </func:function> - <xsl:template mode="widget_defs" match="widget[@type='Back']"> - <xsl:param name="hmi_element"/> - <xsl:text> on_click: function(evt) { + <xsl:template mode="widget_class" match="widget[@type='Back']"> + <xsl:text>class BackWidget extends Widget{ +</xsl:text> + <xsl:text> on_click(evt) { </xsl:text> <xsl:text> if(jump_history.length > 1){ </xsl:text> @@ -1092,44 +1097,47 @@ </xsl:text> <xsl:text> } </xsl:text> - <xsl:text> }, -</xsl:text> - <xsl:text> init: function() { -</xsl:text> - <xsl:text> this.element.setAttribute("onclick", "hmi_widgets['</xsl:text> - <xsl:value-of select="$hmi_element/@id"/> - <xsl:text>'].on_click(evt)"); -</xsl:text> - <xsl:text> }, -</xsl:text> - </xsl:template> - <xsl:template mode="widget_defs" match="widget[@type='Button']"> - <xsl:param name="hmi_element"/> - <xsl:text>frequency: 5, -</xsl:text> - <xsl:text>init: function() { -</xsl:text> - <xsl:text> this.element.addEventListener( -</xsl:text> - <xsl:text> "mousedown", -</xsl:text> - <xsl:text> evt => { -</xsl:text> - <xsl:text> change_hmi_value(this.indexes[0], "=1"); -</xsl:text> - <xsl:text> }); -</xsl:text> - <xsl:text> this.element.addEventListener( -</xsl:text> - <xsl:text> "mouseup", -</xsl:text> - <xsl:text> evt => { -</xsl:text> - <xsl:text> change_hmi_value(this.indexes[0], "=0"); -</xsl:text> - <xsl:text> }); -</xsl:text> - <xsl:text>}, + <xsl:text> } +</xsl:text> + <xsl:text> init() { +</xsl:text> + <xsl:text> this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)"); +</xsl:text> + <xsl:text> } +</xsl:text> + <xsl:text>} +</xsl:text> + </xsl:template> + <xsl:template mode="widget_class" match="widget[@type='Button']"> + <xsl:text>class ButtonWidget extends Widget{ +</xsl:text> + <xsl:text> frequency = 5; +</xsl:text> + <xsl:text> init() { +</xsl:text> + <xsl:text> this.element.addEventListener( +</xsl:text> + <xsl:text> "mousedown", +</xsl:text> + <xsl:text> evt => { +</xsl:text> + <xsl:text> change_hmi_value(this.indexes[0], "=1"); +</xsl:text> + <xsl:text> }); +</xsl:text> + <xsl:text> this.element.addEventListener( +</xsl:text> + <xsl:text> "mouseup", +</xsl:text> + <xsl:text> evt => { +</xsl:text> + <xsl:text> change_hmi_value(this.indexes[0], "=0"); +</xsl:text> + <xsl:text> }); +</xsl:text> + <xsl:text> } +</xsl:text> + <xsl:text>} </xsl:text> </xsl:template> <xsl:template mode="widget_defs" match="widget[@type='CircularBar']"> @@ -1767,7 +1775,6 @@ </xsl:template> <xsl:template mode="widget_defs" match="widget[@type='ForEach']"> <xsl:param name="hmi_element"/> - <xsl:variable name="widgets" select="func:refered_elements($forEach_widgets)[not(@id = $forEach_widgets_ids)]"/> <xsl:variable name="class" select="arg[1]/@value"/> <xsl:variable name="base_path" select="path/@value"/> <xsl:variable name="hmi_index_base" select="$indexed_hmitree/*[@hmipath = $base_path]"/> @@ -3104,11 +3111,15 @@ </xsl:text> <xsl:text> let maxfreq = 0; </xsl:text> - <xsl:text> for(let widget of widgets) -</xsl:text> - <xsl:text> if(maxfreq < widget.frequency) -</xsl:text> - <xsl:text> maxfreq = widget.frequency; + <xsl:text> for(let widget of widgets){ +</xsl:text> + <xsl:text> let wf = widget.frequency; +</xsl:text> + <xsl:text> if(wf != undefined && maxfreq < wf) +</xsl:text> + <xsl:text> maxfreq = wf; +</xsl:text> + <xsl:text> } </xsl:text> <xsl:text> </xsl:text> diff -r 5ad82541b46e -r 00825316ed00 svghmi/widget_button.ysl2 --- a/svghmi/widget_button.ysl2 Wed May 13 18:47:09 2020 +0200 +++ b/svghmi/widget_button.ysl2 Wed May 13 18:50:07 2020 +0200 @@ -1,18 +1,20 @@ // widget_button.ysl2 -template "widget[@type='Button']", mode="widget_defs" { - param "hmi_element"; - | frequency: 5, - | init: function() { - | this.element.addEventListener( - | "mousedown", - | evt => { - | change_hmi_value(this.indexes[0], "=1"); - | }); - | this.element.addEventListener( - | "mouseup", - | evt => { - | change_hmi_value(this.indexes[0], "=0"); - | }); - | }, -} \ No newline at end of file +template "widget[@type='Button']", mode="widget_class" + || + class ButtonWidget extends Widget{ + frequency = 5; + init() { + this.element.addEventListener( + "mousedown", + evt => { + change_hmi_value(this.indexes[0], "=1"); + }); + this.element.addEventListener( + "mouseup", + evt => { + change_hmi_value(this.indexes[0], "=0"); + }); + } + } + || diff -r 5ad82541b46e -r 00825316ed00 tests/svghmi/svghmi_0@svghmi/svghmi.svg --- a/tests/svghmi/svghmi_0@svghmi/svghmi.svg Wed May 13 18:47:09 2020 +0200 +++ b/tests/svghmi/svghmi_0@svghmi/svghmi.svg Wed May 13 18:50:07 2020 +0200 @@ -16,7 +16,7 @@ version="1.1" id="hmi0" sodipodi:docname="svghmi.svg" - inkscape:version="0.92.4 (5da689c313, 2019-01-14)"> + inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"> <metadata id="metadata4542"> <rdf:RDF> @@ -127,13 +127,13 @@ inkscape:current-layer="hmi0" showgrid="false" units="px" - inkscape:zoom="0.35355339" - inkscape:cx="-418.67433" - inkscape:cy="-1206.7258" + inkscape:zoom="0.70710678" + inkscape:cx="263.37056" + inkscape:cy="-24.461312" inkscape:window-width="1920" - inkscape:window-height="1080" + inkscape:window-height="1348" inkscape:window-x="3815" - inkscape:window-y="968" + inkscape:window-y="700" inkscape:window-maximized="0" showguides="true" inkscape:guide-bbox="true" /> @@ -912,29 +912,29 @@ <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:80px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.5px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" - x="98.164062" - y="469.12109" + x="38.164062" + y="449.12109" id="text134" inkscape:label="HMI:Display@/PUMP0/STROUT"><tspan sodipodi:role="line" id="tspan132" - x="98.164062" - y="469.12109" + x="38.164062" + y="449.12109" style="fill:#ffffff;fill-opacity:1;stroke-width:0.5px">8888</tspan></text> <text inkscape:label="HMI:Display@/PUMP0/BOOLOUT" id="text138" - y="569.12109" - x="98.164062" + y="549.12109" + x="38.164062" style="font-style:normal;font-weight:normal;font-size:80px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.5px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" xml:space="preserve"><tspan style="fill:#ffffff;fill-opacity:1;stroke-width:0.5px" - y="569.12109" - x="98.164062" + y="549.12109" + x="38.164062" id="tspan136" sodipodi:role="line">8888</tspan></text> <g - transform="matrix(0.5,0,0,0.5,90.110264,225.71623)" + transform="matrix(0.5,0,0,0.5,-9.889736,205.71623)" id="g208-1" inkscape:label="HMI:Input@/PUMP0/STRIN" style="stroke-width:2"> @@ -1124,196 +1124,6 @@ </g> </g> <g - transform="matrix(0.5,0,0,0.5,126.87458,546.40152)" - id="g208-1-8" - inkscape:label="HMI:Input@/PUMP0/STRIN" - style="stroke-width:2"> - <text - inkscape:label="value" - id="text164-3" - y="218.24219" - x="136.32812" - style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" - xml:space="preserve"><tspan - style="stroke-width:2px" - y="218.24219" - x="136.32812" - id="tspan162-1" - sodipodi:role="line">8888</tspan></text> - <rect - style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" - id="rect166-8" - width="407.7037" - height="128" - x="139.85185" - y="95.40741" - onclick="" - inkscape:label="edit" /> - <g - transform="translate(-416.52022,170.47452)" - inkscape:label="+"dhu"" - id="g174-9" - style="stroke-width:2"> - <path - style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" - inkscape:transform-center-y="-14.956361" - d="m 797.19546,145.18619 -80.62929,0.60214 -0.60215,-80.629288 80.6293,-0.60214 z" - id="path168-6" - inkscape:connector-curvature="0" /> - <text - xml:space="preserve" - style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" - x="733.58197" - y="111.05016" - id="text172-4"><tspan - sodipodi:role="line" - id="tspan170-3" - x="733.58197" - y="111.05016" - style="stroke-width:1px">dhu</tspan></text> - </g> - <g - transform="translate(-416.52022,170.47452)" - inkscape:label="="plop"" - id="g182-3" - style="stroke-width:2"> - <path - transform="matrix(0,-2.0000001,1.9999999,0,1034.195,1298.6541)" - sodipodi:type="star" - style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" - id="path176-3" - sodipodi:sides="3" - sodipodi:cx="596.74072" - sodipodi:cy="-184.98808" - sodipodi:r1="29.912722" - sodipodi:r2="14.956361" - sodipodi:arg1="0.52359878" - sodipodi:arg2="1.5707963" - inkscape:flatsided="true" - inkscape:rounded="0" - inkscape:randomized="0" - d="m 622.6459,-170.03172 -51.81035,0 25.90517,-44.86908 z" - inkscape:transform-center-y="-3.6154501e-05" - inkscape:transform-center-x="14.956371" /> - <text - id="text180-8" - y="111.05016" - x="633.09552" - style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" - xml:space="preserve"><tspan - style="stroke-width:1px" - y="111.05016" - x="633.09552" - id="tspan178-6" - sodipodi:role="line">plop</tspan></text> - </g> - <g - transform="translate(-416.52022,170.47452)" - inkscape:label="="mhoo"" - id="g190-0" - style="stroke-width:2"> - <path - inkscape:transform-center-y="-5.9989963e-06" - d="m 648.55108,-186.34718 -103.62071,0 51.81035,-89.73817 z" - inkscape:randomized="0" - inkscape:rounded="0" - inkscape:flatsided="true" - sodipodi:arg2="1.5707963" - sodipodi:arg1="0.52359878" - sodipodi:r2="29.912722" - sodipodi:r1="59.825443" - sodipodi:cy="-216.2599" - sodipodi:cx="596.74072" - sodipodi:sides="3" - id="path184-4" - style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" - sodipodi:type="star" - transform="rotate(-90,746.45698,-44.543641)" - inkscape:transform-center-x="14.956364" /> - <text - xml:space="preserve" - style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" - x="537.25018" - y="111.05016" - id="text188-8"><tspan - sodipodi:role="line" - id="tspan186-8" - x="537.25018" - y="111.05016" - style="stroke-width:1px">mhoo</tspan></text> - </g> - <g - transform="translate(-416.52022,170.47452)" - inkscape:label="="yodl"" - id="g198-8" - style="stroke-width:2"> - <path - sodipodi:type="star" - style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" - id="path192-9" - sodipodi:sides="3" - sodipodi:cx="596.74072" - sodipodi:cy="105.17262" - sodipodi:r1="59.825443" - sodipodi:r2="29.912722" - sodipodi:arg1="0.52359878" - sodipodi:arg2="1.5707963" - inkscape:flatsided="true" - inkscape:rounded="0" - inkscape:randomized="0" - d="m 648.55108,135.08534 -103.62071,0 51.81035,-89.738161 z" - inkscape:transform-center-y="-5.5023185e-06" - transform="matrix(0,-1,-1,0,1043.9134,701.91334)" - inkscape:transform-center-x="-14.956365" /> - <text - xml:space="preserve" - style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" - x="925.82605" - y="111.05016" - id="text196-7"><tspan - sodipodi:role="line" - id="tspan194-7" - x="925.82605" - y="111.05016" - style="stroke-width:1px">yodl</tspan></text> - </g> - <g - transform="translate(-416.52022,170.47452)" - inkscape:label="="mhe"" - id="g206-1-6" - style="stroke-width:2"> - <path - inkscape:transform-center-y="-3.3040441e-05" - d="m 622.6459,151.4008 -51.81035,0 25.90517,-44.86908 z" - inkscape:randomized="0" - inkscape:rounded="0" - inkscape:flatsided="true" - sodipodi:arg2="1.5707963" - sodipodi:arg1="0.52359878" - sodipodi:r2="14.956361" - sodipodi:r1="29.912722" - sodipodi:cy="136.44444" - sodipodi:cx="596.74072" - sodipodi:sides="3" - id="path200-4" - style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" - sodipodi:type="star" - transform="matrix(0,-2.0000001,-1.9999999,0,1122.1514,1298.6541)" - inkscape:transform-center-x="-14.956349" /> - <text - id="text204-3" - y="111.05016" - x="842.71497" - style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" - xml:space="preserve"><tspan - style="stroke-width:1px" - y="111.05016" - x="842.71497" - id="tspan202-0" - sodipodi:role="line">mhe</tspan></text> - </g> - </g> - <g inkscape:label="HMI:Keypad:HMI_INT:HMI_REAL" id="g2432" style="fill-rule:evenodd;stroke-width:0.47631353" @@ -2692,4 +2502,38 @@ sodipodi:type="star" inkscape:transform-center-x="1.0089177e-06" /> </g> + <g + transform="translate(-867.71696,-14.163562)" + id="g443" + inkscape:label="HMI:Button@/SELECTION"> + <g + id="g435" + inkscape:label="bg"> + <rect + style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:#ff6600;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" + id="rect433" + width="245.44583" + height="95.723877" + x="971.96545" + y="594.82263" + ry="35.579063" + inkscape:label="button" /> + </g> + <g + id="g441" + inkscape:label="text"> + <text + inkscape:label="setting_jmp" + id="text439" + y="656.98151" + x="1090.7626" + style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;display:inline;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + xml:space="preserve"><tspan + style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px" + y="656.98151" + x="1090.7626" + id="tspan437" + sodipodi:role="line">up</tspan></text> + </g> + </g> </svg>