beremiz

SVGHMI : still trying to optimize. Added xslt code to identitfy minimum set of elements needed by a particular page. Plan is to remove unseen/unused elements from the DOM, and re-appending them later when used, on page switch. Disabled previous optimization.
svghmi
2020-02-27, Edouard Tisserant
94696b3f69fb
Parents 2f73f001955a
Children eee5dcd9fc92
SVGHMI : still trying to optimize. Added xslt code to identitfy minimum set of elements needed by a particular page. Plan is to remove unseen/unused elements from the DOM, and re-appending them later when used, on page switch. Disabled previous optimization.
3 files changed, 198 insertions(+), 107 deletions(-)
  • +89 -59
    svghmi/gen_index_xhtml.xslt
  • +82 -39
    svghmi/gen_index_xhtml.ysl2
  • +27 -9
    svghmi/svghmi.js
    • --- a/svghmi/gen_index_xhtml.xslt Fri Feb 21 16:22:44 2020 +0100
    +++ b/svghmi/gen_index_xhtml.xslt Thu Feb 27 13:14:24 2020 +0100
    @@ -126,40 +126,6 @@
    <xsl:text>All units must be set to "px" in Inkscape's document properties</xsl:text>
    </xsl:message>
    </xsl:template>
    - <xsl:template xmlns="http://www.w3.org/2000/svg" mode="inline_svg" match="svg:use">
    - <g>
    - <xsl:attribute name="style">
    - <xsl:value-of select="@style"/>
    - </xsl:attribute>
    - <xsl:attribute name="transform">
    - <xsl:value-of select="@transform"/>
    - </xsl:attribute>
    - <xsl:attribute name="id">
    - <xsl:value-of select="@id"/>
    - </xsl:attribute>
    - <xsl:variable name="targetid" select="substring-after(@xlink:href,'#')"/>
    - <xsl:apply-templates mode="unlink_clone" select="//svg:*[@id = $targetid]"/>
    - </g>
    - </xsl:template>
    - <xsl:template xmlns="http://www.w3.org/2000/svg" mode="unlink_clone" match="@*">
    - <xsl:copy/>
    - </xsl:template>
    - <xsl:template xmlns="http://www.w3.org/2000/svg" mode="unlink_clone" match="svg:*">
    - <xsl:choose>
    - <xsl:when test="@id = $hmi_elements/@id">
    - <use>
    - <xsl:attribute name="xlink:href">
    - <xsl:value-of select="concat('#',@id)"/>
    - </xsl:attribute>
    - </use>
    - </xsl:when>
    - <xsl:otherwise>
    - <xsl:copy>
    - <xsl:apply-templates mode="unlink_clone" select="@* | node()"/>
    - </xsl:copy>
    - </xsl:otherwise>
    - </xsl:choose>
    - </xsl:template>
    <xsl:template match="/">
    <xsl:comment>
    <xsl:text>Made with SVGHMI. https://beremiz.org</xsl:text>
    @@ -238,17 +204,35 @@
    <xsl:param name="elems"/>
    <xsl:variable name="descend" select="$elems/descendant-or-self::svg:*"/>
    <xsl:variable name="clones" select="$descend[self::svg:use]"/>
    - <xsl:variable name="reals" select="$descend[not(self::svg:use)]"/>
    <xsl:variable name="originals" select="//svg:*[concat('#',@id) = $clones/@xlink:href]"/>
    <xsl:choose>
    <xsl:when test="$originals">
    - <func:result select="$reals | func:refered_elements($originals)"/>
    + <func:result select="$descend | func:refered_elements($originals)"/>
    </xsl:when>
    <xsl:otherwise>
    - <func:result select="$reals"/>
    + <func:result select="$descend"/>
    </xsl:otherwise>
    </xsl:choose>
    </func:function>
    + <func:function name="func:included_geometry">
    + <xsl:param name="elt"/>
    + <xsl:variable name="g" select="$geometry[@Id = $elt/@id]"/>
    + <func:result select="$geometry[@Id != $elt/@id and&#10; @x &gt;= $g/@x and @y &gt;= $g/@y and &#10; @x+@w &lt;= $g/@x+$g/@w and @y+@h &lt;= $g/@y+$g/@h]"/>
    + </func:function>
    + <func:function name="func:sumarized_elements">
    + <xsl:param name="elements"/>
    + <xsl:variable name="short_list" select="$elements[not(ancestor::*/@id = $elements/@id)]"/>
    + <xsl:variable name="filled_groups" select="$short_list/parent::svg:*[not(descendant::*[not(self::svg:g)][not(@id = $short_list/descendant-or-self::*[not(self::svg:g)]/@id)])]"/>
    + <xsl:variable name="groups_to_add" select="$filled_groups[not(ancestor::*/@id = $filled_groups/@id)]"/>
    + <func:result select="$groups_to_add | $short_list[not(ancestor::svg:g/@id = $filled_groups/@id)]"/>
    + </func:function>
    + <func:function name="func:all_related_elements">
    + <xsl:param name="page"/>
    + <xsl:variable name="page_included_geometry" select="func:included_geometry($page)"/>
    + <xsl:variable name="page_sub_elements" select="func:refered_elements($page)"/>
    + <xsl:variable name="page_included_elements" select="//svg:*[@id = $page_included_geometry/@Id]"/>
    + <func:result select="$page_sub_elements | $page_included_elements"/>
    + </func:function>
    <xsl:template name="scripts">
    <xsl:text>//(function(){
    </xsl:text>
    @@ -359,10 +343,10 @@
    <xsl:for-each select="$hmi_pages">
    <xsl:variable name="desc" select="func:parselabel(@inkscape:label)/widget"/>
    <xsl:variable name="page" select="."/>
    - <xsl:variable name="p" select="$hmi_geometry[@Id = $page/@id]"/>
    - <xsl:variable name="page_ids" select="$hmi_geometry[@Id != $page/@id and &#10; @x &gt;= $p/@x and @y &gt;= $p/@y and &#10; @x+@w &lt;= $p/@x+$p/@w and @y+@h &lt;= $p/@y+$p/@h]/@Id"/>
    - <xsl:variable name="page_sub_ids" select="func:refered_elements($page)[@id = $hmi_elements/@id]/@id"/>
    - <xsl:variable name="all_page_ids" select="$page_ids | $page_sub_ids[not(. = $page_ids)]"/>
    + <xsl:variable name="p" select="$geometry[@Id = $page/@id]"/>
    + <xsl:variable name="page_all_elements" select="func:all_related_elements($page)"/>
    + <xsl:variable name="all_page_ids" select="$page_all_elements[@id = $hmi_elements/@id and @id != $page/@id]/@id"/>
    + <xsl:variable name="shorter_list" select="func:sumarized_elements($page_all_elements)"/>
    <xsl:text> "</xsl:text>
    <xsl:value-of select="$desc/arg[1]/@value"/>
    <xsl:text>": {
    @@ -395,6 +379,16 @@
    </xsl:for-each>
    <xsl:text> ]
    </xsl:text>
    + <xsl:text> required_elements: [
    +</xsl:text>
    + <xsl:for-each select="$shorter_list">
    + <xsl:text> "</xsl:text>
    + <xsl:value-of select="@id"/>
    + <xsl:text>",
    +</xsl:text>
    + </xsl:for-each>
    + <xsl:text> ]
    +</xsl:text>
    <xsl:text> }</xsl:text>
    <xsl:if test="position()!=last()">
    <xsl:text>,</xsl:text>
    @@ -852,6 +846,32 @@
    </xsl:text>
    <xsl:text>
    </xsl:text>
    + <xsl:text>function prepare_svg() {
    +</xsl:text>
    + <xsl:text> /* set everybody hidden initially for better performance */
    +</xsl:text>
    + <xsl:text> for(let widget in hmi_widgets){
    +</xsl:text>
    + <xsl:text> if(widget.element != undefined)
    +</xsl:text>
    + <xsl:text> widget.element.style.display = "none";
    +</xsl:text>
    + <xsl:text> }
    +</xsl:text>
    + <xsl:text> /*for(let name in page_desc){
    +</xsl:text>
    + <xsl:text> if(name != new_desc){
    +</xsl:text>
    + <xsl:text> page_desc[name].widget.element.style.display = "none";
    +</xsl:text>
    + <xsl:text> }
    +</xsl:text>
    + <xsl:text> }*/
    +</xsl:text>
    + <xsl:text>};
    +</xsl:text>
    + <xsl:text>
    +</xsl:text>
    <xsl:text>function switch_page(page_name) {
    </xsl:text>
    <xsl:text> let old_desc = page_desc[current_page];
    @@ -862,18 +882,30 @@
    </xsl:text>
    <xsl:text> if(new_desc == undefined){
    </xsl:text>
    + <xsl:text> /* TODO LOG ERROR */
    +</xsl:text>
    <xsl:text> return;
    </xsl:text>
    <xsl:text> }
    </xsl:text>
    <xsl:text>
    </xsl:text>
    - <xsl:text> /* remove subsribers of previous page if any */
    -</xsl:text>
    <xsl:text> if(old_desc){
    </xsl:text>
    <xsl:text> for(let widget of old_desc.widgets){
    </xsl:text>
    + <xsl:text>
    +</xsl:text>
    + <xsl:text> /* hide widget */
    +</xsl:text>
    + <xsl:text> if(widget.element != undefined)
    +</xsl:text>
    + <xsl:text> widget.element.style.display = "none";
    +</xsl:text>
    + <xsl:text>
    +</xsl:text>
    + <xsl:text> /* remove subsribers */
    +</xsl:text>
    <xsl:text> for(let index of widget.indexes){
    </xsl:text>
    <xsl:text> subscribers[index].delete(widget);
    @@ -884,27 +916,23 @@
    </xsl:text>
    <xsl:text> old_desc.widget.element.style.display = "none";
    </xsl:text>
    - <xsl:text> } else {
    -</xsl:text>
    - <xsl:text> /* initial page switch : set everybody hidden */
    -</xsl:text>
    - <xsl:text> for(let name in page_desc){
    -</xsl:text>
    - <xsl:text> if(name != new_desc){
    -</xsl:text>
    - <xsl:text> page_desc[name].widget.element.style.display = "none";
    -</xsl:text>
    - <xsl:text> }
    -</xsl:text>
    - <xsl:text> }
    -</xsl:text>
    <xsl:text> }
    </xsl:text>
    <xsl:text>
    </xsl:text>
    - <xsl:text> /* add new subsribers if any */
    + <xsl:text> for(let widget of new_desc.widgets){
    +</xsl:text>
    + <xsl:text>
    +</xsl:text>
    + <xsl:text> /* unhide widget */
    </xsl:text>
    - <xsl:text> for(let widget of new_desc.widgets){
    + <xsl:text> if(widget.element != undefined)
    +</xsl:text>
    + <xsl:text> widget.element.style.display = "inline";
    +</xsl:text>
    + <xsl:text>
    +</xsl:text>
    + <xsl:text> /* add widget's subsribers */
    </xsl:text>
    <xsl:text> for(let index of widget.indexes){
    </xsl:text>
    @@ -952,6 +980,8 @@
    </xsl:text>
    <xsl:text> // show main page
    </xsl:text>
    + <xsl:text> prepare_svg();
    +</xsl:text>
    <xsl:text> switch_page(default_page);
    </xsl:text>
    <xsl:text>};
    --- a/svghmi/gen_index_xhtml.ysl2 Fri Feb 21 16:22:44 2020 +0100
    +++ b/svghmi/gen_index_xhtml.ysl2 Thu Feb 27 13:14:24 2020 +0100
    @@ -72,6 +72,10 @@
    const "_indexed_hmitree" apply "$hmitree", mode="index";
    const "indexed_hmitree", "exsl:node-set($_indexed_hmitree)";
    +
    + // TODO globally discardable elements, not (used by | ancestor of) any page
    +
    +
    template "*", mode="index" {
    param "index", "0";
    param "parentpath", "''";
    @@ -113,6 +117,7 @@
    template "@* | node()", mode="inline_svg" {
    /* use real xsl:copy instead copy-of alias from yslt.yml2 */
    xsl:copy apply "@* | node()", mode="inline_svg";
    + /* TODO filter out globally discardable elements */
    }
    /* replaces inkscape's height and width hints. forces fit */
    @@ -133,32 +138,35 @@
    error > All units must be set to "px" in Inkscape's document properties
    }
    - /* clone unlinkink until widget for better perf with webkit */
    - svgtmpl "svg:use", mode="inline_svg"
    - {
    - g{
    - attrib "style" > «@style»
    - attrib "transform" > «@transform»
    - /* keep same id and label in case it is a widget */
    - //attrib "inkscape:label","@inkscape:label";
    - attrib "id" > «@id»
    - const "targetid","substring-after(@xlink:href,'#')";
    - apply "//svg:*[@id = $targetid]", mode="unlink_clone";
    - }
    - }
    - svgtmpl "@*", mode="unlink_clone" xsl:copy;
    - svgtmpl "svg:*", mode="unlink_clone" {
    - choose {
    - when "@id = $hmi_elements/@id" {
    - use{
    - attrib "xlink:href" > «concat('#',@id)»
    - }
    - }
    - otherwise {
    - xsl:copy apply "@* | node()", mode="unlink_clone";
    - }
    - }
    - }
    +
    + //// Commented out before implementing runtime DOM remove/append on page switch - would have side effect
    + ////
    + //// /* clone unlinkink until widget for better perf with webkit */
    + //// svgtmpl "svg:use", mode="inline_svg"
    + //// {
    + //// g{
    + //// attrib "style" > «@style»
    + //// attrib "transform" > «@transform»
    + //// /* keep same id and label in case it is a widget */
    + //// //attrib "inkscape:label","@inkscape:label";
    + //// attrib "id" > «@id»
    + //// const "targetid","substring-after(@xlink:href,'#')";
    + //// apply "//svg:*[@id = $targetid]", mode="unlink_clone";
    + //// }
    + //// }
    + //// svgtmpl "@*", mode="unlink_clone" xsl:copy;
    + //// svgtmpl "svg:*", mode="unlink_clone" {
    + //// choose {
    + //// when "@id = $hmi_elements/@id" {
    + //// use{
    + //// attrib "xlink:href" > «concat('#',@id)»
    + //// }
    + //// }
    + //// otherwise {
    + //// xsl:copy apply "@* | node()", mode="unlink_clone";
    + //// }
    + //// }
    + //// }
    // template "svg:use/@style", mode="inline_svg"{
    // attrib "style" > all:initial;
    @@ -212,7 +220,7 @@
    }
    */
    - func:function name="func:parselabel" {
    + def "func:parselabel" {
    param "label";
    const "description", "substring-after($label,'HMI:')";
    @@ -243,24 +251,51 @@
    }
    }
    - func:result select="exsl:node-set($ast)"
    + result "exsl:node-set($ast)";
    }
    // returns all directly or indirectly refered elements
    - func:function name="func:refered_elements" {
    + def "func:refered_elements" {
    param "elems";
    const "descend", "$elems/descendant-or-self::svg:*";
    const "clones", "$descend[self::svg:use]";
    - const "reals", "$descend[not(self::svg:use)]";
    const "originals", "//svg:*[concat('#',@id) = $clones/@xlink:href]";
    choose {
    when "$originals"
    - func:result select="$reals | func:refered_elements($originals)";
    + result "$descend | func:refered_elements($originals)";
    otherwise
    - func:result select="$reals";
    + result "$descend";
    }
    }
    + // return included geometry a given element
    + def "func:included_geometry" {
    + param "elt";
    + const "g", "$geometry[@Id = $elt/@id]";
    + result """$geometry[@Id != $elt/@id and
    + @x >= $g/@x and @y >= $g/@y and
    + @x+@w <= $g/@x+$g/@w and @y+@h <= $g/@y+$g/@h]""";
    +
    + }
    +
    + def "func:sumarized_elements" {
    + param "elements";
    + const "short_list", "$elements[not(ancestor::*/@id = $elements/@id)]";
    + /* TODO exclude globally discardable elements from group fulfillment check */
    + const "filled_groups", "$short_list/parent::svg:*[not(descendant::*[not(self::svg:g)][not(@id = $short_list/descendant-or-self::*[not(self::svg:g)]/@id)])]";
    + const "groups_to_add", "$filled_groups[not(ancestor::*/@id = $filled_groups/@id)]";
    + result "$groups_to_add | $short_list[not(ancestor::svg:g/@id = $filled_groups/@id)]";
    + }
    +
    + def "func:all_related_elements" {
    + param "page";
    + const "page_included_geometry", "func:included_geometry($page)";
    + const "page_sub_elements", "func:refered_elements($page)";
    +
    + const "page_included_elements", "//svg:*[@id = $page_included_geometry/@Id]";
    + result "$page_sub_elements | $page_included_elements";
    + }
    +
    function "scripts"
    {
    | //(function(){
    @@ -324,17 +359,20 @@
    | ]
    |
    +
    | var page_desc = {
    foreach "$hmi_pages" {
    const "desc", "func:parselabel(@inkscape:label)/widget";
    - const "page", ".";
    - const "p", "$hmi_geometry[@Id = $page/@id]";
    - const "page_ids","""$hmi_geometry[@Id != $page/@id and
    - @x >= $p/@x and @y >= $p/@y and
    - @x+@w <= $p/@x+$p/@w and @y+@h <= $p/@y+$p/@h]/@Id""";
    - const "page_sub_ids", "func:refered_elements($page)[@id = $hmi_elements/@id]/@id";
    - const "all_page_ids","$page_ids | $page_sub_ids[not(. = $page_ids)]";
    + const "page", ".";
    + const "p", "$geometry[@Id = $page/@id]";
    +
    + const "page_all_elements", "func:all_related_elements($page)";
    +
    + const "all_page_ids","$page_all_elements[@id = $hmi_elements/@id and @id != $page/@id]/@id";
    +
    + const "shorter_list", "func:sumarized_elements($page_all_elements)";
    +
    | "«$desc/arg[1]/@value»": {
    | widget: hmi_widgets["«@id»"],
    | bbox: [«$p/@x», «$p/@y», «$p/@w», «$p/@h»],
    @@ -343,6 +381,11 @@
    | hmi_widgets["«.»"]`if "position()!=last()" > ,`
    }
    | ]
    + | required_elements: [
    + foreach "$shorter_list" {
    + | "«@id»",
    + }
    + | ]
    | }`if "position()!=last()" > ,`
    }
    | }
    --- a/svghmi/svghmi.js Fri Feb 21 16:22:44 2020 +0100
    +++ b/svghmi/svghmi.js Thu Feb 27 13:14:24 2020 +0100
    @@ -217,33 +217,50 @@
    var current_page;
    +function prepare_svg() {
    + /* set everybody hidden initially for better performance */
    + for(let widget in hmi_widgets){
    + if(widget.element != undefined)
    + widget.element.style.display = "none";
    + }
    + /*for(let name in page_desc){
    + if(name != new_desc){
    + page_desc[name].widget.element.style.display = "none";
    + }
    + }*/
    +};
    +
    function switch_page(page_name) {
    let old_desc = page_desc[current_page];
    let new_desc = page_desc[page_name];
    if(new_desc == undefined){
    + /* TODO LOG ERROR */
    return;
    }
    - /* remove subsribers of previous page if any */
    if(old_desc){
    for(let widget of old_desc.widgets){
    +
    + /* hide widget */
    + if(widget.element != undefined)
    + widget.element.style.display = "none";
    +
    + /* remove subsribers */
    for(let index of widget.indexes){
    subscribers[index].delete(widget);
    }
    }
    old_desc.widget.element.style.display = "none";
    - } else {
    - /* initial page switch : set everybody hidden */
    - for(let name in page_desc){
    - if(name != new_desc){
    - page_desc[name].widget.element.style.display = "none";
    - }
    - }
    }
    - /* add new subsribers if any */
    for(let widget of new_desc.widgets){
    +
    + /* unhide widget */
    + if(widget.element != undefined)
    + widget.element.style.display = "inline";
    +
    + /* add widget's subsribers */
    for(let index of widget.indexes){
    subscribers[index].add(widget);
    /* dispatch current cache in newly opened page widgets */
    @@ -267,6 +284,7 @@
    init_widgets();
    send_reset();
    // show main page
    + prepare_svg();
    switch_page(default_page);
    };