Mercurial Mercurial > beremiz / changeset
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | raw | bz2 | zip | gz | help
Merge.
authorTomaz Orac
Mon, 27 Feb 2023 13:47:36 +0100
changeset 3734 ed1ec3136c2b
parent 3664 7e8db0b44e42 (diff)
parent 3733 d1acf20e8e7c (current diff)
child 3737 0c06de0a39b5
Merge. 
--- a/controls/PouInstanceVariablesPanel.py	Sun Feb 19 08:37:27 2023 +0000
+++ b/controls/PouInstanceVariablesPanel.py	Mon Feb 27 13:47:36 2023 +0100
@@ -174,6 +174,19 @@
             self.DebugInstanceImage: _ButtonCallbacks(
                 self.DebugButtonCallback, self.DebugButtonDClickCallback)}
 
+        self.FilterCtrl = wx.SearchCtrl(self)
+        self.FilterCtrl.ShowCancelButton(True)
+        self.FilterCtrl.Bind(wx.EVT_TEXT, self.OnFilterUpdate)
+        self.FilterCtrl.Bind(wx.EVT_SEARCHCTRL_CANCEL_BTN, self.OnFilterCancel)
+
+        searchMenu = wx.Menu()
+        item = searchMenu.AppendCheckItem(-1, _("Match Case"))
+        self.Bind(wx.EVT_MENU, self.OnSearchMenu, item)
+        item = searchMenu.AppendCheckItem(-1, _("Whole Words"))
+        self.Bind(wx.EVT_MENU, self.OnSearchMenu, item)
+        self.FilterCtrl.SetMenu(searchMenu)
+
+
         buttons_sizer = wx.FlexGridSizer(cols=3, hgap=0, rows=1, vgap=0)
         buttons_sizer.AddWindow(self.ParentButton)
         buttons_sizer.AddWindow(self.InstanceChoice, flag=wx.GROW)
@@ -181,9 +194,10 @@
         buttons_sizer.AddGrowableCol(1)
         buttons_sizer.AddGrowableRow(0)
 
-        main_sizer = wx.FlexGridSizer(cols=1, hgap=0, rows=2, vgap=0)
+        main_sizer = wx.FlexGridSizer(cols=1, hgap=0, rows=3, vgap=0)
         main_sizer.AddSizer(buttons_sizer, flag=wx.GROW)
         main_sizer.AddWindow(self.VariablesList, flag=wx.GROW)
+        main_sizer.AddWindow(self.FilterCtrl, flag=wx.GROW)
         main_sizer.AddGrowableCol(0)
         main_sizer.AddGrowableRow(1)
 
@@ -199,6 +213,11 @@
         self.PouInfos = None
         self.PouInstance = None
 
+        self.Filter = None
+        self.FilterCaseSensitive = False
+        self.FilterWholeWord = False
+
+
     def __del__(self):
         self.Controller = None
 
@@ -236,6 +255,21 @@
 
         self.RefreshView()
 
+    def OnSearchMenu(self, event):
+        searchMenu = self.FilterCtrl.GetMenu().GetMenuItems()
+        self.FilterCaseSensitive = searchMenu[0].IsChecked()
+        self.FilterWholeWord = searchMenu[1].IsChecked()
+        self.RefreshView()
+
+    def OnFilterUpdate(self, event):
+        self.Filter = self.FilterCtrl.GetValue()
+        self.RefreshView()
+        event.Skip()
+
+    def OnFilterCancel(self, event):
+        self.FilterCtrl.SetValue('')
+        event.Skip()
+
     def RefreshView(self):
         self.Freeze()
         self.VariablesList.DeleteAllItems()
@@ -252,6 +286,15 @@
         if self.PouInfos is not None:
             root = self.VariablesList.AddRoot("", data=self.PouInfos)
             for var_infos in self.PouInfos.variables:
+                if self.Filter:
+                    pattern = self.Filter
+                    varname = var_infos.name
+                    if not self.FilterCaseSensitive:
+                        pattern = pattern.upper()
+                        varname = varname.upper()
+                    if ((pattern != varname) if self.FilterWholeWord else
+                        (pattern not in varname)):
+                        continue
                 if var_infos.type is not None:
                     text = "%s (%s)" % (var_infos.name, var_infos.type)
                 else:
--- a/exemples/svghmi_references/plc.xml	Sun Feb 19 08:37:27 2023 +0000
+++ b/exemples/svghmi_references/plc.xml	Mon Feb 27 13:47:36 2023 +0100
@@ -1,7 +1,7 @@
 <?xml version='1.0' encoding='utf-8'?>
 <project xmlns:ns1="http://www.plcopen.org/xml/tc6_0201" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://www.plcopen.org/xml/tc6_0201">
   <fileHeader companyName="Unknown" productName="Unnamed" productVersion="1" creationDateTime="2022-09-05T09:02:48"/>
-  <contentHeader name="Unnamed" modificationDateTime="2022-09-20T11:48:55">
+  <contentHeader name="Unnamed" modificationDateTime="2022-10-04T10:59:24">
     <coordinateInfo>
       <fbd>
         <scaling x="5" y="5"/>
@@ -22,12 +22,12 @@
           <localVars>
             <variable name="LocalVar0">
               <type>
-                <DINT/>
+                <INT/>
               </type>
             </variable>
-            <variable name="LocalVar1">
+            <variable name="PLCHMIVAR">
               <type>
-                <DINT/>
+                <derived name="HMI_INT"/>
               </type>
             </variable>
           </localVars>
@@ -39,7 +39,7 @@
               <connectionPointOut>
                 <relPosition x="85" y="10"/>
               </connectionPointOut>
-              <expression>LocalVar0</expression>
+              <expression>PLCHMIVAR</expression>
             </inVariable>
             <outVariable localId="30" executionOrderId="0" height="25" width="85" negated="false">
               <position x="330" y="290"/>
@@ -50,7 +50,7 @@
                   <position x="260" y="300"/>
                 </connection>
               </connectionPointIn>
-              <expression>LocalVar1</expression>
+              <expression>LocalVar0</expression>
             </outVariable>
           </FBD>
         </body>
--- a/exemples/svghmi_references/svghmi_0@svghmi/svghmi.svg	Sun Feb 19 08:37:27 2023 +0000
+++ b/exemples/svghmi_references/svghmi_0@svghmi/svghmi.svg	Mon Feb 27 13:47:36 2023 +0100
@@ -25,7 +25,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
+        <dc:title></dc:title>
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -90,9 +90,9 @@
      inkscape:window-height="836"
      id="namedview4"
      showgrid="false"
-     inkscape:zoom="0.92709556"
-     inkscape:cx="1883.1062"
-     inkscape:cy="712.84763"
+     inkscape:zoom="0.23177389"
+     inkscape:cx="1502.9251"
+     inkscape:cy="-465.32787"
      inkscape:window-x="0"
      inkscape:window-y="27"
      inkscape:window-maximized="1"
@@ -103,7 +103,8 @@
      fit-margin-top="0"
      fit-margin-left="0"
      fit-margin-right="0"
-     fit-margin-bottom="0" />
+     fit-margin-bottom="0"
+     inkscape:pagecheckerboard="true" />
   <use
      x="0"
      y="0"
@@ -135,12 +136,12 @@
      inkscape:label="HMI:Page:Home"
      sodipodi:insensitive="true" />
   <rect
-     y="422.29605"
-     x="54.419678"
-     height="280.44577"
+     y="382.29605"
+     x="14.419678"
+     height="190.44577"
      width="240"
      id="rect1189"
-     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.99999988;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
   <text
      xml:space="preserve"
      style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
@@ -152,189 +153,6 @@
        x="2079.7461"
        y="73.559319">Switch widget</tspan></text>
   <g
-     id="g2496"
-     inkscape:label="page_template"
-     transform="translate(0,2.1367187e-5)">
-    <rect
-       y="0"
-       x="-1320"
-       height="720"
-       width="1280"
-       id="rect1420"
-       style="color:#000000;opacity:1;fill:#d6d6d6;fill-opacity:1" />
-    <g
-       inkscape:label="HMI:Jump:Home"
-       id="g2455">
-      <use
-         x="0"
-         y="0"
-         xlink:href="#rect2313"
-         id="use2435"
-         transform="translate(400,-2.1367187e-5)"
-         width="100%"
-         height="100%"
-         inkscape:label="active" />
-      <use
-         x="0"
-         y="0"
-         xlink:href="#rect2311"
-         id="use2437"
-         transform="translate(400,-2.1367187e-5)"
-         width="100%"
-         height="100%"
-         inkscape:label="inactive" />
-      <text
-         id="text855-7-1"
-         y="70.251053"
-         x="-1166.8177"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         xml:space="preserve"><tspan
-           id="tspan66-3"
-           y="70.251053"
-           x="-1166.8177"
-           sodipodi:role="line">Home</tspan></text>
-    </g>
-    <g
-       inkscape:label="HMI:Jump:Switch"
-       id="g2461"
-       transform="translate(0,20)">
-      <use
-         height="100%"
-         width="100%"
-         transform="translate(400,99.999979)"
-         id="use2439"
-         xlink:href="#rect2313"
-         y="0"
-         x="0"
-         inkscape:label="active" />
-      <use
-         height="100%"
-         width="100%"
-         transform="translate(400,99.999979)"
-         id="use2441"
-         xlink:href="#rect2311"
-         y="0"
-         x="0"
-         inkscape:label="inactive" />
-      <text
-         xml:space="preserve"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         x="-1165.1674"
-         y="170.25105"
-         id="text2349"><tspan
-           sodipodi:role="line"
-           x="-1165.1674"
-           y="170.25105"
-           id="tspan2347">Swith</tspan></text>
-    </g>
-    <g
-       inkscape:label="HMI:Jump:Buttons"
-       id="g2467"
-       transform="translate(0,40)">
-      <use
-         x="0"
-         y="0"
-         xlink:href="#rect2313"
-         id="use2443"
-         transform="translate(400,199.99998)"
-         width="100%"
-         height="100%"
-         inkscape:label="active" />
-      <use
-         x="0"
-         y="0"
-         xlink:href="#rect2311"
-         id="use2445"
-         transform="translate(400,199.99998)"
-         width="100%"
-         height="100%"
-         inkscape:label="inactive" />
-      <text
-         id="text2357"
-         y="270.25104"
-         x="-1165.7826"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         xml:space="preserve"><tspan
-           id="tspan2355"
-           y="270.25104"
-           x="-1165.7826"
-           sodipodi:role="line">Buttons</tspan></text>
-    </g>
-  </g>
-  <g
-     id="g2590"
-     inkscape:label="HMI:VarInit:1@.position"
-     transform="translate(-875.45983,1716.017)">
-    <text
-       xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.66666603px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       x="3726.6924"
-       y="-108.39357"
-       id="text2743"><tspan
-         sodipodi:role="line"
-         x="3726.6924"
-         y="-108.39357"
-         id="tspan2765">declaration of &quot;position&quot; HMI local variable</tspan></text>
-  </g>
-  <g
-     style="stroke-width:1.42987263"
-     inkscape:label="HMI:Input@selection"
-     id="g3550"
-     transform="matrix(0.699363,0,0,0.699363,-463.71175,196.54679)">
-    <g
-       id="g2763-2"
-       inkscape:label="=1"
-       style="stroke-width:1.42987263"
-       transform="translate(100.09108)">
-      <rect
-         rx="30.536263"
-         ry="30.536263"
-         y="93.088097"
-         x="3373.916"
-         height="84.580788"
-         width="328.02896"
-         id="rect114-6-7"
-         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.40424299;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
-      <text
-         id="text118-3-0"
-         y="149.95857"
-         x="3537.5791"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.42987263px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         xml:space="preserve"><tspan
-           y="149.95857"
-           x="3537.5791"
-           id="tspan116-1-9"
-           sodipodi:role="line"
-           style="stroke-width:1.42987263px">Show popup 1</tspan></text>
-    </g>
-    <g
-       id="g2758-3"
-       inkscape:label="=2"
-       style="stroke-width:1.42987263"
-       transform="translate(0.09077482,114.38981)">
-      <rect
-         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.40424299;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-         id="rect2531-6"
-         width="328.02908"
-         height="84.58078"
-         x="3473.9163"
-         y="93.088097"
-         ry="30.536263"
-         rx="30.536263" />
-      <text
-         xml:space="preserve"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.42987263px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         x="3637.5791"
-         y="149.95857"
-         id="text2557-0"><tspan
-           sodipodi:role="line"
-           id="tspan2555-6"
-           x="3637.5791"
-           y="149.95857"
-           style="stroke-width:1.42987263px">Show popup 2</tspan></text>
-    </g>
-  </g>
-  <g
      style="stroke-width:1.42987263"
      transform="translate(2248.2618,144.23794)"
      id="g2775"
@@ -582,11 +400,11 @@
      id="rect376"
      width="129.43649"
      height="73.347351"
-     x="116.35406"
-     y="506.02609" />
+     x="76.354057"
+     y="466.02609" />
   <rect
-     y="506.02609"
-     x="336.35406"
+     y="466.02609"
+     x="296.35406"
      height="73.347351"
      width="129.43649"
      id="rect1183"
@@ -596,32 +414,32 @@
      id="rect1185"
      width="129.43649"
      height="73.347351"
-     x="536.35406"
-     y="506.02609" />
+     x="496.35406"
+     y="466.02609" />
   <rect
-     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#6d6d6d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#6d6d6d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.99999988;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
      id="rect1187"
      width="15.100924"
-     height="280.44574"
-     x="294.41968"
-     y="422.29605" />
+     height="190.44576"
+     x="254.41968"
+     y="382.29605" />
   <text
      xml:space="preserve"
      style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-     x="85.593231"
-     y="442.47458"
+     x="141.59323"
+     y="402.47458"
      id="text1193"><tspan
        sodipodi:role="line"
        id="tspan1191"
-       x="85.593231"
-       y="442.47458">Page</tspan></text>
+       x="141.59323"
+       y="402.47458">Page (inkscape)</tspan></text>
   <path
      sodipodi:type="star"
      style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
      id="path1199"
      sodipodi:sides="6"
-     sodipodi:cx="181.13559"
-     sodipodi:cy="544.00531"
+     sodipodi:cx="141.13559"
+     sodipodi:cy="504.00531"
      sodipodi:r1="26.350622"
      sodipodi:r2="13.175311"
      sodipodi:arg1="0.58235295"
@@ -629,13 +447,13 @@
      inkscape:flatsided="false"
      inkscape:rounded="0"
      inkscape:randomized="0"
-     d="m 203.14286,558.4979 -16.10099,-2.71529 -7.4536,14.52785 -5.69898,-15.30151 -16.30829,0.80892 10.40201,-12.58622 -8.85469,-13.71893 16.10099,2.7153 7.4536,-14.52786 5.69898,15.30151 16.30829,-0.80892 -10.40201,12.58622 z"
+     d="m 163.14286,518.4979 -16.10099,-2.71529 -7.4536,14.52785 -5.69898,-15.30151 -16.30829,0.80892 10.40201,-12.58622 -8.85469,-13.71893 16.10099,2.7153 7.4536,-14.52786 5.69898,15.30151 16.30829,-0.80892 -10.40201,12.58622 z"
      inkscape:transform-center-x="0.43452006"
      inkscape:transform-center-y="-2.5530423" />
   <path
      inkscape:transform-center-y="-2.5530423"
      inkscape:transform-center-x="0.43452006"
-     d="m 423.14289,558.4979 -19.35043,-1.58794 -17.14943,9.10262 1.58794,-19.35043 -9.10262,-17.14943 19.35043,1.58794 17.14943,-9.10262 -1.58794,19.35043 z"
+     d="m 383.14289,518.4979 -19.35043,-1.58794 -17.14943,9.10262 1.58794,-19.35043 -9.10262,-17.14943 19.35043,1.58794 17.14943,-9.10262 -1.58794,19.35043 z"
      inkscape:randomized="0"
      inkscape:rounded="0"
      inkscape:flatsided="false"
@@ -643,8 +461,8 @@
      sodipodi:arg1="0.58235295"
      sodipodi:r2="13.175311"
      sodipodi:r1="26.350622"
-     sodipodi:cy="544.00531"
-     sodipodi:cx="401.13562"
+     sodipodi:cy="504.00531"
+     sodipodi:cx="361.13562"
      sodipodi:sides="4"
      id="path1201"
      style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#008000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
@@ -654,8 +472,8 @@
      style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
      id="path1203"
      sodipodi:sides="5"
-     sodipodi:cx="601.13562"
-     sodipodi:cy="544.00531"
+     sodipodi:cx="561.13562"
+     sodipodi:cy="504.00531"
      sodipodi:r1="26.350622"
      sodipodi:r2="13.175311"
      sodipodi:arg1="0.58235295"
@@ -663,100 +481,100 @@
      inkscape:flatsided="false"
      inkscape:rounded="0"
      inkscape:randomized="0"
-     d="m 623.14289,558.4979 -17.36441,-2.16244 -11.62551,13.07847 -3.3093,-17.18277 -16.03084,-7.01505 15.31915,-8.4571 1.71792,-17.414 12.77705,11.95599 17.09257,-3.74739 -7.4225,15.8463 z"
+     d="m 583.14289,518.4979 -17.36441,-2.16244 -11.62551,13.07847 -3.3093,-17.18277 -16.03084,-7.01505 15.31915,-8.4571 1.71792,-17.414 12.77705,11.95599 17.09257,-3.74739 -7.4225,15.8463 z"
      inkscape:transform-center-x="0.43452006"
      inkscape:transform-center-y="-2.5530423" />
   <text
      id="text1207"
-     y="480.47458"
-     x="177.59323"
+     y="440.47458"
+     x="137.59323"
      style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
      xml:space="preserve"><tspan
-       y="480.47458"
-       x="177.59323"
+       y="440.47458"
+       x="137.59323"
        id="tspan1205"
        sodipodi:role="line">final position in page</tspan></text>
   <text
      xml:space="preserve"
      style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-     x="397.59326"
-     y="460.47458"
+     x="357.59326"
+     y="420.47458"
      id="text1211"><tspan
        sodipodi:role="line"
        id="tspan1209"
-       x="397.59326"
-       y="460.47458">offset position</tspan><tspan
-       sodipodi:role="line"
-       x="397.59326"
-       y="485.47458"
+       x="357.59326"
+       y="420.47458">offset position</tspan><tspan
+       sodipodi:role="line"
+       x="357.59326"
+       y="445.47458"
        id="tspan1251">for &quot;B&quot;</tspan></text>
   <text
      id="text1215"
-     y="460.47458"
-     x="597.59326"
+     y="420.47458"
+     x="557.59326"
      style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
      xml:space="preserve"><tspan
-       y="460.47458"
-       x="597.59326"
+       y="420.47458"
+       x="557.59326"
        id="tspan1213"
        sodipodi:role="line">offset position</tspan><tspan
-       y="485.47458"
-       x="597.59326"
+       y="445.47458"
+       x="557.59326"
        sodipodi:role="line"
        id="tspan1249">for &quot;C&quot;</tspan></text>
   <text
      xml:space="preserve"
      style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:125%;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-     x="744.59033"
+     x="664.59033"
      y="440.47458"
      id="text1219"><tspan
        sodipodi:role="line"
        id="tspan1217"
-       x="744.59033"
+       x="664.59033"
        y="440.47458"
        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start">HMI:Switch@... (group)</tspan><tspan
        sodipodi:role="line"
-       x="744.59033"
+       x="664.59033"
        y="465.47458"
        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
        id="tspan1225">  |-. &quot;A&quot; (group)</tspan><tspan
        sodipodi:role="line"
-       x="744.59033"
+       x="664.59033"
        y="490.47458"
        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
        id="tspan1233">  | |- reference (rect)</tspan><tspan
        sodipodi:role="line"
-       x="744.59033"
+       x="664.59033"
        y="515.47461"
        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
        id="tspan1295">  | |- ...</tspan><tspan
        sodipodi:role="line"
-       x="744.59033"
+       x="664.59033"
        y="540.47461"
        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
        id="tspan1229">  |-. &quot;B&quot; (group)</tspan><tspan
        sodipodi:role="line"
-       x="744.59033"
+       x="664.59033"
        y="565.47461"
        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
        id="tspan1235">  | |- frame (rect)</tspan><tspan
        sodipodi:role="line"
-       x="744.59033"
+       x="664.59033"
        y="590.47461"
        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
        id="tspan1237">  | |- ...</tspan><tspan
        sodipodi:role="line"
-       x="744.59033"
+       x="664.59033"
        y="615.47461"
        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
        id="tspan1239">  |-. &quot;C&quot; (group)</tspan><tspan
        sodipodi:role="line"
-       x="744.59033"
+       x="664.59033"
        y="640.47461"
        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
        id="tspan1241">  | |- frame (rect)</tspan><tspan
        sodipodi:role="line"
-       x="744.59033"
+       x="664.59033"
        y="665.47461"
        id="tspan1221"
        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start">  | |- ...</tspan></text>
@@ -774,74 +592,280 @@
        sodipodi:role="line"
        x="317.2059"
        y="99.850906"
-       id="tspan1259"
-       style="text-align:start;text-anchor:start;stroke-width:1px">groups that represent the possible states of the widget.</tspan><tspan
+       id="tspan1263"
+       style="text-align:start;text-anchor:start;stroke-width:1px">groups that represent the possible states of the widget. Since </tspan><tspan
        sodipodi:role="line"
        x="317.2059"
        y="136.50824"
-       id="tspan1261"
-       style="text-align:start;text-anchor:start;stroke-width:1px" /><tspan
+       id="tspan1265"
+       style="text-align:start;text-anchor:start;stroke-width:1px">all groups need to appear in the same place, they overlap and </tspan><tspan
        sodipodi:role="line"
        x="317.2059"
        y="173.16557"
-       id="tspan1263"
-       style="text-align:start;text-anchor:start;stroke-width:1px">Since all groups need to appear in the same place, they overlap </tspan><tspan
+       style="text-align:start;text-anchor:start;stroke-width:1px"
+       id="tspan486">the drawing becomes hard to understand and maintain.</tspan><tspan
        sodipodi:role="line"
        x="317.2059"
        y="209.82291"
-       id="tspan1265"
-       style="text-align:start;text-anchor:start;stroke-width:1px">and the drawing becomes hard to understand and maintain.</tspan><tspan
+       id="tspan1267"
+       style="text-align:start;text-anchor:start;stroke-width:1px" /><tspan
        sodipodi:role="line"
        x="317.2059"
        y="246.48024"
-       id="tspan1267"
-       style="text-align:start;text-anchor:start;stroke-width:1px" /><tspan
+       id="tspan1269"
+       style="text-align:start;text-anchor:start;stroke-width:1px">Using specially labelled &quot;reference&quot; and &quot;frame&quot; rectangles, </tspan><tspan
        sodipodi:role="line"
        x="317.2059"
        y="283.13757"
-       id="tspan1269"
-       style="text-align:start;text-anchor:start;stroke-width:1px">Using specially labelled &quot;reference&quot; and &quot;frame&quot; rectangles, </tspan><tspan
+       id="tspan1271"
+       style="text-align:start;text-anchor:start;stroke-width:1px">groups can be spread out. Theses rectangles can be used </tspan><tspan
        sodipodi:role="line"
        x="317.2059"
        y="319.79492"
-       id="tspan1271"
-       style="text-align:start;text-anchor:start;stroke-width:1px">groups can be spread out.</tspan></text>
+       style="text-align:start;text-anchor:start;stroke-width:1px"
+       id="tspan474">in widget or anywhere in the drawing, and do not appear in </tspan><tspan
+       sodipodi:role="line"
+       x="317.2059"
+       y="356.45224"
+       style="text-align:start;text-anchor:start;stroke-width:1px"
+       id="tspan476">final result.</tspan></text>
   <text
      xml:space="preserve"
      style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-     x="177.59323"
-     y="600.47461"
+     x="137.59323"
+     y="560.47461"
      id="text1275"><tspan
        sodipodi:role="line"
        id="tspan1273"
-       x="177.59323"
-       y="600.47461">reference</tspan></text>
+       x="137.59323"
+       y="560.47461">reference</tspan></text>
   <text
      id="text1281"
-     y="600.47461"
-     x="397.59326"
+     y="560.47461"
+     x="357.59326"
      style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
      xml:space="preserve"><tspan
        id="tspan1279"
-       y="600.47461"
-       x="397.59326"
+       y="560.47461"
+       x="357.59326"
        sodipodi:role="line">frame</tspan></text>
   <text
      xml:space="preserve"
      style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-     x="597.59326"
-     y="600.47461"
+     x="557.59326"
+     y="560.47461"
      id="text1287"><tspan
        id="tspan1285"
        sodipodi:role="line"
-       x="597.59326"
-       y="600.47461">frame</tspan></text>
+       x="557.59326"
+       y="560.47461">frame</tspan></text>
+  <text
+     id="text3607"
+     y="73.559319"
+     x="3359.7461"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"><tspan
+       y="73.559319"
+       x="3359.7461"
+       id="tspan3605"
+       sodipodi:role="line">Button widgets</tspan></text>
+  <text
+     id="text222"
+     y="440.47458"
+     x="984.59027"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:125%;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"><tspan
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
+       y="440.47458"
+       x="984.59027"
+       id="tspan202"
+       sodipodi:role="line">HMI:Switch@... (group)</tspan><tspan
+       id="tspan206"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
+       y="465.47458"
+       x="984.59027"
+       sodipodi:role="line">  |- reference (rect)</tspan><tspan
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
+       y="490.47458"
+       x="984.59027"
+       sodipodi:role="line"
+       id="tspan226">  |-. &quot;A&quot; (group)</tspan><tspan
+       id="tspan208"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
+       y="515.47461"
+       x="984.59027"
+       sodipodi:role="line">  | |- ...</tspan><tspan
+       id="tspan210"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
+       y="540.47461"
+       x="984.59027"
+       sodipodi:role="line">  |-. &quot;B&quot; (group)</tspan><tspan
+       id="tspan212"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
+       y="565.47461"
+       x="984.59027"
+       sodipodi:role="line">  | |- frame (rect)</tspan><tspan
+       id="tspan214"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
+       y="590.47461"
+       x="984.59027"
+       sodipodi:role="line">  | |- ...</tspan><tspan
+       id="tspan216"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
+       y="615.47461"
+       x="984.59027"
+       sodipodi:role="line">  |-. &quot;C&quot; (group)</tspan><tspan
+       id="tspan218"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
+       y="640.47461"
+       x="984.59027"
+       sodipodi:role="line">  | |- frame (rect)</tspan><tspan
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
+       id="tspan220"
+       y="665.47461"
+       x="984.59027"
+       sodipodi:role="line">  | |- ...</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="947.28815"
+     y="544.57629"
+     id="text230"><tspan
+       sodipodi:role="line"
+       id="tspan228"
+       x="947.28815"
+       y="544.57629">or</tspan></text>
+  <g
+     id="g213"
+     inkscape:label="HMI:Assign:dialog=&quot;simple&quot;:return=&quot;unknown&quot;@dialog=selection@return=userchoice"
+     style="stroke-width:1.42987263"
+     transform="matrix(0.699363,0,0,0.699363,-393.71175,336.54679)">
+    <rect
+       rx="30.536263"
+       ry="30.536263"
+       y="93.088097"
+       x="3373.916"
+       height="84.580788"
+       width="328.02896"
+       id="rect207"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.40424299;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <text
+       id="text211"
+       y="149.95857"
+       x="3537.5791"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.42987263px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         y="149.95857"
+         x="3537.5791"
+         id="tspan209"
+         sodipodi:role="line"
+         style="stroke-width:1.42987263px">simple</tspan></text>
+  </g>
+  <g
+     id="g221"
+     inkscape:label="HMI:Assign:dialog=&quot;withWidgets&quot;:return=&quot;unknown&quot;@dialog=selection@return=userchoice"
+     style="stroke-width:1.42987263"
+     transform="matrix(0.699363,0,0,0.699363,-463.64826,416.54679)">
+    <rect
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.40424299;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       id="rect215"
+       width="328.02908"
+       height="84.58078"
+       x="3473.9163"
+       y="93.088097"
+       ry="30.536263"
+       rx="30.536263" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.42987263px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="3637.5791"
+       y="149.95857"
+       id="text219"><tspan
+         sodipodi:role="line"
+         id="tspan217"
+         x="3637.5791"
+         y="149.95857"
+         style="stroke-width:1.42987263px">with widgets</tspan></text>
+  </g>
+  <g
+     id="g307"
+     inkscape:label="HMI:Display@userChoice"
+     transform="translate(-40.47583,140)">
+    <text
+       inkscape:label="format"
+       id="text263"
+       y="564.4068"
+       x="2120.3391"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         y="564.4068"
+         x="2120.3391"
+         sodipodi:role="line"
+         id="tspan309">user choice : %s</tspan></text>
+  </g>
+  <g
+     id="g303"
+     inkscape:label="HMI:Display@selection"
+     transform="translate(0,140)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="2080.4785"
+       y="504.4068"
+       id="text267"
+       inkscape:label="format"><tspan
+         sodipodi:role="line"
+         id="tspan265"
+         x="2080.4785"
+         y="504.4068">selected dialog : %s</tspan></text>
+  </g>
+  <text
+     id="text329"
+     y="143.19357"
+     x="1637.2058"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:29.3258667px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"><tspan
+       style="text-align:start;text-anchor:start;stroke-width:1px"
+       y="143.19357"
+       x="1637.2058"
+       sodipodi:role="line"
+       id="tspan394">Switch and Assign widgets can be used together to simulate </tspan><tspan
+       style="text-align:start;text-anchor:start;stroke-width:1px"
+       y="179.85091"
+       x="1637.2058"
+       sodipodi:role="line"
+       id="tspan366">behavior modal dialog or &quot;popup&quot; with user feedback.</tspan><tspan
+       style="text-align:start;text-anchor:start;stroke-width:1px"
+       y="216.50824"
+       x="1637.2058"
+       sodipodi:role="line"
+       id="tspan372">&quot;selection&quot; and &quot;userChoice&quot; local HMI are used to respectively</tspan><tspan
+       style="text-align:start;text-anchor:start;stroke-width:1px"
+       y="253.16557"
+       x="1637.2058"
+       sodipodi:role="line"
+       id="tspan412">select dialog to be shown and store user choice.</tspan><tspan
+       style="text-align:start;text-anchor:start;stroke-width:1px"
+       y="289.82291"
+       x="1637.2058"
+       sodipodi:role="line"
+       id="tspan404">Here, &quot;reference&quot; and &quot;frame&quot; rectangles are necessary to</tspan><tspan
+       style="text-align:start;text-anchor:start;stroke-width:1px"
+       y="326.48022"
+       x="1637.2058"
+       sodipodi:role="line"
+       id="tspan406">to spread out dialogs and page, otherwise overlapping.</tspan><tspan
+       style="text-align:start;text-anchor:start;stroke-width:1px"
+       y="363.13757"
+       x="1637.2058"
+       sodipodi:role="line"
+       id="tspan370" /></text>
   <g
      id="g3108"
      inkscape:label="HMI:Switch@selection">
     <g
        id="g1318"
-       inkscape:label="1">
+       inkscape:label="&quot;simple&quot;">
       <rect
          inkscape:label="overlay_background"
          y="760"
@@ -865,38 +889,6 @@
          height="720"
          x="1320"
          y="760" />
-      <g
-         style="stroke-width:1.42987263"
-         transform="matrix(0.699363,0,0,0.699363,-327.0073,866.04792)"
-         inkscape:label="HMI:Input@selection"
-         id="g2585-1-6">
-        <g
-           transform="matrix(1.4170886,0,0,1.4170886,-1453.6968,-56.464826)"
-           style="stroke-width:1.00902128"
-           inkscape:label="=0"
-           id="g2763-2-8">
-          <rect
-             style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.81362391;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-             id="rect114-6-7-0"
-             width="161.32761"
-             height="84.580788"
-             x="3457.2671"
-             y="93.088097"
-             ry="21.548592"
-             rx="21.548594" />
-          <text
-             xml:space="preserve"
-             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.00902128px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-             x="3537.5791"
-             y="149.95857"
-             id="text118-3-0-2"><tspan
-               style="stroke-width:1.00902128px"
-               sodipodi:role="line"
-               id="tspan116-1-9-1"
-               x="3537.5791"
-               y="149.95857">Close</tspan></text>
-        </g>
-      </g>
       <text
          id="text1472"
          y="1138.5114"
@@ -906,7 +898,91 @@
            y="1138.5114"
            x="1943.3489"
            id="tspan1470"
-           sodipodi:role="line">A MODAL DIALOG</tspan></text>
+           sodipodi:role="line">A SIMPLE MODAL DIALOG</tspan></text>
+      <g
+         id="g242"
+         inkscape:label="HMI:Assign:dialog=&quot;None&quot;:return=&quot;OK&quot;@dialog=selection@return=userChoice"
+         transform="matrix(0.699363,0,0,0.699363,-627.0073,1166.0479)"
+         style="stroke-width:1.42987263">
+        <rect
+           style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.40424299;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+           id="rect236"
+           width="228.61551"
+           height="119.85847"
+           x="3445.5569"
+           y="75.449257"
+           ry="30.536264"
+           rx="30.536266" />
+        <text
+           xml:space="preserve"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:56.68354416px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.42987251px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           x="3559.3662"
+           y="156.03976"
+           id="text240"><tspan
+             style="stroke-width:1.42987251px"
+             sodipodi:role="line"
+             id="tspan238"
+             x="3559.3662"
+             y="156.03976">OK</tspan></text>
+      </g>
+      <g
+         style="stroke-width:1.42987263"
+         transform="matrix(0.699363,0,0,0.699363,-447.0073,1166.0479)"
+         inkscape:label="HMI:Assign:dialog=&quot;None&quot;:return=&quot;Canceled&quot;@dialog=selection@return=userChoice"
+         id="g250">
+        <rect
+           rx="30.536266"
+           ry="30.536264"
+           y="75.449257"
+           x="3445.5569"
+           height="119.85847"
+           width="228.61551"
+           id="rect244"
+           style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.40424299;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+        <text
+           id="text248"
+           y="156.03976"
+           x="3559.3662"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:56.68354416px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.42987251px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           xml:space="preserve"><tspan
+             y="156.03976"
+             x="3559.3662"
+             id="tspan246"
+             sodipodi:role="line"
+             style="stroke-width:1.42987251px">Cancel</tspan></text>
+      </g>
+      <g
+         id="g1488-3"
+         inkscape:label="HMI:Assign:dialog=&quot;None&quot;:return=&quot;closed&quot;@dialog=selection@return=userChoice"
+         transform="matrix(0.699363,0,0,0.699363,-267.00732,846.0479)"
+         style="stroke-width:1.42987263">
+        <g
+           id="g1486-6"
+           inkscape:label="=0"
+           style="stroke-width:1.00902128"
+           transform="matrix(1.4170886,0,0,1.4170886,-1453.6968,-56.464826)">
+          <rect
+             rx="21.548594"
+             ry="21.548592"
+             y="103.0928"
+             x="3498.0554"
+             height="61.493015"
+             width="78.211609"
+             id="rect1480-7"
+             style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.81362391;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+          <text
+             id="text1484-5"
+             y="149.95857"
+             x="3537.5791"
+             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.00902128px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+             xml:space="preserve"><tspan
+               y="149.95857"
+               x="3537.5791"
+               id="tspan1482-3"
+               sodipodi:role="line"
+               style="stroke-width:1.00902128px">X</tspan></text>
+        </g>
+      </g>
     </g>
     <rect
        inkscape:label="reference"
@@ -919,7 +995,7 @@
     <g
        transform="translate(0,760)"
        id="g1494"
-       inkscape:label="2">
+       inkscape:label="&quot;withWidgets&quot;">
       <rect
          style="color:#000000;opacity:0.28800001;fill:#000000;fill-opacity:1"
          id="rect1474"
@@ -943,55 +1019,23 @@
          id="rect1478"
          style="color:#000000;opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:3, 3;stroke-dashoffset:0;stroke-opacity:1"
          inkscape:label="frame" />
-      <g
-         id="g1488"
-         inkscape:label="HMI:Input@selection"
-         transform="matrix(0.699363,0,0,0.699363,-327.0073,866.04792)"
-         style="stroke-width:1.42987263">
-        <g
-           id="g1486"
-           inkscape:label="=0"
-           style="stroke-width:1.00902128"
-           transform="matrix(1.4170886,0,0,1.4170886,-1453.6968,-56.464826)">
-          <rect
-             rx="21.548594"
-             ry="21.548592"
-             y="93.088097"
-             x="3457.2671"
-             height="84.580788"
-             width="161.32761"
-             id="rect1480"
-             style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.81362391;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
-          <text
-             id="text1484"
-             y="149.95857"
-             x="3537.5791"
-             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.00902128px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-             xml:space="preserve"><tspan
-               y="149.95857"
-               x="3537.5791"
-               id="tspan1482"
-               sodipodi:role="line"
-               style="stroke-width:1.00902128px">Close</tspan></text>
-        </g>
-      </g>
       <text
          xml:space="preserve"
          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
          x="1943.3489"
-         y="1058.5115"
+         y="1018.5115"
          id="text1492"><tspan
            sodipodi:role="line"
            id="tspan1490"
            x="1943.3489"
-           y="1058.5115">A MODAL DIALOG</tspan><tspan
+           y="1018.5115">A MODAL DIALOG</tspan><tspan
            id="tspan1504"
            sodipodi:role="line"
            x="1943.3489"
-           y="1108.5115">with widgets</tspan></text>
+           y="1068.5115">with widgets</tspan></text>
       <g
          style="stroke-width:1.42987263"
-         transform="matrix(0.699363,0,0,0.699363,-632.97869,1158.0327)"
+         transform="matrix(0.699363,0,0,0.699363,-672.97869,1158.0327)"
          inkscape:label="HMI:Input@.position"
          id="g2585-1-4">
         <g
@@ -1157,80 +1201,447 @@
            id="rect1264"
            style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.11429262px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
       </g>
+      <g
+         id="g1488"
+         inkscape:label="HMI:Assign:dialog=&quot;None&quot;:return=&quot;closed&quot;@dialog=selection@return=userChoice"
+         transform="matrix(0.699363,0,0,0.699363,-267.00732,846.0479)"
+         style="stroke-width:1.42987263">
+        <g
+           id="g1486"
+           inkscape:label="=0"
+           style="stroke-width:1.00902128"
+           transform="matrix(1.4170886,0,0,1.4170886,-1453.6968,-56.464826)">
+          <rect
+             rx="21.548594"
+             ry="21.548592"
+             y="103.0928"
+             x="3498.0554"
+             height="61.493015"
+             width="78.211609"
+             id="rect1480"
+             style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.81362391;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+          <text
+             id="text1484"
+             y="149.95857"
+             x="3537.5791"
+             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.00902128px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+             xml:space="preserve"><tspan
+               y="149.95857"
+               x="3537.5791"
+               id="tspan1482"
+               sodipodi:role="line"
+               style="stroke-width:1.00902128px">X</tspan></text>
+        </g>
+      </g>
+      <g
+         id="g242-3"
+         inkscape:label="HMI:Assign\"
+         transform="matrix(0.699363,0,0,0.699363,-307.71004,1178.2943)"
+         style="stroke-width:1.42987263">
+        <desc
+           id="desc755">:dialog=&quot;None&quot;
+:return=&quot;Applied&quot;
+:plcvar=uservar
+@dialog=selection
+@return=userChoice
+@uservar=.position
+@plcvar=/PLCHMIVAR</desc>
+        <rect
+           style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.40424299;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+           id="rect236-6"
+           width="228.61551"
+           height="119.85847"
+           x="3445.5569"
+           y="75.449257"
+           ry="30.536264"
+           rx="30.536266" />
+        <text
+           xml:space="preserve"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:56.68354416px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.42987251px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           x="3559.3662"
+           y="156.03976"
+           id="text240-7"><tspan
+             style="stroke-width:1.42987251px"
+             sodipodi:role="line"
+             id="tspan238-5"
+             x="3559.3662"
+             y="156.03976">Apply</tspan></text>
+      </g>
+    </g>
+  </g>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:29.3258667px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="2937.2058"
+     y="143.19357"
+     id="text392"><tspan
+       id="tspan390"
+       sodipodi:role="line"
+       x="2937.2058"
+       y="143.19357"
+       style="text-align:start;text-anchor:start;stroke-width:1px">In this example, 3 types of button ar connected to the same</tspan><tspan
+       sodipodi:role="line"
+       x="2937.2058"
+       y="179.85091"
+       style="text-align:start;text-anchor:start;stroke-width:1px"
+       id="tspan436">HMI local variable. </tspan><tspan
+       sodipodi:role="line"
+       x="2937.2058"
+       y="216.50824"
+       style="text-align:start;text-anchor:start;stroke-width:1px"
+       id="tspan438">Here, &quot;reference&quot; and &quot;frame&quot; rectangles are used to</tspan><tspan
+       sodipodi:role="line"
+       x="2937.2058"
+       y="253.16557"
+       style="text-align:start;text-anchor:start;stroke-width:1px"
+       id="tspan440">separate active and inactive state of buttons</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="141.14536"
+     y="518.58539"
+     id="text444"><tspan
+       sodipodi:role="line"
+       id="tspan442"
+       x="141.14536"
+       y="518.58539">A</tspan></text>
+  <text
+     id="text448"
+     y="518.58539"
+     x="361.14536"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"><tspan
+       y="518.58539"
+       x="361.14536"
+       id="tspan446"
+       sodipodi:role="line">B</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="561.14539"
+     y="518.58539"
+     id="text452"><tspan
+       sodipodi:role="line"
+       id="tspan450"
+       x="561.14539"
+       y="518.58539">C</tspan></text>
+  <rect
+     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.99999988;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:3.99999998, 3.99999998;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     id="rect488"
+     width="240"
+     height="101.20848"
+     x="14.419678"
+     y="602.29602" />
+  <rect
+     y="602.29602"
+     x="254.41968"
+     height="101.20847"
+     width="15.100924"
+     id="rect496"
+     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#6d6d6d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.99999988;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:3.99999998, 3.99999998;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+  <text
+     id="text500"
+     y="622.47461"
+     x="141.26608"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"><tspan
+       y="622.47461"
+       x="141.26608"
+       id="tspan498"
+       sodipodi:role="line">Page (final result)</tspan></text>
+  <g
+     id="g561"
+     transform="translate(0,-20)">
+    <path
+       sodipodi:type="star"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       id="path502"
+       sodipodi:sides="6"
+       sodipodi:cx="141.13559"
+       sodipodi:cy="684.00531"
+       sodipodi:r1="26.350622"
+       sodipodi:r2="13.175311"
+       sodipodi:arg1="0.58235295"
+       sodipodi:arg2="1.1059517"
+       inkscape:flatsided="false"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 163.14286,698.4979 -16.10099,-2.71529 -7.4536,14.52785 -5.69898,-15.30151 -16.30829,0.80892 10.40201,-12.58622 -8.85469,-13.71893 16.10099,2.7153 7.4536,-14.52786 5.69898,15.30151 16.30829,-0.80892 -10.40201,12.58622 z"
+       inkscape:transform-center-x="0.43452006"
+       inkscape:transform-center-y="-2.5530423" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="141.14536"
+       y="698.58539"
+       id="text538"><tspan
+         sodipodi:role="line"
+         id="tspan536"
+         x="141.14536"
+         y="698.58539">A</tspan></text>
+  </g>
+  <g
+     id="g556"
+     transform="translate(-60,-20)">
+    <path
+       inkscape:transform-center-y="-2.5530423"
+       inkscape:transform-center-x="0.43452006"
+       d="m 223.14289,698.4979 -19.35043,-1.58794 -17.14943,9.10262 1.58794,-19.35043 -9.10262,-17.14943 19.35043,1.58794 17.14943,-9.10262 -1.58794,19.35043 z"
+       inkscape:randomized="0"
+       inkscape:rounded="0"
+       inkscape:flatsided="false"
+       sodipodi:arg2="1.3677511"
+       sodipodi:arg1="0.58235295"
+       sodipodi:r2="13.175311"
+       sodipodi:r1="26.350622"
+       sodipodi:cy="684.00531"
+       sodipodi:cx="201.13562"
+       sodipodi:sides="4"
+       id="path504"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#008000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       sodipodi:type="star" />
+    <text
+       id="text542"
+       y="698.58539"
+       x="201.14536"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         y="698.58539"
+         x="201.14536"
+         id="tspan540"
+         sodipodi:role="line">B</tspan></text>
+  </g>
+  <g
+     id="g551"
+     transform="translate(-420,-20)">
+    <path
+       sodipodi:type="star"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       id="path506"
+       sodipodi:sides="5"
+       sodipodi:cx="561.13562"
+       sodipodi:cy="684.00531"
+       sodipodi:r1="26.350622"
+       sodipodi:r2="13.175311"
+       sodipodi:arg1="0.58235295"
+       sodipodi:arg2="1.2106715"
+       inkscape:flatsided="false"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 583.14289,698.4979 -17.36441,-2.16244 -11.62551,13.07847 -3.3093,-17.18277 -16.03084,-7.01505 15.31915,-8.4571 1.71792,-17.414 12.77705,11.95599 17.09257,-3.74739 -7.4225,15.8463 z"
+       inkscape:transform-center-x="0.43452006"
+       inkscape:transform-center-y="-2.5530423" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="561.14539"
+       y="698.58539"
+       id="text546"><tspan
+         sodipodi:role="line"
+         id="tspan544"
+         x="561.14539"
+         y="698.58539">C</tspan></text>
+  </g>
+  <g
+     id="g2496"
+     inkscape:label="page_template"
+     transform="translate(0,2.1367187e-5)">
+    <rect
+       y="0"
+       x="-1320"
+       height="720"
+       width="1280"
+       id="rect1420"
+       style="color:#000000;opacity:1;fill:#d6d6d6;fill-opacity:1" />
+    <g
+       inkscape:label="HMI:Jump:Home"
+       id="g2455">
+      <use
+         x="0"
+         y="0"
+         xlink:href="#rect2313"
+         id="use2435"
+         transform="translate(400,-2.1367187e-5)"
+         width="100%"
+         height="100%"
+         inkscape:label="active" />
+      <use
+         x="0"
+         y="0"
+         xlink:href="#rect2311"
+         id="use2437"
+         transform="translate(400,-2.1367187e-5)"
+         width="100%"
+         height="100%"
+         inkscape:label="inactive" />
+      <text
+         id="text855-7-1"
+         y="70.251053"
+         x="-1166.8177"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           id="tspan66-3"
+           y="70.251053"
+           x="-1166.8177"
+           sodipodi:role="line">Home</tspan></text>
+    </g>
+    <g
+       inkscape:label="HMI:Jump:Switch"
+       id="g2461"
+       transform="translate(0,20)">
+      <use
+         height="100%"
+         width="100%"
+         transform="translate(400,99.999979)"
+         id="use2439"
+         xlink:href="#rect2313"
+         y="0"
+         x="0"
+         inkscape:label="active" />
+      <use
+         height="100%"
+         width="100%"
+         transform="translate(400,99.999979)"
+         id="use2441"
+         xlink:href="#rect2311"
+         y="0"
+         x="0"
+         inkscape:label="inactive" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="-1165.1674"
+         y="170.25105"
+         id="text2349"><tspan
+           sodipodi:role="line"
+           x="-1165.1674"
+           y="170.25105"
+           id="tspan2347">Swith</tspan></text>
+    </g>
+    <g
+       inkscape:label="HMI:Jump:Buttons"
+       id="g2467"
+       transform="translate(0,40)">
+      <use
+         x="0"
+         y="0"
+         xlink:href="#rect2313"
+         id="use2443"
+         transform="translate(400,199.99998)"
+         width="100%"
+         height="100%"
+         inkscape:label="active" />
+      <use
+         x="0"
+         y="0"
+         xlink:href="#rect2311"
+         id="use2445"
+         transform="translate(400,199.99998)"
+         width="100%"
+         height="100%"
+         inkscape:label="inactive" />
+      <text
+         id="text2357"
+         y="270.25104"
+         x="-1165.7826"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           id="tspan2355"
+           y="270.25104"
+           x="-1165.7826"
+           sodipodi:role="line">Buttons</tspan></text>
     </g>
   </g>
   <g
-     transform="translate(-1677.9661,-25.084725)"
-     inkscape:label="HMI:VarInit:0@selection"
-     id="g1502">
-    <text
-       id="text1500"
-       y="-108.39357"
-       x="3726.6924"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.66666603px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       xml:space="preserve"><tspan
+     id="g472"
+     inkscape:label="DECLARATIONS">
+    <g
+       transform="translate(-875.45983,1716.017)"
+       inkscape:label="HMI:VarInit:1@.position"
+       id="g2590">
+      <text
+         id="text2743"
          y="-108.39357"
          x="3726.6924"
-         id="tspan1496"
-         sodipodi:role="line">declaration of user_level HMI local variable</tspan><tspan
-         id="tspan1498"
-         y="-85.060234"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.66666603px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           id="tspan2765"
+           y="-108.39357"
+           x="3726.6924"
+           sodipodi:role="line">declaration of &quot;position&quot; HMI local variable</tspan></text>
+    </g>
+    <g
+       inkscape:label="HMI:VarInit:&quot;None&quot;@selection"
+       id="g251">
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.66666603px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="2048.7263"
+         y="-133.4783"
+         id="text1500"><tspan
+           sodipodi:role="line"
+           x="2048.7263"
+           y="-133.4783"
+           id="tspan1498">declaration of 'selection' local variable</tspan></text>
+    </g>
+    <g
+       inkscape:label="HMI:VarInit:&quot;unknown&quot;@userChoice"
+       id="g255">
+      <text
+         id="text235"
+         y="-93.478294"
+         x="2048.7263"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.66666603px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           id="tspan257"
+           y="-93.478294"
+           x="2048.7263"
+           sodipodi:role="line">declaration of 'userChoice' local variable</tspan></text>
+    </g>
+    <g
+       id="g3041"
+       inkscape:label="HMI:VarInit:4@.range"
+       transform="translate(-875.45983,1776.017)">
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.66666603px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
          x="3726.6924"
-         sodipodi:role="line">(not a PLC variable)</tspan></text>
-  </g>
-  <g
-     transform="translate(-875.45983,1776.017)"
-     inkscape:label="HMI:VarInit:4@.range"
-     id="g3041">
-    <text
-       id="text3039"
-       y="-108.39357"
-       x="3726.6924"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.66666603px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       xml:space="preserve"><tspan
-         id="tspan3037"
+         y="-108.39357"
+         id="text3039"><tspan
+           sodipodi:role="line"
+           x="3726.6924"
+           y="-108.39357"
+           id="tspan3037">declaration of &quot;range&quot; HMI local variable</tspan></text>
+    </g>
+    <g
+       transform="translate(-875.45983,1836.017)"
+       inkscape:label="HMI:VarInit:1@.size"
+       id="g3049">
+      <text
+         id="text3047"
          y="-108.39357"
          x="3726.6924"
-         sodipodi:role="line">declaration of &quot;range&quot; HMI local variable</tspan></text>
-  </g>
-  <g
-     id="g3049"
-     inkscape:label="HMI:VarInit:1@.size"
-     transform="translate(-875.45983,1836.017)">
-    <text
-       xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.66666603px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       x="3726.6924"
-       y="-108.39357"
-       id="text3047"><tspan
-         sodipodi:role="line"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.66666603px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           id="tspan3045"
+           y="-108.39357"
+           x="3726.6924"
+           sodipodi:role="line">declaration of &quot;size&quot; HMI local variable</tspan></text>
+    </g>
+    <g
+       id="g195"
+       inkscape:label="HMI:VarInit:true@.boolvar"
+       transform="translate(-155.45983,36.017)">
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.66666603px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
          x="3726.6924"
          y="-108.39357"
-         id="tspan3045">declaration of &quot;size&quot; HMI local variable</tspan></text>
-  </g>
-  <text
-     id="text3607"
-     y="73.559319"
-     x="3359.7461"
-     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-     xml:space="preserve"><tspan
-       y="73.559319"
-       x="3359.7461"
-       id="tspan3605"
-       sodipodi:role="line">Button widgets</tspan></text>
-  <g
-     transform="translate(-155.45983,36.017)"
-     inkscape:label="HMI:VarInit:true@.boolvar"
-     id="g195">
-    <text
-       id="text193"
-       y="-108.39357"
-       x="3726.6924"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.66666603px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       xml:space="preserve"><tspan
-         id="tspan191"
-         y="-108.39357"
-         x="3726.6924"
-         sodipodi:role="line">declaration of &quot;position&quot; HMI local variable</tspan></text>
+         id="text193"><tspan
+           sodipodi:role="line"
+           x="3726.6924"
+           y="-108.39357"
+           id="tspan191">declaration of &quot;position&quot; HMI local variable</tspan></text>
+    </g>
   </g>
 </svg>
--- a/svghmi/analyse_widget.xslt	Sun Feb 19 08:37:27 2023 +0000
+++ b/svghmi/analyse_widget.xslt	Mon Feb 27 13:47:36 2023 +0100
@@ -262,6 +262,42 @@
       <xsl:text>speed</xsl:text>
     </path>
   </xsl:template>
+  <xsl:template match="widget[@type='Assign']" mode="widget_desc">
+    <type>
+      <xsl:value-of select="@type"/>
+    </type>
+    <longdesc>
+      <xsl:text>
+</xsl:text>
+      <xsl:text>Arguments are either:
+</xsl:text>
+      <xsl:text>
+</xsl:text>
+      <xsl:text>- name=value: setting variable with literal value.
+</xsl:text>
+      <xsl:text>- name=other_name: copy variable content into another
+</xsl:text>
+      <xsl:text>
+</xsl:text>
+      <xsl:text>"active"+"inactive" labeled elements can be provided to show feedback when pressed
+</xsl:text>
+      <xsl:text>
+</xsl:text>
+      <xsl:text>Exemples:
+</xsl:text>
+      <xsl:text>
+</xsl:text>
+      <xsl:text>HMI:Assign:notify=1@notify=/PLCVAR
+</xsl:text>
+      <xsl:text>HMI:Assign:ack=2:notify=1@ack=.local_var@notify=/PLCVAR
+</xsl:text>
+      <xsl:text>
+</xsl:text>
+    </longdesc>
+    <shortdesc>
+      <xsl:text>Assign variables on click</xsl:text>
+    </shortdesc>
+  </xsl:template>
   <xsl:template match="widget[@type='Back']" mode="widget_desc">
     <type>
       <xsl:value-of select="@type"/>
--- a/svghmi/detachable_pages.ysl2	Sun Feb 19 08:37:27 2023 +0000
+++ b/svghmi/detachable_pages.ysl2	Mon Feb 27 13:47:36 2023 +0100
@@ -25,6 +25,17 @@
 emit "preamble:default-page" {
     |
     | var default_page = "«$default_page»";
+    const "screensaverpage", "$hmi_pages_descs[arg[1]/@value = 'ScreenSaver']";
+    const "delay" choose {
+        when "$screensaverpage" {
+            const "delaystr", "$screensaverpage/arg[2]/@value";
+            if "not(regexp:test($delaystr,'^[0-9]+$'))"
+                error > ScreenSaver page has missing or malformed delay argument.
+            value "$delaystr";
+        }
+        otherwise > null
+    }
+    | var screensaver_delay = «$delay»;
 }
 
 const "keypads_descs", "$parsed_widgets/widget[@type = 'Keypad']";
--- a/svghmi/gen_index_xhtml.xslt	Sun Feb 19 08:37:27 2023 +0000
+++ b/svghmi/gen_index_xhtml.xslt	Mon Feb 27 13:47:36 2023 +0100
@@ -555,6 +555,23 @@
     <xsl:variable name="candidates" select="$geometry[@Id != $elt/@id]"/>
     <func:result select="$candidates[(@Id = $groups/@id and (func:intersect($g, .) = 9)) or &#10;                          (not(@Id = $groups/@id) and (func:intersect($g, .) &gt; 0 ))]"/>
   </func:function>
+  <func:function name="func:offset">
+    <xsl:param name="elt1"/>
+    <xsl:param name="elt2"/>
+    <xsl:variable name="g1" select="$geometry[@Id = $elt1/@id]"/>
+    <xsl:variable name="g2" select="$geometry[@Id = $elt2/@id]"/>
+    <xsl:variable name="result">
+      <vector>
+        <xsl:attribute name="x">
+          <xsl:value-of select="$g2/@x - $g1/@x"/>
+        </xsl:attribute>
+        <xsl:attribute name="y">
+          <xsl:value-of select="$g2/@y - $g1/@y"/>
+        </xsl:attribute>
+      </vector>
+    </xsl:variable>
+    <func:result select="exsl:node-set($result)"/>
+  </func:function>
   <xsl:variable name="hmi_lists_descs" select="$parsed_widgets/widget[@type = 'List']"/>
   <xsl:variable name="hmi_lists" select="$hmi_elements[@id = $hmi_lists_descs/@id]"/>
   <xsl:variable name="hmi_textlists_descs" select="$parsed_widgets/widget[@type = 'TextList']"/>
@@ -620,6 +637,27 @@
     <xsl:value-of select="$default_page"/>
     <xsl:text>";
 </xsl:text>
+    <xsl:variable name="screensaverpage" select="$hmi_pages_descs[arg[1]/@value = 'ScreenSaver']"/>
+    <xsl:variable name="delay">
+      <xsl:choose>
+        <xsl:when test="$screensaverpage">
+          <xsl:variable name="delaystr" select="$screensaverpage/arg[2]/@value"/>
+          <xsl:if test="not(regexp:test($delaystr,'^[0-9]+$'))">
+            <xsl:message terminate="yes">
+              <xsl:text>ScreenSaver page has missing or malformed delay argument.</xsl:text>
+            </xsl:message>
+          </xsl:if>
+          <xsl:value-of select="$delaystr"/>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:text>null</xsl:text>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:variable>
+    <xsl:text>var screensaver_delay = </xsl:text>
+    <xsl:value-of select="$delay"/>
+    <xsl:text>;
+</xsl:text>
     <xsl:text>
 </xsl:text>
   </xsl:template>
@@ -657,7 +695,8 @@
     <xsl:param name="page"/>
     <xsl:variable name="page_overlapping_geometry" select="$overlapping_geometry/elt[@id = $page/@id]/*"/>
     <xsl:variable name="page_overlapping_elements" select="//svg:*[@id = $page_overlapping_geometry/@Id]"/>
-    <xsl:variable name="page_sub_elements" select="func:refered_elements($page | $page_overlapping_elements)"/>
+    <xsl:variable name="page_widgets_elements" select="&#10;        $hmi_elements[not(@id=$page/@id)&#10;                      and descendant-or-self::svg:*/@id = $page_overlapping_elements/@id]&#10;        /descendant-or-self::svg:*"/>
+    <xsl:variable name="page_sub_elements" select="func:refered_elements($page | $page_overlapping_elements | $page_widgets_elements)"/>
     <func:result select="$page_sub_elements"/>
   </func:function>
   <func:function name="func:required_elements">
@@ -890,6 +929,14 @@
       <xsl:text>
 </xsl:text>
     </xsl:for-each>
+    <xsl:text>DISCARDABLES:
+</xsl:text>
+    <xsl:for-each select="$discardable_elements">
+      <xsl:text> </xsl:text>
+      <xsl:value-of select="@id"/>
+      <xsl:text>
+</xsl:text>
+    </xsl:for-each>
     <xsl:text>In Foreach:
 </xsl:text>
     <xsl:for-each select="$in_forEach_widget_ids">
@@ -945,6 +992,21 @@
       <xsl:value-of select="substring(., 2)"/>
     </xsl:attribute>
   </xsl:template>
+  <xsl:template xmlns="http://www.w3.org/2000/svg" mode="inline_svg" match="svg:rect[@inkscape:label='reference' or @inkscape:label='frame']"/>
+  <xsl:template xmlns="http://www.w3.org/2000/svg" mode="inline_svg" match="svg:g[svg:rect/@inkscape:label='frame']">
+    <xsl:variable name="reference_rect" select="(../svg:rect | ../svg:g/svg:rect)[@inkscape:label='reference']"/>
+    <xsl:variable name="frame_rect" select="svg:rect[@inkscape:label='frame']"/>
+    <xsl:variable name="offset" select="func:offset($frame_rect, $reference_rect)"/>
+    <xsl:copy>
+      <xsl:attribute name="svghmi_x_offset">
+        <xsl:value-of select="$offset/vector/@x"/>
+      </xsl:attribute>
+      <xsl:attribute name="svghmi_y_offset">
+        <xsl:value-of select="$offset/vector/@y"/>
+      </xsl:attribute>
+      <xsl:apply-templates mode="inline_svg" select="@* | node()"/>
+    </xsl:copy>
+  </xsl:template>
   <xsl:variable name="targets_not_to_unlink" select="$hmi_lists/descendant-or-self::svg:*"/>
   <xsl:variable name="to_unlink" select="$hmi_widgets/descendant-or-self::svg:use"/>
   <func:function name="func:is_unlinkable">
@@ -1516,8 +1578,6 @@
 </xsl:text>
     <xsl:text>var cache = hmitree_types.map(_ignored =&gt; undefined);
 </xsl:text>
-    <xsl:text>var updates = new Map();
-</xsl:text>
     <xsl:text>
 </xsl:text>
     <xsl:text>function page_local_index(varname, pagename){
@@ -1530,7 +1590,7 @@
 </xsl:text>
     <xsl:text>        new_index = next_available_index++;
 </xsl:text>
-    <xsl:text>        hmi_locals[pagename] = {[varname]:new_index}
+    <xsl:text>        hmi_locals[pagename] = {[varname]:new_index};
 </xsl:text>
     <xsl:text>    } else {
 </xsl:text>
@@ -1556,8 +1616,6 @@
 </xsl:text>
     <xsl:text>        cache[new_index] = defaultval; 
 </xsl:text>
-    <xsl:text>        updates.set(new_index, defaultval);
-</xsl:text>
     <xsl:text>        if(persistent_locals.has(varname))
 </xsl:text>
     <xsl:text>            persistent_indexes.set(new_index, varname);
@@ -2656,6 +2714,199 @@
     <xsl:text>}
 </xsl:text>
   </xsl:template>
+  <xsl:template match="widget[@type='Assign']" mode="widget_desc">
+    <type>
+      <xsl:value-of select="@type"/>
+    </type>
+    <longdesc>
+      <xsl:text>
+</xsl:text>
+      <xsl:text>Arguments are either:
+</xsl:text>
+      <xsl:text>
+</xsl:text>
+      <xsl:text>- name=value: setting variable with literal value.
+</xsl:text>
+      <xsl:text>- name=other_name: copy variable content into another
+</xsl:text>
+      <xsl:text>
+</xsl:text>
+      <xsl:text>"active"+"inactive" labeled elements can be provided to show feedback when pressed
+</xsl:text>
+      <xsl:text>
+</xsl:text>
+      <xsl:text>Exemples:
+</xsl:text>
+      <xsl:text>
+</xsl:text>
+      <xsl:text>HMI:Assign:notify=1@notify=/PLCVAR
+</xsl:text>
+      <xsl:text>HMI:Assign:ack=2:notify=1@ack=.local_var@notify=/PLCVAR
+</xsl:text>
+      <xsl:text>
+</xsl:text>
+    </longdesc>
+    <shortdesc>
+      <xsl:text>Assign variables on click</xsl:text>
+    </shortdesc>
+  </xsl:template>
+  <xsl:template match="widget[@type='Assign']" mode="widget_class">
+    <xsl:text>class </xsl:text>
+    <xsl:text>AssignWidget</xsl:text>
+    <xsl:text> extends Widget{
+</xsl:text>
+    <xsl:text>        frequency = 2;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        onmouseup(evt) {
+</xsl:text>
+    <xsl:text>            svg_root.removeEventListener("pointerup", this.bound_onmouseup, true);
+</xsl:text>
+    <xsl:text>            if(this.enable_state) {
+</xsl:text>
+    <xsl:text>                this.activity_state = false
+</xsl:text>
+    <xsl:text>                this.request_animate();
+</xsl:text>
+    <xsl:text>                this.assign();
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        onmousedown(){
+</xsl:text>
+    <xsl:text>            if(this.enable_state) {
+</xsl:text>
+    <xsl:text>                svg_root.addEventListener("pointerup", this.bound_onmouseup, true);
+</xsl:text>
+    <xsl:text>                this.activity_state = true;
+</xsl:text>
+    <xsl:text>                this.request_animate();
+</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='Assign']" mode="widget_defs">
+    <xsl:param name="hmi_element"/>
+    <xsl:variable name="disability">
+      <xsl:call-template name="defs_by_labels">
+        <xsl:with-param name="hmi_element" select="$hmi_element"/>
+        <xsl:with-param name="labels">
+          <xsl:text>/disabled</xsl:text>
+        </xsl:with-param>
+        <xsl:with-param name="mandatory" select="'no'"/>
+      </xsl:call-template>
+    </xsl:variable>
+    <xsl:value-of select="$disability"/>
+    <xsl:variable name="has_disability" select="string-length($disability)&gt;0"/>
+    <xsl:text>    activable_sub:{
+</xsl:text>
+    <xsl:variable name="activity">
+      <xsl:call-template name="defs_by_labels">
+        <xsl:with-param name="hmi_element" select="$hmi_element"/>
+        <xsl:with-param name="labels">
+          <xsl:text>/active /inactive</xsl:text>
+        </xsl:with-param>
+        <xsl:with-param name="mandatory">
+          <xsl:text>no</xsl:text>
+        </xsl:with-param>
+      </xsl:call-template>
+    </xsl:variable>
+    <xsl:value-of select="$activity"/>
+    <xsl:variable name="has_activity" select="string-length($activity)&gt;0"/>
+    <xsl:text>    },
+</xsl:text>
+    <xsl:text>    has_activity: </xsl:text>
+    <xsl:value-of select="$has_activity"/>
+    <xsl:text>,
+</xsl:text>
+    <xsl:text>    init: function() {
+</xsl:text>
+    <xsl:text>        this.bound_onmouseup = this.onmouseup.bind(this);
+</xsl:text>
+    <xsl:text>        this.element.addEventListener("pointerdown", this.onmousedown.bind(this));
+</xsl:text>
+    <xsl:text>    },
+</xsl:text>
+    <xsl:text>    assignments: {},
+</xsl:text>
+    <xsl:text>    dispatch: function(value, oldval, varnum) {
+</xsl:text>
+    <xsl:variable name="widget" select="."/>
+    <xsl:for-each select="path">
+      <xsl:variable name="varid" select="generate-id()"/>
+      <xsl:variable name="varnum" select="position()-1"/>
+      <xsl:if test="@assign">
+        <xsl:for-each select="$widget/path[@assign]">
+          <xsl:if test="$varid = generate-id()">
+            <xsl:text>        if(varnum == </xsl:text>
+            <xsl:value-of select="$varnum"/>
+            <xsl:text>) this.assignments["</xsl:text>
+            <xsl:value-of select="@assign"/>
+            <xsl:text>"] = value;
+</xsl:text>
+          </xsl:if>
+        </xsl:for-each>
+      </xsl:if>
+    </xsl:for-each>
+    <xsl:text>    },
+</xsl:text>
+    <xsl:text>    assign: function() {
+</xsl:text>
+    <xsl:variable name="paths" select="path"/>
+    <xsl:for-each select="arg[contains(@value,'=')]">
+      <xsl:variable name="name" select="substring-before(@value,'=')"/>
+      <xsl:variable name="value" select="substring-after(@value,'=')"/>
+      <xsl:variable name="index">
+        <xsl:for-each select="$paths">
+          <xsl:if test="@assign = $name">
+            <xsl:value-of select="position()-1"/>
+          </xsl:if>
+        </xsl:for-each>
+      </xsl:variable>
+      <xsl:variable name="isVarName" select="regexp:test($value,'^[a-zA-Z_][a-zA-Z0-9_]+$')"/>
+      <xsl:choose>
+        <xsl:when test="$isVarName">
+          <xsl:text>        const </xsl:text>
+          <xsl:value-of select="$value"/>
+          <xsl:text> = this.assignments["</xsl:text>
+          <xsl:value-of select="$value"/>
+          <xsl:text>"];
+</xsl:text>
+          <xsl:text>        if(</xsl:text>
+          <xsl:value-of select="$value"/>
+          <xsl:text> != undefined)
+</xsl:text>
+          <xsl:text>            this.apply_hmi_value(</xsl:text>
+          <xsl:value-of select="$index"/>
+          <xsl:text>, </xsl:text>
+          <xsl:value-of select="$value"/>
+          <xsl:text>);
+</xsl:text>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:text>        this.apply_hmi_value(</xsl:text>
+          <xsl:value-of select="$index"/>
+          <xsl:text>, </xsl:text>
+          <xsl:value-of select="$value"/>
+          <xsl:text>);
+</xsl:text>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:for-each>
+    <xsl:text>    },
+</xsl:text>
+  </xsl:template>
   <xsl:template match="widget[@type='Back']" mode="widget_desc">
     <type>
       <xsl:value-of select="@type"/>
@@ -2677,9 +2928,17 @@
 </xsl:text>
     <xsl:text>        if(jump_history.length &gt; 1){
 </xsl:text>
-    <xsl:text>           jump_history.pop();
-</xsl:text>
-    <xsl:text>           let [page_name, index] = jump_history.pop();
+    <xsl:text>           let page_name, index;
+</xsl:text>
+    <xsl:text>           do {
+</xsl:text>
+    <xsl:text>               jump_history.pop(); // forget current page
+</xsl:text>
+    <xsl:text>               if(jump_history.length == 0) return;
+</xsl:text>
+    <xsl:text>               [page_name, index] = jump_history[jump_history.length-1];
+</xsl:text>
+    <xsl:text>           } while(page_name == "ScreenSaver") // never go back to ScreenSaver
 </xsl:text>
     <xsl:text>           switch_page(page_name, index);
 </xsl:text>
@@ -2689,7 +2948,7 @@
 </xsl:text>
     <xsl:text>    init() {
 </xsl:text>
-    <xsl:text>        this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
+    <xsl:text>        this.element.onclick = this.on_click.bind(this);
 </xsl:text>
     <xsl:text>    }
 </xsl:text>
@@ -5923,39 +6182,31 @@
 </xsl:text>
     <xsl:text>        frequency = 2;
 </xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>        make_on_click() {
-</xsl:text>
-    <xsl:text>            let that = this;
-</xsl:text>
-    <xsl:text>            const name = this.args[0];
-</xsl:text>
-    <xsl:text>            return function(evt){
-</xsl:text>
-    <xsl:text>                /* TODO: in order to allow jumps to page selected through
-</xsl:text>
-    <xsl:text>                   for exemple a dropdown, support path pointing to local
-</xsl:text>
-    <xsl:text>                   variable whom value would be an HMI_TREE index and then
-</xsl:text>
-    <xsl:text>                   jump to a relative page not hard-coded in advance
-</xsl:text>
-    <xsl:text>                */
-</xsl:text>
-    <xsl:text>                if(that.enable_state) {
-</xsl:text>
-    <xsl:text>                    const index =
-</xsl:text>
-    <xsl:text>                        (that.is_relative &amp;&amp; that.indexes.length &gt; 0) ?
-</xsl:text>
-    <xsl:text>                        that.indexes[0] + that.offset : undefined;
-</xsl:text>
-    <xsl:text>                    fading_page_switch(name, index);
-</xsl:text>
-    <xsl:text>                    that.notify();
-</xsl:text>
-    <xsl:text>                }
+    <xsl:text>        target_page_is_current_page = false;
+</xsl:text>
+    <xsl:text>        button_beeing_pressed = false;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        onmouseup(evt) {
+</xsl:text>
+    <xsl:text>            svg_root.removeEventListener("pointerup", this.bound_onmouseup, true);
+</xsl:text>
+    <xsl:text>            if(this.enable_state) {
+</xsl:text>
+    <xsl:text>                const index =
+</xsl:text>
+    <xsl:text>                    (this.is_relative &amp;&amp; this.indexes.length &gt; 0) ?
+</xsl:text>
+    <xsl:text>                    this.indexes[0] + this.offset : undefined;
+</xsl:text>
+    <xsl:text>                this.button_beeing_pressed = false;
+</xsl:text>
+    <xsl:text>                this.activity_state = this.target_page_is_current_page || this.button_beeing_pressed;
+</xsl:text>
+    <xsl:text>                fading_page_switch(this.args[0], index);
+</xsl:text>
+    <xsl:text>                this.notify();
 </xsl:text>
     <xsl:text>            }
 </xsl:text>
@@ -5963,6 +6214,24 @@
 </xsl:text>
     <xsl:text>
 </xsl:text>
+    <xsl:text>        onmousedown(){
+</xsl:text>
+    <xsl:text>            if(this.enable_state) {
+</xsl:text>
+    <xsl:text>                svg_root.addEventListener("pointerup", this.bound_onmouseup, true);
+</xsl:text>
+    <xsl:text>                this.button_beeing_pressed = true;
+</xsl:text>
+    <xsl:text>                this.activity_state = true;
+</xsl:text>
+    <xsl:text>                this.request_animate();
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
     <xsl:text>        notify_page_change(page_name, index) {
 </xsl:text>
     <xsl:text>            // called from animate()
@@ -5973,7 +6242,9 @@
 </xsl:text>
     <xsl:text>                const ref_name = this.args[0];
 </xsl:text>
-    <xsl:text>                this.activity_state = ((ref_name == undefined || ref_name == page_name) &amp;&amp; index == ref_index);
+    <xsl:text>                this.target_page_is_current_page = ((ref_name == undefined || ref_name == page_name) &amp;&amp; index == ref_index);
+</xsl:text>
+    <xsl:text>                this.activity_state = this.target_page_is_current_page || this.button_beeing_pressed;
 </xsl:text>
     <xsl:text>                // Since called from animate, update activity directly
 </xsl:text>
@@ -6031,7 +6302,9 @@
     <xsl:variable name="jump_disability" select="$has_activity and $has_disability"/>
     <xsl:text>    init: function() {
 </xsl:text>
-    <xsl:text>        this.element.onclick = this.make_on_click();
+    <xsl:text>        this.bound_onmouseup = this.onmouseup.bind(this);
+</xsl:text>
+    <xsl:text>        this.element.addEventListener("pointerdown", this.onmousedown.bind(this));
 </xsl:text>
     <xsl:if test="$has_activity">
       <xsl:text>        this.activable = true;
@@ -11045,7 +11318,1241 @@
 </xsl:text>
           <xsl:text>
 </xsl:text>
-          <xsl:text>var ws_url = 
+          <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>// Called on requestAnimationFrame, modifies DOM
+</xsl:text>
+          <xsl:text>var requestAnimationFrameID = null;
+</xsl:text>
+          <xsl:text>function animate() {
+</xsl:text>
+          <xsl:text>    let rearm = true;
+</xsl:text>
+          <xsl:text>    do{
+</xsl:text>
+          <xsl:text>        if(page_fading == "pending" || page_fading == "forced"){
+</xsl:text>
+          <xsl:text>            if(page_fading == "pending")
+</xsl:text>
+          <xsl:text>                svg_root.classList.add("fade-out-page");
+</xsl:text>
+          <xsl:text>            page_fading = "in_progress";
+</xsl:text>
+          <xsl:text>            if(page_fading_args.length)
+</xsl:text>
+          <xsl:text>                setTimeout(function(){
+</xsl:text>
+          <xsl:text>                    switch_page(...page_fading_args);
+</xsl:text>
+          <xsl:text>                },1);
+</xsl:text>
+          <xsl:text>            break;
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        // Do the page swith if pending
+</xsl:text>
+          <xsl:text>        if(page_switch_in_progress){
+</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>            page_switch_in_progress = false;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>            if(page_fading == "in_progress"){
+</xsl:text>
+          <xsl:text>                svg_root.classList.remove("fade-out-page");
+</xsl:text>
+          <xsl:text>                page_fading = "off";
+</xsl:text>
+          <xsl:text>            }
+</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>
+</xsl:text>
+          <xsl:text>        pending_widget_animates.forEach(widget =&gt; widget._animate());
+</xsl:text>
+          <xsl:text>        pending_widget_animates = [];
+</xsl:text>
+          <xsl:text>        rearm = false;
+</xsl:text>
+          <xsl:text>    } while(0);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    requestAnimationFrameID = null;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    if(rearm) requestHMIAnimation();
+</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>function ws_onmessage(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>                dispatch_value(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>
+</xsl:text>
+          <xsl:text>        // register for rendering on next frame, since there are updates
+</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>var ws = null;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function send_blob(data) {
+</xsl:text>
+          <xsl:text>    if(ws &amp;&amp; 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 Int8Array([truth]),
+</xsl:text>
+          <xsl:text>    NODE: (truth) =&gt; new Int8Array([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>function reset_subscription_periods() {
+</xsl:text>
+          <xsl:text>    for(let index in subscriptions)
+</xsl:text>
+          <xsl:text>        subscriptions[index][1] = 0;
+</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>
+</xsl:text>
+          <xsl:text>var page_fading = "off";
+</xsl:text>
+          <xsl:text>var page_fading_args = "off";
+</xsl:text>
+          <xsl:text>function fading_page_switch(...args){
+</xsl:text>
+          <xsl:text>    if(page_fading == "in_progress")
+</xsl:text>
+          <xsl:text>        page_fading = "forced";
+</xsl:text>
+          <xsl:text>    else
+</xsl:text>
+          <xsl:text>        page_fading = "pending";
+</xsl:text>
+          <xsl:text>    page_fading_args = args;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    requestHMIAnimation();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>document.body.style.backgroundColor = "black";
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// subscribe to per instance current page hmi variable
+</xsl:text>
+          <xsl:text>// PLC must prefix page name with "!" for page switch to happen
+</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>            fading_page_switch(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, blank) {
+</xsl:text>
+          <xsl:text>    str.split('\n').map((line,i) =&gt; {elt.children[i].textContent = blank?"":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>// 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 setup_lang(){
+</xsl:text>
+          <xsl:text>    let current_lang = cache[lang_local_index];
+</xsl:text>
+          <xsl:text>    let new_lang = switch_langnum(current_lang);
+</xsl:text>
+          <xsl:text>    if(current_lang != new_lang){
+</xsl:text>
+          <xsl:text>        apply_hmi_value(lang_local_index, new_lang);
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>setup_lang();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function update_subscriptions() {
+</xsl:text>
+          <xsl:text>    let delta = [];
+</xsl:text>
+          <xsl:text>    if(!ws)
+</xsl:text>
+          <xsl:text>        // dont' change subscriptions if not connected
+</xsl:text>
+          <xsl:text>        return;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    for(let index in subscriptions){
+</xsl:text>
+          <xsl:text>        let widgets = subscribers(index);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        // periods are in ms
+</xsl:text>
+          <xsl:text>        let previous_period = get_subscription_period(index);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        // subscribing with a zero period is unsubscribing
+</xsl:text>
+          <xsl:text>        let new_period = 0;
+</xsl:text>
+          <xsl:text>        if(widgets.size &gt; 0) {
+</xsl:text>
+          <xsl:text>            let maxfreq = 0;
+</xsl:text>
+          <xsl:text>            for(let widget of widgets){
+</xsl:text>
+          <xsl:text>                let wf = widget.frequency;
+</xsl:text>
+          <xsl:text>                if(wf != undefined &amp;&amp; maxfreq &lt; wf)
+</xsl:text>
+          <xsl:text>                    maxfreq = wf;
+</xsl:text>
+          <xsl:text>            }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>            if(maxfreq != 0)
+</xsl:text>
+          <xsl:text>                new_period = 1000/maxfreq;
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        if(previous_period != new_period) {
+</xsl:text>
+          <xsl:text>            set_subscription_period(index, new_period);
+</xsl:text>
+          <xsl:text>            if(index &lt;= last_remote_index){
+</xsl:text>
+          <xsl:text>                delta.push(
+</xsl:text>
+          <xsl:text>                    new Uint8Array([2]), /* subscribe = 2 */
+</xsl:text>
+          <xsl:text>                    new Uint32Array([index]),
+</xsl:text>
+          <xsl:text>                    new Uint16Array([new_period]));
+</xsl:text>
+          <xsl:text>            }
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>    send_blob(delta);
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function send_hmi_value(index, value) {
+</xsl:text>
+          <xsl:text>    if(index &gt; last_remote_index){
+</xsl:text>
+          <xsl:text>        dispatch_value(index, value);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        if(persistent_indexes.has(index)){
+</xsl:text>
+          <xsl:text>            let varname = persistent_indexes.get(index);
+</xsl:text>
+          <xsl:text>            document.cookie = varname+"="+value+"; max-age=3153600000";
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        return;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    let iectype = hmitree_types[index];
+</xsl:text>
+          <xsl:text>    let tobinary = typedarray_types[iectype];
+</xsl:text>
+          <xsl:text>    send_blob([
+</xsl:text>
+          <xsl:text>        new Uint8Array([0]),  /* setval = 0 */
+</xsl:text>
+          <xsl:text>        new Uint32Array([index]),
+</xsl:text>
+          <xsl:text>        tobinary(value)]);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    // DON'T DO THAT unless read_iterator in svghmi.c modifies wbuf as well, not only rbuf
+</xsl:text>
+          <xsl:text>    // cache[index] = value;
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function apply_hmi_value(index, new_val) {
+</xsl:text>
+          <xsl:text>    // Similarly to previous comment, taking decision to update based 
+</xsl:text>
+          <xsl:text>    // on cache content is bad and can lead to inconsistency
+</xsl:text>
+          <xsl:text>    /*let old_val = cache[index];*/
+</xsl:text>
+          <xsl:text>    if(new_val != undefined /*&amp;&amp; old_val != new_val*/)
+</xsl:text>
+          <xsl:text>        send_hmi_value(index, new_val);
+</xsl:text>
+          <xsl:text>    return new_val;
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>const quotes = {"'":null, '"':null};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function eval_operation_string(old_val, opstr) {
+</xsl:text>
+          <xsl:text>    let op = opstr[0];
+</xsl:text>
+          <xsl:text>    let given_val;
+</xsl:text>
+          <xsl:text>    if(opstr.length &lt; 2) 
+</xsl:text>
+          <xsl:text>        return undefined;
+</xsl:text>
+          <xsl:text>    if(opstr[1] in quotes){
+</xsl:text>
+          <xsl:text>        if(opstr.length &lt; 3) 
+</xsl:text>
+          <xsl:text>            return undefined;
+</xsl:text>
+          <xsl:text>        if(opstr[opstr.length-1] == opstr[1]){
+</xsl:text>
+          <xsl:text>            given_val = opstr.slice(2,opstr.length-1);
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    } else {
+</xsl:text>
+          <xsl:text>        given_val = Number(opstr.slice(1));
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>    let new_val;
+</xsl:text>
+          <xsl:text>    switch(op){
+</xsl:text>
+          <xsl:text>      case "=":
+</xsl:text>
+          <xsl:text>        new_val = given_val;
+</xsl:text>
+          <xsl:text>        break;
+</xsl:text>
+          <xsl:text>      case "+":
+</xsl:text>
+          <xsl:text>        new_val = old_val + given_val;
+</xsl:text>
+          <xsl:text>        break;
+</xsl:text>
+          <xsl:text>      case "-":
+</xsl:text>
+          <xsl:text>        new_val = old_val - given_val;
+</xsl:text>
+          <xsl:text>        break;
+</xsl:text>
+          <xsl:text>      case "*":
+</xsl:text>
+          <xsl:text>        new_val = old_val * given_val;
+</xsl:text>
+          <xsl:text>        break;
+</xsl:text>
+          <xsl:text>      case "/":
+</xsl:text>
+          <xsl:text>        new_val = old_val / given_val;
+</xsl:text>
+          <xsl:text>        break;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>    return new_val;
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>var current_visible_page;
+</xsl:text>
+          <xsl:text>var current_subscribed_page;
+</xsl:text>
+          <xsl:text>var current_page_index;
+</xsl:text>
+          <xsl:text>var page_node_local_index = hmi_local_index("page_node");
+</xsl:text>
+          <xsl:text>var page_switch_in_progress = false;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function toggleFullscreen() {
+</xsl:text>
+          <xsl:text>  let elem = document.documentElement;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>  if (!document.fullscreenElement) {
+</xsl:text>
+          <xsl:text>    elem.requestFullscreen().catch(err =&gt; {
+</xsl:text>
+          <xsl:text>      console.log("Error attempting to enable full-screen mode: "+err.message+" ("+err.name+")");
+</xsl:text>
+          <xsl:text>    });
+</xsl:text>
+          <xsl:text>  } else {
+</xsl:text>
+          <xsl:text>    document.exitFullscreen();
+</xsl:text>
+          <xsl:text>  }
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// prevents context menu from appearing on right click and long touch
+</xsl:text>
+          <xsl:text>document.body.addEventListener('contextmenu', e =&gt; {
+</xsl:text>
+          <xsl:text>    toggleFullscreen();
+</xsl:text>
+          <xsl:text>    e.preventDefault();
+</xsl:text>
+          <xsl:text>});
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>var screensaver_timer = null;
+</xsl:text>
+          <xsl:text>function reset_screensaver_timer() {
+</xsl:text>
+          <xsl:text>    if(screensaver_timer){
+</xsl:text>
+          <xsl:text>        window.clearTimeout(screensaver_timer);
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>    screensaver_timer = window.setTimeout(() =&gt; {
+</xsl:text>
+          <xsl:text>        switch_page("ScreenSaver");
+</xsl:text>
+          <xsl:text>        screensaver_timer = null;
+</xsl:text>
+          <xsl:text>    }, screensaver_delay*1000);
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>if(screensaver_delay)
+</xsl:text>
+          <xsl:text>    document.body.addEventListener('pointerdown', reset_screensaver_timer);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function detach_detachables() {
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    for(let eltid in detachable_elements){
+</xsl:text>
+          <xsl:text>        let [element,parent] = detachable_elements[eltid];
+</xsl:text>
+          <xsl:text>        parent.removeChild(element);
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function switch_page(page_name, page_index) {
+</xsl:text>
+          <xsl:text>    if(page_switch_in_progress){
+</xsl:text>
+          <xsl:text>        /* page switch already going */
+</xsl:text>
+          <xsl:text>        /* TODO LOG ERROR */
+</xsl:text>
+          <xsl:text>        return false;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>    page_switch_in_progress = true;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    if(page_name == undefined)
+</xsl:text>
+          <xsl:text>        page_name = current_subscribed_page;
+</xsl:text>
+          <xsl:text>    else if(page_index == undefined){
+</xsl:text>
+          <xsl:text>        [page_name, page_index] = page_name.split('@')
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    let old_desc = page_desc[current_subscribed_page];
+</xsl:text>
+          <xsl:text>    let new_desc = page_desc[page_name];
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    if(new_desc == undefined){
+</xsl:text>
+          <xsl:text>        /* TODO LOG ERROR */
+</xsl:text>
+          <xsl:text>        return false;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    if(page_index == undefined)
+</xsl:text>
+          <xsl:text>        page_index = new_desc.page_index;
+</xsl:text>
+          <xsl:text>    else if(typeof(page_index) == "string") {
+</xsl:text>
+          <xsl:text>        let hmitree_node = hmitree_nodes[page_index];
+</xsl:text>
+          <xsl:text>        if(hmitree_node !== undefined){
+</xsl:text>
+          <xsl:text>            let [int_index, hmiclass] = hmitree_node;
+</xsl:text>
+          <xsl:text>            if(hmiclass == new_desc.page_class)
+</xsl:text>
+          <xsl:text>                page_index = int_index;
+</xsl:text>
+          <xsl:text>            else
+</xsl:text>
+          <xsl:text>                page_index = new_desc.page_index;
+</xsl:text>
+          <xsl:text>        } else {
+</xsl:text>
+          <xsl:text>            page_index = new_desc.page_index;
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    if(old_desc){
+</xsl:text>
+          <xsl:text>        old_desc.widgets.map(([widget,relativeness])=&gt;widget.unsub());
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>    const new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    const container_id = page_name + (page_index != undefined ? page_index : "");
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    new_desc.widgets.map(([widget,relativeness])=&gt;widget.sub(new_offset,relativeness,container_id));
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    update_subscriptions();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    current_subscribed_page = page_name;
+</xsl:text>
+          <xsl:text>    current_page_index = page_index;
+</xsl:text>
+          <xsl:text>    let page_node;
+</xsl:text>
+          <xsl:text>    if(page_index != undefined){
+</xsl:text>
+          <xsl:text>        page_node = hmitree_paths[page_index];
+</xsl:text>
+          <xsl:text>    }else{
+</xsl:text>
+          <xsl:text>        page_node = "";
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>    apply_hmi_value(page_node_local_index, page_node);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    jumps_need_update = true;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    requestHMIAnimation();
+</xsl:text>
+          <xsl:text>    let [last_page_name, last_page_index] = jump_history[jump_history.length-1];
+</xsl:text>
+          <xsl:text>    if(last_page_name != page_name || last_page_index != page_index){
+</xsl:text>
+          <xsl:text>        jump_history.push([page_name, page_index]);
+</xsl:text>
+          <xsl:text>        if(jump_history.length &gt; 42)
+</xsl:text>
+          <xsl:text>            jump_history.shift();
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    apply_hmi_value(current_page_var_index, page_index == undefined
+</xsl:text>
+          <xsl:text>        ? page_name
+</xsl:text>
+          <xsl:text>        : page_name + "@" + hmitree_paths[page_index]);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    return true;
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function switch_visible_page(page_name) {
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    let old_desc = page_desc[current_visible_page];
+</xsl:text>
+          <xsl:text>    let new_desc = page_desc[page_name];
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    if(old_desc){
+</xsl:text>
+          <xsl:text>        for(let eltid in old_desc.required_detachables){
+</xsl:text>
+          <xsl:text>            if(!(eltid in new_desc.required_detachables)){
+</xsl:text>
+          <xsl:text>                let [element, parent] = old_desc.required_detachables[eltid];
+</xsl:text>
+          <xsl:text>                parent.removeChild(element);
+</xsl:text>
+          <xsl:text>            }
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>        for(let eltid in new_desc.required_detachables){
+</xsl:text>
+          <xsl:text>            if(!(eltid in old_desc.required_detachables)){
+</xsl:text>
+          <xsl:text>                let [element, parent] = new_desc.required_detachables[eltid];
+</xsl:text>
+          <xsl:text>                parent.appendChild(element);
+</xsl:text>
+          <xsl:text>            }
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    }else{
+</xsl:text>
+          <xsl:text>        for(let eltid in new_desc.required_detachables){
+</xsl:text>
+          <xsl:text>            let [element, parent] = new_desc.required_detachables[eltid];
+</xsl:text>
+          <xsl:text>            parent.appendChild(element);
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    svg_root.setAttribute('viewBox',new_desc.bbox.join(" "));
+</xsl:text>
+          <xsl:text>    current_visible_page = page_name;
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>/* From https://jsfiddle.net/ibowankenobi/1mmh7rs6/6/ */
+</xsl:text>
+          <xsl:text>function getAbsoluteCTM(element){
+</xsl:text>
+          <xsl:text>	var height = svg_root.height.baseVal.value,
+</xsl:text>
+          <xsl:text>		width = svg_root.width.baseVal.value,
+</xsl:text>
+          <xsl:text>		viewBoxRect = svg_root.viewBox.baseVal,
+</xsl:text>
+          <xsl:text>		vHeight = viewBoxRect.height,
+</xsl:text>
+          <xsl:text>		vWidth = viewBoxRect.width;
+</xsl:text>
+          <xsl:text>	if(!vWidth || !vHeight){
+</xsl:text>
+          <xsl:text>		return element.getCTM();
+</xsl:text>
+          <xsl:text>	}
+</xsl:text>
+          <xsl:text>	var sH = height/vHeight,
+</xsl:text>
+          <xsl:text>		sW = width/vWidth,
+</xsl:text>
+          <xsl:text>		matrix = svg_root.createSVGMatrix();
+</xsl:text>
+          <xsl:text>	matrix.a = sW;
+</xsl:text>
+          <xsl:text>	matrix.d = sH
+</xsl:text>
+          <xsl:text>	var realCTM = element.getCTM().multiply(matrix.inverse());
+</xsl:text>
+          <xsl:text>	realCTM.e = realCTM.e/sW + viewBoxRect.x;
+</xsl:text>
+          <xsl:text>	realCTM.f = realCTM.f/sH + viewBoxRect.y;
+</xsl:text>
+          <xsl:text>	return realCTM;
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function apply_reference_frames(){
+</xsl:text>
+          <xsl:text>    const matches = svg_root.querySelectorAll("g[svghmi_x_offset]");
+</xsl:text>
+          <xsl:text>    matches.forEach((group) =&gt; {
+</xsl:text>
+          <xsl:text>        let [x,y] = ["x", "y"].map((axis) =&gt; Number(group.getAttribute("svghmi_"+axis+"_offset")));
+</xsl:text>
+          <xsl:text>        let ctm = getAbsoluteCTM(group);
+</xsl:text>
+          <xsl:text>        // zero translation part of CTM
+</xsl:text>
+          <xsl:text>        // to only apply rotation/skewing to offset vector
+</xsl:text>
+          <xsl:text>        ctm.e = 0;
+</xsl:text>
+          <xsl:text>        ctm.f = 0;
+</xsl:text>
+          <xsl:text>        let invctm = ctm.inverse();
+</xsl:text>
+          <xsl:text>        let vect = new DOMPoint(x, y);
+</xsl:text>
+          <xsl:text>        let newvect = vect.matrixTransform(invctm);
+</xsl:text>
+          <xsl:text>        let transform = svg_root.createSVGTransform();
+</xsl:text>
+          <xsl:text>        transform.setTranslate(newvect.x, newvect.y);
+</xsl:text>
+          <xsl:text>        group.transform.baseVal.appendItem(transform);
+</xsl:text>
+          <xsl:text>        ["x", "y"].forEach((axis) =&gt; group.removeAttribute("svghmi_"+axis+"_offset"));
+</xsl:text>
+          <xsl:text>    });
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// prepare SVG
+</xsl:text>
+          <xsl:text>apply_reference_frames();
+</xsl:text>
+          <xsl:text>init_widgets();
+</xsl:text>
+          <xsl:text>detach_detachables();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// show main page
+</xsl:text>
+          <xsl:text>switch_page(default_page);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// initialize screensaver
+</xsl:text>
+          <xsl:text>reset_screensaver_timer();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>var reconnect_delay = 0;
+</xsl:text>
+          <xsl:text>var periodic_reconnect_timer;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// Once connection established
+</xsl:text>
+          <xsl:text>function ws_onopen(evt) {
+</xsl:text>
+          <xsl:text>    // Work around memory leak with websocket on QtWebEngine
+</xsl:text>
+          <xsl:text>    // reconnect every hour to force deallocate websocket garbage
+</xsl:text>
+          <xsl:text>    if(window.navigator.userAgent.includes("QtWebEngine")){
+</xsl:text>
+          <xsl:text>        if(periodic_reconnect_timer){
+</xsl:text>
+          <xsl:text>            window.clearTimeout(periodic_reconnect_timer);
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>        periodic_reconnect_timer = window.setTimeout(() =&gt; {
+</xsl:text>
+          <xsl:text>            ws.close();
+</xsl:text>
+          <xsl:text>            periodic_reconnect_timer = null;
+</xsl:text>
+          <xsl:text>        }, 3600000);
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    // forget earlier subscriptions locally
+</xsl:text>
+          <xsl:text>    reset_subscription_periods();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    // update PLC about subscriptions and current page
+</xsl:text>
+          <xsl:text>    switch_page();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    // at first try reconnect immediately
+</xsl:text>
+          <xsl:text>    reconnect_delay = 1;
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function ws_onclose(evt) {
+</xsl:text>
+          <xsl:text>    console.log("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+" Reload in "+reconnect_delay+"ms.");
+</xsl:text>
+          <xsl:text>    ws = null;
+</xsl:text>
+          <xsl:text>    // reconect
+</xsl:text>
+          <xsl:text>    // TODO : add visible notification while waiting for reload
+</xsl:text>
+          <xsl:text>    window.setTimeout(create_ws, reconnect_delay);
+</xsl:text>
+          <xsl:text>    reconnect_delay += 500;
+</xsl:text>
+          <xsl:text>};
+</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>
@@ -11053,1067 +12560,23 @@
 </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>function create_ws(){
+</xsl:text>
+          <xsl:text>    ws = new WebSocket(ws_url);
+</xsl:text>
+          <xsl:text>    ws.binaryType = 'arraybuffer';
+</xsl:text>
+          <xsl:text>    ws.onmessage = ws_onmessage;
+</xsl:text>
+          <xsl:text>    ws.onclose = ws_onclose;
+</xsl:text>
+          <xsl:text>    ws.onopen = ws_onopen;
 </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>    let rearm = true;
-</xsl:text>
-          <xsl:text>    do{
-</xsl:text>
-          <xsl:text>        if(page_fading == "pending" || page_fading == "forced"){
-</xsl:text>
-          <xsl:text>            if(page_fading == "pending")
-</xsl:text>
-          <xsl:text>                svg_root.classList.add("fade-out-page");
-</xsl:text>
-          <xsl:text>            page_fading = "in_progress";
-</xsl:text>
-          <xsl:text>            if(page_fading_args.length)
-</xsl:text>
-          <xsl:text>                setTimeout(function(){
-</xsl:text>
-          <xsl:text>                    switch_page(...page_fading_args);
-</xsl:text>
-          <xsl:text>                },1);
-</xsl:text>
-          <xsl:text>            break;
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>        // Do the page swith if pending
-</xsl:text>
-          <xsl:text>        if(page_switch_in_progress){
-</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>            page_switch_in_progress = false;
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>            if(page_fading == "in_progress"){
-</xsl:text>
-          <xsl:text>                svg_root.classList.remove("fade-out-page");
-</xsl:text>
-          <xsl:text>                page_fading = "off";
-</xsl:text>
-          <xsl:text>            }
-</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>
-</xsl:text>
-          <xsl:text>        pending_widget_animates.forEach(widget =&gt; widget._animate());
-</xsl:text>
-          <xsl:text>        pending_widget_animates = [];
-</xsl:text>
-          <xsl:text>        rearm = false;
-</xsl:text>
-          <xsl:text>    } while(0);
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    requestAnimationFrameID = null;
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    if(rearm) requestHMIAnimation();
-</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>
-</xsl:text>
-          <xsl:text>        apply_updates();
-</xsl:text>
-          <xsl:text>        // register for rendering on next frame, since there are updates
-</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>
-</xsl:text>
-          <xsl:text>var page_fading = "off";
-</xsl:text>
-          <xsl:text>var page_fading_args = "off";
-</xsl:text>
-          <xsl:text>function fading_page_switch(...args){
-</xsl:text>
-          <xsl:text>    if(page_fading == "in_progress")
-</xsl:text>
-          <xsl:text>        page_fading = "forced";
-</xsl:text>
-          <xsl:text>    else
-</xsl:text>
-          <xsl:text>        page_fading = "pending";
-</xsl:text>
-          <xsl:text>    page_fading_args = args;
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    requestHMIAnimation();
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>document.body.style.backgroundColor = "black";
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>// subscribe to per instance current page hmi variable
-</xsl:text>
-          <xsl:text>// PLC must prefix page name with "!" for page switch to happen
-</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>            fading_page_switch(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, blank) {
-</xsl:text>
-          <xsl:text>    str.split('\n').map((line,i) =&gt; {elt.children[i].textContent = blank?"":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>// 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 setup_lang(){
-</xsl:text>
-          <xsl:text>    let current_lang = cache[lang_local_index];
-</xsl:text>
-          <xsl:text>    let new_lang = switch_langnum(current_lang);
-</xsl:text>
-          <xsl:text>    if(current_lang != new_lang){
-</xsl:text>
-          <xsl:text>        apply_hmi_value(lang_local_index, new_lang);
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>setup_lang();
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function update_subscriptions() {
-</xsl:text>
-          <xsl:text>    let delta = [];
-</xsl:text>
-          <xsl:text>    for(let index in subscriptions){
-</xsl:text>
-          <xsl:text>        let widgets = subscribers(index);
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>        // periods are in ms
-</xsl:text>
-          <xsl:text>        let previous_period = get_subscription_period(index);
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>        // subscribing with a zero period is unsubscribing
-</xsl:text>
-          <xsl:text>        let new_period = 0;
-</xsl:text>
-          <xsl:text>        if(widgets.size &gt; 0) {
-</xsl:text>
-          <xsl:text>            let maxfreq = 0;
-</xsl:text>
-          <xsl:text>            for(let widget of widgets){
-</xsl:text>
-          <xsl:text>                let wf = widget.frequency;
-</xsl:text>
-          <xsl:text>                if(wf != undefined &amp;&amp; maxfreq &lt; wf)
-</xsl:text>
-          <xsl:text>                    maxfreq = wf;
-</xsl:text>
-          <xsl:text>            }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>            if(maxfreq != 0)
-</xsl:text>
-          <xsl:text>                new_period = 1000/maxfreq;
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>        if(previous_period != new_period) {
-</xsl:text>
-          <xsl:text>            set_subscription_period(index, new_period);
-</xsl:text>
-          <xsl:text>            if(index &lt;= last_remote_index){
-</xsl:text>
-          <xsl:text>                delta.push(
-</xsl:text>
-          <xsl:text>                    new Uint8Array([2]), /* subscribe = 2 */
-</xsl:text>
-          <xsl:text>                    new Uint32Array([index]),
-</xsl:text>
-          <xsl:text>                    new Uint16Array([new_period]));
-</xsl:text>
-          <xsl:text>            }
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>    send_blob(delta);
-</xsl:text>
-          <xsl:text>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function send_hmi_value(index, value) {
-</xsl:text>
-          <xsl:text>    if(index &gt; last_remote_index){
-</xsl:text>
-          <xsl:text>        dispatch_value(index, value);
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>        if(persistent_indexes.has(index)){
-</xsl:text>
-          <xsl:text>            let varname = persistent_indexes.get(index);
-</xsl:text>
-          <xsl:text>            document.cookie = varname+"="+value+"; max-age=3153600000";
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>        return;
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    let iectype = hmitree_types[index];
-</xsl:text>
-          <xsl:text>    let tobinary = typedarray_types[iectype];
-</xsl:text>
-          <xsl:text>    send_blob([
-</xsl:text>
-          <xsl:text>        new Uint8Array([0]),  /* setval = 0 */
-</xsl:text>
-          <xsl:text>        new Uint32Array([index]),
-</xsl:text>
-          <xsl:text>        tobinary(value)]);
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    // DON'T DO THAT unless read_iterator in svghmi.c modifies wbuf as well, not only rbuf
-</xsl:text>
-          <xsl:text>    // cache[index] = value;
-</xsl:text>
-          <xsl:text>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function apply_hmi_value(index, new_val) {
-</xsl:text>
-          <xsl:text>    // Similarly to previous comment, taking decision to update based 
-</xsl:text>
-          <xsl:text>    // on cache content is bad and can lead to inconsistency
-</xsl:text>
-          <xsl:text>    /*let old_val = cache[index];*/
-</xsl:text>
-          <xsl:text>    if(new_val != undefined /*&amp;&amp; old_val != new_val*/)
-</xsl:text>
-          <xsl:text>        send_hmi_value(index, new_val);
-</xsl:text>
-          <xsl:text>    return new_val;
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>const quotes = {"'":null, '"':null};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function eval_operation_string(old_val, opstr) {
-</xsl:text>
-          <xsl:text>    let op = opstr[0];
-</xsl:text>
-          <xsl:text>    let given_val;
-</xsl:text>
-          <xsl:text>    if(opstr.length &lt; 2) 
-</xsl:text>
-          <xsl:text>        return undefined;
-</xsl:text>
-          <xsl:text>    if(opstr[1] in quotes){
-</xsl:text>
-          <xsl:text>        if(opstr.length &lt; 3) 
-</xsl:text>
-          <xsl:text>            return undefined;
-</xsl:text>
-          <xsl:text>        if(opstr[opstr.length-1] == opstr[1]){
-</xsl:text>
-          <xsl:text>            given_val = opstr.slice(2,opstr.length-1);
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>    } else {
-</xsl:text>
-          <xsl:text>        given_val = Number(opstr.slice(1));
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>    let new_val;
-</xsl:text>
-          <xsl:text>    switch(op){
-</xsl:text>
-          <xsl:text>      case "=":
-</xsl:text>
-          <xsl:text>        new_val = given_val;
-</xsl:text>
-          <xsl:text>        break;
-</xsl:text>
-          <xsl:text>      case "+":
-</xsl:text>
-          <xsl:text>        new_val = old_val + given_val;
-</xsl:text>
-          <xsl:text>        break;
-</xsl:text>
-          <xsl:text>      case "-":
-</xsl:text>
-          <xsl:text>        new_val = old_val - given_val;
-</xsl:text>
-          <xsl:text>        break;
-</xsl:text>
-          <xsl:text>      case "*":
-</xsl:text>
-          <xsl:text>        new_val = old_val * given_val;
-</xsl:text>
-          <xsl:text>        break;
-</xsl:text>
-          <xsl:text>      case "/":
-</xsl:text>
-          <xsl:text>        new_val = old_val / given_val;
-</xsl:text>
-          <xsl:text>        break;
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>    return new_val;
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>var current_visible_page;
-</xsl:text>
-          <xsl:text>var current_subscribed_page;
-</xsl:text>
-          <xsl:text>var current_page_index;
-</xsl:text>
-          <xsl:text>var page_node_local_index = hmi_local_index("page_node");
-</xsl:text>
-          <xsl:text>var page_switch_in_progress = false;
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function toggleFullscreen() {
-</xsl:text>
-          <xsl:text>  let elem = document.documentElement;
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>  if (!document.fullscreenElement) {
-</xsl:text>
-          <xsl:text>    elem.requestFullscreen().catch(err =&gt; {
-</xsl:text>
-          <xsl:text>      console.log("Error attempting to enable full-screen mode: "+err.message+" ("+err.name+")");
-</xsl:text>
-          <xsl:text>    });
-</xsl:text>
-          <xsl:text>  } else {
-</xsl:text>
-          <xsl:text>    document.exitFullscreen();
-</xsl:text>
-          <xsl:text>  }
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function prepare_svg() {
-</xsl:text>
-          <xsl:text>    // prevents context menu from appearing on right click and long touch
-</xsl:text>
-          <xsl:text>    document.body.addEventListener('contextmenu', e =&gt; {
-</xsl:text>
-          <xsl:text>        toggleFullscreen();
-</xsl:text>
-          <xsl:text>        e.preventDefault();
-</xsl:text>
-          <xsl:text>    });
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    for(let eltid in detachable_elements){
-</xsl:text>
-          <xsl:text>        let [element,parent] = detachable_elements[eltid];
-</xsl:text>
-          <xsl:text>        parent.removeChild(element);
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function switch_page(page_name, page_index) {
-</xsl:text>
-          <xsl:text>    if(page_switch_in_progress){
-</xsl:text>
-          <xsl:text>        /* page switch already going */
-</xsl:text>
-          <xsl:text>        /* TODO LOG ERROR */
-</xsl:text>
-          <xsl:text>        return false;
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>    page_switch_in_progress = true;
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    if(page_name == undefined)
-</xsl:text>
-          <xsl:text>        page_name = current_subscribed_page;
-</xsl:text>
-          <xsl:text>    else if(page_index == undefined){
-</xsl:text>
-          <xsl:text>        [page_name, page_index] = page_name.split('@')
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    let old_desc = page_desc[current_subscribed_page];
-</xsl:text>
-          <xsl:text>    let new_desc = page_desc[page_name];
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    if(new_desc == undefined){
-</xsl:text>
-          <xsl:text>        /* TODO LOG ERROR */
-</xsl:text>
-          <xsl:text>        return false;
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    if(page_index == undefined)
-</xsl:text>
-          <xsl:text>        page_index = new_desc.page_index;
-</xsl:text>
-          <xsl:text>    else if(typeof(page_index) == "string") {
-</xsl:text>
-          <xsl:text>        let hmitree_node = hmitree_nodes[page_index];
-</xsl:text>
-          <xsl:text>        if(hmitree_node !== undefined){
-</xsl:text>
-          <xsl:text>            let [int_index, hmiclass] = hmitree_node;
-</xsl:text>
-          <xsl:text>            if(hmiclass == new_desc.page_class)
-</xsl:text>
-          <xsl:text>                page_index = int_index;
-</xsl:text>
-          <xsl:text>            else
-</xsl:text>
-          <xsl:text>                page_index = new_desc.page_index;
-</xsl:text>
-          <xsl:text>        } else {
-</xsl:text>
-          <xsl:text>            page_index = new_desc.page_index;
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    if(old_desc){
-</xsl:text>
-          <xsl:text>        old_desc.widgets.map(([widget,relativeness])=&gt;widget.unsub());
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>    const new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index;
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    const container_id = page_name + (page_index != undefined ? page_index : "");
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    new_desc.widgets.map(([widget,relativeness])=&gt;widget.sub(new_offset,relativeness,container_id));
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    update_subscriptions();
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    current_subscribed_page = page_name;
-</xsl:text>
-          <xsl:text>    current_page_index = page_index;
-</xsl:text>
-          <xsl:text>    let page_node;
-</xsl:text>
-          <xsl:text>    if(page_index != undefined){
-</xsl:text>
-          <xsl:text>        page_node = hmitree_paths[page_index];
-</xsl:text>
-          <xsl:text>    }else{
-</xsl:text>
-          <xsl:text>        page_node = "";
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>    apply_hmi_value(page_node_local_index, page_node);
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    jumps_need_update = true;
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    requestHMIAnimation();
-</xsl:text>
-          <xsl:text>    jump_history.push([page_name, page_index]);
-</xsl:text>
-          <xsl:text>    if(jump_history.length &gt; 42)
-</xsl:text>
-          <xsl:text>        jump_history.shift();
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    apply_hmi_value(current_page_var_index, page_index == undefined
-</xsl:text>
-          <xsl:text>        ? page_name
-</xsl:text>
-          <xsl:text>        : page_name + "@" + hmitree_paths[page_index]);
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    return true;
-</xsl:text>
-          <xsl:text>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function switch_visible_page(page_name) {
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    let old_desc = page_desc[current_visible_page];
-</xsl:text>
-          <xsl:text>    let new_desc = page_desc[page_name];
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    if(old_desc){
-</xsl:text>
-          <xsl:text>        for(let eltid in old_desc.required_detachables){
-</xsl:text>
-          <xsl:text>            if(!(eltid in new_desc.required_detachables)){
-</xsl:text>
-          <xsl:text>                let [element, parent] = old_desc.required_detachables[eltid];
-</xsl:text>
-          <xsl:text>                parent.removeChild(element);
-</xsl:text>
-          <xsl:text>            }
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>        for(let eltid in new_desc.required_detachables){
-</xsl:text>
-          <xsl:text>            if(!(eltid in old_desc.required_detachables)){
-</xsl:text>
-          <xsl:text>                let [element, parent] = new_desc.required_detachables[eltid];
-</xsl:text>
-          <xsl:text>                parent.appendChild(element);
-</xsl:text>
-          <xsl:text>            }
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>    }else{
-</xsl:text>
-          <xsl:text>        for(let eltid in new_desc.required_detachables){
-</xsl:text>
-          <xsl:text>            let [element, parent] = new_desc.required_detachables[eltid];
-</xsl:text>
-          <xsl:text>            parent.appendChild(element);
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    svg_root.setAttribute('viewBox',new_desc.bbox.join(" "));
-</xsl:text>
-          <xsl:text>    current_visible_page = page_name;
-</xsl:text>
-          <xsl:text>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>// Once connection established
-</xsl:text>
-          <xsl:text>ws.onopen = function (evt) {
-</xsl:text>
-          <xsl:text>    init_widgets();
-</xsl:text>
-          <xsl:text>    send_reset();
-</xsl:text>
-          <xsl:text>    // show main page
-</xsl:text>
-          <xsl:text>    prepare_svg();
-</xsl:text>
-          <xsl:text>    switch_page(default_page);
-</xsl:text>
-          <xsl:text>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>ws.onclose = function (evt) {
-</xsl:text>
-          <xsl:text>    // TODO : add visible notification while waiting for reload
-</xsl:text>
-          <xsl:text>    console.log("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+" Reload in 10s.");
-</xsl:text>
-          <xsl:text>    // TODO : re-enable auto reload when not in debug
-</xsl:text>
-          <xsl:text>    //window.setTimeout(() =&gt; location.reload(true), 10000);
-</xsl:text>
-          <xsl:text>    alert("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+".");
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>};
+          <xsl:text>create_ws()
 </xsl:text>
           <xsl:text>
 </xsl:text>
--- a/svghmi/svghmi.js	Sun Feb 19 08:37:27 2023 +0000
+++ b/svghmi/svghmi.js	Mon Feb 27 13:47:36 2023 +0100
@@ -23,13 +23,6 @@
 // Open WebSocket to relative "/ws" address
 var has_watchdog = window.location.hash == "#watchdog";
 
-var ws_url = 
-    window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws')
-    + '?mode=' + (has_watchdog ? "watchdog" : "multiclient");
-
-var ws = new WebSocket(ws_url);
-ws.binaryType = 'arraybuffer';
-
 const dvgetters = {
     INT: (dv,offset) => [dv.getInt16(offset, true), 2],
     BOOL: (dv,offset) => [dv.getInt8(offset, true), 1],
@@ -98,7 +91,7 @@
 // Message reception handler
 // Hash is verified and HMI values updates resulting from binary parsing
 // are stored until browser can compute next frame, DOM is left untouched
-ws.onmessage = function (evt) {
+function ws_onmessage(evt) {
 
     let data = evt.data;
     let dv = new DataView(data);
@@ -140,16 +133,18 @@
 
 hmi_hash_u8 = new Uint8Array(hmi_hash);
 
+var ws = null;
+
 function send_blob(data) {
-    if(data.length > 0) {
+    if(ws && data.length > 0) {
         ws.send(new Blob([hmi_hash_u8].concat(data)));
     };
 };
 
 const typedarray_types = {
     INT: (number) => new Int16Array([number]),
-    BOOL: (truth) => new Int16Array([truth]),
-    NODE: (truth) => new Int16Array([truth]),
+    BOOL: (truth) => new Int8Array([truth]),
+    NODE: (truth) => new Int8Array([truth]),
     REAL: (number) => new Float32Array([number]),
     STRING: (str) => {
         // beremiz default string max size is 128
@@ -199,6 +194,11 @@
     }
 }
 
+function reset_subscription_periods() {
+    for(let index in subscriptions)
+        subscriptions[index][1] = 0;
+}
+
 if(has_watchdog){
     // artificially subscribe the watchdog widget to "/heartbeat" hmi variable
     // Since dispatch directly calls change_hmi_value,
@@ -298,6 +298,10 @@
 
 function update_subscriptions() {
     let delta = [];
+    if(!ws)
+        // dont' change subscriptions if not connected
+        return;
+
     for(let index in subscriptions){
         let widgets = subscribers(index);
 
@@ -418,12 +422,30 @@
   }
 }
 
-function prepare_svg() {
-    // prevents context menu from appearing on right click and long touch
-    document.body.addEventListener('contextmenu', e => {
-        toggleFullscreen();
-        e.preventDefault();
-    });
+// prevents context menu from appearing on right click and long touch
+document.body.addEventListener('contextmenu', e => {
+    toggleFullscreen();
+    e.preventDefault();
+});
+
+if(screensaver_delay){
+    var screensaver_timer = null;
+    function reset_screensaver_timer() {
+        if(screensaver_timer){
+            window.clearTimeout(screensaver_timer);
+        }
+        screensaver_timer = window.setTimeout(() => {
+            switch_page("ScreenSaver");
+            screensaver_timer = null;
+        }, screensaver_delay*1000);
+    }
+    document.body.addEventListener('pointerdown', reset_screensaver_timer);
+    // initialize screensaver
+    reset_screensaver_timer();
+}
+
+
+function detach_detachables() {
 
     for(let eltid in detachable_elements){
         let [element,parent] = detachable_elements[eltid];
@@ -492,9 +514,12 @@
     jumps_need_update = true;
 
     requestHMIAnimation();
-    jump_history.push([page_name, page_index]);
-    if(jump_history.length > 42)
-        jump_history.shift();
+    let [last_page_name, last_page_index] = jump_history[jump_history.length-1];
+    if(last_page_name != page_name || last_page_index != page_index){
+        jump_history.push([page_name, page_index]);
+        if(jump_history.length > 42)
+            jump_history.shift();
+    }
 
     apply_hmi_value(current_page_var_index, page_index == undefined
         ? page_name
@@ -572,24 +597,63 @@
     });
 }
 
+// prepare SVG
+apply_reference_frames();
+init_widgets();
+detach_detachables();
+
+// show main page
+switch_page(default_page);
+
+var reconnect_delay = 0;
+var periodic_reconnect_timer;
+
 // Once connection established
-ws.onopen = function (evt) {
-    apply_reference_frames();
-    init_widgets();
-    send_reset();
-    // show main page
-    prepare_svg();
-    switch_page(default_page);
-};
-
-ws.onclose = function (evt) {
+function ws_onopen(evt) {
+    // Work around memory leak with websocket on QtWebEngine
+    // reconnect every hour to force deallocate websocket garbage
+    if(window.navigator.userAgent.includes("QtWebEngine")){
+        if(periodic_reconnect_timer){
+            window.clearTimeout(periodic_reconnect_timer);
+        }
+        periodic_reconnect_timer = window.setTimeout(() => {
+            ws.close();
+            periodic_reconnect_timer = null;
+        }, 3600000);
+    }
+
+    // forget earlier subscriptions locally
+    reset_subscription_periods();
+
+    // update PLC about subscriptions and current page
+    switch_page();
+
+    // at first try reconnect immediately
+    reconnect_delay = 1;
+};
+
+function ws_onclose(evt) {
+    console.log("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+" Reload in "+reconnect_delay+"ms.");
+    ws = null;
+    // reconect
     // TODO : add visible notification while waiting for reload
-    console.log("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+" Reload in 10s.");
-    // TODO : re-enable auto reload when not in debug
-    //window.setTimeout(() => location.reload(true), 10000);
-    alert("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+".");
-
-};
+    window.setTimeout(create_ws, reconnect_delay);
+    reconnect_delay += 500;
+};
+
+var ws_url =
+    window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws')
+    + '?mode=' + (has_watchdog ? "watchdog" : "multiclient");
+
+function create_ws(){
+    ws = new WebSocket(ws_url);
+    ws.binaryType = 'arraybuffer';
+    ws.onmessage = ws_onmessage;
+    ws.onclose = ws_onclose;
+    ws.onopen = ws_onopen;
+}
+
+create_ws()
 
 const xmlns = "http://www.w3.org/2000/svg";
 var edit_callback;
--- a/svghmi/svghmi.py	Sun Feb 19 08:37:27 2023 +0000
+++ b/svghmi/svghmi.py	Mon Feb 27 13:47:36 2023 +0100
@@ -636,19 +636,31 @@
              svghmi_cmds[thing] = (
                 "Popen(" +
                 repr(shlex.split(given_command.format(**svghmi_options))) +
-                ")") if given_command else "pass # no command given"
+                ")") if given_command else "None # no command given"
 
         runtimefile_path = os.path.join(buildpath, "runtime_%s_svghmi_.py" % location_str)
         runtimefile = open(runtimefile_path, 'w')
         runtimefile.write("""
-# TODO : multiple watchdog (one for each svghmi instance)
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+
+# generated by beremiz/svghmi/svghmi.py
+
+browser_proc = None
+
 def svghmi_{location}_watchdog_trigger():
-    {svghmi_cmds[Watchdog]}
+    global browser_proc
+    restart_proc = {svghmi_cmds[Watchdog]}
+    waitpid_timeout(restart_proc, "SVGHMI watchdog triggered command")
+    stop_proc = {svghmi_cmds[Stop]}
+    waitpid_timeout(stop_proc, "SVGHMI stop command")
+    waitpid_timeout(browser_proc, "SVGHMI browser process")
+    browser_proc = {svghmi_cmds[Start]}
 
 max_svghmi_sessions = {maxConnections_total}
 
 def _runtime_{location}_svghmi_start():
-    global svghmi_watchdog, svghmi_servers
+    global svghmi_watchdog, svghmi_servers, browser_proc
 
     srv = svghmi_servers.get("{interface}:{port}", None)
     if srv is not None:
@@ -673,7 +685,7 @@
 
     path_list.append("{path}")
 
-    {svghmi_cmds[Start]}
+    browser_proc = {svghmi_cmds[Start]}
 
     if {enable_watchdog}:
         if svghmi_watchdog is None:
@@ -686,7 +698,7 @@
 
 
 def _runtime_{location}_svghmi_stop():
-    global svghmi_watchdog, svghmi_servers
+    global svghmi_watchdog, svghmi_servers, browser_proc
 
     if svghmi_watchdog is not None:
         svghmi_watchdog.cancel()
@@ -702,7 +714,10 @@
         svghmi_listener.stopListening()
         svghmi_servers.pop("{interface}:{port}")
 
-    {svghmi_cmds[Stop]}
+    stop_proc = {svghmi_cmds[Stop]}
+    waitpid_timeout(stop_proc, "SVGHMI stop command")
+    waitpid_timeout(browser_proc, "SVGHMI browser process")
+    browser_proc = None
 
         """.format(location=location_str,
                    xhtml=target_fname,
--- a/svghmi/svghmi_server.py	Sun Feb 19 08:37:27 2023 +0000
+++ b/svghmi/svghmi_server.py	Mon Feb 27 13:47:36 2023 +0100
@@ -8,6 +8,7 @@
 from __future__ import absolute_import
 import errno
 from threading import RLock, Timer
+import os, time
 
 try:
     from runtime.spawn_subprocess import Popen
@@ -23,6 +24,9 @@
 from autobahn.websocket.protocol import WebSocketProtocol
 from autobahn.twisted.resource import  WebSocketResource
 
+from runtime.loglevels import LogLevelsDict
+from runtime import GetPLCObjectSingleton
+
 max_svghmi_sessions = None
 svghmi_watchdog = None
 
@@ -219,6 +223,7 @@
         _hmi_session = HMISession(self)
         registered = svghmi_session_manager.register(_hmi_session)
         self._hmi_session = _hmi_session
+        self._hmi_session.reset()
 
     def onClose(self, wasClean, code, reason):
         global svghmi_session_manager
@@ -299,3 +304,21 @@
     render_HEAD = render_GET
 
 
+def waitpid_timeout(proc, helpstr="", timeout = 3):
+    if proc is None:
+        return
+    def waitpid_timeout_loop(pid=proc.pid, timeout = timeout):
+        try:
+            while os.waitpid(pid,os.WNOHANG) == (0,0):
+                time.sleep(1)
+                timeout = timeout - 1
+                if not timeout:
+                    GetPLCObjectSingleton().LogMessage(
+                        LogLevelsDict["WARNING"], 
+                        "Timeout waiting for {} PID: {}".format(helpstr, str(pid)))
+                    break
+        except OSError:
+            # workaround exception "OSError: [Errno 10] No child processes"
+            pass
+    Thread(target=waitpid_timeout_loop, name="Zombie hunter").start()
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_assign.ysl2	Mon Feb 27 13:47:36 2023 +0100
@@ -0,0 +1,88 @@
+// widget_assign.ysl2
+
+widget_desc("Assign") {
+    longdesc
+    ||
+
+    Arguments are either:
+
+    - name=value: setting variable with literal value.
+    - name=other_name: copy variable content into another
+
+    "active"+"inactive" labeled elements can be provided to show feedback when pressed
+
+    Exemples:
+
+    HMI:Assign:notify=1@notify=/PLCVAR
+    HMI:Assign:ack=2:notify=1@ack=.local_var@notify=/PLCVAR
+
+    ||
+
+    shortdesc > Assign variables on click
+
+}
+
+widget_class("Assign") {
+||
+        frequency = 2;
+
+        onmouseup(evt) {
+            svg_root.removeEventListener("pointerup", this.bound_onmouseup, true);
+            if(this.enable_state) {
+                this.activity_state = false
+                this.request_animate();
+                this.assign();
+            }
+        }
+
+        onmousedown(){
+            if(this.enable_state) {
+                svg_root.addEventListener("pointerup", this.bound_onmouseup, true);
+                this.activity_state = true;
+                this.request_animate();
+            }
+        }
+
+||
+}
+
+widget_defs("Assign") {
+    optional_activable();
+
+    |     init: function() {
+    |         this.bound_onmouseup = this.onmouseup.bind(this);
+    |         this.element.addEventListener("pointerdown", this.onmousedown.bind(this));
+    |     },
+
+    |     assignments: {},
+    |     dispatch: function(value, oldval, varnum) {
+    const "widget", ".";
+    foreach "path" {
+        const "varid","generate-id()";
+        const "varnum","position()-1";
+        if "@assign" foreach "$widget/path[@assign]" if "$varid = generate-id()" {
+    |         if(varnum == «$varnum») this.assignments["«@assign»"] = value;
+        }
+    }
+    |     },
+    |     assign: function() {
+    const "paths","path";
+    foreach "arg[contains(@value,'=')]"{
+        const "name","substring-before(@value,'=')";
+        const "value","substring-after(@value,'=')";
+        const "index" foreach "$paths" if "@assign = $name" value "position()-1";
+        const "isVarName", "regexp:test($value,'^[a-zA-Z_][a-zA-Z0-9_]+$')";
+        choose {
+            when "$isVarName"{
+    |         const «$value» = this.assignments["«$value»"];
+    |         if(«$value» != undefined)
+    |             this.apply_hmi_value(«$index», «$value»);
+            }
+            otherwise {
+    |         this.apply_hmi_value(«$index», «$value»);
+            }
+        }
+    }
+    |     },
+}
+
--- a/svghmi/widget_back.ysl2	Sun Feb 19 08:37:27 2023 +0000
+++ b/svghmi/widget_back.ysl2	Mon Feb 27 13:47:36 2023 +0100
@@ -9,17 +9,20 @@
     shortdesc > Jump to previous page
 }
 
-// TODO: use es6
 widget_class("Back")
     ||
         on_click(evt) {
             if(jump_history.length > 1){
-               jump_history.pop();
-               let [page_name, index] = jump_history.pop();
+               let page_name, index;
+               do {
+                   jump_history.pop(); // forget current page
+                   if(jump_history.length == 0) return;
+                   [page_name, index] = jump_history[jump_history.length-1];
+               } while(page_name == "ScreenSaver") // never go back to ScreenSaver
                switch_page(page_name, index);
             }
         }
         init() {
-            this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
+            this.element.onclick = this.on_click.bind(this);
         }
     ||
--- a/svghmi/widget_jump.ysl2	Sun Feb 19 08:37:27 2023 +0000
+++ b/svghmi/widget_jump.ysl2	Mon Feb 27 13:47:36 2023 +0100
@@ -52,23 +52,28 @@
 ||
         activable = false;
         frequency = 2;
+        target_page_is_current_page = false;
+        button_beeing_pressed = false;
 
-        make_on_click() {
-            let that = this;
-            const name = this.args[0];
-            return function(evt){
-                /* TODO: in order to allow jumps to page selected through
-                   for exemple a dropdown, support path pointing to local
-                   variable whom value would be an HMI_TREE index and then
-                   jump to a relative page not hard-coded in advance
-                */
-                if(that.enable_state) {
-                    const index =
-                        (that.is_relative && that.indexes.length > 0) ?
-                        that.indexes[0] + that.offset : undefined;
-                    fading_page_switch(name, index);
-                    that.notify();
-                }
+        onmouseup(evt) {
+            svg_root.removeEventListener("pointerup", this.bound_onmouseup, true);
+            if(this.enable_state) {
+                const index =
+                    (this.is_relative && this.indexes.length > 0) ?
+                    this.indexes[0] + this.offset : undefined;
+                this.button_beeing_pressed = false;
+                this.activity_state = this.target_page_is_current_page || this.button_beeing_pressed;
+                fading_page_switch(this.args[0], index);
+                this.notify();
+            }
+        }
+
+        onmousedown(){
+            if(this.enable_state) {
+                svg_root.addEventListener("pointerup", this.bound_onmouseup, true);
+                this.button_beeing_pressed = true;
+                this.activity_state = true;
+                this.request_animate();
             }
         }
 
@@ -77,7 +82,8 @@
             if(this.activable) {
                 const ref_index = this.indexes.length > 0 ? this.indexes[0] + this.offset : undefined;
                 const ref_name = this.args[0];
-                this.activity_state = ((ref_name == undefined || ref_name == page_name) && index == ref_index);
+                this.target_page_is_current_page = ((ref_name == undefined || ref_name == page_name) && index == ref_index);
+                this.activity_state = this.target_page_is_current_page || this.button_beeing_pressed;
                 // Since called from animate, update activity directly
                 if(this.enable_displayed_state && this.has_activity) {
                     this.animate_activity();
@@ -98,7 +104,8 @@
     const "jump_disability","$has_activity and $has_disability";
 
     |     init: function() {
-    |         this.element.onclick = this.make_on_click();
+    |         this.bound_onmouseup = this.onmouseup.bind(this);
+    |         this.element.addEventListener("pointerdown", this.onmousedown.bind(this));
     if "$has_activity" {
     |         this.activable = true;
     }
--- a/targets/plc_debug.c	Sun Feb 19 08:37:27 2023 +0000
+++ b/targets/plc_debug.c	Mon Feb 27 13:47:36 2023 +0100
@@ -154,8 +154,6 @@
 
             UnpackVar(dsc, &value_p, NULL, &size);
 
-            printf("Reminding %%d %%ld \n", retain_list_collect_cursor, size);
-
             /* if buffer not full */
             Remind(retain_offset, size, value_p);
             /* increment cursor according size*/
@@ -211,8 +209,6 @@
         retain_list_collect_cursor++;
     }
 
-    printf("Retain size %%d \n", retain_size);
-            
     return retain_size;
 }
 
--- a/tests/projects/svghmi/svghmi_0@svghmi/svghmi.svg	Sun Feb 19 08:37:27 2023 +0000
+++ b/tests/projects/svghmi/svghmi_0@svghmi/svghmi.svg	Mon Feb 27 13:47:36 2023 +0100
@@ -137,8 +137,8 @@
      showgrid="false"
      units="px"
      inkscape:zoom="0.40092403"
-     inkscape:cx="323.58553"
-     inkscape:cy="-56.756946"
+     inkscape:cx="2333.0807"
+     inkscape:cy="1015.6842"
      inkscape:window-width="1600"
      inkscape:window-height="836"
      inkscape:window-x="0"
@@ -6543,6 +6543,31 @@
              style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px">Home</tspan></text>
       </g>
     </g>
+    <g
+       transform="translate(-519.60999,-498.54925)"
+       id="g1315-6"
+       inkscape:label="HMI:Back">
+      <rect
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:#ff6600;stroke-width:5.20923424;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         id="rect943-3-2"
+         width="114.49817"
+         height="52.074696"
+         x="1682.5072"
+         y="-298.84613"
+         ry="23.177595"
+         rx="26.820074" />
+      <text
+         id="text949-6-6"
+         y="-260.38251"
+         x="1737.7013"
+         style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;display:inline;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:1.04184675px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:1.04184675px"
+           y="-260.38251"
+           x="1737.7013"
+           id="tspan947-2-1"
+           sodipodi:role="line">Back</tspan></text>
+    </g>
   </g>
   <text
      xml:space="preserve"
@@ -8557,4 +8582,294 @@
            sodipodi:role="line">Home</tspan></text>
     </g>
   </g>
+  <rect
+     y="-800"
+     x="1480"
+     height="720"
+     width="1280"
+     id="rect1282"
+     style="color:#000000;fill:#000000"
+     inkscape:label="HMI:Page:ScreenSaver:12" />
+  <g
+     id="g1280"
+     transform="matrix(4.3157423,0,0,4.3157423,1737.4823,-785.25938)"
+     style="stroke-width:0.23170985"
+     inkscape:label="anim">
+    <circle
+       id="circle1260"
+       style="fill:#ff6600;stroke-width:0.25819258px;font-variant-east_asian:normal;opacity:1;vector-effect:none;fill-opacity:1;stroke:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none"
+       r="50"
+       cy="80"
+       cx="80" />
+    <g
+       id="g1264"
+       transform="matrix(0.866,-0.5,0.25,0.433,80,80)"
+       style="stroke-width:0.23170985">
+      <path
+         id="path1262"
+         d="M 0,70 A 65,70 0 0 0 65,0 5,5 0 0 1 75,0 75,70 0 0 1 0,70 Z"
+         inkscape:connector-curvature="0"
+         style="fill:#ffffff;stroke-width:0.23170985">
+        <animateTransform
+           repeatCount="indefinite"
+           dur="21s"
+           to="0 0 0"
+           from="360 0 0"
+           type="rotate"
+           attributeName="transform" />
+      </path>
+    </g>
+    <path
+       id="path1266-3"
+       style="fill:#ff6600;stroke-width:0.25819826px;font-variant-east_asian:normal;opacity:1;vector-effect:none;fill-opacity:1;stroke:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none"
+       transform="matrix(0.866,-0.5,0.5,0.866,80,80)"
+       d="M 50,0 A 50,50 0 0 0 -50,0 Z"
+       inkscape:connector-curvature="0" />
+  </g>
+  <g
+     id="g1315"
+     inkscape:label="HMI:Back"
+     transform="translate(0,80)">
+    <rect
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:#ff6600;stroke-width:5.20923424;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       id="rect943-3"
+       width="410.06546"
+       height="95.723877"
+       x="1536.5942"
+       y="-322.54138"
+       ry="23.177595"
+       rx="26.820074" />
+    <text
+       id="text949-6"
+       y="-260.38251"
+       x="1737.7013"
+       style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;display:inline;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:1.04184675px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:1.04184675px"
+         y="-260.38251"
+         x="1737.7013"
+         id="tspan947-2"
+         sodipodi:role="line">Leave ScreenSaver</tspan></text>
+  </g>
+  <g
+     id="g4282-91"
+     inkscape:label="HMI:Jump:Home"
+     transform="translate(1466.2292,-1613.0769)">
+    <g
+       id="g4274-2"
+       inkscape:label="button">
+      <path
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:#ff6600;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         d="m 1217.4113,1410.4016 -22,24.5657 c -10.7925,12.0511 6.1317,35.5791 -13.5791,35.5791 h -174.2877 c -19.71078,0 -2.7866,-23.528 -13.57905,-35.5791 l -22,-24.5657 127.74845,-48.4334 z"
+         id="path4272-70"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cssssccc" />
+    </g>
+    <g
+       id="g4280-9"
+       inkscape:label="text">
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;display:inline;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="1090.7626"
+         y="1436.9814"
+         id="text4278-36"
+         inkscape:label="home_jmp"><tspan
+           sodipodi:role="line"
+           id="tspan4276-0"
+           x="1090.7626"
+           y="1436.9814"
+           style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px">Home</tspan></text>
+    </g>
+  </g>
+  <g
+     id="g1077-8"
+     inkscape:label="HMI:Jump:Conf"
+     transform="matrix(0.57180538,0,0,0.57180538,1065.1448,-867.17294)">
+    <g
+       id="g1159-7"
+       inkscape:label="button">
+      <rect
+         rx="35.579063"
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:#ff6600;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         id="rect1020-9"
+         width="245.44583"
+         height="95.723877"
+         x="971.96545"
+         y="594.82263"
+         ry="35.579063"
+         inkscape:label="button" />
+    </g>
+    <g
+       id="g1156-2"
+       inkscape:label="text">
+      <text
+         inkscape:label="setting_jmp"
+         id="setting_jmp-0"
+         y="656.98151"
+         x="1090.7626"
+         style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;display:inline;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px"
+           y="656.98151"
+           x="1090.7626"
+           id="tspan1024-2"
+           sodipodi:role="line">Settings</tspan></text>
+    </g>
+  </g>
+  <g
+     transform="matrix(0.57180538,0,0,0.57180538,1346.4405,-1101.6314)"
+     inkscape:label="HMI:Jump:RelativePageTest@/PUMP0"
+     id="g1458-3">
+    <g
+       inkscape:label="button"
+       id="g1450-7">
+      <rect
+         rx="35.579063"
+         inkscape:label="button"
+         ry="35.579063"
+         y="594.82263"
+         x="971.96545"
+         height="95.723877"
+         width="245.44583"
+         id="rect1448-5"
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:#ff6600;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    </g>
+    <g
+       inkscape:label="text"
+       id="g1456-9">
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;display:inline;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="1090.7626"
+         y="656.98151"
+         id="text1454-2"
+         inkscape:label="setting_jmp"><tspan
+           sodipodi:role="line"
+           x="1090.7626"
+           y="656.98151"
+           style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px"
+           id="tspan1460-2">Pump 0</tspan></text>
+    </g>
+  </g>
+  <g
+     id="g1475-8"
+     inkscape:label="HMI:Jump:RelativePageTest@/PUMP1"
+     transform="matrix(0.57180538,0,0,0.57180538,1506.4405,-1101.6314)">
+    <g
+       id="g1467-9"
+       inkscape:label="button">
+      <rect
+         rx="35.579063"
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:#ff6600;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         id="rect1464-7"
+         width="245.44583"
+         height="95.723877"
+         x="971.96545"
+         y="594.82263"
+         ry="35.579063"
+         inkscape:label="button" />
+    </g>
+    <g
+       id="g1473-3"
+       inkscape:label="text">
+      <text
+         inkscape:label="setting_jmp"
+         id="text1471-6"
+         y="656.98151"
+         x="1090.7626"
+         style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;display:inline;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           id="tspan1469-1"
+           style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px"
+           y="656.98151"
+           x="1090.7626"
+           sodipodi:role="line">Pump 1</tspan><tspan
+           style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px"
+           y="706.98151"
+           x="1090.7626"
+           sodipodi:role="line"
+           id="tspan1477-2" /></text>
+    </g>
+  </g>
+  <g
+     transform="matrix(0.57180538,0,0,0.57180538,1666.4405,-1101.6314)"
+     inkscape:label="HMI:Jump:RelativePageTest@/PUMP2"
+     id="g1491-9">
+    <g
+       inkscape:label="button"
+       id="g1481-3">
+      <rect
+         rx="35.579063"
+         inkscape:label="button"
+         ry="35.579063"
+         y="594.82263"
+         x="971.96545"
+         height="95.723877"
+         width="245.44583"
+         id="rect1479-1"
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:#ff6600;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    </g>
+    <g
+       inkscape:label="text"
+       id="g1489-9">
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;display:inline;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="1090.7626"
+         y="656.98151"
+         id="text1487-4"
+         inkscape:label="setting_jmp"><tspan
+           sodipodi:role="line"
+           x="1090.7626"
+           y="656.98151"
+           style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px"
+           id="tspan1493-7">Pump 2</tspan><tspan
+           id="tspan1485-8"
+           sodipodi:role="line"
+           x="1090.7626"
+           y="706.98151"
+           style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px" /></text>
+    </g>
+  </g>
+  <g
+     id="g1509-4"
+     inkscape:label="HMI:Jump:RelativePageTest@/PUMP3"
+     transform="matrix(0.57180538,0,0,0.57180538,1826.4405,-1101.6314)">
+    <g
+       id="g1499-5"
+       inkscape:label="button">
+      <rect
+         rx="35.579063"
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:#ff6600;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         id="rect1497-0"
+         width="245.44583"
+         height="95.723877"
+         x="971.96545"
+         y="594.82263"
+         ry="35.579063"
+         inkscape:label="button" />
+    </g>
+    <g
+       id="g1507-3"
+       inkscape:label="text">
+      <text
+         inkscape:label="setting_jmp"
+         id="text1505-6"
+         y="656.98151"
+         x="1090.7626"
+         style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;display:inline;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px"
+           y="656.98151"
+           x="1090.7626"
+           sodipodi:role="line"
+           id="tspan1511-1">Pump 3</tspan><tspan
+           style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px"
+           y="706.98151"
+           x="1090.7626"
+           sodipodi:role="line"
+           id="tspan1503-0" /></text>
+    </g>
+  </g>
 </svg>
beremiz