# HG changeset patch # User Edouard Tisserant # Date 1583336763 -3600 # Node ID c7d5f46cc30603e9268f15e5c0524a63f2ec8c11 # Parent 6d39beb19f38196f291b2a39f13f8a4639cc6604 SVGHMI: unlink clones (i.e. deep copy elements refered by svg:use) inside widget. Designer can use Inkscape clones to duplicate similar assets accross widget. Those clones are unliked so that elements can be independently transformed by individual widgets. diff -r 6d39beb19f38 -r c7d5f46cc306 svghmi/gen_index_xhtml.xslt --- a/svghmi/gen_index_xhtml.xslt Wed Mar 04 09:31:53 2020 +0100 +++ b/svghmi/gen_index_xhtml.xslt Wed Mar 04 16:46:03 2020 +0100 @@ -1,5 +1,5 @@ <?xml version="1.0"?> -<xsl:stylesheet xmlns:func="http://exslt.org/functions" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:str="http://exslt.org/strings" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:exsl="http://exslt.org/common" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ns="beremiz" xmlns:cc="http://creativecommons.org/ns#" xmlns:regexp="http://exslt.org/regular-expressions" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:dc="http://purl.org/dc/elements/1.1/" extension-element-prefixes="ns func" version="1.0" exclude-result-prefixes="ns str regexp exsl func"> +<xsl:stylesheet xmlns:func="http://exslt.org/functions" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:str="http://exslt.org/strings" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:exsl="http://exslt.org/common" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ns="beremiz" xmlns:cc="http://creativecommons.org/ns#" xmlns:regexp="http://exslt.org/regular-expressions" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:dc="http://purl.org/dc/elements/1.1/" extension-element-prefixes="ns func exsl regexp str dyn" version="1.0" exclude-result-prefixes="ns str regexp exsl func dyn"> <xsl:output method="xml" cdata-section-elements="xhtml:script"/> <xsl:variable name="geometry" select="ns:GetSVGGeometry()"/> <xsl:variable name="hmitree" select="ns:GetHMITree()"/> @@ -100,9 +100,9 @@ </xsl:otherwise> </xsl:choose> </func:function> - <xsl:variable name="groups" select="/svg:svg | //svg:g"/> <func:function name="func:overlapping_geometry"> <xsl:param name="elt"/> + <xsl:variable name="groups" select="/svg:svg | //svg:g"/> <xsl:variable name="g" select="$geometry[@Id = $elt/@id]"/> <xsl:variable name="candidates" select="$geometry[@Id != $elt/@id]"/> <func:result select="$candidates[(@Id = $groups/@id and (func:intersect($g, .) = 9)) or (not(@Id = $groups/@id) and (func:intersect($g, .) > 0 ))]"/> @@ -130,7 +130,7 @@ <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) and not(@id = $discardable_elements/@id) and not(@id = $short_list/descendant-or-self::*[not(self::svg:g)]/@id) ])]"/> + <xsl:variable name="filled_groups" select="$short_list/parent::svg:*[ not(descendant::*[ not(self::svg:g) and not(@id = $discardable_elements/@id) and 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> @@ -227,6 +227,84 @@ <xsl:text>All units must be set to "px" in Inkscape's document properties</xsl:text> </xsl:message> </xsl:template> + <xsl:variable name="to_unlink" select="$hmi_elements[not(@id = $hmi_pages)]//svg:use"/> + <xsl:template xmlns="http://www.w3.org/2000/svg" mode="inline_svg" match="svg:use"> + <xsl:choose> + <xsl:when test="@id = $to_unlink/@id"> + <xsl:call-template name="unlink_clone"/> + </xsl:when> + <xsl:otherwise> + <xsl:copy> + <xsl:apply-templates mode="inline_svg" select="@* | node()"/> + </xsl:copy> + </xsl:otherwise> + </xsl:choose> + </xsl:template> + <xsl:variable name="_excluded_use_attrs"> + <name> + <xsl:text>href</xsl:text> + </name> + <name> + <xsl:text>width</xsl:text> + </name> + <name> + <xsl:text>height</xsl:text> + </name> + <name> + <xsl:text>x</xsl:text> + </name> + <name> + <xsl:text>y</xsl:text> + </name> + </xsl:variable> + <xsl:variable name="excluded_use_attrs" select="exsl:node-set($_excluded_use_attrs)"/> + <xsl:template xmlns="http://www.w3.org/2000/svg" name="unlink_clone"> + <g> + <xsl:for-each select="@*[not(local-name() = $excluded_use_attrs/name)]"> + <xsl:attribute name="{name()}"> + <xsl:value-of select="."/> + </xsl:attribute> + </xsl:for-each> + <xsl:variable name="targetid" select="substring-after(@xlink:href,'#')"/> + <xsl:apply-templates mode="unlink_clone" select="//svg:*[@id = $targetid]"> + <xsl:with-param name="seed" select="@id"/> + </xsl:apply-templates> + </g> + </xsl:template> + <xsl:template xmlns="http://www.w3.org/2000/svg" mode="unlink_clone" match="@id"> + <xsl:param name="seed"/> + <xsl:attribute name="id"> + <xsl:value-of select="$seed"/> + <xsl:text>_</xsl:text> + <xsl:value-of select="."/> + </xsl:attribute> + </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:param name="seed"/> + <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:with-param name="seed" select="$seed"/> + </xsl:apply-templates> + </xsl:copy> + </xsl:otherwise> + </xsl:choose> + </xsl:template> + <xsl:variable name="result_svg"> + <xsl:apply-templates mode="inline_svg" select="/"/> + </xsl:variable> + <xsl:variable name="result_svg_ns" select="exsl:node-set($result_svg)"/> <xsl:template match="/"> <xsl:comment> <xsl:text>Made with SVGHMI. https://beremiz.org</xsl:text> @@ -258,16 +336,21 @@ </xsl:text> </xsl:for-each> </xsl:comment> + <xsl:comment> + <xsl:text>Unlinked : +</xsl:text> + <xsl:for-each select="$to_unlink"> + <xsl:value-of select="@id"/> + <xsl:text> +</xsl:text> + </xsl:for-each> + </xsl:comment> <html xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1999/xhtml"> <head/> <body style="margin:0;overflow:hidden;"> - <xsl:variable name="_result_svg"> - <xsl:apply-templates mode="inline_svg" select="svg:svg"/> - </xsl:variable> - <xsl:copy-of select="$_result_svg"/> - <xsl:variable name="result_svg" select="exsl:node-set($_result_svg)"/> + <xsl:copy-of select="$result_svg"/> <script> - <xsl:apply-templates mode="scripts" select="svg:svg"/> + <xsl:call-template name="scripts"/> </script> </body> </html> @@ -323,7 +406,7 @@ </xsl:variable> <func:result select="exsl:node-set($ast)"/> </func:function> - <xsl:template mode="scripts" match="svg:svg"> + <xsl:template name="scripts"> <xsl:text>//(function(){ </xsl:text> <xsl:text> @@ -386,16 +469,16 @@ </xsl:otherwise> </xsl:choose> </xsl:for-each> - <xsl:text> ], -</xsl:text> - <xsl:text> element: id("</xsl:text> + <xsl:text> ], +</xsl:text> + <xsl:text> element: id("</xsl:text> <xsl:value-of select="@id"/> <xsl:text>"), </xsl:text> <xsl:apply-templates mode="widget_defs" select="$widget"> <xsl:with-param name="hmi_element" select="."/> </xsl:apply-templates> - <xsl:text> }</xsl:text> + <xsl:text> }</xsl:text> <xsl:if test="position()!=last()"> <xsl:text>,</xsl:text> </xsl:if> @@ -1142,12 +1225,10 @@ <xsl:value-of select="$indent"/> <xsl:text> </xsl:text> <xsl:value-of select="local-name()"/> - <xsl:text> </xsl:text> <xsl:for-each select="@*"> <xsl:value-of select="local-name()"/> <xsl:text>=</xsl:text> <xsl:value-of select="."/> - <xsl:text> </xsl:text> </xsl:for-each> <xsl:text> </xsl:text> @@ -1164,7 +1245,7 @@ <xsl:variable name="widget_type" select="@type"/> <xsl:for-each select="str:split($labels)"> <xsl:variable name="name" select="."/> - <xsl:variable name="elt_id" select="$hmi_element//*[@inkscape:label=$name][1]/@id"/> + <xsl:variable name="elt_id" select="$result_svg_ns//*[@id = $hmi_element/@id]//*[@inkscape:label=$name][1]/@id"/> <xsl:choose> <xsl:when test="not($elt_id)"> <xsl:if test="$mandatory='yes'"> diff -r 6d39beb19f38 -r c7d5f46cc306 svghmi/gen_index_xhtml.ysl2 --- a/svghmi/gen_index_xhtml.ysl2 Wed Mar 04 09:31:53 2020 +0100 +++ b/svghmi/gen_index_xhtml.ysl2 Wed Mar 04 16:46:03 2020 +0100 @@ -15,6 +15,7 @@ }; in xsl decl svgtmpl(match, xmlns="http://www.w3.org/2000/svg") alias template; +in xsl decl svgfunc(name, xmlns="http://www.w3.org/2000/svg") alias template; istylesheet /* From Inkscape */ @@ -29,8 +30,8 @@ /* Our namespace to invoke python code */ xmlns:ns="beremiz" - extension-element-prefixes="ns func" - exclude-result-prefixes="ns str regexp exsl func" { + extension-element-prefixes="ns func exsl regexp str dyn" + exclude-result-prefixes="ns str regexp exsl func dyn" { /* This retrieves geometry obtained through "inkscape -S" * already parsed by python and presented as a list of @@ -330,48 +331,89 @@ error > All units must be set to "px" in Inkscape's document properties } - - //// 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; - // //«.» - // } - - // template "svg:*[concat('#',@id) = //svg:use/@xlink:href]/@style", mode="inline_svg"{ - // attrib "style" > all:unset; - // //«.» - // } + + //////////////// Clone Unlinking + + // svg:use (inkscape's clones) inside a widgets are + // replaced by real elements they refer in order to : + // - allow finding "needle" element in "meter" widget, + // even if "needle" is in a group refered by a svg use. + // - if "needle" is visible through a svg:use for + // each instance of the widget, then needle would show + // the same position in all instances + // + // For now, clone unlinkink applies to descendants of all widget except HMI:Page + // TODO: narrow application of clone unlinking to active elements, + // while keeping static decoration cloned + const "to_unlink", "$hmi_elements[not(@id = $hmi_pages)]//svg:use"; + svgtmpl "svg:use", mode="inline_svg" + { + choose { + when "@id = $to_unlink/@id" + call "unlink_clone"; + otherwise + xsl:copy apply "@* | node()", mode="inline_svg"; + } + } + + // to unlink a clone, an group containing a copy of target element is created + // that way, style and transforms can be preserved + const "_excluded_use_attrs" { + name > href + name > width + name > height + name > x + name > y + } + const "excluded_use_attrs","exsl:node-set($_excluded_use_attrs)"; + + svgfunc "unlink_clone"{ + g{ + // include non excluded attributes + foreach "@*[not(local-name() = $excluded_use_attrs/name)]" + attrib "{name()}" > «.» + + const "targetid","substring-after(@xlink:href,'#')"; + apply "//svg:*[@id = $targetid]", mode="unlink_clone"{ + with "seed","@id"; + } + } + } + + // clone unlinking is really similar to deep-copy + // all nodes are sytematically copied + svgtmpl "@id", mode="unlink_clone" { + param "seed"; + attrib "id" > «$seed»_«.» + } + + svgtmpl "@*", mode="unlink_clone" xsl:copy; + + // copying widgets would have unwanted effect + // instead widget is refered through a svg:use. + svgtmpl "svg:*", mode="unlink_clone" { + param "seed"; + choose { + // node recursive copy ends when finding a widget + when "@id = $hmi_elements/@id" { + // place a clone instead of copying + use{ + attrib "xlink:href" > «concat('#',@id)» + } + } + otherwise { + xsl:copy apply "@* | node()", mode="unlink_clone" { + with "seed","$seed"; + } + } + } + } /*const "mark" > =HMI=\n*/ + const "result_svg" apply "/", mode="inline_svg"; + const "result_svg_ns", "exsl:node-set($result_svg)"; + /* copy root node and add geometry as comment for a test */ template "/" { comment > Made with SVGHMI. https://beremiz.org @@ -397,13 +439,19 @@ | «@id» } } + comment { + | Unlinked : + foreach "$to_unlink"{ + | «@id» + } + } /**/ html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" { head; body style="margin:0;overflow:hidden;" { - apply "svg:svg", mode="inline_svg"; + copy "$result_svg"; script{ call "scripts"; } @@ -622,7 +670,7 @@ const "widget_type","@type"; foreach "str:split($labels)" { const "name","."; - const "elt_id","$hmi_element//*[@inkscape:label=$name][1]/@id"; + const "elt_id","$result_svg_ns//*[@id = $hmi_element/@id]//*[@inkscape:label=$name][1]/@id"; choose { when "not($elt_id)" { if "$mandatory='yes'" {