SVGHMI: update generated xslt.
authorEdouard Tisserant
Wed, 01 Jun 2022 09:15:26 +0200
changeset 3506 ca312be56929
parent 3505 a27b5862e363
child 3507 e87a2daace80
SVGHMI: update generated xslt.
svghmi/analyse_widget.xslt
svghmi/gen_dnd_widget_svg.xslt
svghmi/gen_index_xhtml.xslt
--- a/svghmi/analyse_widget.xslt	Wed Jun 01 09:14:19 2022 +0200
+++ b/svghmi/analyse_widget.xslt	Wed Jun 01 09:15:26 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"/>
@@ -50,6 +50,16 @@
           <xsl:value-of select="$type"/>
         </xsl:attribute>
         <xsl:if test="$freq">
+          <xsl:if test="not(regexp:test($freq,'^[0-9]*(\.[0-9]+)?[smh]?'))">
+            <xsl:message terminate="yes">
+              <xsl:text>Widget id:</xsl:text>
+              <xsl:value-of select="$id"/>
+              <xsl:text> label:</xsl:text>
+              <xsl:value-of select="$label"/>
+              <xsl:text> has wrong syntax of frequency forcing </xsl:text>
+              <xsl:value-of select="$freq"/>
+            </xsl:message>
+          </xsl:if>
           <xsl:attribute name="freq">
             <xsl:value-of select="$freq"/>
           </xsl:attribute>
@@ -223,8 +233,6 @@
   </xsl:template>
   <xsl:template name="generated_button_class">
     <xsl:param name="fsm"/>
-    <xsl:text>    frequency = 5;
-</xsl:text>
     <xsl:text>    display = "inactive";
 </xsl:text>
     <xsl:text>    state = "init";
@@ -717,7 +725,7 @@
       <xsl:value-of select="@type"/>
     </type>
     <longdesc>
-      <xsl:text>PathSlider - 
+      <xsl:text>PathSlider -
 </xsl:text>
     </longdesc>
     <shortdesc>
@@ -877,6 +885,62 @@
       <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="size" accepts="int">
+      <xsl:text>buffer size</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>
+    <arg name="xmin" count="optional" accepts="int,real">
+      <xsl:text>minimum value foe X axis</xsl:text>
+    </arg>
+    <arg name="xmax" count="optional" accepts="int,real">
+      <xsl:text>maximum value for X axis</xsl:text>
+    </arg>
+  </xsl:template>
   <xsl:template mode="document" match="@* | node()">
     <xsl:copy>
       <xsl:apply-templates mode="document" select="@* | node()"/>
--- a/svghmi/gen_dnd_widget_svg.xslt	Wed Jun 01 09:14:19 2022 +0200
+++ b/svghmi/gen_dnd_widget_svg.xslt	Wed Jun 01 09:15:26 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"/>
@@ -52,6 +52,16 @@
           <xsl:value-of select="$type"/>
         </xsl:attribute>
         <xsl:if test="$freq">
+          <xsl:if test="not(regexp:test($freq,'^[0-9]*(\.[0-9]+)?[smh]?'))">
+            <xsl:message terminate="yes">
+              <xsl:text>Widget id:</xsl:text>
+              <xsl:value-of select="$id"/>
+              <xsl:text> label:</xsl:text>
+              <xsl:value-of select="$label"/>
+              <xsl:text> has wrong syntax of frequency forcing </xsl:text>
+              <xsl:value-of select="$freq"/>
+            </xsl:message>
+          </xsl:if>
           <xsl:attribute name="freq">
             <xsl:value-of select="$freq"/>
           </xsl:attribute>
--- a/svghmi/gen_index_xhtml.xslt	Wed Jun 01 09:14:19 2022 +0200
+++ b/svghmi/gen_index_xhtml.xslt	Wed Jun 01 09:15:26 2022 +0200
@@ -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"/>
@@ -207,6 +207,16 @@
           <xsl:value-of select="$type"/>
         </xsl:attribute>
         <xsl:if test="$freq">
+          <xsl:if test="not(regexp:test($freq,'^[0-9]*(\.[0-9]+)?[smh]?'))">
+            <xsl:message terminate="yes">
+              <xsl:text>Widget id:</xsl:text>
+              <xsl:value-of select="$id"/>
+              <xsl:text> label:</xsl:text>
+              <xsl:value-of select="$label"/>
+              <xsl:text> has wrong syntax of frequency forcing </xsl:text>
+              <xsl:value-of select="$freq"/>
+            </xsl:message>
+          </xsl:if>
           <xsl:attribute name="freq">
             <xsl:value-of select="$freq"/>
           </xsl:attribute>
@@ -1098,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>
@@ -1248,7 +1263,9 @@
     <xsl:variable name="freq">
       <xsl:choose>
         <xsl:when test="$widget/@freq">
+          <xsl:text>"</xsl:text>
           <xsl:value-of select="$widget/@freq"/>
+          <xsl:text>"</xsl:text>
         </xsl:when>
         <xsl:otherwise>
           <xsl:text>undefined</xsl:text>
@@ -1473,10 +1490,84 @@
 </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>
+    <xsl:text>        this.clip = true;
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    do_init(){
+</xsl:text>
+    <xsl:text>        let forced = this.forced_frequency;
+</xsl:text>
+    <xsl:text>        if(forced !== undefined){
+</xsl:text>
+    <xsl:text>            /*
+</xsl:text>
+    <xsl:text>            once every 10 seconds : 10s
+</xsl:text>
+    <xsl:text>            once per minute : 1m
+</xsl:text>
+    <xsl:text>            once per hour : 1h
+</xsl:text>
+    <xsl:text>            once per day : 1d
+</xsl:text>
+    <xsl:text>            */
+</xsl:text>
+    <xsl:text>            let unit = forced.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}[unit];
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            this.frequency = factor ? 1/(factor * Number(forced.slice(0,-1)))
+</xsl:text>
+    <xsl:text>                                      : Number(forced);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        let init = this.init;
+</xsl:text>
+    <xsl:text>        if(typeof(init) == "function"){
+</xsl:text>
+    <xsl:text>            // try {
+</xsl:text>
+    <xsl:text>                init.call(this);
+</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>    }
 </xsl:text>
     <xsl:text>
@@ -1499,10 +1590,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])
@@ -1649,7 +1752,9 @@
 </xsl:text>
     <xsl:text>        let new_val = eval_operation_string(old_val, opstr);
 </xsl:text>
-    <xsl:text>        new_val = this.clip_min_max(index, new_val);
+    <xsl:text>        if(this.clip)
+</xsl:text>
+    <xsl:text>            new_val = this.clip_min_max(index, new_val);
 </xsl:text>
     <xsl:text>        return apply_hmi_value(realindex, new_val);
 </xsl:text>
@@ -1663,7 +1768,9 @@
 </xsl:text>
     <xsl:text>        if(realindex == undefined) return undefined;
 </xsl:text>
-    <xsl:text>        new_val = this.clip_min_max(index, new_val);
+    <xsl:text>        if(this.clip)
+</xsl:text>
+    <xsl:text>            new_val = this.clip_min_max(index, new_val);
 </xsl:text>
     <xsl:text>        return apply_hmi_value(realindex, new_val);
 </xsl:text>
@@ -1671,7 +1778,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>
@@ -1709,7 +1816,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>
@@ -1753,19 +1860,65 @@
 </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>
@@ -1883,8 +2036,10 @@
     <xsl:param name="hmi_element"/>
     <xsl:variable name="widget_type" select="@type"/>
     <xsl:for-each select="str:split($labels)">
-      <xsl:variable name="name" select="."/>
-      <xsl:variable name="elt" select="$result_widgets[@id = $hmi_element/@id]//*[@inkscape:label=$name][1]"/>
+      <xsl:variable name="absolute" select="starts-with(., '/')"/>
+      <xsl:variable name="name" select="substring(.,number($absolute)+1)"/>
+      <xsl:variable name="widget" select="$result_widgets[@id = $hmi_element/@id]"/>
+      <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'">
@@ -2400,10 +2555,6 @@
     <xsl:value-of select="@name"/>
     <xsl:text>_action(){
 </xsl:text>
-    <xsl:text>console.log("Entering state </xsl:text>
-    <xsl:value-of select="@name"/>
-    <xsl:text>", this.frequency);
-</xsl:text>
     <xsl:apply-templates mode="actions" select="*"/>
     <xsl:text>    }
 </xsl:text>
@@ -2424,8 +2575,6 @@
   </xsl:template>
   <xsl:template name="generated_button_class">
     <xsl:param name="fsm"/>
-    <xsl:text>    frequency = 5;
-</xsl:text>
     <xsl:text>    display = "inactive";
 </xsl:text>
     <xsl:text>    state = "init";
@@ -2492,6 +2641,8 @@
     <xsl:text>ButtonWidget</xsl:text>
     <xsl:text> extends Widget{
 </xsl:text>
+    <xsl:text>    frequency = 5;
+</xsl:text>
     <xsl:variable name="fsm" select="exsl:node-set($_button_fsm)"/>
     <xsl:call-template name="generated_button_class">
       <xsl:with-param name="fsm" select="$fsm"/>
@@ -2514,6 +2665,8 @@
     <xsl:text>PushButtonWidget</xsl:text>
     <xsl:text> extends Widget{
 </xsl:text>
+    <xsl:text>    frequency = 20;
+</xsl:text>
     <xsl:variable name="fsm" select="exsl:node-set($_push_button_fsm)"/>
     <xsl:call-template name="generated_button_class">
       <xsl:with-param name="fsm" select="$fsm"/>
@@ -4133,7 +4286,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">
@@ -6116,7 +6269,7 @@
       <xsl:value-of select="@type"/>
     </type>
     <longdesc>
-      <xsl:text>PathSlider - 
+      <xsl:text>PathSlider -
 </xsl:text>
     </longdesc>
     <shortdesc>
@@ -6159,7 +6312,7 @@
 </xsl:text>
     <xsl:text>    origPt = undefined;
 </xsl:text>
-    <xsl:text>    
+    <xsl:text>
 </xsl:text>
     <xsl:text>
 </xsl:text>
@@ -6243,7 +6396,7 @@
 </xsl:text>
     <xsl:text>          bestDistance = beforeDistance;
 </xsl:text>
-    <xsl:text>        } else if ((afterLength = bestLength + precision) &lt;= this.pathLength &amp;&amp; 
+    <xsl:text>        } else if ((afterLength = bestLength + precision) &lt;= this.pathLength &amp;&amp;
 </xsl:text>
     <xsl:text>                   (afterDistance = distance2(afterPoint = this.path_elt.getPointAtLength(afterLength))) &lt; bestDistance) {
 </xsl:text>
@@ -7672,6 +7825,1319 @@
       <xsl:with-param name="mandatory" select="'no'"/>
     </xsl:call-template>
   </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="size" accepts="int">
+      <xsl:text>buffer size</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>
+    <arg name="xmin" count="optional" accepts="int,real">
+      <xsl:text>minimum value foe X axis</xsl:text>
+    </arg>
+    <arg name="xmax" count="optional" accepts="int,real">
+      <xsl:text>maximum value for X axis</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 = this.curves.map(_unused =&gt; []);
+</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>        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>
+  <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>/x_interval_minor_mark /x_axis_line /x_interval_major_mark /x_axis_label</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>/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:for-each select="$hmi_element/*[regexp:test(@inkscape:label,'^curve_[0-9]+$')]">
+      <xsl:variable name="label" select="@inkscape:label"/>
+      <xsl:variable name="id" select="@id"/>
+      <xsl:if test="$hmi_element/*[not($id = @id) and @inkscape:label=$label]">
+        <xsl:message terminate="yes">
+          <xsl:text>XYGraph id="</xsl:text>
+          <xsl:value-of select="$id"/>
+          <xsl:text>", label="</xsl:text>
+          <xsl:value-of select="$label"/>
+          <xsl:text>" : elements with data_n label must be unique.</xsl:text>
+        </xsl:message>
+      </xsl:if>
+      <xsl:text>        this.curves[</xsl:text>
+      <xsl:value-of select="substring(@inkscape:label, 7)"/>
+      <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>
       <xsl:text>Made with SVGHMI. https://beremiz.org</xsl:text>
@@ -7751,7 +9217,7 @@
 </xsl:text>
           <xsl:text>        modulo: /^%{2}/,
 </xsl:text>
-          <xsl:text>        placeholder: /^%(?:([1-9]\d*)\$|\(([^)]+)\))?(\+)?(0|'[^$])?(-)?(\d+)?(?:\.(\d+))?([b-gijostTuvxX])/,
+          <xsl:text>        placeholder: /^%(?:([1-9]\d*)\$|\(([^)]+)\))?(\+)?(0|'[^$])?(-)?(\d+)?(?:\.(\d+))?([b-gijostTuvxXD])/,
 </xsl:text>
           <xsl:text>        key: /^([a-z_][a-z_\d]*)/i,
 </xsl:text>
@@ -7877,6 +9343,108 @@
 </xsl:text>
           <xsl:text>                        break
 </xsl:text>
+          <xsl:text>                    case 'D':
+</xsl:text>
+          <xsl:text>                        /*  
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>                            select date format with width
+</xsl:text>
+          <xsl:text>                            select time format with precision
+</xsl:text>
+          <xsl:text>                            %D  =&gt; 13:31 AM (default)
+</xsl:text>
+          <xsl:text>                            %1D  =&gt; 13:31 AM
+</xsl:text>
+          <xsl:text>                            %.1D  =&gt; 07/07/20
+</xsl:text>
+          <xsl:text>                            %1.1D  =&gt; 07/07/20, 13:31 AM
+</xsl:text>
+          <xsl:text>                            %1.2D  =&gt; 07/07/20, 13:31:55 AM
+</xsl:text>
+          <xsl:text>                            %2.2D  =&gt; May 5, 2022, 9:29:16 AM
+</xsl:text>
+          <xsl:text>                            %3.3D  =&gt; May 5, 2022 at 9:28:16 AM GMT+2
+</xsl:text>
+          <xsl:text>                            %4.4D  =&gt; Thursday, May 5, 2022 at 9:26:59 AM Central European Summer Time
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>                            see meaning of DateTimeFormat's options "datestyle" and "timestyle" in MDN 
+</xsl:text>
+          <xsl:text>                        */
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>                        let [datestyle, timestyle] = [ph.width, ph.precision].map(val =&gt; ({
+</xsl:text>
+          <xsl:text>                            1: "short",
+</xsl:text>
+          <xsl:text>                            2: "medium",
+</xsl:text>
+          <xsl:text>                            3: "long",
+</xsl:text>
+          <xsl:text>                            4: "full"
+</xsl:text>
+          <xsl:text>                        }[val]));
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>                        if(timestyle === undefined &amp;&amp; datestyle === undefined){
+</xsl:text>
+          <xsl:text>                            timestyle = "short";
+</xsl:text>
+          <xsl:text>                        }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>                        let options = {
+</xsl:text>
+          <xsl:text>                            dateStyle: datestyle,
+</xsl:text>
+          <xsl:text>                            timeStyle: timestyle,
+</xsl:text>
+          <xsl:text>                            hour12: false
+</xsl:text>
+          <xsl:text>                        }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>                        /* get lang from globals */
+</xsl:text>
+          <xsl:text>                        let lang = get_current_lang_code();
+</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>
+          <xsl:text>                            TODO: select with padding char
+</xsl:text>
+          <xsl:text>                                  a: absolute time and date (default)
+</xsl:text>
+          <xsl:text>                                  r: relative time
+</xsl:text>
+          <xsl:text>                        */
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>                        break
+</xsl:text>
           <xsl:text>                    case 'j':
 </xsl:text>
           <xsl:text>                        arg = JSON.stringify(arg, null, ph.width ? parseInt(ph.width) : 0)
@@ -8181,6 +9749,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>
@@ -8221,498 +10213,490 @@
 </xsl:text>
           <xsl:text>        let widget = hmi_widgets[id];
 </xsl:text>
-          <xsl:text>        let init = widget.init;
-</xsl:text>
-          <xsl:text>        if(typeof(init) == "function"){
-</xsl:text>
-          <xsl:text>            try {
-</xsl:text>
-          <xsl:text>                init.call(widget);
-</xsl:text>
-          <xsl:text>            } catch(err) {
-</xsl:text>
-          <xsl:text>                console.log(err);
+          <xsl:text>        widget.do_init();
+</xsl:text>
+          <xsl:text>    });
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// Open WebSocket to relative "/ws" address
+</xsl:text>
+          <xsl:text>var has_watchdog = window.location.hash == "#watchdog";
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>var ws_url = 
+</xsl:text>
+          <xsl:text>    window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws')
+</xsl:text>
+          <xsl:text>    + '?mode=' + (has_watchdog ? "watchdog" : "multiclient");
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>var ws = new WebSocket(ws_url);
+</xsl:text>
+          <xsl:text>ws.binaryType = 'arraybuffer';
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>const dvgetters = {
+</xsl:text>
+          <xsl:text>    INT: (dv,offset) =&gt; [dv.getInt16(offset, true), 2],
+</xsl:text>
+          <xsl:text>    BOOL: (dv,offset) =&gt; [dv.getInt8(offset, true), 1],
+</xsl:text>
+          <xsl:text>    NODE: (dv,offset) =&gt; [dv.getInt8(offset, true), 1],
+</xsl:text>
+          <xsl:text>    REAL: (dv,offset) =&gt; [dv.getFloat32(offset, true), 4],
+</xsl:text>
+          <xsl:text>    STRING: (dv, offset) =&gt; {
+</xsl:text>
+          <xsl:text>        const size = dv.getInt8(offset);
+</xsl:text>
+          <xsl:text>        return [
+</xsl:text>
+          <xsl:text>            String.fromCharCode.apply(null, new Uint8Array(
+</xsl:text>
+          <xsl:text>                dv.buffer, /* original buffer */
+</xsl:text>
+          <xsl:text>                offset + 1, /* string starts after size*/
+</xsl:text>
+          <xsl:text>                size /* size of string */
+</xsl:text>
+          <xsl:text>            )), size + 1]; /* total increment */
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// Apply updates recieved through ws.onmessage to subscribed widgets
+</xsl:text>
+          <xsl:text>function apply_updates() {
+</xsl:text>
+          <xsl:text>    updates.forEach((value, index) =&gt; {
+</xsl:text>
+          <xsl:text>        dispatch_value(index, value);
+</xsl:text>
+          <xsl:text>    });
+</xsl:text>
+          <xsl:text>    updates.clear();
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// Called on requestAnimationFrame, modifies DOM
+</xsl:text>
+          <xsl:text>var requestAnimationFrameID = null;
+</xsl:text>
+          <xsl:text>function animate() {
+</xsl:text>
+          <xsl:text>    // Do the page swith if any one pending
+</xsl:text>
+          <xsl:text>    if(current_subscribed_page != current_visible_page){
+</xsl:text>
+          <xsl:text>        switch_visible_page(current_subscribed_page);
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    while(widget = need_cache_apply.pop()){
+</xsl:text>
+          <xsl:text>        widget.apply_cache();
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    if(jumps_need_update) update_jumps();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    apply_updates();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    pending_widget_animates.forEach(widget =&gt; widget._animate());
+</xsl:text>
+          <xsl:text>    pending_widget_animates = [];
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    requestAnimationFrameID = null;
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function requestHMIAnimation() {
+</xsl:text>
+          <xsl:text>    if(requestAnimationFrameID == null){
+</xsl:text>
+          <xsl:text>        requestAnimationFrameID = window.requestAnimationFrame(animate);
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// Message reception handler
+</xsl:text>
+          <xsl:text>// Hash is verified and HMI values updates resulting from binary parsing
+</xsl:text>
+          <xsl:text>// are stored until browser can compute next frame, DOM is left untouched
+</xsl:text>
+          <xsl:text>ws.onmessage = function (evt) {
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    let data = evt.data;
+</xsl:text>
+          <xsl:text>    let dv = new DataView(data);
+</xsl:text>
+          <xsl:text>    let i = 0;
+</xsl:text>
+          <xsl:text>    try {
+</xsl:text>
+          <xsl:text>        for(let hash_int of hmi_hash) {
+</xsl:text>
+          <xsl:text>            if(hash_int != dv.getUint8(i)){
+</xsl:text>
+          <xsl:text>                throw new Error("Hash doesn't match");
+</xsl:text>
+          <xsl:text>            };
+</xsl:text>
+          <xsl:text>            i++;
+</xsl:text>
+          <xsl:text>        };
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        while(i &lt; data.byteLength){
+</xsl:text>
+          <xsl:text>            let index = dv.getUint32(i, true);
+</xsl:text>
+          <xsl:text>            i += 4;
+</xsl:text>
+          <xsl:text>            let iectype = hmitree_types[index];
+</xsl:text>
+          <xsl:text>            if(iectype != undefined){
+</xsl:text>
+          <xsl:text>                let dvgetter = dvgetters[iectype];
+</xsl:text>
+          <xsl:text>                let [value, bytesize] = dvgetter(dv,i);
+</xsl:text>
+          <xsl:text>                updates.set(index, value);
+</xsl:text>
+          <xsl:text>                i += bytesize;
+</xsl:text>
+          <xsl:text>            } else {
+</xsl:text>
+          <xsl:text>                throw new Error("Unknown index "+index);
 </xsl:text>
           <xsl:text>            }
 </xsl:text>
+          <xsl:text>        };
+</xsl:text>
+          <xsl:text>        // register for rendering on next frame, since there are updates
+</xsl:text>
+          <xsl:text>        requestHMIAnimation();
+</xsl:text>
+          <xsl:text>    } catch(err) {
+</xsl:text>
+          <xsl:text>        // 1003 is for "Unsupported Data"
+</xsl:text>
+          <xsl:text>        // ws.close(1003, err.message);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        // TODO : remove debug alert ?
+</xsl:text>
+          <xsl:text>        alert("Error : "+err.message+"\nHMI will be reloaded.");
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        // force reload ignoring cache
+</xsl:text>
+          <xsl:text>        location.reload(true);
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>hmi_hash_u8 = new Uint8Array(hmi_hash);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function send_blob(data) {
+</xsl:text>
+          <xsl:text>    if(data.length &gt; 0) {
+</xsl:text>
+          <xsl:text>        ws.send(new Blob([hmi_hash_u8].concat(data)));
+</xsl:text>
+          <xsl:text>    };
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>const typedarray_types = {
+</xsl:text>
+          <xsl:text>    INT: (number) =&gt; new Int16Array([number]),
+</xsl:text>
+          <xsl:text>    BOOL: (truth) =&gt; new Int16Array([truth]),
+</xsl:text>
+          <xsl:text>    NODE: (truth) =&gt; new Int16Array([truth]),
+</xsl:text>
+          <xsl:text>    REAL: (number) =&gt; new Float32Array([number]),
+</xsl:text>
+          <xsl:text>    STRING: (str) =&gt; {
+</xsl:text>
+          <xsl:text>        // beremiz default string max size is 128
+</xsl:text>
+          <xsl:text>        str = str.slice(0,128);
+</xsl:text>
+          <xsl:text>        binary = new Uint8Array(str.length + 1);
+</xsl:text>
+          <xsl:text>        binary[0] = str.length;
+</xsl:text>
+          <xsl:text>        for(let i = 0; i &lt; str.length; i++){
+</xsl:text>
+          <xsl:text>            binary[i+1] = str.charCodeAt(i);
+</xsl:text>
           <xsl:text>        }
 </xsl:text>
-          <xsl:text>        if(widget.forced_frequency !== undefined)
-</xsl:text>
-          <xsl:text>            widget.frequency = widget.forced_frequency;
+          <xsl:text>        return binary;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>    /* TODO */
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function send_reset() {
+</xsl:text>
+          <xsl:text>    send_blob(new Uint8Array([1])); /* reset = 1 */
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>var subscriptions = [];
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function subscribers(index) {
+</xsl:text>
+          <xsl:text>    let entry = subscriptions[index];
+</xsl:text>
+          <xsl:text>    let res;
+</xsl:text>
+          <xsl:text>    if(entry == undefined){
+</xsl:text>
+          <xsl:text>        res = new Set();
+</xsl:text>
+          <xsl:text>        subscriptions[index] = [res,0];
+</xsl:text>
+          <xsl:text>    }else{
+</xsl:text>
+          <xsl:text>        [res, _ign] = entry;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>    return res
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function get_subscription_period(index) {
+</xsl:text>
+          <xsl:text>    let entry = subscriptions[index];
+</xsl:text>
+          <xsl:text>    if(entry == undefined)
+</xsl:text>
+          <xsl:text>        return 0;
+</xsl:text>
+          <xsl:text>    let [_ign, period] = entry;
+</xsl:text>
+          <xsl:text>    return period;
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function set_subscription_period(index, period) {
+</xsl:text>
+          <xsl:text>    let entry = subscriptions[index];
+</xsl:text>
+          <xsl:text>    if(entry == undefined){
+</xsl:text>
+          <xsl:text>        subscriptions[index] = [new Set(), period];
+</xsl:text>
+          <xsl:text>    } else {
+</xsl:text>
+          <xsl:text>        entry[1] = period;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>if(has_watchdog){
+</xsl:text>
+          <xsl:text>    // artificially subscribe the watchdog widget to "/heartbeat" hmi variable
+</xsl:text>
+          <xsl:text>    // Since dispatch directly calls change_hmi_value,
+</xsl:text>
+          <xsl:text>    // PLC will periodically send variable at given frequency
+</xsl:text>
+          <xsl:text>    subscribers(heartbeat_index).add({
+</xsl:text>
+          <xsl:text>        /* type: "Watchdog", */
+</xsl:text>
+          <xsl:text>        frequency: 1,
+</xsl:text>
+          <xsl:text>        indexes: [heartbeat_index],
+</xsl:text>
+          <xsl:text>        new_hmi_value: function(index, value, oldval) {
+</xsl:text>
+          <xsl:text>            apply_hmi_value(heartbeat_index, value+1);
+</xsl:text>
+          <xsl:text>        }
 </xsl:text>
           <xsl:text>    });
 </xsl:text>
-          <xsl:text>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>// Open WebSocket to relative "/ws" address
-</xsl:text>
-          <xsl:text>var has_watchdog = window.location.hash == "#watchdog";
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>var ws_url = 
-</xsl:text>
-          <xsl:text>    window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws')
-</xsl:text>
-          <xsl:text>    + '?mode=' + (has_watchdog ? "watchdog" : "multiclient");
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>var ws = new WebSocket(ws_url);
-</xsl:text>
-          <xsl:text>ws.binaryType = 'arraybuffer';
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>const dvgetters = {
-</xsl:text>
-          <xsl:text>    INT: (dv,offset) =&gt; [dv.getInt16(offset, true), 2],
-</xsl:text>
-          <xsl:text>    BOOL: (dv,offset) =&gt; [dv.getInt8(offset, true), 1],
-</xsl:text>
-          <xsl:text>    NODE: (dv,offset) =&gt; [dv.getInt8(offset, true), 1],
-</xsl:text>
-          <xsl:text>    REAL: (dv,offset) =&gt; [dv.getFloat32(offset, true), 4],
-</xsl:text>
-          <xsl:text>    STRING: (dv, offset) =&gt; {
-</xsl:text>
-          <xsl:text>        const size = dv.getInt8(offset);
-</xsl:text>
-          <xsl:text>        return [
-</xsl:text>
-          <xsl:text>            String.fromCharCode.apply(null, new Uint8Array(
-</xsl:text>
-          <xsl:text>                dv.buffer, /* original buffer */
-</xsl:text>
-          <xsl:text>                offset + 1, /* string starts after size*/
-</xsl:text>
-          <xsl:text>                size /* size of string */
-</xsl:text>
-          <xsl:text>            )), size + 1]; /* total increment */
+          <xsl:text>}
+</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
+</xsl:text>
+          <xsl:text>subscribers(current_page_var_index).add({
+</xsl:text>
+          <xsl:text>    frequency: 1,
+</xsl:text>
+          <xsl:text>    indexes: [current_page_var_index],
+</xsl:text>
+          <xsl:text>    new_hmi_value: function(index, value, oldval) {
+</xsl:text>
+          <xsl:text>        if(value.startsWith("!"))
+</xsl:text>
+          <xsl:text>            switch_page(value.slice(1));
 </xsl:text>
           <xsl:text>    }
 </xsl:text>
-          <xsl:text>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>// Apply updates recieved through ws.onmessage to subscribed widgets
-</xsl:text>
-          <xsl:text>function apply_updates() {
-</xsl:text>
-          <xsl:text>    updates.forEach((value, index) =&gt; {
-</xsl:text>
-          <xsl:text>        dispatch_value(index, value);
-</xsl:text>
-          <xsl:text>    });
-</xsl:text>
-          <xsl:text>    updates.clear();
+          <xsl:text>});
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function svg_text_to_multiline(elt) {
+</xsl:text>
+          <xsl:text>    return(Array.prototype.map.call(elt.children, x=&gt;x.textContent).join("\n")); 
 </xsl:text>
           <xsl:text>}
 </xsl:text>
           <xsl:text>
 </xsl:text>
-          <xsl:text>// Called on requestAnimationFrame, modifies DOM
-</xsl:text>
-          <xsl:text>var requestAnimationFrameID = null;
-</xsl:text>
-          <xsl:text>function animate() {
-</xsl:text>
-          <xsl:text>    // Do the page swith if any one pending
-</xsl:text>
-          <xsl:text>    if(current_subscribed_page != current_visible_page){
-</xsl:text>
-          <xsl:text>        switch_visible_page(current_subscribed_page);
+          <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>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function switch_langnum(langnum) {
+</xsl:text>
+          <xsl:text>    langnum = Math.max(0, Math.min(langs.length - 1, langnum));
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    for (let translation of translations) {
+</xsl:text>
+          <xsl:text>        let [objs, msgs] = translation;
+</xsl:text>
+          <xsl:text>        let msg = msgs[langnum];
+</xsl:text>
+          <xsl:text>        for (let obj of objs) {
+</xsl:text>
+          <xsl:text>            multiline_to_svg_text(obj, msg);
+</xsl:text>
+          <xsl:text>            obj.setAttribute("lang",langnum);
+</xsl:text>
+          <xsl:text>        }
 </xsl:text>
           <xsl:text>    }
 </xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    while(widget = need_cache_apply.pop()){
-</xsl:text>
-          <xsl:text>        widget.apply_cache();
+          <xsl:text>    return langnum;
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// backup original texts
+</xsl:text>
+          <xsl:text>for (let translation of translations) {
+</xsl:text>
+          <xsl:text>    let [objs, msgs] = translation;
+</xsl:text>
+          <xsl:text>    msgs.unshift(svg_text_to_multiline(objs[0])); 
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>var lang_local_index = hmi_local_index("lang");
+</xsl:text>
+          <xsl:text>var langcode_local_index = hmi_local_index("lang_code");
+</xsl:text>
+          <xsl:text>var langname_local_index = hmi_local_index("lang_name");
+</xsl:text>
+          <xsl:text>subscribers(lang_local_index).add({
+</xsl:text>
+          <xsl:text>    indexes: [lang_local_index],
+</xsl:text>
+          <xsl:text>    new_hmi_value: function(index, value, oldval) {
+</xsl:text>
+          <xsl:text>        let current_lang =  switch_langnum(value);
+</xsl:text>
+          <xsl:text>        let [langname,langcode] = langs[current_lang];
+</xsl:text>
+          <xsl:text>        apply_hmi_value(langcode_local_index, langcode);
+</xsl:text>
+          <xsl:text>        apply_hmi_value(langname_local_index, langname);
+</xsl:text>
+          <xsl:text>        switch_page();
 </xsl:text>
           <xsl:text>    }
 </xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    if(jumps_need_update) update_jumps();
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    apply_updates();
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    pending_widget_animates.forEach(widget =&gt; widget._animate());
-</xsl:text>
-          <xsl:text>    pending_widget_animates = [];
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    requestAnimationFrameID = null;
+          <xsl:text>});
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// returns en_US, fr_FR or en_UK depending on selected language
+</xsl:text>
+          <xsl:text>function get_current_lang_code(){
+</xsl:text>
+          <xsl:text>    return cache[langcode_local_index];
 </xsl:text>
           <xsl:text>}
 </xsl:text>
           <xsl:text>
 </xsl:text>
-          <xsl:text>function requestHMIAnimation() {
-</xsl:text>
-          <xsl:text>    if(requestAnimationFrameID == null){
-</xsl:text>
-          <xsl:text>        requestAnimationFrameID = window.requestAnimationFrame(animate);
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>// Message reception handler
-</xsl:text>
-          <xsl:text>// Hash is verified and HMI values updates resulting from binary parsing
-</xsl:text>
-          <xsl:text>// are stored until browser can compute next frame, DOM is left untouched
-</xsl:text>
-          <xsl:text>ws.onmessage = function (evt) {
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    let data = evt.data;
-</xsl:text>
-          <xsl:text>    let dv = new DataView(data);
-</xsl:text>
-          <xsl:text>    let i = 0;
-</xsl:text>
-          <xsl:text>    try {
-</xsl:text>
-          <xsl:text>        for(let hash_int of hmi_hash) {
-</xsl:text>
-          <xsl:text>            if(hash_int != dv.getUint8(i)){
-</xsl:text>
-          <xsl:text>                throw new Error("Hash doesn't match");
-</xsl:text>
-          <xsl:text>            };
-</xsl:text>
-          <xsl:text>            i++;
-</xsl:text>
-          <xsl:text>        };
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>        while(i &lt; data.byteLength){
-</xsl:text>
-          <xsl:text>            let index = dv.getUint32(i, true);
-</xsl:text>
-          <xsl:text>            i += 4;
-</xsl:text>
-          <xsl:text>            let iectype = hmitree_types[index];
-</xsl:text>
-          <xsl:text>            if(iectype != undefined){
-</xsl:text>
-          <xsl:text>                let dvgetter = dvgetters[iectype];
-</xsl:text>
-          <xsl:text>                let [value, bytesize] = dvgetter(dv,i);
-</xsl:text>
-          <xsl:text>                updates.set(index, value);
-</xsl:text>
-          <xsl:text>                i += bytesize;
-</xsl:text>
-          <xsl:text>            } else {
-</xsl:text>
-          <xsl:text>                throw new Error("Unknown index "+index);
-</xsl:text>
-          <xsl:text>            }
-</xsl:text>
-          <xsl:text>        };
-</xsl:text>
-          <xsl:text>        // register for rendering on next frame, since there are updates
-</xsl:text>
-          <xsl:text>        requestHMIAnimation();
-</xsl:text>
-          <xsl:text>    } catch(err) {
-</xsl:text>
-          <xsl:text>        // 1003 is for "Unsupported Data"
-</xsl:text>
-          <xsl:text>        // ws.close(1003, err.message);
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>        // TODO : remove debug alert ?
-</xsl:text>
-          <xsl:text>        alert("Error : "+err.message+"\nHMI will be reloaded.");
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>        // force reload ignoring cache
-</xsl:text>
-          <xsl:text>        location.reload(true);
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>hmi_hash_u8 = new Uint8Array(hmi_hash);
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function send_blob(data) {
-</xsl:text>
-          <xsl:text>    if(data.length &gt; 0) {
-</xsl:text>
-          <xsl:text>        ws.send(new Blob([hmi_hash_u8].concat(data)));
-</xsl:text>
-          <xsl:text>    };
-</xsl:text>
-          <xsl:text>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>const typedarray_types = {
-</xsl:text>
-          <xsl:text>    INT: (number) =&gt; new Int16Array([number]),
-</xsl:text>
-          <xsl:text>    BOOL: (truth) =&gt; new Int16Array([truth]),
-</xsl:text>
-          <xsl:text>    NODE: (truth) =&gt; new Int16Array([truth]),
-</xsl:text>
-          <xsl:text>    REAL: (number) =&gt; new Float32Array([number]),
-</xsl:text>
-          <xsl:text>    STRING: (str) =&gt; {
-</xsl:text>
-          <xsl:text>        // beremiz default string max size is 128
-</xsl:text>
-          <xsl:text>        str = str.slice(0,128);
-</xsl:text>
-          <xsl:text>        binary = new Uint8Array(str.length + 1);
-</xsl:text>
-          <xsl:text>        binary[0] = str.length;
-</xsl:text>
-          <xsl:text>        for(let i = 0; i &lt; str.length; i++){
-</xsl:text>
-          <xsl:text>            binary[i+1] = str.charCodeAt(i);
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>        return binary;
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>    /* TODO */
-</xsl:text>
-          <xsl:text>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function send_reset() {
-</xsl:text>
-          <xsl:text>    send_blob(new Uint8Array([1])); /* reset = 1 */
-</xsl:text>
-          <xsl:text>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>var subscriptions = [];
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function subscribers(index) {
-</xsl:text>
-          <xsl:text>    let entry = subscriptions[index];
-</xsl:text>
-          <xsl:text>    let res;
-</xsl:text>
-          <xsl:text>    if(entry == undefined){
-</xsl:text>
-          <xsl:text>        res = new Set();
-</xsl:text>
-          <xsl:text>        subscriptions[index] = [res,0];
-</xsl:text>
-          <xsl:text>    }else{
-</xsl:text>
-          <xsl:text>        [res, _ign] = entry;
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>    return res
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function get_subscription_period(index) {
-</xsl:text>
-          <xsl:text>    let entry = subscriptions[index];
-</xsl:text>
-          <xsl:text>    if(entry == undefined)
-</xsl:text>
-          <xsl:text>        return 0;
-</xsl:text>
-          <xsl:text>    let [_ign, period] = entry;
-</xsl:text>
-          <xsl:text>    return period;
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function set_subscription_period(index, period) {
-</xsl:text>
-          <xsl:text>    let entry = subscriptions[index];
-</xsl:text>
-          <xsl:text>    if(entry == undefined){
-</xsl:text>
-          <xsl:text>        subscriptions[index] = [new Set(), period];
-</xsl:text>
-          <xsl:text>    } else {
-</xsl:text>
-          <xsl:text>        entry[1] = period;
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>if(has_watchdog){
-</xsl:text>
-          <xsl:text>    // artificially subscribe the watchdog widget to "/heartbeat" hmi variable
-</xsl:text>
-          <xsl:text>    // Since dispatch directly calls change_hmi_value,
-</xsl:text>
-          <xsl:text>    // PLC will periodically send variable at given frequency
-</xsl:text>
-          <xsl:text>    subscribers(heartbeat_index).add({
-</xsl:text>
-          <xsl:text>        /* type: "Watchdog", */
-</xsl:text>
-          <xsl:text>        frequency: 1,
-</xsl:text>
-          <xsl:text>        indexes: [heartbeat_index],
-</xsl:text>
-          <xsl:text>        new_hmi_value: function(index, value, oldval) {
-</xsl:text>
-          <xsl:text>            apply_hmi_value(heartbeat_index, value+1);
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>    });
-</xsl:text>
-          <xsl:text>}
-</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
-</xsl:text>
-          <xsl:text>subscribers(current_page_var_index).add({
-</xsl:text>
-          <xsl:text>    frequency: 1,
-</xsl:text>
-          <xsl:text>    indexes: [current_page_var_index],
-</xsl:text>
-          <xsl:text>    new_hmi_value: function(index, value, oldval) {
-</xsl:text>
-          <xsl:text>        if(value.startsWith("!"))
-</xsl:text>
-          <xsl:text>            switch_page(value.slice(1));
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>});
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function svg_text_to_multiline(elt) {
-</xsl:text>
-          <xsl:text>    return(Array.prototype.map.call(elt.children, x=&gt;x.textContent).join("\n")); 
-</xsl:text>
-          <xsl:text>}
-</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>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function switch_langnum(langnum) {
-</xsl:text>
-          <xsl:text>    langnum = Math.max(0, Math.min(langs.length - 1, langnum));
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    for (let translation of translations) {
-</xsl:text>
-          <xsl:text>        let [objs, msgs] = translation;
-</xsl:text>
-          <xsl:text>        let msg = msgs[langnum];
-</xsl:text>
-          <xsl:text>        for (let obj of objs) {
-</xsl:text>
-          <xsl:text>            multiline_to_svg_text(obj, msg);
-</xsl:text>
-          <xsl:text>            obj.setAttribute("lang",langnum);
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>    return langnum;
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>// backup original texts
-</xsl:text>
-          <xsl:text>for (let translation of translations) {
-</xsl:text>
-          <xsl:text>    let [objs, msgs] = translation;
-</xsl:text>
-          <xsl:text>    msgs.unshift(svg_text_to_multiline(objs[0])); 
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>var lang_local_index = hmi_local_index("lang");
-</xsl:text>
-          <xsl:text>var langcode_local_index = hmi_local_index("lang_code");
-</xsl:text>
-          <xsl:text>var langname_local_index = hmi_local_index("lang_name");
-</xsl:text>
-          <xsl:text>subscribers(lang_local_index).add({
-</xsl:text>
-          <xsl:text>    indexes: [lang_local_index],
-</xsl:text>
-          <xsl:text>    new_hmi_value: function(index, value, oldval) {
-</xsl:text>
-          <xsl:text>        let current_lang =  switch_langnum(value);
-</xsl:text>
-          <xsl:text>        let [langname,langcode] = langs[current_lang];
-</xsl:text>
-          <xsl:text>        apply_hmi_value(langcode_local_index, langcode);
-</xsl:text>
-          <xsl:text>        apply_hmi_value(langname_local_index, langname);
-</xsl:text>
-          <xsl:text>        switch_page();
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>});
-</xsl:text>
-          <xsl:text>
-</xsl:text>
           <xsl:text>function setup_lang(){
 </xsl:text>
           <xsl:text>    let current_lang = cache[lang_local_index];