beremiz

SVGHMI: intermediate commit while working on dropdown widget.
svghmi
2020-04-09, Edouard Tisserant
ddce4ebdf010
Parents 2670f5c53caf
Children 5ec1c07ce582
SVGHMI: intermediate commit while working on dropdown widget.

Here is the plan :
HMI:DropDown : svg:g of svg:rect + svg:text
rect is extended to match content size, and if content size exceed page size, user can scroll
HMI:List : either HMI:List:ListName as svg:text, one tspan per list entry
or HMI:List:ListName:Foreach:HMI_CLASS:SUB/PATH/TO/VALUE@/ROOT/PATH as empty svg:g
3 files changed, 178 insertions(+), 7 deletions(-)
  • +50 -7
    svghmi/gen_index_xhtml.xslt
  • +24 -0
    svghmi/widget_dropdown.ysl2
  • +104 -0
    tests/svghmi/svghmi_0@svghmi/svghmi.svg
    • --- a/svghmi/gen_index_xhtml.xslt Tue Apr 07 10:01:23 2020 +0200
    +++ b/svghmi/gen_index_xhtml.xslt Thu Apr 09 09:52:34 2020 +0200
    @@ -817,6 +817,55 @@
    <xsl:text> },
    </xsl:text>
    </xsl:template>
    + <xsl:template mode="widget_defs" match="widget[@type='DropDown']">
    + <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>text box</xsl:text>
    + </xsl:with-param>
    + </xsl:call-template>
    + <xsl:text> dispatch: function(value) {
    +</xsl:text>
    + <xsl:text> this.text_elt.textContent = String(value);
    +</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()");
    +</xsl:text>
    + <xsl:text> },
    +</xsl:text>
    + <xsl:variable name="box_elt" select="$hmi_element/*[@inkscape:label='box'][1]"/>
    + <xsl:variable name="g" select="$geometry[@Id = $box_elt/@id]"/>
    + <xsl:text> original_box: [</xsl:text>
    + <xsl:value-of select="$g/@x"/>
    + <xsl:text>, </xsl:text>
    + <xsl:value-of select="$g/@y"/>
    + <xsl:text>, </xsl:text>
    + <xsl:value-of select="$g/@w"/>
    + <xsl:text>, </xsl:text>
    + <xsl:value-of select="$g/@h"/>
    + <xsl:text>],
    +</xsl:text>
    + <xsl:text> on_click: function() {
    +</xsl:text>
    + <xsl:text> let [x,y,w,h] = page_desc[current_visible_page].bbox;
    +</xsl:text>
    + <xsl:text> let p = new DOMPoint(this.box_elt.x.baseVal.value, this.box_elt.y.baseVal.value);
    +</xsl:text>
    + <xsl:text> let k = DOMMatrix.fromMatrix(this.box_elt.getCTM());
    +</xsl:text>
    + <xsl:text> let l = DOMMatrix.fromMatrix(this.box_elt.getScreenCTM());
    +</xsl:text>
    + <xsl:text> console.log(p, k.transformPoint(p), l.transformPoint(p));
    +</xsl:text>
    + <xsl:text> },
    +</xsl:text>
    + </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)]"/>
    @@ -2157,16 +2206,10 @@
    </xsl:text>
    <xsl:text> let old_val = cache[index]
    </xsl:text>
    - <xsl:text> console.log("apply", index, new_val);
    -</xsl:text>
    - <xsl:text> if(new_val != undefined &amp;&amp; old_val != new_val){
    -</xsl:text>
    - <xsl:text> console.log("sending", new_val);
    + <xsl:text> if(new_val != undefined &amp;&amp; old_val != new_val)
    </xsl:text>
    <xsl:text> send_hmi_value(index, new_val);
    </xsl:text>
    - <xsl:text> }
    -</xsl:text>
    <xsl:text> return new_val;
    </xsl:text>
    <xsl:text>}
    --- /dev/null Thu Jan 01 00:00:00 1970 +0000
    +++ b/svghmi/widget_dropdown.ysl2 Thu Apr 09 09:52:34 2020 +0200
    @@ -0,0 +1,24 @@
    +// widget_dropdown.ysl2
    +
    +template "widget[@type='DropDown']", mode="widget_defs" {
    + param "hmi_element";
    + labels("text box");
    + | dispatch: function(value) {
    + /* TODO : get selection text by index */
    + | this.text_elt.textContent = String(value);
    + | },
    + | init: function() {
    + | this.element.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_click()");
    + | },
    + const "box_elt","$hmi_element/*[@inkscape:label='box'][1]";
    + const "g", "$geometry[@Id = $box_elt/@id]";
    + | original_box: [«$g/@x», «$g/@y», «$g/@w», «$g/@h»],
    + | on_click: function() {
    + | let [x,y,w,h] = page_desc[current_visible_page].bbox;
    + | let p = new DOMPoint(this.box_elt.x.baseVal.value, this.box_elt.y.baseVal.value);
    + | let k = DOMMatrix.fromMatrix(this.box_elt.getCTM());
    + | let l = DOMMatrix.fromMatrix(this.box_elt.getScreenCTM());
    + | console.log(p, k.transformPoint(p), l.transformPoint(p));
    + | },
    +}
    +
    --- a/tests/svghmi/svghmi_0@svghmi/svghmi.svg Tue Apr 07 10:01:23 2020 +0200
    +++ b/tests/svghmi/svghmi_0@svghmi/svghmi.svg Thu Apr 09 09:52:34 2020 +0200
    @@ -2490,4 +2490,108 @@
    id="tspan469"
    sodipodi:role="line">information</tspan></text>
    </g>
    + <g
    + id="g14237"
    + inkscape:label="HMI:DropDown:Primes">
    + <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"
    + id="rect14212"
    + width="299.99988"
    + height="136.9433"
    + x="956.00842"
    + y="917.98993"
    + rx="7"
    + ry="7"
    + inkscape:label="box" />
    + <text
    + id="text14183"
    + y="1011.9975"
    + x="1080.6298"
    + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:80px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
    + xml:space="preserve"
    + inkscape:label="text"><tspan
    + style="stroke-width:1px"
    + y="1011.9975"
    + x="1080.6298"
    + id="tspan14181"
    + sodipodi:role="line">sel_0</tspan></text>
    + </g>
    + <g
    + id="g14232"
    + inkscape:label="HMI:ScrollbarTemplate">
    + <rect
    + ry="7"
    + rx="7"
    + y="938.1615"
    + x="1676.4542"
    + height="412.77173"
    + width="59.554077"
    + id="rect14179"
    + 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:none;fill-opacity:1;fill-rule:nonzero;stroke:#010000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1, 1;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
    + inkscape:label="border" />
    + <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:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1px;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="rect14189"
    + width="34.127792"
    + height="137.37276"
    + x="1689.1526"
    + y="1005.6711"
    + rx="7"
    + ry="7"
    + inkscape:label="cursor" />
    + <path
    + sodipodi:nodetypes="cccc"
    + inkscape:connector-curvature="0"
    + id="rect14207"
    + d="m 1706.2165,965.67108 17.0639,17.37276 h -34.1278 z"
    + 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:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1px;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:label="up" />
    + <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:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1px;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"
    + d="m 1706.2165,1323.0438 17.0639,-17.3727 h -34.1278 z"
    + id="path14210"
    + inkscape:connector-curvature="0"
    + sodipodi:nodetypes="cccc"
    + inkscape:label="down" />
    + </g>
    + <text
    + id="text14183-9"
    + y="845.03906"
    + x="1493.8926"
    + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
    + xml:space="preserve"
    + inkscape:label="HMI:List:Primes"><tspan
    + style="stroke-width:1px"
    + y="845.03906"
    + x="1493.8926"
    + id="tspan14181-1"
    + sodipodi:role="line">one</tspan><tspan
    + style="stroke-width:1px"
    + y="895.03906"
    + x="1493.8926"
    + sodipodi:role="line"
    + id="tspan14257">two</tspan><tspan
    + style="stroke-width:1px"
    + y="945.03906"
    + x="1493.8926"
    + sodipodi:role="line"
    + id="tspan14259">three</tspan><tspan
    + style="stroke-width:1px"
    + y="995.03906"
    + x="1493.8926"
    + sodipodi:role="line"
    + id="tspan14261">five</tspan><tspan
    + style="stroke-width:1px"
    + y="1045.0391"
    + x="1493.8926"
    + sodipodi:role="line"
    + id="tspan14263">seven</tspan><tspan
    + style="stroke-width:1px"
    + y="1095.0391"
    + x="1493.8926"
    + sodipodi:role="line"
    + id="tspan14265">eleven</tspan></text>
    + <g
    + id="g14274"
    + inkscape:label="HMI:List:HoodNames:ForEach:HOOD:NAME@/" />
    </svg>