# HG changeset patch
# User Edouard Tisserant
# Date 1655286408 -7200
# Node ID dacf329abdd93baf1b29fc9a34038c6d31eb6b32
# Parent d3cf85a3c282a791a671be62d54e9090f12bd199
SVGHMI: update generated xslt files
diff -r d3cf85a3c282 -r dacf329abdd9 svghmi/gen_index_xhtml.xslt
--- a/svghmi/gen_index_xhtml.xslt Wed Jun 15 11:43:51 2022 +0200
+++ b/svghmi/gen_index_xhtml.xslt Wed Jun 15 11:46:48 2022 +0200
@@ -1,5 +1,5 @@
<?xml version="1.0"?>
-<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:exsl="http://exslt.org/common" xmlns:regexp="http://exslt.org/regular-expressions" xmlns:str="http://exslt.org/strings" xmlns:func="http://exslt.org/functions" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:debug="debug" xmlns:preamble="preamble" xmlns:declarations="declarations" xmlns:definitions="definitions" xmlns:epilogue="epilogue" xmlns:ns="beremiz" version="1.0" extension-element-prefixes="ns func exsl regexp str dyn" exclude-result-prefixes="ns func exsl regexp str dyn debug preamble epilogue declarations definitions">
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:exsl="http://exslt.org/common" xmlns:regexp="http://exslt.org/regular-expressions" xmlns:str="http://exslt.org/strings" xmlns:func="http://exslt.org/functions" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:debug="debug" xmlns:preamble="preamble" xmlns:declarations="declarations" xmlns:definitions="definitions" xmlns:epilogue="epilogue" xmlns:cssdefs="cssdefs" xmlns:ns="beremiz" version="1.0" extension-element-prefixes="ns func exsl regexp str dyn" exclude-result-prefixes="ns func exsl regexp str dyn debug preamble epilogue declarations definitions">
<xsl:output cdata-section-elements="xhtml:script" method="xml"/>
<xsl:variable name="svg" select="/svg:svg"/>
<xsl:variable name="hmi_elements" select="//svg:*[starts-with(@inkscape:label, 'HMI:')]"/>
@@ -5442,13 +5442,11 @@
</xsl:text>
<xsl:text> would be an HMI_TREE index and then jump to a relative page not hard-coded in advance */
</xsl:text>
- <xsl:text>
-</xsl:text>
<xsl:text> if(!that.disabled) {
</xsl:text>
<xsl:text> const index = that.indexes.length > 0 ? that.indexes[0] + that.offset : undefined;
</xsl:text>
- <xsl:text> switch_page(name, index);
+ <xsl:text> fading_page_switch(name, index);
</xsl:text>
<xsl:text> }
</xsl:text>
@@ -5579,6 +5577,37 @@
</xsl:if>
</xsl:if>
</xsl:template>
+ <cssdefs:jump/>
+ <xsl:template match="cssdefs:jump">
+ <xsl:text>
+</xsl:text>
+ <xsl:text>/* </xsl:text>
+ <xsl:value-of select="local-name()"/>
+ <xsl:text> */
+</xsl:text>
+ <xsl:text>
+</xsl:text>
+ <xsl:text>.fade-out-page {
+</xsl:text>
+ <xsl:text> animation: fadeOut 0.6s both;
+</xsl:text>
+ <xsl:text>}
+</xsl:text>
+ <xsl:text>
+</xsl:text>
+ <xsl:text>@keyframes fadeOut {
+</xsl:text>
+ <xsl:text> 0% { opacity: 1; }
+</xsl:text>
+ <xsl:text> 100% { opacity: 0; }
+</xsl:text>
+ <xsl:text>}
+</xsl:text>
+ <xsl:text>
+</xsl:text>
+ <xsl:text>
+</xsl:text>
+ </xsl:template>
<declarations:jump/>
<xsl:template match="declarations:jump">
<xsl:text>
@@ -7590,17 +7619,51 @@
</xsl:text>
<xsl:text> frequency = 5;
</xsl:text>
+ <xsl:text> current_value = undefined;
+</xsl:text>
+ <xsl:text>
+</xsl:text>
+ <xsl:text> init(){
+</xsl:text>
+ <xsl:text> this.animate();
+</xsl:text>
+ <xsl:text> }
+</xsl:text>
+ <xsl:text>
+</xsl:text>
<xsl:text> dispatch(value) {
</xsl:text>
+ <xsl:text> this.current_value = value;
+</xsl:text>
+ <xsl:text> this.request_animate();
+</xsl:text>
+ <xsl:text> }
+</xsl:text>
+ <xsl:text>
+</xsl:text>
+ <xsl:text> animate(){
+</xsl:text>
<xsl:text> for(let choice of this.choices){
</xsl:text>
- <xsl:text> if(value != choice.value){
-</xsl:text>
- <xsl:text> choice.elt.setAttribute("style", "display:none");
+ <xsl:text> if(this.current_value != choice.value){
+</xsl:text>
+ <xsl:text> if(choice.parent == undefined){
+</xsl:text>
+ <xsl:text> choice.parent = choice.elt.parentElement;
+</xsl:text>
+ <xsl:text> choice.parent.removeChild(choice.elt);
+</xsl:text>
+ <xsl:text> }
</xsl:text>
<xsl:text> } else {
</xsl:text>
- <xsl:text> choice.elt.setAttribute("style", choice.style);
+ <xsl:text> if(choice.parent != undefined){
+</xsl:text>
+ <xsl:text> choice.parent.appendChild(choice.elt);
+</xsl:text>
+ <xsl:text> choice.parent = undefined;
+</xsl:text>
+ <xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
@@ -7627,9 +7690,7 @@
<xsl:value-of select="@id"/>
<xsl:text>"),
</xsl:text>
- <xsl:text> style:"</xsl:text>
- <xsl:value-of select="@style"/>
- <xsl:text>",
+ <xsl:text> parent:undefined,
</xsl:text>
<xsl:text> value:</xsl:text>
<xsl:value-of select="$literal"/>
@@ -9179,6 +9240,7 @@
<head>
<style type="text/css" media="screen">
<xsl:value-of select="ns:GetFonts()"/>
+ <xsl:apply-templates select="document('')/*/cssdefs:*"/>
</style>
</head>
<body style="margin:0;overflow:hidden;user-select:none;touch-action:none;">
@@ -10614,6 +10676,30 @@
</xsl:text>
<xsl:text>
</xsl:text>
+ <xsl:text>
+</xsl:text>
+ <xsl:text>var page_fading_in_progress = false;
+</xsl:text>
+ <xsl:text>function fading_page_switch(...args){
+</xsl:text>
+ <xsl:text> svg_root.classList.add("fade-out-page");
+</xsl:text>
+ <xsl:text> page_fading_in_progress = true;
+</xsl:text>
+ <xsl:text>
+</xsl:text>
+ <xsl:text> setTimeout(function(){
+</xsl:text>
+ <xsl:text> switch_page(...args);
+</xsl:text>
+ <xsl:text> },1);
+</xsl:text>
+ <xsl:text>}
+</xsl:text>
+ <xsl:text>document.body.style.backgroundColor = "black";
+</xsl:text>
+ <xsl:text>
+</xsl:text>
<xsl:text>// subscribe to per instance current page hmi variable
</xsl:text>
<xsl:text>// PLC must prefix page name with "!" for page switch to happen
@@ -10628,7 +10714,7 @@
</xsl:text>
<xsl:text> if(value.startsWith("!"))
</xsl:text>
- <xsl:text> switch_page(value.slice(1));
+ <xsl:text> fading_page_switch(value.slice(1));
</xsl:text>
<xsl:text> }
</xsl:text>
@@ -11214,6 +11300,12 @@
</xsl:text>
<xsl:text> svg_root.setAttribute('viewBox',new_desc.bbox.join(" "));
</xsl:text>
+ <xsl:text> if(page_fading_in_progress)
+</xsl:text>
+ <xsl:text> svg_root.classList.remove("fade-out-page");
+</xsl:text>
+ <xsl:text> page_fading_in_progress = false;
+</xsl:text>
<xsl:text> current_visible_page = page_name;
</xsl:text>
<xsl:text>};