# HG changeset patch
# User Edouard Tisserant <edouard.tisserant@gmail.com>
# Date 1656318364 -7200
# Node ID 074046800624eb03f39a3aa9dbe659eabc72d4de
# Parent  a35bf9c585cfcaf93f455dc6d42acd4cc6efcc1a# Parent  c2f7e9bda366b350cfcb8976a8b14fa9a7835ab2
Merge default in wxPython4 branch

diff -r a35bf9c585cf -r 074046800624 svghmi/analyse_widget.xslt
--- a/svghmi/analyse_widget.xslt	Mon Jun 13 19:22:31 2022 +0200
+++ b/svghmi/analyse_widget.xslt	Mon Jun 27 10:26:04 2022 +0200
@@ -2,7 +2,7 @@
 <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:svg="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.0" extension-element-prefixes="ns func exsl regexp str dyn" exclude-result-prefixes="ns func exsl regexp str dyn svg inkscape">
   <xsl:output method="xml"/>
   <xsl:variable name="indexed_hmitree" select="/.."/>
-  <xsl:variable name="pathregex" select="'^([^\[,]+)(\[[^\]]+\])?([\d,]*)$'"/>
+  <xsl:variable name="pathregex" select="'^([^\[,]+)(\[[^\]]+\])?([-.\d,]*)$'"/>
   <xsl:template mode="parselabel" match="*">
     <xsl:variable name="label" select="@inkscape:label"/>
     <xsl:variable name="id" select="@id"/>
@@ -263,25 +263,7 @@
     <xsl:apply-templates mode="actions" select="$fsm"/>
     <xsl:text>    animate(){
 </xsl:text>
-    <xsl:text>        if (this.active_elt &amp;&amp; this.inactive_elt) {
-</xsl:text>
-    <xsl:for-each select="str:split('active inactive')">
-      <xsl:text>            if(this.display == "</xsl:text>
-      <xsl:value-of select="."/>
-      <xsl:text>")
-</xsl:text>
-      <xsl:text>                this.</xsl:text>
-      <xsl:value-of select="."/>
-      <xsl:text>_elt.style.display = "";
-</xsl:text>
-      <xsl:text>            else
-</xsl:text>
-      <xsl:text>                this.</xsl:text>
-      <xsl:value-of select="."/>
-      <xsl:text>_elt.style.display = "none";
-</xsl:text>
-    </xsl:for-each>
-    <xsl:text>        }
+    <xsl:text>        this.set_activation_state(this.display == "active");
 </xsl:text>
     <xsl:text>    }
 </xsl:text>
@@ -291,6 +273,8 @@
 </xsl:text>
     <xsl:text>        this.element.addEventListener("pointerdown", this.onmousedown.bind(this));
 </xsl:text>
+    <xsl:text>        this.set_activation_state(undefined);
+</xsl:text>
     <xsl:text>    }
 </xsl:text>
   </xsl:template>
@@ -411,7 +395,7 @@
 </xsl:text>
     </longdesc>
     <shortdesc>
-      <xsl:text>Printf-like formated text display </xsl:text>
+      <xsl:text>Printf-like formated text display</xsl:text>
     </shortdesc>
     <arg name="format" count="optional" accepts="string">
       <xsl:text>printf-like format string when not given as svg:text</xsl:text>
@@ -885,6 +869,73 @@
       <xsl:text>Boolean variable</xsl:text>
     </path>
   </xsl:template>
+  <xsl:template match="widget[@type='XYGraph']" mode="widget_desc">
+    <type>
+      <xsl:value-of select="@type"/>
+    </type>
+    <longdesc>
+      <xsl:text>XYGraph draws a cartesian trend graph re-using styles given for axis,
+</xsl:text>
+      <xsl:text>grid/marks, legends and curves.
+</xsl:text>
+      <xsl:text>
+</xsl:text>
+      <xsl:text>Elements labeled "x_axis" and "y_axis" are svg:groups containg:
+</xsl:text>
+      <xsl:text> - "axis_label" svg:text gives style an alignment for axis labels.
+</xsl:text>
+      <xsl:text> - "interval_major_mark" and "interval_minor_mark" are svg elements to be
+</xsl:text>
+      <xsl:text>   duplicated along axis line to form intervals marks.
+</xsl:text>
+      <xsl:text> - "axis_line"  svg:path is the axis line. Paths must be intersect and their
+</xsl:text>
+      <xsl:text>   bounding box is the chart wall.
+</xsl:text>
+      <xsl:text>
+</xsl:text>
+      <xsl:text>Elements labeled "curve_0", "curve_1", ... are paths whose styles are used
+</xsl:text>
+      <xsl:text>to draw curves corresponding to data from variables passed as HMI tree paths.
+</xsl:text>
+      <xsl:text>"curve_0" is mandatory. HMI variables outnumbering given curves are ignored.
+</xsl:text>
+      <xsl:text>
+</xsl:text>
+    </longdesc>
+    <shortdesc>
+      <xsl:text>Cartesian trend graph showing values of given variables over time</xsl:text>
+    </shortdesc>
+    <path name="value" count="1+" accepts="HMI_INT,HMI_REAL">
+      <xsl:text>value</xsl:text>
+    </path>
+    <arg name="xrange" accepts="int,time">
+      <xsl:text>X axis range expressed either in samples or duration.</xsl:text>
+    </arg>
+    <arg name="xformat" count="optional" accepts="string">
+      <xsl:text>format string for X label</xsl:text>
+    </arg>
+    <arg name="yformat" count="optional" accepts="string">
+      <xsl:text>format string for Y label</xsl:text>
+    </arg>
+  </xsl:template>
+  <func:function name="func:check_curves_label_consistency">
+    <xsl:param name="curve_elts"/>
+    <xsl:param name="number_to_check"/>
+    <xsl:variable name="res">
+      <xsl:choose>
+        <xsl:when test="$curve_elts[@inkscape:label = concat('curve_', string($number_to_check))]">
+          <xsl:if test="$number_to_check &gt; 0">
+            <xsl:value-of select="func:check_curves_label_consistency($curve_elts, $number_to_check - 1)"/>
+          </xsl:if>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:value-of select="concat('missing curve_', string($number_to_check))"/>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:variable>
+    <func:result select="$res"/>
+  </func:function>
   <xsl:template mode="document" match="@* | node()">
     <xsl:copy>
       <xsl:apply-templates mode="document" select="@* | node()"/>
diff -r a35bf9c585cf -r 074046800624 svghmi/gen_dnd_widget_svg.xslt
--- a/svghmi/gen_dnd_widget_svg.xslt	Mon Jun 13 19:22:31 2022 +0200
+++ b/svghmi/gen_dnd_widget_svg.xslt	Mon Jun 27 10:26:04 2022 +0200
@@ -4,7 +4,7 @@
   <xsl:variable name="hmi_elements" select="//svg:*[starts-with(@inkscape:label, 'HMI:')]"/>
   <xsl:variable name="widgetparams" select="ns:GetWidgetParams()"/>
   <xsl:variable name="indexed_hmitree" select="/.."/>
-  <xsl:variable name="pathregex" select="'^([^\[,]+)(\[[^\]]+\])?([\d,]*)$'"/>
+  <xsl:variable name="pathregex" select="'^([^\[,]+)(\[[^\]]+\])?([-.\d,]*)$'"/>
   <xsl:template mode="parselabel" match="*">
     <xsl:variable name="label" select="@inkscape:label"/>
     <xsl:variable name="id" select="@id"/>
diff -r a35bf9c585cf -r 074046800624 svghmi/gen_index_xhtml.xslt
--- a/svghmi/gen_index_xhtml.xslt	Mon Jun 13 19:22:31 2022 +0200
+++ b/svghmi/gen_index_xhtml.xslt	Mon Jun 27 10:26:04 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:')]"/>
@@ -159,7 +159,7 @@
       </xsl:with-param>
     </xsl:apply-templates>
   </xsl:template>
-  <xsl:variable name="pathregex" select="'^([^\[,]+)(\[[^\]]+\])?([\d,]*)$'"/>
+  <xsl:variable name="pathregex" select="'^([^\[,]+)(\[[^\]]+\])?([-.\d,]*)$'"/>
   <xsl:template mode="parselabel" match="*">
     <xsl:variable name="label" select="@inkscape:label"/>
     <xsl:variable name="id" select="@id"/>
@@ -1108,6 +1108,11 @@
       <xsl:attribute name="label">
         <xsl:value-of select="substring(@inkscape:label,2)"/>
       </xsl:attribute>
+      <xsl:if test="string-length(text()) &gt; 0">
+        <line>
+          <xsl:value-of select="text()"/>
+        </line>
+      </xsl:if>
       <xsl:apply-templates mode="extract_i18n" select="svg:*"/>
     </msg>
   </xsl:template>
@@ -1453,6 +1458,72 @@
 </xsl:text>
     <xsl:text>
 </xsl:text>
+    <xsl:text>function _hide(elt, placeholder){
+</xsl:text>
+    <xsl:text>    if(elt.parentNode != null)
+</xsl:text>
+    <xsl:text>        placeholder.parentNode.removeChild(elt);
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+    <xsl:text>function _show(elt, placeholder){
+</xsl:text>
+    <xsl:text>    placeholder.parentNode.insertBefore(elt, placeholder);
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>function set_activation_state(eltsub, state){
+</xsl:text>
+    <xsl:text>    if(eltsub.active_elt != undefined){
+</xsl:text>
+    <xsl:text>        if(eltsub.active_elt_placeholder == undefined){
+</xsl:text>
+    <xsl:text>            eltsub.active_elt_placeholder = document.createComment("");
+</xsl:text>
+    <xsl:text>            eltsub.active_elt.parentNode.insertBefore(eltsub.active_elt_placeholder, eltsub.active_elt);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        (state?_show:_hide)(eltsub.active_elt, eltsub.active_elt_placeholder);
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>    if(eltsub.inactive_elt != undefined){
+</xsl:text>
+    <xsl:text>        if(eltsub.inactive_elt_placeholder == undefined){
+</xsl:text>
+    <xsl:text>            eltsub.inactive_elt_placeholder = document.createComment("");
+</xsl:text>
+    <xsl:text>            eltsub.inactive_elt.parentNode.insertBefore(eltsub.inactive_elt_placeholder, eltsub.inactive_elt);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        ((state || state==undefined)?_hide:_show)(eltsub.inactive_elt, eltsub.inactive_elt_placeholder);
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>function activate_activable(eltsub) {
+</xsl:text>
+    <xsl:text>    set_activation_state(eltsub, true);
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>function inactivate_activable(eltsub) {
+</xsl:text>
+    <xsl:text>    set_activation_state(eltsub, false);
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+    <xsl:text>
+</xsl:text>
     <xsl:text>class Widget {
 </xsl:text>
     <xsl:text>    offset = 0;
@@ -1485,7 +1556,19 @@
 </xsl:text>
     <xsl:text>        this.pending = indexes.map(() =&gt; undefined);
 </xsl:text>
-    <xsl:text>        this.bound_unhinibit = this.unhinibit.bind(this);
+    <xsl:text>        this.bound_uninhibit = this.uninhibit.bind(this);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        this.lastdispatch = indexes.map(() =&gt; undefined);
+</xsl:text>
+    <xsl:text>        this.deafen = indexes.map(() =&gt; undefined);
+</xsl:text>
+    <xsl:text>        this.incoming = indexes.map(() =&gt; undefined);
+</xsl:text>
+    <xsl:text>        this.bound_undeafen = this.undeafen.bind(this);
+</xsl:text>
+    <xsl:text>
 </xsl:text>
     <xsl:text>        this.forced_frequency = freq;
 </xsl:text>
@@ -1573,10 +1656,22 @@
 </xsl:text>
     <xsl:text>                    this.lastapply[i] = undefined;
 </xsl:text>
-    <xsl:text>                    this.unhinibit(i);
+    <xsl:text>                    this.uninhibit(i);
 </xsl:text>
     <xsl:text>                }
 </xsl:text>
+    <xsl:text>                let deafened = this.deafen[i];
+</xsl:text>
+    <xsl:text>                if(deafened != undefined){
+</xsl:text>
+    <xsl:text>                    clearTimeout(deafened);
+</xsl:text>
+    <xsl:text>                    this.lastdispatch[i] = undefined;
+</xsl:text>
+    <xsl:text>                    this.undeafen(i);
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
     <xsl:text>                let index = this.indexes[i];
 </xsl:text>
     <xsl:text>                if(this.relativeness[i])
@@ -1749,7 +1844,7 @@
 </xsl:text>
     <xsl:text>
 </xsl:text>
-    <xsl:text>    unhinibit(index){
+    <xsl:text>    uninhibit(index){
 </xsl:text>
     <xsl:text>        this.inhibit[index] = undefined;
 </xsl:text>
@@ -1787,7 +1882,7 @@
 </xsl:text>
     <xsl:text>                this.pending[index] = new_val;
 </xsl:text>
-    <xsl:text>                this.inhibit[index] = setTimeout(this.bound_unhinibit, min_interval - elapsed, index);
+    <xsl:text>                this.inhibit[index] = setTimeout(this.bound_uninhibit, min_interval - elapsed, index);
 </xsl:text>
     <xsl:text>            }
 </xsl:text>
@@ -1831,22 +1926,68 @@
 </xsl:text>
     <xsl:text>    
 </xsl:text>
+    <xsl:text>    undeafen(index){
+</xsl:text>
+    <xsl:text>        this.deafen[index] = undefined;
+</xsl:text>
+    <xsl:text>        let [new_val, old_val] = this.incoming[index];
+</xsl:text>
+    <xsl:text>        this.incoming[index] = undefined;
+</xsl:text>
+    <xsl:text>        this.dispatch(new_val, old_val, index);
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
     <xsl:text>    _dispatch(value, oldval, varnum) {
 </xsl:text>
     <xsl:text>        let dispatch = this.dispatch;
 </xsl:text>
     <xsl:text>        if(dispatch != undefined){
 </xsl:text>
-    <xsl:text>            try {
-</xsl:text>
-    <xsl:text>                dispatch.call(this, value, oldval, varnum);
-</xsl:text>
-    <xsl:text>            } catch(err) {
-</xsl:text>
-    <xsl:text>                console.log(err);
+    <xsl:text>            if(this.deafen[varnum] == undefined){
+</xsl:text>
+    <xsl:text>                let now = Date.now();
+</xsl:text>
+    <xsl:text>                let min_interval = 1000/this.frequency;
+</xsl:text>
+    <xsl:text>                let lastdispatch = this.lastdispatch[varnum];
+</xsl:text>
+    <xsl:text>                if(lastdispatch == undefined || now &gt; lastdispatch + min_interval){
+</xsl:text>
+    <xsl:text>                    this.lastdispatch[varnum] = now;
+</xsl:text>
+    <xsl:text>                    try {
+</xsl:text>
+    <xsl:text>                        dispatch.call(this, value, oldval, varnum);
+</xsl:text>
+    <xsl:text>                    } catch(err) {
+</xsl:text>
+    <xsl:text>                        console.log(err);
+</xsl:text>
+    <xsl:text>                    }
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                else {
+</xsl:text>
+    <xsl:text>                    let elapsed = now - lastdispatch;
+</xsl:text>
+    <xsl:text>                    this.incoming[varnum] = [value, oldval];
+</xsl:text>
+    <xsl:text>                    this.deafen[varnum] = setTimeout(this.bound_undeafen, min_interval - elapsed, varnum);
+</xsl:text>
+    <xsl:text>                }
 </xsl:text>
     <xsl:text>            }
 </xsl:text>
+    <xsl:text>            else {
+</xsl:text>
+    <xsl:text>                this.incoming[varnum] = [value, oldval];
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
     <xsl:text>        }
 </xsl:text>
     <xsl:text>    }
@@ -1875,27 +2016,13 @@
 </xsl:text>
     <xsl:text>        }
 </xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>    }
-</xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>    activate_activable(eltsub) {
-</xsl:text>
-    <xsl:text>        eltsub.inactive.style.display = "none";
-</xsl:text>
-    <xsl:text>        eltsub.active.style.display = "";
-</xsl:text>
-    <xsl:text>    }
-</xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>    inactivate_activable(eltsub) {
-</xsl:text>
-    <xsl:text>        eltsub.active.style.display = "none";
-</xsl:text>
-    <xsl:text>        eltsub.inactive.style.display = "";
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    set_activation_state(state){
+</xsl:text>
+    <xsl:text>        set_activation_state(this.activable_sub, state);
 </xsl:text>
     <xsl:text>    }
 </xsl:text>
@@ -1960,6 +2087,7 @@
     <xsl:param name="subelements" select="/.."/>
     <xsl:param name="hmi_element"/>
     <xsl:variable name="widget_type" select="@type"/>
+    <xsl:variable name="widget_id" select="@id"/>
     <xsl:for-each select="str:split($labels)">
       <xsl:variable name="absolute" select="starts-with(., '/')"/>
       <xsl:variable name="name" select="substring(.,number($absolute)+1)"/>
@@ -1967,13 +2095,27 @@
       <xsl:variable name="elt" select="($widget//*[not($absolute) and @inkscape:label=$name] | $widget/*[$absolute and @inkscape:label=$name])[1]"/>
       <xsl:choose>
         <xsl:when test="not($elt/@id)">
-          <xsl:if test="$mandatory='yes'">
-            <xsl:message terminate="yes">
+          <xsl:if test="$mandatory!='no'">
+            <xsl:variable name="errmsg">
               <xsl:value-of select="$widget_type"/>
-              <xsl:text> widget must have a </xsl:text>
+              <xsl:text> widget (id=</xsl:text>
+              <xsl:value-of select="$widget_id"/>
+              <xsl:text>) must have a </xsl:text>
               <xsl:value-of select="$name"/>
               <xsl:text> element</xsl:text>
-            </xsl:message>
+            </xsl:variable>
+            <xsl:choose>
+              <xsl:when test="$mandatory='yes'">
+                <xsl:message terminate="yes">
+                  <xsl:value-of select="$errmsg"/>
+                </xsl:message>
+              </xsl:when>
+              <xsl:otherwise>
+                <xsl:message terminate="no">
+                  <xsl:value-of select="$errmsg"/>
+                </xsl:message>
+              </xsl:otherwise>
+            </xsl:choose>
           </xsl:if>
         </xsl:when>
         <xsl:otherwise>
@@ -1993,15 +2135,29 @@
               <xsl:variable name="subelt" select="$elt/*[@inkscape:label=$subname][1]"/>
               <xsl:choose>
                 <xsl:when test="not($subelt/@id)">
-                  <xsl:if test="$mandatory='yes'">
-                    <xsl:message terminate="yes">
+                  <xsl:if test="$mandatory!='no'">
+                    <xsl:variable name="errmsg">
                       <xsl:value-of select="$widget_type"/>
-                      <xsl:text> widget must have a </xsl:text>
+                      <xsl:text> widget (id=</xsl:text>
+                      <xsl:value-of select="$widget_id"/>
+                      <xsl:text>) must have a </xsl:text>
                       <xsl:value-of select="$name"/>
                       <xsl:text>/</xsl:text>
                       <xsl:value-of select="$subname"/>
                       <xsl:text> element</xsl:text>
-                    </xsl:message>
+                    </xsl:variable>
+                    <xsl:choose>
+                      <xsl:when test="$mandatory='yes'">
+                        <xsl:message terminate="yes">
+                          <xsl:value-of select="$errmsg"/>
+                        </xsl:message>
+                      </xsl:when>
+                      <xsl:otherwise>
+                        <xsl:message terminate="no">
+                          <xsl:value-of select="$errmsg"/>
+                        </xsl:message>
+                      </xsl:otherwise>
+                    </xsl:choose>
                   </xsl:if>
                   <xsl:text>        /* missing </xsl:text>
                   <xsl:value-of select="$name"/>
@@ -2013,7 +2169,7 @@
                 <xsl:otherwise>
                   <xsl:text>        "</xsl:text>
                   <xsl:value-of select="$subname"/>
-                  <xsl:text>": id("</xsl:text>
+                  <xsl:text>_elt": id("</xsl:text>
                   <xsl:value-of select="$subelt/@id"/>
                   <xsl:text>")</xsl:text>
                   <xsl:if test="position()!=last()">
@@ -2530,25 +2686,7 @@
     <xsl:apply-templates mode="actions" select="$fsm"/>
     <xsl:text>    animate(){
 </xsl:text>
-    <xsl:text>        if (this.active_elt &amp;&amp; this.inactive_elt) {
-</xsl:text>
-    <xsl:for-each select="str:split('active inactive')">
-      <xsl:text>            if(this.display == "</xsl:text>
-      <xsl:value-of select="."/>
-      <xsl:text>")
-</xsl:text>
-      <xsl:text>                this.</xsl:text>
-      <xsl:value-of select="."/>
-      <xsl:text>_elt.style.display = "";
-</xsl:text>
-      <xsl:text>            else
-</xsl:text>
-      <xsl:text>                this.</xsl:text>
-      <xsl:value-of select="."/>
-      <xsl:text>_elt.style.display = "none";
-</xsl:text>
-    </xsl:for-each>
-    <xsl:text>        }
+    <xsl:text>        this.set_activation_state(this.display == "active");
 </xsl:text>
     <xsl:text>    }
 </xsl:text>
@@ -2558,6 +2696,8 @@
 </xsl:text>
     <xsl:text>        this.element.addEventListener("pointerdown", this.onmousedown.bind(this));
 </xsl:text>
+    <xsl:text>        this.set_activation_state(undefined);
+</xsl:text>
     <xsl:text>    }
 </xsl:text>
   </xsl:template>
@@ -2577,13 +2717,17 @@
   </xsl:template>
   <xsl:template match="widget[@type='Button']" mode="widget_defs">
     <xsl:param name="hmi_element"/>
+    <xsl:text>    activable_sub:{
+</xsl:text>
     <xsl:call-template name="defs_by_labels">
       <xsl:with-param name="hmi_element" select="$hmi_element"/>
       <xsl:with-param name="labels">
-        <xsl:text>active inactive</xsl:text>
+        <xsl:text>/active /inactive</xsl:text>
       </xsl:with-param>
-      <xsl:with-param name="mandatory" select="'no'"/>
+      <xsl:with-param name="mandatory" select="'warn'"/>
     </xsl:call-template>
+    <xsl:text>    }
+</xsl:text>
   </xsl:template>
   <xsl:template match="widget[@type='PushButton']" mode="widget_class">
     <xsl:text>class </xsl:text>
@@ -2601,13 +2745,17 @@
   </xsl:template>
   <xsl:template match="widget[@type='PushButton']" mode="widget_defs">
     <xsl:param name="hmi_element"/>
+    <xsl:text>    activable_sub:{
+</xsl:text>
     <xsl:call-template name="defs_by_labels">
       <xsl:with-param name="hmi_element" select="$hmi_element"/>
       <xsl:with-param name="labels">
-        <xsl:text>active inactive</xsl:text>
+        <xsl:text>/active /inactive</xsl:text>
       </xsl:with-param>
-      <xsl:with-param name="mandatory" select="'no'"/>
+      <xsl:with-param name="mandatory" select="'warn'"/>
     </xsl:call-template>
+    <xsl:text>    }
+</xsl:text>
   </xsl:template>
   <xsl:template match="widget[@type='CircularBar']" mode="widget_desc">
     <type>
@@ -3377,7 +3525,7 @@
 </xsl:text>
     </longdesc>
     <shortdesc>
-      <xsl:text>Printf-like formated text display </xsl:text>
+      <xsl:text>Printf-like formated text display</xsl:text>
     </shortdesc>
     <arg name="format" count="optional" accepts="string">
       <xsl:text>printf-like format string when not given as svg:text</xsl:text>
@@ -3395,7 +3543,15 @@
 </xsl:text>
     <xsl:text>    dispatch(value, oldval, index) {
 </xsl:text>
-    <xsl:text>        this.fields[index] = value;    
+    <xsl:text>        this.fields[index] = value;
+</xsl:text>
+    <xsl:text>        if(!this.ready){
+</xsl:text>
+    <xsl:text>            this.readyfields[index] = true;
+</xsl:text>
+    <xsl:text>            this.ready = this.readyfields.every(x=&gt;x);
+</xsl:text>
+    <xsl:text>        }
 </xsl:text>
     <xsl:text>        this.request_animate();
 </xsl:text>
@@ -3443,6 +3599,20 @@
     <xsl:value-of select="$field_initializer"/>
     <xsl:text>],
 </xsl:text>
+    <xsl:variable name="readyfield_initializer">
+      <xsl:for-each select="path">
+        <xsl:text>false</xsl:text>
+        <xsl:if test="position()!=last()">
+          <xsl:text>,</xsl:text>
+        </xsl:if>
+      </xsl:for-each>
+    </xsl:variable>
+    <xsl:text>    readyfields: [</xsl:text>
+    <xsl:value-of select="$readyfield_initializer"/>
+    <xsl:text>],
+</xsl:text>
+    <xsl:text>    ready: false,
+</xsl:text>
     <xsl:text>    animate: function(){
 </xsl:text>
     <xsl:choose>
@@ -3457,28 +3627,30 @@
 </xsl:text>
         <xsl:text>      let str = vsprintf(this.format,this.fields);
 </xsl:text>
-        <xsl:text>      multiline_to_svg_text(this.format_elt, str);
+        <xsl:text>      multiline_to_svg_text(this.format_elt, str, !this.ready);
 </xsl:text>
       </xsl:when>
       <xsl:otherwise>
         <xsl:text>      let str = this.args.length == 1 ? vsprintf(this.args[0],this.fields) : this.fields.join(' ');
 </xsl:text>
-        <xsl:text>      multiline_to_svg_text(this.element, str);
+        <xsl:text>      multiline_to_svg_text(this.element, str, !this.ready);
 </xsl:text>
       </xsl:otherwise>
     </xsl:choose>
     <xsl:text>    },
 </xsl:text>
-    <xsl:text>    
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    init: function() {
 </xsl:text>
     <xsl:if test="$has_format">
-      <xsl:text>    init: function() {
-</xsl:text>
       <xsl:text>      this.format = svg_text_to_multiline(this.format_elt);
 </xsl:text>
-      <xsl:text>    },
-</xsl:text>
     </xsl:if>
+    <xsl:text>      this.animate();
+</xsl:text>
+    <xsl:text>    },
+</xsl:text>
   </xsl:template>
   <xsl:template match="widget[@type='DropDown']" mode="widget_desc">
     <type>
@@ -4211,7 +4383,7 @@
         <xsl:value-of select="$text_elt/@id"/>
         <xsl:text>");
 </xsl:text>
-        <xsl:text>  this.content = langs;
+        <xsl:text>  this.content = langs.map(([lname,lcode]) =&gt; lname);
 </xsl:text>
       </xsl:when>
       <xsl:when test="count(arg) = 0">
@@ -4677,6 +4849,10 @@
 </xsl:text>
     <xsl:text>     }
 </xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>     display = "";
+</xsl:text>
     <xsl:text>}
 </xsl:text>
   </xsl:template>
@@ -4757,6 +4933,8 @@
         <xsl:text>        this.value_elt.style.pointerEvents = "none";
 </xsl:text>
       </xsl:if>
+      <xsl:text>        this.animate();
+</xsl:text>
     </xsl:if>
     <xsl:for-each select="$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]">
       <xsl:text>        id("</xsl:text>
@@ -4766,6 +4944,10 @@
       <xsl:text>");
 </xsl:text>
     </xsl:for-each>
+    <xsl:if test="$have_value">
+      <xsl:text>        this.value_elt.textContent = "";
+</xsl:text>
+    </xsl:if>
     <xsl:text>    },
 </xsl:text>
   </xsl:template>
@@ -5367,13 +5549,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 &gt; 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>
@@ -5504,6 +5684,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>
@@ -5594,6 +5805,10 @@
 </xsl:text>
     <xsl:text>         this.shift |= this.caps;
 </xsl:text>
+    <xsl:text>         if(this.virgin)
+</xsl:text>
+    <xsl:text>             this.editstr = ""; 
+</xsl:text>
     <xsl:text>         this.editstr += syms[this.shift?syms.length-1:0];
 </xsl:text>
     <xsl:text>         this.shift = false;
@@ -5730,7 +5945,9 @@
 </xsl:text>
     <xsl:text>         this.result_callback_obj = callback_obj;
 </xsl:text>
-    <xsl:text>         this.Info_elt.textContent = info;
+    <xsl:text>         if(this.Info_elt)
+</xsl:text>
+    <xsl:text>             this.Info_elt.textContent = info;
 </xsl:text>
     <xsl:text>         this.shift = false;
 </xsl:text>
@@ -5742,6 +5959,8 @@
 </xsl:text>
     <xsl:text>         this.update();
 </xsl:text>
+    <xsl:text>         this.virgin = true;
+</xsl:text>
     <xsl:text>     }
 </xsl:text>
     <xsl:text>
@@ -5750,6 +5969,8 @@
 </xsl:text>
     <xsl:text>         if(this.editstr != this._editstr){
 </xsl:text>
+    <xsl:text>             this.virgin = false;
+</xsl:text>
     <xsl:text>             this._editstr = this.editstr;
 </xsl:text>
     <xsl:text>             this.Value_elt.textContent = this.editstr;
@@ -5760,7 +5981,7 @@
 </xsl:text>
     <xsl:text>             this._shift = this.shift;
 </xsl:text>
-    <xsl:text>             (this.shift?this.activate_activable:this.inactivate_activable)(this.Shift_sub);
+    <xsl:text>             set_activation_state(this.Shift_sub, this.shift);
 </xsl:text>
     <xsl:text>         }
 </xsl:text>
@@ -5768,7 +5989,7 @@
 </xsl:text>
     <xsl:text>             this._caps = this.caps;
 </xsl:text>
-    <xsl:text>             (this.caps?this.activate_activable:this.inactivate_activable)(this.CapsLock_sub);
+    <xsl:text>             set_activation_state(this.CapsLock_sub, this.caps);
 </xsl:text>
     <xsl:text>         }
 </xsl:text>
@@ -5782,13 +6003,13 @@
     <xsl:call-template name="defs_by_labels">
       <xsl:with-param name="hmi_element" select="$hmi_element"/>
       <xsl:with-param name="labels">
-        <xsl:text>Esc Enter BackSpace Keys Info Value</xsl:text>
+        <xsl:text>Esc Enter BackSpace Keys Value</xsl:text>
       </xsl:with-param>
     </xsl:call-template>
     <xsl:call-template name="defs_by_labels">
       <xsl:with-param name="hmi_element" select="$hmi_element"/>
       <xsl:with-param name="labels">
-        <xsl:text>Sign Space NumDot</xsl:text>
+        <xsl:text>Sign Space NumDot Info</xsl:text>
       </xsl:with-param>
       <xsl:with-param name="mandatory" select="'no'"/>
     </xsl:call-template>
@@ -5837,6 +6058,8 @@
     <xsl:value-of select="$g/@y"/>
     <xsl:text>],
 </xsl:text>
+    <xsl:text>    virgin: false,
+</xsl:text>
   </xsl:template>
   <xsl:template match="widget[@type='List']" mode="widget_desc">
     <type>
@@ -7503,17 +7726,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.insertBefore(choice.elt,choice.sibling);
+</xsl:text>
+    <xsl:text>                    choice.parent = undefined;
+</xsl:text>
+    <xsl:text>                }
 </xsl:text>
     <xsl:text>            }
 </xsl:text>
@@ -7532,18 +7789,30 @@
     <xsl:variable name="subelts" select="$result_widgets[@id = $hmi_element/@id]//*"/>
     <xsl:variable name="subwidgets" select="$subelts//*[@id = $hmi_widgets/@id]"/>
     <xsl:variable name="accepted" select="$subelts[not(ancestor-or-self::*/@id = $subwidgets/@id)]"/>
-    <xsl:for-each select="$accepted[regexp:test(@inkscape:label,$regex)]">
+    <xsl:variable name="choices" select="$accepted[regexp:test(@inkscape:label,$regex)]"/>
+    <xsl:for-each select="$choices">
       <xsl:variable name="literal" select="regexp:match(@inkscape:label,$regex)[2]"/>
+      <xsl:variable name="sibling" select="following-sibling::*[not(@id = $choices/@id)][position()=1]"/>
       <xsl:text>        {
 </xsl:text>
       <xsl:text>            elt:id("</xsl:text>
       <xsl:value-of select="@id"/>
       <xsl:text>"),
 </xsl:text>
-      <xsl:text>            style:"</xsl:text>
-      <xsl:value-of select="@style"/>
-      <xsl:text>",
-</xsl:text>
+      <xsl:text>            parent:undefined,
+</xsl:text>
+      <xsl:choose>
+        <xsl:when test="count($sibling)=0">
+          <xsl:text>            sibling:null,
+</xsl:text>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:text>            sibling:id("</xsl:text>
+          <xsl:value-of select="$sibling/@id"/>
+          <xsl:text>"),
+</xsl:text>
+        </xsl:otherwise>
+      </xsl:choose>
       <xsl:text>            value:</xsl:text>
       <xsl:value-of select="$literal"/>
       <xsl:text>
@@ -7703,27 +7972,11 @@
 </xsl:text>
     <xsl:text>
 </xsl:text>
-    <xsl:text>    activate(val) {
-</xsl:text>
-    <xsl:text>        let [active, inactive] = val ? ["","none"] : ["none", ""];
-</xsl:text>
-    <xsl:text>        if (this.active_elt)
-</xsl:text>
-    <xsl:text>            this.active_elt.style.display = active;
-</xsl:text>
-    <xsl:text>        if (this.inactive_elt)
-</xsl:text>
-    <xsl:text>            this.inactive_elt.style.display = inactive;
-</xsl:text>
-    <xsl:text>    }
-</xsl:text>
-    <xsl:text>
-</xsl:text>
     <xsl:text>    animate(){
 </xsl:text>
     <xsl:text>        // redraw toggle button on screen refresh
 </xsl:text>
-    <xsl:text>        this.activate(this.state);
+    <xsl:text>        this.set_activation_state(this.state);
 </xsl:text>
     <xsl:text>    }
 </xsl:text>
@@ -7731,10 +7984,10 @@
 </xsl:text>
     <xsl:text>    init() {
 </xsl:text>
-    <xsl:text>        this.activate(false);
-</xsl:text>
     <xsl:text>        this.element.onclick = (evt) =&gt; this.on_click(evt);
 </xsl:text>
+    <xsl:text>        this.set_activation_state(undefined);
+</xsl:text>
     <xsl:text>    }
 </xsl:text>
     <xsl:text>}
@@ -7742,13 +7995,1351 @@
   </xsl:template>
   <xsl:template match="widget[@type='ToggleButton']" mode="widget_defs">
     <xsl:param name="hmi_element"/>
+    <xsl:text>    activable_sub:{
+</xsl:text>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>/active /inactive</xsl:text>
+      </xsl:with-param>
+      <xsl:with-param name="mandatory" select="'warn'"/>
+    </xsl:call-template>
+    <xsl:text>    }
+</xsl:text>
+  </xsl:template>
+  <xsl:template match="widget[@type='XYGraph']" mode="widget_desc">
+    <type>
+      <xsl:value-of select="@type"/>
+    </type>
+    <longdesc>
+      <xsl:text>XYGraph draws a cartesian trend graph re-using styles given for axis,
+</xsl:text>
+      <xsl:text>grid/marks, legends and curves.
+</xsl:text>
+      <xsl:text>
+</xsl:text>
+      <xsl:text>Elements labeled "x_axis" and "y_axis" are svg:groups containg:
+</xsl:text>
+      <xsl:text> - "axis_label" svg:text gives style an alignment for axis labels.
+</xsl:text>
+      <xsl:text> - "interval_major_mark" and "interval_minor_mark" are svg elements to be
+</xsl:text>
+      <xsl:text>   duplicated along axis line to form intervals marks.
+</xsl:text>
+      <xsl:text> - "axis_line"  svg:path is the axis line. Paths must be intersect and their
+</xsl:text>
+      <xsl:text>   bounding box is the chart wall.
+</xsl:text>
+      <xsl:text>
+</xsl:text>
+      <xsl:text>Elements labeled "curve_0", "curve_1", ... are paths whose styles are used
+</xsl:text>
+      <xsl:text>to draw curves corresponding to data from variables passed as HMI tree paths.
+</xsl:text>
+      <xsl:text>"curve_0" is mandatory. HMI variables outnumbering given curves are ignored.
+</xsl:text>
+      <xsl:text>
+</xsl:text>
+    </longdesc>
+    <shortdesc>
+      <xsl:text>Cartesian trend graph showing values of given variables over time</xsl:text>
+    </shortdesc>
+    <path name="value" count="1+" accepts="HMI_INT,HMI_REAL">
+      <xsl:text>value</xsl:text>
+    </path>
+    <arg name="xrange" accepts="int,time">
+      <xsl:text>X axis range expressed either in samples or duration.</xsl:text>
+    </arg>
+    <arg name="xformat" count="optional" accepts="string">
+      <xsl:text>format string for X label</xsl:text>
+    </arg>
+    <arg name="yformat" count="optional" accepts="string">
+      <xsl:text>format string for Y label</xsl:text>
+    </arg>
+  </xsl:template>
+  <xsl:template match="widget[@type='XYGraph']" mode="widget_class">
+    <xsl:text>class </xsl:text>
+    <xsl:text>XYGraphWidget</xsl:text>
+    <xsl:text> extends Widget{
+</xsl:text>
+    <xsl:text>    frequency = 1;
+</xsl:text>
+    <xsl:text>    init() {
+</xsl:text>
+    <xsl:text>        let x_duration_s;
+</xsl:text>
+    <xsl:text>        [x_duration_s,
+</xsl:text>
+    <xsl:text>         this.x_format, this.y_format] = this.args;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        let timeunit = x_duration_s.slice(-1);
+</xsl:text>
+    <xsl:text>        let factor = {
+</xsl:text>
+    <xsl:text>            "s":1,
+</xsl:text>
+    <xsl:text>            "m":60,
+</xsl:text>
+    <xsl:text>            "h":3600,
+</xsl:text>
+    <xsl:text>            "d":86400}[timeunit];
+</xsl:text>
+    <xsl:text>        if(factor == undefined){
+</xsl:text>
+    <xsl:text>            this.max_data_length = Number(x_duration_s);
+</xsl:text>
+    <xsl:text>            this.x_duration = undefined;
+</xsl:text>
+    <xsl:text>        }else{
+</xsl:text>
+    <xsl:text>            let duration = factor*Number(x_duration_s.slice(0,-1));
+</xsl:text>
+    <xsl:text>            this.max_data_length = undefined;
+</xsl:text>
+    <xsl:text>            this.x_duration = duration*1000;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // Min and Max given with paths are meant to describe visible range,
+</xsl:text>
+    <xsl:text>        // not to clip data.
+</xsl:text>
+    <xsl:text>        this.clip = false;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        let y_min = Infinity, y_max = -Infinity;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // Compute visible Y range by merging fixed curves Y ranges
+</xsl:text>
+    <xsl:text>        for(let minmax of this.minmaxes){
+</xsl:text>
+    <xsl:text>           if(minmax){
+</xsl:text>
+    <xsl:text>               let [min,max] = minmax;
+</xsl:text>
+    <xsl:text>               if(min &lt; y_min)
+</xsl:text>
+    <xsl:text>                   y_min = min;
+</xsl:text>
+    <xsl:text>               if(max &gt; y_max)
+</xsl:text>
+    <xsl:text>                   y_max = max;
+</xsl:text>
+    <xsl:text>           }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        if(y_min !== Infinity &amp;&amp; y_max !== -Infinity){
+</xsl:text>
+    <xsl:text>           this.fixed_y_range = true;
+</xsl:text>
+    <xsl:text>        } else {
+</xsl:text>
+    <xsl:text>           this.fixed_y_range = false;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        this.ymin = y_min;
+</xsl:text>
+    <xsl:text>        this.ymax = y_max;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        this.curves = [];
+</xsl:text>
+    <xsl:text>        this.init_specific();
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        this.reference = new ReferenceFrame(
+</xsl:text>
+    <xsl:text>            [[this.x_interval_minor_mark_elt, this.x_interval_major_mark_elt],
+</xsl:text>
+    <xsl:text>             [this.y_interval_minor_mark_elt, this.y_interval_major_mark_elt]],
+</xsl:text>
+    <xsl:text>            [this.x_axis_label_elt, this.y_axis_label_elt],
+</xsl:text>
+    <xsl:text>            [this.x_axis_line_elt, this.y_axis_line_elt],
+</xsl:text>
+    <xsl:text>            [this.x_format, this.y_format]);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        let max_stroke_width = 0;
+</xsl:text>
+    <xsl:text>        for(let curve of this.curves){
+</xsl:text>
+    <xsl:text>            if(curve.style.strokeWidth &gt; max_stroke_width){
+</xsl:text>
+    <xsl:text>                max_stroke_width = curve.style.strokeWidth;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        this.Margins=this.reference.getLengths().map(length =&gt; max_stroke_width/length);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // create &lt;clipPath&gt; path and attach it to widget
+</xsl:text>
+    <xsl:text>        let clipPath = document.createElementNS(xmlns,"clipPath");
+</xsl:text>
+    <xsl:text>        let clipPathPath = document.createElementNS(xmlns,"path");
+</xsl:text>
+    <xsl:text>        let clipPathPathDattr = document.createAttribute("d");
+</xsl:text>
+    <xsl:text>        clipPathPathDattr.value = this.reference.getClipPathPathDattr();
+</xsl:text>
+    <xsl:text>        clipPathPath.setAttributeNode(clipPathPathDattr);
+</xsl:text>
+    <xsl:text>        clipPath.appendChild(clipPathPath);
+</xsl:text>
+    <xsl:text>        clipPath.id = randomId();
+</xsl:text>
+    <xsl:text>        this.element.appendChild(clipPath);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // assign created clipPath to clip-path property of curves
+</xsl:text>
+    <xsl:text>        for(let curve of this.curves){
+</xsl:text>
+    <xsl:text>            curve.setAttribute("clip-path", "url(#" + clipPath.id + ")");
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        this.curves_data = [];
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    dispatch(value,oldval, index) {
+</xsl:text>
+    <xsl:text>        // TODO: get PLC time instead of browser time
+</xsl:text>
+    <xsl:text>        let time = Date.now();
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // naive local buffer impl. 
+</xsl:text>
+    <xsl:text>        // data is updated only when graph is visible
+</xsl:text>
+    <xsl:text>        // TODO: replace with separate recording
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        if(this.curves_data[index] === undefined){
+</xsl:text>
+    <xsl:text>            this.curves_data[index] = [];
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        this.curves_data[index].push([time, value]);
+</xsl:text>
+    <xsl:text>        let data_length = this.curves_data[index].length;
+</xsl:text>
+    <xsl:text>        let ymin_damaged = false;
+</xsl:text>
+    <xsl:text>        let ymax_damaged = false;
+</xsl:text>
+    <xsl:text>        let overflow;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        if(this.max_data_length == undefined){
+</xsl:text>
+    <xsl:text>            let peremption = time - this.x_duration;
+</xsl:text>
+    <xsl:text>            let oldest = this.curves_data[index][0][0]
+</xsl:text>
+    <xsl:text>            this.xmin = peremption;
+</xsl:text>
+    <xsl:text>            if(oldest &lt; peremption){
+</xsl:text>
+    <xsl:text>                // remove first item
+</xsl:text>
+    <xsl:text>                overflow = this.curves_data[index].shift()[1];
+</xsl:text>
+    <xsl:text>                data_length = data_length - 1;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        } else {
+</xsl:text>
+    <xsl:text>            if(data_length &gt; this.max_data_length){
+</xsl:text>
+    <xsl:text>                // remove first item
+</xsl:text>
+    <xsl:text>                [this.xmin, overflow] = this.curves_data[index].shift();
+</xsl:text>
+    <xsl:text>                data_length = data_length - 1;
+</xsl:text>
+    <xsl:text>            } else {
+</xsl:text>
+    <xsl:text>                if(this.xmin == undefined){
+</xsl:text>
+    <xsl:text>                    this.xmin = time;
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        this.xmax = time;
+</xsl:text>
+    <xsl:text>        let Xrange = this.xmax - this.xmin;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        if(!this.fixed_y_range){
+</xsl:text>
+    <xsl:text>            ymin_damaged = overflow &lt;= this.ymin;
+</xsl:text>
+    <xsl:text>            ymax_damaged = overflow &gt;= this.ymax;
+</xsl:text>
+    <xsl:text>            if(value &gt; this.ymax){
+</xsl:text>
+    <xsl:text>                ymax_damaged = false;
+</xsl:text>
+    <xsl:text>                this.ymax = value;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            if(value &lt; this.ymin){
+</xsl:text>
+    <xsl:text>                ymin_damaged = false;
+</xsl:text>
+    <xsl:text>                this.ymin = value;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        let Yrange = this.ymax - this.ymin;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // apply margin by moving min and max to enlarge range
+</xsl:text>
+    <xsl:text>        let [xMargin,yMargin] = zip(this.Margins, [Xrange, Yrange]).map(([m,l]) =&gt; m*l);
+</xsl:text>
+    <xsl:text>        [[this.dxmin, this.dxmax],[this.dymin,this.dymax]] =
+</xsl:text>
+    <xsl:text>            [[this.xmin-xMargin, this.xmax+xMargin],
+</xsl:text>
+    <xsl:text>             [this.ymin-yMargin, this.ymax+yMargin]];
+</xsl:text>
+    <xsl:text>        Xrange += 2*xMargin;
+</xsl:text>
+    <xsl:text>        Yrange += 2*yMargin;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // recompute curves "d" attribute
+</xsl:text>
+    <xsl:text>        // FIXME: use SVG getPathData and setPathData when available.
+</xsl:text>
+    <xsl:text>        //        https://svgwg.org/specs/paths/#InterfaceSVGPathData
+</xsl:text>
+    <xsl:text>        //        https://github.com/jarek-foksa/path-data-polyfill
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        let [base_point, xvect, yvect] = this.reference.getBaseRef();
+</xsl:text>
+    <xsl:text>        this.curves_d_attr =
+</xsl:text>
+    <xsl:text>            zip(this.curves_data, this.curves).map(([data,curve]) =&gt; {
+</xsl:text>
+    <xsl:text>                let new_d = data.map(([x,y], i) =&gt; {
+</xsl:text>
+    <xsl:text>                    // compute curve point from data, ranges, and base_ref
+</xsl:text>
+    <xsl:text>                    let xv = vectorscale(xvect, (x - this.dxmin) / Xrange);
+</xsl:text>
+    <xsl:text>                    let yv = vectorscale(yvect, (y - this.dymin) / Yrange);
+</xsl:text>
+    <xsl:text>                    let px = base_point.x + xv.x + yv.x;
+</xsl:text>
+    <xsl:text>                    let py = base_point.y + xv.y + yv.y;
+</xsl:text>
+    <xsl:text>                    if(!this.fixed_y_range){
+</xsl:text>
+    <xsl:text>                        // update min and max from curve data if needed
+</xsl:text>
+    <xsl:text>                        if(ymin_damaged &amp;&amp; y &lt; this.ymin) this.ymin = y;
+</xsl:text>
+    <xsl:text>                        if(ymax_damaged &amp;&amp; y &gt; this.ymax) this.ymax = y;
+</xsl:text>
+    <xsl:text>                    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                    return " " + px + "," + py;
+</xsl:text>
+    <xsl:text>                });
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                new_d.unshift("M ");
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                return new_d.join('');
+</xsl:text>
+    <xsl:text>            });
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // computed curves "d" attr is applied to svg curve during animate();
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        this.request_animate();
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    animate(){
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // move elements only if enough data
+</xsl:text>
+    <xsl:text>        if(this.curves_data.some(data =&gt; data.length &gt; 1)){
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            // move marks and update labels
+</xsl:text>
+    <xsl:text>            this.reference.applyRanges([[this.dxmin, this.dxmax],
+</xsl:text>
+    <xsl:text>                                        [this.dymin, this.dymax]]);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            // apply computed curves "d" attributes
+</xsl:text>
+    <xsl:text>            for(let [curve, d_attr] of zip(this.curves, this.curves_d_attr)){
+</xsl:text>
+    <xsl:text>                curve.setAttribute("d", d_attr);
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+  </xsl:template>
+  <func:function name="func:check_curves_label_consistency">
+    <xsl:param name="curve_elts"/>
+    <xsl:param name="number_to_check"/>
+    <xsl:variable name="res">
+      <xsl:choose>
+        <xsl:when test="$curve_elts[@inkscape:label = concat('curve_', string($number_to_check))]">
+          <xsl:if test="$number_to_check &gt; 0">
+            <xsl:value-of select="func:check_curves_label_consistency($curve_elts, $number_to_check - 1)"/>
+          </xsl:if>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:value-of select="concat('missing curve_', string($number_to_check))"/>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:variable>
+    <func:result select="$res"/>
+  </func:function>
+  <xsl:template match="widget[@type='XYGraph']" mode="widget_defs">
+    <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>active inactive</xsl:text>
+        <xsl:text>/x_interval_minor_mark /x_axis_line /x_interval_major_mark /x_axis_label</xsl:text>
       </xsl:with-param>
-      <xsl:with-param name="mandatory" select="'no'"/>
     </xsl:call-template>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>/y_interval_minor_mark /y_axis_line /y_interval_major_mark /y_axis_label</xsl:text>
+      </xsl:with-param>
+    </xsl:call-template>
+    <xsl:text>    init_specific() {
+</xsl:text>
+    <xsl:variable name="curves" select="$hmi_element/*[regexp:test(@inkscape:label,'^curve_[0-9]+$')]"/>
+    <xsl:variable name="curves_error" select="func:check_curves_label_consistency($curves,count($curves)-1)"/>
+    <xsl:if test="string-length($curves_error)">
+      <xsl:message terminate="yes">
+        <xsl:text>XYGraph id="</xsl:text>
+        <xsl:value-of select="@id"/>
+        <xsl:text>", label="</xsl:text>
+        <xsl:value-of select="@inkscape:label"/>
+        <xsl:text>" : </xsl:text>
+        <xsl:value-of select="$curves_error"/>
+      </xsl:message>
+    </xsl:if>
+    <xsl:for-each select="$curves">
+      <xsl:variable name="label" select="@inkscape:label"/>
+      <xsl:variable name="_id" select="@id"/>
+      <xsl:variable name="curve_num" select="substring(@inkscape:label, 7)"/>
+      <xsl:text>        this.curves[</xsl:text>
+      <xsl:value-of select="$curve_num"/>
+      <xsl:text>] = id("</xsl:text>
+      <xsl:value-of select="@id"/>
+      <xsl:text>"); /* </xsl:text>
+      <xsl:value-of select="@inkscape:label"/>
+      <xsl:text> */
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>    }
+</xsl:text>
+  </xsl:template>
+  <declarations:XYGraph/>
+  <xsl:template match="declarations:XYGraph">
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* </xsl:text>
+    <xsl:value-of select="local-name()"/>
+    <xsl:text> */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>function lineFromPath(path_elt) {
+</xsl:text>
+    <xsl:text>    let start = path_elt.getPointAtLength(0);
+</xsl:text>
+    <xsl:text>    let end = path_elt.getPointAtLength(path_elt.getTotalLength());
+</xsl:text>
+    <xsl:text>    return [start, new DOMPoint(end.x - start.x , end.y - start.y)];
+</xsl:text>
+    <xsl:text>};
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>function vector(p1, p2) {
+</xsl:text>
+    <xsl:text>    return new DOMPoint(p2.x - p1.x , p2.y - p1.y);
+</xsl:text>
+    <xsl:text>};
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>function vectorscale(p1, p2) {
+</xsl:text>
+    <xsl:text>    return new DOMPoint(p2 * p1.x , p2 * p1.y);
+</xsl:text>
+    <xsl:text>};
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>function vectorLength(p1) {
+</xsl:text>
+    <xsl:text>    return Math.sqrt(p1.x*p1.x + p1.y*p1.y);
+</xsl:text>
+    <xsl:text>};
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>function randomId(){
+</xsl:text>
+    <xsl:text>    return Date.now().toString(36) + Math.random().toString(36).substr(2);
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>function move_elements_to_group(elements) {
+</xsl:text>
+    <xsl:text>    let newgroup = document.createElementNS(xmlns,"g");
+</xsl:text>
+    <xsl:text>    newgroup.id = randomId();
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    for(let element of elements){
+</xsl:text>
+    <xsl:text>        let parent = element.parentElement;
+</xsl:text>
+    <xsl:text>        if(parent !== null)
+</xsl:text>
+    <xsl:text>            parent.removeChild(element);
+</xsl:text>
+    <xsl:text>        newgroup.appendChild(element);
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>    return newgroup;
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+    <xsl:text>function getLinesIntesection(l1, l2) {
+</xsl:text>
+    <xsl:text>    let [l1start, l1vect] = l1;
+</xsl:text>
+    <xsl:text>    let [l2start, l2vect] = l2;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    /*
+</xsl:text>
+    <xsl:text>    Compute intersection of two lines
+</xsl:text>
+    <xsl:text>    =================================
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                          ^ l2vect
+</xsl:text>
+    <xsl:text>                         /
+</xsl:text>
+    <xsl:text>                        /
+</xsl:text>
+    <xsl:text>                       /
+</xsl:text>
+    <xsl:text>    l1start ----------X--------------&gt; l1vect
+</xsl:text>
+    <xsl:text>                     / intersection
+</xsl:text>
+    <xsl:text>                    /
+</xsl:text>
+    <xsl:text>                   /
+</xsl:text>
+    <xsl:text>                   l2start
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>	*/
+</xsl:text>
+    <xsl:text>    let [x1, y1, x3, y3] = [l1start.x, l1start.y, l2start.x, l2start.y];
+</xsl:text>
+    <xsl:text>	let [x2, y2, x4, y4] = [x1+l1vect.x, y1+l1vect.y, x3+l2vect.x, y3+l2vect.y];
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>	// line intercept math by Paul Bourke http://paulbourke.net/geometry/pointlineplane/
+</xsl:text>
+    <xsl:text>	// Determine the intersection point of two line segments
+</xsl:text>
+    <xsl:text>	// Return FALSE if the lines don't intersect
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    // Check if none of the lines are of length 0
+</xsl:text>
+    <xsl:text>    if ((x1 === x2 &amp;&amp; y1 === y2) || (x3 === x4 &amp;&amp; y3 === y4)) {
+</xsl:text>
+    <xsl:text>        return false
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1))
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    // Lines are parallel
+</xsl:text>
+    <xsl:text>    if (denominator === 0) {
+</xsl:text>
+    <xsl:text>        return false
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator
+</xsl:text>
+    <xsl:text>    let ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    // Return a object with the x and y coordinates of the intersection
+</xsl:text>
+    <xsl:text>    let x = x1 + ua * (x2 - x1)
+</xsl:text>
+    <xsl:text>    let y = y1 + ua * (y2 - y1)
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    return new DOMPoint(x,y);
+</xsl:text>
+    <xsl:text>};
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>class ReferenceFrame {
+</xsl:text>
+    <xsl:text>    constructor(
+</xsl:text>
+    <xsl:text>        // [[Xminor,Xmajor], [Yminor,Ymajor]]
+</xsl:text>
+    <xsl:text>        marks,
+</xsl:text>
+    <xsl:text>        // [Xlabel, Ylabel]
+</xsl:text>
+    <xsl:text>        labels,
+</xsl:text>
+    <xsl:text>        // [Xline, Yline]
+</xsl:text>
+    <xsl:text>        lines,
+</xsl:text>
+    <xsl:text>        // [Xformat, Yformat] printf-like formating strings
+</xsl:text>
+    <xsl:text>        formats
+</xsl:text>
+    <xsl:text>    ){
+</xsl:text>
+    <xsl:text>        this.axes = zip(labels,marks,lines,formats).map(args =&gt; new Axis(...args));
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        let [lx,ly] = this.axes.map(axis =&gt; axis.line);
+</xsl:text>
+    <xsl:text>        let [[xstart, xvect], [ystart, yvect]] = [lx,ly];
+</xsl:text>
+    <xsl:text>        let base_point = this.getBasePoint();
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // setup clipping for curves
+</xsl:text>
+    <xsl:text>        this.clipPathPathDattr =
+</xsl:text>
+    <xsl:text>            "m " + base_point.x + "," + base_point.y + " "
+</xsl:text>
+    <xsl:text>                 + xvect.x + "," + xvect.y + " "
+</xsl:text>
+    <xsl:text>                 + yvect.x + "," + yvect.y + " "
+</xsl:text>
+    <xsl:text>                 + -xvect.x + "," + -xvect.y + " "
+</xsl:text>
+    <xsl:text>                 + -yvect.x + "," + -yvect.y + " z";
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        this.base_ref = [base_point, xvect, yvect];
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        this.lengths = [xvect,yvect].map(v =&gt; vectorLength(v));
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        for(let axis of this.axes){
+</xsl:text>
+    <xsl:text>            axis.setBasePoint(base_point);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    getLengths(){
+</xsl:text>
+    <xsl:text>        return this.lengths;
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>	getBaseRef(){
+</xsl:text>
+    <xsl:text>        return this.base_ref;
+</xsl:text>
+    <xsl:text>	}
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    getClipPathPathDattr(){
+</xsl:text>
+    <xsl:text>        return this.clipPathPathDattr;
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    applyRanges(ranges){
+</xsl:text>
+    <xsl:text>        let origin_moves = zip(ranges,this.axes).map(([range,axis]) =&gt; axis.applyRange(...range));
+</xsl:text>
+    <xsl:text>		zip(origin_moves.reverse(),this.axes).forEach(([vect,axis]) =&gt; axis.moveOrigin(vect));
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    getBasePoint() {
+</xsl:text>
+    <xsl:text>        let [[xstart, xvect], [ystart, yvect]] = this.axes.map(axis =&gt; axis.line);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        /*
+</xsl:text>
+    <xsl:text>        Compute graph clipping region base point
+</xsl:text>
+    <xsl:text>        ========================================
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        Clipping region is a parallelogram containing axes lines,
+</xsl:text>
+    <xsl:text>        and whose sides are parallel to axes line respectively.
+</xsl:text>
+    <xsl:text>        Given axes lines are not starting at the same point, hereafter is
+</xsl:text>
+    <xsl:text>        calculus of parallelogram base point.
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                              ^ given Y axis (yvect)
+</xsl:text>
+    <xsl:text>                   /         /
+</xsl:text>
+    <xsl:text>                  /         /
+</xsl:text>
+    <xsl:text>                 /         /
+</xsl:text>
+    <xsl:text>         xstart *---------*--------------&gt; given X axis (xvect)
+</xsl:text>
+    <xsl:text>               /         /origin
+</xsl:text>
+    <xsl:text>              /         /
+</xsl:text>
+    <xsl:text>             *---------*--------------
+</xsl:text>
+    <xsl:text>        base_point   ystart
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        let base_point = getLinesIntesection([xstart,yvect],[ystart,xvect]);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        return base_point;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>class Axis {
+</xsl:text>
+    <xsl:text>    constructor(label, marks, line, format){
+</xsl:text>
+    <xsl:text>        this.lineElement = line;
+</xsl:text>
+    <xsl:text>        this.line = lineFromPath(line);
+</xsl:text>
+    <xsl:text>        this.format = format;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        this.label = label;
+</xsl:text>
+    <xsl:text>        this.marks = marks;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // add transforms for elements sliding along the axis line
+</xsl:text>
+    <xsl:text>        for(let [elementname,element] of zip(["minor", "major", "label"],[...marks,label])){
+</xsl:text>
+    <xsl:text>            for(let name of ["base","slide"]){
+</xsl:text>
+    <xsl:text>                let transform = svg_root.createSVGTransform();
+</xsl:text>
+    <xsl:text>                element.transform.baseVal.insertItemBefore(transform,0);
+</xsl:text>
+    <xsl:text>                this[elementname+"_"+name+"_transform"]=transform;
+</xsl:text>
+    <xsl:text>            };
+</xsl:text>
+    <xsl:text>        };
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // group marks an labels together
+</xsl:text>
+    <xsl:text>        let parent = line.parentElement;
+</xsl:text>
+    <xsl:text>        this.marks_group = move_elements_to_group(marks);
+</xsl:text>
+    <xsl:text>        this.marks_and_label_group = move_elements_to_group([this.marks_group, label]);
+</xsl:text>
+    <xsl:text>        this.group = move_elements_to_group([this.marks_and_label_group,line]);
+</xsl:text>
+    <xsl:text>        parent.appendChild(this.group);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // Add transforms to group
+</xsl:text>
+    <xsl:text>        for(let name of ["base","origin"]){
+</xsl:text>
+    <xsl:text>            let transform = svg_root.createSVGTransform();
+</xsl:text>
+    <xsl:text>            this.group.transform.baseVal.appendItem(transform);
+</xsl:text>
+    <xsl:text>            this[name+"_transform"]=transform;
+</xsl:text>
+    <xsl:text>        };
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        this.marks_and_label_group_transform = svg_root.createSVGTransform();
+</xsl:text>
+    <xsl:text>        this.marks_and_label_group.transform.baseVal.appendItem(this.marks_and_label_group_transform);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        this.duplicates = [];
+</xsl:text>
+    <xsl:text>        this.last_duplicate_index = 0;
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    setBasePoint(base_point){
+</xsl:text>
+    <xsl:text>        // move Axis to base point
+</xsl:text>
+    <xsl:text>        let [start, _vect] = this.line;
+</xsl:text>
+    <xsl:text>        let v = vector(start, base_point);
+</xsl:text>
+    <xsl:text>        this.base_transform.setTranslate(v.x, v.y);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // Move marks and label to base point.
+</xsl:text>
+    <xsl:text>        // _|_______          _|________
+</xsl:text>
+    <xsl:text>        //  |  '  |     ==&gt;    '
+</xsl:text>
+    <xsl:text>        //  |     0            0
+</xsl:text>
+    <xsl:text>        //  |                  |
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        for(let [markname,mark] of zip(["minor", "major"],this.marks)){
+</xsl:text>
+    <xsl:text>            let pos = vector(
+</xsl:text>
+    <xsl:text>                // Marks are expected to be paths
+</xsl:text>
+    <xsl:text>                // paths are expected to be lines
+</xsl:text>
+    <xsl:text>                // intersection with axis line is taken 
+</xsl:text>
+    <xsl:text>                // as reference for mark position
+</xsl:text>
+    <xsl:text>                getLinesIntesection(
+</xsl:text>
+    <xsl:text>                    this.line, lineFromPath(mark)),base_point);
+</xsl:text>
+    <xsl:text>            this[markname+"_base_transform"].setTranslate(pos.x - v.x, pos.y - v.y);
+</xsl:text>
+    <xsl:text>            if(markname == "major"){ // label follow major mark
+</xsl:text>
+    <xsl:text>                this.label_base_transform.setTranslate(pos.x - v.x, pos.y - v.y);
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>	moveOrigin(vect){
+</xsl:text>
+    <xsl:text>		this.origin_transform.setTranslate(vect.x, vect.y);
+</xsl:text>
+    <xsl:text>	}
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    applyRange(min, max){
+</xsl:text>
+    <xsl:text>        let range = max - min;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // compute how many units for a mark
+</xsl:text>
+    <xsl:text>        //
+</xsl:text>
+    <xsl:text>        // - Units are expected to be an order of magnitude smaller than range,
+</xsl:text>
+    <xsl:text>        //   so that marks are not too dense and also not too sparse.
+</xsl:text>
+    <xsl:text>        //   Order of magnitude of range is log10(range)
+</xsl:text>
+    <xsl:text>        //
+</xsl:text>
+    <xsl:text>        // - Units are necessarily power of ten, otherwise it is complicated to
+</xsl:text>
+    <xsl:text>        //   fill the text in labels...
+</xsl:text>
+    <xsl:text>        //   Unit is pow(10, integer_number )
+</xsl:text>
+    <xsl:text>        //
+</xsl:text>
+    <xsl:text>        // - To transform order of magnitude to an integer, floor() is used.
+</xsl:text>
+    <xsl:text>        //   This results in a count of mark fluctuating in between 10 and 100.
+</xsl:text>
+    <xsl:text>        //
+</xsl:text>
+    <xsl:text>        // - To spare resources result is better in between 3 and 30,
+</xsl:text>
+    <xsl:text>        //   and log10(3) is substracted to order of magnitude to obtain this
+</xsl:text>
+    <xsl:text>        let unit = Math.pow(10, Math.floor(Math.log10(range)-Math.log10(3)));
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // TODO: for time values (ms), units may be :
+</xsl:text>
+    <xsl:text>        //       1       -&gt; ms
+</xsl:text>
+    <xsl:text>        //       10      -&gt; s/100
+</xsl:text>
+    <xsl:text>        //       100     -&gt; s/10
+</xsl:text>
+    <xsl:text>        //       1000    -&gt; s
+</xsl:text>
+    <xsl:text>        //       60000   -&gt; min
+</xsl:text>
+    <xsl:text>        //       3600000 -&gt; hour
+</xsl:text>
+    <xsl:text>        //       ...
+</xsl:text>
+    <xsl:text>        //
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // Compute position of origin along axis [0...range]
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // min &lt; 0, max &gt; 0, offset = -min
+</xsl:text>
+    <xsl:text>        // _____________|________________
+</xsl:text>
+    <xsl:text>        // ... -3 -2 -1 |0  1  2  3  4 ...
+</xsl:text>
+    <xsl:text>        // &lt;--offset---&gt; ^
+</xsl:text>
+    <xsl:text>        //               |_original
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // min &gt; 0, max &gt; 0, offset = 0
+</xsl:text>
+    <xsl:text>        // |________________
+</xsl:text>
+    <xsl:text>        // |6  7  8  9  10...
+</xsl:text>
+    <xsl:text>        //  ^
+</xsl:text>
+    <xsl:text>        //  |_original
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // min &lt; 0, max &lt; 0, offset = max-min (range)
+</xsl:text>
+    <xsl:text>        // _____________|_
+</xsl:text>
+    <xsl:text>        // ... -5 -4 -3 |-2
+</xsl:text>
+    <xsl:text>        // &lt;--offset---&gt; ^
+</xsl:text>
+    <xsl:text>        //               |_original
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        let offset = (max&gt;=0 &amp;&amp; min&gt;=0) ? 0 : (
+</xsl:text>
+    <xsl:text>                     (max&lt;0 &amp;&amp; min&lt;0)   ? range : -min);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // compute unit vector
+</xsl:text>
+    <xsl:text>        let [_start, vect] = this.line;
+</xsl:text>
+    <xsl:text>        let unit_vect = vectorscale(vect, 1/range);
+</xsl:text>
+    <xsl:text>        let [mark_min, mark_max, mark_offset] = [min,max,offset].map(val =&gt; Math.round(val/unit));
+</xsl:text>
+    <xsl:text>        let mark_count = mark_max-mark_min;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // apply unit vector to marks and label
+</xsl:text>
+    <xsl:text>        // offset is a representing position of an 
+</xsl:text>
+    <xsl:text>        // axis along the opposit axis line, expressed in major marks units
+</xsl:text>
+    <xsl:text>        // unit_vect is unit vector
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //              ^
+</xsl:text>
+    <xsl:text>        //              | unit_vect
+</xsl:text>
+    <xsl:text>        //              |&lt;---&gt;
+</xsl:text>
+    <xsl:text>        //     _________|__________&gt;
+</xsl:text>
+    <xsl:text>        //     ^  |  '  |  '  |  '
+</xsl:text>
+    <xsl:text>        //     |yoffset |     1 
+</xsl:text>
+    <xsl:text>        //     |        |
+</xsl:text>
+    <xsl:text>        //     v xoffset|
+</xsl:text>
+    <xsl:text>        //     X&lt;------&gt;|
+</xsl:text>
+    <xsl:text>        // base_point
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // move major marks and label to first positive mark position
+</xsl:text>
+    <xsl:text>        // let v = vectorscale(unit_vect, unit);
+</xsl:text>
+    <xsl:text>        // this.label_slide_transform.setTranslate(v.x, v.y);
+</xsl:text>
+    <xsl:text>        // this.major_slide_transform.setTranslate(v.x, v.y);
+</xsl:text>
+    <xsl:text>        // move minor mark to first half positive mark position
+</xsl:text>
+    <xsl:text>        let v = vectorscale(unit_vect, unit/2);
+</xsl:text>
+    <xsl:text>        this.minor_slide_transform.setTranslate(v.x, v.y);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // duplicate marks and labels as needed
+</xsl:text>
+    <xsl:text>        let current_mark_count = this.duplicates.length;
+</xsl:text>
+    <xsl:text>        for(let i = current_mark_count; i &lt;= mark_count; i++){
+</xsl:text>
+    <xsl:text>            // cloneNode() label and add a svg:use of marks in a new group
+</xsl:text>
+    <xsl:text>            let newgroup = document.createElementNS(xmlns,"g");
+</xsl:text>
+    <xsl:text>            let transform = svg_root.createSVGTransform();
+</xsl:text>
+    <xsl:text>            let newlabel = this.label.cloneNode(true);
+</xsl:text>
+    <xsl:text>            let newuse = document.createElementNS(xmlns,"use");
+</xsl:text>
+    <xsl:text>            let newuseAttr = document.createAttribute("href");
+</xsl:text>
+    <xsl:text>            newuseAttr.value = "#"+this.marks_group.id;
+</xsl:text>
+    <xsl:text>            newuse.setAttributeNode(newuseAttr);
+</xsl:text>
+    <xsl:text>            newgroup.transform.baseVal.appendItem(transform);
+</xsl:text>
+    <xsl:text>            newgroup.appendChild(newlabel);
+</xsl:text>
+    <xsl:text>            newgroup.appendChild(newuse);
+</xsl:text>
+    <xsl:text>            this.duplicates.push([transform,newgroup]);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // move marks and labels, set labels
+</xsl:text>
+    <xsl:text>        // 
+</xsl:text>
+    <xsl:text>        // min &gt; 0, max &gt; 0, offset = 0
+</xsl:text>
+    <xsl:text>        //         ^
+</xsl:text>
+    <xsl:text>        //         |________&gt;
+</xsl:text>
+    <xsl:text>        //        '| |  '  |
+</xsl:text>
+    <xsl:text>        //         | 6     7
+</xsl:text>
+    <xsl:text>        //         X
+</xsl:text>
+    <xsl:text>        //     base_point
+</xsl:text>
+    <xsl:text>        //
+</xsl:text>
+    <xsl:text>        // min &lt; 0, max &gt; 0, offset = -min
+</xsl:text>
+    <xsl:text>        //              ^
+</xsl:text>
+    <xsl:text>        //     _________|__________&gt;
+</xsl:text>
+    <xsl:text>        //     '  |  '  |  '  |  '
+</xsl:text>
+    <xsl:text>        //       -1     |     1 
+</xsl:text>
+    <xsl:text>        //       offset |
+</xsl:text>
+    <xsl:text>        //     X&lt;------&gt;|
+</xsl:text>
+    <xsl:text>        // base_point
+</xsl:text>
+    <xsl:text>        //
+</xsl:text>
+    <xsl:text>        // min &lt; 0, max &lt; 0, offset = range
+</xsl:text>
+    <xsl:text>        //                 ^
+</xsl:text>
+    <xsl:text>        //     ____________|    
+</xsl:text>
+    <xsl:text>        //      '  |  '  | |'
+</xsl:text>
+    <xsl:text>        //        -5    -4 |
+</xsl:text>
+    <xsl:text>        //         offset  |
+</xsl:text>
+    <xsl:text>        //     X&lt;---------&gt;|
+</xsl:text>
+    <xsl:text>        // base_point
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        let duplicate_index = 0;
+</xsl:text>
+    <xsl:text>        for(let mark_index = 0; mark_index &lt;= mark_count; mark_index++){
+</xsl:text>
+    <xsl:text>            let val = (mark_min + mark_index) * unit;
+</xsl:text>
+    <xsl:text>            let vec = vectorscale(unit_vect, val - min);
+</xsl:text>
+    <xsl:text>            let text = this.format ? sprintf(this.format, val) : val.toString();
+</xsl:text>
+    <xsl:text>            if(mark_index == mark_offset){
+</xsl:text>
+    <xsl:text>                // apply offset to original marks and label groups
+</xsl:text>
+    <xsl:text>                this.marks_and_label_group_transform.setTranslate(vec.x, vec.y);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                // update original label text
+</xsl:text>
+    <xsl:text>                this.label.getElementsByTagName("tspan")[0].textContent = text;
+</xsl:text>
+    <xsl:text>            } else {
+</xsl:text>
+    <xsl:text>                let [transform,element] = this.duplicates[duplicate_index++];
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                // apply unit vector*N to marks and label groups
+</xsl:text>
+    <xsl:text>                transform.setTranslate(vec.x, vec.y);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                // update label text
+</xsl:text>
+    <xsl:text>                element.getElementsByTagName("tspan")[0].textContent = text;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                // Attach to group if not already
+</xsl:text>
+    <xsl:text>                if(element.parentElement == null){
+</xsl:text>
+    <xsl:text>                    this.group.appendChild(element);
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        let save_duplicate_index = duplicate_index;
+</xsl:text>
+    <xsl:text>        // dettach marks and label from group if not anymore visible
+</xsl:text>
+    <xsl:text>        for(;duplicate_index &lt; this.last_duplicate_index; duplicate_index++){
+</xsl:text>
+    <xsl:text>            let [transform,element] = this.duplicates[duplicate_index];
+</xsl:text>
+    <xsl:text>            this.group.removeChild(element);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        this.last_duplicate_index = save_duplicate_index;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>		return vectorscale(unit_vect, offset);
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+    <xsl:text>
+</xsl:text>
   </xsl:template>
   <xsl:template match="/">
     <xsl:comment>
@@ -7758,6 +9349,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;">
@@ -8027,9 +9619,21 @@
 </xsl:text>
           <xsl:text>                        let lang = get_current_lang_code();
 </xsl:text>
-          <xsl:text>                        arg = Date(arg).toLocaleString('en-US', options);
-</xsl:text>
-          <xsl:text>                        
+          <xsl:text>                        let f;
+</xsl:text>
+          <xsl:text>                        try{
+</xsl:text>
+          <xsl:text>                            f = new Intl.DateTimeFormat(lang, options);
+</xsl:text>
+          <xsl:text>                        } catch(e) {
+</xsl:text>
+          <xsl:text>                            f = new Intl.DateTimeFormat('en-US', options);
+</xsl:text>
+          <xsl:text>                        }
+</xsl:text>
+          <xsl:text>                        arg = f.format(arg);
+</xsl:text>
+          <xsl:text>
 </xsl:text>
           <xsl:text>                        /*    
 </xsl:text>
@@ -8349,6 +9953,430 @@
 </xsl:text>
           <xsl:text>}(); // eslint-disable-line    
 </xsl:text>
+          <xsl:text>/*
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>From https://github.com/keyvan-m-sadeghi/pythonic
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>Slightly modified in order to be usable in browser (i.e. not as a node.js module)
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>The MIT License (MIT)
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>Copyright (c) 2016 Assister.Ai
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>Permission is hereby granted, free of charge, to any person obtaining a copy of
+</xsl:text>
+          <xsl:text>this software and associated documentation files (the "Software"), to deal in
+</xsl:text>
+          <xsl:text>the Software without restriction, including without limitation the rights to
+</xsl:text>
+          <xsl:text>use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+</xsl:text>
+          <xsl:text>the Software, and to permit persons to whom the Software is furnished to do so,
+</xsl:text>
+          <xsl:text>subject to the following conditions:
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>The above copyright notice and this permission notice shall be included in all
+</xsl:text>
+          <xsl:text>copies or substantial portions of the Software.
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+</xsl:text>
+          <xsl:text>IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+</xsl:text>
+          <xsl:text>FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+</xsl:text>
+          <xsl:text>COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+</xsl:text>
+          <xsl:text>IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+</xsl:text>
+          <xsl:text>CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+</xsl:text>
+          <xsl:text>*/
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>class Iterator {
+</xsl:text>
+          <xsl:text>    constructor(generator) {
+</xsl:text>
+          <xsl:text>        this[Symbol.iterator] = generator;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    async * [Symbol.asyncIterator]() {
+</xsl:text>
+          <xsl:text>        for (const element of this) {
+</xsl:text>
+          <xsl:text>            yield await element;
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    forEach(callback) {
+</xsl:text>
+          <xsl:text>        for (const element of this) {
+</xsl:text>
+          <xsl:text>            callback(element);
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    map(callback) {
+</xsl:text>
+          <xsl:text>        const result = [];
+</xsl:text>
+          <xsl:text>        for (const element of this) {
+</xsl:text>
+          <xsl:text>            result.push(callback(element));
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        return result;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    filter(callback) {
+</xsl:text>
+          <xsl:text>        const result = [];
+</xsl:text>
+          <xsl:text>        for (const element of this) {
+</xsl:text>
+          <xsl:text>            if (callback(element)) {
+</xsl:text>
+          <xsl:text>                result.push(element);
+</xsl:text>
+          <xsl:text>            }
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        return result;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    reduce(callback, initialValue) {
+</xsl:text>
+          <xsl:text>        let empty = typeof initialValue === 'undefined';
+</xsl:text>
+          <xsl:text>        let accumulator = initialValue;
+</xsl:text>
+          <xsl:text>        let index = 0;
+</xsl:text>
+          <xsl:text>        for (const currentValue of this) {
+</xsl:text>
+          <xsl:text>            if (empty) {
+</xsl:text>
+          <xsl:text>                accumulator = currentValue;
+</xsl:text>
+          <xsl:text>                empty = false;
+</xsl:text>
+          <xsl:text>                continue;
+</xsl:text>
+          <xsl:text>            }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>            accumulator = callback(accumulator, currentValue, index, this);
+</xsl:text>
+          <xsl:text>            index++;
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        if (empty) {
+</xsl:text>
+          <xsl:text>            throw new TypeError('Reduce of empty Iterator with no initial value');
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        return accumulator;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    some(callback) {
+</xsl:text>
+          <xsl:text>        for (const element of this) {
+</xsl:text>
+          <xsl:text>            if (callback(element)) {
+</xsl:text>
+          <xsl:text>                return true;
+</xsl:text>
+          <xsl:text>            }
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        return false;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    every(callback) {
+</xsl:text>
+          <xsl:text>        for (const element of this) {
+</xsl:text>
+          <xsl:text>            if (!callback(element)) {
+</xsl:text>
+          <xsl:text>                return false;
+</xsl:text>
+          <xsl:text>            }
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        return true;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    static fromIterable(iterable) {
+</xsl:text>
+          <xsl:text>        return new Iterator(function * () {
+</xsl:text>
+          <xsl:text>            for (const element of iterable) {
+</xsl:text>
+          <xsl:text>                yield element;
+</xsl:text>
+          <xsl:text>            }
+</xsl:text>
+          <xsl:text>        });
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    toArray() {
+</xsl:text>
+          <xsl:text>        return Array.from(this);
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    next() {
+</xsl:text>
+          <xsl:text>        if (!this.currentInvokedGenerator) {
+</xsl:text>
+          <xsl:text>            this.currentInvokedGenerator = this[Symbol.iterator]();
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        return this.currentInvokedGenerator.next();
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    reset() {
+</xsl:text>
+          <xsl:text>        delete this.currentInvokedGenerator;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function rangeSimple(stop) {
+</xsl:text>
+          <xsl:text>    return new Iterator(function * () {
+</xsl:text>
+          <xsl:text>        for (let i = 0; i &lt; stop; i++) {
+</xsl:text>
+          <xsl:text>            yield i;
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    });
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function rangeOverload(start, stop, step = 1) {
+</xsl:text>
+          <xsl:text>    return new Iterator(function * () {
+</xsl:text>
+          <xsl:text>        for (let i = start; i &lt; stop; i += step) {
+</xsl:text>
+          <xsl:text>            yield i;
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    });
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function range(...args) {
+</xsl:text>
+          <xsl:text>    if (args.length &lt; 2) {
+</xsl:text>
+          <xsl:text>        return rangeSimple(...args);
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    return rangeOverload(...args);
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function enumerate(iterable) {
+</xsl:text>
+          <xsl:text>    return new Iterator(function * () {
+</xsl:text>
+          <xsl:text>        let index = 0;
+</xsl:text>
+          <xsl:text>        for (const element of iterable) {
+</xsl:text>
+          <xsl:text>            yield [index, element];
+</xsl:text>
+          <xsl:text>            index++;
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    });
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>const _zip = longest =&gt; (...iterables) =&gt; {
+</xsl:text>
+          <xsl:text>    if (iterables.length &lt; 2) {
+</xsl:text>
+          <xsl:text>        throw new TypeError("zip takes 2 iterables at least, "+iterables.length+" given");
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    return new Iterator(function * () {
+</xsl:text>
+          <xsl:text>        const iterators = iterables.map(iterable =&gt; Iterator.fromIterable(iterable));
+</xsl:text>
+          <xsl:text>        while (true) {
+</xsl:text>
+          <xsl:text>            const row = iterators.map(iterator =&gt; iterator.next());
+</xsl:text>
+          <xsl:text>            const check = longest ? row.every.bind(row) : row.some.bind(row);
+</xsl:text>
+          <xsl:text>            if (check(next =&gt; next.done)) {
+</xsl:text>
+          <xsl:text>                return;
+</xsl:text>
+          <xsl:text>            }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>            yield row.map(next =&gt; next.value);
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    });
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>const zip = _zip(false), zipLongest= _zip(true);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function items(obj) {
+</xsl:text>
+          <xsl:text>    let {keys, get} = obj;
+</xsl:text>
+          <xsl:text>    if (obj instanceof Map) {
+</xsl:text>
+          <xsl:text>        keys = keys.bind(obj);
+</xsl:text>
+          <xsl:text>        get = get.bind(obj);
+</xsl:text>
+          <xsl:text>    } else {
+</xsl:text>
+          <xsl:text>        keys = function () {
+</xsl:text>
+          <xsl:text>            return Object.keys(obj);
+</xsl:text>
+          <xsl:text>        };
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        get = function (key) {
+</xsl:text>
+          <xsl:text>            return obj[key];
+</xsl:text>
+          <xsl:text>        };
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    return new Iterator(function * () {
+</xsl:text>
+          <xsl:text>        for (const key of keys()) {
+</xsl:text>
+          <xsl:text>            yield [key, get(key)];
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    });
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>/*
+</xsl:text>
+          <xsl:text>module.exports = {Iterator, range, enumerate, zip: _zip(false), zipLongest: _zip(true), items};
+</xsl:text>
+          <xsl:text>*/
+</xsl:text>
           <xsl:text>// svghmi.js
 </xsl:text>
           <xsl:text>
@@ -8757,6 +10785,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
@@ -8771,7 +10823,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>
@@ -8787,9 +10839,9 @@
 </xsl:text>
           <xsl:text>
 </xsl:text>
-          <xsl:text>function multiline_to_svg_text(elt, str) {
-</xsl:text>
-          <xsl:text>    str.split('\n').map((line,i) =&gt; {elt.children[i].textContent = line;});
+          <xsl:text>function multiline_to_svg_text(elt, str, blank) {
+</xsl:text>
+          <xsl:text>    str.split('\n').map((line,i) =&gt; {elt.children[i].textContent = blank?"":line;});
 </xsl:text>
           <xsl:text>}
 </xsl:text>
@@ -9357,6 +11409,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>};
diff -r a35bf9c585cf -r 074046800624 svghmi/gen_index_xhtml.ysl2
--- a/svghmi/gen_index_xhtml.ysl2	Mon Jun 13 19:22:31 2022 +0200
+++ b/svghmi/gen_index_xhtml.ysl2	Mon Jun 27 10:26:04 2022 +0200
@@ -34,6 +34,7 @@
             xmlns:declarations="declarations"
             xmlns:definitions="definitions"
             xmlns:epilogue="epilogue"
+            xmlns:cssdefs="cssdefs"
 
             /* Namespace to invoke python code */
             xmlns:ns="beremiz"
@@ -74,6 +75,7 @@
             head {
                 style type="text/css" media="screen" {
                     value "ns:GetFonts()";
+                    apply "document('')/*/cssdefs:*";
                 }
             }
             // prevents user selection by mouse click / touch and drag
diff -r a35bf9c585cf -r 074046800624 svghmi/parse_labels.ysl2
--- a/svghmi/parse_labels.ysl2	Mon Jun 13 19:22:31 2022 +0200
+++ b/svghmi/parse_labels.ysl2	Mon Jun 27 10:26:04 2022 +0200
@@ -13,7 +13,7 @@
 //      path value="path4" index="path4" type="HMI_LOCAL";
 //  }
 //
-const "pathregex",!"'^([^\[,]+)(\[[^\]]+\])?([\d,]*)$'"!;
+const "pathregex",!"'^([^\[,]+)(\[[^\]]+\])?([-.\d,]*)$'"!;
 
 template "*", mode="parselabel"
 {
diff -r a35bf9c585cf -r 074046800624 svghmi/svghmi.js
--- a/svghmi/svghmi.js	Mon Jun 13 19:22:31 2022 +0200
+++ b/svghmi/svghmi.js	Mon Jun 27 10:26:04 2022 +0200
@@ -202,6 +202,18 @@
     });
 }
 
+
+var page_fading_in_progress = false;
+function fading_page_switch(...args){
+    svg_root.classList.add("fade-out-page");
+    page_fading_in_progress = true;
+
+    setTimeout(function(){
+        switch_page(...args);
+    },1);
+}
+document.body.style.backgroundColor = "black";
+
 // subscribe to per instance current page hmi variable
 // PLC must prefix page name with "!" for page switch to happen
 subscribers(current_page_var_index).add({
@@ -209,7 +221,7 @@
     indexes: [current_page_var_index],
     new_hmi_value: function(index, value, oldval) {
         if(value.startsWith("!"))
-            switch_page(value.slice(1));
+            fading_page_switch(value.slice(1));
     }
 });
 
@@ -217,8 +229,8 @@
     return(Array.prototype.map.call(elt.children, x=>x.textContent).join("\\\\n")); 
 }
 
-function multiline_to_svg_text(elt, str) {
-    str.split('\\\\n').map((line,i) => {elt.children[i].textContent = line;});
+function multiline_to_svg_text(elt, str, blank) {
+    str.split('\\\\n').map((line,i) => {elt.children[i].textContent = blank?"":line;});
 }
 
 function switch_langnum(langnum) {
@@ -502,6 +514,9 @@
     }
 
     svg_root.setAttribute('viewBox',new_desc.bbox.join(" "));
+    if(page_fading_in_progress)
+        svg_root.classList.remove("fade-out-page");
+        page_fading_in_progress = false;
     current_visible_page = page_name;
 };
 
diff -r a35bf9c585cf -r 074046800624 svghmi/widget_button.ysl2
--- a/svghmi/widget_button.ysl2	Mon Jun 13 19:22:31 2022 +0200
+++ b/svghmi/widget_button.ysl2	Mon Jun 27 10:26:04 2022 +0200
@@ -183,19 +183,13 @@
     apply "$fsm", mode="actions";
 
     |     animate(){
-    |         if (this.active_elt && this.inactive_elt) {
-    foreach "str:split('active inactive')" {
-    |             if(this.display == "«.»")
-    |                 this.«.»_elt.style.display = "";
-    |             else
-    |                 this.«.»_elt.style.display = "none";
-    }
-    |         }
+    |         this.set_activation_state(this.display == "active");
     |     }
 
     |     init() {
     |         this.bound_onmouseup = this.onmouseup.bind(this);
     |         this.element.addEventListener("pointerdown", this.onmousedown.bind(this));
+    |         this.set_activation_state(undefined);
     |     }
 }
 
@@ -207,7 +201,7 @@
 }
 
 widget_defs("Button") {
-    optional_labels("active inactive");
+    activable();
 }
 
 widget_class("PushButton"){
@@ -217,6 +211,6 @@
 }
 
 widget_defs("PushButton") {
-    optional_labels("active inactive");
-}
-
+    activable();
+}
+
diff -r a35bf9c585cf -r 074046800624 svghmi/widget_display.ysl2
--- a/svghmi/widget_display.ysl2	Mon Jun 13 19:22:31 2022 +0200
+++ b/svghmi/widget_display.ysl2	Mon Jun 27 10:26:04 2022 +0200
@@ -15,12 +15,12 @@
     format string as first argument.
     ||
 
-    shortdesc > Printf-like formated text display 
+    shortdesc > Printf-like formated text display
 
     arg name="format" count="optional" accepts="string" > printf-like format string when not given as svg:text
 
     path name="fields" count="many" accepts="HMI_INT,HMI_REAL,HMI_STRING,HMI_BOOL" > variables to be displayed
-    
+
 }
 
 
@@ -28,7 +28,11 @@
     ||
         frequency = 5;
         dispatch(value, oldval, index) {
-            this.fields[index] = value;    
+            this.fields[index] = value;
+            if(!this.ready){
+                this.readyfields[index] = true;
+                this.ready = this.readyfields.every(x=>x);
+            }
             this.request_animate();
         }
     ||
@@ -49,6 +53,12 @@
         if "position()!=last()" > ,
     }
     |     fields: [«$field_initializer»],
+    const "readyfield_initializer" foreach "path" {
+        > false
+        if "position()!=last()" > ,
+    }
+    |     readyfields: [«$readyfield_initializer»],
+    |     ready: false,
     |     animate: function(){
     choose {
         when "$has_format" {
@@ -57,18 +67,19 @@
     |           this.format_elt.removeAttribute("lang");
     |       }
     |       let str = vsprintf(this.format,this.fields);
-    |       multiline_to_svg_text(this.format_elt, str);
+    |       multiline_to_svg_text(this.format_elt, str, !this.ready);
         }
         otherwise {
     |       let str = this.args.length == 1 ? vsprintf(this.args[0],this.fields) : this.fields.join(' ');
-    |       multiline_to_svg_text(this.element, str);
+    |       multiline_to_svg_text(this.element, str, !this.ready);
         }
     }
     |     },
-    |     
+    |
+    |     init: function() {
     if "$has_format" {
-    |     init: function() {
     |       this.format = svg_text_to_multiline(this.format_elt);
+    }
+    |       this.animate();
     |     },
-    }
 }
diff -r a35bf9c585cf -r 074046800624 svghmi/widget_input.ysl2
--- a/svghmi/widget_input.ysl2	Mon Jun 13 19:22:31 2022 +0200
+++ b/svghmi/widget_input.ysl2	Mon Jun 27 10:26:04 2022 +0200
@@ -51,6 +51,8 @@
      undershot(new_val, min) {
          this.alert("min");
      }
+
+     display = "";
 ||
 
 widget_defs("Input") {
@@ -65,7 +67,6 @@
 
     if "$have_value"
     |     frequency: 5,
-
     |     dispatch: function(value) {
 
 
@@ -100,11 +101,15 @@
         if "$have_value" {
     |         this.value_elt.style.pointerEvents = "none";
         }
+    |         this.animate();
     }
 
     foreach "$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]" {
     |         id("«@id»").onclick = () => this.on_op_click("«func:escape_quotes(@inkscape:label)»");
     }
 
+    if "$have_value" {
+    |         this.value_elt.textContent = "";
+    }
     |     },
 }
diff -r a35bf9c585cf -r 074046800624 svghmi/widget_jump.ysl2
--- a/svghmi/widget_jump.ysl2	Mon Jun 13 19:22:31 2022 +0200
+++ b/svghmi/widget_jump.ysl2	Mon Jun 27 10:26:04 2022 +0200
@@ -66,10 +66,9 @@
                 /* TODO: in order to allow jumps to page selected through for exemple a dropdown,
                    support path pointing to local variable whom value 
                    would be an HMI_TREE index and then jump to a relative page not hard-coded in advance */
-
                 if(!that.disabled) {
                     const index = that.indexes.length > 0 ? that.indexes[0] + that.offset : undefined;
-                    switch_page(name, index);
+                    fading_page_switch(name, index);
                 }
             }
         }
@@ -143,6 +142,19 @@
     }
 }
 
+emit "cssdefs:jump"
+||
+.fade-out-page {
+    animation: fadeOut 0.6s both;
+}
+
+@keyframes fadeOut {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+}
+
+||
+
 emit "declarations:jump"
 ||
 var jumps_need_update = false;
diff -r a35bf9c585cf -r 074046800624 svghmi/widget_keypad.ysl2
--- a/svghmi/widget_keypad.ysl2	Mon Jun 13 19:22:31 2022 +0200
+++ b/svghmi/widget_keypad.ysl2	Mon Jun 27 10:26:04 2022 +0200
@@ -30,6 +30,8 @@
          on_key_click(symbols) {
              var syms = symbols.split(" ");
              this.shift |= this.caps;
+             if(this.virgin)
+                 this.editstr = ""; 
              this.editstr += syms[this.shift?syms.length-1:0];
              this.shift = false;
              this.update();
@@ -98,33 +100,36 @@
              show_modal.call(this,size);
              this.editstr = String(initial);
              this.result_callback_obj = callback_obj;
-             this.Info_elt.textContent = info;
+             if(this.Info_elt)
+                 this.Info_elt.textContent = info;
              this.shift = false;
              this.caps = false;
              this.initial = initial;
 
              this.update();
+             this.virgin = true;
          }
 
          update() {
              if(this.editstr != this._editstr){
+                 this.virgin = false;
                  this._editstr = this.editstr;
                  this.Value_elt.textContent = this.editstr;
              }
              if(this.Shift_sub && this.shift != this._shift){
                  this._shift = this.shift;
-                 (this.shift?this.activate_activable:this.inactivate_activable)(this.Shift_sub);
+                 set_activation_state(this.Shift_sub, this.shift);
              }
              if(this.CapsLock_sub && this.caps != this._caps){
                  this._caps = this.caps;
-                 (this.caps?this.activate_activable:this.inactivate_activable)(this.CapsLock_sub);
+                 set_activation_state(this.CapsLock_sub, this.caps);
              }
          }
     ||
 
 widget_defs("Keypad") {
-    labels("Esc Enter BackSpace Keys Info Value");
-    optional_labels("Sign Space NumDot");
+    labels("Esc Enter BackSpace Keys Value");
+    optional_labels("Sign Space NumDot Info");
     activable_labels("CapsLock Shift");
     |     init: function() {
     foreach "$hmi_element/*[@inkscape:label = 'Keys']/*" {
@@ -138,4 +143,5 @@
     |
     const "g", "$geometry[@Id = $hmi_element/@id]"; 
     |     coordinates: [«$g/@x», «$g/@y»],
+    |     virgin: false,
 }
diff -r a35bf9c585cf -r 074046800624 svghmi/widget_switch.ysl2
--- a/svghmi/widget_switch.ysl2	Mon Jun 13 19:22:31 2022 +0200
+++ b/svghmi/widget_switch.ysl2	Mon Jun 27 10:26:04 2022 +0200
@@ -23,12 +23,29 @@
 widget_class("Switch")
     ||
         frequency = 5;
+        current_value = undefined;
+
+        init(){
+            this.animate();
+        }
+
         dispatch(value) {
+            this.current_value = value;
+            this.request_animate();
+        }
+
+        animate(){
             for(let choice of this.choices){
-                if(value != choice.value){
-                    choice.elt.setAttribute("style", "display:none");
+                if(this.current_value != choice.value){
+                    if(choice.parent == undefined){
+                        choice.parent = choice.elt.parentElement;
+                        choice.parent.removeChild(choice.elt);
+                    }
                 } else {
-                    choice.elt.setAttribute("style", choice.style);
+                    if(choice.parent != undefined){
+                        choice.parent.insertBefore(choice.elt,choice.sibling);
+                        choice.parent = undefined;
+                    }
                 }
             }
         }
@@ -38,16 +55,26 @@
     |     choices: [
     const "regex",!"'^(\"[^\"].*\"|\-?[0-9]+|false|true)(#.*)?$'"!;
 
+    // this prevents matching element in sub-widgets
     const "subelts", "$result_widgets[@id = $hmi_element/@id]//*";
     const "subwidgets", "$subelts//*[@id = $hmi_widgets/@id]";
     const "accepted", "$subelts[not(ancestor-or-self::*/@id = $subwidgets/@id)]";
 
-    foreach "$accepted[regexp:test(@inkscape:label,$regex)]" {
+    const "choices", "$accepted[regexp:test(@inkscape:label,$regex)]";
+    foreach "$choices" {
         const "literal", "regexp:match(@inkscape:label,$regex)[2]";
+        const "sibling", "following-sibling::*[not(@id = $choices/@id)][position()=1]";
     |         {
     |             elt:id("«@id»"),
-                  // TODO : use style.display = "none" to hide element
-    |             style:"«@style»",
+    |             parent:undefined,
+    choose {
+        when "count($sibling)=0" {
+    |             sibling:null,
+        }
+        otherwise {
+    |             sibling:id("«$sibling/@id»"),
+        }
+    }
     |             value:«$literal»
     |         }`if "position()!=last()" > ,`
     }
diff -r a35bf9c585cf -r 074046800624 svghmi/widget_tooglebutton.ysl2
--- a/svghmi/widget_tooglebutton.ysl2	Mon Jun 13 19:22:31 2022 +0200
+++ b/svghmi/widget_tooglebutton.ysl2	Mon Jun 27 10:26:04 2022 +0200
@@ -37,26 +37,19 @@
             this.request_animate();
         }
 
-        activate(val) {
-            let [active, inactive] = val ? ["","none"] : ["none", ""];
-            if (this.active_elt)
-                this.active_elt.style.display = active;
-            if (this.inactive_elt)
-                this.inactive_elt.style.display = inactive;
-        }
-
         animate(){
             // redraw toggle button on screen refresh
-            this.activate(this.state);
+            this.set_activation_state(this.state);
         }
 
         init() {
-            this.activate(false);
             this.element.onclick = (evt) => this.on_click(evt);
+            this.set_activation_state(undefined);
         }
     ||
 }
 
 widget_defs("ToggleButton") {
-    optional_labels("active inactive");
+    activable();
 }
+
diff -r a35bf9c585cf -r 074046800624 svghmi/widget_xygraph.ysl2
--- a/svghmi/widget_xygraph.ysl2	Mon Jun 13 19:22:31 2022 +0200
+++ b/svghmi/widget_xygraph.ysl2	Mon Jun 27 10:26:04 2022 +0200
@@ -22,20 +22,35 @@
 
     path name="value" count="1+" accepts="HMI_INT,HMI_REAL" > value
 
-    arg name="size" accepts="int" > buffer size
+    arg name="xrange" accepts="int,time" > X axis range expressed either in samples or duration.
     arg name="xformat" count="optional" accepts="string" > format string for X label
     arg name="yformat" count="optional" accepts="string" > format string for Y label
-    arg name="ymin" count="optional" accepts="int,real" > minimum value foe Y axis
-    arg name="ymax" count="optional" accepts="int,real" > maximum value for Y axis
 }
 
 widget_class("XYGraph") {
     ||
         frequency = 1;
         init() {
-            [this.x_size,
+            let x_duration_s;
+            [x_duration_s,
              this.x_format, this.y_format] = this.args;
 
+            let timeunit = x_duration_s.slice(-1);
+            let factor = {
+                "s":1,
+                "m":60,
+                "h":3600,
+                "d":86400}[timeunit];
+            if(factor == undefined){
+                this.max_data_length = Number(x_duration_s);
+                this.x_duration = undefined;
+            }else{
+                let duration = factor*Number(x_duration_s.slice(0,-1));
+                this.max_data_length = undefined;
+                this.x_duration = duration*1000;
+            }
+
+
             // Min and Max given with paths are meant to describe visible range,
             // not to clip data.
             this.clip = false;
@@ -96,8 +111,7 @@
                 curve.setAttribute("clip-path", "url(#" + clipPath.id + ")");
             }
 
-            this.curves_data = this.curves.map(_unused => []);
-            this.max_data_length = this.args[0];
+            this.curves_data = [];
         }
 
         dispatch(value,oldval, index) {
@@ -108,19 +122,33 @@
             // data is updated only when graph is visible
             // TODO: replace with separate recording
 
+            if(this.curves_data[index] === undefined){
+                this.curves_data[index] = [];
+            }
             this.curves_data[index].push([time, value]);
             let data_length = this.curves_data[index].length;
             let ymin_damaged = false;
             let ymax_damaged = false;
             let overflow;
 
-            if(data_length > this.max_data_length){
-                // remove first item
-                [this.xmin, overflow] = this.curves_data[index].shift();
-                data_length = data_length - 1;
+            if(this.max_data_length == undefined){
+                let peremption = time - this.x_duration;
+                let oldest = this.curves_data[index][0][0]
+                this.xmin = peremption;
+                if(oldest < peremption){
+                    // remove first item
+                    overflow = this.curves_data[index].shift()[1];
+                    data_length = data_length - 1;
+                }
             } else {
-                if(this.xmin == undefined){
-                    this.xmin = time;
+                if(data_length > this.max_data_length){
+                    // remove first item
+                    [this.xmin, overflow] = this.curves_data[index].shift();
+                    data_length = data_length - 1;
+                } else {
+                    if(this.xmin == undefined){
+                        this.xmin = time;
+                    }
                 }
             }
 
@@ -141,6 +169,7 @@
             }
             let Yrange = this.ymax - this.ymin;
 
+            // apply margin by moving min and max to enlarge range
             let [xMargin,yMargin] = zip(this.Margins, [Xrange, Yrange]).map(([m,l]) => m*l);
             [[this.dxmin, this.dxmax],[this.dymin,this.dymax]] =
                 [[this.xmin-xMargin, this.xmax+xMargin],
@@ -163,6 +192,7 @@
                         let px = base_point.x + xv.x + yv.x;
                         let py = base_point.y + xv.y + yv.y;
                         if(!this.fixed_y_range){
+                            // update min and max from curve data if needed
                             if(ymin_damaged && y < this.ymin) this.ymin = y;
                             if(ymax_damaged && y > this.ymax) this.ymax = y;
                         }
@@ -199,6 +229,22 @@
     ||
 }
 
+def "func:check_curves_label_consistency" {
+    param "curve_elts";
+    param "number_to_check";
+    const "res" choose {
+        when "$curve_elts[@inkscape:label = concat('curve_', string($number_to_check))]"{
+            if "$number_to_check > 0"{
+                value "func:check_curves_label_consistency($curve_elts, $number_to_check - 1)";
+            }
+        }
+        otherwise {
+            value "concat('missing curve_', string($number_to_check))";
+        }
+    }
+    result "$res";
+}
+
 widget_defs("XYGraph") {
     labels("/x_interval_minor_mark /x_axis_line /x_interval_major_mark /x_axis_label");
     labels("/y_interval_minor_mark /y_axis_line /y_interval_major_mark /y_axis_label");
@@ -206,15 +252,15 @@
     |     init_specific() {
 
     // collect all curve_n labelled children
-    foreach "$hmi_element/*[regexp:test(@inkscape:label,'^curve_[0-9]+$')]" {
+    const "curves","$hmi_element/*[regexp:test(@inkscape:label,'^curve_[0-9]+$')]";
+    const "curves_error", "func:check_curves_label_consistency($curves,count($curves)-1)";
+    if "string-length($curves_error)"
+        error > XYGraph id="«@id»", label="«@inkscape:label»" : «$curves_error»
+    foreach "$curves" {
         const "label","@inkscape:label";
-        const "id","@id";
-
-        // detect non-unique names
-        if "$hmi_element/*[not($id = @id) and @inkscape:label=$label]"{
-            error > XYGraph id="«$id»", label="«$label»" : elements with data_n label must be unique.
-        }
-    |         this.curves[«substring(@inkscape:label, 7)»] = id("«@id»"); /* «@inkscape:label» */
+        const "_id","@id";
+        const "curve_num", "substring(@inkscape:label, 7)";
+    |         this.curves[«$curve_num»] = id("«@id»"); /* «@inkscape:label» */
     }
 
     |     }
diff -r a35bf9c585cf -r 074046800624 svghmi/widgets_common.ysl2
--- a/svghmi/widgets_common.ysl2	Mon Jun 13 19:22:31 2022 +0200
+++ b/svghmi/widgets_common.ysl2	Mon Jun 27 10:26:04 2022 +0200
@@ -14,6 +14,20 @@
     }
 };
 
+decl warning_labels(*ptr) alias - {
+    labels(*ptr){
+        with "mandatory","'warn'";
+        content;
+    }
+};
+
+decl activable() alias - {
+    |     activable_sub:{
+    warning_labels("/active /inactive") {
+        content;
+    }
+    |     }
+};
 decl activable_labels(*ptr) alias - {
     optional_labels(*ptr) {
         with "subelements","'active inactive'";
@@ -165,6 +179,39 @@
     ||
     var pending_widget_animates = [];
 
+    function _hide(elt, placeholder){
+        if(elt.parentNode != null)
+            placeholder.parentNode.removeChild(elt);
+    }
+    function _show(elt, placeholder){
+        placeholder.parentNode.insertBefore(elt, placeholder);
+    }
+
+    function set_activation_state(eltsub, state){
+        if(eltsub.active_elt != undefined){
+            if(eltsub.active_elt_placeholder == undefined){
+                eltsub.active_elt_placeholder = document.createComment("");
+                eltsub.active_elt.parentNode.insertBefore(eltsub.active_elt_placeholder, eltsub.active_elt);
+            }
+            (state?_show:_hide)(eltsub.active_elt, eltsub.active_elt_placeholder);
+        }
+        if(eltsub.inactive_elt != undefined){
+            if(eltsub.inactive_elt_placeholder == undefined){
+                eltsub.inactive_elt_placeholder = document.createComment("");
+                eltsub.inactive_elt.parentNode.insertBefore(eltsub.inactive_elt_placeholder, eltsub.inactive_elt);
+            }
+            ((state || state==undefined)?_hide:_show)(eltsub.inactive_elt, eltsub.inactive_elt_placeholder);
+        }
+    }
+
+    function activate_activable(eltsub) {
+        set_activation_state(eltsub, true);
+    }
+
+    function inactivate_activable(eltsub) {
+        set_activation_state(eltsub, false);
+    }
+
     class Widget {
         offset = 0;
         frequency = 10; /* FIXME arbitrary default max freq. Obtain from config ? */
@@ -181,7 +228,13 @@
             this.lastapply = indexes.map(() => undefined);
             this.inhibit = indexes.map(() => undefined);
             this.pending = indexes.map(() => undefined);
-            this.bound_unhinibit = this.unhinibit.bind(this);
+            this.bound_uninhibit = this.uninhibit.bind(this);
+
+            this.lastdispatch = indexes.map(() => undefined);
+            this.deafen = indexes.map(() => undefined);
+            this.incoming = indexes.map(() => undefined);
+            this.bound_undeafen = this.undeafen.bind(this);
+
             this.forced_frequency = freq;
             this.clip = true;
         }
@@ -225,7 +278,13 @@
                     if(inhibition != undefined){
                         clearTimeout(inhibition);
                         this.lastapply[i] = undefined;
-                        this.unhinibit(i);
+                        this.uninhibit(i);
+                    }
+                    let deafened = this.deafen[i];
+                    if(deafened != undefined){
+                        clearTimeout(deafened);
+                        this.lastdispatch[i] = undefined;
+                        this.undeafen(i);
                     }
                     let index = this.indexes[i];
                     if(this.relativeness[i])
@@ -313,7 +372,7 @@
             return apply_hmi_value(realindex, new_val);
         }
 
-        unhinibit(index){
+        uninhibit(index){
             this.inhibit[index] = undefined;
             let new_val = this.pending[index];
             this.pending[index] = undefined;
@@ -332,7 +391,7 @@
                 else {
                     let elapsed = now - lastapply;
                     this.pending[index] = new_val;
-                    this.inhibit[index] = setTimeout(this.bound_unhinibit, min_interval - elapsed, index);
+                    this.inhibit[index] = setTimeout(this.bound_uninhibit, min_interval - elapsed, index);
                 }
             }
             else {
@@ -354,13 +413,36 @@
             }
         }
         
+        undeafen(index){
+            this.deafen[index] = undefined;
+            let [new_val, old_val] = this.incoming[index];
+            this.incoming[index] = undefined;
+            this.dispatch(new_val, old_val, index);
+        }
+
         _dispatch(value, oldval, varnum) {
             let dispatch = this.dispatch;
             if(dispatch != undefined){
-                try {
-                    dispatch.call(this, value, oldval, varnum);
-                } catch(err) {
-                    console.log(err);
+                if(this.deafen[varnum] == undefined){
+                    let now = Date.now();
+                    let min_interval = 1000/this.frequency;
+                    let lastdispatch = this.lastdispatch[varnum];
+                    if(lastdispatch == undefined || now > lastdispatch + min_interval){
+                        this.lastdispatch[varnum] = now;
+                        try {
+                            dispatch.call(this, value, oldval, varnum);
+                        } catch(err) {
+                            console.log(err);
+                        }
+                    }
+                    else {
+                        let elapsed = now - lastdispatch;
+                        this.incoming[varnum] = [value, oldval];
+                        this.deafen[varnum] = setTimeout(this.bound_undeafen, min_interval - elapsed, varnum);
+                    }
+                }
+                else {
+                    this.incoming[varnum] = [value, oldval];
                 }
             }
         }
@@ -376,17 +458,10 @@
                 this.pending_animate = true;
                 requestHMIAnimation();
             }
-
-        }
-
-        activate_activable(eltsub) {
-            eltsub.inactive.style.display = "none";
-            eltsub.active.style.display = "";
-        }
-
-        inactivate_activable(eltsub) {
-            eltsub.active.style.display = "none";
-            eltsub.inactive.style.display = "";
+        }
+
+        set_activation_state(state){
+            set_activation_state(this.activable_sub, state);
         }
     }
     ||
@@ -427,6 +502,7 @@
     param "subelements","/..";
     param "hmi_element";
     const "widget_type","@type";
+    const "widget_id","@id";
     foreach "str:split($labels)" {
         const "absolute", "starts-with(., '/')";
         const "name","substring(.,number($absolute)+1)";
@@ -434,8 +510,16 @@
         const "elt","($widget//*[not($absolute) and @inkscape:label=$name] | $widget/*[$absolute and @inkscape:label=$name])[1]";
         choose {
             when "not($elt/@id)" {
-                if "$mandatory='yes'" {
-                    error > «$widget_type» widget must have a «$name» element
+                if "$mandatory!='no'" {
+                    const "errmsg" > «$widget_type» widget (id=«$widget_id») must have a «$name» element
+                    choose { 
+                        when "$mandatory='yes'" {
+                            error > «$errmsg»
+                        }
+                        otherwise {
+                            warning > «$errmsg»
+                        }
+                    }
                 }
                 // otherwise produce nothing
             }
@@ -448,13 +532,21 @@
                         const "subelt","$elt/*[@inkscape:label=$subname][1]";
                         choose {
                             when "not($subelt/@id)" {
-                                if "$mandatory='yes'" {
-                                    error > «$widget_type» widget must have a «$name»/«$subname» element
+                                if "$mandatory!='no'" {
+                                    const "errmsg" > «$widget_type» widget (id=«$widget_id») must have a «$name»/«$subname» element
+                                    choose { 
+                                        when "$mandatory='yes'" {
+                                            error > «$errmsg»
+                                        }
+                                        otherwise {
+                                            warning > «$errmsg»
+                                        }
+                                    }
                                 }
                 |         /* missing «$name»/«$subname» element */
                             }
                             otherwise {
-                |         "«$subname»": id("«$subelt/@id»")`if "position()!=last()" > ,`
+                |         "«$subname»_elt": id("«$subelt/@id»")`if "position()!=last()" > ,`
                             }
                         }
                     }
diff -r a35bf9c585cf -r 074046800624 tests/projects/svghmi/svghmi_0@svghmi/svghmi.svg
--- a/tests/projects/svghmi/svghmi_0@svghmi/svghmi.svg	Mon Jun 13 19:22:31 2022 +0200
+++ b/tests/projects/svghmi/svghmi_0@svghmi/svghmi.svg	Mon Jun 27 10:26:04 2022 +0200
@@ -125,12 +125,12 @@
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
      inkscape:document-units="px"
-     inkscape:current-layer="hmi0"
+     inkscape:current-layer="g5053"
      showgrid="false"
      units="px"
-     inkscape:zoom="0.20046201"
-     inkscape:cx="1401.1703"
-     inkscape:cy="-1495.7332"
+     inkscape:zoom="0.80184804"
+     inkscape:cx="784.66046"
+     inkscape:cy="-449.34319"
      inkscape:window-width="1600"
      inkscape:window-height="836"
      inkscape:window-x="0"
@@ -2244,6 +2244,42 @@
      inkscape:label="HMI:Switch@/PUMP0/BOOLOUT"
      transform="translate(43.983597,40.477445)">
     <g
+       inkscape:label="true"
+       style="fill:#ff0000;stroke:#ff00ff"
+       id="g1242"
+       transform="rotate(90,931.73133,997.97991)">
+      <path
+         inkscape:connector-curvature="0"
+         id="path1230"
+         style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         d="M 825.90067,963.24473 V 1105.042 L 960.08282,916.47893 V 809.26931 Z" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path1232"
+         style="fill:#afafde;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         d="m 825.90067,1105.042 90.50966,81.6485 121.15167,-225.30346 -77.47918,-44.90811 z" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path1234"
+         style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         d="m 960.08282,809.26931 77.47918,36.25625 v 115.86148 l -77.47918,-44.90811 z" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path1236"
+         style="fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         d="M 825.90067,963.24473 916.41033,1029.3537 1037.562,845.52556 960.08282,809.26931 Z" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path1238"
+         style="fill:#d7d7ff;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         d="m 916.41033,1029.3537 v 157.3368 L 1037.562,961.38704 V 845.52556 Z" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path1240"
+         style="fill:#8686bf;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         d="m 825.90067,963.24473 90.50966,66.10897 v 157.3368 l -90.50966,-81.6485 z" />
+    </g>
+    <g
        id="g473"
        style="fill:#ff0000;stroke:#ff00ff"
        inkscape:label="true">
@@ -2278,6 +2314,15 @@
          id="path3461"
          inkscape:connector-curvature="0" />
     </g>
+    <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:#808080;fill-opacity:1;fill-rule:nonzero;stroke:#ff8080;stroke-width:3.77952766;stroke-linecap:round;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="rect1228"
+       width="140.92445"
+       height="229.46991"
+       x="903.8269"
+       y="859.10773"
+       rx="7"
+       ry="7" />
     <g
        id="g501"
        style="fill:#ff0000;stroke:#ff00ff"
diff -r a35bf9c585cf -r 074046800624 tests/projects/svghmi_xy/svghmi_0@svghmi/svghmi.svg
--- a/tests/projects/svghmi_xy/svghmi_0@svghmi/svghmi.svg	Mon Jun 13 19:22:31 2022 +0200
+++ b/tests/projects/svghmi_xy/svghmi_0@svghmi/svghmi.svg	Mon Jun 27 10:26:04 2022 +0200
@@ -306,13 +306,13 @@
      inkscape:window-height="836"
      id="namedview4"
      showgrid="false"
-     inkscape:zoom="2.6222222"
-     inkscape:cx="138.92196"
-     inkscape:cy="243.43713"
+     inkscape:zoom="0.32777778"
+     inkscape:cx="-105.99939"
+     inkscape:cy="106.14218"
      inkscape:window-x="0"
      inkscape:window-y="27"
      inkscape:window-maximized="1"
-     inkscape:current-layer="g2776" />
+     inkscape:current-layer="hmi0" />
   <rect
      inkscape:label="HMI:Page:Home"
      y="0"
@@ -322,100 +322,7 @@
      id="rect1016"
      style="color:#000000;opacity:1;fill:#d6d6d6;fill-opacity:1" />
   <g
-     transform="matrix(3.7795276,0,0,3.7795276,-24.745762,-208.06827)"
-     id="g2776"
-     inkscape:label="HMI:XYGraph|10:100:%.2D:%.4f@/TRENDVAL0@/TRENDVAL1">
-    <rect
-       inkscape:label="background"
-       ry="1.8520833"
-       rx="1.8520833"
-       y="87.995224"
-       x="22.985178"
-       height="114.9259"
-       width="167.31071"
-       id="rect2746"
-       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:#000000;stroke-width:0.66866732;stroke-linecap:round;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
-       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ff0000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 155.83129,160.76911 c -6.48118,-0.65276 -10.17779,-21.29836 -15.40662,-31.02314 -3.53004,-8.41808 -7.5877,-1.29208 -10.4198,6.97869 -4.61524,10.2233 -10.32507,20.13252 -15.96731,14.06607 -7.74352,-19.32213 -18.607099,-4.75161 -26.390159,-23.86108 -4.63396,-13.32693 -11.88412,-10.90822 -16.09527,3.29105 -2.36066,8.20528 -4.35835,18.89169 -7.94811,21.41954 -2.80281,2.74222 -5.9827,1.11526 -8.29837,-5.00354"
-       id="path2748"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cccccccc"
-       inkscape:label="curve_1" />
-    <path
-       inkscape:label="curve_0"
-       sodipodi:nodetypes="cccccccc"
-       inkscape:connector-curvature="0"
-       id="path2750"
-       d="m 55.011564,133.09949 c 6.481177,0.19426 10.177788,6.33834 15.406617,9.23241 3.530037,2.5052 7.587703,0.38452 10.419795,-2.07684 4.615243,-3.04243 10.325074,-5.99139 15.967312,-4.18603 7.743522,5.75022 18.607102,1.41407 26.390162,7.101 4.63396,3.96606 11.88412,3.24626 16.09527,-0.97941 2.36066,-2.44187 4.35835,-5.62212 7.94811,-6.3744 2.80281,-0.81608 5.9827,-0.3319 8.29837,1.48904"
-       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#00b4cf;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-    <path
-       inkscape:label="y_interval_minor_mark"
-       inkscape:connector-curvature="0"
-       id="path2752"
-       d="m 43.637172,172.91226 h -1.35783"
-       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       sodipodi:nodetypes="cc" />
-    <path
-       inkscape:label="y_axis_line"
-       inkscape:connector-curvature="0"
-       id="path2754"
-       d="M 44.123362,185.11382 V 98.607125"
-       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26499999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker6249)"
-       sodipodi:nodetypes="cc" />
-    <path
-       inkscape:label="y_interval_major_mark"
-       inkscape:connector-curvature="0"
-       id="path2756"
-       d="m 43.637172,167.88501 h -3.4745"
-       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-    <text
-       inkscape:label="y_axis_label"
-       id="text2760"
-       y="169.42703"
-       x="38.401363"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.58333302px;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:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       xml:space="preserve"><tspan
-         style="font-size:4.23333311px;text-align:end;text-anchor:end;stroke-width:0.26458332px"
-         y="169.42703"
-         x="38.401363"
-         id="tspan2758"
-         sodipodi:role="line">10</tspan></text>
-    <path
-       sodipodi:nodetypes="cc"
-       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 63.393748,179.65255 v 1.35783"
-       id="path2764"
-       inkscape:connector-curvature="0"
-       inkscape:label="x_interval_minor_mark" />
-    <path
-       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26499999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker6185)"
-       d="M 39.02135,179.37991 H 169.44888"
-       id="path2766"
-       inkscape:connector-curvature="0"
-       inkscape:label="x_axis_line" />
-    <path
-       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 68.420998,179.65255 v 3.4745"
-       id="path2768"
-       inkscape:connector-curvature="0"
-       inkscape:label="x_interval_major_mark" />
-    <text
-       xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.58333302px;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:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
-       x="-184.6293"
-       y="70.044762"
-       id="text2772"
-       inkscape:label="x_axis_label"
-       transform="rotate(-90)"><tspan
-         sodipodi:role="line"
-         id="tspan2770"
-         x="-186.94957"
-         y="70.044762"
-         style="font-size:4.23333311px;stroke-width:0.26458332px;text-anchor:end;text-align:end;">10</tspan></text>
-  </g>
-  <g
-     transform="matrix(2.1611542,0,0,2.1611542,616.6367,256.27681)"
+     transform="matrix(2.1611542,0,0,2.1611542,936.6367,256.27681)"
      id="g7998"
      inkscape:label="HMI:Meter@/TRENDVAL0">
     <desc
@@ -432,7 +339,7 @@
        sodipodi:cx="128.02208"
        sodipodi:type="arc"
        id="path7978"
-       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;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#00b4cf;stroke-width:1.74884677;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:url(#marker19820-3);marker-end:url(#marker25117-7);color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;font-variant-east_asian:normal;vector-effect:none;stroke-linecap:butt;stroke-linejoin:miter" />
+       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:#00b4cf;stroke-width:1.74884677;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:url(#marker19820-3);marker-end:url(#marker25117-7);color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
     <path
        inkscape:label="needle"
        sodipodi:nodetypes="cc"
@@ -466,7 +373,7 @@
          sodipodi:role="line">1</tspan></text>
   </g>
   <g
-     transform="matrix(2.1611542,0,0,2.1611542,630.36551,530.09036)"
+     transform="matrix(2.1611542,0,0,2.1611542,950.36551,530.09036)"
      id="g7998-9"
      inkscape:label="HMI:Meter@/TRENDVAL1">
     <desc
@@ -483,7 +390,7 @@
        sodipodi:cx="128.02208"
        sodipodi:type="arc"
        id="path7978-2"
-       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;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ff0000;stroke-width:1.7488468;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:url(#marker19820-3);marker-end:url(#marker25117-7);color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;font-variant-east_asian:normal;vector-effect:none;stroke-linecap:butt;stroke-linejoin:miter" />
+       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:#ff0000;stroke-width:1.74884677;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:url(#marker19820-3);marker-end:url(#marker25117-7);color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
     <path
        inkscape:label="needle"
        sodipodi:nodetypes="cc"
@@ -519,18 +426,18 @@
   <text
      xml:space="preserve"
      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"
-     x="1003.7288"
-     y="83.8983"
+     x="603.72882"
+     y="663.89832"
      id="text73"
      inkscape:label="_blup"><tspan
        sodipodi:role="line"
        id="tspan71"
-       x="1003.7288"
-       y="83.8983">blup</tspan></text>
+       x="603.72882"
+       y="663.89832">blup</tspan></text>
   <g
      id="g14237"
      inkscape:label="HMI:DropDown:#langs@lang"
-     transform="matrix(0.81491208,0,0,0.81491208,42.49804,-160.06995)"
+     transform="matrix(0.81491208,0,0,0.81491208,-657.50196,-160.06995)"
      style="stroke-width:0.35083869">
     <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:1.75419343;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"
@@ -582,4 +489,380 @@
        inkscape:transform-center-y="10.92088"
        inkscape:label="button" />
   </g>
+  <g
+     style="stroke-width:1.81524098"
+     inkscape:label="HMI:XYGraph|5:10s:%.2D:%.2f@/TRENDVAL0,-1,1@/TRENDVAL1"
+     id="g105"
+     transform="matrix(2.0836471,0,0,2.08057,14.234354,161.43189)">
+    <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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1.21379232;stroke-linecap:round;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="rect79"
+       width="167.31071"
+       height="114.9259"
+       x="22.985178"
+       y="87.995224"
+       rx="3.3594942"
+       ry="3.3644626"
+       inkscape:label="background" />
+    <path
+       inkscape:label="curve_1"
+       sodipodi:nodetypes="cccccccc"
+       inkscape:connector-curvature="0"
+       id="path81"
+       d="m 155.83129,160.76911 c -6.48118,-0.65276 -10.17779,-21.29836 -15.40662,-31.02314 -3.53004,-8.41808 -7.5877,-1.29208 -10.4198,6.97869 -4.61524,10.2233 -10.32507,20.13252 -15.96731,14.06607 -7.74352,-19.32213 -18.607099,-4.75161 -26.390159,-23.86108 -4.63396,-13.32693 -11.88412,-10.90822 -16.09527,3.29105 -2.36066,8.20528 -4.35835,18.89169 -7.94811,21.41954 -2.80281,2.74222 -5.9827,1.11526 -8.29837,-5.00354"
+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ff0000;stroke-width:1.81524098;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#00b4cf;stroke-width:1.81524098;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 55.011564,133.09949 c 6.481177,0.19426 10.177788,6.33834 15.406617,9.23241 3.530037,2.5052 7.587703,0.38452 10.419795,-2.07684 4.615243,-3.04243 10.325074,-5.99139 15.967312,-4.18603 7.743522,5.75022 18.607102,1.41407 26.390162,7.101 4.63396,3.96606 11.88412,3.24626 16.09527,-0.97941 2.36066,-2.44187 4.35835,-5.62212 7.94811,-6.3744 2.80281,-0.81608 5.9827,-0.3319 8.29837,1.48904"
+       id="path83"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc"
+       inkscape:label="curve_0" />
+    <path
+       sodipodi:nodetypes="cc"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.12007062;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 44.208773,172.91226 h -1.35783"
+       id="path85"
+       inkscape:connector-curvature="0"
+       inkscape:label="y_interval_minor_mark" />
+    <path
+       sodipodi:nodetypes="cc"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.48103884;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker6249)"
+       d="M 44.123362,185.11382 V 98.607125"
+       id="path87"
+       inkscape:connector-curvature="0"
+       inkscape:label="y_axis_line" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.24014124;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 44.208773,167.88501 h -3.4745"
+       id="path89"
+       inkscape:connector-curvature="0"
+       inkscape:label="y_interval_major_mark" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.20188332px;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:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.48028249px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="40.321072"
+       y="169.03821"
+       id="text93"
+       inkscape:label="y_axis_label"><tspan
+         sodipodi:role="line"
+         id="tspan91"
+         x="40.321072"
+         y="169.03821"
+         style="font-size:3.20188332px;text-align:end;text-anchor:end;stroke-width:0.48028249px">10</tspan></text>
+    <path
+       inkscape:label="x_interval_minor_mark"
+       inkscape:connector-curvature="0"
+       id="path95"
+       d="m 63.393748,179.65255 v 1.35783"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.12007062;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       sodipodi:nodetypes="cc" />
+    <path
+       inkscape:label="x_axis_line"
+       inkscape:connector-curvature="0"
+       id="path97"
+       d="M 39.02135,179.37991 H 169.44888"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.48103884;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker6185)" />
+    <path
+       inkscape:label="x_interval_major_mark"
+       inkscape:connector-curvature="0"
+       id="path99"
+       d="m 68.420998,179.65255 v 3.4745"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.24014124;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <text
+       transform="rotate(-90)"
+       inkscape:label="x_axis_label"
+       id="text103"
+       y="69.591827"
+       x="-183.59244"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.20188332px;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:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.48028249px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         style="font-size:3.20188332px;text-align:end;text-anchor:end;stroke-width:0.48028249px"
+         y="69.591827"
+         x="-183.59244"
+         id="tspan101"
+         sodipodi:role="line">10</tspan></text>
+  </g>
+  <g
+     transform="matrix(2.0836471,0,0,2.08057,14.234354,-118.56811)"
+     id="g127"
+     inkscape:label="HMI:XYGraph|10:100:%.2D:%.2f@/TRENDVAL0@/TRENDVAL1"
+     style="stroke-width:1.81524098">
+    <rect
+       inkscape:label="background"
+       ry="3.3644626"
+       rx="3.3594942"
+       y="87.995224"
+       x="22.985178"
+       height="114.9259"
+       width="167.31071"
+       id="rect101"
+       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:#000000;stroke-width:1.21379232;stroke-linecap:round;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
+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ff0000;stroke-width:1.81524098;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 155.83129,160.76911 c -6.48118,-0.65276 -10.17779,-21.29836 -15.40662,-31.02314 -3.53004,-8.41808 -7.5877,-1.29208 -10.4198,6.97869 -4.61524,10.2233 -10.32507,20.13252 -15.96731,14.06607 -7.74352,-19.32213 -18.607099,-4.75161 -26.390159,-23.86108 -4.63396,-13.32693 -11.88412,-10.90822 -16.09527,3.29105 -2.36066,8.20528 -4.35835,18.89169 -7.94811,21.41954 -2.80281,2.74222 -5.9827,1.11526 -8.29837,-5.00354"
+       id="path103"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc"
+       inkscape:label="curve_1" />
+    <path
+       inkscape:label="curve_0"
+       sodipodi:nodetypes="cccccccc"
+       inkscape:connector-curvature="0"
+       id="path105"
+       d="m 55.011564,133.09949 c 6.481177,0.19426 10.177788,6.33834 15.406617,9.23241 3.530037,2.5052 7.587703,0.38452 10.419795,-2.07684 4.615243,-3.04243 10.325074,-5.99139 15.967312,-4.18603 7.743522,5.75022 18.607102,1.41407 26.390162,7.101 4.63396,3.96606 11.88412,3.24626 16.09527,-0.97941 2.36066,-2.44187 4.35835,-5.62212 7.94811,-6.3744 2.80281,-0.81608 5.9827,-0.3319 8.29837,1.48904"
+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#00b4cf;stroke-width:1.81524098;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       inkscape:label="y_interval_minor_mark"
+       inkscape:connector-curvature="0"
+       id="path107"
+       d="m 44.208773,172.91226 h -1.35783"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.12007062;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       sodipodi:nodetypes="cc" />
+    <path
+       inkscape:label="y_axis_line"
+       inkscape:connector-curvature="0"
+       id="path109"
+       d="M 44.123362,185.11382 V 98.607125"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.48103884;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker6249)"
+       sodipodi:nodetypes="cc" />
+    <path
+       inkscape:label="y_interval_major_mark"
+       inkscape:connector-curvature="0"
+       id="path111"
+       d="m 44.208773,167.88501 h -3.4745"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.24014124;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <text
+       inkscape:label="y_axis_label"
+       id="text115"
+       y="169.03821"
+       x="40.321072"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.20188332px;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:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.48028249px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         style="font-size:3.20188332px;text-align:end;text-anchor:end;stroke-width:0.48028249px"
+         y="169.03821"
+         x="40.321072"
+         id="tspan113"
+         sodipodi:role="line">10</tspan></text>
+    <path
+       sodipodi:nodetypes="cc"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.12007062;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 63.393748,179.65255 v 1.35783"
+       id="path117"
+       inkscape:connector-curvature="0"
+       inkscape:label="x_interval_minor_mark" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.48103884;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker6185)"
+       d="M 39.02135,179.37991 H 169.44888"
+       id="path119"
+       inkscape:connector-curvature="0"
+       inkscape:label="x_axis_line" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.24014124;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 68.420998,179.65255 v 3.4745"
+       id="path121"
+       inkscape:connector-curvature="0"
+       inkscape:label="x_interval_major_mark" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.20188332px;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:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.48028249px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="-183.59244"
+       y="69.591827"
+       id="text125"
+       inkscape:label="x_axis_label"
+       transform="rotate(-90)"><tspan
+         sodipodi:role="line"
+         id="tspan123"
+         x="-183.59244"
+         y="69.591827"
+         style="font-size:3.20188332px;text-align:end;text-anchor:end;stroke-width:0.48028249px">10</tspan></text>
+  </g>
+  <g
+     transform="matrix(2.0836471,0,0,2.08057,414.23435,161.43189)"
+     id="g120"
+     inkscape:label="HMI:XYGraph|10:1s:%.2D:%.2f@/TRENDVAL0,-2,2@/TRENDVAL1"
+     style="stroke-width:1.81524098">
+    <rect
+       inkscape:label="background"
+       ry="3.3644626"
+       rx="3.3594942"
+       y="87.995224"
+       x="22.985178"
+       height="114.9259"
+       width="167.31071"
+       id="rect93"
+       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:#000000;stroke-width:1.21379232;stroke-linecap:round;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
+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ff0000;stroke-width:1.81524098;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 155.83129,160.76911 c -6.48118,-0.65276 -10.17779,-21.29836 -15.40662,-31.02314 -3.53004,-8.41808 -7.5877,-1.29208 -10.4198,6.97869 -4.61524,10.2233 -10.32507,20.13252 -15.96731,14.06607 -7.74352,-19.32213 -18.607099,-4.75161 -26.390159,-23.86108 -4.63396,-13.32693 -11.88412,-10.90822 -16.09527,3.29105 -2.36066,8.20528 -4.35835,18.89169 -7.94811,21.41954 -2.80281,2.74222 -5.9827,1.11526 -8.29837,-5.00354"
+       id="path96"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc"
+       inkscape:label="curve_1" />
+    <path
+       inkscape:label="curve_0"
+       sodipodi:nodetypes="cccccccc"
+       inkscape:connector-curvature="0"
+       id="path98"
+       d="m 55.011564,133.09949 c 6.481177,0.19426 10.177788,6.33834 15.406617,9.23241 3.530037,2.5052 7.587703,0.38452 10.419795,-2.07684 4.615243,-3.04243 10.325074,-5.99139 15.967312,-4.18603 7.743522,5.75022 18.607102,1.41407 26.390162,7.101 4.63396,3.96606 11.88412,3.24626 16.09527,-0.97941 2.36066,-2.44187 4.35835,-5.62212 7.94811,-6.3744 2.80281,-0.81608 5.9827,-0.3319 8.29837,1.48904"
+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#00b4cf;stroke-width:1.81524098;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       inkscape:label="y_interval_minor_mark"
+       inkscape:connector-curvature="0"
+       id="path100"
+       d="m 44.208773,172.91226 h -1.35783"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.12007062;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       sodipodi:nodetypes="cc" />
+    <path
+       inkscape:label="y_axis_line"
+       inkscape:connector-curvature="0"
+       id="path102"
+       d="M 44.123362,185.11382 V 98.607125"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.48103884;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker6249)"
+       sodipodi:nodetypes="cc" />
+    <path
+       inkscape:label="y_interval_major_mark"
+       inkscape:connector-curvature="0"
+       id="path104"
+       d="m 44.208773,167.88501 h -3.4745"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.24014124;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <text
+       inkscape:label="y_axis_label"
+       id="text108"
+       y="169.03821"
+       x="40.321072"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.20188332px;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:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.48028249px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         style="font-size:3.20188332px;text-align:end;text-anchor:end;stroke-width:0.48028249px"
+         y="169.03821"
+         x="40.321072"
+         id="tspan106"
+         sodipodi:role="line">10</tspan></text>
+    <path
+       sodipodi:nodetypes="cc"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.12007062;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 63.393748,179.65255 v 1.35783"
+       id="path110"
+       inkscape:connector-curvature="0"
+       inkscape:label="x_interval_minor_mark" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.48103884;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker6185)"
+       d="M 39.02135,179.37991 H 169.44888"
+       id="path112"
+       inkscape:connector-curvature="0"
+       inkscape:label="x_axis_line" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.24014124;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 68.420998,179.65255 v 3.4745"
+       id="path114"
+       inkscape:connector-curvature="0"
+       inkscape:label="x_interval_major_mark" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.20188332px;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:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.48028249px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="-183.59244"
+       y="69.591827"
+       id="text118"
+       inkscape:label="x_axis_label"
+       transform="rotate(-90)"><tspan
+         sodipodi:role="line"
+         id="tspan116"
+         x="-183.59244"
+         y="69.591827"
+         style="font-size:3.20188332px;text-align:end;text-anchor:end;stroke-width:0.48028249px">10</tspan></text>
+  </g>
+  <g
+     style="stroke-width:1.81524098"
+     inkscape:label="HMI:XYGraph|5:1m:%.2D:%.2f@/TRENDVAL0,-0.5,0.5@/TRENDVAL1"
+     id="g148"
+     transform="matrix(2.0836471,0,0,2.08057,414.23435,-118.56811)">
+    <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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1.21379232;stroke-linecap:round;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="rect122"
+       width="167.31071"
+       height="114.9259"
+       x="22.985178"
+       y="87.995224"
+       rx="3.3594942"
+       ry="3.3644626"
+       inkscape:label="background" />
+    <path
+       inkscape:label="curve_1"
+       sodipodi:nodetypes="cccccccc"
+       inkscape:connector-curvature="0"
+       id="path124"
+       d="m 155.83129,160.76911 c -6.48118,-0.65276 -10.17779,-21.29836 -15.40662,-31.02314 -3.53004,-8.41808 -7.5877,-1.29208 -10.4198,6.97869 -4.61524,10.2233 -10.32507,20.13252 -15.96731,14.06607 -7.74352,-19.32213 -18.607099,-4.75161 -26.390159,-23.86108 -4.63396,-13.32693 -11.88412,-10.90822 -16.09527,3.29105 -2.36066,8.20528 -4.35835,18.89169 -7.94811,21.41954 -2.80281,2.74222 -5.9827,1.11526 -8.29837,-5.00354"
+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ff0000;stroke-width:1.81524098;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#00b4cf;stroke-width:1.81524098;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 55.011564,133.09949 c 6.481177,0.19426 10.177788,6.33834 15.406617,9.23241 3.530037,2.5052 7.587703,0.38452 10.419795,-2.07684 4.615243,-3.04243 10.325074,-5.99139 15.967312,-4.18603 7.743522,5.75022 18.607102,1.41407 26.390162,7.101 4.63396,3.96606 11.88412,3.24626 16.09527,-0.97941 2.36066,-2.44187 4.35835,-5.62212 7.94811,-6.3744 2.80281,-0.81608 5.9827,-0.3319 8.29837,1.48904"
+       id="path126"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc"
+       inkscape:label="curve_0" />
+    <path
+       sodipodi:nodetypes="cc"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.12007062;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 44.208773,172.91226 h -1.35783"
+       id="path128"
+       inkscape:connector-curvature="0"
+       inkscape:label="y_interval_minor_mark" />
+    <path
+       sodipodi:nodetypes="cc"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.48103884;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker6249)"
+       d="M 44.123362,185.11382 V 98.607125"
+       id="path130"
+       inkscape:connector-curvature="0"
+       inkscape:label="y_axis_line" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.24014124;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 44.208773,167.88501 h -3.4745"
+       id="path132"
+       inkscape:connector-curvature="0"
+       inkscape:label="y_interval_major_mark" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.20188332px;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:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.48028249px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="40.321072"
+       y="169.03821"
+       id="text136"
+       inkscape:label="y_axis_label"><tspan
+         sodipodi:role="line"
+         id="tspan134"
+         x="40.321072"
+         y="169.03821"
+         style="font-size:3.20188332px;text-align:end;text-anchor:end;stroke-width:0.48028249px">10</tspan></text>
+    <path
+       inkscape:label="x_interval_minor_mark"
+       inkscape:connector-curvature="0"
+       id="path138"
+       d="m 63.393748,179.65255 v 1.35783"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.12007062;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       sodipodi:nodetypes="cc" />
+    <path
+       inkscape:label="x_axis_line"
+       inkscape:connector-curvature="0"
+       id="path140"
+       d="M 39.02135,179.37991 H 169.44888"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.48103884;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker6185)" />
+    <path
+       inkscape:label="x_interval_major_mark"
+       inkscape:connector-curvature="0"
+       id="path142"
+       d="m 68.420998,179.65255 v 3.4745"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.24014124;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <text
+       transform="rotate(-90)"
+       inkscape:label="x_axis_label"
+       id="text146"
+       y="69.591827"
+       x="-183.59244"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.20188332px;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:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.48028249px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         style="font-size:3.20188332px;text-align:end;text-anchor:end;stroke-width:0.48028249px"
+         y="69.591827"
+         x="-183.59244"
+         id="tspan144"
+         sodipodi:role="line">10</tspan></text>
+  </g>
 </svg>