beremiz

SVGHMI: Connect HMI:DropDown to value in HMI Tree, in svghmi test as well.
svghmi
2020-04-14, Edouard Tisserant
41edcb8e0a01
Parents 9179cbc6fc49
Children f51c0e2e0bcb
SVGHMI: Connect HMI:DropDown to value in HMI Tree, in svghmi test as well.
4 files changed, 133 insertions(+), 12 deletions(-)
  • +38 -4
    svghmi/gen_index_xhtml.xslt
  • +4 -1
    svghmi/widget_dropdown.ysl2
  • +6 -1
    tests/svghmi/plc.xml
  • +85 -6
    tests/svghmi/svghmi_0@svghmi/svghmi.svg
    • --- a/svghmi/gen_index_xhtml.xslt Tue Apr 14 17:16:25 2020 +0200
    +++ b/svghmi/gen_index_xhtml.xslt Tue Apr 14 17:17:35 2020 +0200
    @@ -859,6 +859,8 @@
    </xsl:text>
    <xsl:text> this.opened = false;
    </xsl:text>
    + <xsl:text> this.bound_inhibit_click_elsewhere = this.inhibit_click_elsewhere.bind(this);
    +</xsl:text>
    <xsl:text> },
    </xsl:text>
    <xsl:text> on_selection_click: function(selection) {
    @@ -867,7 +869,11 @@
    </xsl:text>
    <xsl:text> this.close();
    </xsl:text>
    - <xsl:text> this.set_selection(selection);
    + <xsl:text> let orig = this.indexes[0];
    +</xsl:text>
    + <xsl:text> let idx = this.offset ? orig - this.offset : orig;
    +</xsl:text>
    + <xsl:text> apply_hmi_value(idx, selection);
    </xsl:text>
    <xsl:text> },
    </xsl:text>
    @@ -963,6 +969,18 @@
    </xsl:text>
    <xsl:text> },
    </xsl:text>
    + <xsl:text> inhibit_click_elsewhere: function(e) {
    +</xsl:text>
    + <xsl:text> console.log("inhibit", e);
    +</xsl:text>
    + <xsl:text> console.log(e.target.parentNode, this.text_elt);
    +</xsl:text>
    + <xsl:text> if(e.target.parentNode !== this.text_elt)
    +</xsl:text>
    + <xsl:text> e.stopPropagation();
    +</xsl:text>
    + <xsl:text> },
    +</xsl:text>
    <xsl:text> close: function(){
    </xsl:text>
    <xsl:text> this.reset_text();
    @@ -971,6 +989,10 @@
    </xsl:text>
    <xsl:text> this.element.appendChild(this.button_elt);
    </xsl:text>
    + <xsl:text> this.apply_cache();
    +</xsl:text>
    + <xsl:text> document.removeEventListener("click", this.bound_inhibit_click_elsewhere, true);
    +</xsl:text>
    <xsl:text> this.opened = false;
    </xsl:text>
    <xsl:text> },
    @@ -1103,7 +1125,11 @@
    </xsl:text>
    <xsl:text> this.element.removeChild(this.button_elt);
    </xsl:text>
    - <xsl:text> /* TODO disable interaction with background */
    + <xsl:text> this.element.parentNode.appendChild(this.element.parentNode.removeChild(this.element));
    +</xsl:text>
    + <xsl:text> // disable interaction with background
    +</xsl:text>
    + <xsl:text> document.addEventListener("click", this.bound_inhibit_click_elsewhere, true);
    </xsl:text>
    <xsl:text> this.opened = true;
    </xsl:text>
    @@ -1327,7 +1353,11 @@
    </xsl:text>
    <xsl:text> on_op_click: function(opstr) {
    </xsl:text>
    - <xsl:text> let new_val = change_hmi_value(this.indexes[0], opstr);
    + <xsl:text> let orig = this.indexes[0];
    +</xsl:text>
    + <xsl:text> let idx = this.offset ? orig - this.offset : orig;
    +</xsl:text>
    + <xsl:text> let new_val = change_hmi_value(idx, opstr);
    </xsl:text>
    <xsl:text> },
    </xsl:text>
    @@ -1343,7 +1373,11 @@
    </xsl:text>
    <xsl:text> edit_callback: function(new_val) {
    </xsl:text>
    - <xsl:text> apply_hmi_value(this.indexes[0], new_val);
    + <xsl:text> let orig = this.indexes[0];
    +</xsl:text>
    + <xsl:text> let idx = this.offset ? orig - this.offset : orig;
    +</xsl:text>
    + <xsl:text> apply_hmi_value(idx, new_val);
    </xsl:text>
    <xsl:text> },
    </xsl:text>
    --- a/svghmi/widget_dropdown.ysl2 Tue Apr 14 17:16:25 2020 +0200
    +++ b/svghmi/widget_dropdown.ysl2 Tue Apr 14 17:17:35 2020 +0200
    @@ -25,7 +25,9 @@
    on_selection_click: function(selection) {
    console.log("selected "+selection);
    this.close();
    - this.set_selection(selection);
    + let orig = this.indexes[0];
    + let idx = this.offset ? orig - this.offset : orig;
    + apply_hmi_value(idx, selection);
    },
    on_button_click: function() {
    this.open();
    @@ -83,6 +85,7 @@
    this.reset_text();
    this.reset_box();
    this.element.appendChild(this.button_elt);
    + this.apply_cache();
    document.removeEventListener("click", this.bound_inhibit_click_elsewhere, true);
    this.opened = false;
    },
    --- a/tests/svghmi/plc.xml Tue Apr 14 17:16:25 2020 +0200
    +++ b/tests/svghmi/plc.xml Tue Apr 14 17:17:35 2020 +0200
    @@ -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="2020-01-23T11:01:29">
    + <contentHeader name="Unnamed" modificationDateTime="2020-04-14T15:53:44">
    <coordinateInfo>
    <fbd>
    <scaling x="5" y="5"/>
    @@ -25,6 +25,11 @@
    <derived name="HMI_INT"/>
    </type>
    </variable>
    + <variable name="selection">
    + <type>
    + <derived name="HMI_INT"/>
    + </type>
    + </variable>
    <variable name="Pump0">
    <type>
    <derived name="PumpControl"/>
    --- a/tests/svghmi/svghmi_0@svghmi/svghmi.svg Tue Apr 14 17:16:25 2020 +0200
    +++ b/tests/svghmi/svghmi_0@svghmi/svghmi.svg Tue Apr 14 17:17:35 2020 +0200
    @@ -124,16 +124,16 @@
    inkscape:pageopacity="0"
    inkscape:pageshadow="2"
    inkscape:document-units="px"
    - inkscape:current-layer="g14237"
    + inkscape:current-layer="hmi0"
    showgrid="false"
    units="px"
    inkscape:zoom="0.35355339"
    inkscape:cx="-418.67433"
    inkscape:cy="-1206.7258"
    - inkscape:window-width="2112"
    - inkscape:window-height="1367"
    - inkscape:window-x="2960"
    - inkscape:window-y="54"
    + inkscape:window-width="1920"
    + inkscape:window-height="1080"
    + inkscape:window-x="3815"
    + inkscape:window-y="968"
    inkscape:window-maximized="0"
    showguides="true"
    inkscape:guide-bbox="true" />
    @@ -2492,7 +2492,7 @@
    </g>
    <g
    id="g14237"
    - inkscape:label="HMI:DropDown:Primes"
    + inkscape:label="HMI:DropDown:Primes@/SELECTION"
    transform="translate(0,-640)">
    <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:#53676c;fill-opacity:1;fill-rule:nonzero;stroke:none;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"
    @@ -2613,4 +2613,83 @@
    <g
    id="g14274"
    inkscape:label="HMI:List:HoodNames:ForEach:HOOD:NAME@/" />
    + <g
    + inkscape:label="HMI:Input@/SELECTION"
    + id="g446"
    + transform="matrix(0.5,0,0,0.5,911.19929,420.35813)">
    + <text
    + xml:space="preserve"
    + 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:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
    + x="136.32812"
    + y="218.24219"
    + id="text432"
    + inkscape:label="value"><tspan
    + sodipodi:role="line"
    + id="tspan430"
    + x="136.32812"
    + y="218.24219"
    + style="stroke-width:1px">8888</tspan></text>
    + <path
    + transform="scale(1,-1)"
    + 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:#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="path436"
    + sodipodi:sides="3"
    + sodipodi:cx="596.74072"
    + sodipodi:cy="-224.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,-210.03172 -51.81035,0 25.90517,-44.86908 z"
    + inkscape:transform-center-y="7.4781812"
    + inkscape:label="-1" />
    + <rect
    + inkscape:label="edit"
    + onclick=""
    + y="95.40741"
    + x="139.85185"
    + height="128"
    + width="407.7037"
    + id="rect438"
    + 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: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" />
    + <path
    + inkscape:label="+1"
    + inkscape:transform-center-y="-7.4781804"
    + d="m 622.6459,111.4008 -51.81035,0 25.90517,-44.869079 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="96.444443"
    + sodipodi:cx="596.74072"
    + sodipodi:sides="3"
    + id="path442"
    + 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"
    + sodipodi:type="star" />
    + <path
    + inkscape:label="=0"
    + inkscape:transform-center-y="-10.828983"
    + d="m 626.14807,189.68763 -58.37872,0.43598 -0.43597,-58.37872 58.37871,-0.43597 z"
    + inkscape:randomized="0"
    + inkscape:rounded="0"
    + inkscape:flatsided="true"
    + sodipodi:arg2="1.5633284"
    + sodipodi:arg1="0.77793027"
    + sodipodi:r2="21.657967"
    + sodipodi:r1="41.281136"
    + sodipodi:cy="160.71626"
    + sodipodi:cx="596.74072"
    + sodipodi:sides="4"
    + id="path444"
    + 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"
    + sodipodi:type="star"
    + inkscape:transform-center-x="1.0089177e-06" />
    + </g>
    </svg>