Merged default in svghmi branch svghmi
authorEdouard Tisserant
Tue, 22 Dec 2020 14:57:59 +0100
branchsvghmi
changeset 3096 fc5a0b1ece10
parent 3095 dbb9d1898874 (diff)
parent 2702 f0a70f0246da (current diff)
child 3097 a098b2dd9dff
Merged default in svghmi branch
ConfigTreeNode.py
modbus/web_settings.py
py_ext/PythonFileCTNMixin.py
--- a/BeremizIDE.py	Tue Dec 22 14:53:15 2020 +0100
+++ b/BeremizIDE.py	Tue Dec 22 14:57:59 2020 +0100
@@ -103,7 +103,7 @@
     }
 else:
     faces = {
-        'mono': 'Courier',
+        'mono': 'FreeMono',
         'size': 10,
     }
 
--- a/CodeFileTreeNode.py	Tue Dec 22 14:53:15 2020 +0100
+++ b/CodeFileTreeNode.py	Tue Dec 22 14:57:59 2020 +0100
@@ -207,9 +207,6 @@
                 variable.gettype(),
                 variable.getinitial())
                for variable in variables]
-        ret.extend([("On"+variable.getname()+"Change", "python_poll", "")
-                    for variable in variables
-                    if variable.getonchange()])
         return ret
 
     def CTNSearch(self, criteria):
--- a/ConfigTreeNode.py	Tue Dec 22 14:53:15 2020 +0100
+++ b/ConfigTreeNode.py	Tue Dec 22 14:57:59 2020 +0100
@@ -46,6 +46,7 @@
 from xmlclass import GenerateParserFromXSDstring
 from PLCControler import LOCATION_CONFNODE
 from editors.ConfTreeNodeEditor import ConfTreeNodeEditor
+from POULibrary import UserAddressedException
 
 _BaseParamsParser = GenerateParserFromXSDstring("""<?xml version="1.0" encoding="ISO-8859-1" ?>
         <xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema">
--- a/ProjectController.py	Tue Dec 22 14:53:15 2020 +0100
+++ b/ProjectController.py	Tue Dec 22 14:57:59 2020 +0100
@@ -254,7 +254,7 @@
         # Setup debug information
         self.IECdebug_datas = {}
 
-        self.DebugTimer = None
+        self.DebugUpdatePending = False
         self.ResetIECProgramsAndVariables()
 
         # In both new or load scenario, no need to save
@@ -276,8 +276,6 @@
         self.debug_status = PlcStatus.Stopped
 
     def __del__(self):
-        if self.DebugTimer:
-            self.DebugTimer.cancel()
         self.KillDebugThread()
 
     def LoadLibraries(self):
@@ -1538,7 +1536,6 @@
         return debug_status, ticks, buffers
 
     def RegisterDebugVarToConnector(self):
-        self.DebugTimer = None
         Idxs = []
         self.TracedIECPath = []
         self.TracedIECTypes = []
@@ -1577,25 +1574,15 @@
                 self._connector.SetTraceVariablesList([])
                 self.DebugToken = None
             self.debug_status, _debug_ticks, _buffers = self.SnapshotAndResetDebugValuesBuffers()
+        self.DebugUpdatePending = False
 
     def IsPLCStarted(self):
         return self.previous_plcstate == PlcStatus.Started
 
-    def ReArmDebugRegisterTimer(self):
-        if self.DebugTimer is not None:
-            self.DebugTimer.cancel()
-
-        # Prevent to call RegisterDebugVarToConnector when PLC is not started
-        # If an output location var is forced it's leads to segmentation fault in runtime
-        # Links between PLC located variables and real variables are not ready
-        if self.IsPLCStarted():
-            # Timer to prevent rapid-fire when registering many variables
-            # use wx.CallAfter use keep using same thread. TODO : use wx.Timer
-            # instead
-            self.DebugTimer = Timer(
-                0.5, wx.CallAfter, args=[self.RegisterDebugVarToConnector])
-            # Rearm anti-rapid-fire timer
-            self.DebugTimer.start()
+    def AppendDebugUpdate(self):
+        if not self.DebugUpdatePending :
+            wx.CallAfter(self.RegisterDebugVarToConnector)
+            self.DebugUpdatePending = True
 
     def GetDebugIECVariableType(self, IECPath):
         _Idx, IEC_Type = self._IECPathToIdx.get(IECPath, (None, None))
@@ -1625,7 +1612,7 @@
 
         IECdebug_data[0][callableobj] = buffer_list
 
-        self.ReArmDebugRegisterTimer()
+        self.AppendDebugUpdate()
 
         return IECdebug_data[1]
 
@@ -1641,12 +1628,12 @@
                     IECdebug_data[0].itervalues(),
                     False)
 
-        self.ReArmDebugRegisterTimer()
+        self.AppendDebugUpdate()
 
     def UnsubscribeAllDebugIECVariable(self):
         self.IECdebug_datas = {}
 
-        self.ReArmDebugRegisterTimer()
+        self.AppendDebugUpdate()
 
     def ForceDebugIECVariable(self, IECPath, fvalue):
         if IECPath not in self.IECdebug_datas:
@@ -1657,7 +1644,7 @@
         IECdebug_data[2] = "Forced"
         IECdebug_data[3] = fvalue
 
-        self.ReArmDebugRegisterTimer()
+        self.AppendDebugUpdate()
 
     def ReleaseDebugIECVariable(self, IECPath):
         if IECPath not in self.IECdebug_datas:
@@ -1668,7 +1655,7 @@
         IECdebug_data[2] = "Registered"
         IECdebug_data[3] = None
 
-        self.ReArmDebugRegisterTimer()
+        self.AppendDebugUpdate()
 
     def CallWeakcallables(self, IECPath, function_name, *cargs):
         data_tuple = self.IECdebug_datas.get(IECPath, None)
--- a/XSLTransform.py	Tue Dec 22 14:53:15 2020 +0100
+++ b/XSLTransform.py	Tue Dec 22 14:57:59 2020 +0100
@@ -22,4 +22,7 @@
         # print(self.xslt.error_log)
         return res
 
+    def get_error_log(self):
+        return self.xslt.error_log
 
+
--- a/bacnet/bacnet.py	Tue Dec 22 14:53:15 2020 +0100
+++ b/bacnet/bacnet.py	Tue Dec 22 14:57:59 2020 +0100
@@ -790,6 +790,6 @@
         runtimefile.close()
 
         return ([(Generated_BACnet_c_mainfile_name, CFLAGS)], LDFLAGS, True,
-                ("runtime_bacnet_websettings_%s.py" % location_str, open(runtimefile_path, "rb")),
+                ("runtime_%s_bacnet_websettings.py" % location_str, open(runtimefile_path, "rb")),
         )
         #return [(Generated_BACnet_c_mainfile_name, CFLAGS)], LDFLAGS, True, ('extrafile1.txt', extra_file_handle)
--- a/bacnet/web_settings.py	Tue Dec 22 14:53:15 2020 +0100
+++ b/bacnet/web_settings.py	Tue Dec 22 14:57:59 2020 +0100
@@ -295,7 +295,7 @@
 
 
 # location_str is replaced by extension's value in CTNGenerateC call
-def _runtime_bacnet_websettings_%(location_str)s_init():
+def _runtime_%(location_str)s_bacnet_websettings_init():
     """
     # Callback function, called (by PLCObject.py) when a new PLC program
     # (i.e. XXX.so file) is transfered to the PLC runtime
@@ -383,7 +383,7 @@
 
 
 # location_str is replaced by extension's value in CTNGenerateC call
-def _runtime_bacnet_websettings_%(location_str)s_cleanup():
+def _runtime_%(location_str)s_bacnet_websettings_cleanup():
     """
     # Callback function, called (by PLCObject.py) when a PLC program is unloaded from memory
     """
--- a/controls/CustomStyledTextCtrl.py	Tue Dec 22 14:53:15 2020 +0100
+++ b/controls/CustomStyledTextCtrl.py	Tue Dec 22 14:57:59 2020 +0100
@@ -40,7 +40,7 @@
 else:
     faces = {
         'times': 'Times',
-        'mono':  'Courier',
+        'mono':  'FreeMono',
         'helv':  'Helvetica',
         'other': 'new century schoolbook',
         'size':  12,
--- a/controls/LogViewer.py	Tue Dec 22 14:53:15 2020 +0100
+++ b/controls/LogViewer.py	Tue Dec 22 14:57:59 2020 +0100
@@ -339,7 +339,7 @@
         if wx.Platform == '__WXMSW__':
             self.Font = wx.Font(8, wx.SWISS, wx.NORMAL, wx.NORMAL, faceName='Courier New')
         else:
-            self.Font = wx.Font(10, wx.SWISS, wx.NORMAL, wx.NORMAL, faceName='Courier')
+            self.Font = wx.Font(10, wx.SWISS, wx.NORMAL, wx.NORMAL, faceName='FreeMono')
         self.MessagePanel.Bind(wx.EVT_LEFT_UP, self.OnMessagePanelLeftUp)
         self.MessagePanel.Bind(wx.EVT_RIGHT_UP, self.OnMessagePanelRightUp)
         self.MessagePanel.Bind(wx.EVT_LEFT_DCLICK, self.OnMessagePanelLeftDCLick)
--- a/docutil/docsvg.py	Tue Dec 22 14:53:15 2020 +0100
+++ b/docutil/docsvg.py	Tue Dec 22 14:57:59 2020 +0100
@@ -34,16 +34,23 @@
     if wx.Platform == '__WXMSW__':
         from six.moves import winreg
         try:
-            svgexepath = winreg.QueryValue(winreg.HKEY_LOCAL_MACHINE,
-                                           'Software\\Classes\\svgfile\\shell\\Inkscape\\command')
+                svgexepath = winreg.QueryValue(winreg.HKEY_LOCAL_MACHINE,
+                                               'Software\\Classes\\svgfile\\shell\\Inkscape\\command')
         except OSError:
-            svgexepath = winreg.QueryValue(winreg.HKEY_LOCAL_MACHINE,
-                                           'Software\\Classes\\inkscape.svg\\shell\\open\\command')
+            try:
+                svgexepath = winreg.QueryValue(winreg.HKEY_LOCAL_MACHINE,
+                                               'Software\\Classes\\inkscape.svg\\shell\\open\\command')
+            except Exception:
+                return None
+
         svgexepath = svgexepath.replace('"%1"', '').strip()
         return svgexepath.replace('"', '')
     else:
-        # TODO: search path
-        return os.path.join("/usr/bin", "inkscape")
+        # TODO: search for inkscape in $PATH
+        svgexepath = os.path.join("/usr/bin", "inkscape")
+        if os.path.exists(svgexepath):
+            return svgexepath
+        return None
 
 
 def open_win_svg(svgexepath, svgfile):
--- a/editors/ConfTreeNodeEditor.py	Tue Dec 22 14:53:15 2020 +0100
+++ b/editors/ConfTreeNodeEditor.py	Tue Dec 22 14:57:59 2020 +0100
@@ -48,7 +48,7 @@
 else:
     faces = {
         'times': 'Times',
-        'mono':  'Courier',
+        'mono':  'FreeMono',
         'helv':  'Helvetica',
         'other': 'new century schoolbook',
         'size':  18,
--- a/editors/Viewer.py	Tue Dec 22 14:53:15 2020 +0100
+++ b/editors/Viewer.py	Tue Dec 22 14:57:59 2020 +0100
@@ -82,7 +82,7 @@
 else:
     faces = {
         'times': 'Times',
-        'mono':  'Courier',
+        'mono':  'FreeMono',
         'helv':  'Helvetica',
         'other': 'new century schoolbook',
         'size':  10,
--- a/etherlab/EthercatMaster.py	Tue Dec 22 14:53:15 2020 +0100
+++ b/etherlab/EthercatMaster.py	Tue Dec 22 14:57:59 2020 +0100
@@ -97,6 +97,8 @@
         return ((["etherlab_ext"], [(Gen_etherlabfile_path, IECCFLAGS)], True), "",
                 ("runtime_etherlab.py", open(GetLocalPath("runtime_etherlab.py"))))
 
+                # TODO : rename to match runtime_{location}_extname.py format
+
 # --------------------------------------------------
 #                 Ethercat MASTER
 # --------------------------------------------------
--- a/etherlab/runtime_etherlab.py	Tue Dec 22 14:53:15 2020 +0100
+++ b/etherlab/runtime_etherlab.py	Tue Dec 22 14:57:59 2020 +0100
@@ -114,6 +114,7 @@
         time.sleep(0.5)
 
 
+# TODO : rename to match _runtime_{location}_extname_init() format
 def _runtime_etherlab_init():
     global KMSGPollThread, StopKMSGThread
     StopKMSGThread = False
@@ -121,6 +122,7 @@
     KMSGPollThread.start()
 
 
+# TODO : rename to match _runtime_{location}_extname_cleanup() format
 def _runtime_etherlab_cleanup():
     global KMSGPollThread, StopKMSGThread, SDOThread
     try:
--- a/features.py	Tue Dec 22 14:53:15 2020 +0100
+++ b/features.py	Tue Dec 22 14:57:59 2020 +0100
@@ -12,7 +12,8 @@
     ('Native', 'NativeLib.NativeLibrary', True),
     ('Python', 'py_ext.PythonLibrary', True),
     ('Etherlab', 'etherlab.EthercatMaster.EtherlabLibrary', False),
-    ('SVGUI', 'svgui.SVGUILibrary', False)]
+    ('SVGUI', 'svgui.SVGUILibrary', False),
+    ('SVGHMI', 'svghmi.SVGHMILibrary', False)]
 
 catalog = [
     ('canfestival', _('CANopen support'), _('Map located variables over CANopen'), 'canfestival.canfestival.RootClass'),
@@ -22,6 +23,7 @@
     ('c_ext', _('C extension'), _('Add C code accessing located variables synchronously'), 'c_ext.CFile'),
     ('py_ext', _('Python file'), _('Add Python code executed asynchronously'), 'py_ext.PythonFile'),
     ('wxglade_hmi', _('WxGlade GUI'), _('Add a simple WxGlade based GUI.'), 'wxglade_hmi.WxGladeHMI'),
-    ('svgui', _('SVGUI'), _('Experimental web based HMI'), 'svgui.SVGUI')]
+    ('svgui', _('SVGUI'), _('Experimental web based HMI'), 'svgui.SVGUI'),
+    ('svghmi', _('SVGHMI'), _('SVG based HMI'), 'svghmi.SVGHMI')]
 
 file_editors = []
--- a/modbus/modbus.py	Tue Dec 22 14:53:15 2020 +0100
+++ b/modbus/modbus.py	Tue Dec 22 14:57:59 2020 +0100
@@ -1006,5 +1006,5 @@
         runtimefile.close()
 
         return ([(Gen_MB_c_path, ' -I"' + ModbusPath + '"')], LDFLAGS, True,
-                ("runtime_modbus_websettings_%s.py" % location_str, open(runtimefile_path, "rb")),
+                ("runtime_%s_modbus_websettings.py" % location_str, open(runtimefile_path, "rb")),
         )
--- a/modbus/web_settings.py	Tue Dec 22 14:53:15 2020 +0100
+++ b/modbus/web_settings.py	Tue Dec 22 14:57:59 2020 +0100
@@ -526,7 +526,7 @@
 
 
 
-def _runtime_modbus_websettings_%(location_str)s_init():
+def _runtime_%(location_str)s_modbus_websettings_init():
     """
     Callback function, called (by PLCObject.py) when a new PLC program
     (i.e. XXX.so file) is transfered to the PLC runtime
@@ -609,7 +609,7 @@
 
 
 
-def _runtime_modbus_websettings_%(location_str)s_cleanup():
+def _runtime_%(location_str)s_modbus_websettings_cleanup():
     """
     Callback function, called (by PLCObject.py) when a PLC program is unloaded from memory
     """
--- a/plcopen/plcopen.py	Tue Dec 22 14:53:15 2020 +0100
+++ b/plcopen/plcopen.py	Tue Dec 22 14:57:59 2020 +0100
@@ -331,12 +331,16 @@
 
 
 def SaveProject(project, filepath):
-    project_file = open(filepath, 'w')
-    project_file.write(etree.tostring(
+    content = etree.tostring(
         project,
         pretty_print=True,
         xml_declaration=True,
-        encoding='utf-8'))
+        encoding='utf-8')
+
+    assert len(content) != 0
+        
+    project_file = open(filepath, 'w')
+    project_file.write(content)
     project_file.close()
 
 
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/Makefile	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,26 @@
+#! gmake
+
+# Makefile to generate XSLT stylesheets from ysl2 files in the same directory
+
+# This uses YML2. 
+#   hg clone https://pep.foundation/dev/repos/yml2/
+
+# It should be just fine if yml2 is cloned just asside beremiz
+# otherwise, point yml2path to yml2 source directory
+#   make yml2path=path/to/yml/dir
+
+yml2path ?= $(abspath ../../yml2)
+
+ysl2files := gen_index_xhtml.ysl2
+ysl2includes := $(filter-out $(ysl2files), $(wildcard *.ysl2))
+xsltfiles := $(patsubst %.ysl2, %.xslt, $(ysl2files))
+
+all:$(xsltfiles)
+
+%.xslt: %.ysl2 $(ysl2includes) svghmi.js ../yslt_noindent.yml2
+	$(yml2path)/yml2c -I $(yml2path):../ $< -o $@.tmp
+	xmlstarlet fo $@.tmp > $@
+	rm $@.tmp
+	
+clean:
+	rm -f $(xsltfiles)
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/README	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,1 @@
+SVG HMI
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/__init__.py	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,10 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+
+# This file is part of Beremiz
+# Copyright (C) 2019: Edouard TISSERANT
+#
+# See COPYING file for copyrights details.
+
+from __future__ import absolute_import
+from svghmi.svghmi import *
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/default.svg	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1280"
+   height="720"
+   viewBox="0 0 1280 720"
+   version="1.1"
+   id="hmi0"
+   sodipodi:docname="default.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <metadata
+     id="metadata4542">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:document-units="px"
+     inkscape:current-layer="hmi0"
+     showgrid="false"
+     units="px"
+     inkscape:zoom="0.7"
+     inkscape:cx="576.80864"
+     inkscape:cy="330.28432"
+     inkscape:window-width="1600"
+     inkscape:window-height="886"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1" />
+  <rect
+     style="color:#000000"
+     id="page0"
+     width="1280"
+     height="720"
+     x="0"
+     y="0">
+    <desc
+       id="desc_page0">This is description for page 0
+
+all lines in the form &quot;name: value&quot; 
+are used as js object definition initializer
+
+role: &quot;page&quot;
+name: &quot;Home&quot;
+
+after triple opening braces is global JavaScript code
+
+{{{
+/* JS style Comment */
+alert(&quot;Hello World&quot;);
+}}}
+
+after triple closing braces is back to description
+</desc>
+  </rect>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="436.32812"
+     y="418.24219"
+     id="text5151"
+     inkscape:label="count"><desc
+       id="desc5153">path: &quot;count&quot;
+format: &quot;%4.4d&quot;</desc><tspan
+       sodipodi:role="line"
+       id="tspan5149"
+       x="436.32812"
+       y="418.24219"
+       style="stroke-width:1px">8888</tspan></text>
+</svg>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/detachable_pages.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,191 @@
+// detachable_pages.ysl2
+//
+// compute what elements are required by pages
+// and decide where to cut when removing/attaching
+// pages elements on page switch
+
+const "hmi_pages_descs", "$parsed_widgets/widget[@type = 'Page']";
+const "hmi_pages", "$hmi_elements[@id = $hmi_pages_descs/@id]";
+
+const "default_page" choose {
+    when "count($hmi_pages) > 1" {
+        choose {
+            when "$hmi_pages_descs/arg[1]/@value = 'Home'" > Home
+            otherwise {
+                error "No Home page defined!";
+            }
+        }
+    }
+    when "count($hmi_pages) = 0" {
+        error "No page defined!";
+    }
+    otherwise > «func:widget($hmi_pages/@id)/arg[1]/@value»
+}
+
+emit "preamble:default-page" {
+    |
+    | var default_page = "«$default_page»";
+}
+
+const "keypads_descs", "$parsed_widgets/widget[@type = 'Keypad']";
+const "keypads", "$hmi_elements[@id = $keypads_descs/@id]";
+
+// returns all directly or indirectly refered elements
+def "func:refered_elements" {
+    param "elems";
+    const "descend", "$elems/descendant-or-self::svg:*";
+    const "clones", "$descend[self::svg:use]";
+    const "originals", "//svg:*[concat('#',@id) = $clones/@xlink:href]";
+    choose {
+        when "$originals"
+            result "$descend | func:refered_elements($originals)";
+        otherwise
+            result "$descend";
+    }
+}
+
+def "func:all_related_elements" {
+    param "page";
+    const "page_overlapping_geometry", "func:overlapping_geometry($page)";
+    const "page_overlapping_elements", "//svg:*[@id = $page_overlapping_geometry/@Id]";
+    const "page_sub_elements", "func:refered_elements($page | $page_overlapping_elements)";
+    result "$page_sub_elements";
+}
+
+def "func:required_elements" {
+    param "pages"; 
+    choose{
+        when "$pages"{
+            result """func:all_related_elements($pages[1])
+                      | func:required_elements($pages[position()!=1])""";
+        }otherwise{
+            result "/..";
+        }
+    }
+}
+
+const "required_elements",
+    """//svg:defs/descendant-or-self::svg:*
+       | func:required_elements($hmi_pages | $keypads)/ancestor-or-self::svg:*""";
+
+const "discardable_elements", "//svg:*[not(@id = $required_elements/@id)]";
+
+def "func:sumarized_elements" {
+    param "elements";
+    const "short_list", "$elements[not(ancestor::*/@id = $elements/@id)]";
+    const "filled_groups", """$short_list/parent::svg:*[
+        not(descendant::*[
+            not(self::svg:g) and
+            not(@id = $discardable_elements/@id) and
+            not(@id = $short_list/descendant-or-self::*[not(self::svg:g)]/@id)
+        ])]""";
+    const "groups_to_add", "$filled_groups[not(ancestor::*/@id = $filled_groups/@id)]";
+    result "$groups_to_add | $short_list[not(ancestor::svg:g/@id = $filled_groups/@id)]";
+}
+
+def "func:detachable_elements" {
+    param "pages";
+    choose{
+        when "$pages"{
+            result """func:sumarized_elements(func:all_related_elements($pages[1]))
+                      | func:detachable_elements($pages[position()!=1])""";
+        }otherwise{
+            result "/..";
+        }
+    }
+}
+
+// Avoid nested detachables
+const "_detachable_elements", "func:detachable_elements($hmi_pages | $keypads)";
+const "detachable_elements", "$_detachable_elements[not(ancestor::*/@id = $_detachable_elements/@id)]";
+
+emit "declarations:detachable-elements" {
+    |
+    | var detachable_elements = {
+    foreach "$detachable_elements"{
+    |     "«@id»":[id("«@id»"), id("«../@id»")]`if "position()!=last()" > ,`
+    }
+    | }
+}
+
+const "forEach_widgets_ids", "$parsed_widgets/widget[@type = 'ForEach']/@id";
+const "forEach_widgets", "$hmi_elements[@id = $forEach_widgets_ids]";
+const "in_forEach_widget_ids", "func:refered_elements($forEach_widgets)[not(@id = $forEach_widgets_ids)]/@id";
+
+template "svg:*", mode="page_desc" {
+    const "desc", "func:widget(@id)";
+    const "page", ".";
+    const "p", "$geometry[@Id = $page/@id]";
+
+    const "page_all_elements", "func:all_related_elements($page)";
+
+    const "all_page_widgets","$hmi_elements[@id = $page_all_elements/@id and @id != $page/@id]";
+    const "page_managed_widgets","$all_page_widgets[not(@id=$in_forEach_widget_ids)]";
+    const "page_relative_widgets",
+        "$page_managed_widgets[func:is_descendant_path(func:widget(@id)/path/@value, $desc/path/@value)]";
+
+    // Take closest ancestor in detachable_elements
+    // since nested detachable elements are filtered out
+    const "required_detachables", 
+        """func:sumarized_elements($page_all_elements)/
+           ancestor-or-self::*[@id = $detachable_elements/@id]""";
+
+    |   "«$desc/arg[1]/@value»": {
+    //|     widget: hmi_widgets["«@id»"],
+    |     bbox: [«$p/@x», «$p/@y», «$p/@w», «$p/@h»],
+    if "$desc/path/@value" {
+        if "count($desc/path/@index)=0"
+            warning > Page id="«$page/@id»" : No match for path "«$desc/path/@value»" in HMI tree
+    |     page_index: «$desc/path/@index»,
+    }
+    |     widgets: [
+    foreach "$page_managed_widgets" {
+        const "widget_paths_relativeness" 
+            foreach "func:widget(@id)/path" {
+                value "func:is_descendant_path(@value, $desc/path/@value)";
+                if "position()!=last()" > ,
+            }
+    |         [hmi_widgets["«@id»"], [«$widget_paths_relativeness»]]`if "position()!=last()" > ,`
+    }
+    |     ],
+    |     jumps: [
+    foreach "$parsed_widgets/widget[@id = $all_page_widgets/@id and @type='Jump']" {
+        const "_id","@id";
+        const "opts" call "jump_widget_activity" with "hmi_element", "$hmi_elements[@id=$_id]";
+        if "string-length($opts)>0"
+    |         hmi_widgets["«@id»"]`if "position()!=last()" > ,`
+    }
+    |     ],
+    |     required_detachables: {
+    foreach "$required_detachables" {
+    |         "«@id»": detachable_elements["«@id»"]`if "position()!=last()" > ,`
+    }
+    |     }
+    /* TODO generate some code for init() instead */
+    apply "$parsed_widgets/widget[@id = $all_page_widgets/@id]", mode="per_page_widget_template"{
+        with "page_desc", "$desc";
+    }
+    |   }`if "position()!=last()" > ,`
+}
+
+emit "definitions:page-desc" {
+    |
+    | var page_desc = {
+    apply "$hmi_pages", mode="page_desc";
+    | }
+}
+
+template "*", mode="per_page_widget_template";
+
+
+emit "debug:detachable-pages" {
+    |
+    | DETACHABLES:
+    foreach "$detachable_elements"{
+        |  «@id»
+    }
+    | In Foreach:
+    foreach "$in_forEach_widget_ids"{
+        |  «.»
+    }
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/gen_index_xhtml.xslt	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,7254 @@
+<?xml version="1.0"?>
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:exsl="http://exslt.org/common" xmlns:regexp="http://exslt.org/regular-expressions" xmlns:str="http://exslt.org/strings" xmlns:func="http://exslt.org/functions" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:debug="debug" xmlns:preamble="preamble" xmlns:declarations="declarations" xmlns:definitions="definitions" xmlns:epilogue="epilogue" xmlns:ns="beremiz" version="1.0" extension-element-prefixes="ns func exsl regexp str dyn" exclude-result-prefixes="ns func exsl regexp str dyn debug preamble epilogue declarations definitions">
+  <xsl:output cdata-section-elements="xhtml:script" method="xml"/>
+  <xsl:variable name="svg" select="/svg:svg"/>
+  <xsl:variable name="hmi_elements" select="//svg:*[starts-with(@inkscape:label, 'HMI:')]"/>
+  <xsl:variable name="hmitree" select="ns:GetHMITree()"/>
+  <xsl:variable name="_categories">
+    <noindex>
+      <xsl:text>HMI_PLC_STATUS</xsl:text>
+    </noindex>
+    <noindex>
+      <xsl:text>HMI_CURRENT_PAGE</xsl:text>
+    </noindex>
+  </xsl:variable>
+  <xsl:variable name="categories" select="exsl:node-set($_categories)"/>
+  <xsl:variable name="_indexed_hmitree">
+    <xsl:apply-templates mode="index" select="$hmitree"/>
+  </xsl:variable>
+  <xsl:variable name="indexed_hmitree" select="exsl:node-set($_indexed_hmitree)"/>
+  <preamble:hmi-tree/>
+  <xsl:template match="preamble:hmi-tree">
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* </xsl:text>
+    <xsl:value-of select="local-name()"/>
+    <xsl:text> */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>var hmi_hash = [</xsl:text>
+    <xsl:value-of select="$hmitree/@hash"/>
+    <xsl:text>];
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>var heartbeat_index = </xsl:text>
+    <xsl:value-of select="$indexed_hmitree/*[@hmipath = '/HEARTBEAT']/@index"/>
+    <xsl:text>;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>var hmitree_types = [
+</xsl:text>
+    <xsl:for-each select="$indexed_hmitree/*">
+      <xsl:text>    /* </xsl:text>
+      <xsl:value-of select="@index"/>
+      <xsl:text>  </xsl:text>
+      <xsl:value-of select="@hmipath"/>
+      <xsl:text> */ "</xsl:text>
+      <xsl:value-of select="substring(local-name(), 5)"/>
+      <xsl:text>"</xsl:text>
+      <xsl:if test="position()!=last()">
+        <xsl:text>,</xsl:text>
+      </xsl:if>
+      <xsl:text>
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>]
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="index" match="*">
+    <xsl:param name="index" select="0"/>
+    <xsl:param name="parentpath" select="''"/>
+    <xsl:variable name="content">
+      <xsl:variable name="path">
+        <xsl:choose>
+          <xsl:when test="count(ancestor::*)=0">
+            <xsl:text>/</xsl:text>
+          </xsl:when>
+          <xsl:when test="count(ancestor::*)=1">
+            <xsl:text>/</xsl:text>
+            <xsl:value-of select="@name"/>
+          </xsl:when>
+          <xsl:otherwise>
+            <xsl:value-of select="$parentpath"/>
+            <xsl:text>/</xsl:text>
+            <xsl:value-of select="@name"/>
+          </xsl:otherwise>
+        </xsl:choose>
+      </xsl:variable>
+      <xsl:choose>
+        <xsl:when test="not(local-name() = $categories/noindex)">
+          <xsl:copy>
+            <xsl:attribute name="index">
+              <xsl:value-of select="$index"/>
+            </xsl:attribute>
+            <xsl:attribute name="hmipath">
+              <xsl:value-of select="$path"/>
+            </xsl:attribute>
+            <xsl:for-each select="@*">
+              <xsl:copy/>
+            </xsl:for-each>
+          </xsl:copy>
+          <xsl:apply-templates mode="index" select="*[1]">
+            <xsl:with-param name="index" select="$index + 1"/>
+            <xsl:with-param name="parentpath">
+              <xsl:value-of select="$path"/>
+            </xsl:with-param>
+          </xsl:apply-templates>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:apply-templates mode="index" select="*[1]">
+            <xsl:with-param name="index" select="$index"/>
+            <xsl:with-param name="parentpath">
+              <xsl:value-of select="$path"/>
+            </xsl:with-param>
+          </xsl:apply-templates>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:variable>
+    <xsl:copy-of select="$content"/>
+    <xsl:apply-templates mode="index" select="following-sibling::*[1]">
+      <xsl:with-param name="index" select="$index + count(exsl:node-set($content)/*)"/>
+      <xsl:with-param name="parentpath">
+        <xsl:value-of select="$parentpath"/>
+      </xsl:with-param>
+    </xsl:apply-templates>
+  </xsl:template>
+  <xsl:template mode="parselabel" match="*">
+    <xsl:variable name="label" select="@inkscape:label"/>
+    <xsl:variable name="description" select="substring-after($label,'HMI:')"/>
+    <xsl:variable name="_args" select="substring-before($description,'@')"/>
+    <xsl:variable name="args">
+      <xsl:choose>
+        <xsl:when test="$_args">
+          <xsl:value-of select="$_args"/>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:value-of select="$description"/>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:variable>
+    <xsl:variable name="_type" select="substring-before($args,':')"/>
+    <xsl:variable name="type">
+      <xsl:choose>
+        <xsl:when test="$_type">
+          <xsl:value-of select="$_type"/>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:value-of select="$args"/>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:variable>
+    <xsl:if test="$type">
+      <widget>
+        <xsl:attribute name="id">
+          <xsl:value-of select="@id"/>
+        </xsl:attribute>
+        <xsl:attribute name="type">
+          <xsl:value-of select="$type"/>
+        </xsl:attribute>
+        <xsl:for-each select="str:split(substring-after($args, ':'), ':')">
+          <arg>
+            <xsl:attribute name="value">
+              <xsl:value-of select="."/>
+            </xsl:attribute>
+          </arg>
+        </xsl:for-each>
+        <xsl:variable name="paths" select="substring-after($description,'@')"/>
+        <xsl:for-each select="str:split($paths, '@')">
+          <xsl:if test="string-length(.) &gt; 0">
+            <path>
+              <xsl:attribute name="value">
+                <xsl:value-of select="."/>
+              </xsl:attribute>
+              <xsl:variable name="path" select="."/>
+              <xsl:variable name="item" select="$indexed_hmitree/*[@hmipath = $path]"/>
+              <xsl:choose>
+                <xsl:when test="count($item) = 1">
+                  <xsl:attribute name="index">
+                    <xsl:value-of select="$item/@index"/>
+                  </xsl:attribute>
+                  <xsl:attribute name="type">
+                    <xsl:value-of select="local-name($item)"/>
+                  </xsl:attribute>
+                </xsl:when>
+                <xsl:otherwise>
+                  <xsl:choose>
+                    <xsl:when test="regexp:test($path,'^\.[a-zA-Z0-9_]+')">
+                      <xsl:attribute name="type">
+                        <xsl:text>PAGE_LOCAL</xsl:text>
+                      </xsl:attribute>
+                    </xsl:when>
+                    <xsl:when test="regexp:test($path,'^[a-zA-Z0-9_]+')">
+                      <xsl:attribute name="type">
+                        <xsl:text>HMI_LOCAL</xsl:text>
+                      </xsl:attribute>
+                    </xsl:when>
+                  </xsl:choose>
+                </xsl:otherwise>
+              </xsl:choose>
+            </path>
+          </xsl:if>
+        </xsl:for-each>
+      </widget>
+    </xsl:if>
+  </xsl:template>
+  <xsl:variable name="_parsed_widgets">
+    <xsl:apply-templates mode="parselabel" select="$hmi_elements"/>
+  </xsl:variable>
+  <xsl:variable name="parsed_widgets" select="exsl:node-set($_parsed_widgets)"/>
+  <func:function name="func:widget">
+    <xsl:param name="id"/>
+    <func:result select="$parsed_widgets/widget[@id = $id]"/>
+  </func:function>
+  <func:function name="func:is_descendant_path">
+    <xsl:param name="descend"/>
+    <xsl:param name="ancest"/>
+    <func:result select="string-length($ancest) &gt; 0 and starts-with($descend,$ancest)"/>
+  </func:function>
+  <func:function name="func:same_class_paths">
+    <xsl:param name="a"/>
+    <xsl:param name="b"/>
+    <xsl:variable name="class_a" select="$indexed_hmitree/*[@hmipath = $a]/@class"/>
+    <xsl:variable name="class_b" select="$indexed_hmitree/*[@hmipath = $b]/@class"/>
+    <func:result select="$class_a and $class_b and $class_a = $class_b"/>
+  </func:function>
+  <xsl:template mode="testtree" match="*">
+    <xsl:param name="indent" select="''"/>
+    <xsl:value-of select="$indent"/>
+    <xsl:text> </xsl:text>
+    <xsl:value-of select="local-name()"/>
+    <xsl:text> </xsl:text>
+    <xsl:for-each select="@*">
+      <xsl:value-of select="local-name()"/>
+      <xsl:text>="</xsl:text>
+      <xsl:value-of select="."/>
+      <xsl:text>" </xsl:text>
+    </xsl:for-each>
+    <xsl:text>
+</xsl:text>
+    <xsl:apply-templates mode="testtree" select="*">
+      <xsl:with-param name="indent">
+        <xsl:value-of select="concat($indent,'&gt;')"/>
+      </xsl:with-param>
+    </xsl:apply-templates>
+  </xsl:template>
+  <debug:hmi-tree/>
+  <xsl:template match="debug:hmi-tree">
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* </xsl:text>
+    <xsl:value-of select="local-name()"/>
+    <xsl:text> */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>Raw HMI tree
+</xsl:text>
+    <xsl:apply-templates mode="testtree" select="$hmitree"/>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>Indexed HMI tree
+</xsl:text>
+    <xsl:apply-templates mode="testtree" select="$indexed_hmitree"/>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>Parsed Widgets
+</xsl:text>
+    <xsl:copy-of select="_parsed_widgets"/>
+    <xsl:apply-templates mode="testtree" select="$parsed_widgets"/>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:variable name="geometry" select="ns:GetSVGGeometry()"/>
+  <debug:geometry/>
+  <xsl:template match="debug:geometry">
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* </xsl:text>
+    <xsl:value-of select="local-name()"/>
+    <xsl:text> */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>ID, x, y, w, h
+</xsl:text>
+    <xsl:for-each select="$geometry">
+      <xsl:text> </xsl:text>
+      <xsl:value-of select="@Id"/>
+      <xsl:text> </xsl:text>
+      <xsl:value-of select="@x"/>
+      <xsl:text> </xsl:text>
+      <xsl:value-of select="@y"/>
+      <xsl:text> </xsl:text>
+      <xsl:value-of select="@w"/>
+      <xsl:text> </xsl:text>
+      <xsl:value-of select="@h"/>
+      <xsl:text>
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <func:function name="func:intersect_1d">
+    <xsl:param name="a0"/>
+    <xsl:param name="a1"/>
+    <xsl:param name="b0"/>
+    <xsl:param name="b1"/>
+    <xsl:variable name="d0" select="$a0 &gt;= $b0"/>
+    <xsl:variable name="d1" select="$a1 &gt;= $b1"/>
+    <xsl:choose>
+      <xsl:when test="not($d0) and $d1">
+        <func:result select="3"/>
+      </xsl:when>
+      <xsl:when test="$d0 and not($d1)">
+        <func:result select="2"/>
+      </xsl:when>
+      <xsl:when test="$d0 and $d1 and $a0 &lt; $b1">
+        <func:result select="1"/>
+      </xsl:when>
+      <xsl:when test="not($d0) and not($d1) and $b0 &lt; $a1">
+        <func:result select="1"/>
+      </xsl:when>
+      <xsl:otherwise>
+        <func:result select="0"/>
+      </xsl:otherwise>
+    </xsl:choose>
+  </func:function>
+  <func:function name="func:intersect">
+    <xsl:param name="a"/>
+    <xsl:param name="b"/>
+    <xsl:variable name="x_intersect" select="func:intersect_1d($a/@x, $a/@x+$a/@w, $b/@x, $b/@x+$b/@w)"/>
+    <xsl:choose>
+      <xsl:when test="$x_intersect != 0">
+        <xsl:variable name="y_intersect" select="func:intersect_1d($a/@y, $a/@y+$a/@h, $b/@y, $b/@y+$b/@h)"/>
+        <func:result select="$x_intersect * $y_intersect"/>
+      </xsl:when>
+      <xsl:otherwise>
+        <func:result select="0"/>
+      </xsl:otherwise>
+    </xsl:choose>
+  </func:function>
+  <func:function name="func:overlapping_geometry">
+    <xsl:param name="elt"/>
+    <xsl:variable name="groups" select="/svg:svg | //svg:g"/>
+    <xsl:variable name="g" select="$geometry[@Id = $elt/@id]"/>
+    <xsl:variable name="candidates" select="$geometry[@Id != $elt/@id]"/>
+    <func:result select="$candidates[(@Id = $groups/@id and (func:intersect($g, .) = 9)) or &#10;                          (not(@Id = $groups/@id) and (func:intersect($g, .) &gt; 0 ))]"/>
+  </func:function>
+  <xsl:variable name="hmi_pages_descs" select="$parsed_widgets/widget[@type = 'Page']"/>
+  <xsl:variable name="hmi_pages" select="$hmi_elements[@id = $hmi_pages_descs/@id]"/>
+  <xsl:variable name="default_page">
+    <xsl:choose>
+      <xsl:when test="count($hmi_pages) &gt; 1">
+        <xsl:choose>
+          <xsl:when test="$hmi_pages_descs/arg[1]/@value = 'Home'">
+            <xsl:text>Home</xsl:text>
+          </xsl:when>
+          <xsl:otherwise>
+            <xsl:message terminate="yes">No Home page defined!</xsl:message>
+          </xsl:otherwise>
+        </xsl:choose>
+      </xsl:when>
+      <xsl:when test="count($hmi_pages) = 0">
+        <xsl:message terminate="yes">No page defined!</xsl:message>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:value-of select="func:widget($hmi_pages/@id)/arg[1]/@value"/>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:variable>
+  <preamble:default-page/>
+  <xsl:template match="preamble:default-page">
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* </xsl:text>
+    <xsl:value-of select="local-name()"/>
+    <xsl:text> */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>var default_page = "</xsl:text>
+    <xsl:value-of select="$default_page"/>
+    <xsl:text>";
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:variable name="keypads_descs" select="$parsed_widgets/widget[@type = 'Keypad']"/>
+  <xsl:variable name="keypads" select="$hmi_elements[@id = $keypads_descs/@id]"/>
+  <func:function name="func:refered_elements">
+    <xsl:param name="elems"/>
+    <xsl:variable name="descend" select="$elems/descendant-or-self::svg:*"/>
+    <xsl:variable name="clones" select="$descend[self::svg:use]"/>
+    <xsl:variable name="originals" select="//svg:*[concat('#',@id) = $clones/@xlink:href]"/>
+    <xsl:choose>
+      <xsl:when test="$originals">
+        <func:result select="$descend | func:refered_elements($originals)"/>
+      </xsl:when>
+      <xsl:otherwise>
+        <func:result select="$descend"/>
+      </xsl:otherwise>
+    </xsl:choose>
+  </func:function>
+  <func:function name="func:all_related_elements">
+    <xsl:param name="page"/>
+    <xsl:variable name="page_overlapping_geometry" select="func:overlapping_geometry($page)"/>
+    <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)"/>
+    <func:result select="$page_sub_elements"/>
+  </func:function>
+  <func:function name="func:required_elements">
+    <xsl:param name="pages"/>
+    <xsl:choose>
+      <xsl:when test="$pages">
+        <func:result select="func:all_related_elements($pages[1])&#10;                      | func:required_elements($pages[position()!=1])"/>
+      </xsl:when>
+      <xsl:otherwise>
+        <func:result select="/.."/>
+      </xsl:otherwise>
+    </xsl:choose>
+  </func:function>
+  <xsl:variable name="required_elements" select="//svg:defs/descendant-or-self::svg:*&#10;       | func:required_elements($hmi_pages | $keypads)/ancestor-or-self::svg:*"/>
+  <xsl:variable name="discardable_elements" select="//svg:*[not(@id = $required_elements/@id)]"/>
+  <func:function name="func:sumarized_elements">
+    <xsl:param name="elements"/>
+    <xsl:variable name="short_list" select="$elements[not(ancestor::*/@id = $elements/@id)]"/>
+    <xsl:variable name="filled_groups" select="$short_list/parent::svg:*[&#10;        not(descendant::*[&#10;            not(self::svg:g) and&#10;            not(@id = $discardable_elements/@id) and&#10;            not(@id = $short_list/descendant-or-self::*[not(self::svg:g)]/@id)&#10;        ])]"/>
+    <xsl:variable name="groups_to_add" select="$filled_groups[not(ancestor::*/@id = $filled_groups/@id)]"/>
+    <func:result select="$groups_to_add | $short_list[not(ancestor::svg:g/@id = $filled_groups/@id)]"/>
+  </func:function>
+  <func:function name="func:detachable_elements">
+    <xsl:param name="pages"/>
+    <xsl:choose>
+      <xsl:when test="$pages">
+        <func:result select="func:sumarized_elements(func:all_related_elements($pages[1]))&#10;                      | func:detachable_elements($pages[position()!=1])"/>
+      </xsl:when>
+      <xsl:otherwise>
+        <func:result select="/.."/>
+      </xsl:otherwise>
+    </xsl:choose>
+  </func:function>
+  <xsl:variable name="_detachable_elements" select="func:detachable_elements($hmi_pages | $keypads)"/>
+  <xsl:variable name="detachable_elements" select="$_detachable_elements[not(ancestor::*/@id = $_detachable_elements/@id)]"/>
+  <declarations:detachable-elements/>
+  <xsl:template match="declarations:detachable-elements">
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* </xsl:text>
+    <xsl:value-of select="local-name()"/>
+    <xsl:text> */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>var detachable_elements = {
+</xsl:text>
+    <xsl:for-each select="$detachable_elements">
+      <xsl:text>    "</xsl:text>
+      <xsl:value-of select="@id"/>
+      <xsl:text>":[id("</xsl:text>
+      <xsl:value-of select="@id"/>
+      <xsl:text>"), id("</xsl:text>
+      <xsl:value-of select="../@id"/>
+      <xsl:text>")]</xsl:text>
+      <xsl:if test="position()!=last()">
+        <xsl:text>,</xsl:text>
+      </xsl:if>
+      <xsl:text>
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>}
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:variable name="forEach_widgets_ids" select="$parsed_widgets/widget[@type = 'ForEach']/@id"/>
+  <xsl:variable name="forEach_widgets" select="$hmi_elements[@id = $forEach_widgets_ids]"/>
+  <xsl:variable name="in_forEach_widget_ids" select="func:refered_elements($forEach_widgets)[not(@id = $forEach_widgets_ids)]/@id"/>
+  <xsl:template mode="page_desc" match="svg:*">
+    <xsl:variable name="desc" select="func:widget(@id)"/>
+    <xsl:variable name="page" select="."/>
+    <xsl:variable name="p" select="$geometry[@Id = $page/@id]"/>
+    <xsl:variable name="page_all_elements" select="func:all_related_elements($page)"/>
+    <xsl:variable name="all_page_widgets" select="$hmi_elements[@id = $page_all_elements/@id and @id != $page/@id]"/>
+    <xsl:variable name="page_managed_widgets" select="$all_page_widgets[not(@id=$in_forEach_widget_ids)]"/>
+    <xsl:variable name="page_relative_widgets" select="$page_managed_widgets[func:is_descendant_path(func:widget(@id)/path/@value, $desc/path/@value)]"/>
+    <xsl:variable name="required_detachables" select="func:sumarized_elements($page_all_elements)/&#10;           ancestor-or-self::*[@id = $detachable_elements/@id]"/>
+    <xsl:text>  "</xsl:text>
+    <xsl:value-of select="$desc/arg[1]/@value"/>
+    <xsl:text>": {
+</xsl:text>
+    <xsl:text>    bbox: [</xsl:text>
+    <xsl:value-of select="$p/@x"/>
+    <xsl:text>, </xsl:text>
+    <xsl:value-of select="$p/@y"/>
+    <xsl:text>, </xsl:text>
+    <xsl:value-of select="$p/@w"/>
+    <xsl:text>, </xsl:text>
+    <xsl:value-of select="$p/@h"/>
+    <xsl:text>],
+</xsl:text>
+    <xsl:if test="$desc/path/@value">
+      <xsl:if test="count($desc/path/@index)=0">
+        <xsl:message terminate="no">
+          <xsl:text>Page id="</xsl:text>
+          <xsl:value-of select="$page/@id"/>
+          <xsl:text>" : No match for path "</xsl:text>
+          <xsl:value-of select="$desc/path/@value"/>
+          <xsl:text>" in HMI tree</xsl:text>
+        </xsl:message>
+      </xsl:if>
+      <xsl:text>    page_index: </xsl:text>
+      <xsl:value-of select="$desc/path/@index"/>
+      <xsl:text>,
+</xsl:text>
+    </xsl:if>
+    <xsl:text>    widgets: [
+</xsl:text>
+    <xsl:for-each select="$page_managed_widgets">
+      <xsl:variable name="widget_paths_relativeness">
+        <xsl:for-each select="func:widget(@id)/path">
+          <xsl:value-of select="func:is_descendant_path(@value, $desc/path/@value)"/>
+          <xsl:if test="position()!=last()">
+            <xsl:text>,</xsl:text>
+          </xsl:if>
+        </xsl:for-each>
+      </xsl:variable>
+      <xsl:text>        [hmi_widgets["</xsl:text>
+      <xsl:value-of select="@id"/>
+      <xsl:text>"], [</xsl:text>
+      <xsl:value-of select="$widget_paths_relativeness"/>
+      <xsl:text>]]</xsl:text>
+      <xsl:if test="position()!=last()">
+        <xsl:text>,</xsl:text>
+      </xsl:if>
+      <xsl:text>
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>    ],
+</xsl:text>
+    <xsl:text>    jumps: [
+</xsl:text>
+    <xsl:for-each select="$parsed_widgets/widget[@id = $all_page_widgets/@id and @type='Jump']">
+      <xsl:variable name="_id" select="@id"/>
+      <xsl:variable name="opts">
+        <xsl:call-template name="jump_widget_activity">
+          <xsl:with-param name="hmi_element" select="$hmi_elements[@id=$_id]"/>
+        </xsl:call-template>
+      </xsl:variable>
+      <xsl:if test="string-length($opts)&gt;0">
+        <xsl:text>        hmi_widgets["</xsl:text>
+        <xsl:value-of select="@id"/>
+        <xsl:text>"]</xsl:text>
+        <xsl:if test="position()!=last()">
+          <xsl:text>,</xsl:text>
+        </xsl:if>
+        <xsl:text>
+</xsl:text>
+      </xsl:if>
+    </xsl:for-each>
+    <xsl:text>    ],
+</xsl:text>
+    <xsl:text>    required_detachables: {
+</xsl:text>
+    <xsl:for-each select="$required_detachables">
+      <xsl:text>        "</xsl:text>
+      <xsl:value-of select="@id"/>
+      <xsl:text>": detachable_elements["</xsl:text>
+      <xsl:value-of select="@id"/>
+      <xsl:text>"]</xsl:text>
+      <xsl:if test="position()!=last()">
+        <xsl:text>,</xsl:text>
+      </xsl:if>
+      <xsl:text>
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:apply-templates mode="per_page_widget_template" select="$parsed_widgets/widget[@id = $all_page_widgets/@id]">
+      <xsl:with-param name="page_desc" select="$desc"/>
+    </xsl:apply-templates>
+    <xsl:text>  }</xsl:text>
+    <xsl:if test="position()!=last()">
+      <xsl:text>,</xsl:text>
+    </xsl:if>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <definitions:page-desc/>
+  <xsl:template match="definitions:page-desc">
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* </xsl:text>
+    <xsl:value-of select="local-name()"/>
+    <xsl:text> */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>var page_desc = {
+</xsl:text>
+    <xsl:apply-templates mode="page_desc" select="$hmi_pages"/>
+    <xsl:text>}
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="per_page_widget_template" match="*"/>
+  <debug:detachable-pages/>
+  <xsl:template match="debug:detachable-pages">
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* </xsl:text>
+    <xsl:value-of select="local-name()"/>
+    <xsl:text> */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>DETACHABLES:
+</xsl:text>
+    <xsl:for-each select="$detachable_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">
+      <xsl:text> </xsl:text>
+      <xsl:value-of select="."/>
+      <xsl:text>
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:template xmlns="http://www.w3.org/2000/svg" mode="inline_svg" match="@*">
+    <xsl:copy/>
+  </xsl:template>
+  <xsl:template mode="inline_svg" match="node()">
+    <xsl:if test="not(@id = $discardable_elements/@id)">
+      <xsl:copy>
+        <xsl:apply-templates mode="inline_svg" select="@* | node()"/>
+      </xsl:copy>
+    </xsl:if>
+  </xsl:template>
+  <xsl:template mode="inline_svg" match="svg:svg/@width"/>
+  <xsl:template mode="inline_svg" match="svg:svg/@height"/>
+  <xsl:template xmlns="http://www.w3.org/2000/svg" mode="inline_svg" match="svg:svg">
+    <svg>
+      <xsl:attribute name="preserveAspectRatio">
+        <xsl:text>none</xsl:text>
+      </xsl:attribute>
+      <xsl:attribute name="height">
+        <xsl:text>100vh</xsl:text>
+      </xsl:attribute>
+      <xsl:attribute name="width">
+        <xsl:text>100vw</xsl:text>
+      </xsl:attribute>
+      <xsl:apply-templates mode="inline_svg" select="@* | node()"/>
+    </svg>
+  </xsl:template>
+  <xsl:template mode="inline_svg" match="svg:svg[@viewBox!=concat('0 0 ', @width, ' ', @height)]">
+    <xsl:message terminate="yes">
+      <xsl:text>ViewBox settings other than X=0, Y=0 and Scale=1 are not supported</xsl:text>
+    </xsl:message>
+  </xsl:template>
+  <xsl:template mode="inline_svg" match="sodipodi:namedview[@units!='px' or @inkscape:document-units!='px']">
+    <xsl:message terminate="yes">
+      <xsl:text>All units must be set to "px" in Inkscape's document properties</xsl:text>
+    </xsl:message>
+  </xsl:template>
+  <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="targets_not_to_unlink" select="$hmi_lists/descendant-or-self::svg:*"/>
+  <xsl:variable name="to_unlink" select="$hmi_elements[not(@id = $hmi_pages/@id)]/descendant-or-self::svg:use"/>
+  <func:function name="func:is_unlinkable">
+    <xsl:param name="targetid"/>
+    <xsl:param name="eltid"/>
+    <func:result select="$eltid = $to_unlink/@id and not($targetid = $targets_not_to_unlink/@id)"/>
+  </func:function>
+  <xsl:template xmlns="http://www.w3.org/2000/svg" mode="inline_svg" match="svg:use">
+    <xsl:variable name="targetid" select="substring-after(@xlink:href,'#')"/>
+    <xsl:choose>
+      <xsl:when test="func:is_unlinkable($targetid, @id)">
+        <xsl:call-template name="unlink_clone">
+          <xsl:with-param name="targetid" select="$targetid"/>
+        </xsl:call-template>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:copy>
+          <xsl:apply-templates mode="inline_svg" select="@*"/>
+        </xsl:copy>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:template>
+  <xsl:variable name="_excluded_use_attrs">
+    <name>
+      <xsl:text>href</xsl:text>
+    </name>
+    <name>
+      <xsl:text>width</xsl:text>
+    </name>
+    <name>
+      <xsl:text>height</xsl:text>
+    </name>
+    <name>
+      <xsl:text>x</xsl:text>
+    </name>
+    <name>
+      <xsl:text>y</xsl:text>
+    </name>
+    <name>
+      <xsl:text>id</xsl:text>
+    </name>
+  </xsl:variable>
+  <xsl:variable name="excluded_use_attrs" select="exsl:node-set($_excluded_use_attrs)"/>
+  <xsl:variable name="_merge_use_attrs">
+    <name>
+      <xsl:text>transform</xsl:text>
+    </name>
+    <name>
+      <xsl:text>style</xsl:text>
+    </name>
+  </xsl:variable>
+  <xsl:variable name="merge_use_attrs" select="exsl:node-set($_merge_use_attrs)"/>
+  <xsl:template xmlns="http://www.w3.org/2000/svg" name="unlink_clone">
+    <xsl:param name="targetid"/>
+    <xsl:param name="seed" select="''"/>
+    <xsl:variable name="target" select="//svg:*[@id = $targetid]"/>
+    <xsl:variable name="seeded_id">
+      <xsl:choose>
+        <xsl:when test="string-length($seed) &gt; 0">
+          <xsl:value-of select="$seed"/>
+          <xsl:text>_</xsl:text>
+          <xsl:value-of select="@id"/>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:value-of select="@id"/>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:variable>
+    <g>
+      <xsl:attribute name="id">
+        <xsl:value-of select="$seeded_id"/>
+      </xsl:attribute>
+      <xsl:attribute name="original">
+        <xsl:value-of select="@id"/>
+      </xsl:attribute>
+      <xsl:choose>
+        <xsl:when test="$target[self::svg:g]">
+          <xsl:for-each select="@*[not(local-name() = $excluded_use_attrs/name | $merge_use_attrs)]">
+            <xsl:attribute name="{name()}">
+              <xsl:value-of select="."/>
+            </xsl:attribute>
+          </xsl:for-each>
+          <xsl:if test="@style | $target/@style">
+            <xsl:attribute name="style">
+              <xsl:value-of select="@style"/>
+              <xsl:if test="@style and $target/@style">
+                <xsl:text>;</xsl:text>
+              </xsl:if>
+              <xsl:value-of select="$target/@style"/>
+            </xsl:attribute>
+          </xsl:if>
+          <xsl:if test="@transform | $target/@transform">
+            <xsl:attribute name="transform">
+              <xsl:value-of select="@transform"/>
+              <xsl:if test="@transform and $target/@transform">
+                <xsl:text> </xsl:text>
+              </xsl:if>
+              <xsl:value-of select="$target/@transform"/>
+            </xsl:attribute>
+          </xsl:if>
+          <xsl:apply-templates mode="unlink_clone" select="$target/*">
+            <xsl:with-param name="seed" select="$seeded_id"/>
+          </xsl:apply-templates>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:for-each select="@*[not(local-name() = $excluded_use_attrs/name)]">
+            <xsl:attribute name="{name()}">
+              <xsl:value-of select="."/>
+            </xsl:attribute>
+          </xsl:for-each>
+          <xsl:apply-templates mode="unlink_clone" select="$target">
+            <xsl:with-param name="seed" select="$seeded_id"/>
+          </xsl:apply-templates>
+        </xsl:otherwise>
+      </xsl:choose>
+    </g>
+  </xsl:template>
+  <xsl:template xmlns="http://www.w3.org/2000/svg" mode="unlink_clone" match="@id">
+    <xsl:param name="seed"/>
+    <xsl:attribute name="id">
+      <xsl:value-of select="$seed"/>
+      <xsl:text>_</xsl:text>
+      <xsl:value-of select="."/>
+    </xsl:attribute>
+    <xsl:attribute name="original">
+      <xsl:value-of select="."/>
+    </xsl:attribute>
+  </xsl:template>
+  <xsl:template xmlns="http://www.w3.org/2000/svg" mode="unlink_clone" match="@*">
+    <xsl:copy/>
+  </xsl:template>
+  <xsl:template xmlns="http://www.w3.org/2000/svg" mode="unlink_clone" match="svg:use">
+    <xsl:param name="seed"/>
+    <xsl:variable name="targetid" select="substring-after(@xlink:href,'#')"/>
+    <xsl:choose>
+      <xsl:when test="func:is_unlinkable($targetid, @id)">
+        <xsl:call-template name="unlink_clone">
+          <xsl:with-param name="targetid" select="$targetid"/>
+          <xsl:with-param name="seed" select="$seed"/>
+        </xsl:call-template>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:copy>
+          <xsl:apply-templates mode="unlink_clone" select="@*">
+            <xsl:with-param name="seed" select="$seed"/>
+          </xsl:apply-templates>
+        </xsl:copy>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:template>
+  <xsl:template xmlns="http://www.w3.org/2000/svg" mode="unlink_clone" match="svg:*">
+    <xsl:param name="seed"/>
+    <xsl:choose>
+      <xsl:when test="@id = $hmi_elements/@id">
+        <use>
+          <xsl:attribute name="xlink:href">
+            <xsl:value-of select="concat('#',@id)"/>
+          </xsl:attribute>
+        </use>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:copy>
+          <xsl:apply-templates mode="unlink_clone" select="@* | node()">
+            <xsl:with-param name="seed" select="$seed"/>
+          </xsl:apply-templates>
+        </xsl:copy>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:template>
+  <xsl:variable name="result_svg">
+    <xsl:apply-templates mode="inline_svg" select="/"/>
+  </xsl:variable>
+  <xsl:variable name="result_svg_ns" select="exsl:node-set($result_svg)"/>
+  <preamble:inline-svg/>
+  <xsl:template match="preamble:inline-svg">
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* </xsl:text>
+    <xsl:value-of select="local-name()"/>
+    <xsl:text> */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>let id = document.getElementById.bind(document);
+</xsl:text>
+    <xsl:text>var svg_root = id("</xsl:text>
+    <xsl:value-of select="$svg/@id"/>
+    <xsl:text>");
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <debug:clone-unlinking/>
+  <xsl:template match="debug:clone-unlinking">
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* </xsl:text>
+    <xsl:value-of select="local-name()"/>
+    <xsl:text> */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>Unlinked :
+</xsl:text>
+    <xsl:for-each select="$to_unlink">
+      <xsl:value-of select="@id"/>
+      <xsl:text>
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>Not to unlink :
+</xsl:text>
+    <xsl:for-each select="$targets_not_to_unlink">
+      <xsl:value-of select="@id"/>
+      <xsl:text>
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="hmi_widgets" match="svg:*">
+    <xsl:variable name="widget" select="func:widget(@id)"/>
+    <xsl:variable name="eltid" select="@id"/>
+    <xsl:variable name="args">
+      <xsl:for-each select="$widget/arg">
+        <xsl:text>"</xsl:text>
+        <xsl:value-of select="func:escape_quotes(@value)"/>
+        <xsl:text>"</xsl:text>
+        <xsl:if test="position()!=last()">
+          <xsl:text>,</xsl:text>
+        </xsl:if>
+      </xsl:for-each>
+    </xsl:variable>
+    <xsl:variable name="indexes">
+      <xsl:for-each select="$widget/path">
+        <xsl:choose>
+          <xsl:when test="not(@index)">
+            <xsl:choose>
+              <xsl:when test="not(@type)">
+                <xsl:message terminate="no">
+                  <xsl:text>Widget </xsl:text>
+                  <xsl:value-of select="$widget/@type"/>
+                  <xsl:text> id="</xsl:text>
+                  <xsl:value-of select="$eltid"/>
+                  <xsl:text>" : No match for path "</xsl:text>
+                  <xsl:value-of select="@value"/>
+                  <xsl:text>" in HMI tree</xsl:text>
+                </xsl:message>
+                <xsl:text>undefined</xsl:text>
+                <xsl:if test="position()!=last()">
+                  <xsl:text>,</xsl:text>
+                </xsl:if>
+              </xsl:when>
+              <xsl:when test="@type = 'PAGE_LOCAL'">
+                <xsl:text>"</xsl:text>
+                <xsl:value-of select="@value"/>
+                <xsl:text>"</xsl:text>
+                <xsl:if test="position()!=last()">
+                  <xsl:text>,</xsl:text>
+                </xsl:if>
+              </xsl:when>
+              <xsl:when test="@type = 'HMI_LOCAL'">
+                <xsl:text>hmi_local_index("</xsl:text>
+                <xsl:value-of select="@value"/>
+                <xsl:text>")</xsl:text>
+                <xsl:if test="position()!=last()">
+                  <xsl:text>,</xsl:text>
+                </xsl:if>
+              </xsl:when>
+            </xsl:choose>
+          </xsl:when>
+          <xsl:otherwise>
+            <xsl:value-of select="@index"/>
+            <xsl:if test="position()!=last()">
+              <xsl:text>,</xsl:text>
+            </xsl:if>
+          </xsl:otherwise>
+        </xsl:choose>
+      </xsl:for-each>
+    </xsl:variable>
+    <xsl:text>  "</xsl:text>
+    <xsl:value-of select="@id"/>
+    <xsl:text>": new </xsl:text>
+    <xsl:value-of select="$widget/@type"/>
+    <xsl:text>Widget ("</xsl:text>
+    <xsl:value-of select="@id"/>
+    <xsl:text>",[</xsl:text>
+    <xsl:value-of select="$args"/>
+    <xsl:text>],[</xsl:text>
+    <xsl:value-of select="$indexes"/>
+    <xsl:text>],{
+</xsl:text>
+    <xsl:apply-templates mode="widget_defs" select="$widget">
+      <xsl:with-param name="hmi_element" select="."/>
+    </xsl:apply-templates>
+    <xsl:text>  })</xsl:text>
+    <xsl:if test="position()!=last()">
+      <xsl:text>,</xsl:text>
+    </xsl:if>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <func:function name="func:unique_types">
+    <xsl:param name="elts_with_type"/>
+    <xsl:choose>
+      <xsl:when test="count($elts_with_type) &gt; 1">
+        <xsl:variable name="prior_results" select="func:unique_types($elts_with_type[position()!=last()])"/>
+        <xsl:choose>
+          <xsl:when test="$elts_with_type[last()][@type = $prior_results/@type]">
+            <func:result select="$prior_results"/>
+          </xsl:when>
+          <xsl:otherwise>
+            <func:result select="$prior_results | $elts_with_type[last()]"/>
+          </xsl:otherwise>
+        </xsl:choose>
+      </xsl:when>
+      <xsl:otherwise>
+        <func:result select="$elts_with_type"/>
+      </xsl:otherwise>
+    </xsl:choose>
+  </func:function>
+  <preamble:local-variable-indexes/>
+  <xsl:template match="preamble:local-variable-indexes">
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* </xsl:text>
+    <xsl:value-of select="local-name()"/>
+    <xsl:text> */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>let hmi_locals = {};
+</xsl:text>
+    <xsl:text>var last_remote_index = hmitree_types.length - 1;
+</xsl:text>
+    <xsl:text>var next_available_index = hmitree_types.length;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>const local_defaults = {
+</xsl:text>
+    <xsl:for-each select="$parsed_widgets/widget[@type = 'VarInit']">
+      <xsl:if test="count(path) != 1">
+        <xsl:message terminate="yes">
+          <xsl:text>VarInit </xsl:text>
+          <xsl:value-of select="@id"/>
+          <xsl:text> must have only one variable given.</xsl:text>
+        </xsl:message>
+      </xsl:if>
+      <xsl:if test="path/@type != 'PAGE_LOCAL' and path/@type != 'HMI_LOCAL'">
+        <xsl:message terminate="yes">
+          <xsl:text>VarInit </xsl:text>
+          <xsl:value-of select="@id"/>
+          <xsl:text> only applies to HMI variable.</xsl:text>
+        </xsl:message>
+      </xsl:if>
+      <xsl:text>"</xsl:text>
+      <xsl:value-of select="path/@value"/>
+      <xsl:text>":</xsl:text>
+      <xsl:value-of select="arg[1]/@value"/>
+      <xsl:if test="position()!=last()">
+        <xsl:text>,</xsl:text>
+      </xsl:if>
+      <xsl:text>
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>};
+</xsl:text>
+    <xsl:text>var cache = hmitree_types.map(_ignored =&gt; undefined);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>function page_local_index(varname, pagename){
+</xsl:text>
+    <xsl:text>    let pagevars = hmi_locals[pagename];
+</xsl:text>
+    <xsl:text>    let new_index;
+</xsl:text>
+    <xsl:text>    if(pagevars == undefined){
+</xsl:text>
+    <xsl:text>        new_index = next_available_index++;
+</xsl:text>
+    <xsl:text>        hmi_locals[pagename] = {[varname]:new_index}
+</xsl:text>
+    <xsl:text>    } else {
+</xsl:text>
+    <xsl:text>        let result = pagevars[varname];
+</xsl:text>
+    <xsl:text>        if(result != undefined) {
+</xsl:text>
+    <xsl:text>            return result;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        new_index = next_available_index++;
+</xsl:text>
+    <xsl:text>        pagevars[varname] = new_index;
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>    let defaultval = local_defaults[varname];
+</xsl:text>
+    <xsl:text>    if(defaultval != undefined) 
+</xsl:text>
+    <xsl:text>        cache[new_index] = defaultval; 
+</xsl:text>
+    <xsl:text>    return new_index;
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>function hmi_local_index(varname){
+</xsl:text>
+    <xsl:text>    return page_local_index(varname, "HMI_LOCAL");
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <preamble:widget-base-class/>
+  <xsl:template match="preamble:widget-base-class">
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* </xsl:text>
+    <xsl:value-of select="local-name()"/>
+    <xsl:text> */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>var pending_widget_animates = [];
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>class Widget {
+</xsl:text>
+    <xsl:text>    offset = 0;
+</xsl:text>
+    <xsl:text>    frequency = 10; /* FIXME arbitrary default max freq. Obtain from config ? */
+</xsl:text>
+    <xsl:text>    unsubscribable = false;
+</xsl:text>
+    <xsl:text>    pending_animate = false;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    constructor(elt_id,args,indexes,members){
+</xsl:text>
+    <xsl:text>        this.element_id = elt_id;
+</xsl:text>
+    <xsl:text>        this.element = id(elt_id);
+</xsl:text>
+    <xsl:text>        this.args = args;
+</xsl:text>
+    <xsl:text>        this.indexes = indexes;
+</xsl:text>
+    <xsl:text>        Object.keys(members).forEach(prop =&gt; this[prop]=members[prop]);
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    unsub(){
+</xsl:text>
+    <xsl:text>        /* remove subsribers */
+</xsl:text>
+    <xsl:text>        if(!this.unsubscribable)
+</xsl:text>
+    <xsl:text>            for(let i = 0; i &lt; this.indexes.length; i++) {
+</xsl:text>
+    <xsl:text>                let index = this.indexes[i];
+</xsl:text>
+    <xsl:text>                if(this.relativeness[i])
+</xsl:text>
+    <xsl:text>                    index += this.offset;
+</xsl:text>
+    <xsl:text>                subscribers(index).delete(this);
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        this.offset = 0;
+</xsl:text>
+    <xsl:text>        this.relativeness = undefined;
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    sub(new_offset=0, relativeness, container_id){
+</xsl:text>
+    <xsl:text>        this.offset = new_offset;
+</xsl:text>
+    <xsl:text>        this.relativeness = relativeness;
+</xsl:text>
+    <xsl:text>        this.container_id = container_id ;
+</xsl:text>
+    <xsl:text>        /* add this's subsribers */
+</xsl:text>
+    <xsl:text>        if(!this.unsubscribable)
+</xsl:text>
+    <xsl:text>            for(let i = 0; i &lt; this.indexes.length; i++) {
+</xsl:text>
+    <xsl:text>                let index = this.get_variable_index(i);
+</xsl:text>
+    <xsl:text>                if(index == undefined) continue;
+</xsl:text>
+    <xsl:text>                subscribers(index).add(this);
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        need_cache_apply.push(this); 
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    apply_cache() {
+</xsl:text>
+    <xsl:text>        if(!this.unsubscribable) for(let index in this.indexes){
+</xsl:text>
+    <xsl:text>            /* dispatch current cache in newly opened page widgets */
+</xsl:text>
+    <xsl:text>            let realindex = this.get_variable_index(index);
+</xsl:text>
+    <xsl:text>            if(realindex == undefined) continue;
+</xsl:text>
+    <xsl:text>            let cached_val = cache[realindex];
+</xsl:text>
+    <xsl:text>            if(cached_val != undefined)
+</xsl:text>
+    <xsl:text>                this._dispatch(cached_val, cached_val, index);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    get_variable_index(varnum) {
+</xsl:text>
+    <xsl:text>        let index = this.indexes[varnum];
+</xsl:text>
+    <xsl:text>        if(typeof(index) == "string"){
+</xsl:text>
+    <xsl:text>            index = page_local_index(index, this.container_id);
+</xsl:text>
+    <xsl:text>        } else {
+</xsl:text>
+    <xsl:text>            if(this.relativeness[varnum]){
+</xsl:text>
+    <xsl:text>                index += this.offset;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        return index;
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>    change_hmi_value(index, opstr) {
+</xsl:text>
+    <xsl:text>        let realindex = this.get_variable_index(index);
+</xsl:text>
+    <xsl:text>        if(realindex == undefined) return undefined;
+</xsl:text>
+    <xsl:text>        return change_hmi_value(realindex, opstr);
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    apply_hmi_value(index, new_val) {
+</xsl:text>
+    <xsl:text>        let realindex = this.get_variable_index(index);
+</xsl:text>
+    <xsl:text>        if(realindex == undefined) return undefined;
+</xsl:text>
+    <xsl:text>        return apply_hmi_value(realindex, new_val);
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    new_hmi_value(index, value, oldval) {
+</xsl:text>
+    <xsl:text>        // TODO avoid searching, store index at sub()
+</xsl:text>
+    <xsl:text>        for(let i = 0; i &lt; this.indexes.length; i++) {
+</xsl:text>
+    <xsl:text>            let refindex = this.get_variable_index(i);
+</xsl:text>
+    <xsl:text>            if(refindex == undefined) continue;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            if(index == refindex) {
+</xsl:text>
+    <xsl:text>                this._dispatch(value, oldval, i);
+</xsl:text>
+    <xsl:text>                break;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>    
+</xsl:text>
+    <xsl:text>    _dispatch(value, oldval, varnum) {
+</xsl:text>
+    <xsl:text>        let dispatch = this.dispatch;
+</xsl:text>
+    <xsl:text>        if(dispatch != undefined){
+</xsl:text>
+    <xsl:text>            try {
+</xsl:text>
+    <xsl:text>                dispatch.call(this, value, oldval, varnum);
+</xsl:text>
+    <xsl:text>            } catch(err) {
+</xsl:text>
+    <xsl:text>                console.log(err);
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    _animate(){
+</xsl:text>
+    <xsl:text>        this.animate();
+</xsl:text>
+    <xsl:text>        this.pending_animate = false;
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    request_animate(){
+</xsl:text>
+    <xsl:text>        if(!this.pending_animate){
+</xsl:text>
+    <xsl:text>            pending_widget_animates.push(this);
+</xsl:text>
+    <xsl:text>            this.pending_animate = true;
+</xsl:text>
+    <xsl:text>            requestHMIAnimation();
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <declarations:hmi-classes/>
+  <xsl:template match="declarations:hmi-classes">
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* </xsl:text>
+    <xsl:value-of select="local-name()"/>
+    <xsl:text> */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:variable name="used_widget_types" select="func:unique_types($parsed_widgets/widget)"/>
+    <xsl:apply-templates mode="widget_class" select="$used_widget_types"/>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_class" match="widget">
+    <xsl:text>class </xsl:text>
+    <xsl:value-of select="@type"/>
+    <xsl:text>Widget extends Widget{
+</xsl:text>
+    <xsl:text>    /* empty class, as </xsl:text>
+    <xsl:value-of select="@type"/>
+    <xsl:text> widget didn't provide any */
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+  </xsl:template>
+  <xsl:variable name="excluded_types" select="str:split('Page Lang VarInit')"/>
+  <xsl:variable name="included_ids" select="$parsed_widgets/widget[not(@type = $excluded_types)]/@id"/>
+  <declarations:hmi-elements/>
+  <xsl:template match="declarations:hmi-elements">
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* </xsl:text>
+    <xsl:value-of select="local-name()"/>
+    <xsl:text> */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>var hmi_widgets = {
+</xsl:text>
+    <xsl:apply-templates mode="hmi_widgets" select="$hmi_elements[@id = $included_ids]"/>
+    <xsl:text>}
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:template name="defs_by_labels">
+    <xsl:param name="labels" select="''"/>
+    <xsl:param name="mandatory" select="'yes'"/>
+    <xsl:param name="subelements" select="/.."/>
+    <xsl:param name="hmi_element"/>
+    <xsl:variable name="widget_type" select="@type"/>
+    <xsl:for-each select="str:split($labels)">
+      <xsl:variable name="name" select="."/>
+      <xsl:variable name="elt" select="$result_svg_ns//*[@id = $hmi_element/@id]//*[@inkscape:label=$name][1]"/>
+      <xsl:choose>
+        <xsl:when test="not($elt/@id)">
+          <xsl:if test="$mandatory='yes'">
+            <xsl:message terminate="yes">
+              <xsl:value-of select="$widget_type"/>
+              <xsl:text> widget must have a </xsl:text>
+              <xsl:value-of select="$name"/>
+              <xsl:text> element</xsl:text>
+            </xsl:message>
+          </xsl:if>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:text>    </xsl:text>
+          <xsl:value-of select="$name"/>
+          <xsl:text>_elt: id("</xsl:text>
+          <xsl:value-of select="$elt/@id"/>
+          <xsl:text>"),
+</xsl:text>
+          <xsl:if test="$subelements">
+            <xsl:text>    </xsl:text>
+            <xsl:value-of select="$name"/>
+            <xsl:text>_sub: {
+</xsl:text>
+            <xsl:for-each select="str:split($subelements)">
+              <xsl:variable name="subname" select="."/>
+              <xsl:variable name="subelt" select="$elt/*[@inkscape:label=$subname][1]"/>
+              <xsl:choose>
+                <xsl:when test="not($subelt/@id)">
+                  <xsl:if test="$mandatory='yes'">
+                    <xsl:message terminate="yes">
+                      <xsl:value-of select="$widget_type"/>
+                      <xsl:text> widget must have a </xsl:text>
+                      <xsl:value-of select="$name"/>
+                      <xsl:text>/</xsl:text>
+                      <xsl:value-of select="$subname"/>
+                      <xsl:text> element</xsl:text>
+                    </xsl:message>
+                  </xsl:if>
+                  <xsl:text>        /* missing </xsl:text>
+                  <xsl:value-of select="$name"/>
+                  <xsl:text>/</xsl:text>
+                  <xsl:value-of select="$subname"/>
+                  <xsl:text> element */
+</xsl:text>
+                </xsl:when>
+                <xsl:otherwise>
+                  <xsl:text>        "</xsl:text>
+                  <xsl:value-of select="$subname"/>
+                  <xsl:text>": id("</xsl:text>
+                  <xsl:value-of select="$subelt/@id"/>
+                  <xsl:text>")</xsl:text>
+                  <xsl:if test="position()!=last()">
+                    <xsl:text>,</xsl:text>
+                  </xsl:if>
+                  <xsl:text>
+</xsl:text>
+                </xsl:otherwise>
+              </xsl:choose>
+            </xsl:for-each>
+            <xsl:text>    },
+</xsl:text>
+          </xsl:if>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:for-each>
+  </xsl:template>
+  <func:function name="func:escape_quotes">
+    <xsl:param name="txt"/>
+    <xsl:choose>
+      <xsl:when test="contains($txt,'&quot;')">
+        <func:result select="concat(substring-before($txt,'&quot;'),'\&quot;',func:escape_quotes(substring-after($txt,'&quot;')))"/>
+      </xsl:when>
+      <xsl:otherwise>
+        <func:result select="$txt"/>
+      </xsl:otherwise>
+    </xsl:choose>
+  </func:function>
+  <xsl:template mode="widget_class" match="widget[@type='Animate']">
+    <xsl:text>class AnimateWidget extends Widget{
+</xsl:text>
+    <xsl:text>    frequency = 5;
+</xsl:text>
+    <xsl:text>    speed = 0;
+</xsl:text>
+    <xsl:text>    start = false;
+</xsl:text>
+    <xsl:text>    widget_center = undefined;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    dispatch(value) {
+</xsl:text>
+    <xsl:text>        this.speed = value / 5;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //reconfigure animation
+</xsl:text>
+    <xsl:text>        this.request_animate();
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    animate(){
+</xsl:text>
+    <xsl:text>       // change animation properties
+</xsl:text>
+    <xsl:text>       for(let child of this.element.children){
+</xsl:text>
+    <xsl:text>            if(child.nodeName.startsWith("animate")){
+</xsl:text>
+    <xsl:text>                if(this.speed != 0 &amp;&amp; !this.start){
+</xsl:text>
+    <xsl:text>                    this.start = true;
+</xsl:text>
+    <xsl:text>                    this.element.beginElement();
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                if(this.speed &gt; 0){
+</xsl:text>
+    <xsl:text>                    child.setAttribute("dur", this.speed+"s");
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                else if(this.speed &lt; 0){
+</xsl:text>
+    <xsl:text>                    child.setAttribute("dur", (-1)*this.speed+"s");
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                else{
+</xsl:text>
+    <xsl:text>                    this.start = false;
+</xsl:text>
+    <xsl:text>                    this.element.endElement();
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>       }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    init() {
+</xsl:text>
+    <xsl:text>        let widget_pos = this.element.getBBox();
+</xsl:text>
+    <xsl:text>        this.widget_center = [(widget_pos.x+widget_pos.width/2), (widget_pos.y+widget_pos.height/2)];
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='Animate']">
+    <xsl:param name="hmi_element"/>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_class" match="widget[@type='AnimateRotation']">
+    <xsl:text>class AnimateRotationWidget extends Widget{
+</xsl:text>
+    <xsl:text>    frequency = 5;
+</xsl:text>
+    <xsl:text>    speed = 0;
+</xsl:text>
+    <xsl:text>    widget_center = undefined;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    dispatch(value) {
+</xsl:text>
+    <xsl:text>        this.speed = value / 5;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //reconfigure animation
+</xsl:text>
+    <xsl:text>        this.request_animate();
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    animate(){
+</xsl:text>
+    <xsl:text>       // change animation properties
+</xsl:text>
+    <xsl:text>       for(let child of this.element.children){
+</xsl:text>
+    <xsl:text>            if(child.nodeName == "animateTransform"){
+</xsl:text>
+    <xsl:text>                if(this.speed &gt; 0){
+</xsl:text>
+    <xsl:text>                    child.setAttribute("dur", this.speed+"s");
+</xsl:text>
+    <xsl:text>                    child.setAttribute("from", "0 "+this.widget_center[0]+" "+this.widget_center[1]);
+</xsl:text>
+    <xsl:text>                    child.setAttribute("to", "360 "+this.widget_center[0]+" "+this.widget_center[1]);
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                else if(this.speed &lt; 0){
+</xsl:text>
+    <xsl:text>                    child.setAttribute("dur", (-1)*this.speed+"s");
+</xsl:text>
+    <xsl:text>                    child.setAttribute("from", "360 "+this.widget_center[0]+" "+this.widget_center[1]);
+</xsl:text>
+    <xsl:text>                    child.setAttribute("to", "0 "+this.widget_center[0]+" "+this.widget_center[1]);
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                else{
+</xsl:text>
+    <xsl:text>                    child.setAttribute("from", "0 "+this.widget_center[0]+" "+this.widget_center[1]);
+</xsl:text>
+    <xsl:text>                    child.setAttribute("to", "0 "+this.widget_center[0]+" "+this.widget_center[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>    init() {
+</xsl:text>
+    <xsl:text>        let widget_pos = this.element.getBBox();
+</xsl:text>
+    <xsl:text>        this.widget_center = [(widget_pos.x+widget_pos.width/2), (widget_pos.y+widget_pos.height/2)];
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='AnimateRotation']">
+    <xsl:param name="hmi_element"/>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_class" match="widget[@type='Back']">
+    <xsl:text>class BackWidget extends Widget{
+</xsl:text>
+    <xsl:text>    on_click(evt) {
+</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>
+    <xsl:text>           switch_page(page_name, index);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>    init() {
+</xsl:text>
+    <xsl:text>        this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+  </xsl:template>
+  <xsl:variable name="_button_fsm">
+    <fsm>
+      <state name="init">
+        <on-dispatch value="false">
+          <jump state="released"/>
+        </on-dispatch>
+        <on-dispatch value="true">
+          <jump state="pressed"/>
+        </on-dispatch>
+      </state>
+      <state name="pressing">
+        <hmi-value value="true"/>
+        <on-dispatch value="true">
+          <jump state="pressed"/>
+        </on-dispatch>
+        <on-mouse position="up">
+          <jump state="shortpress"/>
+        </on-mouse>
+      </state>
+      <state name="pressed">
+        <show eltname="active"/>
+        <on-mouse position="up">
+          <jump state="releasing"/>
+        </on-mouse>
+        <on-dispatch value="false">
+          <jump state="released"/>
+        </on-dispatch>
+      </state>
+      <state name="shortpress">
+        <on-dispatch value="true">
+          <jump state="releasing"/>
+        </on-dispatch>
+        <on-mouse position="down">
+          <jump state="pressing"/>
+        </on-mouse>
+      </state>
+      <state name="releasing">
+        <hmi-value value="false"/>
+        <on-dispatch value="false">
+          <jump state="released"/>
+        </on-dispatch>
+        <on-mouse position="down">
+          <jump state="shortrelease"/>
+        </on-mouse>
+      </state>
+      <state name="released">
+        <show eltname="inactive"/>
+        <on-mouse position="down">
+          <jump state="pressing"/>
+        </on-mouse>
+        <on-dispatch value="true">
+          <jump state="pressed"/>
+        </on-dispatch>
+      </state>
+      <state name="shortrelease">
+        <on-dispatch value="false">
+          <jump state="pressing"/>
+        </on-dispatch>
+        <on-mouse position="up">
+          <jump state="releasing"/>
+        </on-mouse>
+      </state>
+    </fsm>
+  </xsl:variable>
+  <xsl:template mode="dispatch_transition" match="fsm">
+    <xsl:text>        switch (this.state) {
+</xsl:text>
+    <xsl:apply-templates mode="dispatch_transition" select="state"/>
+    <xsl:text>        }
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="dispatch_transition" match="state">
+    <xsl:text>          case "</xsl:text>
+    <xsl:value-of select="@name"/>
+    <xsl:text>":
+</xsl:text>
+    <xsl:apply-templates select="on-dispatch"/>
+    <xsl:text>            break;
+</xsl:text>
+  </xsl:template>
+  <xsl:template match="on-dispatch">
+    <xsl:text>            if(value ==  </xsl:text>
+    <xsl:value-of select="@value"/>
+    <xsl:text>) {
+</xsl:text>
+    <xsl:apply-templates mode="transition" select="jump"/>
+    <xsl:text>            }
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="mouse_transition" match="fsm">
+    <xsl:param name="position"/>
+    <xsl:text>        switch (this.state) {
+</xsl:text>
+    <xsl:apply-templates mode="mouse_transition" select="state">
+      <xsl:with-param name="position" select="$position"/>
+    </xsl:apply-templates>
+    <xsl:text>        }
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="mouse_transition" match="state">
+    <xsl:param name="position"/>
+    <xsl:text>          case "</xsl:text>
+    <xsl:value-of select="@name"/>
+    <xsl:text>":
+</xsl:text>
+    <xsl:apply-templates select="on-mouse[@position = $position]"/>
+    <xsl:text>            break;
+</xsl:text>
+  </xsl:template>
+  <xsl:template match="on-mouse">
+    <xsl:apply-templates mode="transition" select="jump"/>
+  </xsl:template>
+  <xsl:template mode="transition" match="jump">
+    <xsl:text>            this.state = "</xsl:text>
+    <xsl:value-of select="@state"/>
+    <xsl:text>";
+</xsl:text>
+    <xsl:text>            this.</xsl:text>
+    <xsl:value-of select="@state"/>
+    <xsl:text>_action();
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="actions" match="fsm">
+    <xsl:apply-templates mode="actions" select="state"/>
+  </xsl:template>
+  <xsl:template mode="actions" match="state">
+    <xsl:text>    </xsl:text>
+    <xsl:value-of select="@name"/>
+    <xsl:text>_action(){
+</xsl:text>
+    <xsl:apply-templates mode="actions" select="*"/>
+    <xsl:text>    }
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="actions" match="show">
+    <xsl:text>        this.display = "</xsl:text>
+    <xsl:value-of select="@eltname"/>
+    <xsl:text>";
+</xsl:text>
+    <xsl:text>        this.request_animate();
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="actions" match="hmi-value">
+    <xsl:text>        this.apply_hmi_value(0, </xsl:text>
+    <xsl:value-of select="@value"/>
+    <xsl:text>);
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_class" match="widget[@type='Button']">
+    <xsl:variable name="fsm" select="exsl:node-set($_button_fsm)"/>
+    <xsl:text>class ButtonWidget extends Widget{
+</xsl:text>
+    <xsl:text>    frequency = 5;
+</xsl:text>
+    <xsl:text>    display = "inactive";
+</xsl:text>
+    <xsl:text>    state = "init";
+</xsl:text>
+    <xsl:text>    dispatch(value) {
+</xsl:text>
+    <xsl:apply-templates mode="dispatch_transition" select="$fsm"/>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>    onmouseup(evt) {
+</xsl:text>
+    <xsl:text>        svg_root.removeEventListener("pointerup", this.bound_onmouseup, true);
+</xsl:text>
+    <xsl:apply-templates mode="mouse_transition" select="$fsm">
+      <xsl:with-param name="position" select="'up'"/>
+    </xsl:apply-templates>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>    onmousedown(evt) {
+</xsl:text>
+    <xsl:text>        svg_root.addEventListener("pointerup", this.bound_onmouseup, true);
+</xsl:text>
+    <xsl:apply-templates mode="mouse_transition" select="$fsm">
+      <xsl:with-param name="position" select="'down'"/>
+    </xsl:apply-templates>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:apply-templates mode="actions" select="$fsm"/>
+    <xsl:text>    animate(){
+</xsl:text>
+    <xsl:text>        if (this.active_elt &amp;&amp; this.inactive_elt) {
+</xsl:text>
+    <xsl:for-each select="str:split('active inactive')">
+      <xsl:text>            if(this.display == "</xsl:text>
+      <xsl:value-of select="."/>
+      <xsl:text>")
+</xsl:text>
+      <xsl:text>                this.</xsl:text>
+      <xsl:value-of select="."/>
+      <xsl:text>_elt.style.display = "";
+</xsl:text>
+      <xsl:text>            else
+</xsl:text>
+      <xsl:text>                this.</xsl:text>
+      <xsl:value-of select="."/>
+      <xsl:text>_elt.style.display = "none";
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>    init() {
+</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>}
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='Button']">
+    <xsl:param name="hmi_element"/>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>active inactive</xsl:text>
+      </xsl:with-param>
+      <xsl:with-param name="mandatory" select="'no'"/>
+    </xsl:call-template>
+  </xsl:template>
+  <xsl:template mode="widget_class" match="widget[@type='CircularBar']">
+    <xsl:text>class CircularBarWidget extends Widget{
+</xsl:text>
+    <xsl:text>    frequency = 10;
+</xsl:text>
+    <xsl:text>    range = undefined;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    dispatch(value) {
+</xsl:text>
+    <xsl:text>        if(this.value_elt)
+</xsl:text>
+    <xsl:text>            this.value_elt.textContent = String(value);
+</xsl:text>
+    <xsl:text>        let [min,max,start,end] = this.range;
+</xsl:text>
+    <xsl:text>        let [cx,cy] = this.center;
+</xsl:text>
+    <xsl:text>        let [rx,ry] = this.proportions;
+</xsl:text>
+    <xsl:text>        let tip = start + (end-start)*Number(value)/(max-min);
+</xsl:text>
+    <xsl:text>        let size = 0;
+</xsl:text>
+    <xsl:text>        if (tip-start &gt; Math.PI) {
+</xsl:text>
+    <xsl:text>            size = 1;
+</xsl:text>
+    <xsl:text>        } else {
+</xsl:text>
+    <xsl:text>            size = 0;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        this.path_elt.setAttribute('d', "M "+(cx+rx*Math.cos(start))+","+(cy+ry*Math.sin(start))+" A "+rx+","+ry+" 0 "+size+" 1 "+(cx+rx*Math.cos(tip))+","+(cy+ry*Math.sin(tip)));
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    init() {
+</xsl:text>
+    <xsl:text>        let start = Number(this.path_elt.getAttribute('sodipodi:start'));
+</xsl:text>
+    <xsl:text>        let end = Number(this.path_elt.getAttribute('sodipodi:end'));
+</xsl:text>
+    <xsl:text>        let cx = Number(this.path_elt.getAttribute('sodipodi:cx'));
+</xsl:text>
+    <xsl:text>        let cy = Number(this.path_elt.getAttribute('sodipodi:cy'));
+</xsl:text>
+    <xsl:text>        let rx = Number(this.path_elt.getAttribute('sodipodi:rx'));
+</xsl:text>
+    <xsl:text>        let ry = Number(this.path_elt.getAttribute('sodipodi:ry'));
+</xsl:text>
+    <xsl:text>        if (ry == 0) {
+</xsl:text>
+    <xsl:text>            ry = rx;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        if (start &gt; end) {
+</xsl:text>
+    <xsl:text>            end = end + 2*Math.PI;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        let min = this.min_elt ?
+</xsl:text>
+    <xsl:text>                  Number(this.min_elt.textContent) :
+</xsl:text>
+    <xsl:text>                  this.args.length &gt;= 1 ? this.args[0] : 0;
+</xsl:text>
+    <xsl:text>        let max = this.max_elt ?
+</xsl:text>
+    <xsl:text>                  Number(this.max_elt.textContent) :
+</xsl:text>
+    <xsl:text>                  this.args.length &gt;= 2 ? this.args[1] : 100;
+</xsl:text>
+    <xsl:text>        this.range = [min, max, start, end];
+</xsl:text>
+    <xsl:text>        this.center = [cx, cy];
+</xsl:text>
+    <xsl:text>        this.proportions = [rx, ry];
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='CircularBar']">
+    <xsl:param name="hmi_element"/>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>path</xsl:text>
+      </xsl:with-param>
+    </xsl:call-template>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>value min max</xsl:text>
+      </xsl:with-param>
+      <xsl:with-param name="mandatory" select="'no'"/>
+    </xsl:call-template>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_class" match="widget[@type='CircularSlider']">
+    <xsl:text>class CircularSliderWidget extends Widget{
+</xsl:text>
+    <xsl:text>    frequency = 5;
+</xsl:text>
+    <xsl:text>    range = undefined;
+</xsl:text>
+    <xsl:text>    circle = undefined;
+</xsl:text>
+    <xsl:text>    handle_pos = undefined;
+</xsl:text>
+    <xsl:text>    curr_value = 0;
+</xsl:text>
+    <xsl:text>    drag = false;
+</xsl:text>
+    <xsl:text>    enTimer = false;
+</xsl:text>
+    <xsl:text>    last_drag = false;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    dispatch(value) {
+</xsl:text>
+    <xsl:text>        let [min,max,start,totallength] = this.range;
+</xsl:text>
+    <xsl:text>        //save current value inside widget
+</xsl:text>
+    <xsl:text>        this.curr_value = value;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //check if in range
+</xsl:text>
+    <xsl:text>        if (this.curr_value &gt; max){
+</xsl:text>
+    <xsl:text>            this.curr_value = max;
+</xsl:text>
+    <xsl:text>            this.apply_hmi_value(0, this.curr_value);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        else if (this.curr_value &lt; min){
+</xsl:text>
+    <xsl:text>            this.curr_value = min;
+</xsl:text>
+    <xsl:text>            this.apply_hmi_value(0, this.curr_value);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        if(this.value_elt)
+</xsl:text>
+    <xsl:text>            this.value_elt.textContent = String(value);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //don't update if draging and setpoint ghost doesn't exist
+</xsl:text>
+    <xsl:text>        if(!this.drag || (this.setpoint_elt != undefined)){
+</xsl:text>
+    <xsl:text>            this.update_DOM(value, this.handle_elt);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    update_DOM(value, elt){
+</xsl:text>
+    <xsl:text>        let [min,max,totalDistance] = this.range;
+</xsl:text>
+    <xsl:text>        let length = Math.max(0,Math.min((totalDistance),(Number(value)-min)/(max-min)*(totalDistance)));
+</xsl:text>
+    <xsl:text>        let tip = this.range_elt.getPointAtLength(length);
+</xsl:text>
+    <xsl:text>        elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")");
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // show or hide ghost if exists
+</xsl:text>
+    <xsl:text>        if(this.setpoint_elt != undefined){
+</xsl:text>
+    <xsl:text>            if(this.last_drag!= this.drag){
+</xsl:text>
+    <xsl:text>                if(this.drag){
+</xsl:text>
+    <xsl:text>                    this.setpoint_elt.setAttribute("style", this.setpoint_style);
+</xsl:text>
+    <xsl:text>                }else{
+</xsl:text>
+    <xsl:text>                    this.setpoint_elt.setAttribute("style", "display:none");
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                this.last_drag = this.drag;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    on_release(evt) {
+</xsl:text>
+    <xsl:text>        //unbind events
+</xsl:text>
+    <xsl:text>        window.removeEventListener("touchmove", this.on_bound_drag, true);
+</xsl:text>
+    <xsl:text>        window.removeEventListener("mousemove", this.on_bound_drag, true);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        window.removeEventListener("mouseup", this.bound_on_release, true)
+</xsl:text>
+    <xsl:text>        window.removeEventListener("touchend", this.bound_on_release, true);
+</xsl:text>
+    <xsl:text>        window.removeEventListener("touchcancel", this.bound_on_release, true);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //reset drag flag
+</xsl:text>
+    <xsl:text>        if(this.drag){
+</xsl:text>
+    <xsl:text>            this.drag = false;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // get final position
+</xsl:text>
+    <xsl:text>        this.update_position(evt);
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    on_drag(evt){
+</xsl:text>
+    <xsl:text>        //ignore drag event for X amount of time and if not selected
+</xsl:text>
+    <xsl:text>        if(this.enTimer &amp;&amp; this.drag){
+</xsl:text>
+    <xsl:text>            this.update_position(evt);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            //reset timer
+</xsl:text>
+    <xsl:text>            this.enTimer = false;
+</xsl:text>
+    <xsl:text>            setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    update_position(evt){
+</xsl:text>
+    <xsl:text>        if(this.drag &amp;&amp; this.enTimer){
+</xsl:text>
+    <xsl:text>            var svg_dist = 0;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            //calculate center of widget in html
+</xsl:text>
+    <xsl:text>            // --TODO maybe it would be better to bind this part to window change size event ???
+</xsl:text>
+    <xsl:text>            let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox;
+</xsl:text>
+    <xsl:text>            let [cX, cY,fiStart,fiEnd,minMax,x1,y1,width,height] = this.circle;
+</xsl:text>
+    <xsl:text>            let htmlCirc = this.range_elt.getBoundingClientRect();
+</xsl:text>
+    <xsl:text>            let cxHtml = ((htmlCirc.right-htmlCirc.left)/(width)*(cX-x1))+htmlCirc.left;
+</xsl:text>
+    <xsl:text>            let cyHtml = ((htmlCirc.bottom-htmlCirc.top)/(height)*(cY-y1))+htmlCirc.top;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            //get mouse coordinates
+</xsl:text>
+    <xsl:text>            let mouseX = undefined;
+</xsl:text>
+    <xsl:text>            let mouseY = undefined;
+</xsl:text>
+    <xsl:text>            if (evt.type.startsWith("touch")){
+</xsl:text>
+    <xsl:text>                mouseX = Math.ceil(evt.touches[0].clientX);
+</xsl:text>
+    <xsl:text>                mouseY = Math.ceil(evt.touches[0].clientY);
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            else{
+</xsl:text>
+    <xsl:text>                mouseX = evt.pageX;
+</xsl:text>
+    <xsl:text>                mouseY = evt.pageY;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            //calculate angle
+</xsl:text>
+    <xsl:text>            let fi = Math.atan2(cyHtml-mouseY, mouseX-cxHtml);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            // transform from 0 to 2PI
+</xsl:text>
+    <xsl:text>            if (fi &gt; 0){
+</xsl:text>
+    <xsl:text>                fi = 2*Math.PI-fi;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            else{
+</xsl:text>
+    <xsl:text>                fi = -fi;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            //offset it to 0
+</xsl:text>
+    <xsl:text>            fi = fi - fiStart;
+</xsl:text>
+    <xsl:text>            if (fi &lt; 0){
+</xsl:text>
+    <xsl:text>                fi = fi + 2*Math.PI;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            //get handle distance from mouse position
+</xsl:text>
+    <xsl:text>            if(fi&lt;fiEnd){
+</xsl:text>
+    <xsl:text>               this.curr_value=(fi)/(fiEnd)*(this.range[1]-this.range[0]);
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            else if(fiEnd&lt;fi &amp;&amp; fi&lt;fiEnd+minMax){
+</xsl:text>
+    <xsl:text>                this.curr_value = this.range[1];
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            else{
+</xsl:text>
+    <xsl:text>                this.curr_value = this.range[0];
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            //apply value to hmi
+</xsl:text>
+    <xsl:text>            this.apply_hmi_value(0, Math.ceil(this.curr_value));
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            //redraw handle
+</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:text>
+</xsl:text>
+    <xsl:text>    animate(){
+</xsl:text>
+    <xsl:text>        // redraw handle on screen refresh
+</xsl:text>
+    <xsl:text>        // check if setpoint(ghost) handle exsist otherwise update main handle
+</xsl:text>
+    <xsl:text>        if(this.setpoint_elt != undefined){
+</xsl:text>
+    <xsl:text>            this.update_DOM(this.curr_value, this.setpoint_elt);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        else{
+</xsl:text>
+    <xsl:text>            this.update_DOM(this.curr_value, this.handle_elt);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    on_select(evt){
+</xsl:text>
+    <xsl:text>        //enable drag flag and timer
+</xsl:text>
+    <xsl:text>        this.drag = true;
+</xsl:text>
+    <xsl:text>        this.enTimer = true;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //bind events
+</xsl:text>
+    <xsl:text>        window.addEventListener("touchmove", this.on_bound_drag, true);
+</xsl:text>
+    <xsl:text>        window.addEventListener("mousemove", this.on_bound_drag, true);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        window.addEventListener("mouseup", this.bound_on_release, true);
+</xsl:text>
+    <xsl:text>        window.addEventListener("touchend", this.bound_on_release, true);
+</xsl:text>
+    <xsl:text>        window.addEventListener("touchcancel", this.bound_on_release, true);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //update postion on mouse press
+</xsl:text>
+    <xsl:text>        this.update_position(evt);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //prevent next events
+</xsl:text>
+    <xsl:text>        evt.stopPropagation();
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    init() {
+</xsl:text>
+    <xsl:text>        //get min max
+</xsl:text>
+    <xsl:text>        let min = this.min_elt ?
+</xsl:text>
+    <xsl:text>                    Number(this.min_elt.textContent) :
+</xsl:text>
+    <xsl:text>                    this.args.length &gt;= 1 ? this.args[0] : 0;
+</xsl:text>
+    <xsl:text>        let max = this.max_elt ?
+</xsl:text>
+    <xsl:text>                    Number(this.max_elt.textContent) :
+</xsl:text>
+    <xsl:text>                    this.args.length &gt;= 2 ? this.args[1] : 100;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //fiStart ==&gt; offset
+</xsl:text>
+    <xsl:text>        let fiStart = Number(this.range_elt.getAttribute('sodipodi:start'));
+</xsl:text>
+    <xsl:text>        let fiEnd = Number(this.range_elt.getAttribute('sodipodi:end'));
+</xsl:text>
+    <xsl:text>        fiEnd = fiEnd - fiStart;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //fiEnd ==&gt; size of angle
+</xsl:text>
+    <xsl:text>        if (fiEnd &lt; 0){
+</xsl:text>
+    <xsl:text>            fiEnd = 2*Math.PI + fiEnd;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //min max barrier angle
+</xsl:text>
+    <xsl:text>        let minMax = (2*Math.PI - fiEnd)/2;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //get parameters from svg
+</xsl:text>
+    <xsl:text>        let cX = Number(this.range_elt.getAttribute('sodipodi:cx'));
+</xsl:text>
+    <xsl:text>        let cY = Number(this.range_elt.getAttribute('sodipodi:cy'));
+</xsl:text>
+    <xsl:text>        this.range_elt.style.strokeMiterlimit="0"; //eliminates some weird border around html object
+</xsl:text>
+    <xsl:text>        this.range = [min, max,this.range_elt.getTotalLength()];
+</xsl:text>
+    <xsl:text>        let cPos = this.range_elt.getBBox();
+</xsl:text>
+    <xsl:text>        this.handle_pos = this.range_elt.getPointAtLength(0);
+</xsl:text>
+    <xsl:text>        this.circle = [cX, cY,fiStart,fiEnd,minMax,cPos.x,cPos.y,cPos.width,cPos.height];
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //bind functions
+</xsl:text>
+    <xsl:text>        this.bound_on_select = this.on_select.bind(this);
+</xsl:text>
+    <xsl:text>        this.bound_on_release = this.on_release.bind(this);
+</xsl:text>
+    <xsl:text>        this.on_bound_drag = this.on_drag.bind(this);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        this.handle_elt.addEventListener("mousedown", this.bound_on_select);
+</xsl:text>
+    <xsl:text>        this.element.addEventListener("mousedown", this.bound_on_select);
+</xsl:text>
+    <xsl:text>        this.element.addEventListener("touchstart", this.bound_on_select);
+</xsl:text>
+    <xsl:text>        //touch recognised as page drag without next command
+</xsl:text>
+    <xsl:text>        document.body.addEventListener("touchstart", function(e){}, false);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //save ghost style
+</xsl:text>
+    <xsl:text>        //save ghost style
+</xsl:text>
+    <xsl:text>        if(this.setpoint_elt != undefined){
+</xsl:text>
+    <xsl:text>            this.setpoint_style = this.setpoint_elt.getAttribute("style");
+</xsl:text>
+    <xsl:text>            this.setpoint_elt.setAttribute("style", "display:none");
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='CircularSlider']">
+    <xsl:param name="hmi_element"/>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>handle range</xsl:text>
+      </xsl:with-param>
+    </xsl:call-template>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>value min max setpoint</xsl:text>
+      </xsl:with-param>
+      <xsl:with-param name="mandatory" select="'no'"/>
+    </xsl:call-template>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_class" match="widget[@type='CustomHtml']">
+    <xsl:text>class CustomHtmlWidget extends Widget{
+</xsl:text>
+    <xsl:text>    frequency = 5;
+</xsl:text>
+    <xsl:text>    widget_size = undefined;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    dispatch(value) {
+</xsl:text>
+    <xsl:text>        this.request_animate();
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    animate(){
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    init() {
+</xsl:text>
+    <xsl:text>        this.widget_size = this.container_elt.getBBox();
+</xsl:text>
+    <xsl:text>        this.element.innerHTML ='&lt;foreignObject x="'+
+</xsl:text>
+    <xsl:text>            this.widget_size.x+'" y="'+this.widget_size.y+
+</xsl:text>
+    <xsl:text>            '" width="'+this.widget_size.width+'" height="'+this.widget_size.height+'"&gt; '+
+</xsl:text>
+    <xsl:text>            this.code_elt.textContent+
+</xsl:text>
+    <xsl:text>            ' &lt;/foreignObject&gt;';
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='CustomHtml']">
+    <xsl:param name="hmi_element"/>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>container code</xsl:text>
+      </xsl:with-param>
+    </xsl:call-template>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_class" match="widget[@type='Display']">
+    <xsl:text>class DisplayWidget extends Widget{
+</xsl:text>
+    <xsl:text>    frequency = 5;
+</xsl:text>
+    <xsl:text>    dispatch(value, oldval, index) {
+</xsl:text>
+    <xsl:text>        this.fields[index] = value;    
+</xsl:text>
+    <xsl:text>        this.element.textContent = this.args.length == 1 ? vsprintf(this.args[0],this.fields) : this.fields.join(' ');
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='Display']">
+    <xsl:param name="hmi_element"/>
+    <xsl:if test="$hmi_element[not(self::svg:text)]">
+      <xsl:message terminate="yes">
+        <xsl:text>Display Widget id="</xsl:text>
+        <xsl:value-of select="$hmi_element/@id"/>
+        <xsl:text>" is not a svg::text element</xsl:text>
+      </xsl:message>
+    </xsl:if>
+    <xsl:variable name="field_initializer">
+      <xsl:for-each select="path">
+        <xsl:choose>
+          <xsl:when test="@type='HMI_STRING'">
+            <xsl:text>""</xsl:text>
+          </xsl:when>
+          <xsl:otherwise>
+            <xsl:text>0</xsl:text>
+          </xsl:otherwise>
+        </xsl:choose>
+        <xsl:if test="position()!=last()">
+          <xsl:text>,</xsl:text>
+        </xsl:if>
+      </xsl:for-each>
+    </xsl:variable>
+    <xsl:text>    fields: [</xsl:text>
+    <xsl:value-of select="$field_initializer"/>
+    <xsl:text>],
+</xsl:text>
+  </xsl:template>
+  <preamble:display/>
+  <xsl:template match="preamble:display">
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* </xsl:text>
+    <xsl:value-of select="local-name()"/>
+    <xsl:text> */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* https://github.com/alexei/sprintf.js/blob/master/src/sprintf.js */
+</xsl:text>
+    <xsl:text>/* global window, exports, define */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>!function() {
+</xsl:text>
+    <xsl:text>    'use strict'
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    var re = {
+</xsl:text>
+    <xsl:text>        not_string: /[^s]/,
+</xsl:text>
+    <xsl:text>        not_bool: /[^t]/,
+</xsl:text>
+    <xsl:text>        not_type: /[^T]/,
+</xsl:text>
+    <xsl:text>        not_primitive: /[^v]/,
+</xsl:text>
+    <xsl:text>        number: /[diefg]/,
+</xsl:text>
+    <xsl:text>        numeric_arg: /[bcdiefguxX]/,
+</xsl:text>
+    <xsl:text>        json: /[j]/,
+</xsl:text>
+    <xsl:text>        not_json: /[^j]/,
+</xsl:text>
+    <xsl:text>        text: /^[^%]+/,
+</xsl:text>
+    <xsl:text>        modulo: /^%{2}/,
+</xsl:text>
+    <xsl:text>        placeholder: /^%(?:([1-9]\d*)\$|\(([^)]+)\))?(\+)?(0|'[^$])?(-)?(\d+)?(?:\.(\d+))?([b-gijostTuvxX])/,
+</xsl:text>
+    <xsl:text>        key: /^([a-z_][a-z_\d]*)/i,
+</xsl:text>
+    <xsl:text>        key_access: /^\.([a-z_][a-z_\d]*)/i,
+</xsl:text>
+    <xsl:text>        index_access: /^\[(\d+)\]/,
+</xsl:text>
+    <xsl:text>        sign: /^[+-]/
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    function sprintf(key) {
+</xsl:text>
+    <xsl:text>        // </xsl:text>
+    <arguments/>
+    <xsl:text> is not an array, but should be fine for this call
+</xsl:text>
+    <xsl:text>        return sprintf_format(sprintf_parse(key), arguments)
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    function vsprintf(fmt, argv) {
+</xsl:text>
+    <xsl:text>        return sprintf.apply(null, [fmt].concat(argv || []))
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    function sprintf_format(parse_tree, argv) {
+</xsl:text>
+    <xsl:text>        var cursor = 1, tree_length = parse_tree.length, arg, output = '', i, k, ph, pad, pad_character, pad_length, is_positive, sign
+</xsl:text>
+    <xsl:text>        for (i = 0; i &lt; tree_length; i++) {
+</xsl:text>
+    <xsl:text>            if (typeof parse_tree[i] === 'string') {
+</xsl:text>
+    <xsl:text>                output += parse_tree[i]
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            else if (typeof parse_tree[i] === 'object') {
+</xsl:text>
+    <xsl:text>                ph = parse_tree[i] // convenience purposes only
+</xsl:text>
+    <xsl:text>                if (ph.keys) { // keyword argument
+</xsl:text>
+    <xsl:text>                    arg = argv[cursor]
+</xsl:text>
+    <xsl:text>                    for (k = 0; k &lt; ph.keys.length; k++) {
+</xsl:text>
+    <xsl:text>                        if (arg == undefined) {
+</xsl:text>
+    <xsl:text>                            throw new Error(sprintf('[sprintf] Cannot access property "%s" of undefined value "%s"', ph.keys[k], ph.keys[k-1]))
+</xsl:text>
+    <xsl:text>                        }
+</xsl:text>
+    <xsl:text>                        arg = arg[ph.keys[k]]
+</xsl:text>
+    <xsl:text>                    }
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                else if (ph.param_no) { // positional argument (explicit)
+</xsl:text>
+    <xsl:text>                    arg = argv[ph.param_no]
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                else { // positional argument (implicit)
+</xsl:text>
+    <xsl:text>                    arg = argv[cursor++]
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                if (re.not_type.test(ph.type) &amp;&amp; re.not_primitive.test(ph.type) &amp;&amp; arg instanceof Function) {
+</xsl:text>
+    <xsl:text>                    arg = arg()
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                if (re.numeric_arg.test(ph.type) &amp;&amp; (typeof arg !== 'number' &amp;&amp; isNaN(arg))) {
+</xsl:text>
+    <xsl:text>                    throw new TypeError(sprintf('[sprintf] expecting number but found %T', arg))
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                if (re.number.test(ph.type)) {
+</xsl:text>
+    <xsl:text>                    is_positive = arg &gt;= 0
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                switch (ph.type) {
+</xsl:text>
+    <xsl:text>                    case 'b':
+</xsl:text>
+    <xsl:text>                        arg = parseInt(arg, 10).toString(2)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'c':
+</xsl:text>
+    <xsl:text>                        arg = String.fromCharCode(parseInt(arg, 10))
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'd':
+</xsl:text>
+    <xsl:text>                    case 'i':
+</xsl:text>
+    <xsl:text>                        arg = parseInt(arg, 10)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'j':
+</xsl:text>
+    <xsl:text>                        arg = JSON.stringify(arg, null, ph.width ? parseInt(ph.width) : 0)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'e':
+</xsl:text>
+    <xsl:text>                        arg = ph.precision ? parseFloat(arg).toExponential(ph.precision) : parseFloat(arg).toExponential()
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'f':
+</xsl:text>
+    <xsl:text>                        arg = ph.precision ? parseFloat(arg).toFixed(ph.precision) : parseFloat(arg)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'g':
+</xsl:text>
+    <xsl:text>                        arg = ph.precision ? String(Number(arg.toPrecision(ph.precision))) : parseFloat(arg)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'o':
+</xsl:text>
+    <xsl:text>                        arg = (parseInt(arg, 10) &gt;&gt;&gt; 0).toString(8)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 's':
+</xsl:text>
+    <xsl:text>                        arg = String(arg)
+</xsl:text>
+    <xsl:text>                        arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 't':
+</xsl:text>
+    <xsl:text>                        arg = String(!!arg)
+</xsl:text>
+    <xsl:text>                        arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'T':
+</xsl:text>
+    <xsl:text>                        arg = Object.prototype.toString.call(arg).slice(8, -1).toLowerCase()
+</xsl:text>
+    <xsl:text>                        arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'u':
+</xsl:text>
+    <xsl:text>                        arg = parseInt(arg, 10) &gt;&gt;&gt; 0
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'v':
+</xsl:text>
+    <xsl:text>                        arg = arg.valueOf()
+</xsl:text>
+    <xsl:text>                        arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'x':
+</xsl:text>
+    <xsl:text>                        arg = (parseInt(arg, 10) &gt;&gt;&gt; 0).toString(16)
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                    case 'X':
+</xsl:text>
+    <xsl:text>                        arg = (parseInt(arg, 10) &gt;&gt;&gt; 0).toString(16).toUpperCase()
+</xsl:text>
+    <xsl:text>                        break
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                if (re.json.test(ph.type)) {
+</xsl:text>
+    <xsl:text>                    output += arg
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                else {
+</xsl:text>
+    <xsl:text>                    if (re.number.test(ph.type) &amp;&amp; (!is_positive || ph.sign)) {
+</xsl:text>
+    <xsl:text>                        sign = is_positive ? '+' : '-'
+</xsl:text>
+    <xsl:text>                        arg = arg.toString().replace(re.sign, '')
+</xsl:text>
+    <xsl:text>                    }
+</xsl:text>
+    <xsl:text>                    else {
+</xsl:text>
+    <xsl:text>                        sign = ''
+</xsl:text>
+    <xsl:text>                    }
+</xsl:text>
+    <xsl:text>                    pad_character = ph.pad_char ? ph.pad_char === '0' ? '0' : ph.pad_char.charAt(1) : ' '
+</xsl:text>
+    <xsl:text>                    pad_length = ph.width - (sign + arg).length
+</xsl:text>
+    <xsl:text>                    pad = ph.width ? (pad_length &gt; 0 ? pad_character.repeat(pad_length) : '') : ''
+</xsl:text>
+    <xsl:text>                    output += ph.align ? sign + arg + pad : (pad_character === '0' ? sign + pad + arg : pad + sign + arg)
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        return output
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    var sprintf_cache = Object.create(null)
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    function sprintf_parse(fmt) {
+</xsl:text>
+    <xsl:text>        if (sprintf_cache[fmt]) {
+</xsl:text>
+    <xsl:text>            return sprintf_cache[fmt]
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        var _fmt = fmt, match, parse_tree = [], arg_names = 0
+</xsl:text>
+    <xsl:text>        while (_fmt) {
+</xsl:text>
+    <xsl:text>            if ((match = re.text.exec(_fmt)) !== null) {
+</xsl:text>
+    <xsl:text>                parse_tree.push(match[0])
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            else if ((match = re.modulo.exec(_fmt)) !== null) {
+</xsl:text>
+    <xsl:text>                parse_tree.push('%')
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            else if ((match = re.placeholder.exec(_fmt)) !== null) {
+</xsl:text>
+    <xsl:text>                if (match[2]) {
+</xsl:text>
+    <xsl:text>                    arg_names |= 1
+</xsl:text>
+    <xsl:text>                    var field_list = [], replacement_field = match[2], field_match = []
+</xsl:text>
+    <xsl:text>                    if ((field_match = re.key.exec(replacement_field)) !== null) {
+</xsl:text>
+    <xsl:text>                        field_list.push(field_match[1])
+</xsl:text>
+    <xsl:text>                        while ((replacement_field = replacement_field.substring(field_match[0].length)) !== '') {
+</xsl:text>
+    <xsl:text>                            if ((field_match = re.key_access.exec(replacement_field)) !== null) {
+</xsl:text>
+    <xsl:text>                                field_list.push(field_match[1])
+</xsl:text>
+    <xsl:text>                            }
+</xsl:text>
+    <xsl:text>                            else if ((field_match = re.index_access.exec(replacement_field)) !== null) {
+</xsl:text>
+    <xsl:text>                                field_list.push(field_match[1])
+</xsl:text>
+    <xsl:text>                            }
+</xsl:text>
+    <xsl:text>                            else {
+</xsl:text>
+    <xsl:text>                                throw new SyntaxError('[sprintf] failed to parse named argument key')
+</xsl:text>
+    <xsl:text>                            }
+</xsl:text>
+    <xsl:text>                        }
+</xsl:text>
+    <xsl:text>                    }
+</xsl:text>
+    <xsl:text>                    else {
+</xsl:text>
+    <xsl:text>                        throw new SyntaxError('[sprintf] failed to parse named argument key')
+</xsl:text>
+    <xsl:text>                    }
+</xsl:text>
+    <xsl:text>                    match[2] = field_list
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                else {
+</xsl:text>
+    <xsl:text>                    arg_names |= 2
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                if (arg_names === 3) {
+</xsl:text>
+    <xsl:text>                    throw new Error('[sprintf] mixing positional and named placeholders is not (yet) supported')
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                parse_tree.push(
+</xsl:text>
+    <xsl:text>                    {
+</xsl:text>
+    <xsl:text>                        placeholder: match[0],
+</xsl:text>
+    <xsl:text>                        param_no:    match[1],
+</xsl:text>
+    <xsl:text>                        keys:        match[2],
+</xsl:text>
+    <xsl:text>                        sign:        match[3],
+</xsl:text>
+    <xsl:text>                        pad_char:    match[4],
+</xsl:text>
+    <xsl:text>                        align:       match[5],
+</xsl:text>
+    <xsl:text>                        width:       match[6],
+</xsl:text>
+    <xsl:text>                        precision:   match[7],
+</xsl:text>
+    <xsl:text>                        type:        match[8]
+</xsl:text>
+    <xsl:text>                    }
+</xsl:text>
+    <xsl:text>                )
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            else {
+</xsl:text>
+    <xsl:text>                throw new SyntaxError('[sprintf] unexpected placeholder')
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            _fmt = _fmt.substring(match[0].length)
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        return sprintf_cache[fmt] = parse_tree
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    /**
+</xsl:text>
+    <xsl:text>     * export to either browser or node.js
+</xsl:text>
+    <xsl:text>     */
+</xsl:text>
+    <xsl:text>    /* eslint-disable quote-props */
+</xsl:text>
+    <xsl:text>    if (typeof exports !== 'undefined') {
+</xsl:text>
+    <xsl:text>        exports['sprintf'] = sprintf
+</xsl:text>
+    <xsl:text>        exports['vsprintf'] = vsprintf
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>    if (typeof window !== 'undefined') {
+</xsl:text>
+    <xsl:text>        window['sprintf'] = sprintf
+</xsl:text>
+    <xsl:text>        window['vsprintf'] = vsprintf
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        if (typeof define === 'function' &amp;&amp; define['amd']) {
+</xsl:text>
+    <xsl:text>            define(function() {
+</xsl:text>
+    <xsl:text>                return {
+</xsl:text>
+    <xsl:text>                    'sprintf': sprintf,
+</xsl:text>
+    <xsl:text>                    'vsprintf': vsprintf
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>            })
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>    /* eslint-enable quote-props */
+</xsl:text>
+    <xsl:text>}(); // eslint-disable-line    
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_class" match="widget[@type='DropDown']">
+    <xsl:text>    function numb_event(e) {
+</xsl:text>
+    <xsl:text>        e.stopPropagation();
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>    class DropDownWidget extends Widget{
+</xsl:text>
+    <xsl:text>        dispatch(value) {
+</xsl:text>
+    <xsl:text>            if(!this.opened) this.set_selection(value);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        init() {
+</xsl:text>
+    <xsl:text>            this.button_elt.onclick = this.on_button_click.bind(this);
+</xsl:text>
+    <xsl:text>            // Save original size of rectangle
+</xsl:text>
+    <xsl:text>            this.box_bbox = this.box_elt.getBBox()
+</xsl:text>
+    <xsl:text>            this.highlight_bbox = this.highlight_elt.getBBox()
+</xsl:text>
+    <xsl:text>            this.highlight_elt.style.visibility = "hidden";
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            // Compute margins
+</xsl:text>
+    <xsl:text>            this.text_bbox = this.text_elt.getBBox();
+</xsl:text>
+    <xsl:text>            let lmargin = this.text_bbox.x - this.box_bbox.x;
+</xsl:text>
+    <xsl:text>            let tmargin = this.text_bbox.y - this.box_bbox.y;
+</xsl:text>
+    <xsl:text>            this.margins = [lmargin, tmargin].map(x =&gt; Math.max(x,0));
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            // Index of first visible element in the menu, when opened
+</xsl:text>
+    <xsl:text>            this.menu_offset = 0;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            // How mutch to lift the menu vertically so that it does not cross bottom border
+</xsl:text>
+    <xsl:text>            this.lift = 0;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            // Event handlers cannot be object method ('this' is unknown)
+</xsl:text>
+    <xsl:text>            // as a workaround, handler given to addEventListener is bound in advance.
+</xsl:text>
+    <xsl:text>            this.bound_close_on_click_elsewhere = this.close_on_click_elsewhere.bind(this);
+</xsl:text>
+    <xsl:text>            this.bound_on_selection_click = this.on_selection_click.bind(this);
+</xsl:text>
+    <xsl:text>            this.bound_on_backward_click = this.on_backward_click.bind(this);
+</xsl:text>
+    <xsl:text>            this.bound_on_forward_click = this.on_forward_click.bind(this);
+</xsl:text>
+    <xsl:text>            this.opened = false;
+</xsl:text>
+    <xsl:text>            this.clickables = [];
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        on_button_click() {
+</xsl:text>
+    <xsl:text>            this.open();
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        // Called when a menu entry is clicked
+</xsl:text>
+    <xsl:text>        on_selection_click(selection) {
+</xsl:text>
+    <xsl:text>            this.close();
+</xsl:text>
+    <xsl:text>            this.apply_hmi_value(0, selection);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        on_backward_click(){
+</xsl:text>
+    <xsl:text>            this.scroll(false);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        on_forward_click(){
+</xsl:text>
+    <xsl:text>            this.scroll(true);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        set_selection(value) {
+</xsl:text>
+    <xsl:text>            let display_str;
+</xsl:text>
+    <xsl:text>            if(value &gt;= 0 &amp;&amp; value &lt; this.content.length){
+</xsl:text>
+    <xsl:text>                // if valid selection resolve content
+</xsl:text>
+    <xsl:text>                display_str = this.content[value];
+</xsl:text>
+    <xsl:text>                this.last_selection = value;
+</xsl:text>
+    <xsl:text>            } else {
+</xsl:text>
+    <xsl:text>                // otherwise show problem
+</xsl:text>
+    <xsl:text>                display_str = "?"+String(value)+"?";
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            // It is assumed that first span always stays,
+</xsl:text>
+    <xsl:text>            // and contains selection when menu is closed
+</xsl:text>
+    <xsl:text>            this.text_elt.firstElementChild.textContent = display_str;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        grow_text(up_to) {
+</xsl:text>
+    <xsl:text>            let count = 1;
+</xsl:text>
+    <xsl:text>            let txt = this.text_elt;
+</xsl:text>
+    <xsl:text>            let first = txt.firstElementChild;
+</xsl:text>
+    <xsl:text>            // Real world (pixels) boundaries of current page
+</xsl:text>
+    <xsl:text>            let bounds = svg_root.getBoundingClientRect();
+</xsl:text>
+    <xsl:text>            this.lift = 0;
+</xsl:text>
+    <xsl:text>            while(count &lt; up_to) {
+</xsl:text>
+    <xsl:text>                let next = first.cloneNode();
+</xsl:text>
+    <xsl:text>                // relative line by line text flow instead of absolute y coordinate
+</xsl:text>
+    <xsl:text>                next.removeAttribute("y");
+</xsl:text>
+    <xsl:text>                next.setAttribute("dy", "1.1em");
+</xsl:text>
+    <xsl:text>                // default content to allow computing text element bbox
+</xsl:text>
+    <xsl:text>                next.textContent = "...";
+</xsl:text>
+    <xsl:text>                // append new span to text element
+</xsl:text>
+    <xsl:text>                txt.appendChild(next);
+</xsl:text>
+    <xsl:text>                // now check if text extended by one row fits to page
+</xsl:text>
+    <xsl:text>                // FIXME : exclude margins to be more accurate on box size
+</xsl:text>
+    <xsl:text>                let rect = txt.getBoundingClientRect();
+</xsl:text>
+    <xsl:text>                if(rect.bottom &gt; bounds.bottom){
+</xsl:text>
+    <xsl:text>                    // in case of overflow at the bottom, lift up one row
+</xsl:text>
+    <xsl:text>                    let backup = first.getAttribute("dy");
+</xsl:text>
+    <xsl:text>                    // apply lift as a dy added too first span (y attrib stays)
+</xsl:text>
+    <xsl:text>                    first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em");
+</xsl:text>
+    <xsl:text>                    rect = txt.getBoundingClientRect();
+</xsl:text>
+    <xsl:text>                    if(rect.top &gt; bounds.top){
+</xsl:text>
+    <xsl:text>                        this.lift += 1;
+</xsl:text>
+    <xsl:text>                    } else {
+</xsl:text>
+    <xsl:text>                        // if it goes over the top, then backtrack
+</xsl:text>
+    <xsl:text>                        // restore dy attribute on first span
+</xsl:text>
+    <xsl:text>                        if(backup)
+</xsl:text>
+    <xsl:text>                            first.setAttribute("dy", backup);
+</xsl:text>
+    <xsl:text>                        else
+</xsl:text>
+    <xsl:text>                            first.removeAttribute("dy");
+</xsl:text>
+    <xsl:text>                        // remove unwanted child
+</xsl:text>
+    <xsl:text>                        txt.removeChild(next);
+</xsl:text>
+    <xsl:text>                        return count;
+</xsl:text>
+    <xsl:text>                    }
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                count++;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            return count;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        close_on_click_elsewhere(e) {
+</xsl:text>
+    <xsl:text>            // inhibit events not targetting spans (menu items)
+</xsl:text>
+    <xsl:text>            if([this.text_elt, this.element].indexOf(e.target.parentNode) == -1){
+</xsl:text>
+    <xsl:text>                e.stopPropagation();
+</xsl:text>
+    <xsl:text>                // close menu in case click is outside box
+</xsl:text>
+    <xsl:text>                if(e.target !== this.box_elt)
+</xsl:text>
+    <xsl:text>                    this.close();
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        close(){
+</xsl:text>
+    <xsl:text>            // Stop hogging all click events
+</xsl:text>
+    <xsl:text>            svg_root.removeEventListener("pointerdown", numb_event, true);
+</xsl:text>
+    <xsl:text>            svg_root.removeEventListener("pointerup", numb_event, true);
+</xsl:text>
+    <xsl:text>            svg_root.removeEventListener("click", this.bound_close_on_click_elsewhere, true);
+</xsl:text>
+    <xsl:text>            // Restore position and sixe of widget elements
+</xsl:text>
+    <xsl:text>            this.reset_text();
+</xsl:text>
+    <xsl:text>            this.reset_clickables();
+</xsl:text>
+    <xsl:text>            this.reset_box();
+</xsl:text>
+    <xsl:text>            this.reset_highlight();
+</xsl:text>
+    <xsl:text>            // Put the button back in place
+</xsl:text>
+    <xsl:text>            this.element.appendChild(this.button_elt);
+</xsl:text>
+    <xsl:text>            // Mark as closed (to allow dispatch)
+</xsl:text>
+    <xsl:text>            this.opened = false;
+</xsl:text>
+    <xsl:text>            // Dispatch last cached value
+</xsl:text>
+    <xsl:text>            this.apply_cache();
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        // Make item (text span) clickable by overlaying a rectangle on top of it
+</xsl:text>
+    <xsl:text>        make_clickable(span, func) {
+</xsl:text>
+    <xsl:text>            let txt = this.text_elt;
+</xsl:text>
+    <xsl:text>            let original_text_y = this.text_bbox.y;
+</xsl:text>
+    <xsl:text>            let highlight = this.highlight_elt;
+</xsl:text>
+    <xsl:text>            let original_h_y = this.highlight_bbox.y;
+</xsl:text>
+    <xsl:text>            let clickable = highlight.cloneNode();
+</xsl:text>
+    <xsl:text>            let yoffset = span.getBBox().y - original_text_y;
+</xsl:text>
+    <xsl:text>            clickable.y.baseVal.value = original_h_y + yoffset;
+</xsl:text>
+    <xsl:text>            clickable.style.pointerEvents = "bounding-box";
+</xsl:text>
+    <xsl:text>            //clickable.style.visibility = "hidden";
+</xsl:text>
+    <xsl:text>            //clickable.onclick = () =&gt; alert("love JS");
+</xsl:text>
+    <xsl:text>            clickable.onclick = func;
+</xsl:text>
+    <xsl:text>            this.element.appendChild(clickable);
+</xsl:text>
+    <xsl:text>            this.clickables.push(clickable)
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        reset_clickables() {
+</xsl:text>
+    <xsl:text>            while(this.clickables.length){
+</xsl:text>
+    <xsl:text>                this.element.removeChild(this.clickables.pop());
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        // Set text content when content is smaller than menu (no scrolling)
+</xsl:text>
+    <xsl:text>        set_complete_text(){
+</xsl:text>
+    <xsl:text>            let spans = this.text_elt.children;
+</xsl:text>
+    <xsl:text>            let c = 0;
+</xsl:text>
+    <xsl:text>            for(let item of this.content){
+</xsl:text>
+    <xsl:text>                let span=spans[c];
+</xsl:text>
+    <xsl:text>                span.textContent = item;
+</xsl:text>
+    <xsl:text>                let sel = c;
+</xsl:text>
+    <xsl:text>                this.make_clickable(span, (evt) =&gt; this.bound_on_selection_click(sel));
+</xsl:text>
+    <xsl:text>                c++;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        // Move partial view :
+</xsl:text>
+    <xsl:text>        // false : upward, lower value
+</xsl:text>
+    <xsl:text>        // true  : downward, higher value
+</xsl:text>
+    <xsl:text>        scroll(forward){
+</xsl:text>
+    <xsl:text>            let contentlength = this.content.length;
+</xsl:text>
+    <xsl:text>            let spans = this.text_elt.children;
+</xsl:text>
+    <xsl:text>            let spanslength = spans.length;
+</xsl:text>
+    <xsl:text>            // reduce accounted menu size according to prsence of scroll buttons
+</xsl:text>
+    <xsl:text>            // since we scroll there is necessarly one button
+</xsl:text>
+    <xsl:text>            spanslength--;
+</xsl:text>
+    <xsl:text>            if(forward){
+</xsl:text>
+    <xsl:text>                // reduce accounted menu size because of back button
+</xsl:text>
+    <xsl:text>                // in current view
+</xsl:text>
+    <xsl:text>                if(this.menu_offset &gt; 0) spanslength--;
+</xsl:text>
+    <xsl:text>                this.menu_offset = Math.min(
+</xsl:text>
+    <xsl:text>                    contentlength - spans.length + 1,
+</xsl:text>
+    <xsl:text>                    this.menu_offset + spanslength);
+</xsl:text>
+    <xsl:text>            }else{
+</xsl:text>
+    <xsl:text>                // reduce accounted menu size because of back button
+</xsl:text>
+    <xsl:text>                // in view once scrolled
+</xsl:text>
+    <xsl:text>                if(this.menu_offset - spanslength &gt; 0) spanslength--;
+</xsl:text>
+    <xsl:text>                this.menu_offset = Math.max(
+</xsl:text>
+    <xsl:text>                    0,
+</xsl:text>
+    <xsl:text>                    this.menu_offset - spanslength);
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            if(this.menu_offset == 1)
+</xsl:text>
+    <xsl:text>                this.menu_offset = 0;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            this.reset_highlight();
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            this.reset_clickables();
+</xsl:text>
+    <xsl:text>            this.set_partial_text();
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            this.highlight_selection();
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        // Setup partial view text content
+</xsl:text>
+    <xsl:text>        // with jumps at first and last entry when appropriate
+</xsl:text>
+    <xsl:text>        set_partial_text(){
+</xsl:text>
+    <xsl:text>            let spans = this.text_elt.children;
+</xsl:text>
+    <xsl:text>            let contentlength = this.content.length;
+</xsl:text>
+    <xsl:text>            let spanslength = spans.length;
+</xsl:text>
+    <xsl:text>            let i = this.menu_offset, c = 0;
+</xsl:text>
+    <xsl:text>            let m = this.box_bbox;
+</xsl:text>
+    <xsl:text>            while(c &lt; spanslength){
+</xsl:text>
+    <xsl:text>                let span=spans[c];
+</xsl:text>
+    <xsl:text>                let onclickfunc;
+</xsl:text>
+    <xsl:text>                // backward jump only present if not exactly at start
+</xsl:text>
+    <xsl:text>                if(c == 0 &amp;&amp; i != 0){
+</xsl:text>
+    <xsl:text>                    span.textContent = "&#x25B2;";
+</xsl:text>
+    <xsl:text>                    onclickfunc = this.bound_on_backward_click;
+</xsl:text>
+    <xsl:text>                    let o = span.getBBox();
+</xsl:text>
+    <xsl:text>                    span.setAttribute("dx", (m.width - o.width)/2);
+</xsl:text>
+    <xsl:text>                // presence of forward jump when not right at the end
+</xsl:text>
+    <xsl:text>                }else if(c == spanslength-1 &amp;&amp; i &lt; contentlength - 1){
+</xsl:text>
+    <xsl:text>                    span.textContent = "&#x25BC;";
+</xsl:text>
+    <xsl:text>                    onclickfunc = this.bound_on_forward_click;
+</xsl:text>
+    <xsl:text>                    let o = span.getBBox();
+</xsl:text>
+    <xsl:text>                    span.setAttribute("dx", (m.width - o.width)/2);
+</xsl:text>
+    <xsl:text>                // otherwise normal content
+</xsl:text>
+    <xsl:text>                }else{
+</xsl:text>
+    <xsl:text>                    span.textContent = this.content[i];
+</xsl:text>
+    <xsl:text>                    let sel = i;
+</xsl:text>
+    <xsl:text>                    onclickfunc = (evt) =&gt; this.bound_on_selection_click(sel);
+</xsl:text>
+    <xsl:text>                    span.removeAttribute("dx");
+</xsl:text>
+    <xsl:text>                    i++;
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                this.make_clickable(span, onclickfunc);
+</xsl:text>
+    <xsl:text>                c++;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        open(){
+</xsl:text>
+    <xsl:text>            let length = this.content.length;
+</xsl:text>
+    <xsl:text>            // systematically reset text, to strip eventual whitespace spans
+</xsl:text>
+    <xsl:text>            this.reset_text();
+</xsl:text>
+    <xsl:text>            // grow as much as needed or possible
+</xsl:text>
+    <xsl:text>            let slots = this.grow_text(length);
+</xsl:text>
+    <xsl:text>            // Depending on final size
+</xsl:text>
+    <xsl:text>            if(slots == length) {
+</xsl:text>
+    <xsl:text>                // show all at once
+</xsl:text>
+    <xsl:text>                this.set_complete_text();
+</xsl:text>
+    <xsl:text>            } else {
+</xsl:text>
+    <xsl:text>                // eventualy align menu to current selection, compensating for lift
+</xsl:text>
+    <xsl:text>                let offset = this.last_selection - this.lift;
+</xsl:text>
+    <xsl:text>                if(offset &gt; 0)
+</xsl:text>
+    <xsl:text>                    this.menu_offset = Math.min(offset + 1, length - slots + 1);
+</xsl:text>
+    <xsl:text>                else
+</xsl:text>
+    <xsl:text>                    this.menu_offset = 0;
+</xsl:text>
+    <xsl:text>                // show surrounding values
+</xsl:text>
+    <xsl:text>                this.set_partial_text();
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            // Now that text size is known, we can set the box around it
+</xsl:text>
+    <xsl:text>            this.adjust_box_to_text();
+</xsl:text>
+    <xsl:text>            // Take button out until menu closed
+</xsl:text>
+    <xsl:text>            this.element.removeChild(this.button_elt);
+</xsl:text>
+    <xsl:text>            // Rise widget to top by moving it to last position among siblings
+</xsl:text>
+    <xsl:text>            this.element.parentNode.appendChild(this.element.parentNode.removeChild(this.element));
+</xsl:text>
+    <xsl:text>            // disable interaction with background
+</xsl:text>
+    <xsl:text>            svg_root.addEventListener("pointerdown", numb_event, true);
+</xsl:text>
+    <xsl:text>            svg_root.addEventListener("pointerup", numb_event, true);
+</xsl:text>
+    <xsl:text>            svg_root.addEventListener("click", this.bound_close_on_click_elsewhere, true);
+</xsl:text>
+    <xsl:text>            this.highlight_selection();
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            // mark as open
+</xsl:text>
+    <xsl:text>            this.opened = true;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        // Put text element in normalized state
+</xsl:text>
+    <xsl:text>        reset_text(){
+</xsl:text>
+    <xsl:text>            let txt = this.text_elt;
+</xsl:text>
+    <xsl:text>            let first = txt.firstElementChild;
+</xsl:text>
+    <xsl:text>            // remove attribute eventually added to first text line while opening
+</xsl:text>
+    <xsl:text>            first.onclick = null;
+</xsl:text>
+    <xsl:text>            first.removeAttribute("dy");
+</xsl:text>
+    <xsl:text>            first.removeAttribute("dx");
+</xsl:text>
+    <xsl:text>            // keep only the first line of text
+</xsl:text>
+    <xsl:text>            for(let span of Array.from(txt.children).slice(1)){
+</xsl:text>
+    <xsl:text>                txt.removeChild(span)
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        // Put rectangle element in saved original state
+</xsl:text>
+    <xsl:text>        reset_box(){
+</xsl:text>
+    <xsl:text>            let m = this.box_bbox;
+</xsl:text>
+    <xsl:text>            let b = this.box_elt;
+</xsl:text>
+    <xsl:text>            b.x.baseVal.value = m.x;
+</xsl:text>
+    <xsl:text>            b.y.baseVal.value = m.y;
+</xsl:text>
+    <xsl:text>            b.width.baseVal.value = m.width;
+</xsl:text>
+    <xsl:text>            b.height.baseVal.value = m.height;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        highlight_selection(){
+</xsl:text>
+    <xsl:text>            let highlighted_row = this.last_selection - this.menu_offset;
+</xsl:text>
+    <xsl:text>            if(highlighted_row &lt; 0) return;
+</xsl:text>
+    <xsl:text>            let spans = this.text_elt.children;
+</xsl:text>
+    <xsl:text>            let spanslength = spans.length;
+</xsl:text>
+    <xsl:text>            let contentlength = this.content.length;
+</xsl:text>
+    <xsl:text>            if(this.menu_offset != 0) {
+</xsl:text>
+    <xsl:text>                spanslength--;
+</xsl:text>
+    <xsl:text>                highlighted_row++;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            if(this.menu_offset + spanslength &lt; contentlength - 1) spanslength--;
+</xsl:text>
+    <xsl:text>            if(highlighted_row &gt; spanslength) return;
+</xsl:text>
+    <xsl:text>            let original_text_y = this.text_bbox.y;
+</xsl:text>
+    <xsl:text>            let highlight = this.highlight_elt;
+</xsl:text>
+    <xsl:text>            let span = spans[highlighted_row];
+</xsl:text>
+    <xsl:text>            let yoffset = span.getBBox().y - original_text_y;
+</xsl:text>
+    <xsl:text>            highlight.y.baseVal.value = this.highlight_bbox.y + yoffset;
+</xsl:text>
+    <xsl:text>            highlight.style.visibility = "visible";
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        reset_highlight(){
+</xsl:text>
+    <xsl:text>            let highlight = this.highlight_elt;
+</xsl:text>
+    <xsl:text>            highlight.y.baseVal.value = this.highlight_bbox.y;
+</xsl:text>
+    <xsl:text>            highlight.style.visibility = "hidden";
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        // Use margin and text size to compute box size
+</xsl:text>
+    <xsl:text>        adjust_box_to_text(){
+</xsl:text>
+    <xsl:text>            let [lmargin, tmargin] = this.margins;
+</xsl:text>
+    <xsl:text>            let m = this.text_elt.getBBox();
+</xsl:text>
+    <xsl:text>            let b = this.box_elt;
+</xsl:text>
+    <xsl:text>            // b.x.baseVal.value = m.x - lmargin;
+</xsl:text>
+    <xsl:text>            b.y.baseVal.value = m.y - tmargin;
+</xsl:text>
+    <xsl:text>            // b.width.baseVal.value = 2 * lmargin + m.width;
+</xsl:text>
+    <xsl:text>            b.height.baseVal.value = 2 * tmargin + m.height;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='DropDown']">
+    <xsl:param name="hmi_element"/>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>text box button highlight</xsl:text>
+      </xsl:with-param>
+    </xsl:call-template>
+    <xsl:text>    // It is assumed that list content conforms to Array interface.
+</xsl:text>
+    <xsl:text>    content: [
+</xsl:text>
+    <xsl:for-each select="arg">
+      <xsl:text>"</xsl:text>
+      <xsl:value-of select="@value"/>
+      <xsl:text>",
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>    ],
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='ForEach']">
+    <xsl:param name="hmi_element"/>
+    <xsl:if test="count(path) != 1">
+      <xsl:message terminate="yes">
+        <xsl:text>ForEach widget </xsl:text>
+        <xsl:value-of select="$hmi_element/@id"/>
+        <xsl:text> must have one HMI path given.</xsl:text>
+      </xsl:message>
+    </xsl:if>
+    <xsl:if test="count(arg) != 1">
+      <xsl:message terminate="yes">
+        <xsl:text>ForEach widget </xsl:text>
+        <xsl:value-of select="$hmi_element/@id"/>
+        <xsl:text> must have one argument given : a class name.</xsl:text>
+      </xsl:message>
+    </xsl:if>
+    <xsl:variable name="class" select="arg[1]/@value"/>
+    <xsl:variable name="base_path" select="path/@value"/>
+    <xsl:variable name="hmi_index_base" select="$indexed_hmitree/*[@hmipath = $base_path]"/>
+    <xsl:variable name="hmi_tree_base" select="$hmitree/descendant-or-self::*[@path = $hmi_index_base/@path]"/>
+    <xsl:variable name="hmi_tree_items" select="$hmi_tree_base/*[@class = $class]"/>
+    <xsl:variable name="hmi_index_items" select="$indexed_hmitree/*[@path = $hmi_tree_items/@path]"/>
+    <xsl:variable name="items_paths" select="$hmi_index_items/@hmipath"/>
+    <xsl:text>    index_pool: [
+</xsl:text>
+    <xsl:for-each select="$hmi_index_items">
+      <xsl:text>      </xsl:text>
+      <xsl:value-of select="@index"/>
+      <xsl:if test="position()!=last()">
+        <xsl:text>,</xsl:text>
+      </xsl:if>
+      <xsl:text>
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>    ],
+</xsl:text>
+    <xsl:text>    init: function() {
+</xsl:text>
+    <xsl:variable name="prefix" select="concat($class,':')"/>
+    <xsl:variable name="buttons_regex" select="concat('^',$prefix,'[+\-][0-9]+')"/>
+    <xsl:variable name="buttons" select="$hmi_element/*[regexp:test(@inkscape:label, $buttons_regex)]"/>
+    <xsl:for-each select="$buttons">
+      <xsl:variable name="op" select="substring-after(@inkscape:label, $prefix)"/>
+      <xsl:text>        id("</xsl:text>
+      <xsl:value-of select="@id"/>
+      <xsl:text>").setAttribute("onclick", "hmi_widgets['</xsl:text>
+      <xsl:value-of select="$hmi_element/@id"/>
+      <xsl:text>'].on_click('</xsl:text>
+      <xsl:value-of select="$op"/>
+      <xsl:text>', evt)");
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        this.items = [
+</xsl:text>
+    <xsl:variable name="items_regex" select="concat('^',$prefix,'[0-9]+')"/>
+    <xsl:variable name="unordered_items" select="$hmi_element//*[regexp:test(@inkscape:label, $items_regex)]"/>
+    <xsl:for-each select="$unordered_items">
+      <xsl:variable name="elt_label" select="concat($prefix, string(position()))"/>
+      <xsl:variable name="elt" select="$unordered_items[@inkscape:label = $elt_label]"/>
+      <xsl:variable name="pos" select="position()"/>
+      <xsl:variable name="item_path" select="$items_paths[$pos]"/>
+      <xsl:text>          [ /* item="</xsl:text>
+      <xsl:value-of select="$elt_label"/>
+      <xsl:text>" path="</xsl:text>
+      <xsl:value-of select="$item_path"/>
+      <xsl:text>" */
+</xsl:text>
+      <xsl:if test="count($elt)=0">
+        <xsl:message terminate="yes">
+          <xsl:text>Missing item labeled </xsl:text>
+          <xsl:value-of select="$elt_label"/>
+          <xsl:text> in ForEach widget </xsl:text>
+          <xsl:value-of select="$hmi_element/@id"/>
+        </xsl:message>
+      </xsl:if>
+      <xsl:for-each select="func:refered_elements($elt)[@id = $hmi_elements/@id][not(@id = $elt/@id)]">
+        <xsl:if test="not(func:is_descendant_path(func:widget(@id)/path/@value, $item_path))">
+          <xsl:message terminate="yes">
+            <xsl:text>Widget id="</xsl:text>
+            <xsl:value-of select="@id"/>
+            <xsl:text>" label="</xsl:text>
+            <xsl:value-of select="@inkscape:label"/>
+            <xsl:text>" is having wrong path. Accroding to ForEach widget ancestor id="</xsl:text>
+            <xsl:value-of select="$hmi_element/@id"/>
+            <xsl:text>", path should be descendant of "</xsl:text>
+            <xsl:value-of select="$item_path"/>
+            <xsl:text>".</xsl:text>
+          </xsl:message>
+        </xsl:if>
+        <xsl:text>            hmi_widgets["</xsl:text>
+        <xsl:value-of select="@id"/>
+        <xsl:text>"]</xsl:text>
+        <xsl:if test="position()!=last()">
+          <xsl:text>,</xsl:text>
+        </xsl:if>
+        <xsl:text>
+</xsl:text>
+      </xsl:for-each>
+      <xsl:text>          ]</xsl:text>
+      <xsl:if test="position()!=last()">
+        <xsl:text>,</xsl:text>
+      </xsl:if>
+      <xsl:text>
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>        ]
+</xsl:text>
+    <xsl:text>    },
+</xsl:text>
+    <xsl:text>    item_offset: 0,
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_class" match="widget[@type='ForEach']">
+    <xsl:text>class ForEachWidget extends Widget{
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    unsub_items(){
+</xsl:text>
+    <xsl:text>        for(let item of this.items){
+</xsl:text>
+    <xsl:text>            for(let widget of item) {
+</xsl:text>
+    <xsl:text>                widget.unsub();
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    unsub(){
+</xsl:text>
+    <xsl:text>        this.unsub_items();
+</xsl:text>
+    <xsl:text>        this.offset = 0;
+</xsl:text>
+    <xsl:text>        this.relativeness = undefined;
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    sub_items(){
+</xsl:text>
+    <xsl:text>        for(let i = 0; i &lt; this.items.length; i++) {
+</xsl:text>
+    <xsl:text>            let item = this.items[i];
+</xsl:text>
+    <xsl:text>            let orig_item_index = this.index_pool[i];
+</xsl:text>
+    <xsl:text>            let item_index = this.index_pool[i+this.item_offset];
+</xsl:text>
+    <xsl:text>            let item_index_offset = item_index - orig_item_index;
+</xsl:text>
+    <xsl:text>            if(this.relativeness[0])
+</xsl:text>
+    <xsl:text>                item_index_offset += this.offset;
+</xsl:text>
+    <xsl:text>            for(let widget of item) {
+</xsl:text>
+    <xsl:text>                /* all variables of all widgets in a ForEach are all relative. 
+</xsl:text>
+    <xsl:text>                   Really.
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                   TODO: allow absolute variables in ForEach widgets
+</xsl:text>
+    <xsl:text>                */
+</xsl:text>
+    <xsl:text>                widget.sub(item_index_offset, widget.indexes.map(_=&gt;true));
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    sub(new_offset=0, relativeness=[]){
+</xsl:text>
+    <xsl:text>        this.offset = new_offset;
+</xsl:text>
+    <xsl:text>        this.relativeness = relativeness;
+</xsl:text>
+    <xsl:text>        this.sub_items();
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    apply_cache() {
+</xsl:text>
+    <xsl:text>        this.items.forEach(item=&gt;item.forEach(widget=&gt;widget.apply_cache()));
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    on_click(opstr, evt) {
+</xsl:text>
+    <xsl:text>        let new_item_offset = eval(String(this.item_offset)+opstr);
+</xsl:text>
+    <xsl:text>        if(new_item_offset + this.items.length &gt; this.index_pool.length) {
+</xsl:text>
+    <xsl:text>            if(this.item_offset + this.items.length == this.index_pool.length)
+</xsl:text>
+    <xsl:text>                new_item_offset = 0;
+</xsl:text>
+    <xsl:text>            else
+</xsl:text>
+    <xsl:text>                new_item_offset = this.index_pool.length - this.items.length;
+</xsl:text>
+    <xsl:text>        } else if(new_item_offset &lt; 0) {
+</xsl:text>
+    <xsl:text>            if(this.item_offset == 0)
+</xsl:text>
+    <xsl:text>                new_item_offset = this.index_pool.length - this.items.length;
+</xsl:text>
+    <xsl:text>            else
+</xsl:text>
+    <xsl:text>                new_item_offset = 0;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        this.item_offset = new_item_offset;
+</xsl:text>
+    <xsl:text>        this.unsub_items();
+</xsl:text>
+    <xsl:text>        this.sub_items();
+</xsl:text>
+    <xsl:text>        update_subscriptions();
+</xsl:text>
+    <xsl:text>        need_cache_apply.push(this);
+</xsl:text>
+    <xsl:text>        jumps_need_update = true;
+</xsl:text>
+    <xsl:text>        requestHMIAnimation();
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_class" match="widget[@type='Input']">
+    <xsl:text>    class InputWidget extends Widget{
+</xsl:text>
+    <xsl:text>         on_op_click(opstr) {
+</xsl:text>
+    <xsl:text>             let new_val = this.change_hmi_value(0, opstr);
+</xsl:text>
+    <xsl:text>         }
+</xsl:text>
+    <xsl:text>         edit_callback(new_val) {
+</xsl:text>
+    <xsl:text>             this.apply_hmi_value(0, new_val);
+</xsl:text>
+    <xsl:text>         }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='Input']">
+    <xsl:param name="hmi_element"/>
+    <xsl:variable name="key_pos_elt">
+      <xsl:call-template name="defs_by_labels">
+        <xsl:with-param name="hmi_element" select="$hmi_element"/>
+        <xsl:with-param name="labels">
+          <xsl:text>key_pos</xsl:text>
+        </xsl:with-param>
+        <xsl:with-param name="mandatory" select="'no'"/>
+      </xsl:call-template>
+    </xsl:variable>
+    <xsl:value-of select="$key_pos_elt"/>
+    <xsl:variable name="value_elt">
+      <xsl:call-template name="defs_by_labels">
+        <xsl:with-param name="hmi_element" select="$hmi_element"/>
+        <xsl:with-param name="labels">
+          <xsl:text>value</xsl:text>
+        </xsl:with-param>
+        <xsl:with-param name="mandatory" select="'no'"/>
+      </xsl:call-template>
+    </xsl:variable>
+    <xsl:variable name="have_value" select="string-length($value_elt)&gt;0"/>
+    <xsl:value-of select="$value_elt"/>
+    <xsl:variable name="edit_elt">
+      <xsl:call-template name="defs_by_labels">
+        <xsl:with-param name="hmi_element" select="$hmi_element"/>
+        <xsl:with-param name="labels">
+          <xsl:text>edit</xsl:text>
+        </xsl:with-param>
+        <xsl:with-param name="mandatory" select="'no'"/>
+      </xsl:call-template>
+    </xsl:variable>
+    <xsl:variable name="have_edit" select="string-length($edit_elt)&gt;0"/>
+    <xsl:value-of select="$edit_elt"/>
+    <xsl:if test="$have_value">
+      <xsl:text>    frequency: 5,
+</xsl:text>
+    </xsl:if>
+    <xsl:text>    dispatch: function(value) {
+</xsl:text>
+    <xsl:if test="$have_edit">
+      <xsl:text>        this.last_val = value;
+</xsl:text>
+    </xsl:if>
+    <xsl:if test="$have_value">
+      <xsl:text>        this.value_elt.textContent = String(value);
+</xsl:text>
+    </xsl:if>
+    <xsl:text>    },
+</xsl:text>
+    <xsl:text>    init: function() {
+</xsl:text>
+    <xsl:if test="$have_edit">
+      <xsl:text>        this.edit_elt.onclick = () =&gt; edit_value(
+</xsl:text>
+      <xsl:text>            "</xsl:text>
+      <xsl:value-of select="path/@value"/>
+      <xsl:text>", "</xsl:text>
+      <xsl:value-of select="path/@type"/>
+      <xsl:text>",
+</xsl:text>
+      <xsl:text>            this, this.last_val, 
+</xsl:text>
+      <xsl:choose>
+        <xsl:when test="string-length($key_pos_elt)&gt;0">
+          <xsl:text>            this.key_pos_elt.getBBox()
+</xsl:text>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:text>            undefined
+</xsl:text>
+        </xsl:otherwise>
+      </xsl:choose>
+      <xsl:text>        );
+</xsl:text>
+    </xsl:if>
+    <xsl:for-each select="$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]">
+      <xsl:text>        id("</xsl:text>
+      <xsl:value-of select="@id"/>
+      <xsl:text>").onclick = () =&gt; this.on_op_click("</xsl:text>
+      <xsl:value-of select="func:escape_quotes(@inkscape:label)"/>
+      <xsl:text>");
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>    },
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_class" match="widget[@type='JsonTable']">
+    <xsl:text>class JsonTableWidget extends Widget{
+</xsl:text>
+    <xsl:text>    // arbitrary defaults to avoid missing entries in query
+</xsl:text>
+    <xsl:text>    cache = [0,100,50];
+</xsl:text>
+    <xsl:text>    init() {
+</xsl:text>
+    <xsl:text>        this.spread_json_data_bound = this.spread_json_data.bind(this);
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    handle_http_response(response) {
+</xsl:text>
+    <xsl:text>        if (!response.ok) {
+</xsl:text>
+    <xsl:text>          console.log("HTTP error, status = " + response.status);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        return response.json();
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    do_http_request(...opt) {
+</xsl:text>
+    <xsl:text>        const query = {
+</xsl:text>
+    <xsl:text>            args: this.args,
+</xsl:text>
+    <xsl:text>            range: this.cache[1],
+</xsl:text>
+    <xsl:text>            position: this.cache[2],
+</xsl:text>
+    <xsl:text>            visible: this.visible,
+</xsl:text>
+    <xsl:text>            extra: this.cache.slice(4),
+</xsl:text>
+    <xsl:text>            options: opt
+</xsl:text>
+    <xsl:text>        };
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        const options = {
+</xsl:text>
+    <xsl:text>             method: 'POST',
+</xsl:text>
+    <xsl:text>             body: JSON.stringify(query),
+</xsl:text>
+    <xsl:text>             headers: {'Content-Type': 'application/json'}
+</xsl:text>
+    <xsl:text>        };
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        fetch(this.args[0], options)
+</xsl:text>
+    <xsl:text>            .then(this.handle_http_response)
+</xsl:text>
+    <xsl:text>            .then(this.spread_json_data_bound);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>    dispatch(value, oldval, index) {
+</xsl:text>
+    <xsl:text>        this.cache[index] = value;
+</xsl:text>
+    <xsl:text>        this.do_http_request();
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>    make_on_click(...options){
+</xsl:text>
+    <xsl:text>        let that = this;
+</xsl:text>
+    <xsl:text>        return function(evt){
+</xsl:text>
+    <xsl:text>            that.do_http_request(...options);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>    // on_click(evt, ...options) {
+</xsl:text>
+    <xsl:text>    //     this.do_http_request(...options);
+</xsl:text>
+    <xsl:text>    // }
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="json_table_elt_render" match="svg:*">
+    <xsl:message terminate="yes">
+      <xsl:text>JsonTable Widget can't contain element of type </xsl:text>
+      <xsl:value-of select="local-name()"/>
+      <xsl:text>.</xsl:text>
+    </xsl:message>
+  </xsl:template>
+  <xsl:variable name="hmi_textstylelists_descs" select="$parsed_widgets/widget[@type = 'TextStyleList']"/>
+  <xsl:variable name="hmi_textstylelists" select="$hmi_elements[@id = $hmi_textstylelists_descs/@id]"/>
+  <xsl:variable name="textstylelist_related">
+    <xsl:for-each select="$hmi_textstylelists">
+      <list>
+        <xsl:attribute name="listid">
+          <xsl:value-of select="@id"/>
+        </xsl:attribute>
+        <xsl:for-each select="func:refered_elements(.)">
+          <elt>
+            <xsl:attribute name="eltid">
+              <xsl:value-of select="@id"/>
+            </xsl:attribute>
+          </elt>
+        </xsl:for-each>
+      </list>
+    </xsl:for-each>
+  </xsl:variable>
+  <xsl:variable name="textstylelist_related_ns" select="exsl:node-set($textstylelist_related)"/>
+  <func:function name="func:json_expressions">
+    <xsl:param name="expressions"/>
+    <xsl:param name="label"/>
+    <xsl:choose>
+      <xsl:when test="$label">
+        <xsl:variable name="suffixes" select="str:split($label)"/>
+        <xsl:variable name="res">
+          <xsl:for-each select="$suffixes">
+            <expression>
+              <xsl:variable name="suffix" select="."/>
+              <xsl:variable name="pos" select="position()"/>
+              <xsl:variable name="expr" select="$expressions[position() &lt;= $pos][last()]/expression"/>
+              <xsl:choose>
+                <xsl:when test="contains($suffix,'=')">
+                  <xsl:variable name="name" select="substring-before($suffix,'=')"/>
+                  <xsl:if test="$expr/@name[. != $name]">
+                    <xsl:message terminate="yes">
+                      <xsl:text>JsonTable : missplaced '=' or inconsistent names in Json data expressions.</xsl:text>
+                    </xsl:message>
+                  </xsl:if>
+                  <xsl:attribute name="name">
+                    <xsl:value-of select="$name"/>
+                  </xsl:attribute>
+                  <xsl:attribute name="content">
+                    <xsl:value-of select="$expr/@content"/>
+                    <xsl:value-of select="substring-after($suffix,'=')"/>
+                  </xsl:attribute>
+                </xsl:when>
+                <xsl:otherwise>
+                  <xsl:copy-of select="$expr/@name"/>
+                  <xsl:attribute name="content">
+                    <xsl:value-of select="$expr/@content"/>
+                    <xsl:value-of select="$suffix"/>
+                  </xsl:attribute>
+                </xsl:otherwise>
+              </xsl:choose>
+            </expression>
+          </xsl:for-each>
+        </xsl:variable>
+        <func:result select="exsl:node-set($res)"/>
+      </xsl:when>
+      <xsl:otherwise>
+        <func:result select="$expressions"/>
+      </xsl:otherwise>
+    </xsl:choose>
+  </func:function>
+  <xsl:variable name="initexpr">
+    <expression>
+      <xsl:attribute name="content">
+        <xsl:text>jdata</xsl:text>
+      </xsl:attribute>
+    </expression>
+  </xsl:variable>
+  <xsl:variable name="initexpr_ns" select="exsl:node-set($initexpr)"/>
+  <xsl:template mode="json_table_elt_render" match="svg:use">
+    <xsl:param name="expressions"/>
+    <xsl:variable name="targetid" select="substring-after(@xlink:href,'#')"/>
+    <xsl:variable name="from_list" select="$hmi_lists[(@id | */@id) = $targetid]"/>
+    <xsl:choose>
+      <xsl:when test="count($from_list) &gt; 0">
+        <xsl:text>        id("</xsl:text>
+        <xsl:value-of select="@id"/>
+        <xsl:text>").setAttribute("xlink:href",
+</xsl:text>
+        <xsl:text>            "#"+hmi_widgets["</xsl:text>
+        <xsl:value-of select="$from_list/@id"/>
+        <xsl:text>"].items[</xsl:text>
+        <xsl:value-of select="$expressions/expression[1]/@content"/>
+        <xsl:text>]);
+</xsl:text>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:message terminate="no">
+          <xsl:text>Clones (svg:use) in JsonTable Widget must point to a valid HMI:List widget or item. Reference "</xsl:text>
+          <xsl:value-of select="@xlink:href"/>
+          <xsl:text>" is not valid and will not be updated.</xsl:text>
+        </xsl:message>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:template>
+  <xsl:template mode="json_table_elt_render" match="svg:text">
+    <xsl:param name="expressions"/>
+    <xsl:variable name="value_expr" select="$expressions/expression[1]/@content"/>
+    <xsl:variable name="original" select="@original"/>
+    <xsl:variable name="from_textstylelist" select="$textstylelist_related_ns/list[elt/@eltid = $original]"/>
+    <xsl:choose>
+      <xsl:when test="count($from_textstylelist) &gt; 0">
+        <xsl:variable name="content_expr" select="$expressions/expression[2]/@content"/>
+        <xsl:if test="string-length($content_expr) = 0 or $expressions/expression[2]/@name != 'textContent'">
+          <xsl:message terminate="yes">
+            <xsl:text>Clones (svg:use) in JsonTable Widget pointing to a HMI:TextStyleList widget or item must have a "textContent=.someVal" assignement following value expression in label.</xsl:text>
+          </xsl:message>
+        </xsl:if>
+        <xsl:text>        {
+</xsl:text>
+        <xsl:text>          let elt = id("</xsl:text>
+        <xsl:value-of select="@id"/>
+        <xsl:text>");
+</xsl:text>
+        <xsl:text>          elt.textContent = String(</xsl:text>
+        <xsl:value-of select="$content_expr"/>
+        <xsl:text>);
+</xsl:text>
+        <xsl:text>          elt.style = hmi_widgets["</xsl:text>
+        <xsl:value-of select="$from_textstylelist/@listid"/>
+        <xsl:text>"].styles[</xsl:text>
+        <xsl:value-of select="$value_expr"/>
+        <xsl:text>];
+</xsl:text>
+        <xsl:text>        }
+</xsl:text>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:text>        id("</xsl:text>
+        <xsl:value-of select="@id"/>
+        <xsl:text>").textContent = String(</xsl:text>
+        <xsl:value-of select="$value_expr"/>
+        <xsl:text>);
+</xsl:text>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:template>
+  <func:function name="func:filter_non_widget_label">
+    <xsl:param name="elt"/>
+    <xsl:param name="widget_elts"/>
+    <xsl:variable name="eltid">
+      <xsl:choose>
+        <xsl:when test="$elt/@original">
+          <xsl:value-of select="$elt/@original"/>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:value-of select="$elt/@id"/>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:variable>
+    <func:result select="$widget_elts[@id=$eltid]/@inkscape:label"/>
+  </func:function>
+  <xsl:template mode="json_table_render_except_comments" match="svg:*">
+    <xsl:param name="expressions"/>
+    <xsl:param name="widget_elts"/>
+    <xsl:variable name="label" select="func:filter_non_widget_label(., $widget_elts)"/>
+    <xsl:if test="not(starts-with($label,'#'))">
+      <xsl:apply-templates mode="json_table_render" select=".">
+        <xsl:with-param name="expressions" select="$expressions"/>
+        <xsl:with-param name="widget_elts" select="$widget_elts"/>
+        <xsl:with-param name="label" select="$label"/>
+      </xsl:apply-templates>
+    </xsl:if>
+  </xsl:template>
+  <xsl:template mode="json_table_render" match="svg:*">
+    <xsl:param name="expressions"/>
+    <xsl:param name="widget_elts"/>
+    <xsl:param name="label"/>
+    <xsl:variable name="new_expressions" select="func:json_expressions($expressions, $label)"/>
+    <xsl:variable name="elt" select="."/>
+    <xsl:for-each select="$new_expressions/expression[position() &gt; 1][starts-with(@name,'onClick')]">
+      <xsl:text>        id("</xsl:text>
+      <xsl:value-of select="$elt/@id"/>
+      <xsl:text>").onclick = this.make_on_click('</xsl:text>
+      <xsl:value-of select="@name"/>
+      <xsl:text>', </xsl:text>
+      <xsl:value-of select="@content"/>
+      <xsl:text>);
+</xsl:text>
+    </xsl:for-each>
+    <xsl:apply-templates mode="json_table_elt_render" select=".">
+      <xsl:with-param name="expressions" select="$new_expressions"/>
+    </xsl:apply-templates>
+  </xsl:template>
+  <xsl:template mode="json_table_render" match="svg:g">
+    <xsl:param name="expressions"/>
+    <xsl:param name="widget_elts"/>
+    <xsl:param name="label"/>
+    <xsl:variable name="gid" select="@id"/>
+    <xsl:variable name="varprefix">
+      <xsl:text>obj_</xsl:text>
+      <xsl:value-of select="$gid"/>
+      <xsl:text>_</xsl:text>
+    </xsl:variable>
+    <xsl:text>        try {
+</xsl:text>
+    <xsl:for-each select="$expressions/expression">
+      <xsl:text>         let </xsl:text>
+      <xsl:value-of select="$varprefix"/>
+      <xsl:value-of select="position()"/>
+      <xsl:text> = </xsl:text>
+      <xsl:value-of select="@content"/>
+      <xsl:text>;
+</xsl:text>
+      <xsl:text>         if(</xsl:text>
+      <xsl:value-of select="$varprefix"/>
+      <xsl:value-of select="position()"/>
+      <xsl:text> == undefined) {
+</xsl:text>
+      <xsl:text>              console.log("</xsl:text>
+      <xsl:value-of select="$varprefix"/>
+      <xsl:value-of select="position()"/>
+      <xsl:text> = </xsl:text>
+      <xsl:value-of select="@content"/>
+      <xsl:text>");
+</xsl:text>
+      <xsl:text>              throw null;
+</xsl:text>
+      <xsl:text>         }
+</xsl:text>
+    </xsl:for-each>
+    <xsl:variable name="new_expressions">
+      <xsl:for-each select="$expressions/expression">
+        <xsl:copy>
+          <xsl:copy-of select="@name"/>
+          <xsl:attribute name="content">
+            <xsl:value-of select="$varprefix"/>
+            <xsl:value-of select="position()"/>
+          </xsl:attribute>
+        </xsl:copy>
+      </xsl:for-each>
+    </xsl:variable>
+    <xsl:text>          id("</xsl:text>
+    <xsl:value-of select="@id"/>
+    <xsl:text>").style = "</xsl:text>
+    <xsl:value-of select="@style"/>
+    <xsl:text>";
+</xsl:text>
+    <xsl:apply-templates mode="json_table_render_except_comments" select="*">
+      <xsl:with-param name="expressions" select="func:json_expressions(exsl:node-set($new_expressions), $label)"/>
+      <xsl:with-param name="widget_elts" select="$widget_elts"/>
+    </xsl:apply-templates>
+    <xsl:text>        } catch(err) {
+</xsl:text>
+    <xsl:text>          id("</xsl:text>
+    <xsl:value-of select="$gid"/>
+    <xsl:text>").style = "display:none";
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='JsonTable']">
+    <xsl:param name="hmi_element"/>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>data</xsl:text>
+      </xsl:with-param>
+    </xsl:call-template>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>forward backward cursor</xsl:text>
+      </xsl:with-param>
+      <xsl:with-param name="mandatory" select="'no'"/>
+    </xsl:call-template>
+    <xsl:variable name="data_elt" select="$result_svg_ns//*[@id = $hmi_element/@id]/*[@inkscape:label = 'data']"/>
+    <xsl:text>    visible: </xsl:text>
+    <xsl:value-of select="count($data_elt/*[@inkscape:label])"/>
+    <xsl:text>,
+</xsl:text>
+    <xsl:text>    spread_json_data: function(janswer) {
+</xsl:text>
+    <xsl:text>        let [range,position,jdata] = janswer;
+</xsl:text>
+    <xsl:text>        this.apply_hmi_value(1, range);
+</xsl:text>
+    <xsl:text>        this.apply_hmi_value(2, position);
+</xsl:text>
+    <xsl:text>        this.apply_hmi_value(3, this.visible);
+</xsl:text>
+    <xsl:apply-templates mode="json_table_render_except_comments" select="$data_elt">
+      <xsl:with-param name="expressions" select="$initexpr_ns"/>
+      <xsl:with-param name="widget_elts" select="$hmi_element/*[@inkscape:label = 'data']/descendant::svg:*"/>
+    </xsl:apply-templates>
+    <xsl:text>    }
+</xsl:text>
+  </xsl:template>
+  <xsl:template name="jump_widget_activity">
+    <xsl:param name="hmi_element"/>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>active inactive</xsl:text>
+      </xsl:with-param>
+      <xsl:with-param name="mandatory" select="'no'"/>
+    </xsl:call-template>
+  </xsl:template>
+  <xsl:template name="jump_widget_disability">
+    <xsl:param name="hmi_element"/>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>disabled</xsl:text>
+      </xsl:with-param>
+      <xsl:with-param name="mandatory" select="'no'"/>
+    </xsl:call-template>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='Jump']">
+    <xsl:param name="hmi_element"/>
+    <xsl:variable name="activity">
+      <xsl:call-template name="jump_widget_activity">
+        <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      </xsl:call-template>
+    </xsl:variable>
+    <xsl:variable name="have_activity" select="string-length($activity)&gt;0"/>
+    <xsl:value-of select="$activity"/>
+    <xsl:variable name="disability">
+      <xsl:call-template name="jump_widget_disability">
+        <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      </xsl:call-template>
+    </xsl:variable>
+    <xsl:variable name="have_disability" select="$have_activity and string-length($disability)&gt;0"/>
+    <xsl:value-of select="$disability"/>
+    <xsl:if test="$have_activity">
+      <xsl:text>    active: false,
+</xsl:text>
+      <xsl:if test="$have_disability">
+        <xsl:text>    disabled: false,
+</xsl:text>
+        <xsl:text>    frequency: 2,
+</xsl:text>
+        <xsl:text>    dispatch: function(value) {
+</xsl:text>
+        <xsl:text>        this.disabled = !Number(value);
+</xsl:text>
+        <xsl:text>        this.update();
+</xsl:text>
+        <xsl:text>    },
+</xsl:text>
+      </xsl:if>
+      <xsl:text>    update: function(){
+</xsl:text>
+      <xsl:if test="$have_disability">
+        <xsl:text>      if(this.disabled) {
+</xsl:text>
+        <xsl:text>        /* show disabled */ 
+</xsl:text>
+        <xsl:text>        this.disabled_elt.setAttribute("style", this.active_elt_style);
+</xsl:text>
+        <xsl:text>        /* hide inactive */ 
+</xsl:text>
+        <xsl:text>        this.inactive_elt.setAttribute("style", "display:none");
+</xsl:text>
+        <xsl:text>        /* hide active */ 
+</xsl:text>
+        <xsl:text>        this.active_elt.setAttribute("style", "display:none");
+</xsl:text>
+        <xsl:text>      } else {
+</xsl:text>
+        <xsl:text>        /* hide disabled */ 
+</xsl:text>
+        <xsl:text>        this.disabled_elt.setAttribute("style", "display:none");
+</xsl:text>
+      </xsl:if>
+      <xsl:text>        if(this.active) {
+</xsl:text>
+      <xsl:text>             /* show active */ 
+</xsl:text>
+      <xsl:text>             this.active_elt.setAttribute("style", this.active_elt_style);
+</xsl:text>
+      <xsl:text>             /* hide inactive */ 
+</xsl:text>
+      <xsl:text>             this.inactive_elt.setAttribute("style", "display:none");
+</xsl:text>
+      <xsl:text>        } else {
+</xsl:text>
+      <xsl:text>             /* show inactive */ 
+</xsl:text>
+      <xsl:text>             this.inactive_elt.setAttribute("style", this.inactive_elt_style);
+</xsl:text>
+      <xsl:text>             /* hide active */ 
+</xsl:text>
+      <xsl:text>             this.active_elt.setAttribute("style", "display:none");
+</xsl:text>
+      <xsl:text>        }
+</xsl:text>
+      <xsl:if test="$have_disability">
+        <xsl:text>      }
+</xsl:text>
+      </xsl:if>
+      <xsl:text>    },
+</xsl:text>
+    </xsl:if>
+    <xsl:if test="$have_activity">
+      <xsl:text>    notify_page_change: function(page_name, index){
+</xsl:text>
+      <xsl:text>        const ref_index = this.indexes.length &gt; 0 ? this.indexes[0] + this.offset : undefined;
+</xsl:text>
+      <xsl:text>        const ref_name = this.args[0];
+</xsl:text>
+      <xsl:text>        this.active =((ref_name == undefined || ref_name == page_name) &amp;&amp; index == ref_index);
+</xsl:text>
+      <xsl:text>        this.update();
+</xsl:text>
+      <xsl:text>    },
+</xsl:text>
+    </xsl:if>
+    <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>            const index = that.indexes.length &gt; 0 ? that.indexes[0] + that.offset : undefined;
+</xsl:text>
+    <xsl:text>            switch_page(name, index);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    },
+</xsl:text>
+    <xsl:text>    init: function() {
+</xsl:text>
+    <xsl:text>        this.element.onclick = this.make_on_click();
+</xsl:text>
+    <xsl:if test="$have_activity">
+      <xsl:text>        this.active_elt_style = this.active_elt.getAttribute("style");
+</xsl:text>
+      <xsl:text>        this.inactive_elt_style = this.inactive_elt.getAttribute("style");
+</xsl:text>
+    </xsl:if>
+    <xsl:choose>
+      <xsl:when test="$have_disability">
+        <xsl:text>        this.disabled_elt_style = this.disabled_elt.getAttribute("style");
+</xsl:text>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:text>        this.unsubscribable = true;
+</xsl:text>
+      </xsl:otherwise>
+    </xsl:choose>
+    <xsl:text>    },
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="per_page_widget_template" match="widget[@type='Jump']">
+    <xsl:param name="page_desc"/>
+    <xsl:if test="path">
+      <xsl:variable name="target_page_name">
+        <xsl:choose>
+          <xsl:when test="arg">
+            <xsl:value-of select="arg[1]/@value"/>
+          </xsl:when>
+          <xsl:otherwise>
+            <xsl:value-of select="$page_desc/arg[1]/@value"/>
+          </xsl:otherwise>
+        </xsl:choose>
+      </xsl:variable>
+      <xsl:variable name="target_page_path">
+        <xsl:choose>
+          <xsl:when test="arg">
+            <xsl:value-of select="$hmi_pages_descs[arg[1]/@value = $target_page_name]/path[1]/@value"/>
+          </xsl:when>
+          <xsl:otherwise>
+            <xsl:value-of select="$page_desc/path[1]/@value"/>
+          </xsl:otherwise>
+        </xsl:choose>
+      </xsl:variable>
+      <xsl:if test="not(func:same_class_paths($target_page_path, path[1]/@value))">
+        <xsl:message terminate="yes">
+          <xsl:text>Jump id="</xsl:text>
+          <xsl:value-of select="@id"/>
+          <xsl:text>" to page "</xsl:text>
+          <xsl:value-of select="$target_page_name"/>
+          <xsl:text>" with incompatible path "</xsl:text>
+          <xsl:value-of select="path[1]/@value"/>
+          <xsl:text> (must be same class as "</xsl:text>
+          <xsl:value-of select="$target_page_path"/>
+          <xsl:text>")</xsl:text>
+        </xsl:message>
+      </xsl:if>
+    </xsl:if>
+  </xsl:template>
+  <declarations:jump/>
+  <xsl:template match="declarations:jump">
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* </xsl:text>
+    <xsl:value-of select="local-name()"/>
+    <xsl:text> */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>var jumps_need_update = false;
+</xsl:text>
+    <xsl:text>var jump_history = [[default_page, undefined]];
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>function update_jumps() {
+</xsl:text>
+    <xsl:text>    page_desc[current_visible_page].jumps.map(w=&gt;w.notify_page_change(current_visible_page,current_page_index));
+</xsl:text>
+    <xsl:text>    jumps_need_update = false;
+</xsl:text>
+    <xsl:text>};
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <declarations:keypad/>
+  <xsl:template match="declarations:keypad">
+    <xsl:text>
+</xsl:text>
+    <xsl:text>/* </xsl:text>
+    <xsl:value-of select="local-name()"/>
+    <xsl:text> */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>var keypads = {
+</xsl:text>
+    <xsl:for-each select="$keypads_descs">
+      <xsl:variable name="keypad_id" select="@id"/>
+      <xsl:for-each select="arg">
+        <xsl:variable name="g" select="$geometry[@Id = $keypad_id]"/>
+        <xsl:text>    "</xsl:text>
+        <xsl:value-of select="@value"/>
+        <xsl:text>":["</xsl:text>
+        <xsl:value-of select="$keypad_id"/>
+        <xsl:text>", </xsl:text>
+        <xsl:value-of select="$g/@x"/>
+        <xsl:text>, </xsl:text>
+        <xsl:value-of select="$g/@y"/>
+        <xsl:text>],
+</xsl:text>
+      </xsl:for-each>
+    </xsl:for-each>
+    <xsl:text>}
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_class" match="widget[@type='Keypad']">
+    <xsl:text>class KeypadWidget extends Widget{
+</xsl:text>
+    <xsl:text>     moving = undefined;
+</xsl:text>
+    <xsl:text>     click = undefined;
+</xsl:text>
+    <xsl:text>     offset = undefined;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>     on_position_click(evt) {
+</xsl:text>
+    <xsl:text>         this.moving = true;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>         // chatch window events
+</xsl:text>
+    <xsl:text>         window.addEventListener("touchmove", this.bound_on_drag, true);
+</xsl:text>
+    <xsl:text>         window.addEventListener("mousemove", this.bound_on_drag, true);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>         window.addEventListener("mouseup", this.bound_on_release, true)
+</xsl:text>
+    <xsl:text>         window.addEventListener("touchend", this.bound_on_release, true);
+</xsl:text>
+    <xsl:text>         window.addEventListener("touchcancel", this.bound_on_release, true);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>         // get click position offset from widget x,y and save it to variable
+</xsl:text>
+    <xsl:text>         var keypad_borders = this.position_elt.getBoundingClientRect();
+</xsl:text>
+    <xsl:text>         var clickX = undefined;
+</xsl:text>
+    <xsl:text>         var clickY = undefined;
+</xsl:text>
+    <xsl:text>         if (evt.type == "touchstart"){
+</xsl:text>
+    <xsl:text>             clickX = Math.ceil(evt.touches[0].clientX);
+</xsl:text>
+    <xsl:text>             clickY = Math.ceil(evt.touches[0].clientY);
+</xsl:text>
+    <xsl:text>         }
+</xsl:text>
+    <xsl:text>         else{
+</xsl:text>
+    <xsl:text>             clickX = evt.pageX;
+</xsl:text>
+    <xsl:text>             clickY = evt.pageY;
+</xsl:text>
+    <xsl:text>         }
+</xsl:text>
+    <xsl:text>         this.offset=[clickX-keypad_borders.left,clickY-keypad_borders.top]
+</xsl:text>
+    <xsl:text>     }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>     on_release(evt) {
+</xsl:text>
+    <xsl:text>        //relase binds
+</xsl:text>
+    <xsl:text>        window.removeEventListener("touchmove", this.bound_on_drag, true);
+</xsl:text>
+    <xsl:text>        window.removeEventListener("mousemove", this.bound_on_drag, true);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        window.removeEventListener("mouseup", this.bound_on_release, true)
+</xsl:text>
+    <xsl:text>        window.removeEventListener("touchend", this.bound_on_release, true);
+</xsl:text>
+    <xsl:text>        window.removeEventListener("touchcancel", this.bound_on_release, true);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        if(this.moving)
+</xsl:text>
+    <xsl:text>            this.moving = false;
+</xsl:text>
+    <xsl:text>     }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>     on_drag(evt) {
+</xsl:text>
+    <xsl:text>         if(this.moving)
+</xsl:text>
+    <xsl:text>            //get mouse coordinates
+</xsl:text>
+    <xsl:text>            var clickX = undefined;
+</xsl:text>
+    <xsl:text>            var clickY = undefined;
+</xsl:text>
+    <xsl:text>            if (evt.type == "touchmove"){
+</xsl:text>
+    <xsl:text>                clickX = Math.ceil(evt.touches[0].clientX);
+</xsl:text>
+    <xsl:text>                clickY = Math.ceil(evt.touches[0].clientY);
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            else{
+</xsl:text>
+    <xsl:text>                clickX = evt.pageX;
+</xsl:text>
+    <xsl:text>                clickY = evt.pageY;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            this.click = [clickX,clickY]
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            //requeset redraw
+</xsl:text>
+    <xsl:text>            this.request_animate();
+</xsl:text>
+    <xsl:text>     }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>     animate(){
+</xsl:text>
+    <xsl:text>        //get keyboard pos in html
+</xsl:text>
+    <xsl:text>        let [eltid, tmpgrp] = current_modal;
+</xsl:text>
+    <xsl:text>        let [xcoord,ycoord] = this.coordinates;
+</xsl:text>
+    <xsl:text>        let [clickX,clickY] = this.click;
+</xsl:text>
+    <xsl:text>        let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //translate keyboard position
+</xsl:text>
+    <xsl:text>        let mouseX = ((clickX-this.offset[0])/window.innerWidth)*svgWidth;
+</xsl:text>
+    <xsl:text>        let mouseY = ((clickY-this.offset[1])/window.innerHeight)*svgHeight;
+</xsl:text>
+    <xsl:text>        tmpgrp.setAttribute("transform","translate("+String(xdest-xcoord+mouseX)+","+String(ydest-ycoord+mouseY)+")");
+</xsl:text>
+    <xsl:text>     }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>     on_key_click(symbols) {
+</xsl:text>
+    <xsl:text>         var syms = symbols.split(" ");
+</xsl:text>
+    <xsl:text>         this.shift |= this.caps;
+</xsl:text>
+    <xsl:text>         this.editstr += syms[this.shift?syms.length-1:0];
+</xsl:text>
+    <xsl:text>         this.shift = false;
+</xsl:text>
+    <xsl:text>         this.update();
+</xsl:text>
+    <xsl:text>     }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>     on_Esc_click() {
+</xsl:text>
+    <xsl:text>         end_modal.call(this);
+</xsl:text>
+    <xsl:text>     }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>     on_Enter_click() {
+</xsl:text>
+    <xsl:text>         let coercedval = (typeof this.initial) == "number" ? Number(this.editstr) : this.editstr;
+</xsl:text>
+    <xsl:text>         if(typeof coercedval == 'number' &amp;&amp; isNaN(coercedval)){
+</xsl:text>
+    <xsl:text>             // revert to initial so it explicitely shows input was ignored
+</xsl:text>
+    <xsl:text>             this.editstr = String(this.initial);
+</xsl:text>
+    <xsl:text>             this.update();
+</xsl:text>
+    <xsl:text>         } else { 
+</xsl:text>
+    <xsl:text>             let callback_obj = this.result_callback_obj;
+</xsl:text>
+    <xsl:text>             end_modal.call(this);
+</xsl:text>
+    <xsl:text>             callback_obj.edit_callback(coercedval);
+</xsl:text>
+    <xsl:text>         }
+</xsl:text>
+    <xsl:text>     }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>     on_BackSpace_click() {
+</xsl:text>
+    <xsl:text>         this.editstr = this.editstr.slice(0,this.editstr.length-1);
+</xsl:text>
+    <xsl:text>         this.update();
+</xsl:text>
+    <xsl:text>     }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>     on_Sign_click() {
+</xsl:text>
+    <xsl:text>         if(this.editstr[0] == "-")
+</xsl:text>
+    <xsl:text>             this.editstr = this.editstr.slice(1,this.editstr.length);
+</xsl:text>
+    <xsl:text>         else
+</xsl:text>
+    <xsl:text>             this.editstr = "-" + this.editstr;
+</xsl:text>
+    <xsl:text>         this.update();
+</xsl:text>
+    <xsl:text>     }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>     on_NumDot_click() {
+</xsl:text>
+    <xsl:text>         if(this.editstr.indexOf(".") == "-1"){
+</xsl:text>
+    <xsl:text>             this.editstr += ".";
+</xsl:text>
+    <xsl:text>             this.update();
+</xsl:text>
+    <xsl:text>         }
+</xsl:text>
+    <xsl:text>     }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>     on_Space_click() {
+</xsl:text>
+    <xsl:text>         this.editstr += " ";
+</xsl:text>
+    <xsl:text>         this.update();
+</xsl:text>
+    <xsl:text>     }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>     caps = false;
+</xsl:text>
+    <xsl:text>     _caps = undefined;
+</xsl:text>
+    <xsl:text>     on_CapsLock_click() {
+</xsl:text>
+    <xsl:text>         this.caps = !this.caps;
+</xsl:text>
+    <xsl:text>         this.update();
+</xsl:text>
+    <xsl:text>     }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>     shift = false;
+</xsl:text>
+    <xsl:text>     _shift = undefined;
+</xsl:text>
+    <xsl:text>     on_Shift_click() {
+</xsl:text>
+    <xsl:text>         this.shift = !this.shift;
+</xsl:text>
+    <xsl:text>         this.caps = false;
+</xsl:text>
+    <xsl:text>         this.update();
+</xsl:text>
+    <xsl:text>     }
+</xsl:text>
+    <xsl:text>     editstr = "";
+</xsl:text>
+    <xsl:text>     _editstr = undefined;
+</xsl:text>
+    <xsl:text>     result_callback_obj = undefined;
+</xsl:text>
+    <xsl:text>     start_edit(info, valuetype, callback_obj, initial,size) {
+</xsl:text>
+    <xsl:text>         show_modal.call(this,size);
+</xsl:text>
+    <xsl:text>         this.editstr = String(initial);
+</xsl:text>
+    <xsl:text>         this.result_callback_obj = callback_obj;
+</xsl:text>
+    <xsl:text>         this.Info_elt.textContent = info;
+</xsl:text>
+    <xsl:text>         this.shift = false;
+</xsl:text>
+    <xsl:text>         this.caps = false;
+</xsl:text>
+    <xsl:text>         this.initial = initial;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>         this.update();
+</xsl:text>
+    <xsl:text>     }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>     update() {
+</xsl:text>
+    <xsl:text>         if(this.editstr != this._editstr){
+</xsl:text>
+    <xsl:text>             this._editstr = this.editstr;
+</xsl:text>
+    <xsl:text>             this.Value_elt.textContent = this.editstr;
+</xsl:text>
+    <xsl:text>         }
+</xsl:text>
+    <xsl:text>         if(this.shift != this._shift){
+</xsl:text>
+    <xsl:text>             this._shift = this.shift;
+</xsl:text>
+    <xsl:text>             (this.shift?widget_active_activable:widget_inactive_activable)(this.Shift_sub);
+</xsl:text>
+    <xsl:text>         }
+</xsl:text>
+    <xsl:text>         if(this.caps != this._caps){
+</xsl:text>
+    <xsl:text>             this._caps = this.caps;
+</xsl:text>
+    <xsl:text>             (this.caps?widget_active_activable:widget_inactive_activable)(this.CapsLock_sub);
+</xsl:text>
+    <xsl:text>         }
+</xsl:text>
+    <xsl:text>     }
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='Keypad']">
+    <xsl:param name="hmi_element"/>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>Esc Enter BackSpace Keys Info Value</xsl:text>
+      </xsl:with-param>
+    </xsl:call-template>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>Sign Space NumDot position</xsl:text>
+      </xsl:with-param>
+      <xsl:with-param name="mandatory" select="'no'"/>
+    </xsl:call-template>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>CapsLock Shift</xsl:text>
+      </xsl:with-param>
+      <xsl:with-param name="mandatory" select="'no'"/>
+      <xsl:with-param name="subelements" select="'active inactive'"/>
+    </xsl:call-template>
+    <xsl:text>    init: function() {
+</xsl:text>
+    <xsl:for-each select="$hmi_element/*[@inkscape:label = 'Keys']/*">
+      <xsl:text>        id("</xsl:text>
+      <xsl:value-of select="@id"/>
+      <xsl:text>").setAttribute("onclick", "hmi_widgets['</xsl:text>
+      <xsl:value-of select="$hmi_element/@id"/>
+      <xsl:text>'].on_key_click('</xsl:text>
+      <xsl:value-of select="func:escape_quotes(@inkscape:label)"/>
+      <xsl:text>')");
+</xsl:text>
+    </xsl:for-each>
+    <xsl:for-each select="str:split('Esc Enter BackSpace Sign Space NumDot CapsLock Shift')">
+      <xsl:text>        if(this.</xsl:text>
+      <xsl:value-of select="."/>
+      <xsl:text>_elt)
+</xsl:text>
+      <xsl:text>            this.</xsl:text>
+      <xsl:value-of select="."/>
+      <xsl:text>_elt.setAttribute("onclick", "hmi_widgets['</xsl:text>
+      <xsl:value-of select="$hmi_element/@id"/>
+      <xsl:text>'].on_</xsl:text>
+      <xsl:value-of select="."/>
+      <xsl:text>_click()");
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>        if(this.position_elt){
+</xsl:text>
+    <xsl:text>           this.bound_on_release = this.on_release.bind(this);
+</xsl:text>
+    <xsl:text>           this.bound_on_drag = this.on_drag.bind(this);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>           this.position_elt.setAttribute("onmousedown", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)");
+</xsl:text>
+    <xsl:text>           this.position_elt.setAttribute("ontouchstart", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)");
+</xsl:text>
+    <xsl:text>       }
+</xsl:text>
+    <xsl:text>    },
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:variable name="g" select="$geometry[@Id = $hmi_element/@id]"/>
+    <xsl:text>    coordinates: [</xsl:text>
+    <xsl:value-of select="$g/@x"/>
+    <xsl:text>, </xsl:text>
+    <xsl:value-of select="$g/@y"/>
+    <xsl:text>],
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='List']">
+    <xsl:param name="hmi_element"/>
+    <xsl:text>    items: {
+</xsl:text>
+    <xsl:for-each select="$hmi_element/*[@inkscape:label]">
+      <xsl:text>        </xsl:text>
+      <xsl:value-of select="@inkscape:label"/>
+      <xsl:text>: "</xsl:text>
+      <xsl:value-of select="@id"/>
+      <xsl:text>",
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>    },
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='TextStyleList']">
+    <xsl:param name="hmi_element"/>
+    <xsl:text>    styles: {
+</xsl:text>
+    <xsl:for-each select="$hmi_element/*[@inkscape:label]">
+      <xsl:variable name="style" select="func:refered_elements(.)[self::svg:text]/@style"/>
+      <xsl:text>        </xsl:text>
+      <xsl:value-of select="@inkscape:label"/>
+      <xsl:text>: "</xsl:text>
+      <xsl:value-of select="$style"/>
+      <xsl:text>",
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>    },
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_class" match="widget[@type='Meter']">
+    <xsl:text>class MeterWidget extends Widget{
+</xsl:text>
+    <xsl:text>    frequency = 10;
+</xsl:text>
+    <xsl:text>    origin = undefined;
+</xsl:text>
+    <xsl:text>    range = undefined;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    dispatch(value) {
+</xsl:text>
+    <xsl:text>        if(this.value_elt)
+</xsl:text>
+    <xsl:text>            this.value_elt.textContent = String(value);
+</xsl:text>
+    <xsl:text>        let [min,max,totallength] = this.range;
+</xsl:text>
+    <xsl:text>        let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min)));
+</xsl:text>
+    <xsl:text>        let tip = this.range_elt.getPointAtLength(length);
+</xsl:text>
+    <xsl:text>        this.needle_elt.setAttribute('d', "M "+this.origin.x+","+this.origin.y+" "+tip.x+","+tip.y);
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    init() {
+</xsl:text>
+    <xsl:text>        let min = this.min_elt ?
+</xsl:text>
+    <xsl:text>                    Number(this.min_elt.textContent) :
+</xsl:text>
+    <xsl:text>                    this.args.length &gt;= 1 ? this.args[0] : 0;
+</xsl:text>
+    <xsl:text>        let max = this.max_elt ?
+</xsl:text>
+    <xsl:text>                    Number(this.max_elt.textContent) :
+</xsl:text>
+    <xsl:text>                    this.args.length &gt;= 2 ? this.args[1] : 100;
+</xsl:text>
+    <xsl:text>        this.range = [min, max, this.range_elt.getTotalLength()]
+</xsl:text>
+    <xsl:text>        this.origin = this.needle_elt.getPointAtLength(0);
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='Meter']">
+    <xsl:param name="hmi_element"/>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>needle range</xsl:text>
+      </xsl:with-param>
+    </xsl:call-template>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>value min max</xsl:text>
+      </xsl:with-param>
+      <xsl:with-param name="mandatory" select="'no'"/>
+    </xsl:call-template>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_class" match="widget[@type='MultiState']">
+    <xsl:text>class MultiStateWidget extends Widget{
+</xsl:text>
+    <xsl:text>    frequency = 5;
+</xsl:text>
+    <xsl:text>    state = 0;
+</xsl:text>
+    <xsl:text>    dispatch(value) {
+</xsl:text>
+    <xsl:text>        this.state = value;
+</xsl:text>
+    <xsl:text>        for(let choice of this.choices){
+</xsl:text>
+    <xsl:text>            if(this.state != choice.value){
+</xsl:text>
+    <xsl:text>                choice.elt.setAttribute("style", "display:none");
+</xsl:text>
+    <xsl:text>            } else {
+</xsl:text>
+    <xsl:text>                choice.elt.setAttribute("style", choice.style);
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    on_click(evt) {
+</xsl:text>
+    <xsl:text>        //get current selected value
+</xsl:text>
+    <xsl:text>        let next_ind;
+</xsl:text>
+    <xsl:text>        for(next_ind=0; next_ind&lt;this.choices.length; next_ind++){
+</xsl:text>
+    <xsl:text>            if(this.state == this.choices[next_ind].value){
+</xsl:text>
+    <xsl:text>               next_ind = next_ind + 1;
+</xsl:text>
+    <xsl:text>               break;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //get next selected value
+</xsl:text>
+    <xsl:text>        if(this.choices.length &gt; next_ind){
+</xsl:text>
+    <xsl:text>            this.state = this.choices[next_ind].value;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        else{
+</xsl:text>
+    <xsl:text>            this.state = this.choices[0].value;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //post value to plc
+</xsl:text>
+    <xsl:text>        this.apply_hmi_value(0, this.state);
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    init() {
+</xsl:text>
+    <xsl:text>        this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='MultiState']">
+    <xsl:param name="hmi_element"/>
+    <xsl:text>    choices: [
+</xsl:text>
+    <xsl:variable name="regex" select="'^(&quot;[^&quot;].*&quot;|\-?[0-9]+|false|true)(#.*)?$'"/>
+    <xsl:for-each select="$result_svg_ns//*[@id = $hmi_element/@id]//*[regexp:test(@inkscape:label,$regex)]">
+      <xsl:variable name="literal" select="regexp:match(@inkscape:label,$regex)[2]"/>
+      <xsl:text>        {
+</xsl:text>
+      <xsl:text>            elt:id("</xsl:text>
+      <xsl:value-of select="@id"/>
+      <xsl:text>"),
+</xsl:text>
+      <xsl:text>            style:"</xsl:text>
+      <xsl:value-of select="@style"/>
+      <xsl:text>",
+</xsl:text>
+      <xsl:text>            value:</xsl:text>
+      <xsl:value-of select="$literal"/>
+      <xsl:text>
+</xsl:text>
+      <xsl:text>        }</xsl:text>
+      <xsl:if test="position()!=last()">
+        <xsl:text>,</xsl:text>
+      </xsl:if>
+      <xsl:text>
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>    ],
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_class" match="widget[@type='Slider']">
+    <xsl:text>class SliderWidget extends Widget{
+</xsl:text>
+    <xsl:text>    frequency = 5;
+</xsl:text>
+    <xsl:text>    range = undefined;
+</xsl:text>
+    <xsl:text>    handle_orig = undefined;
+</xsl:text>
+    <xsl:text>    scroll_size = undefined;
+</xsl:text>
+    <xsl:text>    scroll_range = 0;
+</xsl:text>
+    <xsl:text>    scroll_visible = 7;
+</xsl:text>
+    <xsl:text>    min_size = 0.07;
+</xsl:text>
+    <xsl:text>    fi = undefined;
+</xsl:text>
+    <xsl:text>    curr_value = 0;
+</xsl:text>
+    <xsl:text>    drag = false;
+</xsl:text>
+    <xsl:text>    enTimer = false;
+</xsl:text>
+    <xsl:text>    handle_click = undefined;
+</xsl:text>
+    <xsl:text>    last_drag = false;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    dispatch(value,oldval, index) {
+</xsl:text>
+    <xsl:text>        if (index == 0){
+</xsl:text>
+    <xsl:text>            let [min,max,start,totallength] = this.range;
+</xsl:text>
+    <xsl:text>            //save current value inside widget
+</xsl:text>
+    <xsl:text>            this.curr_value = value;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            //check if in range
+</xsl:text>
+    <xsl:text>            if (this.curr_value &gt; max){
+</xsl:text>
+    <xsl:text>                this.curr_value = max;
+</xsl:text>
+    <xsl:text>                this.apply_hmi_value(0, this.curr_value);
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            else if (this.curr_value &lt; min){
+</xsl:text>
+    <xsl:text>                this.curr_value = min;
+</xsl:text>
+    <xsl:text>                this.apply_hmi_value(0, this.curr_value);
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            if(this.value_elt)
+</xsl:text>
+    <xsl:text>                this.value_elt.textContent = String(value);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        else if(index == 1){
+</xsl:text>
+    <xsl:text>            this.scroll_range = value;
+</xsl:text>
+    <xsl:text>            this.set_scroll();
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        else if(index == 2){
+</xsl:text>
+    <xsl:text>            this.scroll_visible = value;
+</xsl:text>
+    <xsl:text>            this.set_scroll();
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //don't update if draging and setpoint ghost doesn't exist
+</xsl:text>
+    <xsl:text>        if(!this.drag || (this.setpoint_elt != undefined)){
+</xsl:text>
+    <xsl:text>            this.update_DOM(this.curr_value, this.handle_elt);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    set_scroll(){
+</xsl:text>
+    <xsl:text>        //check if range is bigger than visible and set scroll size
+</xsl:text>
+    <xsl:text>        if(this.scroll_range &gt; this.scroll_visible){
+</xsl:text>
+    <xsl:text>            this.scroll_size = this.scroll_range - this.scroll_visible;
+</xsl:text>
+    <xsl:text>            this.range[0] = 0;
+</xsl:text>
+    <xsl:text>            this.range[1] = this.scroll_size;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        else{
+</xsl:text>
+    <xsl:text>            this.scroll_size = 1;
+</xsl:text>
+    <xsl:text>            this.range[0] = 0;
+</xsl:text>
+    <xsl:text>            this.range[1] = 1;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    update_DOM(value, elt){
+</xsl:text>
+    <xsl:text>        let [min,max,start,totallength] = this.range;
+</xsl:text>
+    <xsl:text>        // check if handle is resizeable
+</xsl:text>
+    <xsl:text>        if (this.scroll_size != undefined){ //size changes
+</xsl:text>
+    <xsl:text>            //get parameters
+</xsl:text>
+    <xsl:text>            let length = Math.max(min,Math.min(max,(Number(value)-min)*max/(max-min)));
+</xsl:text>
+    <xsl:text>            let tip = this.range_elt.getPointAtLength(length);
+</xsl:text>
+    <xsl:text>            let handle_min = totallength*this.min_size;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            let step = 1;
+</xsl:text>
+    <xsl:text>            //check if range is bigger than  max displayed and recalculate step
+</xsl:text>
+    <xsl:text>            if ((totallength/handle_min) &lt; (max-min+1)){
+</xsl:text>
+    <xsl:text>                step = (max-min+1)/(totallength/handle_min-1);
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            let kx,ky,offseY,offseX = undefined;
+</xsl:text>
+    <xsl:text>            //scale on x or y axes
+</xsl:text>
+    <xsl:text>            if (this.fi &gt; 0.75){
+</xsl:text>
+    <xsl:text>                //get scale factor
+</xsl:text>
+    <xsl:text>                if(step &gt; 1){
+</xsl:text>
+    <xsl:text>                    ky = handle_min/this.handle_orig.height;
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                else{
+</xsl:text>
+    <xsl:text>                    ky = (totallength-handle_min*(max-min))/this.handle_orig.height;
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                kx = 1;
+</xsl:text>
+    <xsl:text>                //get 0 offset to stay inside range
+</xsl:text>
+    <xsl:text>                offseY = start.y - (this.handle_orig.height + this.handle_orig.y) * ky;
+</xsl:text>
+    <xsl:text>                offseX = 0;
+</xsl:text>
+    <xsl:text>                //get distance from value
+</xsl:text>
+    <xsl:text>                tip.y =this.range_elt.getPointAtLength(0).y - length/step *handle_min;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            else{
+</xsl:text>
+    <xsl:text>                //get scale factor
+</xsl:text>
+    <xsl:text>                if(step &gt; 1){
+</xsl:text>
+    <xsl:text>                    kx = handle_min/this.handle_orig.width;
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                else{
+</xsl:text>
+    <xsl:text>                    kx = (totallength-handle_min*(max-min))/this.handle_orig.width;
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                ky = 1;
+</xsl:text>
+    <xsl:text>                //get 0 offset to stay inside range
+</xsl:text>
+    <xsl:text>                offseX = start.x - (this.handle_orig.x * kx);
+</xsl:text>
+    <xsl:text>                offseY = 0;
+</xsl:text>
+    <xsl:text>                //get distance from value
+</xsl:text>
+    <xsl:text>                tip.x =this.range_elt.getPointAtLength(0).x + length/step *handle_min;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            elt.setAttribute('transform',"matrix("+(kx)+" 0 0 "+(ky)+" "+(tip.x-start.x+offseX)+" "+(tip.y-start.y+offseY)+")");
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        else{ //size stays the same
+</xsl:text>
+    <xsl:text>            let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min)));
+</xsl:text>
+    <xsl:text>            let tip = this.range_elt.getPointAtLength(length);
+</xsl:text>
+    <xsl:text>            elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")");
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // show or hide ghost if exists
+</xsl:text>
+    <xsl:text>        if(this.setpoint_elt != undefined){
+</xsl:text>
+    <xsl:text>            if(this.last_drag!= this.drag){
+</xsl:text>
+    <xsl:text>                if(this.drag){
+</xsl:text>
+    <xsl:text>                    this.setpoint_elt.setAttribute("style", this.setpoint_style);
+</xsl:text>
+    <xsl:text>                }else{
+</xsl:text>
+    <xsl:text>                    this.setpoint_elt.setAttribute("style", "display:none");
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                this.last_drag = this.drag;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    on_release(evt) {
+</xsl:text>
+    <xsl:text>        //unbind events
+</xsl:text>
+    <xsl:text>        window.removeEventListener("touchmove", this.on_bound_drag, true);
+</xsl:text>
+    <xsl:text>        window.removeEventListener("mousemove", this.on_bound_drag, true);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        window.removeEventListener("mouseup", this.bound_on_release, true);
+</xsl:text>
+    <xsl:text>        window.removeEventListener("touchend", this.bound_on_release, true);
+</xsl:text>
+    <xsl:text>        window.removeEventListener("touchcancel", this.bound_on_release, true);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //reset drag flag
+</xsl:text>
+    <xsl:text>        if(this.drag){
+</xsl:text>
+    <xsl:text>            this.drag = false;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // get final position
+</xsl:text>
+    <xsl:text>        this.update_position(evt);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    on_drag(evt){
+</xsl:text>
+    <xsl:text>        //ignore drag event for X amount of time and if not selected
+</xsl:text>
+    <xsl:text>        if(this.enTimer &amp;&amp; this.drag){
+</xsl:text>
+    <xsl:text>            this.update_position(evt);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            //reset timer
+</xsl:text>
+    <xsl:text>            this.enTimer = false;
+</xsl:text>
+    <xsl:text>            setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    update_position(evt){
+</xsl:text>
+    <xsl:text>        var html_dist = 0;
+</xsl:text>
+    <xsl:text>        let [min,max,start,totallength] = this.range;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //calculate size of widget in html
+</xsl:text>
+    <xsl:text>        var range_borders = this.range_elt.getBoundingClientRect();
+</xsl:text>
+    <xsl:text>        var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top];
+</xsl:text>
+    <xsl:text>        var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width );
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //get range and mouse coordinates
+</xsl:text>
+    <xsl:text>        var mouseX = undefined;
+</xsl:text>
+    <xsl:text>        var mouseY = undefined;
+</xsl:text>
+    <xsl:text>        if (evt.type.startsWith("touch")){
+</xsl:text>
+    <xsl:text>            mouseX = Math.ceil(evt.touches[0].clientX);
+</xsl:text>
+    <xsl:text>            mouseY = Math.ceil(evt.touches[0].clientY);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        else{
+</xsl:text>
+    <xsl:text>            mouseX = evt.pageX;
+</xsl:text>
+    <xsl:text>            mouseY = evt.pageY;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // calculate position
+</xsl:text>
+    <xsl:text>        if (this.handle_click){ //if clicked on handle
+</xsl:text>
+    <xsl:text>            let moveDist = 0, resizeAdd = 0;
+</xsl:text>
+    <xsl:text>            let range_percent = 1;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            //set paramters for resizeable handle
+</xsl:text>
+    <xsl:text>            if (this.scroll_size != undefined){
+</xsl:text>
+    <xsl:text>                // add one more object to stay inside range
+</xsl:text>
+    <xsl:text>                resizeAdd = 1;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>                //chack if range is bigger than display option and
+</xsl:text>
+    <xsl:text>                // calculate percent of range with out handle
+</xsl:text>
+    <xsl:text>                if(((max/(max*this.min_size)) &lt; (max-min+1))){
+</xsl:text>
+    <xsl:text>                    range_percent = 1-this.min_size;
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                else{
+</xsl:text>
+    <xsl:text>                    range_percent = 1-(max-max*this.min_size*(max-min))/max;
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            //calculate value difference on x or y axis
+</xsl:text>
+    <xsl:text>            if(this.fi &gt; 0.7){
+</xsl:text>
+    <xsl:text>                moveDist = ((max-min+resizeAdd)/(range_length*range_percent))*((this.handle_click[1]-mouseY)/Math.sin(this.fi));
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            else{
+</xsl:text>
+    <xsl:text>                moveDist = ((max-min+resizeAdd)/(range_length*range_percent))*((mouseX-this.handle_click[0])/Math.cos(this.fi));
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            this.curr_value = Math.ceil(this.handle_click[2] + moveDist);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        else{ //if clicked on widget
+</xsl:text>
+    <xsl:text>            //get handle distance from mouse position
+</xsl:text>
+    <xsl:text>            if (minX &gt; mouseX &amp;&amp; minY &lt; mouseY){
+</xsl:text>
+    <xsl:text>                html_dist = 0;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            else if (maxX &lt; mouseX &amp;&amp; maxY &gt; mouseY){
+</xsl:text>
+    <xsl:text>                html_dist = range_length;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            else{
+</xsl:text>
+    <xsl:text>                if(this.fi &gt; 0.7){
+</xsl:text>
+    <xsl:text>                    html_dist = (minY - mouseY)/Math.sin(this.fi);
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>                else{
+</xsl:text>
+    <xsl:text>                    html_dist = (mouseX - minX)/Math.cos(this.fi);
+</xsl:text>
+    <xsl:text>                }
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            //calculate distance
+</xsl:text>
+    <xsl:text>            this.curr_value=Math.ceil((html_dist/range_length)*(this.range[1]-this.range[0])+this.range[0]);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //check if in range and apply
+</xsl:text>
+    <xsl:text>        if (this.curr_value &gt; max){
+</xsl:text>
+    <xsl:text>            this.curr_value = max;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        else if (this.curr_value &lt; min){
+</xsl:text>
+    <xsl:text>            this.curr_value = min;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        this.apply_hmi_value(0, this.curr_value);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //redraw handle
+</xsl:text>
+    <xsl:text>        this.request_animate();
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    animate(){
+</xsl:text>
+    <xsl:text>        // redraw handle on screen refresh
+</xsl:text>
+    <xsl:text>        // check if setpoint(ghost) handle exsist otherwise update main handle
+</xsl:text>
+    <xsl:text>        if(this.setpoint_elt != undefined){
+</xsl:text>
+    <xsl:text>            this.update_DOM(this.curr_value, this.setpoint_elt);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        else{
+</xsl:text>
+    <xsl:text>            this.update_DOM(this.curr_value, this.handle_elt);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    on_select(evt){
+</xsl:text>
+    <xsl:text>        //enable drag flag and timer
+</xsl:text>
+    <xsl:text>        this.drag = true;
+</xsl:text>
+    <xsl:text>        this.enTimer = true;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //bind events
+</xsl:text>
+    <xsl:text>        window.addEventListener("touchmove", this.on_bound_drag, true);
+</xsl:text>
+    <xsl:text>        window.addEventListener("mousemove", this.on_bound_drag, true);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        window.addEventListener("mouseup", this.bound_on_release, true);
+</xsl:text>
+    <xsl:text>        window.addEventListener("touchend", this.bound_on_release, true);
+</xsl:text>
+    <xsl:text>        window.addEventListener("touchcancel", this.bound_on_release, true);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // check if handle was pressed
+</xsl:text>
+    <xsl:text>        if (evt.currentTarget == this.handle_elt){
+</xsl:text>
+    <xsl:text>            //get mouse position on the handle
+</xsl:text>
+    <xsl:text>            let mouseX = undefined;
+</xsl:text>
+    <xsl:text>            let mouseY = undefined;
+</xsl:text>
+    <xsl:text>            if (evt.type.startsWith("touch")){
+</xsl:text>
+    <xsl:text>                mouseX = Math.ceil(evt.touches[0].clientX);
+</xsl:text>
+    <xsl:text>                mouseY = Math.ceil(evt.touches[0].clientY);
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            else{
+</xsl:text>
+    <xsl:text>                mouseX = evt.pageX;
+</xsl:text>
+    <xsl:text>                mouseY = evt.pageY;
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>            //save coordinates and orig value
+</xsl:text>
+    <xsl:text>            this.handle_click = [mouseX,mouseY,this.curr_value];
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        else{
+</xsl:text>
+    <xsl:text>            // get new handle position and reset if handle was not pressed
+</xsl:text>
+    <xsl:text>            this.handle_click = undefined;
+</xsl:text>
+    <xsl:text>            this.update_position(evt);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //prevent next events
+</xsl:text>
+    <xsl:text>        evt.stopPropagation();
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    init() {
+</xsl:text>
+    <xsl:text>        //set min max value if not defined
+</xsl:text>
+    <xsl:text>        let min = this.min_elt ?
+</xsl:text>
+    <xsl:text>                    Number(this.min_elt.textContent) :
+</xsl:text>
+    <xsl:text>                    this.args.length &gt;= 1 ? this.args[0] : 0;
+</xsl:text>
+    <xsl:text>        let max = this.max_elt ?
+</xsl:text>
+    <xsl:text>                    Number(this.max_elt.textContent) :
+</xsl:text>
+    <xsl:text>                    this.args.length &gt;= 2 ? this.args[1] : 100;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // save initial parameters
+</xsl:text>
+    <xsl:text>        this.range_elt.style.strokeMiterlimit="0";
+</xsl:text>
+    <xsl:text>        this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()];
+</xsl:text>
+    <xsl:text>        let start = this.range_elt.getPointAtLength(0);
+</xsl:text>
+    <xsl:text>        let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength());
+</xsl:text>
+    <xsl:text>        this.fi = Math.atan2(start.y-end.y, end.x-start.x);
+</xsl:text>
+    <xsl:text>        this.handle_orig = this.handle_elt.getBBox();
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //bind functions
+</xsl:text>
+    <xsl:text>        this.bound_on_select = this.on_select.bind(this);
+</xsl:text>
+    <xsl:text>        this.bound_on_release = this.on_release.bind(this);
+</xsl:text>
+    <xsl:text>        this.on_bound_drag = this.on_drag.bind(this);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        this.handle_elt.addEventListener("mousedown", this.bound_on_select);
+</xsl:text>
+    <xsl:text>        this.element.addEventListener("mousedown", this.bound_on_select);
+</xsl:text>
+    <xsl:text>        this.element.addEventListener("touchstart", this.bound_on_select);
+</xsl:text>
+    <xsl:text>        //touch recognised as page drag without next command
+</xsl:text>
+    <xsl:text>        document.body.addEventListener("touchstart", function(e){}, false);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //save ghost style
+</xsl:text>
+    <xsl:text>        if(this.setpoint_elt != undefined){
+</xsl:text>
+    <xsl:text>            this.setpoint_style = this.setpoint_elt.getAttribute("style");
+</xsl:text>
+    <xsl:text>            this.setpoint_elt.setAttribute("style", "display:none");
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='Slider']">
+    <xsl:param name="hmi_element"/>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>handle range</xsl:text>
+      </xsl:with-param>
+    </xsl:call-template>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>value min max setpoint</xsl:text>
+      </xsl:with-param>
+      <xsl:with-param name="mandatory" select="'no'"/>
+    </xsl:call-template>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_class" match="widget[@type='Switch']">
+    <xsl:text>class SwitchWidget extends Widget{
+</xsl:text>
+    <xsl:text>    frequency = 5;
+</xsl:text>
+    <xsl:text>    dispatch(value) {
+</xsl:text>
+    <xsl:text>        for(let choice of this.choices){
+</xsl:text>
+    <xsl:text>            if(value != choice.value){
+</xsl:text>
+    <xsl:text>                choice.elt.setAttribute("style", "display:none");
+</xsl:text>
+    <xsl:text>            } else {
+</xsl:text>
+    <xsl:text>                choice.elt.setAttribute("style", choice.style);
+</xsl:text>
+    <xsl:text>            }
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='Switch']">
+    <xsl:param name="hmi_element"/>
+    <xsl:text>    choices: [
+</xsl:text>
+    <xsl:variable name="regex" select="'^(&quot;[^&quot;].*&quot;|\-?[0-9]+|false|true)(#.*)?$'"/>
+    <xsl:for-each select="$result_svg_ns//*[@id = $hmi_element/@id]//*[regexp:test(@inkscape:label,$regex)]">
+      <xsl:variable name="literal" select="regexp:match(@inkscape:label,$regex)[2]"/>
+      <xsl:text>        {
+</xsl:text>
+      <xsl:text>            elt:id("</xsl:text>
+      <xsl:value-of select="@id"/>
+      <xsl:text>"),
+</xsl:text>
+      <xsl:text>            style:"</xsl:text>
+      <xsl:value-of select="@style"/>
+      <xsl:text>",
+</xsl:text>
+      <xsl:text>            value:</xsl:text>
+      <xsl:value-of select="$literal"/>
+      <xsl:text>
+</xsl:text>
+      <xsl:text>        }</xsl:text>
+      <xsl:if test="position()!=last()">
+        <xsl:text>,</xsl:text>
+      </xsl:if>
+      <xsl:text>
+</xsl:text>
+    </xsl:for-each>
+    <xsl:text>    ],
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_class" match="widget[@type='ToggleButton']">
+    <xsl:text>class ToggleButtonWidget extends Widget{
+</xsl:text>
+    <xsl:text>    frequency = 5;
+</xsl:text>
+    <xsl:text>    state = 0;
+</xsl:text>
+    <xsl:text>    active_style = undefined;
+</xsl:text>
+    <xsl:text>    inactive_style = undefined;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    dispatch(value) {
+</xsl:text>
+    <xsl:text>        this.state = value;
+</xsl:text>
+    <xsl:text>        //redraw toggle button
+</xsl:text>
+    <xsl:text>        this.request_animate();
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    on_click(evt) {
+</xsl:text>
+    <xsl:text>        //toggle state and apply
+</xsl:text>
+    <xsl:text>        if (this.state) {
+</xsl:text>
+    <xsl:text>            this.state = 0;
+</xsl:text>
+    <xsl:text>        } else {
+</xsl:text>
+    <xsl:text>            this.state = 1;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        this.apply_hmi_value(0, this.state);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        //redraw toggle button
+</xsl:text>
+    <xsl:text>        this.request_animate();
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    animate(){
+</xsl:text>
+    <xsl:text>       // redraw toggle button on screen refresh
+</xsl:text>
+    <xsl:text>       if (this.state) {
+</xsl:text>
+    <xsl:text>           this.active_elt.setAttribute("style", this.active_style);
+</xsl:text>
+    <xsl:text>           this.inactive_elt.setAttribute("style", "display:none");
+</xsl:text>
+    <xsl:text>       } else {
+</xsl:text>
+    <xsl:text>           this.inactive_elt.setAttribute("style", this.inactive_style);
+</xsl:text>
+    <xsl:text>           this.active_elt.setAttribute("style", "display:none");
+</xsl:text>
+    <xsl:text>       }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    init() {
+</xsl:text>
+    <xsl:text>        this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined;
+</xsl:text>
+    <xsl:text>        this.inactive_style = this.inactive_elt ? this.inactive_elt.style.cssText : undefined;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        if (this.active_style &amp;&amp; this.inactive_style) {
+</xsl:text>
+    <xsl:text>            this.active_elt.setAttribute("style", "display:none");
+</xsl:text>
+    <xsl:text>            this.inactive_elt.setAttribute("style", this.inactive_style);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>}
+</xsl:text>
+  </xsl:template>
+  <xsl:template mode="widget_defs" match="widget[@type='ToggleButton']">
+    <xsl:param name="hmi_element"/>
+    <xsl:call-template name="defs_by_labels">
+      <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>active inactive</xsl:text>
+      </xsl:with-param>
+      <xsl:with-param name="mandatory" select="'no'"/>
+    </xsl:call-template>
+    <xsl:text>
+</xsl:text>
+  </xsl:template>
+  <xsl:template match="/">
+    <xsl:comment>
+      <xsl:text>Made with SVGHMI. https://beremiz.org</xsl:text>
+    </xsl:comment>
+    <xsl:comment>
+      <xsl:apply-templates select="document('')/*/debug:*"/>
+    </xsl:comment>
+    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <head/>
+      <body style="margin:0;overflow:hidden;user-select:none;touch-action:none;">
+        <xsl:copy-of select="$result_svg"/>
+        <script>
+          <xsl:text>
+//
+//
+// Early independent declarations 
+//
+//
+</xsl:text>
+          <xsl:apply-templates select="document('')/*/preamble:*"/>
+          <xsl:text>
+//
+//
+// Declarations depending on preamble 
+//
+//
+</xsl:text>
+          <xsl:apply-templates select="document('')/*/declarations:*"/>
+          <xsl:text>
+//
+//
+// Order independent declaration and code 
+//
+//
+</xsl:text>
+          <xsl:apply-templates select="document('')/*/definitions:*"/>
+          <xsl:text>
+//
+//
+// Statements that needs to be at the end 
+//
+//
+</xsl:text>
+          <xsl:apply-templates select="document('')/*/epilogue:*"/>
+          <xsl:text>// svghmi.js
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>var updates = {};
+</xsl:text>
+          <xsl:text>var need_cache_apply = [];
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function dispatch_value(index, value) {
+</xsl:text>
+          <xsl:text>    let widgets = subscribers(index);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    let oldval = cache[index];
+</xsl:text>
+          <xsl:text>    cache[index] = value;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    if(widgets.size &gt; 0) {
+</xsl:text>
+          <xsl:text>        for(let widget of widgets){
+</xsl:text>
+          <xsl:text>            widget.new_hmi_value(index, value, oldval);
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function init_widgets() {
+</xsl:text>
+          <xsl:text>    Object.keys(hmi_widgets).forEach(function(id) {
+</xsl:text>
+          <xsl:text>        let widget = hmi_widgets[id];
+</xsl:text>
+          <xsl:text>        let init = widget.init;
+</xsl:text>
+          <xsl:text>        if(typeof(init) == "function"){
+</xsl:text>
+          <xsl:text>            try {
+</xsl:text>
+          <xsl:text>                init.call(widget);
+</xsl:text>
+          <xsl:text>            } catch(err) {
+</xsl:text>
+          <xsl:text>                console.log(err);
+</xsl:text>
+          <xsl:text>            }
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    });
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// Open WebSocket to relative "/ws" address
+</xsl:text>
+          <xsl:text>var ws = new WebSocket(window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws'));
+</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>    for(let index in updates){
+</xsl:text>
+          <xsl:text>        // serving as a key, index becomes a string
+</xsl:text>
+          <xsl:text>        // -&gt; pass Number(index) instead
+</xsl:text>
+          <xsl:text>        dispatch_value(Number(index), updates[index]);
+</xsl:text>
+          <xsl:text>        delete updates[index];
+</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>    // Do the page swith if any one pending
+</xsl:text>
+          <xsl:text>    if(current_subscribed_page != current_visible_page){
+</xsl:text>
+          <xsl:text>        switch_visible_page(current_subscribed_page);
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    while(widget = need_cache_apply.pop()){
+</xsl:text>
+          <xsl:text>        widget.apply_cache();
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    if(jumps_need_update) update_jumps();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    apply_updates();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    pending_widget_animates.forEach(widget =&gt; widget._animate());
+</xsl:text>
+          <xsl:text>    pending_widget_animates = [];
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    requestAnimationFrameID = null;
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function requestHMIAnimation() {
+</xsl:text>
+          <xsl:text>    if(requestAnimationFrameID == null){
+</xsl:text>
+          <xsl:text>        requestAnimationFrameID = window.requestAnimationFrame(animate);
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// Message reception handler
+</xsl:text>
+          <xsl:text>// Hash is verified and HMI values updates resulting from binary parsing
+</xsl:text>
+          <xsl:text>// are stored until browser can compute next frame, DOM is left untouched
+</xsl:text>
+          <xsl:text>ws.onmessage = function (evt) {
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    let data = evt.data;
+</xsl:text>
+          <xsl:text>    let dv = new DataView(data);
+</xsl:text>
+          <xsl:text>    let i = 0;
+</xsl:text>
+          <xsl:text>    try {
+</xsl:text>
+          <xsl:text>        for(let hash_int of hmi_hash) {
+</xsl:text>
+          <xsl:text>            if(hash_int != dv.getUint8(i)){
+</xsl:text>
+          <xsl:text>                throw new Error("Hash doesn't match");
+</xsl:text>
+          <xsl:text>            };
+</xsl:text>
+          <xsl:text>            i++;
+</xsl:text>
+          <xsl:text>        };
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        while(i &lt; data.byteLength){
+</xsl:text>
+          <xsl:text>            let index = dv.getUint32(i, true);
+</xsl:text>
+          <xsl:text>            i += 4;
+</xsl:text>
+          <xsl:text>            let iectype = hmitree_types[index];
+</xsl:text>
+          <xsl:text>            if(iectype != undefined){
+</xsl:text>
+          <xsl:text>                let dvgetter = dvgetters[iectype];
+</xsl:text>
+          <xsl:text>                let [value, bytesize] = dvgetter(dv,i);
+</xsl:text>
+          <xsl:text>                updates[index] = value;
+</xsl:text>
+          <xsl:text>                i += bytesize;
+</xsl:text>
+          <xsl:text>            } else {
+</xsl:text>
+          <xsl:text>                throw new Error("Unknown index "+index);
+</xsl:text>
+          <xsl:text>            }
+</xsl:text>
+          <xsl:text>        };
+</xsl:text>
+          <xsl:text>        // register for rendering on next frame, since there are updates
+</xsl:text>
+          <xsl:text>        requestHMIAnimation();
+</xsl:text>
+          <xsl:text>    } catch(err) {
+</xsl:text>
+          <xsl:text>        // 1003 is for "Unsupported Data"
+</xsl:text>
+          <xsl:text>        // ws.close(1003, err.message);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        // TODO : remove debug alert ?
+</xsl:text>
+          <xsl:text>        alert("Error : "+err.message+"\nHMI will be reloaded.");
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        // force reload ignoring cache
+</xsl:text>
+          <xsl:text>        location.reload(true);
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>hmi_hash_u8 = new Uint8Array(hmi_hash);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function send_blob(data) {
+</xsl:text>
+          <xsl:text>    if(data.length &gt; 0) {
+</xsl:text>
+          <xsl:text>        ws.send(new Blob([hmi_hash_u8].concat(data)));
+</xsl:text>
+          <xsl:text>    };
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>const typedarray_types = {
+</xsl:text>
+          <xsl:text>    INT: (number) =&gt; new Int16Array([number]),
+</xsl:text>
+          <xsl:text>    BOOL: (truth) =&gt; new Int16Array([truth]),
+</xsl:text>
+          <xsl:text>    NODE: (truth) =&gt; new Int16Array([truth]),
+</xsl:text>
+          <xsl:text>    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>// 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>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>        updates[index] = value;
+</xsl:text>
+          <xsl:text>        requestHMIAnimation();
+</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>    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 change_hmi_value(index, 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; // TODO raise
+</xsl:text>
+          <xsl:text>    if(opstr[1] in quotes){
+</xsl:text>
+          <xsl:text>        if(opstr.length &lt; 3) 
+</xsl:text>
+          <xsl:text>            return undefined; // TODO raise
+</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 old_val = cache[index];
+</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>    if(new_val != undefined &amp;&amp; old_val != new_val)
+</xsl:text>
+          <xsl:text>        send_hmi_value(index, new_val);
+</xsl:text>
+          <xsl:text>    // TODO else raise
+</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>
+</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>        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(current_subscribed_page != current_visible_page){
+</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>
+</xsl:text>
+          <xsl:text>    if(page_name == undefined)
+</xsl:text>
+          <xsl:text>        page_name = current_subscribed_page;
+</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>    }
+</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>
+</xsl:text>
+          <xsl:text>    jumps_need_update = true;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    requestHMIAnimation();
+</xsl:text>
+          <xsl:text>
+</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>    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>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>const xmlns = "http://www.w3.org/2000/svg";
+</xsl:text>
+          <xsl:text>var edit_callback;
+</xsl:text>
+          <xsl:text>const localtypes = {"PAGE_LOCAL":null, "HMI_LOCAL":null}
+</xsl:text>
+          <xsl:text>function edit_value(path, valuetype, callback, initial, size) {
+</xsl:text>
+          <xsl:text>    if(valuetype in localtypes){
+</xsl:text>
+          <xsl:text>        valuetype = (typeof initial) == "number" ? "HMI_REAL" : "HMI_STRING";
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>    let [keypadid, xcoord, ycoord] = keypads[valuetype];
+</xsl:text>
+          <xsl:text>    edit_callback = callback;
+</xsl:text>
+          <xsl:text>    let widget = hmi_widgets[keypadid];
+</xsl:text>
+          <xsl:text>    widget.start_edit(path, valuetype, callback, initial, size);
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>var current_modal; /* TODO stack ?*/
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function show_modal(size) {
+</xsl:text>
+          <xsl:text>    let [element, parent] = detachable_elements[this.element.id];
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    tmpgrp = document.createElementNS(xmlns,"g");
+</xsl:text>
+          <xsl:text>    tmpgrpattr = document.createAttribute("transform");
+</xsl:text>
+          <xsl:text>    let [xcoord,ycoord] = this.coordinates;
+</xsl:text>
+          <xsl:text>    let [xdest,ydest] = page_desc[current_visible_page].bbox;
+</xsl:text>
+          <xsl:text>    if (typeof size === 'undefined'){
+</xsl:text>
+          <xsl:text>        tmpgrpattr.value = "translate("+String(xdest-xcoord)+","+String(ydest-ycoord)+")";
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>    else{
+</xsl:text>
+          <xsl:text>        tmpgrpattr.value = "translate("+String(xdest-xcoord+size.x)+","+String(ydest-ycoord+size.y)+")";
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    tmpgrp.setAttributeNode(tmpgrpattr);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    tmpgrp.appendChild(element);
+</xsl:text>
+          <xsl:text>    parent.appendChild(tmpgrp);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    current_modal = [this.element.id, tmpgrp];
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function end_modal() {
+</xsl:text>
+          <xsl:text>    let [eltid, tmpgrp] = current_modal;
+</xsl:text>
+          <xsl:text>    let [element, parent] = detachable_elements[this.element.id];
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    parent.removeChild(tmpgrp);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    current_modal = undefined;
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function widget_active_activable(eltsub) {
+</xsl:text>
+          <xsl:text>    if(eltsub.inactive_style === undefined)
+</xsl:text>
+          <xsl:text>        eltsub.inactive_style = eltsub.inactive.getAttribute("style");
+</xsl:text>
+          <xsl:text>    eltsub.inactive.setAttribute("style", "display:none");
+</xsl:text>
+          <xsl:text>    if(eltsub.active_style !== undefined)
+</xsl:text>
+          <xsl:text>            eltsub.active.setAttribute("style", eltsub.active_style);
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>function widget_inactive_activable(eltsub) {
+</xsl:text>
+          <xsl:text>    if(eltsub.active_style === undefined)
+</xsl:text>
+          <xsl:text>        eltsub.active_style = eltsub.active.getAttribute("style");
+</xsl:text>
+          <xsl:text>    eltsub.active.setAttribute("style", "display:none");
+</xsl:text>
+          <xsl:text>    if(eltsub.inactive_style !== undefined)
+</xsl:text>
+          <xsl:text>            eltsub.inactive.setAttribute("style", eltsub.inactive_style);
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+        </script>
+      </body>
+    </html>
+  </xsl:template>
+</xsl:stylesheet>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/gen_index_xhtml.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,93 @@
+include yslt_noindent.yml2
+
+// overrides yslt's output function to set CDATA
+decl output(method, cdata-section-elements="xhtml:script");
+
+// helper to emit some content to internal namespaces
+decl emit(*name) alias - {
+    *name;
+    template *name {
+        |
+        | /* «local-name()» */
+        |
+        content;
+        |
+    }
+};
+
+istylesheet
+            /* From Inkscape */
+            xmlns:dc="http://purl.org/dc/elements/1.1/"
+            xmlns:cc="http://creativecommons.org/ns#"
+            xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+            xmlns:svg="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+            xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+            xmlns:xhtml="http://www.w3.org/1999/xhtml"
+
+            /* Internal namespaces to allow emit code/content from anywhere */
+            xmlns:debug="debug"
+            xmlns:preamble="preamble"
+            xmlns:declarations="declarations"
+            xmlns:definitions="definitions"
+            xmlns:epilogue="epilogue"
+
+            /* Namespace to invoke python code */
+            xmlns:ns="beremiz"
+
+            extension-element-prefixes="ns func exsl regexp str dyn"
+            exclude-result-prefixes="ns func exsl regexp str dyn debug preamble epilogue declarations definitions" {
+
+    const "svg", "/svg:svg";
+    const "hmi_elements", "//svg:*[starts-with(@inkscape:label, 'HMI:')]";
+
+
+    include hmi_tree.ysl2
+
+    include geometry.ysl2
+
+    include detachable_pages.ysl2
+
+    include inline_svg.ysl2
+
+    include widgets_common.ysl2
+
+    include widget_*.ysl2
+
+
+    template "/" {
+        comment > Made with SVGHMI. https://beremiz.org
+
+        // all debug output from included definitions, as comments
+        comment apply "document('')/*/debug:*";
+
+        html xmlns="http://www.w3.org/1999/xhtml"
+             xmlns:svg="http://www.w3.org/2000/svg"
+             xmlns:xlink="http://www.w3.org/1999/xlink" {
+            head;
+            // prevents user selection by mouse click / touch and drag
+            // prevents pinch zoom and other accidental panning panning with touch devices
+            body style="margin:0;overflow:hidden;user-select:none;touch-action:none;" {
+                // Inline SVG
+                copy "$result_svg";
+                script{
+                    | \n//\n//\n// Early independent declarations \n//\n//
+                    apply "document('')/*/preamble:*";
+
+                    | \n//\n//\n// Declarations depending on preamble \n//\n//
+                    apply "document('')/*/declarations:*";
+
+                    | \n//\n//\n// Order independent declaration and code \n//\n//
+                    apply "document('')/*/definitions:*";
+
+                    | \n//\n//\n// Statements that needs to be at the end \n//\n//
+                    apply "document('')/*/epilogue:*";
+
+                    include text svghmi.js
+
+                }
+            }
+        }
+    }
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/geometry.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,144 @@
+// geometry.ysl2
+//
+// Geometry (bounding box intersection) definitions
+
+// This retrieves geometry obtained through "inkscape -S"
+// already parsed by python and presented as a list of
+// <bbox x="0" y="0" w="42" h="42">
+const "geometry", "ns:GetSVGGeometry()";
+
+// Debug data
+emit "debug:geometry" {
+    | ID, x, y, w, h
+    foreach "$geometry"
+        |  «@Id» «@x» «@y» «@w» «@h»
+}
+
+// Rates 1D intersection of 2 segments A and B
+// described respectively with a0,a1 and b0,b1
+def "func:intersect_1d" {
+    // it is assumed that a1 > a0 and b1 > b0
+    param "a0";
+    param "a1";
+    param "b0";
+    param "b1";
+
+    const "d0", "$a0 >= $b0";
+    const "d1", "$a1 >= $b1";
+    choose {
+        when "not($d0) and $d1"
+            // b contained in a
+            //   a0<b0 b1<a1
+            // a +--------+
+            // b    +--+
+            result "3";
+        when "$d0 and not($d1)"
+            // a contained in b
+            //   b0<a0 a1<b1
+            // a    +--+
+            // b +--------+
+            result "2";
+        when "$d0 and $d1 and $a0 < $b1"
+            // a and b are overlapped 
+            //   b0<a0<b1<a1
+            // a    +-----+
+            // b +-----+
+            result "1";
+        when "not($d0) and not($d1) and $b0 < $a1"
+            // a and b are overlapped
+            //   a0<b0<a1<b1
+            // a +-----+
+            // b    +-----+
+            result "1";
+            // since orientation doesn't matter,
+            // rated same as previous symetrical overlapping
+        otherwise
+            result "0"; /* no intersection*/
+    }
+}
+
+
+// Rates intersection A and B areas described with x,y,w and h 
+// attributes passed as $a and $b parameters.
+// 
+// returns :
+// 0 - no intersection
+//            .-----.
+//    .-----. |    b|
+//    |     | |     |
+//    |     | '-----'
+//    |a    |
+//    '-----'
+//
+// 1 - overlapping
+//        .-----.
+//    .---|--. b|
+//    |   |  |  |
+//    |   '-----'
+//    |a     |
+//    '------'
+//
+// 2 - overlapping
+//        .-----.
+//        |  a  |
+//    .---|-----|---.
+//    |   '-----'   |
+//    | b           |
+//    '-------------'
+//
+// 3 - overlapping
+//        .-----.
+//        |  b  |
+//    .---|-----|---.
+//    |   '-----'   |
+//    | a           |
+//    '-------------'
+//
+// 4 - a contained in b
+//    .-------------.
+//    |   .-----.   |
+//    |   |  a  |   |
+//    |b  '-----'   |
+//    '-------------'
+//
+// 6 - overlapping
+//        .----.
+//        |   b|
+//    .---|----|---.
+//    |a  |    |   |
+//    '---|----|---'
+//        '----'
+//
+// 9 - b contained in a
+//    .-------------.
+//    |   .-----.   |
+//    |   |  b  |   |
+//    |a  '-----'   |
+//    '-------------'
+//
+def "func:intersect" {
+    param "a";
+    param "b";
+
+    const "x_intersect", "func:intersect_1d($a/@x, $a/@x+$a/@w, $b/@x, $b/@x+$b/@w)";
+
+    choose{
+        when "$x_intersect != 0"{
+            const "y_intersect", "func:intersect_1d($a/@y, $a/@y+$a/@h, $b/@y, $b/@y+$b/@h)";
+            result "$x_intersect * $y_intersect";
+        }
+        otherwise result "0";
+    }
+}
+
+// return overlapping geometry for a given element
+// all intersercting element are returned
+// except groups, that must be contained to be counted in
+def "func:overlapping_geometry" {
+    param "elt";
+    const "groups", "/svg:svg | //svg:g";
+    const "g", "$geometry[@Id = $elt/@id]"; 
+    const "candidates", "$geometry[@Id != $elt/@id]";
+    result """$candidates[(@Id = $groups/@id and (func:intersect($g, .) = 9)) or 
+                          (not(@Id = $groups/@id) and (func:intersect($g, .) > 0 ))]""";
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/hmi_tree.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,176 @@
+// hmi_tree.ysl2
+
+
+// HMI Tree computed from VARIABLES.CSV in svghmi.py
+const "hmitree", "ns:GetHMITree()";
+
+const "_categories" {
+    noindex > HMI_PLC_STATUS
+    noindex > HMI_CURRENT_PAGE
+}
+const "categories", "exsl:node-set($_categories)";
+
+// HMI Tree Index
+const "_indexed_hmitree" apply "$hmitree", mode="index";
+const "indexed_hmitree", "exsl:node-set($_indexed_hmitree)";
+
+emit "preamble:hmi-tree" {
+    | var hmi_hash = [«$hmitree/@hash»];
+    |
+    | var heartbeat_index = «$indexed_hmitree/*[@hmipath = '/HEARTBEAT']/@index»;
+    |
+    | var hmitree_types = [
+
+    foreach "$indexed_hmitree/*" 
+    |     /* «@index»  «@hmipath» */ "«substring(local-name(), 5)»"`if "position()!=last()" > ,`
+
+    | ]
+    |
+}
+
+template "*", mode="index" {
+    param "index", "0";
+    param "parentpath", "''";
+    const "content" {
+        const "path"
+            choose {
+                when "count(ancestor::*)=0" > /
+                when "count(ancestor::*)=1" > /«@name»
+                otherwise > «$parentpath»/«@name»
+            }
+        choose {
+            when "not(local-name() = $categories/noindex)" {
+                xsl:copy {
+                    attrib "index" > «$index»
+                    attrib "hmipath" > «$path»
+                    foreach "@*" xsl:copy;
+                }
+                apply "*[1]", mode="index"{
+                     with "index", "$index + 1";
+                     with "parentpath" > «$path»
+                }
+            }
+            otherwise {
+                apply "*[1]", mode="index"{
+                    with "index", "$index";
+                    with "parentpath" > «$path»
+                }
+            }
+        }
+    }
+
+    copy "$content";
+    apply "following-sibling::*[1]", mode="index" {
+        with "index", "$index + count(exsl:node-set($content)/*)";
+        with "parentpath" > «$parentpath»
+    }
+}
+
+//  Parses:
+//  "HMI:WidgetType:param1:param2@path1@path2"
+//
+//  Into:
+//  widget type="WidgetType" id="blah456" {
+//      arg value="param1";
+//      arg value="param2";
+//      path value=".path1" index=".path1" type="PAGE_LOCAL";
+//      path value="/path1" index="348" type="HMI_INT";
+//      path value="path4" index="path4" type="HMI_LOCAL";
+//  }
+//
+template "*", mode="parselabel" {
+    const "label","@inkscape:label";
+    const "description", "substring-after($label,'HMI:')";
+
+    const "_args", "substring-before($description,'@')";
+    const "args" choose {
+        when "$_args" value "$_args";
+        otherwise value "$description";
+    }
+
+    const "_type", "substring-before($args,':')";
+    const "type" choose {
+        when "$_type" value "$_type";
+        otherwise value "$args";
+    }
+
+    if "$type" widget {
+        attrib "id" > «@id»
+        attrib "type" > «$type»
+        foreach "str:split(substring-after($args, ':'), ':')" {
+            arg {
+                attrib "value" > «.»
+            }
+        }
+        const "paths", "substring-after($description,'@')";
+        foreach "str:split($paths, '@')" {
+            if "string-length(.) > 0" path {
+                attrib "value" > «.»
+                const "path", ".";
+                const "item", "$indexed_hmitree/*[@hmipath = $path]";
+                choose {
+                    when "count($item) = 1" {
+                        attrib "index" > «$item/@index»
+                        attrib "type" > «local-name($item)»
+                    }
+                    otherwise {
+                        choose {
+                            when "regexp:test($path,'^\.[a-zA-Z0-9_]+')" {
+                                attrib "type" > PAGE_LOCAL
+                            }
+                            when "regexp:test($path,'^[a-zA-Z0-9_]+')" {
+                                attrib "type" > HMI_LOCAL
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+const "_parsed_widgets" apply "$hmi_elements", mode="parselabel";
+const "parsed_widgets","exsl:node-set($_parsed_widgets)";
+
+def "func:widget" {
+    param "id";
+    result "$parsed_widgets/widget[@id = $id]";
+}
+
+def "func:is_descendant_path" {
+    param "descend";
+    param "ancest";
+    // TODO : use HMI tree to answer more accurately
+    result "string-length($ancest) > 0 and starts-with($descend,$ancest)";
+}
+
+def "func:same_class_paths" {
+    param "a";
+    param "b";
+    const "class_a", "$indexed_hmitree/*[@hmipath = $a]/@class";
+    const "class_b", "$indexed_hmitree/*[@hmipath = $b]/@class";
+    result "$class_a and $class_b and $class_a = $class_b";
+}
+
+// Debug data
+template "*", mode="testtree"{
+    param "indent", "''";
+    > «$indent» «local-name()» 
+    foreach "@*" > «local-name()»="«.»" 
+    > \n
+    apply "*", mode="testtree" {
+        with "indent" value "concat($indent,'>')"
+    };
+}
+
+emit "debug:hmi-tree" {
+    | Raw HMI tree
+    apply "$hmitree", mode="testtree";
+    |
+    | Indexed HMI tree
+    apply "$indexed_hmitree", mode="testtree";
+    |
+    | Parsed Widgets
+    copy "_parsed_widgets";
+    apply "$parsed_widgets", mode="testtree";
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/inline_svg.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,206 @@
+// inline_svg.ysl2
+//
+// Produce Inline SVG element of resulting XHTML page.
+
+// Since stylesheet output namespace is xhtml, templates that output svg have to be explicitely declared as such 
+in xsl decl svgtmpl(match, xmlns="http://www.w3.org/2000/svg") alias template;
+in xsl decl svgfunc(name, xmlns="http://www.w3.org/2000/svg") alias template;
+
+
+// Identity template :
+//  - copy every attributes 
+//  - copy every sub-elements
+
+svgtmpl "@*", mode="inline_svg" xsl:copy;
+
+template "node()", mode="inline_svg" {
+  // use real xsl:copy instead copy-of alias from yslt.yml2
+  if "not(@id = $discardable_elements/@id)"
+      xsl:copy apply "@* | node()", mode="inline_svg";
+}
+
+// replaces inkscape's height and width hints. forces fit
+template "svg:svg/@width", mode="inline_svg";
+template "svg:svg/@height", mode="inline_svg";
+svgtmpl "svg:svg", mode="inline_svg" svg {
+    attrib "preserveAspectRatio" > none
+    attrib "height" > 100vh
+    attrib "width" > 100vw
+    apply "@* | node()", mode="inline_svg";
+}
+// ensure that coordinate in CSV file generated by inkscape are in default reference frame
+template "svg:svg[@viewBox!=concat('0 0 ', @width, ' ', @height)]", mode="inline_svg" {
+    error > ViewBox settings other than X=0, Y=0 and Scale=1 are not supported
+}
+// ensure that coordinate in CSV file generated by inkscape match svg default unit
+template "sodipodi:namedview[@units!='px' or @inkscape:document-units!='px']", mode="inline_svg" {
+    error > All units must be set to "px" in Inkscape's document properties
+}
+
+////// Clone unlinking
+//
+// svg:use (inkscape's clones) inside a widgets are
+// replaced by real elements they refer in order to :
+//  - allow finding "needle" element in "meter" widget,
+//    even if "needle" is in a group refered by a svg use.
+//  - if "needle" is visible through a svg:use for
+//    each instance of the widget, then needle would show
+//    the same position in all instances
+//
+// For now, clone unlinkink applies to descendants of all widget except HMI:Page
+// TODO: narrow application of clone unlinking to active elements,
+//       while keeping static decoration cloned
+const "hmi_lists_descs", "$parsed_widgets/widget[@type = 'List']";
+const "hmi_lists", "$hmi_elements[@id = $hmi_lists_descs/@id]";
+const "targets_not_to_unlink", "$hmi_lists/descendant-or-self::svg:*";
+const "to_unlink", "$hmi_elements[not(@id = $hmi_pages/@id)]/descendant-or-self::svg:use";
+
+def "func:is_unlinkable" {
+    param "targetid";
+    param "eltid";
+    result "$eltid = $to_unlink/@id and not($targetid = $targets_not_to_unlink/@id)";
+}
+
+svgtmpl "svg:use", mode="inline_svg"{
+    const "targetid","substring-after(@xlink:href,'#')";
+    choose {
+        when "func:is_unlinkable($targetid, @id)" {
+            call "unlink_clone" {
+                with "targetid", "$targetid";
+            }
+        }
+        otherwise xsl:copy apply "@*", mode="inline_svg";
+    }
+}
+
+// to unlink a clone, an group containing a copy of target element is created
+// that way, style and transforms can be preserved
+const "_excluded_use_attrs" {
+    name > href
+    name > width
+    name > height
+    name > x
+    name > y
+    name > id
+}
+const "excluded_use_attrs","exsl:node-set($_excluded_use_attrs)";
+
+const "_merge_use_attrs" {
+    name > transform
+    name > style
+}
+const "merge_use_attrs","exsl:node-set($_merge_use_attrs)";
+
+svgfunc "unlink_clone"{
+    param "targetid";
+    param "seed","''";
+    const "target", "//svg:*[@id = $targetid]";
+    const "seeded_id" choose {
+        when "string-length($seed) > 0" > «$seed»_«@id»
+        otherwise value "@id";
+    }
+    g{
+        attrib "id" value "$seeded_id";
+        attrib "original" value "@id";
+
+        choose {
+            when "$target[self::svg:g]" {
+                foreach "@*[not(local-name() = $excluded_use_attrs/name | $merge_use_attrs)]"
+                    attrib "{name()}" > «.»
+
+                if "@style | $target/@style"
+                    attrib "style" {
+                        > «@style»
+                        if "@style and $target/@style" > ;
+                        > «$target/@style»
+                    }
+
+                if "@transform | $target/@transform"
+                    attrib "transform" {
+                        > «@transform»
+                        if "@transform and $target/@transform" >  
+                        > «$target/@transform»
+                    }
+
+                apply "$target/*", mode="unlink_clone"{
+                    with "seed","$seeded_id";
+                }
+            }
+            otherwise {
+                // include non excluded attributes
+                foreach "@*[not(local-name() = $excluded_use_attrs/name)]"
+                    attrib "{name()}" > «.»
+
+                apply "$target", mode="unlink_clone"{
+                    with "seed","$seeded_id";
+                }
+            }
+        }
+    }
+}
+
+// clone unlinking is really similar to deep-copy
+// all nodes are sytematically copied
+svgtmpl "@id", mode="unlink_clone" {
+    param "seed";
+    attrib "id" > «$seed»_«.»
+    attrib "original" > «.»
+}
+
+svgtmpl "@*", mode="unlink_clone" xsl:copy;
+
+svgtmpl "svg:use", mode="unlink_clone" {
+    param "seed";
+    const "targetid","substring-after(@xlink:href,'#')";
+    choose {
+        when "func:is_unlinkable($targetid, @id)" {
+            call "unlink_clone" {
+                with "targetid", "$targetid";
+                with "seed","$seed";
+            }
+        }
+        otherwise xsl:copy apply "@*", mode="unlink_clone" {
+            with "seed","$seed";
+        }
+    }
+}
+
+// copying widgets would have unwanted effect
+// instead widget is refered through a svg:use.
+svgtmpl "svg:*", mode="unlink_clone" {
+    param "seed";
+    choose {
+        // node recursive copy ends when finding a widget
+        when "@id = $hmi_elements/@id" {
+            // place a clone instead of copying
+            use{
+                attrib "xlink:href" > «concat('#',@id)»
+            }
+        }
+        otherwise {
+            xsl:copy apply "@* | node()", mode="unlink_clone" {
+                with "seed","$seed";
+            }
+        }
+    }
+}
+
+const "result_svg" apply "/", mode="inline_svg";
+const "result_svg_ns", "exsl:node-set($result_svg)";
+
+emit "preamble:inline-svg" {
+    | let id = document.getElementById.bind(document);
+    | var svg_root = id("«$svg/@id»");
+}
+
+emit "debug:clone-unlinking" {
+    |
+    | Unlinked :
+    foreach "$to_unlink"{
+        | «@id»
+    }
+    | Not to unlink :
+    foreach "$targets_not_to_unlink"{
+        | «@id»
+    }
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/pous.xml	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,50 @@
+<?xml version='1.0' encoding='utf-8'?>
+<project xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.plcopen.org/xml/tc6_0201" xmlns:xhtml="http://www.w3.org/1999/xhtml" xsi:schemaLocation="http://www.plcopen.org/xml/tc6_0201">
+  <fileHeader companyName="Beremiz" productName="Beremiz" productVersion="0.0" creationDateTime="2008-12-14T16:53:26"/>
+  <contentHeader name="Beremiz non-standard POUs library" modificationDateTime="2019-08-06T14:08:26">
+    <coordinateInfo>
+      <fbd>
+        <scaling x="0" y="0"/>
+      </fbd>
+      <ld>
+        <scaling x="0" y="0"/>
+      </ld>
+      <sfc>
+        <scaling x="0" y="0"/>
+      </sfc>
+    </coordinateInfo>
+  </contentHeader>
+  <types>
+    <dataTypes>
+      <dataType name="HMI_INT">
+        <baseType>
+          <INT/>
+        </baseType>
+      </dataType>
+      <dataType name="HMI_REAL">
+        <baseType>
+          <REAL/>
+        </baseType>
+      </dataType>
+      <dataType name="HMI_STRING">
+        <baseType>
+          <string/>
+        </baseType>
+      </dataType>
+      <dataType name="HMI_BOOL">
+        <baseType>
+          <BOOL/>
+        </baseType>
+      </dataType>
+      <dataType name="HMI_NODE">
+        <baseType>
+          <BOOL/>
+        </baseType>
+      </dataType>
+    </dataTypes>
+    <pous/>
+  </types>
+  <instances>
+    <configurations/>
+  </instances>
+</project>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/svghmi.c	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,370 @@
+#include <pthread.h>
+#include <errno.h>
+#include "iec_types_all.h"
+#include "POUS.h"
+#include "config.h"
+#include "beremiz.h"
+
+#define DEFAULT_REFRESH_PERIOD_MS 100
+#define HMI_BUFFER_SIZE %(buffer_size)d
+#define HMI_ITEM_COUNT %(item_count)d
+#define HMI_HASH_SIZE 8
+static uint8_t hmi_hash[HMI_HASH_SIZE] = {%(hmi_hash_ints)s};
+
+/* PLC reads from that buffer */
+static char rbuf[HMI_BUFFER_SIZE];
+
+/* PLC writes to that buffer */
+static char wbuf[HMI_BUFFER_SIZE];
+
+/* TODO change that in case of multiclient... */
+/* worst biggest send buffer. FIXME : use dynamic alloc ? */
+static char sbuf[HMI_HASH_SIZE +  HMI_BUFFER_SIZE + (HMI_ITEM_COUNT * sizeof(uint32_t))];
+static unsigned int sbufidx;
+
+%(extern_variables_declarations)s
+
+#define ticktime_ns %(PLC_ticktime)d
+static uint16_t ticktime_ms = (ticktime_ns>1000000)?
+                     ticktime_ns/1000000:
+                     1;
+
+typedef enum {
+    buf_free = 0,
+    buf_new,
+    buf_set,
+    buf_tosend
+} buf_state_t;
+
+static int global_write_dirty = 0;
+
+typedef struct {
+    void *ptr;
+    __IEC_types_enum type;
+    uint32_t buf_index;
+
+    /* publish/write/send */
+    long wlock;
+    buf_state_t wstate;
+
+    /* zero means not subscribed */
+    uint16_t refresh_period_ms;
+    uint16_t age_ms;
+
+    /* retrieve/read/recv */
+    long rlock;
+    buf_state_t rstate;
+
+} hmi_tree_item_t;
+
+static hmi_tree_item_t hmi_tree_item[] = {
+%(variable_decl_array)s
+};
+
+typedef int(*hmi_tree_iterator)(uint32_t, hmi_tree_item_t*);
+static int traverse_hmi_tree(hmi_tree_iterator fp)
+{
+    unsigned int i;
+    for(i = 0; i < sizeof(hmi_tree_item)/sizeof(hmi_tree_item_t); i++){
+        hmi_tree_item_t *dsc = &hmi_tree_item[i];
+        int res = (*fp)(i, dsc);
+        if(res != 0){
+            return res;
+        }
+    }
+    return 0;
+}
+
+#define __Unpack_desc_type hmi_tree_item_t
+
+%(var_access_code)s
+
+static int write_iterator(uint32_t index, hmi_tree_item_t *dsc)
+{
+    if(AtomicCompareExchange(&dsc->wlock, 0, 1) == 0)
+    {
+        if(dsc->wstate == buf_set){
+            /* if being subscribed */
+            if(dsc->refresh_period_ms){
+                if(dsc->age_ms + ticktime_ms < dsc->refresh_period_ms){
+                    dsc->age_ms += ticktime_ms;
+                }else{
+                    dsc->wstate = buf_tosend;
+                    global_write_dirty = 1;
+                }
+            }
+        }
+
+        void *dest_p = &wbuf[dsc->buf_index];
+        void *real_value_p = NULL;
+        char flags = 0;
+        void *visible_value_p = UnpackVar(dsc, &real_value_p, &flags);
+
+        /* if new value differs from previous one */
+        USINT sz = __get_type_enum_size(dsc->type);
+        if(__Is_a_string(dsc)){
+            sz = ((STRING*)visible_value_p)->len + 1;
+        }
+        if(dsc->wstate == buf_new /* just subscribed 
+           or already subscribed having value change */
+           || (dsc->refresh_period_ms > 0 && memcmp(dest_p, visible_value_p, sz) != 0)){
+            /* copy and flag as set */
+            memcpy(dest_p, visible_value_p, sz);
+            /* if not already marked/signaled, do it */
+            if(dsc->wstate != buf_set && dsc->wstate != buf_tosend) {
+                if(dsc->wstate == buf_new || ticktime_ms > dsc->refresh_period_ms){
+                    dsc->wstate = buf_tosend;
+                    global_write_dirty = 1;
+                } else {
+                    dsc->wstate = buf_set;
+                }
+                dsc->age_ms = 0;
+            }
+        }
+
+        AtomicCompareExchange(&dsc->wlock, 1, 0);
+    }
+    // else ... : PLC can't wait, variable will be updated next turn
+    return 0;
+}
+
+static int send_iterator(uint32_t index, hmi_tree_item_t *dsc)
+{
+    while(AtomicCompareExchange(&dsc->wlock, 0, 1)) sched_yield();
+
+    if(dsc->wstate == buf_tosend)
+    {
+        uint32_t sz = __get_type_enum_size(dsc->type);
+        if(sbufidx + sizeof(uint32_t) + sz <=  sizeof(sbuf))
+        {
+            void *src_p = &wbuf[dsc->buf_index];
+            void *dst_p = &sbuf[sbufidx];
+            if(__Is_a_string(dsc)){
+                sz = ((STRING*)src_p)->len + 1;
+            }
+            /* TODO : force into little endian */
+            memcpy(dst_p, &index, sizeof(uint32_t));
+            memcpy(dst_p + sizeof(uint32_t), src_p, sz);
+            dsc->wstate = buf_free;
+            sbufidx += sizeof(uint32_t) /* index */ + sz;
+        }
+        else
+        {
+            printf("BUG!!! %%d + %%ld + %%d >  %%ld \n", sbufidx, sizeof(uint32_t), sz,  sizeof(sbuf));
+            AtomicCompareExchange(&dsc->wlock, 1, 0);
+            return EOVERFLOW;
+        }
+    }
+
+    AtomicCompareExchange(&dsc->wlock, 1, 0);
+    return 0;
+}
+
+static int read_iterator(uint32_t index, hmi_tree_item_t *dsc)
+{
+    if(AtomicCompareExchange(&dsc->rlock, 0, 1) == 0)
+    {
+        if(dsc->rstate == buf_set)
+        {
+            void *src_p = &rbuf[dsc->buf_index];
+            void *real_value_p = NULL;
+            char flags = 0;
+            void *visible_value_p = UnpackVar(dsc, &real_value_p, &flags);
+            memcpy(real_value_p, src_p, __get_type_enum_size(dsc->type));
+            dsc->rstate = buf_free;
+        }
+        AtomicCompareExchange(&dsc->rlock, 1, 0);
+    }
+    // else ... : PLC can't wait, variable will be updated next turn
+    return 0;
+}
+
+void update_refresh_period(hmi_tree_item_t *dsc, uint16_t refresh_period_ms)
+{
+    while(AtomicCompareExchange(&dsc->wlock, 0, 1)) sched_yield();
+    if(refresh_period_ms) {
+        if(!dsc->refresh_period_ms)
+        {
+            dsc->wstate = buf_new;
+        }
+    } else {
+        dsc->wstate = buf_free;
+    }
+    dsc->refresh_period_ms = refresh_period_ms;
+    AtomicCompareExchange(&dsc->wlock, 1, 0);
+}
+
+static int reset_iterator(uint32_t index, hmi_tree_item_t *dsc)
+{
+    update_refresh_period(dsc, 0);
+    return 0;
+}
+
+void SVGHMI_SuspendFromPythonThread(void);
+void SVGHMI_WakeupFromRTThread(void);
+
+static int continue_collect;
+
+int __init_svghmi()
+{
+    bzero(rbuf,sizeof(rbuf));
+    bzero(wbuf,sizeof(wbuf));
+
+    continue_collect = 1;
+
+    return 0;
+}
+
+void __cleanup_svghmi()
+{
+    continue_collect = 0;
+    SVGHMI_WakeupFromRTThread();
+}
+
+void __retrieve_svghmi()
+{
+    traverse_hmi_tree(read_iterator);
+}
+
+void __publish_svghmi()
+{
+    global_write_dirty = 0;
+    traverse_hmi_tree(write_iterator);
+    if(global_write_dirty) {
+        SVGHMI_WakeupFromRTThread();
+    }
+}
+
+/* PYTHON CALLS */
+int svghmi_send_collect(uint32_t *size, char **ptr){
+
+    SVGHMI_SuspendFromPythonThread();
+
+    if(continue_collect) {
+        int res;
+        sbufidx = HMI_HASH_SIZE;
+        if((res = traverse_hmi_tree(send_iterator)) == 0)
+        {
+            if(sbufidx > HMI_HASH_SIZE){
+                memcpy(&sbuf[0], &hmi_hash[0], HMI_HASH_SIZE);
+                *ptr = &sbuf[0];
+                *size = sbufidx;
+                return 0;
+            }
+            return ENODATA;
+        }
+        // printf("collected BAD result %%d\n", res);
+        return res;
+    }
+    else
+    {
+        return EINTR;
+    }
+}
+
+typedef enum {
+    setval = 0,
+    reset = 1,
+    subscribe = 2
+} cmd_from_JS;
+
+// Returns :
+//   0 is OK, <0 is error, 1 is heartbeat
+int svghmi_recv_dispatch(uint32_t size, const uint8_t *ptr){
+    const uint8_t* cursor = ptr + HMI_HASH_SIZE;
+    const uint8_t* end = ptr + size;
+
+    int was_hearbeat = 0;
+
+    /* match hmitree fingerprint */
+    if(size <= HMI_HASH_SIZE || memcmp(ptr, hmi_hash, HMI_HASH_SIZE) != 0)
+    {
+        printf("svghmi_recv_dispatch MISMATCH !!\n");
+        return -EINVAL;
+    }
+
+    while(cursor < end)
+    {
+        uint32_t progress;
+        cmd_from_JS cmd = *(cursor++);
+        switch(cmd)
+        {
+            case setval:
+            {
+                uint32_t index = *(uint32_t*)(cursor);
+                uint8_t const *valptr = cursor + sizeof(uint32_t);
+
+                if(index == heartbeat_index)
+                    was_hearbeat = 1;
+
+                if(index < HMI_ITEM_COUNT)
+                {
+                    hmi_tree_item_t *dsc = &hmi_tree_item[index];
+                    void *real_value_p = NULL;
+                    char flags = 0;
+                    void *visible_value_p = UnpackVar(dsc, &real_value_p, &flags);
+                    void *dst_p = &rbuf[dsc->buf_index];
+                    uint32_t sz = __get_type_enum_size(dsc->type);
+
+                    if(__Is_a_string(dsc)){
+                        sz = ((STRING*)valptr)->len + 1;
+                    }
+
+                    if((valptr + sz) <= end)
+                    {
+                        // rescheduling spinlock until free
+                        while(AtomicCompareExchange(&dsc->rlock, 0, 1)) sched_yield();
+
+                        memcpy(dst_p, valptr, sz);
+                        dsc->rstate = buf_set;
+
+                        AtomicCompareExchange(&dsc->rlock, 1, 0);
+                        progress = sz + sizeof(uint32_t) /* index */;
+                    }
+                    else
+                    {
+                        return -EINVAL;
+                    }
+                }
+                else
+                {
+                    return -EINVAL;
+                }
+            }
+            break;
+
+            case reset:
+            {
+                progress = 0;
+                traverse_hmi_tree(reset_iterator);
+            }
+            break;
+
+            case subscribe:
+            {
+                uint32_t index = *(uint32_t*)(cursor);
+                uint16_t refresh_period_ms = *(uint32_t*)(cursor + sizeof(uint32_t));
+
+                if(index < HMI_ITEM_COUNT)
+                {
+                    hmi_tree_item_t *dsc = &hmi_tree_item[index];
+                    update_refresh_period(dsc, refresh_period_ms);
+                }
+                else
+                {
+                    return -EINVAL;
+                }
+
+                progress = sizeof(uint32_t) /* index */ +
+                           sizeof(uint16_t) /* refresh period */;
+            }
+            break;
+            default:
+                printf("svghmi_recv_dispatch unknown %%d\n",cmd);
+
+        }
+        cursor += progress;
+    }
+    return was_hearbeat;
+}
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/svghmi.js	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,479 @@
+// svghmi.js
+
+var updates = {};
+var need_cache_apply = [];
+
+
+function dispatch_value(index, value) {
+    let widgets = subscribers(index);
+
+    let oldval = cache[index];
+    cache[index] = value;
+
+    if(widgets.size > 0) {
+        for(let widget of widgets){
+            widget.new_hmi_value(index, value, oldval);
+        }
+    }
+};
+
+function init_widgets() {
+    Object.keys(hmi_widgets).forEach(function(id) {
+        let widget = hmi_widgets[id];
+        let init = widget.init;
+        if(typeof(init) == "function"){
+            try {
+                init.call(widget);
+            } catch(err) {
+                console.log(err);
+            }
+        }
+    });
+};
+
+// Open WebSocket to relative "/ws" address
+var ws = new WebSocket(window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws'));
+ws.binaryType = 'arraybuffer';
+
+const dvgetters = {
+    INT: (dv,offset) => [dv.getInt16(offset, true), 2],
+    BOOL: (dv,offset) => [dv.getInt8(offset, true), 1],
+    NODE: (dv,offset) => [dv.getInt8(offset, true), 1],
+    REAL: (dv,offset) => [dv.getFloat32(offset, true), 4],
+    STRING: (dv, offset) => {
+        const size = dv.getInt8(offset);
+        return [
+            String.fromCharCode.apply(null, new Uint8Array(
+                dv.buffer, /* original buffer */
+                offset + 1, /* string starts after size*/
+                size /* size of string */
+            )), size + 1]; /* total increment */
+    }
+};
+
+// Apply updates recieved through ws.onmessage to subscribed widgets
+function apply_updates() {
+    for(let index in updates){
+        // serving as a key, index becomes a string
+        // -> pass Number(index) instead
+        dispatch_value(Number(index), updates[index]);
+        delete updates[index];
+    }
+}
+
+// Called on requestAnimationFrame, modifies DOM
+var requestAnimationFrameID = null;
+function animate() {
+    // Do the page swith if any one pending
+    if(current_subscribed_page != current_visible_page){
+        switch_visible_page(current_subscribed_page);
+    }
+
+    while(widget = need_cache_apply.pop()){
+        widget.apply_cache();
+    }
+
+    if(jumps_need_update) update_jumps();
+
+    apply_updates();
+
+    pending_widget_animates.forEach(widget => widget._animate());
+    pending_widget_animates = [];
+
+    requestAnimationFrameID = null;
+}
+
+function requestHMIAnimation() {
+    if(requestAnimationFrameID == null){
+        requestAnimationFrameID = window.requestAnimationFrame(animate);
+    }
+}
+
+// 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) {
+
+    let data = evt.data;
+    let dv = new DataView(data);
+    let i = 0;
+    try {
+        for(let hash_int of hmi_hash) {
+            if(hash_int != dv.getUint8(i)){
+                throw new Error("Hash doesn't match");
+            };
+            i++;
+        };
+
+        while(i < data.byteLength){
+            let index = dv.getUint32(i, true);
+            i += 4;
+            let iectype = hmitree_types[index];
+            if(iectype != undefined){
+                let dvgetter = dvgetters[iectype];
+                let [value, bytesize] = dvgetter(dv,i);
+                updates[index] = value;
+                i += bytesize;
+            } else {
+                throw new Error("Unknown index "+index);
+            }
+        };
+        // register for rendering on next frame, since there are updates
+        requestHMIAnimation();
+    } catch(err) {
+        // 1003 is for "Unsupported Data"
+        // ws.close(1003, err.message);
+
+        // TODO : remove debug alert ?
+        alert("Error : "+err.message+"\\\\nHMI will be reloaded.");
+
+        // force reload ignoring cache
+        location.reload(true);
+    }
+};
+
+hmi_hash_u8 = new Uint8Array(hmi_hash);
+
+function send_blob(data) {
+    if(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]),
+    STRING: (str) => {
+        // beremiz default string max size is 128
+        str = str.slice(0,128);
+        binary = new Uint8Array(str.length + 1);
+        binary[0] = str.length;
+        for(let i = 0; i < str.length; i++){
+            binary[i+1] = str.charCodeAt(i);
+        }
+        return binary;
+    }
+    /* TODO */
+};
+
+function send_reset() {
+    send_blob(new Uint8Array([1])); /* reset = 1 */
+};
+
+var subscriptions = [];
+
+function subscribers(index) {
+    let entry = subscriptions[index];
+    let res;
+    if(entry == undefined){
+        res = new Set();
+        subscriptions[index] = [res,0];
+    }else{
+        [res, _ign] = entry;
+    }
+    return res
+}
+
+function get_subscription_period(index) {
+    let entry = subscriptions[index];
+    if(entry == undefined)
+        return 0;
+    let [_ign, period] = entry;
+    return period;
+}
+
+function set_subscription_period(index, period) {
+    let entry = subscriptions[index];
+    if(entry == undefined){
+        subscriptions[index] = [new Set(), period];
+    } else {
+        entry[1] = period;
+    }
+}
+
+// artificially subscribe the watchdog widget to "/heartbeat" hmi variable
+// Since dispatch directly calls change_hmi_value,
+// PLC will periodically send variable at given frequency
+subscribers(heartbeat_index).add({
+    /* type: "Watchdog", */
+    frequency: 1,
+    indexes: [heartbeat_index],
+    new_hmi_value: function(index, value, oldval) {
+        apply_hmi_value(heartbeat_index, value+1);
+    }
+});
+
+
+function update_subscriptions() {
+    let delta = [];
+    for(let index in subscriptions){
+        let widgets = subscribers(index);
+
+        // periods are in ms
+        let previous_period = get_subscription_period(index);
+
+        // subscribing with a zero period is unsubscribing
+        let new_period = 0;
+        if(widgets.size > 0) {
+            let maxfreq = 0;
+            for(let widget of widgets){
+                let wf = widget.frequency;
+                if(wf != undefined && maxfreq < wf)
+                    maxfreq = wf;
+            }
+
+            if(maxfreq != 0)
+                new_period = 1000/maxfreq;
+        }
+
+        if(previous_period != new_period) {
+            set_subscription_period(index, new_period);
+            if(index <= last_remote_index){
+                delta.push(
+                    new Uint8Array([2]), /* subscribe = 2 */
+                    new Uint32Array([index]),
+                    new Uint16Array([new_period]));
+            }
+        }
+    }
+    send_blob(delta);
+};
+
+function send_hmi_value(index, value) {
+    if(index > last_remote_index){
+        updates[index] = value;
+        requestHMIAnimation();
+        return;
+    }
+
+    let iectype = hmitree_types[index];
+    let tobinary = typedarray_types[iectype];
+    send_blob([
+        new Uint8Array([0]),  /* setval = 0 */
+        new Uint32Array([index]),
+        tobinary(value)]);
+
+    // DON'T DO THAT unless read_iterator in svghmi.c modifies wbuf as well, not only rbuf
+    // cache[index] = value;
+};
+
+function apply_hmi_value(index, new_val) {
+    let old_val = cache[index]
+    if(new_val != undefined && old_val != new_val)
+        send_hmi_value(index, new_val);
+    return new_val;
+}
+
+const quotes = {"'":null, '"':null};
+
+function change_hmi_value(index, opstr) {
+    let op = opstr[0];
+    let given_val;
+    if(opstr.length < 2) 
+        return undefined; // TODO raise
+    if(opstr[1] in quotes){
+        if(opstr.length < 3) 
+            return undefined; // TODO raise
+        if(opstr[opstr.length-1] == opstr[1]){
+            given_val = opstr.slice(2,opstr.length-1);
+        }
+    } else {
+        given_val = Number(opstr.slice(1));
+    }
+    let old_val = cache[index];
+    let new_val;
+    switch(op){
+      case "=":
+        new_val = given_val;
+        break;
+      case "+":
+        new_val = old_val + given_val;
+        break;
+      case "-":
+        new_val = old_val - given_val;
+        break;
+      case "*":
+        new_val = old_val * given_val;
+        break;
+      case "/":
+        new_val = old_val / given_val;
+        break;
+    }
+    if(new_val != undefined && old_val != new_val)
+        send_hmi_value(index, new_val);
+    // TODO else raise
+    return new_val;
+}
+
+var current_visible_page;
+var current_subscribed_page;
+var current_page_index;
+
+function prepare_svg() {
+    // prevents context menu from appearing on right click and long touch
+    document.body.addEventListener('contextmenu', e => {
+        e.preventDefault();
+    });
+
+    for(let eltid in detachable_elements){
+        let [element,parent] = detachable_elements[eltid];
+        parent.removeChild(element);
+    }
+};
+
+function switch_page(page_name, page_index) {
+    if(current_subscribed_page != current_visible_page){
+        /* page switch already going */
+        /* TODO LOG ERROR */
+        return false;
+    }
+
+    if(page_name == undefined)
+        page_name = current_subscribed_page;
+
+
+    let old_desc = page_desc[current_subscribed_page];
+    let new_desc = page_desc[page_name];
+
+    if(new_desc == undefined){
+        /* TODO LOG ERROR */
+        return false;
+    }
+
+    if(page_index == undefined){
+        page_index = new_desc.page_index;
+    }
+
+    if(old_desc){
+        old_desc.widgets.map(([widget,relativeness])=>widget.unsub());
+    }
+    const new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index;
+
+    const container_id = page_name + (page_index != undefined ? page_index : "");
+
+    new_desc.widgets.map(([widget,relativeness])=>widget.sub(new_offset,relativeness,container_id));
+
+    update_subscriptions();
+
+    current_subscribed_page = page_name;
+    current_page_index = page_index;
+
+    jumps_need_update = true;
+
+    requestHMIAnimation();
+
+    jump_history.push([page_name, page_index]);
+    if(jump_history.length > 42)
+        jump_history.shift();
+
+    return true;
+};
+
+function switch_visible_page(page_name) {
+
+    let old_desc = page_desc[current_visible_page];
+    let new_desc = page_desc[page_name];
+
+    if(old_desc){
+        for(let eltid in old_desc.required_detachables){
+            if(!(eltid in new_desc.required_detachables)){
+                let [element, parent] = old_desc.required_detachables[eltid];
+                parent.removeChild(element);
+            }
+        }
+        for(let eltid in new_desc.required_detachables){
+            if(!(eltid in old_desc.required_detachables)){
+                let [element, parent] = new_desc.required_detachables[eltid];
+                parent.appendChild(element);
+            }
+        }
+    }else{
+        for(let eltid in new_desc.required_detachables){
+            let [element, parent] = new_desc.required_detachables[eltid];
+            parent.appendChild(element);
+        }
+    }
+
+    svg_root.setAttribute('viewBox',new_desc.bbox.join(" "));
+    current_visible_page = page_name;
+};
+
+// Once connection established
+ws.onopen = function (evt) {
+    init_widgets();
+    send_reset();
+    // show main page
+    prepare_svg();
+    switch_page(default_page);
+};
+
+ws.onclose = function (evt) {
+    // 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+".");
+
+};
+
+const xmlns = "http://www.w3.org/2000/svg";
+var edit_callback;
+const localtypes = {"PAGE_LOCAL":null, "HMI_LOCAL":null}
+function edit_value(path, valuetype, callback, initial, size) {
+    if(valuetype in localtypes){
+        valuetype = (typeof initial) == "number" ? "HMI_REAL" : "HMI_STRING";
+    }
+    let [keypadid, xcoord, ycoord] = keypads[valuetype];
+    edit_callback = callback;
+    let widget = hmi_widgets[keypadid];
+    widget.start_edit(path, valuetype, callback, initial, size);
+};
+
+var current_modal; /* TODO stack ?*/
+
+function show_modal(size) {
+    let [element, parent] = detachable_elements[this.element.id];
+
+    tmpgrp = document.createElementNS(xmlns,"g");
+    tmpgrpattr = document.createAttribute("transform");
+    let [xcoord,ycoord] = this.coordinates;
+    let [xdest,ydest] = page_desc[current_visible_page].bbox;
+    if (typeof size === 'undefined'){
+        tmpgrpattr.value = "translate("+String(xdest-xcoord)+","+String(ydest-ycoord)+")";
+    }
+    else{
+        tmpgrpattr.value = "translate("+String(xdest-xcoord+size.x)+","+String(ydest-ycoord+size.y)+")";
+    }
+
+    tmpgrp.setAttributeNode(tmpgrpattr);
+
+    tmpgrp.appendChild(element);
+    parent.appendChild(tmpgrp);
+
+    current_modal = [this.element.id, tmpgrp];
+};
+
+function end_modal() {
+    let [eltid, tmpgrp] = current_modal;
+    let [element, parent] = detachable_elements[this.element.id];
+
+    parent.removeChild(tmpgrp);
+
+    current_modal = undefined;
+};
+
+function widget_active_activable(eltsub) {
+    if(eltsub.inactive_style === undefined)
+        eltsub.inactive_style = eltsub.inactive.getAttribute("style");
+    eltsub.inactive.setAttribute("style", "display:none");
+    if(eltsub.active_style !== undefined)
+            eltsub.active.setAttribute("style", eltsub.active_style);
+};
+function widget_inactive_activable(eltsub) {
+    if(eltsub.active_style === undefined)
+        eltsub.active_style = eltsub.active.getAttribute("style");
+    eltsub.active.setAttribute("style", "display:none");
+    if(eltsub.inactive_style !== undefined)
+            eltsub.inactive.setAttribute("style", eltsub.inactive_style);
+};
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/svghmi.py	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,657 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+
+# This file is part of Beremiz
+# Copyright (C) 2019: Edouard TISSERANT
+#
+# See COPYING file for copyrights details.
+
+from __future__ import absolute_import
+import os
+import shutil
+from itertools import izip, imap
+from pprint import pformat
+import hashlib
+import weakref
+import shlex
+
+import wx
+import wx.dataview as dv
+
+from lxml import etree
+from lxml.etree import XSLTApplyError
+
+import util.paths as paths
+from POULibrary import POULibrary
+from docutil import open_svg, get_inkscape_path
+
+from util.ProcessLogger import ProcessLogger
+from runtime.typemapping import DebugTypesSize
+import targets
+from editors.ConfTreeNodeEditor import ConfTreeNodeEditor
+from XSLTransform import XSLTransform
+
+HMI_TYPES_DESC = {
+    "HMI_NODE":{},
+    "HMI_STRING":{},
+    "HMI_INT":{},
+    "HMI_BOOL":{},
+    "HMI_REAL":{}
+}
+
+HMI_TYPES = HMI_TYPES_DESC.keys()
+
+
+ScriptDirectory = paths.AbsDir(__file__)
+
+class HMITreeNode(object):
+    def __init__(self, path, name, nodetype, iectype = None, vartype = None, cpath = None, hmiclass = None):
+        self.path = path
+        self.name = name
+        self.nodetype = nodetype
+        self.hmiclass = hmiclass
+
+        if iectype is not None:
+            self.iectype = iectype
+            self.vartype = vartype
+            self.cpath = cpath
+
+        if nodetype in ["HMI_NODE"]:
+            self.children = []
+
+    def pprint(self, indent = 0):
+        res = ">"*indent + pformat(self.__dict__, indent = indent, depth = 1) + "\n"
+        if hasattr(self, "children"):
+            res += "\n".join([child.pprint(indent = indent + 1)
+                              for child in self.children])
+            res += "\n"
+
+        return res
+
+    def place_node(self, node):
+        best_child = None
+        known_best_match = 0
+        potential_siblings = {}
+        for child in self.children:
+            if child.path is not None:
+                in_common = 0
+                for child_path_item, node_path_item in izip(child.path, node.path):
+                    if child_path_item == node_path_item:
+                        in_common +=1
+                    else:
+                        break
+                # Match can only be HMI_NODE, and the whole path of node
+                # must match candidate node (except for name part)
+                # since candidate would become child of that node
+                if in_common > known_best_match and \
+                   child.nodetype == "HMI_NODE" and \
+                   in_common == len(child.path) - 1:
+                    known_best_match = in_common
+                    best_child = child
+                else:
+                    potential_siblings[child.path[
+                        -2 if child.nodetype == "HMI_NODE" else -1]] = child
+        if best_child is not None:
+            if node.nodetype == "HMI_NODE" and best_child.path[:-1] == node.path[:-1]:
+                return "Duplicate_HMI_NODE", best_child
+            return best_child.place_node(node)
+        else:
+            candidate_name = node.path[-2 if node.nodetype == "HMI_NODE" else -1]
+            if candidate_name in potential_siblings:
+                return "Non_Unique", potential_siblings[candidate_name]
+
+            if node.nodetype == "HMI_NODE" and len(self.children) > 0:
+                prev = self.children[-1]
+                if prev.path[:-1] == node.path[:-1]:
+                    return "Late_HMI_NODE",prev
+
+            self.children.append(node)
+            return None
+
+    def etree(self, add_hash=False):
+
+        attribs = dict(name=self.name)
+        if self.path is not None:
+            attribs["path"] = ".".join(self.path)
+
+        if self.hmiclass is not None:
+            attribs["class"] = self.hmiclass
+
+        if add_hash:
+            attribs["hash"] = ",".join(map(str,self.hash()))
+
+        res = etree.Element(self.nodetype, **attribs)
+
+        if hasattr(self, "children"):
+            for child_etree in imap(lambda c:c.etree(), self.children):
+                res.append(child_etree)
+
+        return res
+
+    def traverse(self):
+        yield self
+        if hasattr(self, "children"):
+            for c in self.children:
+                for yoodl in c.traverse():
+                    yield yoodl
+
+
+    def hash(self):
+        """ Produce a hash, any change in HMI tree structure change that hash """
+        s = hashlib.new('md5')
+        self._hash(s)
+        # limit size to HMI_HASH_SIZE as in svghmi.c
+        return map(ord,s.digest())[:8]
+
+    def _hash(self, s):
+        s.update(str((self.name,self.nodetype)))
+        if hasattr(self, "children"):
+            for c in self.children:
+                c._hash(s)
+
+# module scope for HMITree root
+# so that CTN can use HMITree deduced in Library
+# note: this only works because library's Generate_C is
+#       systematicaly invoked before CTN's CTNGenerate_C
+
+hmi_tree_root = None
+
+on_hmitree_update = None
+
+SPECIAL_NODES = [("HMI_ROOT", "HMI_NODE"),
+                 ("heartbeat", "HMI_INT")]
+                 # ("current_page", "HMI_STRING")])
+
+class SVGHMILibrary(POULibrary):
+    def GetLibraryPath(self):
+         return paths.AbsNeighbourFile(__file__, "pous.xml")
+
+    def Generate_C(self, buildpath, varlist, IECCFLAGS):
+        global hmi_tree_root, on_hmitree_update
+
+        """
+        PLC Instance Tree:
+          prog0
+           +->v1 HMI_INT
+           +->v2 HMI_INT
+           +->fb0 (type mhoo)
+           |   +->va HMI_NODE
+           |   +->v3 HMI_INT
+           |   +->v4 HMI_INT
+           |
+           +->fb1 (type mhoo)
+           |   +->va HMI_NODE
+           |   +->v3 HMI_INT
+           |   +->v4 HMI_INT
+           |
+           +->fb2
+               +->v5 HMI_IN
+
+        HMI tree:
+          hmi0
+           +->v1
+           +->v2
+           +->fb0 class:va
+           |   +-> v3
+           |   +-> v4
+           |
+           +->fb1 class:va
+           |   +-> v3
+           |   +-> v4
+           |
+           +->v5
+
+        """
+
+        # Filter known HMI types
+        hmi_types_instances = [v for v in varlist if v["derived"] in HMI_TYPES]
+
+        hmi_tree_root = None
+
+        # take first HMI_NODE (placed as special node), make it root
+        for i,v in enumerate(hmi_types_instances):
+            path = v["IEC_path"].split(".")
+            derived = v["derived"]
+            if derived == "HMI_NODE":
+                hmi_tree_root = HMITreeNode(path, "", derived, v["type"], v["vartype"], v["C_path"])
+                hmi_types_instances.pop(i)
+                break
+
+        if hmi_tree_root is None:
+            self.FatalError("SVGHMI : Library is selected but not used. Please either deselect it in project config or add a SVGHMI node to project.")
+
+        # deduce HMI tree from PLC HMI_* instances
+        for v in hmi_types_instances:
+            path = v["IEC_path"].split(".")
+            # ignores variables starting with _TMP_
+            if path[-1].startswith("_TMP_"):
+                continue
+            derived = v["derived"]
+            kwargs={}
+            if derived == "HMI_NODE":
+                # TODO : make problem if HMI_NODE used in CONFIG or RESOURCE
+                name = path[-2]
+                kwargs['hmiclass'] = path[-1]
+            else:
+                name = path[-1]
+            new_node = HMITreeNode(path, name, derived, v["type"], v["vartype"], v["C_path"], **kwargs)
+            placement_result = hmi_tree_root.place_node(new_node)
+            if placement_result is not None:
+                cause, problematic_node = placement_result
+                if cause == "Non_Unique":
+                    message = _("HMI tree nodes paths are not unique.\nConflicting variable: {} {}").format(
+                        ".".join(problematic_node.path),
+                        ".".join(new_node.path))
+
+                    last_FB = None 
+                    for v in varlist:
+                        if v["vartype"] == "FB":
+                            last_FB = v 
+                        if v["C_path"] == problematic_node:
+                            break
+                    if last_FB is not None:
+                        failing_parent = last_FB["type"]
+                        message += "\n"
+                        message += _("Solution: Add HMI_NODE at beginning of {}").format(failing_parent)
+
+                elif cause in ["Late_HMI_NODE", "Duplicate_HMI_NODE"]:
+                    cause, problematic_node = placement_result
+                    message = _("There must be only one occurrence of HMI_NODE before any HMI_* variable in POU.\nConflicting variable: {} {}").format(
+                        ".".join(problematic_node.path),
+                        ".".join(new_node.path))
+
+                self.FatalError("SVGHMI : " + message)
+
+        if on_hmitree_update is not None:
+            on_hmitree_update()
+
+        variable_decl_array = []
+        extern_variables_declarations = []
+        buf_index = 0
+        item_count = 0
+        found_heartbeat = False
+
+        hearbeat_IEC_path = ['CONFIG', 'HEARTBEAT']
+
+        for node in hmi_tree_root.traverse():
+            if not found_heartbeat and node.path == hearbeat_IEC_path:
+                hmi_tree_hearbeat_index = item_count
+                found_heartbeat = True
+                extern_variables_declarations += [
+                    "#define heartbeat_index "+str(hmi_tree_hearbeat_index)
+                ]
+            if hasattr(node, "iectype"):
+                sz = DebugTypesSize.get(node.iectype, 0)
+                variable_decl_array += [
+                    "{&(" + node.cpath + "), " + node.iectype + {
+                        "EXT": "_P_ENUM",
+                        "IN":  "_P_ENUM",
+                        "MEM": "_O_ENUM",
+                        "OUT": "_O_ENUM",
+                        "VAR": "_ENUM"
+                    }[node.vartype] + ", " +
+                    str(buf_index) + ", 0, }"]
+                buf_index += sz
+                item_count += 1
+                if len(node.path) == 1:
+                    extern_variables_declarations += [
+                        "extern __IEC_" + node.iectype + "_" +
+                        "t" if node.vartype is "VAR" else "p"
+                        + node.cpath + ";"]
+
+        assert(found_heartbeat)
+
+        # TODO : filter only requiered external declarations
+        for v in varlist:
+            if v["C_path"].find('.') < 0:
+                extern_variables_declarations += [
+                    "extern %(type)s %(C_path)s;" % v]
+
+        # TODO check if programs need to be declared separately
+        # "programs_declarations": "\n".join(["extern %(type)s %(C_path)s;" %
+        #                                     p for p in self._ProgramList]),
+
+        # C code to observe/access HMI tree variables
+        svghmi_c_filepath = paths.AbsNeighbourFile(__file__, "svghmi.c")
+        svghmi_c_file = open(svghmi_c_filepath, 'r')
+        svghmi_c_code = svghmi_c_file.read()
+        svghmi_c_file.close()
+        svghmi_c_code = svghmi_c_code % {
+            "variable_decl_array": ",\n".join(variable_decl_array),
+            "extern_variables_declarations": "\n".join(extern_variables_declarations),
+            "buffer_size": buf_index,
+            "item_count": item_count,
+            "var_access_code": targets.GetCode("var_access.c"),
+            "PLC_ticktime": self.GetCTR().GetTicktime(),
+            "hmi_hash_ints": ",".join(map(str,hmi_tree_root.hash()))
+            }
+
+        gen_svghmi_c_path = os.path.join(buildpath, "svghmi.c")
+        gen_svghmi_c = open(gen_svghmi_c_path, 'w')
+        gen_svghmi_c.write(svghmi_c_code)
+        gen_svghmi_c.close()
+
+        # Python based WebSocket HMITree Server
+        svghmiserverfile = open(paths.AbsNeighbourFile(__file__, "svghmi_server.py"), 'r')
+        svghmiservercode = svghmiserverfile.read()
+        svghmiserverfile.close()
+
+        runtimefile_path = os.path.join(buildpath, "runtime_00_svghmi.py")
+        runtimefile = open(runtimefile_path, 'w')
+        runtimefile.write(svghmiservercode)
+        runtimefile.close()
+
+        return ((["svghmi"], [(gen_svghmi_c_path, IECCFLAGS)], True), "",
+                ("runtime_00_svghmi.py", open(runtimefile_path, "rb")))
+                #         ^
+                # note the double zero after "runtime_", 
+                # to ensure placement before other CTN generated code in execution order
+
+
+class HMITreeSelector(wx.TreeCtrl):
+    def __init__(self, parent):
+        global on_hmitree_update
+        wx.TreeCtrl.__init__(self,parent,style=wx.TR_MULTIPLE)# | wx.TR_HIDE_ROOT)
+
+        isz = (16,16)
+        self.il = il = wx.ImageList(*isz)
+        self.fldridx     = il.AddIcon(wx.ArtProvider.GetIcon(wx.ART_FOLDER,      wx.ART_OTHER, isz))
+        self.fldropenidx = il.AddIcon(wx.ArtProvider.GetIcon(wx.ART_FOLDER_OPEN, wx.ART_OTHER, isz))
+        self.fileidx     = il.AddIcon(wx.ArtProvider.GetIcon(wx.ART_NORMAL_FILE, wx.ART_OTHER, isz))
+        self.SetImageList(il)
+
+        on_hmitree_update = self.SVGHMIEditorUpdater()
+        self.MakeTree()
+
+    def _recurseTree(self, current_hmitree_root, current_tc_root):
+        for c in current_hmitree_root.children:
+            if hasattr(c, "children"):
+                display_name = ('{} (class={})'.format(c.name, c.hmiclass)) \
+                               if c.hmiclass is not None else c.name
+                tc_child = self.AppendItem(current_tc_root, display_name)
+                self.SetPyData(tc_child, None)
+                self.SetItemImage(tc_child, self.fldridx, wx.TreeItemIcon_Normal)
+                self.SetItemImage(tc_child, self.fldropenidx, wx.TreeItemIcon_Expanded)
+
+                self._recurseTree(c,tc_child)
+            else:
+                display_name = '{} {}'.format(c.nodetype[4:], c.name)
+                tc_child = self.AppendItem(current_tc_root, display_name)
+                self.SetPyData(tc_child, None)
+                self.SetItemImage(tc_child, self.fileidx, wx.TreeItemIcon_Normal)
+                self.SetItemImage(tc_child, self.fileidx, wx.TreeItemIcon_Expanded)
+
+    def MakeTree(self):
+        global hmi_tree_root
+
+        self.Freeze()
+
+        self.root = None
+        self.DeleteAllItems()
+
+        root_display_name = _("Please build to see HMI Tree") if hmi_tree_root is None else "HMI"
+        self.root = self.AddRoot(root_display_name)
+        self.SetPyData(self.root, None)
+        self.SetItemImage(self.root, self.fldridx, wx.TreeItemIcon_Normal)
+        self.SetItemImage(self.root, self.fldropenidx, wx.TreeItemIcon_Expanded)
+
+        if hmi_tree_root is not None:
+            self._recurseTree(hmi_tree_root, self.root)
+
+        self.Thaw()
+
+    def SVGHMIEditorUpdater(self):
+        selfref = weakref.ref(self)
+        def SVGHMIEditorUpdate():
+            o = selfref()
+            if o is not None:
+                wx.CallAfter(o.MakeTree)
+        return SVGHMIEditorUpdate
+
+class HMITreeView(wx.SplitterWindow):
+
+    def __init__(self, parent):
+        wx.SplitterWindow.__init__(self, parent,
+                                   style=wx.SUNKEN_BORDER | wx.SP_3D)
+
+        self.SelectionTree = HMITreeSelector(self)
+        #self.Staging = wx.Panel(self)
+        #self.SplitHorizontally(self.SelectionTree, self.Staging, 200)
+        self.Initialize(self.SelectionTree)
+
+
+class SVGHMIEditor(ConfTreeNodeEditor):
+    CONFNODEEDITOR_TABS = [
+        (_("HMI Tree"), "CreateHMITreeView")]
+
+    def CreateHMITreeView(self, parent):
+        #self.HMITreeView = HMITreeView(self)
+        return HMITreeSelector(parent)
+
+
+class SVGHMI(object):
+    XSD = """<?xml version="1.0" encoding="utf-8" ?>
+    <xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema">
+      <xsd:element name="SVGHMI">
+        <xsd:complexType>
+          <xsd:attribute name="OnStart" type="xsd:string" use="optional"/>
+          <xsd:attribute name="OnStop" type="xsd:string" use="optional"/>
+          <xsd:attribute name="OnWatchdog" type="xsd:string" use="optional"/>
+          <xsd:attribute name="WatchdogInitial" type="xsd:integer" use="optional"/>
+          <xsd:attribute name="WatchdogInterval" type="xsd:integer" use="optional"/>
+        </xsd:complexType>
+      </xsd:element>
+    </xsd:schema>
+    """
+
+    EditorType = SVGHMIEditor
+
+    ConfNodeMethods = [
+        {
+            "bitmap":    "ImportSVG",
+            "name":    _("Import SVG"),
+            "tooltip": _("Import SVG"),
+            "method":   "_ImportSVG"
+        },
+        {
+            "bitmap":    "ImportSVG",  # should be something different
+            "name":    _("Inkscape"),
+            "tooltip": _("Edit HMI"),
+            "method":   "_StartInkscape"
+        },
+
+        # TODO : Launch POEdit button
+        #        PO -> SVG layers button
+        #        SVG layers -> PO
+
+        # TODO : HMITree button
+        #        - can drag'n'drop variabes to Inkscape
+
+    ]
+
+    def _getSVGpath(self, project_path=None):
+        if project_path is None:
+            project_path = self.CTNPath()
+        return os.path.join(project_path, "svghmi.svg")
+
+
+    def OnCTNSave(self, from_project_path=None):
+        if from_project_path is not None:
+            shutil.copyfile(self._getSVGpath(from_project_path),
+                            self._getSVGpath())
+        return True
+
+    def GetSVGGeometry(self):
+        # invoke inskscape -S, csv-parse output, produce elements
+        InkscapeGeomColumns = ["Id", "x", "y", "w", "h"]
+
+        inkpath = get_inkscape_path()
+
+        if inkpath is None:
+            self.FatalError("SVGHMI: inkscape is not installed.")
+
+        svgpath = self._getSVGpath()
+        status, result, _err_result = ProcessLogger(self.GetCTRoot().logger,
+                                                     '"' + inkpath + '" -S "' + svgpath + '"',
+                                                     no_stdout=True,
+                                                     no_stderr=True).spin()
+        if status != 0:
+            self.FatalError("SVGHMI: inkscape couldn't extract geometry from given SVG.")
+
+        res = []
+        for line in result.split():
+            strippedline = line.strip()
+            attrs = dict(
+                zip(InkscapeGeomColumns, line.strip().split(',')))
+
+            res.append(etree.Element("bbox", **attrs))
+
+        return res
+
+    def GetHMITree(self):
+        global hmi_tree_root
+        res = [hmi_tree_root.etree(add_hash=True)]
+        return res
+
+    def CTNGenerate_C(self, buildpath, locations):
+
+        location_str = "_".join(map(str, self.GetCurrentLocation()))
+        view_name = self.BaseParams.getName()
+
+        svgfile = self._getSVGpath()
+
+        res = ([], "", False)
+
+        target_fname = "svghmi_"+location_str+".xhtml"
+
+        target_path = os.path.join(self._getBuildPath(), target_fname)
+        target_file = open(target_path, 'wb')
+
+        if os.path.exists(svgfile):
+
+            # TODO : move to __init__
+            transform = XSLTransform(os.path.join(ScriptDirectory, "gen_index_xhtml.xslt"),
+                          [("GetSVGGeometry", lambda *_ignored:self.GetSVGGeometry()),
+                           ("GetHMITree", lambda *_ignored:self.GetHMITree())])
+
+
+            # load svg as a DOM with Etree
+            svgdom = etree.parse(svgfile)
+
+            # call xslt transform on Inkscape's SVG to generate XHTML
+            try: 
+                result = transform.transform(svgdom)
+            except XSLTApplyError as e:
+                self.FatalError("SVGHMI " + view_name  + ": " + e.message)
+            finally:
+                for entry in transform.get_error_log():
+                    message = "SVGHMI: "+ entry.message + "\n" 
+                    self.GetCTRoot().logger.write_warning(message)
+
+            result.write(target_file, encoding="utf-8")
+            # print(str(result))
+            # print(transform.xslt.error_log)
+
+            # TODO
+            #   - Errors on HMI semantics
+            #   - ... maybe something to have a global view of what is declared in SVG.
+
+        else:
+            # TODO : use default svg that expose the HMI tree as-is
+            target_file.write("""<!DOCTYPE html>
+<html>
+<body>
+<h1> No SVG file provided </h1>
+</body>
+</html>
+""")
+
+        target_file.close()
+
+        res += ((target_fname, open(target_path, "rb")),)
+
+        svghmi_cmds = {}
+        for thing in ["Start", "Stop", "Watchdog"]:
+             given_command = self.GetParamsAttributes("SVGHMI.On"+thing)["value"]
+             svghmi_cmds[thing] = (
+                "Popen(" +
+                repr(shlex.split(given_command.format(port="8008", name=view_name))) +
+                ")") if given_command else "pass # 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)
+def svghmi_watchdog_trigger():
+    {svghmi_cmds[Watchdog]}
+
+svghmi_watchdog = None
+
+def _runtime_{location}_svghmi_start():
+    global svghmi_watchdog
+    svghmi_root.putChild(
+        '{view_name}',
+        NoCacheFile('{xhtml}',
+        defaultType='application/xhtml+xml'))
+
+    {svghmi_cmds[Start]}
+
+    svghmi_watchdog = Watchdog(
+        {watchdog_initial}, 
+        {watchdog_interval}, 
+        svghmi_watchdog_trigger)
+
+def _runtime_{location}_svghmi_stop():
+    global svghmi_watchdog
+    if svghmi_watchdog is not None:
+        svghmi_watchdog.cancel()
+        svghmi_watchdog = None
+
+    svghmi_root.delEntity('{view_name}')
+    {svghmi_cmds[Stop]}
+
+        """.format(location=location_str,
+                   xhtml=target_fname,
+                   view_name=view_name,
+                   svghmi_cmds=svghmi_cmds,
+                   watchdog_initial = self.GetParamsAttributes("SVGHMI.WatchdogInitial")["value"],
+                   watchdog_interval = self.GetParamsAttributes("SVGHMI.WatchdogInterval")["value"],
+                   ))
+
+        runtimefile.close()
+
+        res += (("runtime_%s_svghmi.py" % location_str, open(runtimefile_path, "rb")),)
+
+        return res
+
+    def _ImportSVG(self):
+        dialog = wx.FileDialog(self.GetCTRoot().AppFrame, _("Choose a SVG file"), os.getcwd(), "",  _("SVG files (*.svg)|*.svg|All files|*.*"), wx.OPEN)
+        if dialog.ShowModal() == wx.ID_OK:
+            svgpath = dialog.GetPath()
+            if os.path.isfile(svgpath):
+                shutil.copy(svgpath, self._getSVGpath())
+            else:
+                self.GetCTRoot().logger.write_error(_("No such SVG file: %s\n") % svgpath)
+        dialog.Destroy()
+
+    def _StartInkscape(self):
+        svgfile = self._getSVGpath()
+        open_inkscape = True
+        if not self.GetCTRoot().CheckProjectPathPerm():
+            dialog = wx.MessageDialog(self.GetCTRoot().AppFrame,
+                                      _("You don't have write permissions.\nOpen Inkscape anyway ?"),
+                                      _("Open Inkscape"),
+                                      wx.YES_NO | wx.ICON_QUESTION)
+            open_inkscape = dialog.ShowModal() == wx.ID_YES
+            dialog.Destroy()
+        if open_inkscape:
+            if not os.path.isfile(svgfile):
+                svgfile = None
+            open_svg(svgfile)
+
+    def CTNGlobalInstances(self):
+        # view_name = self.BaseParams.getName()
+        # return [ (view_name + "_" + name, iec_type, "") for name, iec_type in SPECIAL_NODES]
+        # TODO : move to library level for multiple hmi
+        return [(name, iec_type, "") for name, iec_type in SPECIAL_NODES]
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/svghmi_server.py	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,204 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+
+# This file is part of Beremiz
+# Copyright (C) 2019: Edouard TISSERANT
+# See COPYING file for copyrights details.
+
+from __future__ import absolute_import
+import errno
+from threading import RLock, Timer
+
+try:
+    from runtime.spawn_subprocess import Popen
+except ImportError:
+    from subprocess import Popen
+
+from twisted.web.server import Site
+from twisted.web.resource import Resource
+from twisted.internet import reactor
+from twisted.web.static import File
+
+from autobahn.twisted.websocket import WebSocketServerFactory, WebSocketServerProtocol
+from autobahn.websocket.protocol import WebSocketProtocol
+from autobahn.twisted.resource import  WebSocketResource
+
+# TODO multiclient :
+# session list lock
+# svghmi_sessions = []
+# svghmi_watchdogs = []
+
+svghmi_session = None
+svghmi_watchdog = None
+
+svghmi_send_collect = PLCBinary.svghmi_send_collect
+svghmi_send_collect.restype = ctypes.c_int # error or 0
+svghmi_send_collect.argtypes = [
+    ctypes.POINTER(ctypes.c_uint32),  # size
+    ctypes.POINTER(ctypes.c_void_p)]  # data ptr
+# TODO multiclient : switch to arrays
+
+svghmi_recv_dispatch = PLCBinary.svghmi_recv_dispatch
+svghmi_recv_dispatch.restype = ctypes.c_int # error or 0
+svghmi_recv_dispatch.argtypes = [
+    ctypes.c_uint32,  # size
+    ctypes.c_char_p]  # data ptr
+# TODO multiclient : switch to arrays
+
+class HMISession(object):
+    def __init__(self, protocol_instance):
+        global svghmi_session
+        
+        # Single client :
+        # Creating a new HMISession closes pre-existing HMISession
+        if svghmi_session is not None:
+            svghmi_session.close()
+        svghmi_session = self
+        self.protocol_instance = protocol_instance
+
+        # TODO multiclient :
+        # svghmi_sessions.append(self)
+        # get a unique bit index amont other svghmi_sessions,
+        # so that we can match flags passed by C->python callback
+
+    def close(self):
+        global svghmi_session
+        if svghmi_session == self:
+            svghmi_session = None
+        self.protocol_instance.sendClose(WebSocketProtocol.CLOSE_STATUS_CODE_NORMAL)
+
+    def onMessage(self, msg):
+        # pass message to the C side recieve_message()
+        return svghmi_recv_dispatch(len(msg), msg)
+
+        # TODO multiclient : pass client index as well
+
+    def sendMessage(self, msg):
+        self.protocol_instance.sendMessage(msg, True)
+        return 0
+
+class Watchdog(object):
+    def __init__(self, initial_timeout, interval, callback):
+        self._callback = callback
+        self.lock = RLock()
+        self.initial_timeout = initial_timeout
+        self.interval = interval
+        self.callback = callback
+        with self.lock:
+            self._start()
+
+    def _start(self, rearm=False):
+        duration = self.interval if rearm else self.initial_timeout
+        if duration:
+            self.timer = Timer(duration, self.trigger)
+            self.timer.start()
+        else:
+            self.timer = None
+
+    def _stop(self):
+        if self.timer is not None:
+            self.timer.cancel()
+            self.timer = None
+
+    def cancel(self):
+        with self.lock:
+            self._stop()
+
+    def feed(self, rearm=True):
+        with self.lock:
+            self._stop()
+            self._start(rearm)
+
+    def trigger(self):
+        self._callback()
+        # wait for initial timeout on re-start
+        self.feed(rearm=False)
+
+class HMIProtocol(WebSocketServerProtocol):
+
+    def __init__(self, *args, **kwargs):
+        self._hmi_session = None
+        WebSocketServerProtocol.__init__(self, *args, **kwargs)
+
+    def onOpen(self):
+        assert(self._hmi_session is None)
+        self._hmi_session = HMISession(self)
+
+    def onClose(self, wasClean, code, reason):
+        self._hmi_session = None
+
+    def onMessage(self, msg, isBinary):
+        assert(self._hmi_session is not None)
+
+        result = self._hmi_session.onMessage(msg)
+        if result == 1 :  # was heartbeat
+            if svghmi_watchdog is not None:
+                svghmi_watchdog.feed()
+
+class HMIWebSocketServerFactory(WebSocketServerFactory):
+    protocol = HMIProtocol
+
+svghmi_root = None
+svghmi_listener = None
+svghmi_send_thread = None
+
+def SendThreadProc():
+    global svghmi_session
+    size = ctypes.c_uint32()
+    ptr = ctypes.c_void_p()
+    res = 0
+    while True:
+        res=svghmi_send_collect(ctypes.byref(size), ctypes.byref(ptr))
+        if res == 0:
+            # TODO multiclient : dispatch to sessions
+            if svghmi_session is not None:
+                svghmi_session.sendMessage(ctypes.string_at(ptr.value,size.value))
+        elif res == errno.ENODATA:
+            # this happens when there is no data after wakeup
+            # because of hmi data refresh period longer than PLC common ticktime
+            pass 
+        else:
+            # this happens when finishing
+            break
+
+
+def watchdog_trigger():
+    print("SVGHMI watchdog trigger")
+    
+
+# Called by PLCObject at start
+def _runtime_00_svghmi_start():
+    global svghmi_listener, svghmi_root, svghmi_send_thread
+
+    svghmi_root = Resource()
+    svghmi_root.putChild("ws", WebSocketResource(HMIWebSocketServerFactory()))
+
+    svghmi_listener = reactor.listenTCP(8008, Site(svghmi_root))
+
+    # start a thread that call the C part of SVGHMI
+    svghmi_send_thread = Thread(target=SendThreadProc, name="SVGHMI Send")
+    svghmi_send_thread.start()
+
+
+# Called by PLCObject at stop
+def _runtime_00_svghmi_stop():
+    global svghmi_listener, svghmi_root, svghmi_send_thread, svghmi_session
+
+    if svghmi_session is not None:
+        svghmi_session.close()
+    svghmi_root.delEntity("ws")
+    svghmi_root = None
+    svghmi_listener.stopListening()
+    svghmi_listener = None
+    # plc cleanup calls svghmi_(locstring)_cleanup and unlocks send thread
+    svghmi_send_thread.join()
+    svghmi_send_thread = None
+
+
+class NoCacheFile(File):
+    def render_GET(self, request):
+        request.setHeader(b"Cache-Control", b"no-cache, no-store")
+        return File.render_GET(self, request)
+    render_HEAD = render_GET
+
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_animate.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,53 @@
+// widget_animate.ysl2
+
+template "widget[@type='Animate']", mode="widget_class"{
+    ||
+    class AnimateWidget extends Widget{
+        frequency = 5;
+        speed = 0;
+        start = false;
+        widget_center = undefined;
+
+        dispatch(value) {
+            this.speed = value / 5;
+
+            //reconfigure animation
+            this.request_animate();
+        }
+
+        animate(){
+           // change animation properties
+           for(let child of this.element.children){
+                if(child.nodeName.startsWith("animate")){
+                    if(this.speed != 0 && !this.start){
+                        this.start = true;
+                        this.element.beginElement();
+                    }
+
+                    if(this.speed > 0){
+                        child.setAttribute("dur", this.speed+"s");
+                    }
+                    else if(this.speed < 0){
+                        child.setAttribute("dur", (-1)*this.speed+"s");
+                    }
+                    else{
+                        this.start = false;
+                        this.element.endElement();
+                    }
+                }
+           }
+        }
+
+        init() {
+            let widget_pos = this.element.getBBox();
+            this.widget_center = [(widget_pos.x+widget_pos.width/2), (widget_pos.y+widget_pos.height/2)];
+        }
+    }
+    ||
+}
+
+
+template "widget[@type='Animate']", mode="widget_defs" {
+    param "hmi_element";
+    |,
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_animaterotation.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,51 @@
+// widget_animaterotation.ysl2
+
+template "widget[@type='AnimateRotation']", mode="widget_class"{
+    ||
+    class AnimateRotationWidget extends Widget{
+        frequency = 5;
+        speed = 0;
+        widget_center = undefined;
+
+        dispatch(value) {
+            this.speed = value / 5;
+
+            //reconfigure animation
+            this.request_animate();
+        }
+
+        animate(){
+           // change animation properties
+           for(let child of this.element.children){
+                if(child.nodeName == "animateTransform"){
+                    if(this.speed > 0){
+                        child.setAttribute("dur", this.speed+"s");
+                        child.setAttribute("from", "0 "+this.widget_center[0]+" "+this.widget_center[1]);
+                        child.setAttribute("to", "360 "+this.widget_center[0]+" "+this.widget_center[1]);
+                    }
+                    else if(this.speed < 0){
+                        child.setAttribute("dur", (-1)*this.speed+"s");
+                        child.setAttribute("from", "360 "+this.widget_center[0]+" "+this.widget_center[1]);
+                        child.setAttribute("to", "0 "+this.widget_center[0]+" "+this.widget_center[1]);
+                    }
+                    else{
+                        child.setAttribute("from", "0 "+this.widget_center[0]+" "+this.widget_center[1]);
+                        child.setAttribute("to", "0 "+this.widget_center[0]+" "+this.widget_center[1]);
+                    }
+                }
+           }
+        }
+
+        init() {
+            let widget_pos = this.element.getBBox();
+            this.widget_center = [(widget_pos.x+widget_pos.width/2), (widget_pos.y+widget_pos.height/2)];
+        }
+    }
+    ||
+}
+
+
+template "widget[@type='AnimateRotation']", mode="widget_defs" {
+    param "hmi_element";
+    |,
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_back.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,17 @@
+// widget_back.ysl2
+
+template "widget[@type='Back']", mode="widget_class"
+    ||
+    class BackWidget extends Widget{
+        on_click(evt) {
+            if(jump_history.length > 1){
+               jump_history.pop();
+               let [page_name, index] = jump_history.pop();
+               switch_page(page_name, index);
+            }
+        }
+        init() {
+            this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
+        }
+    }
+    ||
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_button.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,155 @@
+// widget_button.ysl2
+
+// Finite state machine
+decl fsm(name);
+decl state(name);
+decl on_mouse(position);
+decl on_dispatch(value);
+decl jump(state);
+decl show(eltname);
+decl hmi_value(value);
+
+// State machine to drive HMI_BOOL on a potentially laggy connection
+const "_button_fsm" fsm {
+    state "init" {
+        on_dispatch "false" jump "released";
+        on_dispatch "true" jump "pressed";
+    }
+
+    state "pressing" {
+        // show "waitactive";
+        hmi_value "true";
+        on_dispatch "true" jump "pressed";
+        on_mouse "up" jump "shortpress";
+    }
+    state "pressed" {
+        show "active";
+        on_mouse "up" jump "releasing";
+        on_dispatch "false" jump "released";
+    }
+    state "shortpress" {
+        on_dispatch "true" jump "releasing";
+        on_mouse "down" jump "pressing";
+    }
+
+    state "releasing" {
+        // show "waitinactive";
+        hmi_value "false";
+        on_dispatch "false" jump "released";
+        on_mouse "down" jump "shortrelease";
+    }
+    state "released" {
+        show "inactive";
+        on_mouse "down" jump "pressing";
+        on_dispatch "true" jump "pressed";
+    }
+    state "shortrelease" {
+        on_dispatch "false" jump "pressing";
+        on_mouse "up" jump "releasing";
+    }
+}
+
+template "fsm", mode="dispatch_transition" {
+    |         switch (this.state) {
+    apply "state", mode="dispatch_transition";
+    |         }
+}
+template "state", mode="dispatch_transition" {
+    |           case "«@name»":
+       apply "on-dispatch";
+    |             break;
+}
+template "on-dispatch" {
+    |             if(value ==  «@value») {
+    apply "jump", mode="transition";
+    |             }
+}
+
+template "fsm", mode="mouse_transition" {
+    param "position";
+    |         switch (this.state) {
+    apply "state", mode="mouse_transition" with "position", "$position";
+    |         }
+}
+template "state", mode="mouse_transition" {
+    param "position";
+    |           case "«@name»":
+    apply "on-mouse[@position = $position]";
+    |             break;
+}
+template "on-mouse" {
+    // up or down state is already assumed because apply statement filters it
+    apply "jump", mode="transition";
+}
+
+template "jump", mode="transition" {
+    |             this.state = "«@state»";
+    |             this.«@state»_action();
+}
+
+template "fsm", mode="actions" {
+    apply "state", mode="actions";
+}
+template "state", mode="actions" {
+    |     «@name»_action(){
+    //| console.log("Entering state «@name»");
+    apply "*", mode="actions";
+    |     }
+}
+template "show", mode="actions" {
+    |         this.display = "«@eltname»";
+    |         this.request_animate();
+}
+template "hmi-value", mode="actions" {
+    |         this.apply_hmi_value(0, «@value»);
+}
+
+template "widget[@type='Button']", mode="widget_class"{
+    const "fsm","exsl:node-set($_button_fsm)";
+    | class ButtonWidget extends Widget{
+    |     frequency = 5;
+
+    |     display = "inactive";
+    |     state = "init";
+
+    |     dispatch(value) {
+    // |         console.log("dispatch"+value);
+    apply "$fsm", mode="dispatch_transition";
+    |     }
+
+    |     onmouseup(evt) {
+    |         svg_root.removeEventListener("pointerup", this.bound_onmouseup, true);
+    // |         console.log("onmouseup");
+    apply "$fsm", mode="mouse_transition" with "position", "'up'";
+    |     }
+    |     onmousedown(evt) {
+    |         svg_root.addEventListener("pointerup", this.bound_onmouseup, true);
+    // |         console.log("onmousedown");
+    apply "$fsm", mode="mouse_transition" with "position", "'down'";
+    |     }
+
+    apply "$fsm", mode="actions";
+
+    |     animate(){
+    |         if (this.active_elt && this.inactive_elt) {
+    foreach "str:split('active inactive')" {
+    |             if(this.display == "«.»")
+    |                 this.«.»_elt.style.display = "";
+    |             else
+    |                 this.«.»_elt.style.display = "none";
+    }
+    |         }
+    |     }
+
+    |     init() {
+    |         this.bound_onmouseup = this.onmouseup.bind(this);
+    |         this.element.addEventListener("pointerdown", this.onmousedown.bind(this));
+    |     }
+    | }
+}
+
+
+template "widget[@type='Button']", mode="widget_defs" {
+    param "hmi_element";
+    optional_labels("active inactive");
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_circularbar.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,57 @@
+// widget_circularbar.ysl2
+
+template "widget[@type='CircularBar']", mode="widget_class"{
+    ||
+    class CircularBarWidget extends Widget{
+        frequency = 10;
+        range = undefined;
+
+        dispatch(value) {
+            if(this.value_elt)
+                this.value_elt.textContent = String(value);
+            let [min,max,start,end] = this.range;
+            let [cx,cy] = this.center;
+            let [rx,ry] = this.proportions;
+            let tip = start + (end-start)*Number(value)/(max-min);
+            let size = 0;
+            if (tip-start > Math.PI) {
+                size = 1;
+            } else {
+                size = 0;
+            }
+            this.path_elt.setAttribute('d', "M "+(cx+rx*Math.cos(start))+","+(cy+ry*Math.sin(start))+" A "+rx+","+ry+" 0 "+size+" 1 "+(cx+rx*Math.cos(tip))+","+(cy+ry*Math.sin(tip)));
+        }
+
+        init() {
+            let start = Number(this.path_elt.getAttribute('sodipodi:start'));
+            let end = Number(this.path_elt.getAttribute('sodipodi:end'));
+            let cx = Number(this.path_elt.getAttribute('sodipodi:cx'));
+            let cy = Number(this.path_elt.getAttribute('sodipodi:cy'));
+            let rx = Number(this.path_elt.getAttribute('sodipodi:rx'));
+            let ry = Number(this.path_elt.getAttribute('sodipodi:ry'));
+            if (ry == 0) {
+                ry = rx;
+            }
+            if (start > end) {
+                end = end + 2*Math.PI;
+            }
+            let min = this.min_elt ?
+                      Number(this.min_elt.textContent) :
+                      this.args.length >= 1 ? this.args[0] : 0;
+            let max = this.max_elt ?
+                      Number(this.max_elt.textContent) :
+                      this.args.length >= 2 ? this.args[1] : 100;
+            this.range = [min, max, start, end];
+            this.center = [cx, cy];
+            this.proportions = [rx, ry];
+        }
+    }
+    ||
+}
+
+template "widget[@type='CircularBar']", mode="widget_defs" {
+    param "hmi_element";
+    labels("path");
+    optional_labels("value min max");
+    |,
+}
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_circularslider.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,239 @@
+// widget_circuralslider.ysl2
+
+template "widget[@type='CircularSlider']", mode="widget_class"
+    ||
+    class CircularSliderWidget extends Widget{
+        frequency = 5;
+        range = undefined;
+        circle = undefined;
+        handle_pos = undefined;
+        curr_value = 0;
+        drag = false;
+        enTimer = false;
+        last_drag = false;
+
+        dispatch(value) {
+            let [min,max,start,totallength] = this.range;
+            //save current value inside widget
+            this.curr_value = value;
+
+            //check if in range
+            if (this.curr_value > max){
+                this.curr_value = max;
+                this.apply_hmi_value(0, this.curr_value);
+            }
+            else if (this.curr_value < min){
+                this.curr_value = min;
+                this.apply_hmi_value(0, this.curr_value);
+            }
+
+            if(this.value_elt)
+                this.value_elt.textContent = String(value);
+
+            //don't update if draging and setpoint ghost doesn't exist
+            if(!this.drag || (this.setpoint_elt != undefined)){
+                this.update_DOM(value, this.handle_elt);
+            }
+        }
+
+        update_DOM(value, elt){
+            let [min,max,totalDistance] = this.range;
+            let length = Math.max(0,Math.min((totalDistance),(Number(value)-min)/(max-min)*(totalDistance)));
+            let tip = this.range_elt.getPointAtLength(length);
+            elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")");
+
+            // show or hide ghost if exists
+            if(this.setpoint_elt != undefined){
+                if(this.last_drag!= this.drag){
+                    if(this.drag){
+                        this.setpoint_elt.setAttribute("style", this.setpoint_style);
+                    }else{
+                        this.setpoint_elt.setAttribute("style", "display:none");
+                    }
+                    this.last_drag = this.drag;
+                }
+            }
+        }
+
+        on_release(evt) {
+            //unbind events
+            window.removeEventListener("touchmove", this.on_bound_drag, true);
+            window.removeEventListener("mousemove", this.on_bound_drag, true);
+
+            window.removeEventListener("mouseup", this.bound_on_release, true)
+            window.removeEventListener("touchend", this.bound_on_release, true);
+            window.removeEventListener("touchcancel", this.bound_on_release, true);
+
+            //reset drag flag
+            if(this.drag){
+                this.drag = false;
+            }
+
+            // get final position
+            this.update_position(evt);
+        }
+
+        on_drag(evt){
+            //ignore drag event for X amount of time and if not selected
+            if(this.enTimer && this.drag){
+                this.update_position(evt);
+
+                //reset timer
+                this.enTimer = false;
+                setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
+            }
+        }
+
+        update_position(evt){
+            if(this.drag && this.enTimer){
+                var svg_dist = 0;
+
+                //calculate center of widget in html
+                // --TODO maybe it would be better to bind this part to window change size event ???
+                let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox;
+                let [cX, cY,fiStart,fiEnd,minMax,x1,y1,width,height] = this.circle;
+                let htmlCirc = this.range_elt.getBoundingClientRect();
+                let cxHtml = ((htmlCirc.right-htmlCirc.left)/(width)*(cX-x1))+htmlCirc.left;
+                let cyHtml = ((htmlCirc.bottom-htmlCirc.top)/(height)*(cY-y1))+htmlCirc.top;
+
+
+                //get mouse coordinates
+                let mouseX = undefined;
+                let mouseY = undefined;
+                if (evt.type.startsWith("touch")){
+                    mouseX = Math.ceil(evt.touches[0].clientX);
+                    mouseY = Math.ceil(evt.touches[0].clientY);
+                }
+                else{
+                    mouseX = evt.pageX;
+                    mouseY = evt.pageY;
+                }
+
+                //calculate angle
+                let fi = Math.atan2(cyHtml-mouseY, mouseX-cxHtml);
+
+                // transform from 0 to 2PI
+                if (fi > 0){
+                    fi = 2*Math.PI-fi;
+                }
+                else{
+                    fi = -fi;
+                }
+
+                //offset it to 0
+                fi = fi - fiStart;
+                if (fi < 0){
+                    fi = fi + 2*Math.PI;
+                }
+
+                //get handle distance from mouse position
+                if(fi<fiEnd){
+                   this.curr_value=(fi)/(fiEnd)*(this.range[1]-this.range[0]);
+                }
+                else if(fiEnd<fi && fi<fiEnd+minMax){
+                    this.curr_value = this.range[1];
+                }
+                else{
+                    this.curr_value = this.range[0];
+                }
+
+                //apply value to hmi
+                this.apply_hmi_value(0, Math.ceil(this.curr_value));
+
+                //redraw handle
+                this.request_animate();
+
+            }
+
+        }
+
+        animate(){
+            // redraw handle on screen refresh
+            // check if setpoint(ghost) handle exsist otherwise update main handle
+            if(this.setpoint_elt != undefined){
+                this.update_DOM(this.curr_value, this.setpoint_elt);
+            }
+            else{
+                this.update_DOM(this.curr_value, this.handle_elt);
+            }
+        }
+
+        on_select(evt){
+            //enable drag flag and timer
+            this.drag = true;
+            this.enTimer = true;
+
+            //bind events
+            window.addEventListener("touchmove", this.on_bound_drag, true);
+            window.addEventListener("mousemove", this.on_bound_drag, true);
+
+            window.addEventListener("mouseup", this.bound_on_release, true);
+            window.addEventListener("touchend", this.bound_on_release, true);
+            window.addEventListener("touchcancel", this.bound_on_release, true);
+
+            //update postion on mouse press
+            this.update_position(evt);
+
+            //prevent next events
+            evt.stopPropagation();
+        }
+
+        init() {
+            //get min max
+            let min = this.min_elt ?
+                        Number(this.min_elt.textContent) :
+                        this.args.length >= 1 ? this.args[0] : 0;
+            let max = this.max_elt ?
+                        Number(this.max_elt.textContent) :
+                        this.args.length >= 2 ? this.args[1] : 100;
+
+            //fiStart ==> offset
+            let fiStart = Number(this.range_elt.getAttribute('sodipodi:start'));
+            let fiEnd = Number(this.range_elt.getAttribute('sodipodi:end'));
+            fiEnd = fiEnd - fiStart;
+
+            //fiEnd ==> size of angle
+            if (fiEnd < 0){
+                fiEnd = 2*Math.PI + fiEnd;
+            }
+
+            //min max barrier angle
+            let minMax = (2*Math.PI - fiEnd)/2;
+
+            //get parameters from svg
+            let cX = Number(this.range_elt.getAttribute('sodipodi:cx'));
+            let cY = Number(this.range_elt.getAttribute('sodipodi:cy'));
+            this.range_elt.style.strokeMiterlimit="0"; //eliminates some weird border around html object
+            this.range = [min, max,this.range_elt.getTotalLength()];
+            let cPos = this.range_elt.getBBox();
+            this.handle_pos = this.range_elt.getPointAtLength(0);
+            this.circle = [cX, cY,fiStart,fiEnd,minMax,cPos.x,cPos.y,cPos.width,cPos.height];
+
+            //bind functions
+            this.bound_on_select = this.on_select.bind(this);
+            this.bound_on_release = this.on_release.bind(this);
+            this.on_bound_drag = this.on_drag.bind(this);
+
+            this.handle_elt.addEventListener("mousedown", this.bound_on_select);
+            this.element.addEventListener("mousedown", this.bound_on_select);
+            this.element.addEventListener("touchstart", this.bound_on_select);
+            //touch recognised as page drag without next command
+            document.body.addEventListener("touchstart", function(e){}, false);
+
+            //save ghost style
+            //save ghost style
+            if(this.setpoint_elt != undefined){
+                this.setpoint_style = this.setpoint_elt.getAttribute("style");
+                this.setpoint_elt.setAttribute("style", "display:none");
+            }
+
+        }
+    }
+    ||
+
+template "widget[@type='CircularSlider']", mode="widget_defs" {
+    param "hmi_element";
+    labels("handle range");
+    optional_labels("value min max setpoint");
+    |,
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_custom.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,62 @@
+// widget_custom.ysl2
+//
+// widget entierely defined from JS code in Inkscape description field
+
+// TODO
+
+// a preliminary implementation was initially attempted but disabled
+// code collected around before code refactoring
+
+
+/*const "mark" > =HMI=\n*/
+
+
+        /* TODO re-enable
+        ||
+        function evaluate_js_from_descriptions() {
+            var Page;
+            var Input;
+            var Display;
+            var res = [];
+        ||
+        const "midmark" > \n«$mark»
+        apply """//*[contains(child::svg:desc, $midmark) or \
+                     starts-with(child::svg:desc, $mark)]""",2 
+              mode="code_from_descs";
+        ||
+            return res;
+        }
+        ||
+        */
+
+    // template "*", mode="code_from_descs" {
+    //     ||
+    //     {
+    //         var path, role, name, priv;
+    //         var id = "«@id»";
+    //     ||
+
+    //     /* if label is used, use it as default name */
+    //     if "@inkscape:label"
+    //         |> name = "«@inkscape:label»";
+
+    //     | /* -------------- */
+
+    //     // this breaks indent, but fixing indent could break string literals
+    //     value "substring-after(svg:desc, $mark)";
+    //     // nobody reads generated code anyhow...
+
+    //     ||
+
+    //         /* -------------- */
+    //         res.push({
+    //             path:path,
+    //             role:role,
+    //             name:name,
+    //             priv:priv
+    //         })
+    //     }
+    //     ||
+    // }
+
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_customhtml.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,33 @@
+// widget_customhtml.ysl2
+
+template "widget[@type='CustomHtml']", mode="widget_class"{
+    ||
+    class CustomHtmlWidget extends Widget{
+        frequency = 5;
+        widget_size = undefined;
+
+        dispatch(value) {
+            this.request_animate();
+        }
+
+        animate(){
+        }
+
+        init() {
+            this.widget_size = this.container_elt.getBBox();
+            this.element.innerHTML ='<foreignObject x="'+
+                this.widget_size.x+'" y="'+this.widget_size.y+
+                '" width="'+this.widget_size.width+'" height="'+this.widget_size.height+'"> '+
+                this.code_elt.textContent+
+                ' </foreignObject>';
+        }
+    }
+    ||
+}
+
+
+template "widget[@type='CustomHtml']", mode="widget_defs" {
+    param "hmi_element";
+    labels("container code");
+    |,
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_display.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,264 @@
+// widget_display.ysl2
+
+
+template "widget[@type='Display']", mode="widget_class"
+    ||
+    class DisplayWidget extends Widget{
+        frequency = 5;
+        dispatch(value, oldval, index) {
+            this.fields[index] = value;    
+            this.element.textContent = this.args.length == 1 ? vsprintf(this.args[0],this.fields) : this.fields.join(' ');
+        }
+    }
+    ||
+
+template "widget[@type='Display']", mode="widget_defs" {
+    param "hmi_element";
+    if "$hmi_element[not(self::svg:text)]"
+        error > Display Widget id="«$hmi_element/@id»" is not a svg::text element
+
+    const "field_initializer" foreach "path" {
+        choose{
+            when "@type='HMI_STRING'" > ""
+            otherwise > 0
+        }
+        if "position()!=last()" > ,
+    }
+    |     fields: [«$field_initializer»],
+}
+
+emit "preamble:display"
+||
+/* https://github.com/alexei/sprintf.js/blob/master/src/sprintf.js */
+/* global window, exports, define */
+
+!function() {
+    'use strict'
+
+    var re = {
+        not_string: /[^s]/,
+        not_bool: /[^t]/,
+        not_type: /[^T]/,
+        not_primitive: /[^v]/,
+        number: /[diefg]/,
+        numeric_arg: /[bcdiefguxX]/,
+        json: /[j]/,
+        not_json: /[^j]/,
+        text: /^[^\x25]+/,
+        modulo: /^\x25{2}/,
+        placeholder: /^\x25(?:([1-9]\d*)\$|\(([^)]+)\))?(\+)?(0|'[^$])?(-)?(\d+)?(?:\.(\d+))?([b-gijostTuvxX])/,
+        key: /^([a-z_][a-z_\d]*)/i,
+        key_access: /^\.([a-z_][a-z_\d]*)/i,
+        index_access: /^\[(\d+)\]/,
+        sign: /^[+-]/
+    }
+
+    function sprintf(key) {
+        // `arguments` is not an array, but should be fine for this call
+        return sprintf_format(sprintf_parse(key), arguments)
+    }
+
+    function vsprintf(fmt, argv) {
+        return sprintf.apply(null, [fmt].concat(argv || []))
+    }
+
+    function sprintf_format(parse_tree, argv) {
+        var cursor = 1, tree_length = parse_tree.length, arg, output = '', i, k, ph, pad, pad_character, pad_length, is_positive, sign
+        for (i = 0; i < tree_length; i++) {
+            if (typeof parse_tree[i] === 'string') {
+                output += parse_tree[i]
+            }
+            else if (typeof parse_tree[i] === 'object') {
+                ph = parse_tree[i] // convenience purposes only
+                if (ph.keys) { // keyword argument
+                    arg = argv[cursor]
+                    for (k = 0; k < ph.keys.length; k++) {
+                        if (arg == undefined) {
+                            throw new Error(sprintf('[sprintf] Cannot access property "%s" of undefined value "%s"', ph.keys[k], ph.keys[k-1]))
+                        }
+                        arg = arg[ph.keys[k]]
+                    }
+                }
+                else if (ph.param_no) { // positional argument (explicit)
+                    arg = argv[ph.param_no]
+                }
+                else { // positional argument (implicit)
+                    arg = argv[cursor++]
+                }
+
+                if (re.not_type.test(ph.type) && re.not_primitive.test(ph.type) && arg instanceof Function) {
+                    arg = arg()
+                }
+
+                if (re.numeric_arg.test(ph.type) && (typeof arg !== 'number' && isNaN(arg))) {
+                    throw new TypeError(sprintf('[sprintf] expecting number but found %T', arg))
+                }
+
+                if (re.number.test(ph.type)) {
+                    is_positive = arg >= 0
+                }
+
+                switch (ph.type) {
+                    case 'b':
+                        arg = parseInt(arg, 10).toString(2)
+                        break
+                    case 'c':
+                        arg = String.fromCharCode(parseInt(arg, 10))
+                        break
+                    case 'd':
+                    case 'i':
+                        arg = parseInt(arg, 10)
+                        break
+                    case 'j':
+                        arg = JSON.stringify(arg, null, ph.width ? parseInt(ph.width) : 0)
+                        break
+                    case 'e':
+                        arg = ph.precision ? parseFloat(arg).toExponential(ph.precision) : parseFloat(arg).toExponential()
+                        break
+                    case 'f':
+                        arg = ph.precision ? parseFloat(arg).toFixed(ph.precision) : parseFloat(arg)
+                        break
+                    case 'g':
+                        arg = ph.precision ? String(Number(arg.toPrecision(ph.precision))) : parseFloat(arg)
+                        break
+                    case 'o':
+                        arg = (parseInt(arg, 10) >>> 0).toString(8)
+                        break
+                    case 's':
+                        arg = String(arg)
+                        arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
+                        break
+                    case 't':
+                        arg = String(!!arg)
+                        arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
+                        break
+                    case 'T':
+                        arg = Object.prototype.toString.call(arg).slice(8, -1).toLowerCase()
+                        arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
+                        break
+                    case 'u':
+                        arg = parseInt(arg, 10) >>> 0
+                        break
+                    case 'v':
+                        arg = arg.valueOf()
+                        arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
+                        break
+                    case 'x':
+                        arg = (parseInt(arg, 10) >>> 0).toString(16)
+                        break
+                    case 'X':
+                        arg = (parseInt(arg, 10) >>> 0).toString(16).toUpperCase()
+                        break
+                }
+                if (re.json.test(ph.type)) {
+                    output += arg
+                }
+                else {
+                    if (re.number.test(ph.type) && (!is_positive || ph.sign)) {
+                        sign = is_positive ? '+' : '-'
+                        arg = arg.toString().replace(re.sign, '')
+                    }
+                    else {
+                        sign = ''
+                    }
+                    pad_character = ph.pad_char ? ph.pad_char === '0' ? '0' : ph.pad_char.charAt(1) : ' '
+                    pad_length = ph.width - (sign + arg).length
+                    pad = ph.width ? (pad_length > 0 ? pad_character.repeat(pad_length) : '') : ''
+                    output += ph.align ? sign + arg + pad : (pad_character === '0' ? sign + pad + arg : pad + sign + arg)
+                }
+            }
+        }
+        return output
+    }
+
+    var sprintf_cache = Object.create(null)
+
+    function sprintf_parse(fmt) {
+        if (sprintf_cache[fmt]) {
+            return sprintf_cache[fmt]
+        }
+
+        var _fmt = fmt, match, parse_tree = [], arg_names = 0
+        while (_fmt) {
+            if ((match = re.text.exec(_fmt)) !== null) {
+                parse_tree.push(match[0])
+            }
+            else if ((match = re.modulo.exec(_fmt)) !== null) {
+                parse_tree.push('%')
+            }
+            else if ((match = re.placeholder.exec(_fmt)) !== null) {
+                if (match[2]) {
+                    arg_names |= 1
+                    var field_list = [], replacement_field = match[2], field_match = []
+                    if ((field_match = re.key.exec(replacement_field)) !== null) {
+                        field_list.push(field_match[1])
+                        while ((replacement_field = replacement_field.substring(field_match[0].length)) !== '') {
+                            if ((field_match = re.key_access.exec(replacement_field)) !== null) {
+                                field_list.push(field_match[1])
+                            }
+                            else if ((field_match = re.index_access.exec(replacement_field)) !== null) {
+                                field_list.push(field_match[1])
+                            }
+                            else {
+                                throw new SyntaxError('[sprintf] failed to parse named argument key')
+                            }
+                        }
+                    }
+                    else {
+                        throw new SyntaxError('[sprintf] failed to parse named argument key')
+                    }
+                    match[2] = field_list
+                }
+                else {
+                    arg_names |= 2
+                }
+                if (arg_names === 3) {
+                    throw new Error('[sprintf] mixing positional and named placeholders is not (yet) supported')
+                }
+
+                parse_tree.push(
+                    {
+                        placeholder: match[0],
+                        param_no:    match[1],
+                        keys:        match[2],
+                        sign:        match[3],
+                        pad_char:    match[4],
+                        align:       match[5],
+                        width:       match[6],
+                        precision:   match[7],
+                        type:        match[8]
+                    }
+                )
+            }
+            else {
+                throw new SyntaxError('[sprintf] unexpected placeholder')
+            }
+            _fmt = _fmt.substring(match[0].length)
+        }
+        return sprintf_cache[fmt] = parse_tree
+    }
+
+    /**
+     * export to either browser or node.js
+     */
+    /* eslint-disable quote-props */
+    if (typeof exports !== 'undefined') {
+        exports['sprintf'] = sprintf
+        exports['vsprintf'] = vsprintf
+    }
+    if (typeof window !== 'undefined') {
+        window['sprintf'] = sprintf
+        window['vsprintf'] = vsprintf
+
+        if (typeof define === 'function' && define['amd']) {
+            define(function() {
+                return {
+                    'sprintf': sprintf,
+                    'vsprintf': vsprintf
+                }
+            })
+        }
+    }
+    /* eslint-enable quote-props */
+}(); // eslint-disable-line    
+||
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_dropdown.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,345 @@
+// widget_dropdown.ysl2
+
+template "widget[@type='DropDown']", mode="widget_class"{
+||
+    function numb_event(e) {
+        e.stopPropagation();
+    }
+    class DropDownWidget extends Widget{
+        dispatch(value) {
+            if(!this.opened) this.set_selection(value);
+        }
+        init() {
+            this.button_elt.onclick = this.on_button_click.bind(this);
+            // Save original size of rectangle
+            this.box_bbox = this.box_elt.getBBox()
+            this.highlight_bbox = this.highlight_elt.getBBox()
+            this.highlight_elt.style.visibility = "hidden";
+
+            // Compute margins
+            this.text_bbox = this.text_elt.getBBox();
+            let lmargin = this.text_bbox.x - this.box_bbox.x;
+            let tmargin = this.text_bbox.y - this.box_bbox.y;
+            this.margins = [lmargin, tmargin].map(x => Math.max(x,0));
+
+            // Index of first visible element in the menu, when opened
+            this.menu_offset = 0;
+
+            // How mutch to lift the menu vertically so that it does not cross bottom border
+            this.lift = 0;
+
+            // Event handlers cannot be object method ('this' is unknown)
+            // as a workaround, handler given to addEventListener is bound in advance.
+            this.bound_close_on_click_elsewhere = this.close_on_click_elsewhere.bind(this);
+            this.bound_on_selection_click = this.on_selection_click.bind(this);
+            this.bound_on_backward_click = this.on_backward_click.bind(this);
+            this.bound_on_forward_click = this.on_forward_click.bind(this);
+            this.opened = false;
+            this.clickables = [];
+        }
+        on_button_click() {
+            this.open();
+        }
+        // Called when a menu entry is clicked
+        on_selection_click(selection) {
+            this.close();
+            this.apply_hmi_value(0, selection);
+        }
+        on_backward_click(){
+            this.scroll(false);
+        }
+        on_forward_click(){
+            this.scroll(true);
+        }
+        set_selection(value) {
+            let display_str;
+            if(value >= 0 && value < this.content.length){
+                // if valid selection resolve content
+                display_str = this.content[value];
+                this.last_selection = value;
+            } else {
+                // otherwise show problem
+                display_str = "?"+String(value)+"?";
+            }
+            // It is assumed that first span always stays,
+            // and contains selection when menu is closed
+            this.text_elt.firstElementChild.textContent = display_str;
+        }
+        grow_text(up_to) {
+            let count = 1;
+            let txt = this.text_elt;
+            let first = txt.firstElementChild;
+            // Real world (pixels) boundaries of current page
+            let bounds = svg_root.getBoundingClientRect();
+            this.lift = 0;
+            while(count < up_to) {
+                let next = first.cloneNode();
+                // relative line by line text flow instead of absolute y coordinate
+                next.removeAttribute("y");
+                next.setAttribute("dy", "1.1em");
+                // default content to allow computing text element bbox
+                next.textContent = "...";
+                // append new span to text element
+                txt.appendChild(next);
+                // now check if text extended by one row fits to page
+                // FIXME : exclude margins to be more accurate on box size
+                let rect = txt.getBoundingClientRect();
+                if(rect.bottom > bounds.bottom){
+                    // in case of overflow at the bottom, lift up one row
+                    let backup = first.getAttribute("dy");
+                    // apply lift as a dy added too first span (y attrib stays)
+                    first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em");
+                    rect = txt.getBoundingClientRect();
+                    if(rect.top > bounds.top){
+                        this.lift += 1;
+                    } else {
+                        // if it goes over the top, then backtrack
+                        // restore dy attribute on first span
+                        if(backup)
+                            first.setAttribute("dy", backup);
+                        else
+                            first.removeAttribute("dy");
+                        // remove unwanted child
+                        txt.removeChild(next);
+                        return count;
+                    }
+                }
+                count++;
+            }
+            return count;
+        }
+        close_on_click_elsewhere(e) {
+            // inhibit events not targetting spans (menu items)
+            if([this.text_elt, this.element].indexOf(e.target.parentNode) == -1){
+                e.stopPropagation();
+                // close menu in case click is outside box
+                if(e.target !== this.box_elt)
+                    this.close();
+            }
+        }
+        close(){
+            // Stop hogging all click events
+            svg_root.removeEventListener("pointerdown", numb_event, true);
+            svg_root.removeEventListener("pointerup", numb_event, true);
+            svg_root.removeEventListener("click", this.bound_close_on_click_elsewhere, true);
+            // Restore position and sixe of widget elements
+            this.reset_text();
+            this.reset_clickables();
+            this.reset_box();
+            this.reset_highlight();
+            // Put the button back in place
+            this.element.appendChild(this.button_elt);
+            // Mark as closed (to allow dispatch)
+            this.opened = false;
+            // Dispatch last cached value
+            this.apply_cache();
+        }
+        // Make item (text span) clickable by overlaying a rectangle on top of it
+        make_clickable(span, func) {
+            let txt = this.text_elt;
+            let original_text_y = this.text_bbox.y;
+            let highlight = this.highlight_elt;
+            let original_h_y = this.highlight_bbox.y;
+            let clickable = highlight.cloneNode();
+            let yoffset = span.getBBox().y - original_text_y;
+            clickable.y.baseVal.value = original_h_y + yoffset;
+            clickable.style.pointerEvents = "bounding-box";
+            //clickable.style.visibility = "hidden";
+            //clickable.onclick = () => alert("love JS");
+            clickable.onclick = func;
+            this.element.appendChild(clickable);
+            this.clickables.push(clickable)
+        }
+        reset_clickables() {
+            while(this.clickables.length){
+                this.element.removeChild(this.clickables.pop());
+            }
+        }
+        // Set text content when content is smaller than menu (no scrolling)
+        set_complete_text(){
+            let spans = this.text_elt.children;
+            let c = 0;
+            for(let item of this.content){
+                let span=spans[c];
+                span.textContent = item;
+                let sel = c;
+                this.make_clickable(span, (evt) => this.bound_on_selection_click(sel));
+                c++;
+            }
+        }
+        // Move partial view :
+        // false : upward, lower value
+        // true  : downward, higher value
+        scroll(forward){
+            let contentlength = this.content.length;
+            let spans = this.text_elt.children;
+            let spanslength = spans.length;
+            // reduce accounted menu size according to prsence of scroll buttons
+            // since we scroll there is necessarly one button
+            spanslength--;
+            if(forward){
+                // reduce accounted menu size because of back button
+                // in current view
+                if(this.menu_offset > 0) spanslength--;
+                this.menu_offset = Math.min(
+                    contentlength - spans.length + 1,
+                    this.menu_offset + spanslength);
+            }else{
+                // reduce accounted menu size because of back button
+                // in view once scrolled
+                if(this.menu_offset - spanslength > 0) spanslength--;
+                this.menu_offset = Math.max(
+                    0,
+                    this.menu_offset - spanslength);
+            }
+            if(this.menu_offset == 1)
+                this.menu_offset = 0;
+
+            this.reset_highlight();
+
+            this.reset_clickables();
+            this.set_partial_text();
+
+            this.highlight_selection();
+        }
+        // Setup partial view text content
+        // with jumps at first and last entry when appropriate
+        set_partial_text(){
+            let spans = this.text_elt.children;
+            let contentlength = this.content.length;
+            let spanslength = spans.length;
+            let i = this.menu_offset, c = 0;
+            let m = this.box_bbox;
+            while(c < spanslength){
+                let span=spans[c];
+                let onclickfunc;
+                // backward jump only present if not exactly at start
+                if(c == 0 && i != 0){
+                    span.textContent = "▲";
+                    onclickfunc = this.bound_on_backward_click;
+                    let o = span.getBBox();
+                    span.setAttribute("dx", (m.width - o.width)/2);
+                // presence of forward jump when not right at the end
+                }else if(c == spanslength-1 && i < contentlength - 1){
+                    span.textContent = "▼";
+                    onclickfunc = this.bound_on_forward_click;
+                    let o = span.getBBox();
+                    span.setAttribute("dx", (m.width - o.width)/2);
+                // otherwise normal content
+                }else{
+                    span.textContent = this.content[i];
+                    let sel = i;
+                    onclickfunc = (evt) => this.bound_on_selection_click(sel);
+                    span.removeAttribute("dx");
+                    i++;
+                }
+                this.make_clickable(span, onclickfunc);
+                c++;
+            }
+        }
+        open(){
+            let length = this.content.length;
+            // systematically reset text, to strip eventual whitespace spans
+            this.reset_text();
+            // grow as much as needed or possible
+            let slots = this.grow_text(length);
+            // Depending on final size
+            if(slots == length) {
+                // show all at once
+                this.set_complete_text();
+            } else {
+                // eventualy align menu to current selection, compensating for lift
+                let offset = this.last_selection - this.lift;
+                if(offset > 0)
+                    this.menu_offset = Math.min(offset + 1, length - slots + 1);
+                else
+                    this.menu_offset = 0;
+                // show surrounding values
+                this.set_partial_text();
+            }
+            // Now that text size is known, we can set the box around it
+            this.adjust_box_to_text();
+            // Take button out until menu closed
+            this.element.removeChild(this.button_elt);
+            // Rise widget to top by moving it to last position among siblings
+            this.element.parentNode.appendChild(this.element.parentNode.removeChild(this.element));
+            // disable interaction with background
+            svg_root.addEventListener("pointerdown", numb_event, true);
+            svg_root.addEventListener("pointerup", numb_event, true);
+            svg_root.addEventListener("click", this.bound_close_on_click_elsewhere, true);
+            this.highlight_selection();
+
+            // mark as open
+            this.opened = true;
+        }
+        // Put text element in normalized state
+        reset_text(){
+            let txt = this.text_elt;
+            let first = txt.firstElementChild;
+            // remove attribute eventually added to first text line while opening
+            first.onclick = null;
+            first.removeAttribute("dy");
+            first.removeAttribute("dx");
+            // keep only the first line of text
+            for(let span of Array.from(txt.children).slice(1)){
+                txt.removeChild(span)
+            }
+        }
+        // Put rectangle element in saved original state
+        reset_box(){
+            let m = this.box_bbox;
+            let b = this.box_elt;
+            b.x.baseVal.value = m.x;
+            b.y.baseVal.value = m.y;
+            b.width.baseVal.value = m.width;
+            b.height.baseVal.value = m.height;
+        }
+        highlight_selection(){
+            let highlighted_row = this.last_selection - this.menu_offset;
+            if(highlighted_row < 0) return;
+            let spans = this.text_elt.children;
+            let spanslength = spans.length;
+            let contentlength = this.content.length;
+            if(this.menu_offset != 0) {
+                spanslength--;
+                highlighted_row++;
+            }
+            if(this.menu_offset + spanslength < contentlength - 1) spanslength--;
+            if(highlighted_row > spanslength) return;
+            let original_text_y = this.text_bbox.y;
+            let highlight = this.highlight_elt;
+            let span = spans[highlighted_row];
+            let yoffset = span.getBBox().y - original_text_y;
+            highlight.y.baseVal.value = this.highlight_bbox.y + yoffset;
+            highlight.style.visibility = "visible";
+        }
+        reset_highlight(){
+            let highlight = this.highlight_elt;
+            highlight.y.baseVal.value = this.highlight_bbox.y;
+            highlight.style.visibility = "hidden";
+        }
+        // Use margin and text size to compute box size
+        adjust_box_to_text(){
+            let [lmargin, tmargin] = this.margins;
+            let m = this.text_elt.getBBox();
+            let b = this.box_elt;
+            // b.x.baseVal.value = m.x - lmargin;
+            b.y.baseVal.value = m.y - tmargin;
+            // b.width.baseVal.value = 2 * lmargin + m.width;
+            b.height.baseVal.value = 2 * tmargin + m.height;
+        }
+    }
+||
+}
+
+template "widget[@type='DropDown']", mode="widget_defs" {
+    param "hmi_element";
+    labels("text box button highlight");
+||
+    // It is assumed that list content conforms to Array interface.
+    content: [
+    ``foreach "arg" | "«@value»",
+    ],
+
+||
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_foreach.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,122 @@
+
+template "widget[@type='ForEach']", mode="widget_defs" {
+    param "hmi_element";
+
+    if "count(path) != 1" error > ForEach widget «$hmi_element/@id» must have one HMI path given.
+    if "count(arg) != 1" error > ForEach widget «$hmi_element/@id» must have one argument given : a class name.
+
+    const "class","arg[1]/@value";
+
+    const "base_path","path/@value";
+    const "hmi_index_base", "$indexed_hmitree/*[@hmipath = $base_path]";
+    const "hmi_tree_base", "$hmitree/descendant-or-self::*[@path = $hmi_index_base/@path]";
+    const "hmi_tree_items", "$hmi_tree_base/*[@class = $class]";
+    const "hmi_index_items", "$indexed_hmitree/*[@path = $hmi_tree_items/@path]"; 
+    const "items_paths", "$hmi_index_items/@hmipath"; 
+    |     index_pool: [
+    foreach "$hmi_index_items" {
+    |       «@index»`if "position()!=last()" > ,`
+    }
+    |     ],
+    |     init: function() {
+    const "prefix","concat($class,':')";
+    const "buttons_regex","concat('^',$prefix,'[+\-][0-9]+')";
+    const "buttons", "$hmi_element/*[regexp:test(@inkscape:label, $buttons_regex)]"; 
+    foreach "$buttons" {
+        const "op","substring-after(@inkscape:label, $prefix)";
+    |         id("«@id»").setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_click('«$op»', evt)");
+    }
+    |
+    |         this.items = [
+    const "items_regex","concat('^',$prefix,'[0-9]+')";
+    const "unordered_items","$hmi_element//*[regexp:test(@inkscape:label, $items_regex)]";
+    foreach "$unordered_items" {
+        const "elt_label","concat($prefix, string(position()))"; 
+        const "elt","$unordered_items[@inkscape:label = $elt_label]";
+        const "pos","position()";
+        const "item_path", "$items_paths[$pos]";
+    |           [ /* item="«$elt_label»" path="«$item_path»" */
+        if "count($elt)=0" error > Missing item labeled «$elt_label» in ForEach widget «$hmi_element/@id»
+        foreach "func:refered_elements($elt)[@id = $hmi_elements/@id][not(@id = $elt/@id)]" {
+            if "not(func:is_descendant_path(func:widget(@id)/path/@value, $item_path))"
+                error > Widget id="«@id»" label="«@inkscape:label»" is having wrong path. Accroding to ForEach widget ancestor id="«$hmi_element/@id»", path should be descendant of "«$item_path»".
+    |             hmi_widgets["«@id»"]`if "position()!=last()" > ,`
+        }
+    |           ]`if "position()!=last()" > ,`
+    }
+    |         ]
+    |     },
+    |     item_offset: 0,
+}
+
+template "widget[@type='ForEach']", mode="widget_class"
+||
+class ForEachWidget extends Widget{
+
+    unsub_items(){
+        for(let item of this.items){
+            for(let widget of item) {
+                widget.unsub();
+            }
+        }
+    }
+
+    unsub(){
+        this.unsub_items();
+        this.offset = 0;
+        this.relativeness = undefined;
+    }
+
+    sub_items(){
+        for(let i = 0; i < this.items.length; i++) {
+            let item = this.items[i];
+            let orig_item_index = this.index_pool[i];
+            let item_index = this.index_pool[i+this.item_offset];
+            let item_index_offset = item_index - orig_item_index;
+            if(this.relativeness[0])
+                item_index_offset += this.offset;
+            for(let widget of item) {
+                /* all variables of all widgets in a ForEach are all relative. 
+                   Really.
+
+                   TODO: allow absolute variables in ForEach widgets
+                */
+                widget.sub(item_index_offset, widget.indexes.map(_=>true));
+            }
+        }
+    }
+
+    sub(new_offset=0, relativeness=[]){
+        this.offset = new_offset;
+        this.relativeness = relativeness;
+        this.sub_items();
+    }
+
+    apply_cache() {
+        this.items.forEach(item=>item.forEach(widget=>widget.apply_cache()));
+    }
+
+    on_click(opstr, evt) {
+        let new_item_offset = eval(String(this.item_offset)+opstr);
+        if(new_item_offset + this.items.length > this.index_pool.length) {
+            if(this.item_offset + this.items.length == this.index_pool.length)
+                new_item_offset = 0;
+            else
+                new_item_offset = this.index_pool.length - this.items.length;
+        } else if(new_item_offset < 0) {
+            if(this.item_offset == 0)
+                new_item_offset = this.index_pool.length - this.items.length;
+            else
+                new_item_offset = 0;
+        }
+        this.item_offset = new_item_offset;
+        this.unsub_items();
+        this.sub_items();
+        update_subscriptions();
+        need_cache_apply.push(this);
+        jumps_need_update = true;
+        requestHMIAnimation();
+    }
+}
+||
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_input.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,63 @@
+// widget_input.ysl2
+
+template "widget[@type='Input']", mode="widget_class"{
+||
+    class InputWidget extends Widget{
+         on_op_click(opstr) {
+             let new_val = this.change_hmi_value(0, opstr);
+         }
+         edit_callback(new_val) {
+             this.apply_hmi_value(0, new_val);
+         }
+    }
+||
+}
+
+template "widget[@type='Input']", mode="widget_defs" {
+    param "hmi_element";
+
+    const "key_pos_elt" optional_labels("key_pos");
+    value "$key_pos_elt";
+
+    const "value_elt" optional_labels("value");
+    const "have_value","string-length($value_elt)>0";
+    value "$value_elt";
+
+    const "edit_elt" optional_labels("edit");
+    const "have_edit","string-length($edit_elt)>0";
+    value "$edit_elt";
+
+    if "$have_value"
+    |     frequency: 5,
+
+    |     dispatch: function(value) {
+
+    if "$have_edit"
+    |         this.last_val = value;
+
+    if "$have_value"
+    |         this.value_elt.textContent = String(value);
+
+    |     },
+
+    |     init: function() {
+
+    if "$have_edit" {
+    |         this.edit_elt.onclick = () => edit_value(
+    |             "«path/@value»", "«path/@type»",
+    |             this, this.last_val, 
+        choose {
+            when "string-length($key_pos_elt)>0"
+    |             this.key_pos_elt.getBBox()
+            otherwise
+    |             undefined
+        }
+    |         );
+    }
+
+    foreach "$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]" {
+    |         id("«@id»").onclick = () => this.on_op_click("«func:escape_quotes(@inkscape:label)»");
+    }
+
+    |     },
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_jsontable.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,247 @@
+// widget_jsontable.ysl2
+
+template "widget[@type='JsonTable']", mode="widget_class"
+    ||
+    class JsonTableWidget extends Widget{
+        // arbitrary defaults to avoid missing entries in query
+        cache = [0,100,50];
+        init() {
+            this.spread_json_data_bound = this.spread_json_data.bind(this);
+        }
+
+        handle_http_response(response) {
+            if (!response.ok) {
+              console.log("HTTP error, status = " + response.status);
+            }
+            return response.json();
+        }
+
+        do_http_request(...opt) {
+            const query = {
+                args: this.args,
+                range: this.cache[1],
+                position: this.cache[2],
+                visible: this.visible,
+                extra: this.cache.slice(4),
+                options: opt
+            };
+
+            const options = {
+                 method: 'POST',
+                 body: JSON.stringify(query),
+                 headers: {'Content-Type': 'application/json'}
+            };
+
+            fetch(this.args[0], options)
+                .then(this.handle_http_response)
+                .then(this.spread_json_data_bound);
+
+        }
+        dispatch(value, oldval, index) {
+            this.cache[index] = value;
+            this.do_http_request();
+        }
+        make_on_click(...options){
+            let that = this;
+            return function(evt){
+                that.do_http_request(...options);
+            }
+        }
+        // on_click(evt, ...options) {
+        //     this.do_http_request(...options);
+        // }
+    }
+    ||
+
+template "svg:*", mode="json_table_elt_render" {
+    error > JsonTable Widget can't contain element of type «local-name()».
+}
+
+
+const "hmi_textstylelists_descs", "$parsed_widgets/widget[@type = 'TextStyleList']";
+const "hmi_textstylelists", "$hmi_elements[@id = $hmi_textstylelists_descs/@id]";
+
+const "textstylelist_related" foreach "$hmi_textstylelists" list {
+    attrib "listid" value "@id";
+    foreach "func:refered_elements(.)" elt {
+        attrib "eltid" value "@id";
+    }
+}
+const "textstylelist_related_ns", "exsl:node-set($textstylelist_related)";
+
+def "func:json_expressions" {
+    param "expressions";
+    param "label";
+
+    // compute javascript expressions to access JSON data
+    // desscribed in given svg element's "label"
+    // knowing that parent element already has given "expressions".
+
+    choose {
+        when "$label" {
+            const "suffixes", "str:split($label)";
+            const "res" foreach "$suffixes" expression {
+                const "suffix",".";
+                const "pos","position()";
+                // take last available expression (i.e can have more suffixes than expressions)
+                const "expr","$expressions[position() <= $pos][last()]/expression";
+                choose {
+                    when "contains($suffix,'=')" {
+                        const "name", "substring-before($suffix,'=')";
+                        if "$expr/@name[. != $name]"
+                            error > JsonTable : missplaced '=' or inconsistent names in Json data expressions.
+                        attrib "name" value "$name";
+                        attrib "content" > «$expr/@content»«substring-after($suffix,'=')»
+                    }
+                    otherwise {
+                        copy "$expr/@name";
+                        attrib "content" > «$expr/@content»«$suffix»
+                    }
+                }
+            }
+            result "exsl:node-set($res)";
+        }
+        // Empty labels are ignored, expressions are then passed as-is.
+        otherwise result "$expressions";
+    }
+
+}
+
+const "initexpr" expression attrib "content" > jdata
+const "initexpr_ns", "exsl:node-set($initexpr)";
+
+template "svg:use", mode="json_table_elt_render" {
+    param "expressions";
+    // cloned element must be part of a HMI:List
+    const "targetid", "substring-after(@xlink:href,'#')";
+    const "from_list", "$hmi_lists[(@id | */@id) = $targetid]";
+
+    choose {
+        when "count($from_list) > 0" {
+            |         id("«@id»").setAttribute("xlink:href",
+            // obtain new target id from HMI:List widget
+            |             "#"+hmi_widgets["«$from_list/@id»"].items[«$expressions/expression[1]/@content»]);
+        }
+        otherwise
+            warning > Clones (svg:use) in JsonTable Widget must point to a valid HMI:List widget or item. Reference "«@xlink:href»" is not valid and will not be updated.
+    }
+}
+
+template "svg:text", mode="json_table_elt_render" {
+    param "expressions";
+    const "value_expr", "$expressions/expression[1]/@content";
+    const "original", "@original";
+    const "from_textstylelist", "$textstylelist_related_ns/list[elt/@eltid = $original]";
+    choose {
+
+        when "count($from_textstylelist) > 0" {
+            const "content_expr", "$expressions/expression[2]/@content";
+            if "string-length($content_expr) = 0 or $expressions/expression[2]/@name != 'textContent'"
+                error > Clones (svg:use) in JsonTable Widget pointing to a HMI:TextStyleList widget or item must have a "textContent=.someVal" assignement following value expression in label.
+            |         {
+            |           let elt = id("«@id»");
+            |           elt.textContent = String(«$content_expr»);
+            |           elt.style = hmi_widgets["«$from_textstylelist/@listid»"].styles[«$value_expr»];
+            |         }
+        }
+        otherwise {
+            |         id("«@id»").textContent = String(«$value_expr»);
+        }
+    }
+}
+
+
+// only labels comming from Json widget are counted in
+def "func:filter_non_widget_label" {
+    param "elt";
+    param "widget_elts";
+    const "eltid" choose {
+        when "$elt/@original" value "$elt/@original";
+        otherwise value "$elt/@id";
+    }
+    result "$widget_elts[@id=$eltid]/@inkscape:label";
+}
+
+template "svg:*", mode="json_table_render_except_comments"{
+    param "expressions";
+    param "widget_elts";
+
+    const "label", "func:filter_non_widget_label(., $widget_elts)";
+    // filter out "# commented" elements
+    if "not(starts-with($label,'#'))" 
+        apply ".", mode="json_table_render"{
+            with "expressions", "$expressions";
+            with "widget_elts", "$widget_elts";
+            with "label", "$label";
+        }
+}
+
+
+template "svg:*", mode="json_table_render" {
+    param "expressions";
+    param "widget_elts";
+    param "label";
+
+    const "new_expressions", "func:json_expressions($expressions, $label)";
+
+    const "elt",".";
+    foreach "$new_expressions/expression[position() > 1][starts-with(@name,'onClick')]"
+    |         id("«$elt/@id»").onclick = this.make_on_click('«@name»', «@content»);
+
+    apply ".", mode="json_table_elt_render"
+        with "expressions", "$new_expressions";
+}
+
+template "svg:g", mode="json_table_render" {
+    param "expressions";
+    param "widget_elts";
+    param "label";
+    const "gid", "@id";
+
+    // use intermediate variables for optimization
+    const "varprefix" > obj_«$gid»_
+    |         try {
+
+    foreach "$expressions/expression"{
+    |          let «$varprefix»«position()» = «@content»;
+    |          if(«$varprefix»«position()» == undefined) {
+    |               console.log("«$varprefix»«position()» = «@content»");
+    |               throw null;
+    |          }
+    }
+
+    // because we put values in a variables, we can replace corresponding expression with variable name
+    const "new_expressions" foreach "$expressions/expression" xsl:copy {
+        copy "@name";
+        attrib "content" > «$varprefix»«position()»
+    }
+
+    // revert hiding in case it did happen before
+    |           id("«@id»").style = "«@style»";
+
+    apply "*", mode="json_table_render_except_comments" {
+        with "expressions", "func:json_expressions(exsl:node-set($new_expressions), $label)";
+        with "widget_elts", "$widget_elts";
+    }
+    |         } catch(err) {
+    |           id("«$gid»").style = "display:none";
+    |         }
+}
+
+template "widget[@type='JsonTable']", mode="widget_defs" {
+    param "hmi_element";
+    labels("data");
+    optional_labels("forward backward cursor");
+    const "data_elt", "$result_svg_ns//*[@id = $hmi_element/@id]/*[@inkscape:label = 'data']";
+    |     visible: «count($data_elt/*[@inkscape:label])»,
+    |     spread_json_data: function(janswer) {
+    |         let [range,position,jdata] = janswer;
+    |         this.apply_hmi_value(1, range);
+    |         this.apply_hmi_value(2, position);
+    |         this.apply_hmi_value(3, this.visible);
+    apply "$data_elt", mode="json_table_render_except_comments" {
+        with "expressions","$initexpr_ns";
+        with "widget_elts","$hmi_element/*[@inkscape:label = 'data']/descendant::svg:*";
+    }
+    |     }
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_jump.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,128 @@
+// widget_jump.ysl2
+
+function "jump_widget_activity" {
+    param "hmi_element";
+        optional_labels("active inactive");
+}
+
+function "jump_widget_disability" {
+    param "hmi_element";
+        optional_labels("disabled");
+}
+
+template "widget[@type='Jump']", mode="widget_defs" {
+    param "hmi_element";
+    const "activity" call "jump_widget_activity" with "hmi_element", "$hmi_element";
+    const "have_activity","string-length($activity)>0";
+    value "$activity";
+    const "disability" call "jump_widget_disability" with "hmi_element", "$hmi_element";
+    const "have_disability","$have_activity and string-length($disability)>0";
+    value "$disability";
+    if "$have_activity" {
+    |     active: false,
+    if "$have_disability" {
+    |     disabled: false,
+    |     frequency: 2,
+    |     dispatch: function(value) {
+    |         this.disabled = !Number(value);
+    |         this.update();
+    |     },
+    }
+    |     update: function(){
+    if "$have_disability" {
+    |       if(this.disabled) {
+    |         /* show disabled */ 
+    |         this.disabled_elt.setAttribute("style", this.active_elt_style);
+    |         /* hide inactive */ 
+    |         this.inactive_elt.setAttribute("style", "display:none");
+    |         /* hide active */ 
+    |         this.active_elt.setAttribute("style", "display:none");
+    |       } else {
+    |         /* hide disabled */ 
+    |         this.disabled_elt.setAttribute("style", "display:none");
+    }
+    |         if(this.active) {
+    |              /* show active */ 
+    |              this.active_elt.setAttribute("style", this.active_elt_style);
+    |              /* hide inactive */ 
+    |              this.inactive_elt.setAttribute("style", "display:none");
+    |         } else {
+    |              /* show inactive */ 
+    |              this.inactive_elt.setAttribute("style", this.inactive_elt_style);
+    |              /* hide active */ 
+    |              this.active_elt.setAttribute("style", "display:none");
+    |         }
+    if "$have_disability" {
+    |       }
+    }
+    |     },
+    }
+    if "$have_activity" {
+    |     notify_page_change: function(page_name, index){
+    |         const ref_index = this.indexes.length > 0 ? this.indexes[0] + this.offset : undefined;
+    |         const ref_name = this.args[0];
+    |         this.active =((ref_name == undefined || ref_name == page_name) && index == ref_index);
+    |         this.update();
+    |     },
+    }
+    |     make_on_click(){
+    |         let that = this;
+    |         const name = this.args[0];
+    |         return function(evt){
+    |             const index = that.indexes.length > 0 ? that.indexes[0] + that.offset : undefined;
+    |             switch_page(name, index);
+    |         }
+    |     },
+    |     init: function() {
+    /* registering event this way does not "click" through svg:use 
+    |     this.element.onclick = evt => switch_page(this.args[0]);
+    event must be registered by adding attribute to element instead
+    TODO : generalize mouse event handling by global event capture + getElementsAtPoint()
+    */
+    |         this.element.onclick = this.make_on_click();
+    if "$have_activity" {
+    |         this.active_elt_style = this.active_elt.getAttribute("style");
+    |         this.inactive_elt_style = this.inactive_elt.getAttribute("style");
+    }
+    choose {
+        when "$have_disability" {
+    |         this.disabled_elt_style = this.disabled_elt.getAttribute("style");
+        }
+        otherwise {
+    |         this.unsubscribable = true;
+        }
+    }
+    |     },
+}
+
+template "widget[@type='Jump']", mode="per_page_widget_template"{
+    param "page_desc";
+    /* check that given path is compatible with page's reference path */
+    if "path" {
+        /* when no page name provided, check for same page */
+        const "target_page_name" choose {
+            when "arg" value "arg[1]/@value";
+            otherwise value "$page_desc/arg[1]/@value";
+        }
+        const "target_page_path" choose {
+            when "arg" value "$hmi_pages_descs[arg[1]/@value = $target_page_name]/path[1]/@value";
+            otherwise value "$page_desc/path[1]/@value";
+        }
+
+        if "not(func:same_class_paths($target_page_path, path[1]/@value))"
+            error > Jump id="«@id»" to page "«$target_page_name»" with incompatible path "«path[1]/@value» (must be same class as "«$target_page_path»")
+    }
+}
+
+emit "declarations:jump"
+||
+var jumps_need_update = false;
+var jump_history = [[default_page, undefined]];
+
+function update_jumps() {
+    page_desc[current_visible_page].jumps.map(w=>w.notify_page_change(current_visible_page,current_page_index));
+    jumps_need_update = false;
+};
+
+||
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_keypad.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,214 @@
+// widget_keypad.ysl2
+
+emit "declarations:keypad" {
+    |
+    | var keypads = {
+    foreach "$keypads_descs"{
+        const "keypad_id","@id";
+        foreach "arg"{
+            const "g", "$geometry[@Id = $keypad_id]";
+    |     "«@value»":["«$keypad_id»", «$g/@x», «$g/@y»],
+        }
+    }
+    | }
+}
+
+template "widget[@type='Keypad']", mode="widget_class"
+    ||
+    class KeypadWidget extends Widget{
+         moving = undefined;
+         click = undefined;
+         offset = undefined;
+
+         on_position_click(evt) {
+             this.moving = true;
+
+             // chatch window events
+             window.addEventListener("touchmove", this.bound_on_drag, true);
+             window.addEventListener("mousemove", this.bound_on_drag, true);
+
+             window.addEventListener("mouseup", this.bound_on_release, true)
+             window.addEventListener("touchend", this.bound_on_release, true);
+             window.addEventListener("touchcancel", this.bound_on_release, true);
+
+             // get click position offset from widget x,y and save it to variable
+             var keypad_borders = this.position_elt.getBoundingClientRect();
+             var clickX = undefined;
+             var clickY = undefined;
+             if (evt.type == "touchstart"){
+                 clickX = Math.ceil(evt.touches[0].clientX);
+                 clickY = Math.ceil(evt.touches[0].clientY);
+             }
+             else{
+                 clickX = evt.pageX;
+                 clickY = evt.pageY;
+             }
+             this.offset=[clickX-keypad_borders.left,clickY-keypad_borders.top]
+         }
+
+         on_release(evt) {
+            //relase binds
+            window.removeEventListener("touchmove", this.bound_on_drag, true);
+            window.removeEventListener("mousemove", this.bound_on_drag, true);
+
+            window.removeEventListener("mouseup", this.bound_on_release, true)
+            window.removeEventListener("touchend", this.bound_on_release, true);
+            window.removeEventListener("touchcancel", this.bound_on_release, true);
+
+            if(this.moving)
+                this.moving = false;
+         }
+
+         on_drag(evt) {
+             if(this.moving)
+                //get mouse coordinates
+                var clickX = undefined;
+                var clickY = undefined;
+                if (evt.type == "touchmove"){
+                    clickX = Math.ceil(evt.touches[0].clientX);
+                    clickY = Math.ceil(evt.touches[0].clientY);
+                }
+                else{
+                    clickX = evt.pageX;
+                    clickY = evt.pageY;
+                }
+                this.click = [clickX,clickY]
+
+                //requeset redraw
+                this.request_animate();
+         }
+
+         animate(){
+            //get keyboard pos in html
+            let [eltid, tmpgrp] = current_modal;
+            let [xcoord,ycoord] = this.coordinates;
+            let [clickX,clickY] = this.click;
+            let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox;
+
+            //translate keyboard position
+            let mouseX = ((clickX-this.offset[0])/window.innerWidth)*svgWidth;
+            let mouseY = ((clickY-this.offset[1])/window.innerHeight)*svgHeight;
+            tmpgrp.setAttribute("transform","translate("+String(xdest-xcoord+mouseX)+","+String(ydest-ycoord+mouseY)+")");
+         }
+
+         on_key_click(symbols) {
+             var syms = symbols.split(" ");
+             this.shift |= this.caps;
+             this.editstr += syms[this.shift?syms.length-1:0];
+             this.shift = false;
+             this.update();
+         }
+
+         on_Esc_click() {
+             end_modal.call(this);
+         }
+
+         on_Enter_click() {
+             let coercedval = (typeof this.initial) == "number" ? Number(this.editstr) : this.editstr;
+             if(typeof coercedval == 'number' && isNaN(coercedval)){
+                 // revert to initial so it explicitely shows input was ignored
+                 this.editstr = String(this.initial);
+                 this.update();
+             } else { 
+                 let callback_obj = this.result_callback_obj;
+                 end_modal.call(this);
+                 callback_obj.edit_callback(coercedval);
+             }
+         }
+
+         on_BackSpace_click() {
+             this.editstr = this.editstr.slice(0,this.editstr.length-1);
+             this.update();
+         }
+
+         on_Sign_click() {
+             if(this.editstr[0] == "-")
+                 this.editstr = this.editstr.slice(1,this.editstr.length);
+             else
+                 this.editstr = "-" + this.editstr;
+             this.update();
+         }
+
+         on_NumDot_click() {
+             if(this.editstr.indexOf(".") == "-1"){
+                 this.editstr += ".";
+                 this.update();
+             }
+         }
+
+         on_Space_click() {
+             this.editstr += " ";
+             this.update();
+         }
+
+         caps = false;
+         _caps = undefined;
+         on_CapsLock_click() {
+             this.caps = !this.caps;
+             this.update();
+         }
+
+         shift = false;
+         _shift = undefined;
+         on_Shift_click() {
+             this.shift = !this.shift;
+             this.caps = false;
+             this.update();
+         }
+         editstr = "";
+         _editstr = undefined;
+         result_callback_obj = undefined;
+         start_edit(info, valuetype, callback_obj, initial,size) {
+             show_modal.call(this,size);
+             this.editstr = String(initial);
+             this.result_callback_obj = callback_obj;
+             this.Info_elt.textContent = info;
+             this.shift = false;
+             this.caps = false;
+             this.initial = initial;
+
+             this.update();
+         }
+
+         update() {
+             if(this.editstr != this._editstr){
+                 this._editstr = this.editstr;
+                 this.Value_elt.textContent = this.editstr;
+             }
+             if(this.shift != this._shift){
+                 this._shift = this.shift;
+                 (this.shift?widget_active_activable:widget_inactive_activable)(this.Shift_sub);
+             }
+             if(this.caps != this._caps){
+                 this._caps = this.caps;
+                 (this.caps?widget_active_activable:widget_inactive_activable)(this.CapsLock_sub);
+             }
+         }
+    }
+    ||
+
+template "widget[@type='Keypad']", mode="widget_defs" {
+    param "hmi_element";
+    labels("Esc Enter BackSpace Keys Info Value");
+    optional_labels("Sign Space NumDot position");
+    activable_labels("CapsLock Shift");
+    |     init: function() {
+    foreach "$hmi_element/*[@inkscape:label = 'Keys']/*" {
+    |         id("«@id»").setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_key_click('«func:escape_quotes(@inkscape:label)»')");
+    }
+    foreach "str:split('Esc Enter BackSpace Sign Space NumDot CapsLock Shift')" {
+    |         if(this.«.»_elt)
+    |             this.«.»_elt.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_«.»_click()");
+    }
+    |         if(this.position_elt){
+    |            this.bound_on_release = this.on_release.bind(this);
+    |            this.bound_on_drag = this.on_drag.bind(this);
+    |
+    |            this.position_elt.setAttribute("onmousedown", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)");
+    |            this.position_elt.setAttribute("ontouchstart", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)");
+    |        }
+    |     },
+    |
+    const "g", "$geometry[@Id = $hmi_element/@id]"; 
+    |     coordinates: [«$g/@x», «$g/@y»],
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_list.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,20 @@
+// widget_list.ysl2
+
+template "widget[@type='List']", mode="widget_defs" {
+    param "hmi_element";
+    |     items: {
+    foreach "$hmi_element/*[@inkscape:label]" {
+    |         «@inkscape:label»: "«@id»",
+    }
+    |     },
+}
+
+template "widget[@type='TextStyleList']", mode="widget_defs" {
+    param "hmi_element";
+    |     styles: {
+    foreach "$hmi_element/*[@inkscape:label]" {
+        const "style", "func:refered_elements(.)[self::svg:text]/@style";
+    |         «@inkscape:label»: "«$style»",
+    }
+    |     },
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_meter.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,41 @@
+// widget_meter.ysl2
+
+template "widget[@type='Meter']", mode="widget_class"{
+    ||
+    class MeterWidget extends Widget{
+        frequency = 10;
+        origin = undefined;
+        range = undefined;
+
+        dispatch(value) {
+            if(this.value_elt)
+                this.value_elt.textContent = String(value);
+            let [min,max,totallength] = this.range;
+            let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min)));
+            let tip = this.range_elt.getPointAtLength(length);
+            this.needle_elt.setAttribute('d', "M "+this.origin.x+","+this.origin.y+" "+tip.x+","+tip.y);
+        }
+
+        init() {
+            let min = this.min_elt ?
+                        Number(this.min_elt.textContent) :
+                        this.args.length >= 1 ? this.args[0] : 0;
+            let max = this.max_elt ?
+                        Number(this.max_elt.textContent) :
+                        this.args.length >= 2 ? this.args[1] : 100;
+            this.range = [min, max, this.range_elt.getTotalLength()]
+            this.origin = this.needle_elt.getPointAtLength(0);
+        }
+
+    }
+    ||
+}
+
+template "widget[@type='Meter']", mode="widget_defs" {
+    param "hmi_element";
+    labels("needle range");
+    optional_labels("value min max");
+    |,
+}
+
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_multistate.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,60 @@
+// widget_multistate.ysl2
+
+template "widget[@type='MultiState']", mode="widget_class"
+    ||
+    class MultiStateWidget extends Widget{
+        frequency = 5;
+        state = 0;
+        dispatch(value) {
+            this.state = value;
+            for(let choice of this.choices){
+                if(this.state != choice.value){
+                    choice.elt.setAttribute("style", "display:none");
+                } else {
+                    choice.elt.setAttribute("style", choice.style);
+                }
+            }
+        }
+
+        on_click(evt) {
+            //get current selected value
+            let next_ind;
+            for(next_ind=0; next_ind<this.choices.length; next_ind++){
+                if(this.state == this.choices[next_ind].value){
+                   next_ind = next_ind + 1;
+                   break;
+                }
+            }
+
+            //get next selected value
+            if(this.choices.length > next_ind){
+                this.state = this.choices[next_ind].value;
+            }
+            else{
+                this.state = this.choices[0].value;
+            }
+
+            //post value to plc
+            this.apply_hmi_value(0, this.state);
+        }
+
+        init() {
+            this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
+        }
+    }
+    ||
+
+template "widget[@type='MultiState']", mode="widget_defs" {
+    param "hmi_element";
+    |     choices: [
+    const "regex",!"'^(\"[^\"].*\"|\-?[0-9]+|false|true)(#.*)?$'"!;
+    foreach "$result_svg_ns//*[@id = $hmi_element/@id]//*[regexp:test(@inkscape:label,$regex)]" {
+        const "literal", "regexp:match(@inkscape:label,$regex)[2]";
+    |         {
+    |             elt:id("«@id»"),
+    |             style:"«@style»",
+    |             value:«$literal»
+    |         }`if "position()!=last()" > ,`
+    }
+    |     ],
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_slider.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,347 @@
+// widget_slider.ysl2
+
+template "widget[@type='Slider']", mode="widget_class"
+    ||
+    class SliderWidget extends Widget{
+        frequency = 5;
+        range = undefined;
+        handle_orig = undefined;
+        scroll_size = undefined;
+        scroll_range = 0;
+        scroll_visible = 7;
+        min_size = 0.07;
+        fi = undefined;
+        curr_value = 0;
+        drag = false;
+        enTimer = false;
+        handle_click = undefined;
+        last_drag = false;
+
+        dispatch(value,oldval, index) {
+            if (index == 0){
+                let [min,max,start,totallength] = this.range;
+                //save current value inside widget
+                this.curr_value = value;
+
+                //check if in range
+                if (this.curr_value > max){
+                    this.curr_value = max;
+                    this.apply_hmi_value(0, this.curr_value);
+                }
+                else if (this.curr_value < min){
+                    this.curr_value = min;
+                    this.apply_hmi_value(0, this.curr_value);
+                }
+
+                if(this.value_elt)
+                    this.value_elt.textContent = String(value);
+            }
+            else if(index == 1){
+                this.scroll_range = value;
+                this.set_scroll();
+            }
+            else if(index == 2){
+                this.scroll_visible = value;
+                this.set_scroll();
+            }
+
+            //don't update if draging and setpoint ghost doesn't exist
+            if(!this.drag || (this.setpoint_elt != undefined)){
+                this.update_DOM(this.curr_value, this.handle_elt);
+            }
+        }
+
+        set_scroll(){
+            //check if range is bigger than visible and set scroll size
+            if(this.scroll_range > this.scroll_visible){
+                this.scroll_size = this.scroll_range - this.scroll_visible;
+                this.range[0] = 0;
+                this.range[1] = this.scroll_size;
+            }
+            else{
+                this.scroll_size = 1;
+                this.range[0] = 0;
+                this.range[1] = 1;
+            }
+        }
+
+        update_DOM(value, elt){
+            let [min,max,start,totallength] = this.range;
+            // check if handle is resizeable
+            if (this.scroll_size != undefined){ //size changes
+                //get parameters
+                let length = Math.max(min,Math.min(max,(Number(value)-min)*max/(max-min)));
+                let tip = this.range_elt.getPointAtLength(length);
+                let handle_min = totallength*this.min_size;
+
+                let step = 1;
+                //check if range is bigger than  max displayed and recalculate step
+                if ((totallength/handle_min) < (max-min+1)){
+                    step = (max-min+1)/(totallength/handle_min-1);
+                }
+
+                let kx,ky,offseY,offseX = undefined;
+                //scale on x or y axes
+                if (this.fi > 0.75){
+                    //get scale factor
+                    if(step > 1){
+                        ky = handle_min/this.handle_orig.height;
+                    }
+                    else{
+                        ky = (totallength-handle_min*(max-min))/this.handle_orig.height;
+                    }
+                    kx = 1;
+                    //get 0 offset to stay inside range
+                    offseY = start.y - (this.handle_orig.height + this.handle_orig.y) * ky;
+                    offseX = 0;
+                    //get distance from value
+                    tip.y =this.range_elt.getPointAtLength(0).y - length/step *handle_min;
+                }
+                else{
+                    //get scale factor
+                    if(step > 1){
+                        kx = handle_min/this.handle_orig.width;
+                    }
+                    else{
+                        kx = (totallength-handle_min*(max-min))/this.handle_orig.width;
+                    }
+                    ky = 1;
+                    //get 0 offset to stay inside range
+                    offseX = start.x - (this.handle_orig.x * kx);
+                    offseY = 0;
+                    //get distance from value
+                    tip.x =this.range_elt.getPointAtLength(0).x + length/step *handle_min;
+                }
+                elt.setAttribute('transform',"matrix("+(kx)+" 0 0 "+(ky)+" "+(tip.x-start.x+offseX)+" "+(tip.y-start.y+offseY)+")");
+            }
+            else{ //size stays the same
+                let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min)));
+                let tip = this.range_elt.getPointAtLength(length);
+                elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")");
+            }
+
+            // show or hide ghost if exists
+            if(this.setpoint_elt != undefined){
+                if(this.last_drag!= this.drag){
+                    if(this.drag){
+                        this.setpoint_elt.setAttribute("style", this.setpoint_style);
+                    }else{
+                        this.setpoint_elt.setAttribute("style", "display:none");
+                    }
+                    this.last_drag = this.drag;
+                }
+            }
+        }
+
+        on_release(evt) {
+            //unbind events
+            window.removeEventListener("touchmove", this.on_bound_drag, true);
+            window.removeEventListener("mousemove", this.on_bound_drag, true);
+
+            window.removeEventListener("mouseup", this.bound_on_release, true);
+            window.removeEventListener("touchend", this.bound_on_release, true);
+            window.removeEventListener("touchcancel", this.bound_on_release, true);
+
+            //reset drag flag
+            if(this.drag){
+                this.drag = false;
+            }
+
+            // get final position
+            this.update_position(evt);
+
+        }
+
+        on_drag(evt){
+            //ignore drag event for X amount of time and if not selected
+            if(this.enTimer && this.drag){
+                this.update_position(evt);
+
+                //reset timer
+                this.enTimer = false;
+                setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
+            }
+        }
+
+        update_position(evt){
+            var html_dist = 0;
+            let [min,max,start,totallength] = this.range;
+
+            //calculate size of widget in html
+            var range_borders = this.range_elt.getBoundingClientRect();
+            var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top];
+            var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width );
+
+            //get range and mouse coordinates
+            var mouseX = undefined;
+            var mouseY = undefined;
+            if (evt.type.startsWith("touch")){
+                mouseX = Math.ceil(evt.touches[0].clientX);
+                mouseY = Math.ceil(evt.touches[0].clientY);
+            }
+            else{
+                mouseX = evt.pageX;
+                mouseY = evt.pageY;
+            }
+
+            // calculate position
+            if (this.handle_click){ //if clicked on handle
+                let moveDist = 0, resizeAdd = 0;
+                let range_percent = 1;
+
+                //set paramters for resizeable handle
+                if (this.scroll_size != undefined){
+                    // add one more object to stay inside range
+                    resizeAdd = 1;
+
+                    //chack if range is bigger than display option and
+                    // calculate percent of range with out handle
+                    if(((max/(max*this.min_size)) < (max-min+1))){
+                        range_percent = 1-this.min_size;
+                    }
+                    else{
+                        range_percent = 1-(max-max*this.min_size*(max-min))/max;
+                    }
+                }
+
+                //calculate value difference on x or y axis
+                if(this.fi > 0.7){
+                    moveDist = ((max-min+resizeAdd)/(range_length*range_percent))*((this.handle_click[1]-mouseY)/Math.sin(this.fi));
+                }
+                else{
+                    moveDist = ((max-min+resizeAdd)/(range_length*range_percent))*((mouseX-this.handle_click[0])/Math.cos(this.fi));
+                }
+
+                this.curr_value = Math.ceil(this.handle_click[2] + moveDist);
+            }
+            else{ //if clicked on widget
+                //get handle distance from mouse position
+                if (minX > mouseX && minY < mouseY){
+                    html_dist = 0;
+                }
+                else if (maxX < mouseX && maxY > mouseY){
+                    html_dist = range_length;
+                }
+                else{
+                    if(this.fi > 0.7){
+                        html_dist = (minY - mouseY)/Math.sin(this.fi);
+                    }
+                    else{
+                        html_dist = (mouseX - minX)/Math.cos(this.fi);
+                    }
+                }
+                //calculate distance
+                this.curr_value=Math.ceil((html_dist/range_length)*(this.range[1]-this.range[0])+this.range[0]);
+            }
+
+            //check if in range and apply
+            if (this.curr_value > max){
+                this.curr_value = max;
+            }
+            else if (this.curr_value < min){
+                this.curr_value = min;
+            }
+            this.apply_hmi_value(0, this.curr_value);
+
+            //redraw handle
+            this.request_animate();
+
+        }
+
+        animate(){
+            // redraw handle on screen refresh
+            // check if setpoint(ghost) handle exsist otherwise update main handle
+            if(this.setpoint_elt != undefined){
+                this.update_DOM(this.curr_value, this.setpoint_elt);
+            }
+            else{
+                this.update_DOM(this.curr_value, this.handle_elt);
+            }
+        }
+
+        on_select(evt){
+            //enable drag flag and timer
+            this.drag = true;
+            this.enTimer = true;
+
+            //bind events
+            window.addEventListener("touchmove", this.on_bound_drag, true);
+            window.addEventListener("mousemove", this.on_bound_drag, true);
+
+            window.addEventListener("mouseup", this.bound_on_release, true);
+            window.addEventListener("touchend", this.bound_on_release, true);
+            window.addEventListener("touchcancel", this.bound_on_release, true);
+
+            // check if handle was pressed
+            if (evt.currentTarget == this.handle_elt){
+                //get mouse position on the handle
+                let mouseX = undefined;
+                let mouseY = undefined;
+                if (evt.type.startsWith("touch")){
+                    mouseX = Math.ceil(evt.touches[0].clientX);
+                    mouseY = Math.ceil(evt.touches[0].clientY);
+                }
+                else{
+                    mouseX = evt.pageX;
+                    mouseY = evt.pageY;
+                }
+                //save coordinates and orig value
+                this.handle_click = [mouseX,mouseY,this.curr_value];
+            }
+            else{
+                // get new handle position and reset if handle was not pressed
+                this.handle_click = undefined;
+                this.update_position(evt);
+            }
+
+            //prevent next events
+            evt.stopPropagation();
+
+        }
+
+
+        init() {
+            //set min max value if not defined
+            let min = this.min_elt ?
+                        Number(this.min_elt.textContent) :
+                        this.args.length >= 1 ? this.args[0] : 0;
+            let max = this.max_elt ?
+                        Number(this.max_elt.textContent) :
+                        this.args.length >= 2 ? this.args[1] : 100;
+
+
+            // save initial parameters
+            this.range_elt.style.strokeMiterlimit="0";
+            this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()];
+            let start = this.range_elt.getPointAtLength(0);
+            let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength());
+            this.fi = Math.atan2(start.y-end.y, end.x-start.x);
+            this.handle_orig = this.handle_elt.getBBox();
+
+            //bind functions
+            this.bound_on_select = this.on_select.bind(this);
+            this.bound_on_release = this.on_release.bind(this);
+            this.on_bound_drag = this.on_drag.bind(this);
+
+            this.handle_elt.addEventListener("mousedown", this.bound_on_select);
+            this.element.addEventListener("mousedown", this.bound_on_select);
+            this.element.addEventListener("touchstart", this.bound_on_select);
+            //touch recognised as page drag without next command
+            document.body.addEventListener("touchstart", function(e){}, false);
+
+            //save ghost style
+            if(this.setpoint_elt != undefined){
+                this.setpoint_style = this.setpoint_elt.getAttribute("style");
+                this.setpoint_elt.setAttribute("style", "display:none");
+            }
+
+        }
+    }
+    ||
+
+template "widget[@type='Slider']", mode="widget_defs" {
+    param "hmi_element";
+    labels("handle range");
+    optional_labels("value min max setpoint");
+    |,
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_switch.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,32 @@
+// widget_switch.ysl2
+
+template "widget[@type='Switch']", mode="widget_class"
+    ||
+    class SwitchWidget extends Widget{
+        frequency = 5;
+        dispatch(value) {
+            for(let choice of this.choices){
+                if(value != choice.value){
+                    choice.elt.setAttribute("style", "display:none");
+                } else {
+                    choice.elt.setAttribute("style", choice.style);
+                }
+            }
+        }
+    }
+    ||
+
+template "widget[@type='Switch']", mode="widget_defs" {
+    param "hmi_element";
+    |     choices: [
+    const "regex",!"'^(\"[^\"].*\"|\-?[0-9]+|false|true)(#.*)?$'"!;
+    foreach "$result_svg_ns//*[@id = $hmi_element/@id]//*[regexp:test(@inkscape:label,$regex)]" {
+        const "literal", "regexp:match(@inkscape:label,$regex)[2]";
+    |         {
+    |             elt:id("«@id»"),
+    |             style:"«@style»",
+    |             value:«$literal»
+    |         }`if "position()!=last()" > ,`
+    }
+    |     ],
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_tooglebutton.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,61 @@
+// widget_tooglebutton.ysl2
+
+
+template "widget[@type='ToggleButton']", mode="widget_class"{
+    ||
+    class ToggleButtonWidget extends Widget{
+        frequency = 5;
+        state = 0;
+        active_style = undefined;
+        inactive_style = undefined;
+
+        dispatch(value) {
+            this.state = value;
+            //redraw toggle button
+            this.request_animate();
+        }
+
+        on_click(evt) {
+            //toggle state and apply
+            if (this.state) {
+                this.state = 0;
+            } else {
+                this.state = 1;
+            }
+            this.apply_hmi_value(0, this.state);
+
+            //redraw toggle button
+            this.request_animate();
+        }
+
+        animate(){
+           // redraw toggle button on screen refresh
+           if (this.state) {
+               this.active_elt.setAttribute("style", this.active_style);
+               this.inactive_elt.setAttribute("style", "display:none");
+           } else {
+               this.inactive_elt.setAttribute("style", this.inactive_style);
+               this.active_elt.setAttribute("style", "display:none");
+           }
+        }
+
+        init() {
+            this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined;
+            this.inactive_style = this.inactive_elt ? this.inactive_elt.style.cssText : undefined;
+
+            if (this.active_style && this.inactive_style) {
+                this.active_elt.setAttribute("style", "display:none");
+                this.inactive_elt.setAttribute("style", this.inactive_style);
+            }
+
+            this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
+        }
+    }
+    ||
+}
+
+template "widget[@type='ToggleButton']", mode="widget_defs" {
+    param "hmi_element";
+    optional_labels("active inactive");
+    |,
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widgets_common.ysl2	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,314 @@
+// widgets_common.ysl2
+
+in xsl decl labels(*ptr, name="defs_by_labels") alias call-template {
+    with "hmi_element", "$hmi_element";
+    with "labels"{text *ptr};
+    content;
+};
+
+decl optional_labels(*ptr) alias - {
+    /* TODO add some per label xslt variable to check if exist */
+    labels(*ptr){
+        with "mandatory","'no'";
+        content;
+    }
+};
+
+decl activable_labels(*ptr) alias - {
+    optional_labels(*ptr) {
+        with "subelements","'active inactive'";
+        content;
+    }
+};
+
+template "svg:*", mode="hmi_widgets" {
+    const "widget", "func:widget(@id)";
+    const "eltid","@id";
+    const "args" foreach "$widget/arg" > "«func:escape_quotes(@value)»"`if "position()!=last()" > ,`
+    const "indexes" foreach "$widget/path" {
+        choose {
+            when "not(@index)" {
+                choose {
+                    when "not(@type)" {
+                        warning > Widget «$widget/@type» id="«$eltid»" : No match for path "«@value»" in HMI tree
+                        > undefined`if "position()!=last()" > ,`
+                    }
+                    when "@type = 'PAGE_LOCAL'" 
+                        > "«@value»"`if "position()!=last()" > ,`
+                    when "@type = 'HMI_LOCAL'" 
+                        > hmi_local_index("«@value»")`if "position()!=last()" > ,`
+                }
+            }
+            otherwise {
+                > «@index»`if "position()!=last()" > ,`
+            }
+        }
+    }
+
+    |   "«@id»": new «$widget/@type»Widget ("«@id»",[«$args»],[«$indexes»],{
+    apply "$widget", mode="widget_defs" with "hmi_element",".";
+    |   })`if "position()!=last()" > ,`
+}
+
+def "func:unique_types" {
+    param "elts_with_type";
+    choose {
+        when "count($elts_with_type) > 1" {
+            const "prior_results","func:unique_types($elts_with_type[position()!=last()])";
+            choose {
+                when "$elts_with_type[last()][@type = $prior_results/@type]"{
+                    // type already in
+                    result "$prior_results";
+                }
+                otherwise {
+                    result "$prior_results | $elts_with_type[last()]";
+                }
+            }
+        }
+        otherwise {
+            result "$elts_with_type";
+        }
+    }
+}
+
+emit "preamble:local-variable-indexes" {
+    ||
+    let hmi_locals = {};
+    var last_remote_index = hmitree_types.length - 1;
+    var next_available_index = hmitree_types.length;
+
+    const local_defaults = {
+    ||
+    foreach "$parsed_widgets/widget[@type = 'VarInit']"{
+        if "count(path) != 1" error > VarInit «@id» must have only one variable given.
+        if "path/@type != 'PAGE_LOCAL' and path/@type != 'HMI_LOCAL'" error > VarInit «@id» only applies to HMI variable.
+        | "«path/@value»":«arg[1]/@value»`if "position()!=last()" > ,`
+    }
+    ||
+    };
+    var cache = hmitree_types.map(_ignored => undefined);
+
+    function page_local_index(varname, pagename){
+        let pagevars = hmi_locals[pagename];
+        let new_index;
+        if(pagevars == undefined){
+            new_index = next_available_index++;
+            hmi_locals[pagename] = {[varname]:new_index}
+        } else {
+            let result = pagevars[varname];
+            if(result != undefined) {
+                return result;
+            }
+
+            new_index = next_available_index++;
+            pagevars[varname] = new_index;
+        }
+        let defaultval = local_defaults[varname];
+        if(defaultval != undefined) 
+            cache[new_index] = defaultval; 
+        return new_index;
+    }
+
+    function hmi_local_index(varname){
+        return page_local_index(varname, "HMI_LOCAL");
+    }
+    ||
+}
+
+emit "preamble:widget-base-class" {
+    ||
+    var pending_widget_animates = [];
+
+    class Widget {
+        offset = 0;
+        frequency = 10; /* FIXME arbitrary default max freq. Obtain from config ? */
+        unsubscribable = false;
+        pending_animate = false;
+
+        constructor(elt_id,args,indexes,members){
+            this.element_id = elt_id;
+            this.element = id(elt_id);
+            this.args = args;
+            this.indexes = indexes;
+            Object.keys(members).forEach(prop => this[prop]=members[prop]);
+        }
+
+        unsub(){
+            /* remove subsribers */
+            if(!this.unsubscribable)
+                for(let i = 0; i < this.indexes.length; i++) {
+                    let index = this.indexes[i];
+                    if(this.relativeness[i])
+                        index += this.offset;
+                    subscribers(index).delete(this);
+                }
+            this.offset = 0;
+            this.relativeness = undefined;
+        }
+
+        sub(new_offset=0, relativeness, container_id){
+            this.offset = new_offset;
+            this.relativeness = relativeness;
+            this.container_id = container_id ;
+            /* add this's subsribers */
+            if(!this.unsubscribable)
+                for(let i = 0; i < this.indexes.length; i++) {
+                    let index = this.get_variable_index(i);
+                    if(index == undefined) continue;
+                    subscribers(index).add(this);
+                }
+            need_cache_apply.push(this); 
+        }
+
+        apply_cache() {
+            if(!this.unsubscribable) for(let index in this.indexes){
+                /* dispatch current cache in newly opened page widgets */
+                let realindex = this.get_variable_index(index);
+                if(realindex == undefined) continue;
+                let cached_val = cache[realindex];
+                if(cached_val != undefined)
+                    this._dispatch(cached_val, cached_val, index);
+            }
+        }
+
+        get_variable_index(varnum) {
+            let index = this.indexes[varnum];
+            if(typeof(index) == "string"){
+                index = page_local_index(index, this.container_id);
+            } else {
+                if(this.relativeness[varnum]){
+                    index += this.offset;
+                }
+            }
+            return index;
+        }
+        change_hmi_value(index, opstr) {
+            let realindex = this.get_variable_index(index);
+            if(realindex == undefined) return undefined;
+            return change_hmi_value(realindex, opstr);
+        }
+
+        apply_hmi_value(index, new_val) {
+            let realindex = this.get_variable_index(index);
+            if(realindex == undefined) return undefined;
+            return apply_hmi_value(realindex, new_val);
+        }
+
+        new_hmi_value(index, value, oldval) {
+            // TODO avoid searching, store index at sub()
+            for(let i = 0; i < this.indexes.length; i++) {
+                let refindex = this.get_variable_index(i);
+                if(refindex == undefined) continue;
+
+                if(index == refindex) {
+                    this._dispatch(value, oldval, i);
+                    break;
+                }
+            }
+        }
+        
+        _dispatch(value, oldval, varnum) {
+            let dispatch = this.dispatch;
+            if(dispatch != undefined){
+                try {
+                    dispatch.call(this, value, oldval, varnum);
+                } catch(err) {
+                    console.log(err);
+                }
+            }
+        }
+
+        _animate(){
+            this.animate();
+            this.pending_animate = false;
+        }
+
+        request_animate(){
+            if(!this.pending_animate){
+                pending_widget_animates.push(this);
+                this.pending_animate = true;
+                requestHMIAnimation();
+            }
+
+        }
+    }
+    ||
+}
+
+emit "declarations:hmi-classes" {
+    const "used_widget_types", "func:unique_types($parsed_widgets/widget)";
+    apply "$used_widget_types", mode="widget_class";
+}
+
+template "widget", mode="widget_class"
+||
+class «@type»Widget extends Widget{
+    /* empty class, as «@type» widget didn't provide any */
+}
+||
+
+const "excluded_types", "str:split('Page Lang VarInit')";
+const "included_ids","$parsed_widgets/widget[not(@type = $excluded_types)]/@id";
+
+emit "declarations:hmi-elements" {
+    | var hmi_widgets = {
+    apply "$hmi_elements[@id = $included_ids]", mode="hmi_widgets";
+    | }
+}
+
+function "defs_by_labels" {
+    param "labels","''";
+    param "mandatory","'yes'";
+    param "subelements","/..";
+    param "hmi_element";
+    const "widget_type","@type";
+    foreach "str:split($labels)" {
+        const "name",".";
+        const "elt","$result_svg_ns//*[@id = $hmi_element/@id]//*[@inkscape:label=$name][1]";
+        choose {
+            when "not($elt/@id)" {
+                if "$mandatory='yes'" {
+                    error > «$widget_type» widget must have a «$name» element
+                }
+                // otherwise produce nothing
+            }
+            otherwise {
+                |     «$name»_elt: id("«$elt/@id»"),
+                if "$subelements" {
+                |     «$name»_sub: {
+                    foreach "str:split($subelements)" {
+                        const "subname",".";
+                        const "subelt","$elt/*[@inkscape:label=$subname][1]";
+                        choose {
+                            when "not($subelt/@id)" {
+                                if "$mandatory='yes'" {
+                                    error > «$widget_type» widget must have a «$name»/«$subname» element
+                                }
+                |         /* missing «$name»/«$subname» element */
+                            }
+                            otherwise {
+                |         "«$subname»": id("«$subelt/@id»")`if "position()!=last()" > ,`
+                            }
+                        }
+                    }
+                |     },
+                }
+            }
+        }
+    }
+}
+
+def "func:escape_quotes" {
+    param "txt";
+    // have to use a python string to enter escaped quote
+    // const "frstln", "string-length($frst)";
+    choose {
+        when !"contains($txt,'\"')"! {
+            result !"concat(substring-before($txt,'\"'),'\\\"',func:escape_quotes(substring-after($txt,'\"')))"!;
+        }
+        otherwise {
+            result "$txt";
+        }
+    }
+}
+
--- a/targets/Linux/plc_Linux_main.c	Tue Dec 22 14:53:15 2020 +0100
+++ b/targets/Linux/plc_Linux_main.c	Tue Dec 22 14:57:59 2020 +0100
@@ -235,3 +235,18 @@
 {
     pthread_mutex_lock(&python_mutex);
 }
+
+static pthread_cond_t svghmi_send_WakeCond = PTHREAD_COND_INITIALIZER;
+static pthread_mutex_t svghmi_send_WakeCondLock = PTHREAD_MUTEX_INITIALIZER;
+
+void SVGHMI_SuspendFromPythonThread(void)
+{
+    pthread_mutex_lock(&svghmi_send_WakeCondLock);
+    pthread_cond_wait(&svghmi_send_WakeCond, &svghmi_send_WakeCondLock);
+    pthread_mutex_unlock(&svghmi_send_WakeCondLock);
+}
+
+void SVGHMI_WakeupFromRTThread(void)
+{
+    pthread_cond_signal(&svghmi_send_WakeCond);
+}
--- a/targets/Xenomai/plc_Xenomai_main.c	Tue Dec 22 14:53:15 2020 +0100
+++ b/targets/Xenomai/plc_Xenomai_main.c	Tue Dec 22 14:57:59 2020 +0100
@@ -26,6 +26,8 @@
 #define PLC_STATE_WAITDEBUG_PIPE_CREATED       64
 #define PLC_STATE_WAITPYTHON_FILE_OPENED       128
 #define PLC_STATE_WAITPYTHON_PIPE_CREATED      256
+#define PLC_STATE_SVGHMI_FILE_OPENED           512
+#define PLC_STATE_SVGHMI_PIPE_CREATED          1024
 
 #define WAITDEBUG_PIPE_DEVICE        "/dev/rtp0"
 #define WAITDEBUG_PIPE_MINOR         0
@@ -35,6 +37,8 @@
 #define WAITPYTHON_PIPE_MINOR        2
 #define PYTHON_PIPE_DEVICE           "/dev/rtp3"
 #define PYTHON_PIPE_MINOR            3
+#define SVGHMI_PIPE_DEVICE           "/dev/rtp4"
+#define SVGHMI_PIPE_MINOR            4
 #define PIPE_SIZE                    1 
 
 // rt-pipes commands
@@ -68,10 +72,12 @@
 RT_PIPE WaitPython_pipe;
 RT_PIPE Debug_pipe;
 RT_PIPE Python_pipe;
+RT_PIPE svghmi_pipe;
 int WaitDebug_pipe_fd;
 int WaitPython_pipe_fd;
 int Debug_pipe_fd;
 int Python_pipe_fd;
+int svghmi_pipe_fd;
 
 int PLC_shutdown = 0;
 
@@ -114,6 +120,16 @@
         PLC_state &= ~PLC_STATE_TASK_CREATED;
     }
 
+    if (PLC_state & PLC_STATE_SVGHMI_PIPE_CREATED) {
+        rt_pipe_delete(&svghmi_pipe);
+        PLC_state &= ~PLC_STATE_SVGHMI_PIPE_CREATED;
+    }
+
+    if (PLC_state & PLC_STATE_SVGHMI_FILE_OPENED) {
+        close(svghmi_pipe_fd);
+        PLC_state &= ~PLC_STATE_SVGHMI_FILE_OPENED;
+    }
+
     if (PLC_state & PLC_STATE_WAITDEBUG_PIPE_CREATED) {
         rt_pipe_delete(&WaitDebug_pipe);
         PLC_state &= ~PLC_STATE_WAITDEBUG_PIPE_CREATED;
@@ -240,6 +256,16 @@
         _startPLCLog(FO WAITPYTHON_PIPE_DEVICE);
     PLC_state |= PLC_STATE_WAITPYTHON_FILE_OPENED;
 
+    /* create svghmi_pipe */
+    if(rt_pipe_create(&svghmi_pipe, "svghmi_pipe", SVGHMI_PIPE_MINOR, PIPE_SIZE) < 0)
+        _startPLCLog(FO "svghmi_pipe real-time end");
+    PLC_state |= PLC_STATE_SVGHMI_PIPE_CREATED;
+
+    /* open svghmi_pipe*/
+    if((svghmi_pipe_fd = open(SVGHMI_PIPE_DEVICE, O_RDWR)) == -1)
+        _startPLCLog(FO SVGHMI_PIPE_DEVICE);
+    PLC_state |= PLC_STATE_SVGHMI_FILE_OPENED;
+
     /*** create PLC task ***/
     if(rt_task_create(&PLC_task, "PLC_task", 0, 50, T_JOINABLE))
         _startPLCLog("Failed creating PLC task");
@@ -395,6 +421,18 @@
     }    /* as plc does not wait for lock. */
 }
 
+void SVGHMI_SuspendFromPythonThread(void)
+{
+    char cmd = 1; /*whatever*/
+    read(svghmi_pipe_fd, &cmd, sizeof(cmd));
+}
+
+void SVGHMI_WakeupFromRTThread(void)
+{
+    char cmd;
+    rt_pipe_write(&svghmi_pipe, &cmd, sizeof(cmd), P_NORMAL);
+}
+
 #ifndef HAVE_RETAIN
 int CheckRetainBuffer(void)
 {
--- a/targets/plc_debug.c	Tue Dec 22 14:53:15 2020 +0100
+++ b/targets/plc_debug.c	Tue Dec 22 14:57:59 2020 +0100
@@ -100,7 +100,7 @@
 void __init_debug(void)
 {
     /* init local static vars */
-#ifndef TARGET_ONLINE_DEBUG_DISABLE	
+#ifndef TARGET_ONLINE_DEBUG_DISABLE
     buffer_cursor = debug_buffer;
     buffer_state = BUFFER_FREE;
 #endif
@@ -109,9 +109,9 @@
     InitRetain();
     /* Iterate over all variables to fill debug buffer */
     if(CheckRetainBuffer()){
-    	__for_each_variable_do(RemindIterator);
+        __for_each_variable_do(RemindIterator);
     }else{
-    	char mstr[] = "RETAIN memory invalid - defaults used";
+        char mstr[] = "RETAIN memory invalid - defaults used";
         LogMessage(LOG_WARNING, mstr, sizeof(mstr));
     }
     retain_offset = 0;
@@ -124,7 +124,7 @@
 
 void __cleanup_debug(void)
 {
-#ifndef TARGET_ONLINE_DEBUG_DISABLE	
+#ifndef TARGET_ONLINE_DEBUG_DISABLE
     buffer_cursor = debug_buffer;
     InitiateDebugTransfer();
 #endif    
@@ -150,16 +150,14 @@
     if(flags & ( __IEC_DEBUG_FLAG | __IEC_RETAIN_FLAG)){
         USINT size = __get_type_enum_size(dsc->type);
 
-#ifndef TARGET_ONLINE_DEBUG_DISABLE	
+#ifndef TARGET_ONLINE_DEBUG_DISABLE
         if(flags & __IEC_DEBUG_FLAG){
             /* copy visible variable to buffer */;
             if(do_debug){
                 /* compute next cursor positon.
                    No need to check overflow, as BUFFER_SIZE
                    is computed large enough */
-		if((dsc->type == STRING_ENUM)   ||
-		   (dsc->type == STRING_P_ENUM) ||
-		   (dsc->type == STRING_O_ENUM)){
+                if(__Is_a_string(dsc)){
                     /* optimization for strings */
                     size = ((STRING*)visible_value_p)->len + 1;
                 }
@@ -174,7 +172,7 @@
                 memcpy(real_value_p, visible_value_p, size);
             }
         }
-#endif	
+#endif
 
         if(flags & __IEC_RETAIN_FLAG){
             /* compute next cursor positon*/
--- a/targets/var_access.c	Tue Dec 22 14:53:15 2020 +0100
+++ b/targets/var_access.c	Tue Dec 22 14:57:59 2020 +0100
@@ -14,6 +14,10 @@
             forced_value_p = &((__IEC_##TYPENAME##_p *)varp)->fvalue;\
             break;
 
+#define __Is_a_string(dsc) (dsc->type == STRING_ENUM)   ||\
+                           (dsc->type == STRING_P_ENUM) ||\
+                           (dsc->type == STRING_O_ENUM)
+
 static void* UnpackVar(__Unpack_desc_type *dsc, void **real_value_p, char *flags)
 {
     void *varp = dsc->ptr;
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tests/svghmi/beremiz.xml	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,5 @@
+<?xml version='1.0' encoding='utf-8'?>
+<BeremizRoot xmlns:xsd="http://www.w3.org/2001/XMLSchema" URI_location="PYRO://127.0.0.1:61284">
+  <TargetType/>
+  <Libraries Enable_SVGHMI_Library="true"/>
+</BeremizRoot>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tests/svghmi/plc.xml	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,922 @@
+<?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="2019-08-06T14:23:42"/>
+  <contentHeader name="Unnamed" modificationDateTime="2020-12-01T09:52:25">
+    <coordinateInfo>
+      <fbd>
+        <scaling x="5" y="5"/>
+      </fbd>
+      <ld>
+        <scaling x="0" y="0"/>
+      </ld>
+      <sfc>
+        <scaling x="0" y="0"/>
+      </sfc>
+    </coordinateInfo>
+  </contentHeader>
+  <types>
+    <dataTypes/>
+    <pous>
+      <pou name="MainStuff" pouType="program">
+        <interface>
+          <localVars>
+            <variable name="TargetPressure">
+              <type>
+                <derived name="HMI_INT"/>
+              </type>
+            </variable>
+            <variable name="selection">
+              <type>
+                <derived name="HMI_INT"/>
+              </type>
+            </variable>
+            <variable name="Pump0">
+              <type>
+                <derived name="PumpControl"/>
+              </type>
+            </variable>
+            <variable name="Pump1">
+              <type>
+                <derived name="PumpControl"/>
+              </type>
+            </variable>
+            <variable name="Pump2">
+              <type>
+                <derived name="PumpControl"/>
+              </type>
+            </variable>
+            <variable name="Pump3">
+              <type>
+                <derived name="PumpControl"/>
+              </type>
+            </variable>
+            <variable name="Pump4">
+              <type>
+                <derived name="PumpControl"/>
+              </type>
+            </variable>
+            <variable name="Pump5">
+              <type>
+                <derived name="PumpControl"/>
+              </type>
+            </variable>
+            <variable name="Pump6">
+              <type>
+                <derived name="PumpControl"/>
+              </type>
+            </variable>
+            <variable name="Pump7">
+              <type>
+                <derived name="PumpControl"/>
+              </type>
+            </variable>
+          </localVars>
+        </interface>
+        <body>
+          <FBD>
+            <block localId="4" typeName="PumpControl" instanceName="Pump0" executionOrderId="0" height="40" width="127">
+              <position x="595" y="50"/>
+              <inputVariables>
+                <variable formalParameter="TargetPressure">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="5">
+                      <position x="595" y="80"/>
+                      <position x="570" y="80"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables/>
+            </block>
+            <inVariable localId="5" executionOrderId="0" height="30" width="125" negated="false">
+              <position x="445" y="65"/>
+              <connectionPointOut>
+                <relPosition x="125" y="15"/>
+              </connectionPointOut>
+              <expression>TargetPressure</expression>
+            </inVariable>
+            <block localId="1" typeName="PumpControl" instanceName="Pump1" executionOrderId="0" height="40" width="127">
+              <position x="595" y="180"/>
+              <inputVariables>
+                <variable formalParameter="TargetPressure">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="5">
+                      <position x="595" y="210"/>
+                      <position x="582" y="210"/>
+                      <position x="582" y="80"/>
+                      <position x="570" y="80"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables/>
+            </block>
+            <block localId="2" typeName="PumpControl" instanceName="Pump2" executionOrderId="0" height="40" width="127">
+              <position x="595" y="110"/>
+              <inputVariables>
+                <variable formalParameter="TargetPressure">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="5">
+                      <position x="595" y="140"/>
+                      <position x="582" y="140"/>
+                      <position x="582" y="80"/>
+                      <position x="570" y="80"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables/>
+            </block>
+            <block localId="3" typeName="PumpControl" instanceName="Pump3" executionOrderId="0" height="40" width="127">
+              <position x="595" y="245"/>
+              <inputVariables>
+                <variable formalParameter="TargetPressure">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="5">
+                      <position x="595" y="275"/>
+                      <position x="582" y="275"/>
+                      <position x="582" y="80"/>
+                      <position x="570" y="80"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables/>
+            </block>
+            <block localId="6" typeName="PumpControl" instanceName="Pump4" executionOrderId="0" height="40" width="127">
+              <position x="595" y="315"/>
+              <inputVariables>
+                <variable formalParameter="TargetPressure">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="5">
+                      <position x="595" y="345"/>
+                      <position x="582" y="345"/>
+                      <position x="582" y="80"/>
+                      <position x="570" y="80"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables/>
+            </block>
+            <block localId="7" typeName="PumpControl" instanceName="Pump5" executionOrderId="0" height="40" width="127">
+              <position x="595" y="395"/>
+              <inputVariables>
+                <variable formalParameter="TargetPressure">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="5">
+                      <position x="595" y="425"/>
+                      <position x="582" y="425"/>
+                      <position x="582" y="80"/>
+                      <position x="570" y="80"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables/>
+            </block>
+            <block localId="8" typeName="PumpControl" instanceName="Pump6" executionOrderId="0" height="40" width="127">
+              <position x="595" y="475"/>
+              <inputVariables>
+                <variable formalParameter="TargetPressure">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="5">
+                      <position x="595" y="505"/>
+                      <position x="582" y="505"/>
+                      <position x="582" y="80"/>
+                      <position x="570" y="80"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables/>
+            </block>
+            <block localId="9" typeName="PumpControl" instanceName="Pump7" executionOrderId="0" height="40" width="127">
+              <position x="595" y="545"/>
+              <inputVariables>
+                <variable formalParameter="TargetPressure">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="5">
+                      <position x="595" y="575"/>
+                      <position x="582" y="575"/>
+                      <position x="582" y="80"/>
+                      <position x="570" y="80"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables/>
+            </block>
+          </FBD>
+        </body>
+      </pou>
+      <pou name="PumpControl" pouType="functionBlock">
+        <interface>
+          <localVars>
+            <variable name="Pump">
+              <type>
+                <derived name="HMI_NODE"/>
+              </type>
+            </variable>
+            <variable name="Pressure">
+              <type>
+                <derived name="HMI_INT"/>
+              </type>
+            </variable>
+          </localVars>
+          <inputVars>
+            <variable name="TargetPressure">
+              <type>
+                <INT/>
+              </type>
+            </variable>
+          </inputVars>
+          <localVars>
+            <variable name="Sloth">
+              <type>
+                <derived name="HMI_INT"/>
+              </type>
+            </variable>
+            <variable name="boolout">
+              <type>
+                <derived name="HMI_BOOL"/>
+              </type>
+            </variable>
+            <variable name="boolin">
+              <type>
+                <derived name="HMI_BOOL"/>
+              </type>
+              <initialValue>
+                <simpleValue value="True"/>
+              </initialValue>
+            </variable>
+            <variable name="strout">
+              <type>
+                <derived name="HMI_STRING"/>
+              </type>
+            </variable>
+            <variable name="strin">
+              <type>
+                <derived name="HMI_STRING"/>
+              </type>
+              <initialValue>
+                <simpleValue value="blup"/>
+              </initialValue>
+            </variable>
+            <variable name="floating">
+              <type>
+                <derived name="HMI_REAL"/>
+              </type>
+            </variable>
+          </localVars>
+        </interface>
+        <body>
+          <FBD>
+            <inVariable localId="5" executionOrderId="0" height="30" width="125" negated="false">
+              <position x="150" y="100"/>
+              <connectionPointOut>
+                <relPosition x="125" y="15"/>
+              </connectionPointOut>
+              <expression>TargetPressure</expression>
+            </inVariable>
+            <inOutVariable localId="4" executionOrderId="0" height="30" width="60" negatedOut="false" negatedIn="false">
+              <position x="510" y="80"/>
+              <connectionPointIn>
+                <relPosition x="0" y="15"/>
+                <connection refLocalId="6" formalParameter="OUT">
+                  <position x="510" y="95"/>
+                  <position x="470" y="95"/>
+                </connection>
+              </connectionPointIn>
+              <connectionPointOut>
+                <relPosition x="60" y="15"/>
+              </connectionPointOut>
+              <expression>Sloth</expression>
+            </inOutVariable>
+            <block localId="6" typeName="ADD" executionOrderId="0" height="60" width="65">
+              <position x="405" y="65"/>
+              <inputVariables>
+                <variable formalParameter="IN1">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="4">
+                      <position x="405" y="95"/>
+                      <position x="385" y="95"/>
+                      <position x="385" y="50"/>
+                      <position x="580" y="50"/>
+                      <position x="580" y="95"/>
+                      <position x="570" y="95"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+                <variable formalParameter="IN2">
+                  <connectionPointIn>
+                    <relPosition x="0" y="50"/>
+                    <connection refLocalId="7" formalParameter="OUT">
+                      <position x="405" y="115"/>
+                      <position x="360" y="115"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="65" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <inVariable localId="1" executionOrderId="0" height="30" width="75" negated="false">
+              <position x="150" y="135"/>
+              <connectionPointOut>
+                <relPosition x="75" y="15"/>
+              </connectionPointOut>
+              <expression>Pressure</expression>
+            </inVariable>
+            <block localId="7" typeName="SUB" executionOrderId="0" height="60" width="65">
+              <position x="295" y="85"/>
+              <inputVariables>
+                <variable formalParameter="IN1">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="5">
+                      <position x="295" y="115"/>
+                      <position x="275" y="115"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+                <variable formalParameter="IN2">
+                  <connectionPointIn>
+                    <relPosition x="0" y="50"/>
+                    <connection refLocalId="1">
+                      <position x="295" y="135"/>
+                      <position x="285" y="135"/>
+                      <position x="285" y="150"/>
+                      <position x="225" y="150"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="65" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <inVariable localId="2" executionOrderId="0" height="30" width="60" negated="false">
+              <position x="240" y="190"/>
+              <connectionPointOut>
+                <relPosition x="60" y="15"/>
+              </connectionPointOut>
+              <expression>Sloth</expression>
+            </inVariable>
+            <outVariable localId="3" executionOrderId="0" height="30" width="75" negated="false">
+              <position x="435" y="205"/>
+              <connectionPointIn>
+                <relPosition x="0" y="15"/>
+                <connection refLocalId="8" formalParameter="OUT">
+                  <position x="435" y="220"/>
+                  <position x="410" y="220"/>
+                </connection>
+              </connectionPointIn>
+              <expression>Pressure</expression>
+            </outVariable>
+            <block localId="8" typeName="DIV" executionOrderId="0" height="60" width="65">
+              <position x="345" y="190"/>
+              <inputVariables>
+                <variable formalParameter="IN1">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="2">
+                      <position x="345" y="220"/>
+                      <position x="335" y="220"/>
+                      <position x="335" y="205"/>
+                      <position x="300" y="205"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+                <variable formalParameter="IN2">
+                  <connectionPointIn>
+                    <relPosition x="0" y="50"/>
+                    <connection refLocalId="9">
+                      <position x="345" y="240"/>
+                      <position x="300" y="240"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="65" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <inVariable localId="9" executionOrderId="0" height="30" width="60" negated="false">
+              <position x="240" y="225"/>
+              <connectionPointOut>
+                <relPosition x="60" y="15"/>
+              </connectionPointOut>
+              <expression>100</expression>
+            </inVariable>
+            <block localId="10" typeName="CONCAT" executionOrderId="0" height="60" width="65">
+              <position x="360" y="345"/>
+              <inputVariables>
+                <variable formalParameter="IN1">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="13" formalParameter="OUT">
+                      <position x="360" y="375"/>
+                      <position x="330" y="375"/>
+                      <position x="330" y="332"/>
+                      <position x="440" y="332"/>
+                      <position x="440" y="300"/>
+                      <position x="430" y="300"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+                <variable formalParameter="IN2">
+                  <connectionPointIn>
+                    <relPosition x="0" y="50"/>
+                    <connection refLocalId="14">
+                      <position x="360" y="395"/>
+                      <position x="322" y="395"/>
+                      <position x="322" y="400"/>
+                      <position x="285" y="400"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="65" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <outVariable localId="11" executionOrderId="0" height="30" width="58" negated="false">
+              <position x="495" y="355"/>
+              <connectionPointIn>
+                <relPosition x="0" y="15"/>
+                <connection refLocalId="10" formalParameter="OUT">
+                  <position x="495" y="370"/>
+                  <position x="450" y="370"/>
+                  <position x="450" y="375"/>
+                  <position x="425" y="375"/>
+                </connection>
+              </connectionPointIn>
+              <expression>strout</expression>
+            </outVariable>
+            <inVariable localId="12" executionOrderId="0" height="30" width="125" negated="false">
+              <position x="145" y="285"/>
+              <connectionPointOut>
+                <relPosition x="125" y="15"/>
+              </connectionPointOut>
+              <expression>TargetPressure</expression>
+            </inVariable>
+            <block localId="13" typeName="INT_TO_STRING" executionOrderId="0" height="40" width="115">
+              <position x="315" y="270"/>
+              <inputVariables>
+                <variable formalParameter="IN">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="12">
+                      <position x="315" y="300"/>
+                      <position x="270" y="300"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="115" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <inVariable localId="14" executionOrderId="0" height="30" width="50" negated="false">
+              <position x="235" y="385"/>
+              <connectionPointOut>
+                <relPosition x="50" y="15"/>
+              </connectionPointOut>
+              <expression>strin</expression>
+            </inVariable>
+            <inVariable localId="15" executionOrderId="0" height="30" width="60" negated="false">
+              <position x="690" y="210"/>
+              <connectionPointOut>
+                <relPosition x="60" y="15"/>
+              </connectionPointOut>
+              <expression>boolin</expression>
+            </inVariable>
+            <outVariable localId="16" executionOrderId="0" height="30" width="70" negated="false">
+              <position x="915" y="240"/>
+              <connectionPointIn>
+                <relPosition x="0" y="15"/>
+                <connection refLocalId="17" formalParameter="OUT">
+                  <position x="915" y="255"/>
+                  <position x="880" y="255"/>
+                </connection>
+              </connectionPointIn>
+              <expression>boolout</expression>
+            </outVariable>
+            <block localId="17" typeName="AND" executionOrderId="0" height="60" width="65">
+              <position x="815" y="225"/>
+              <inputVariables>
+                <variable formalParameter="IN1">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="15">
+                      <position x="815" y="255"/>
+                      <position x="762" y="255"/>
+                      <position x="762" y="225"/>
+                      <position x="750" y="225"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+                <variable formalParameter="IN2">
+                  <connectionPointIn>
+                    <relPosition x="0" y="50"/>
+                    <connection refLocalId="21" formalParameter="OUT">
+                      <position x="815" y="275"/>
+                      <position x="750" y="275"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="65" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <inVariable localId="18" executionOrderId="0" height="30" width="75" negated="false">
+              <position x="455" y="260"/>
+              <connectionPointOut>
+                <relPosition x="75" y="15"/>
+              </connectionPointOut>
+              <expression>Pressure</expression>
+            </inVariable>
+            <block localId="19" typeName="MOD" executionOrderId="0" height="60" width="65">
+              <position x="585" y="245"/>
+              <inputVariables>
+                <variable formalParameter="IN1">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="18">
+                      <position x="585" y="275"/>
+                      <position x="530" y="275"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+                <variable formalParameter="IN2">
+                  <connectionPointIn>
+                    <relPosition x="0" y="50"/>
+                    <connection refLocalId="20">
+                      <position x="585" y="295"/>
+                      <position x="555" y="295"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="65" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <inVariable localId="20" executionOrderId="0" height="30" width="20" negated="false">
+              <position x="535" y="280"/>
+              <connectionPointOut>
+                <relPosition x="20" y="15"/>
+              </connectionPointOut>
+              <expression>2</expression>
+            </inVariable>
+            <block localId="21" typeName="EQ" executionOrderId="0" height="60" width="65">
+              <position x="685" y="245"/>
+              <inputVariables>
+                <variable formalParameter="IN1">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="19" formalParameter="OUT">
+                      <position x="685" y="275"/>
+                      <position x="650" y="275"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+                <variable formalParameter="IN2">
+                  <connectionPointIn>
+                    <relPosition x="0" y="50"/>
+                    <connection refLocalId="22">
+                      <position x="685" y="295"/>
+                      <position x="670" y="295"/>
+                      <position x="670" y="330"/>
+                      <position x="650" y="330"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="65" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <inVariable localId="22" executionOrderId="0" height="30" width="20" negated="false">
+              <position x="630" y="315"/>
+              <connectionPointOut>
+                <relPosition x="20" y="15"/>
+              </connectionPointOut>
+              <expression>0</expression>
+            </inVariable>
+            <outVariable localId="23" executionOrderId="0" height="25" width="75" negated="false">
+              <position x="935" y="120"/>
+              <connectionPointIn>
+                <relPosition x="0" y="10"/>
+                <connection refLocalId="25" formalParameter="OUT">
+                  <position x="935" y="130"/>
+                  <position x="922" y="130"/>
+                  <position x="922" y="110"/>
+                  <position x="910" y="110"/>
+                </connection>
+              </connectionPointIn>
+              <expression>floating</expression>
+            </outVariable>
+            <inVariable localId="24" executionOrderId="0" height="30" width="60" negated="false">
+              <position x="615" y="65"/>
+              <connectionPointOut>
+                <relPosition x="60" y="15"/>
+              </connectionPointOut>
+              <expression>Sloth</expression>
+            </inVariable>
+            <block localId="25" typeName="DIV" executionOrderId="0" height="60" width="65">
+              <position x="845" y="80"/>
+              <inputVariables>
+                <variable formalParameter="IN1">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="27" formalParameter="OUT">
+                      <position x="845" y="110"/>
+                      <position x="822" y="110"/>
+                      <position x="822" y="80"/>
+                      <position x="800" y="80"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+                <variable formalParameter="IN2">
+                  <connectionPointIn>
+                    <relPosition x="0" y="50"/>
+                    <connection refLocalId="26">
+                      <position x="845" y="130"/>
+                      <position x="810" y="130"/>
+                      <position x="810" y="135"/>
+                      <position x="800" y="135"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="65" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <inVariable localId="26" executionOrderId="0" height="30" width="90" negated="false">
+              <position x="710" y="120"/>
+              <connectionPointOut>
+                <relPosition x="90" y="15"/>
+              </connectionPointOut>
+              <expression>REAL#100.0</expression>
+            </inVariable>
+            <block localId="27" typeName="INT_TO_REAL" executionOrderId="0" height="40" width="100">
+              <position x="700" y="50"/>
+              <inputVariables>
+                <variable formalParameter="IN">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="24">
+                      <position x="700" y="80"/>
+                      <position x="675" y="80"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="100" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <block localId="28" typeName="EQ" executionOrderId="0" height="60" width="65">
+              <position x="410" y="430"/>
+              <inputVariables>
+                <variable formalParameter="IN1">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="36">
+                      <position x="418" y="460"/>
+                      <position x="401" y="460"/>
+                      <position x="401" y="435"/>
+                      <position x="380" y="435"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+                <variable formalParameter="IN2">
+                  <connectionPointIn>
+                    <relPosition x="0" y="50"/>
+                    <connection refLocalId="29">
+                      <position x="410" y="480"/>
+                      <position x="367" y="480"/>
+                      <position x="367" y="475"/>
+                      <position x="325" y="475"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="65" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <inVariable localId="29" executionOrderId="0" height="30" width="20" negated="false">
+              <position x="305" y="460"/>
+              <connectionPointOut>
+                <relPosition x="20" y="15"/>
+              </connectionPointOut>
+              <expression>0</expression>
+            </inVariable>
+            <inVariable localId="32" executionOrderId="0" height="30" width="20" negated="false">
+              <position x="765" y="505"/>
+              <connectionPointOut>
+                <relPosition x="20" y="15"/>
+              </connectionPointOut>
+              <expression>0</expression>
+            </inVariable>
+            <outVariable localId="31" executionOrderId="0" height="30" width="75" negated="false">
+              <position x="925" y="460"/>
+              <connectionPointIn>
+                <relPosition x="0" y="15"/>
+                <connection refLocalId="33" formalParameter="OUT">
+                  <position x="925" y="475"/>
+                  <position x="890" y="475"/>
+                </connection>
+              </connectionPointIn>
+              <expression>Sloth</expression>
+            </outVariable>
+            <block localId="33" typeName="MUX" executionOrderId="0" height="80" width="65">
+              <position x="825" y="445"/>
+              <inputVariables>
+                <variable formalParameter="K">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="34" formalParameter="OUT">
+                      <position x="825" y="475"/>
+                      <position x="685" y="475"/>
+                      <position x="685" y="465"/>
+                      <position x="675" y="465"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+                <variable formalParameter="IN0">
+                  <connectionPointIn>
+                    <relPosition x="0" y="50"/>
+                    <connection refLocalId="30">
+                      <position x="825" y="495"/>
+                      <position x="800" y="495"/>
+                      <position x="800" y="485"/>
+                      <position x="790" y="485"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+                <variable formalParameter="IN1">
+                  <connectionPointIn>
+                    <relPosition x="0" y="70"/>
+                    <connection refLocalId="32">
+                      <position x="825" y="515"/>
+                      <position x="795" y="515"/>
+                      <position x="795" y="520"/>
+                      <position x="785" y="520"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="65" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <inVariable localId="30" executionOrderId="0" height="30" width="75" negated="false">
+              <position x="715" y="470"/>
+              <connectionPointOut>
+                <relPosition x="75" y="15"/>
+              </connectionPointOut>
+              <expression>Sloth</expression>
+            </inVariable>
+            <block localId="34" typeName="BOOL_TO_SINT" executionOrderId="0" height="40" width="110">
+              <position x="565" y="435"/>
+              <inputVariables>
+                <variable formalParameter="IN">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="28" formalParameter="OUT">
+                      <position x="565" y="465"/>
+                      <position x="520" y="465"/>
+                      <position x="520" y="460"/>
+                      <position x="475" y="460"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="110" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <connector name="Connection0" localId="35" height="25" width="125">
+              <position x="400" y="140"/>
+              <connectionPointIn>
+                <relPosition x="0" y="10"/>
+                <connection refLocalId="7" formalParameter="OUT">
+                  <position x="400" y="150"/>
+                  <position x="375" y="150"/>
+                  <position x="375" y="115"/>
+                  <position x="360" y="115"/>
+                </connection>
+              </connectionPointIn>
+            </connector>
+            <continuation name="Connection0" localId="36" height="25" width="125">
+              <position x="255" y="425"/>
+              <connectionPointOut>
+                <relPosition x="125" y="10"/>
+              </connectionPointOut>
+            </continuation>
+          </FBD>
+        </body>
+      </pou>
+    </pous>
+  </types>
+  <instances>
+    <configurations>
+      <configuration name="config">
+        <resource name="resource1">
+          <task name="task0" priority="0" interval="T#20ms">
+            <pouInstance name="instance0" typeName="MainStuff"/>
+          </task>
+        </resource>
+      </configuration>
+    </configurations>
+  </instances>
+</project>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tests/svghmi/py_ext_0@py_ext/baseconfnode.xml	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,2 @@
+<?xml version='1.0' encoding='utf-8'?>
+<BaseParams xmlns:xsd="http://www.w3.org/2001/XMLSchema" IEC_Channel="1" Name="py_ext_0"/>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tests/svghmi/py_ext_0@py_ext/pyfile.xml	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,93 @@
+<?xml version='1.0' encoding='utf-8'?>
+<PyFile xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
+  <variables>
+    <variable name="AlarmNotify" type="HMI_INT"/>
+    <variable name="SendAlarm" type="HMI_INT" onchange="TriggerAlarm"/>
+    <variable name="AlarmText" type="HMI_STRING" initial="'POS'"/>
+    <variable name="AlarmStatus" type="HMI_STRING" initial="'alarm'"/>
+  </variables>
+  <globals>
+    <xhtml:p><![CDATA[
+from twisted.web.resource import Resource
+import json, time, random, collections
+
+Alarms = []
+AlarmIndex = {}
+lastid = 0
+
+def TriggerAlarm(changed_var_name):
+    global Alarms, lastid
+    new_entry = [time.time(), PLCGlobals.AlarmText, PLCGlobals.AlarmStatus, lastid]
+    Alarms.append(new_entry)
+    AlarmIndex[lastid] = new_entry
+    lastid = lastid + 1
+    PLCGlobals.AlarmNotify = random.randint(0, 4294967296)
+
+class AlarmJsonResource(Resource):
+    def render_GET(self, request):
+        return ''
+
+    def render_POST(self, request):
+        newstr = request.content.getvalue()
+        newdata = json.loads(newstr)
+        args = newdata[u'args']
+        range_feedback = newdata[u'range']
+        slider_position = newdata[u'position']
+        visible = newdata[u'visible']
+        extra = newdata[u'extra']
+        options = newdata[u'options']
+
+        if len(options) == 2 :
+            action, alarmid = options
+            if action == "onClick[acknowledge]":
+                AlarmIndex[int(alarmid)][2] = "ack"
+
+        answer = self.renderTable(range_feedback, slider_position, visible, extra)
+        janswer = json.dumps(answer)
+        return janswer
+
+    def renderTable(self, old_range, old_position, visible, extra):
+        if len(extra) > 0 and extra[0] != "":
+            fAlarms = [alrm for alrm in Alarms if alrm[1].find(extra[0])!=-1]
+        else:
+            fAlarms = Alarms
+        new_range = len(fAlarms)
+        delta = new_range - visible
+        new_position = 0 if delta <= 0 else delta if old_position > delta else old_position
+        new_visible = new_range if delta <= 0 else visible
+        
+        visible_alarms = []
+        for ts, text, status, alarmid in fAlarms[new_position:new_position + new_visible]:
+            visible_alarms.append({
+                "time": time.ctime(ts),
+                "text": text, # TODO translate text
+                "status": status,
+                "alarmid": alarmid
+            })
+
+        return new_range, new_position, visible_alarms
+
+
+]]></xhtml:p>
+  </globals>
+  <init>
+    <xhtml:p><![CDATA[
+]]></xhtml:p>
+  </init>
+  <cleanup>
+    <xhtml:p><![CDATA[
+]]></xhtml:p>
+  </cleanup>
+  <start>
+    <xhtml:p><![CDATA[
+
+svghmi_root.putChild("alarms", AlarmJsonResource())
+
+
+]]></xhtml:p>
+  </start>
+  <stop>
+    <xhtml:p><![CDATA[
+]]></xhtml:p>
+  </stop>
+</PyFile>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tests/svghmi/svghmi_0@svghmi/baseconfnode.xml	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,2 @@
+<?xml version='1.0' encoding='utf-8'?>
+<BaseParams xmlns:xsd="http://www.w3.org/2001/XMLSchema" IEC_Channel="0" Name="svghmi_0"/>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tests/svghmi/svghmi_0@svghmi/confnode.xml	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,2 @@
+<?xml version='1.0' encoding='utf-8'?>
+<SVGHMI xmlns:xsd="http://www.w3.org/2001/XMLSchema" OnWatchdog="echo Watchdog for {name} !" OnStart="chromium http://127.0.0.1:{port}/{name}" OnStop="echo Closing {name}" WatchdogInitial="10" WatchdogInterval="5"/>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tests/svghmi/svghmi_0@svghmi/svghmi.svg	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,6551 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1280"
+   height="720"
+   viewBox="0 0 1280 720"
+   version="1.1"
+   id="hmi0"
+   sodipodi:docname="svghmi.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <metadata
+     id="metadata4542">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs2">
+    <marker
+       inkscape:isstock="true"
+       style="overflow:visible"
+       id="marker1971"
+       refX="0"
+       refY="0"
+       orient="auto"
+       inkscape:stockid="Arrow2Lend">
+      <path
+         transform="matrix(-1.1,0,0,-1.1,-1.1,0)"
+         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+         style="fill:#ff3000;fill-opacity:1;fill-rule:evenodd;stroke:#ff3000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
+         id="path1969"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:isstock="true"
+       style="overflow:visible"
+       id="marker1536"
+       refX="0"
+       refY="0"
+       orient="auto"
+       inkscape:stockid="Arrow2Lend">
+      <path
+         transform="matrix(-1.1,0,0,-1.1,-1.1,0)"
+         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+         style="fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:#ff0000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
+         id="path1534"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:isstock="true"
+       style="overflow:visible"
+       id="marker1656"
+       refX="0"
+       refY="0"
+       orient="auto"
+       inkscape:stockid="Arrow2Lend">
+      <path
+         transform="matrix(-1.1,0,0,-1.1,-1.1,0)"
+         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+         style="fill:#ff3000;fill-opacity:1;fill-rule:evenodd;stroke:#ff3000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
+         id="path1654"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="1370 : 938 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="2698 : 524 : 1"
+       inkscape:persp3d-origin="2010 : 818 : 1"
+       id="perspective1372" />
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="1340 : 880 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="2716 : 908 : 1"
+       inkscape:persp3d-origin="1980 : 760 : 1"
+       id="perspective1370" />
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="30 : 418 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="1358 : 3.9999991 : 1"
+       inkscape:persp3d-origin="670 : 298 : 1"
+       id="perspective503" />
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 360 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="1376 : 388 : 1"
+       inkscape:persp3d-origin="640 : 240 : 1"
+       id="perspective445" />
+    <inkscape:tag
+       id="Set 1"
+       inkscape:label="HMI:AccessList@Admin"
+       inkscape:expanded="true">
+      <inkscape:tagref
+         xlink:href="#text995"
+         id="tagref192" />
+      <inkscape:tagref
+         xlink:href="#g991"
+         id="tagref194" />
+    </inkscape:tag>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient962">
+      <stop
+         style="stop-color:#ff3000;stop-opacity:1;"
+         offset="0"
+         id="stop958" />
+      <stop
+         style="stop-color:#0022ff;stop-opacity:1"
+         offset="1"
+         id="stop960" />
+    </linearGradient>
+    <marker
+       inkscape:isstock="true"
+       style="overflow:visible"
+       id="marker926"
+       refX="0"
+       refY="0"
+       orient="auto"
+       inkscape:stockid="Arrow2Lend">
+      <path
+         transform="matrix(-1.1,0,0,-1.1,-1.1,0)"
+         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+         style="fill:#ff3000;fill-opacity:1;fill-rule:evenodd;stroke:#ff3000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
+         id="path924"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <inkscape:tag
+       id="Set 3"
+       inkscape:expanded="true"
+       inkscape:label="HMI:Translate">
+      <inkscape:tagref
+         xlink:href="#text831"
+         id="tagref1085" />
+      <inkscape:tagref
+         xlink:href="#text827"
+         id="tagref1087" />
+      <inkscape:tagref
+         xlink:href="#text4497"
+         id="tagref1089" />
+      <inkscape:tagref
+         xlink:href="#home_jmp"
+         id="tagref1091" />
+      <inkscape:tagref
+         xlink:href="#setting_jmp"
+         id="tagref1093" />
+    </inkscape:tag>
+    <marker
+       inkscape:stockid="Arrow2Lend"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow2Lend"
+       style="overflow:visible"
+       inkscape:isstock="true"
+       inkscape:collect="always">
+      <path
+         inkscape:connector-curvature="0"
+         id="path895"
+         style="fill:#ff3000;fill-opacity:1;fill-rule:evenodd;stroke:#ff3000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
+         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+         transform="matrix(-1.1,0,0,-1.1,-1.1,0)" />
+    </marker>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient962"
+       id="linearGradient964"
+       x1="113.38908"
+       y1="-62.210247"
+       x2="113.38908"
+       y2="4.0725975"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.5,0,0,0.5,73.144796,-1.4471993)" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:document-units="px"
+     inkscape:current-layer="hmi0"
+     showgrid="false"
+     units="px"
+     inkscape:zoom="0.54565796"
+     inkscape:cx="-623.8758"
+     inkscape:cy="172.76281"
+     inkscape:window-width="1600"
+     inkscape:window-height="836"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:snap-global="false" />
+  <use
+     x="0"
+     y="0"
+     xlink:href="#g7994"
+     id="use7996"
+     transform="translate(1480,800)"
+     width="100%"
+     height="100%"
+     inkscape:label="HMI:Page:RelativePageTest@/PUMP0" />
+  <rect
+     sodipodi:insensitive="true"
+     inkscape:label="HMI:Page:Conf"
+     y="780"
+     x="0"
+     height="720"
+     width="1280"
+     id="rect1016"
+     style="color:#000000;fill:#000000" />
+  <g
+     id="g1082"
+     inkscape:label="HMI:Jump:Home"
+     transform="translate(-940,-558)">
+    <g
+       id="g1152"
+       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="rect1022"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cssssccc" />
+    </g>
+    <g
+       id="g1149"
+       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="home_jmp"
+         inkscape:label="home_jmp"><tspan
+           sodipodi:role="line"
+           id="tspan1028"
+           x="1090.7626"
+           y="1436.9814"
+           style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px">Home</tspan></text>
+    </g>
+  </g>
+  <rect
+     style="color:#000000;fill:#4d4d4d"
+     id="page0"
+     width="1280"
+     height="720"
+     x="0"
+     y="0"
+     inkscape:label="HMI:Page:Home" />
+  <g
+     id="g1077"
+     inkscape:label="HMI:Jump:Conf"
+     transform="matrix(0.57180538,0,0,0.57180538,-373.64055,248.51305)">
+    <g
+       id="g1159"
+       inkscape:label="button">
+      <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;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"
+         width="245.44583"
+         height="95.723877"
+         x="971.96545"
+         y="594.82263"
+         ry="35.579063"
+         inkscape:label="button" />
+    </g>
+    <g
+       id="g1156"
+       inkscape:label="text">
+      <text
+         inkscape:label="setting_jmp"
+         id="setting_jmp"
+         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"
+           sodipodi:role="line">Settings</tspan></text>
+    </g>
+  </g>
+  <g
+     id="g84"
+     inkscape:label="HMI:Input@/TARGETPRESSURE"
+     transform="matrix(0.35865594,0,0,0.35865594,22.072155,63.074421)">
+    <text
+       inkscape:label="value"
+       id="text5151"
+       y="218.24219"
+       x="136.32812"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         style="stroke-width:1px"
+         y="218.24219"
+         x="136.32812"
+         id="tspan5149"
+         sodipodi:role="line">8888</tspan></text>
+    <path
+       transform="scale(1,-1)"
+       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:#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="path89"
+       sodipodi:sides="3"
+       sodipodi:cx="596.74072"
+       sodipodi:cy="-216.2599"
+       sodipodi:r1="59.825443"
+       sodipodi:r2="29.912722"
+       sodipodi:arg1="0.52359878"
+       sodipodi:arg2="1.5707963"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 648.55108,-186.34718 -103.62071,0 51.81035,-89.73817 z"
+       inkscape:transform-center-y="14.956363"
+       inkscape:label="-100" />
+    <path
+       inkscape:label="-10"
+       inkscape:transform-center-y="7.4781812"
+       d="m 622.6459,-170.03172 -51.81035,0 25.90517,-44.86908 z"
+       inkscape:randomized="0"
+       inkscape:rounded="0"
+       inkscape:flatsided="true"
+       sodipodi:arg2="1.5707963"
+       sodipodi:arg1="0.52359878"
+       sodipodi:r2="14.956361"
+       sodipodi:r1="29.912722"
+       sodipodi:cy="-184.98808"
+       sodipodi:cx="596.74072"
+       sodipodi:sides="3"
+       id="path88"
+       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"
+       sodipodi:type="star"
+       transform="scale(1,-1)" />
+    <rect
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;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="rect85"
+       width="407.7037"
+       height="128"
+       x="139.85185"
+       y="95.40741"
+       onclick=""
+       inkscape:label="edit" />
+    <path
+       inkscape:label="+100"
+       inkscape:transform-center-y="-14.956361"
+       d="m 648.55108,135.08534 -103.62071,0 51.81035,-89.738161 z"
+       inkscape:randomized="0"
+       inkscape:rounded="0"
+       inkscape:flatsided="true"
+       sodipodi:arg2="1.5707963"
+       sodipodi:arg1="0.52359878"
+       sodipodi:r2="29.912722"
+       sodipodi:r1="59.825443"
+       sodipodi:cy="105.17262"
+       sodipodi:cx="596.74072"
+       sodipodi:sides="3"
+       id="path87"
+       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"
+       sodipodi:type="star" />
+    <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:#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="path86"
+       sodipodi:sides="3"
+       sodipodi:cx="596.74072"
+       sodipodi:cy="136.44444"
+       sodipodi:r1="29.912722"
+       sodipodi:r2="14.956361"
+       sodipodi:arg1="0.52359878"
+       sodipodi:arg2="1.5707963"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 622.6459,151.4008 -51.81035,0 25.90517,-44.86908 z"
+       inkscape:transform-center-y="-7.4781804"
+       inkscape:label="+10" />
+    <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:#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="path91"
+       sodipodi:sides="4"
+       sodipodi:cx="80.740723"
+       sodipodi:cy="165.17262"
+       sodipodi:r1="57.015106"
+       sodipodi:r2="29.912722"
+       sodipodi:arg1="0.77793027"
+       sodipodi:arg2="1.5633284"
+       inkscape:flatsided="true"
+       inkscape:rounded="-0.65084865"
+       inkscape:randomized="0"
+       d="M 121.35644,205.1862 C 158.18649,167.80191 3.342862,168.95829 40.72715,205.78834 78.111437,242.61839 76.95506,87.774762 40.125008,125.15905 3.2949549,162.54334 158.13858,161.38696 120.7543,124.55691 83.370008,87.726855 84.526385,242.57048 121.35644,205.1862 Z"
+       inkscape:transform-center-y="-14.956361"
+       inkscape:label="=0" />
+  </g>
+  <text
+     inkscape:label="HMI:Display@/PUMP0/PRESSURE"
+     id="text823"
+     y="141.34827"
+     x="293.33374"
+     style="font-style:normal;font-weight:normal;font-size:57.38494873px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.35865593px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"><tspan
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.35865593px"
+       y="141.34827"
+       x="293.33374"
+       id="tspan821"
+       sodipodi:role="line">8888</tspan></text>
+  <g
+     id="g4523"
+     transform="matrix(2.1611542,0,0,2.1611542,142.76714,468.92423)"
+     inkscape:label="HMI:Meter@/PUMP0/SLOTH">
+    <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;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#3ee800;stroke-width:26.45833397;stroke-miterlimit:4;stroke-dasharray:2.64583333, 2.64583333;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       id="path4499"
+       sodipodi:type="arc"
+       sodipodi:cx="128.02208"
+       sodipodi:cy="2.2017097"
+       sodipodi:rx="64.411957"
+       sodipodi:ry="64.411957"
+       sodipodi:start="3.1415927"
+       sodipodi:end="4.712389"
+       d="M 63.610123,2.2017068 A 64.411957,64.411957 0 0 1 128.02208,-62.210247"
+       sodipodi:open="true"
+       inkscape:label="range" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#ff3000;stroke-width:2.96333337;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:0, 32.59666667;stroke-dashoffset:29.63333321;stroke-opacity:1;marker-end:url(#Arrow2Lend)"
+       d="M 130.96206,4.0725977 79.111776,-41.363223"
+       id="path4501"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc"
+       inkscape:label="needle" />
+    <text
+       inkscape:label="min"
+       id="text4505"
+       y="4.9187088"
+       x="49.132977"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:125%;font-family:sans-serif;text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         style="text-align:end;text-anchor:end;fill:#ff6600;stroke-width:0.26458332px"
+         y="4.9187088"
+         x="49.132977"
+         id="tspan4503"
+         sodipodi:role="line">0</tspan></text>
+    <text
+       inkscape:label="max"
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="127.48073"
+       y="-78.144218"
+       id="text4509"><tspan
+         sodipodi:role="line"
+         id="tspan4507"
+         x="127.48073"
+         y="-78.144218"
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.26458332px">10000</tspan></text>
+    <text
+       inkscape:label="value"
+       id="text4517"
+       y="-6.1937833"
+       x="113.53007"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         id="tspan4515"
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.26458332px"
+         y="-6.1937833"
+         x="113.53007"
+         sodipodi:role="line">000</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:7.5467205px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="124.77896"
+       y="1.1408259"
+       id="text4521"
+       inkscape:label="unit"><tspan
+         sodipodi:role="line"
+         x="124.77896"
+         y="1.1408259"
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.26458332px"
+         id="tspan4519">bar</tspan></text>
+  </g>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:14.34623718px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.35865593px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="114.11434"
+     y="90.742165"
+     id="text827"
+     inkscape:label="setpoint_label"><tspan
+       sodipodi:role="line"
+       id="tspan825"
+       x="114.11434"
+       y="90.742165"
+       style="stroke-width:0.35865593px">SetPoint</tspan></text>
+  <text
+     id="text831"
+     y="90.742165"
+     x="344.50876"
+     style="font-style:normal;font-weight:normal;font-size:14.34623718px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#008000;fill-opacity:1;stroke:none;stroke-width:0.35865593px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"
+     inkscape:label="actual_label"><tspan
+       y="90.742165"
+       x="344.50876"
+       id="tspan829"
+       sodipodi:role="line"
+       style="stroke-width:0.35865593px">Actual</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:22.87221527px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.57180536px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="206.73413"
+     y="336.90073"
+     id="text4497"
+     inkscape:label="pressure_label"><tspan
+       sodipodi:role="line"
+       id="tspan4495"
+       x="206.73413"
+       y="336.90073"
+       style="fill:#ff6600;stroke-width:0.57180536px">Pressure</tspan></text>
+  <g
+     id="layer4"
+     inkscape:label="HMI:Lang:cn"
+     style="display:none"
+     inkscape:groupmode="layer">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:80px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:vertical-lr;text-anchor:middle;display:inline;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="83.669571"
+       y="136.78285"
+       id="text948-6"
+       inkscape:label="setpoint_label"><tspan
+         sodipodi:role="line"
+         id="tspan946-2"
+         x="136.78285"
+         y="83.669571"
+         style="stroke-width:1px">设定值</tspan></text>
+    <text
+       id="text952-9"
+       y="137.16286"
+       x="703.711"
+       style="font-style:normal;font-weight:normal;font-size:80px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;writing-mode:vertical-lr;display:inline;fill:#008000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"
+       inkscape:label="actual_label"><tspan
+         y="703.711"
+         x="137.16286"
+         id="tspan950-1"
+         sodipodi:role="line"
+         style="text-align:center;writing-mode:vertical-lr;text-anchor:middle;stroke-width:1px">当前值</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:80px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;writing-mode:vertical-lr;display:inline;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="480.61847"
+       y="278.37503"
+       id="text956-2"
+       inkscape:label="pressure_label"><tspan
+         sodipodi:role="line"
+         id="tspan954-7"
+         x="278.37503"
+         y="480.61847"
+         style="writing-mode:vertical-lr;fill:#ff6600;stroke-width:0.99999994px">压力</tspan></text>
+    <text
+       inkscape:label="setting_jmp"
+       id="text1097"
+       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="tspan1095"
+         sodipodi:role="line">设置</tspan></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="text1101"
+       inkscape:label="home_jmp"><tspan
+         sodipodi:role="line"
+         x="1090.7626"
+         y="1436.9814"
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px"
+         id="tspan1107">家</tspan></text>
+  </g>
+  <g
+     id="layer2"
+     inkscape:label="HMI:Lang:fr"
+     style="display:none"
+     inkscape:groupmode="layer">
+    <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;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="340.9082"
+       y="77.142853"
+       id="text948"
+       inkscape:label="setpoint_label"><tspan
+         sodipodi:role="line"
+         id="tspan946"
+         x="340.9082"
+         y="77.142853">Valeur de consigne</tspan></text>
+    <text
+       id="text952"
+       y="77.142853"
+       x="960.9082"
+       style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#008000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"
+       inkscape:label="actual_label"><tspan
+         y="77.142853"
+         x="960.9082"
+         id="tspan950"
+         sodipodi:role="line"
+         style="text-align:center;text-anchor:middle">Valeur courante</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="420.37848"
+       y="399.41504"
+       id="text956"
+       inkscape:label="pressure_label"><tspan
+         sodipodi:role="line"
+         id="tspan954"
+         x="420.37848"
+         y="399.41504"
+         style="fill:#ff6600;stroke-width:0.99999994px">Pression</tspan></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="656.98151"
+       id="setting_jmp-0"
+       inkscape:label="setting_jmp"><tspan
+         sodipodi:role="line"
+         id="tspan1024-9"
+         x="1090.7626"
+         y="656.98151"
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px">Settings</tspan></text>
+    <text
+       inkscape:label="home_jmp"
+       id="home_jmp-3"
+       y="1436.9814"
+       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="1436.9814"
+         x="1090.7626"
+         id="tspan1028-6"
+         sodipodi:role="line">Home</tspan></text>
+  </g>
+  <g
+     id="layer3"
+     inkscape:label="HMI:Lang:si"
+     style="display:none"
+     inkscape:groupmode="layer">
+    <text
+       id="text930"
+       y="77.142853"
+       x="338.67188"
+       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;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"
+       inkscape:label="setpoint_label"><tspan
+         y="77.142853"
+         x="338.67188"
+         id="tspan928"
+         sodipodi:role="line">nastavljena vrednost</tspan></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;fill:#008000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="959.38477"
+       y="77.142853"
+       id="text934"
+       inkscape:label="actual_label"><tspan
+         sodipodi:role="line"
+         id="tspan932"
+         x="959.38477"
+         y="77.142853">dejanska vrednost</tspan></text>
+    <text
+       id="text938"
+       y="399.41504"
+       x="420.37848"
+       style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"
+       inkscape:label="pressure_label"><tspan
+         style="fill:#ff6600;stroke-width:0.99999994px"
+         y="399.41504"
+         x="420.37848"
+         id="tspan936"
+         sodipodi:role="line">pritisk</tspan></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="656.98151"
+       id="setting_jmp-06"
+       inkscape:label="setting_jmp"><tspan
+         sodipodi:role="line"
+         id="tspan1024-2"
+         x="1090.7626"
+         y="656.98151"
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px">Settings</tspan></text>
+    <text
+       inkscape:label="home_jmp"
+       id="home_jmp-6"
+       y="1436.9814"
+       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="1436.9814"
+         x="1090.7626"
+         id="tspan1028-1"
+         sodipodi:role="line">Home</tspan></text>
+  </g>
+  <g
+     inkscape:label="HMI:Meter@/PUMP0/SLOTH"
+     transform="matrix(7.5590552,0,0,7.5590552,-244.3956,1321.2434)"
+     id="g110">
+    <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;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;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 113.38908,2.2017068 V -62.210247"
+       id="path90"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc"
+       inkscape:label="range" />
+    <path
+       inkscape:label="needle"
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path92"
+       d="M 113.38908,4.0725977 V -62.210247"
+       style="fill:none;fill-rule:evenodd;stroke:url(#linearGradient964);stroke-width:13.22916698;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:29.63333321;stroke-opacity:1" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:5.29166651px;line-height:125%;font-family:sans-serif;text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="115.07632"
+       y="9.3424692"
+       id="text96"
+       inkscape:label="min"><tspan
+         sodipodi:role="line"
+         id="tspan94"
+         x="115.07632"
+         y="9.3424692"
+         style="text-align:end;text-anchor:end;fill:#ff6600;stroke-width:0.26458332px">0</tspan></text>
+    <text
+       id="text100"
+       y="-64.195457"
+       x="113.27539"
+       style="font-style:normal;font-weight:normal;font-size:5.29166651px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"
+       inkscape:label="max"><tspan
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.26458332px"
+         y="-64.195457"
+         x="113.27539"
+         id="tspan98"
+         sodipodi:role="line">10000</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="-20.624428"
+       y="-109.67243"
+       id="text104"
+       inkscape:label="value"
+       transform="rotate(90)"><tspan
+         sodipodi:role="line"
+         x="-20.624428"
+         y="-109.67243"
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.26458332px"
+         id="tspan102">000</tspan></text>
+    <text
+       inkscape:label="unit"
+       id="text108"
+       y="-9.4425077"
+       x="140.65398"
+       style="font-style:normal;font-weight:normal;font-size:7.5467205px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         id="tspan106"
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.26458332px"
+         y="-9.4425077"
+         x="140.65398"
+         sodipodi:role="line">€£$¥</tspan></text>
+  </g>
+  <g
+     inkscape:label="HMI:Input@/TARGETPRESSURE"
+     id="g991"
+     transform="matrix(0.5,0,0,0.5,230.11026,885.7162)"
+     style="stroke-width:2">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="136.32812"
+       y="218.24219"
+       id="text977"
+       inkscape:label="value"><tspan
+         sodipodi:role="line"
+         id="tspan975"
+         x="136.32812"
+         y="218.24219"
+         style="stroke-width:2px">8888</tspan></text>
+    <rect
+       inkscape:label="edit"
+       onclick=""
+       y="95.40741"
+       x="139.85185"
+       height="128"
+       width="407.7037"
+       id="rect983"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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
+       id="g1086"
+       inkscape:label="=0"
+       transform="translate(-416.52022,170.47452)"
+       style="stroke-width:2">
+      <path
+         inkscape:connector-curvature="0"
+         id="path989"
+         d="m 797.19546,145.18619 -80.62929,0.60214 -0.60215,-80.629288 80.6293,-0.60214 z"
+         inkscape:transform-center-y="-14.956361"
+         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:none;stroke-width:10;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" />
+      <text
+         id="text1048"
+         y="111.05016"
+         x="733.58197"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:1px"
+           y="111.05016"
+           x="733.58197"
+           id="tspan1046"
+           sodipodi:role="line">→0←</tspan></text>
+    </g>
+    <g
+       id="g1091"
+       inkscape:label="-10"
+       transform="translate(-416.52022,170.47452)"
+       style="stroke-width:2">
+      <path
+         inkscape:transform-center-x="14.956371"
+         inkscape:transform-center-y="-3.6154501e-05"
+         d="m 622.6459,-170.03172 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="14.956361"
+         sodipodi:r1="29.912722"
+         sodipodi:cy="-184.98808"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path981"
+         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:none;stroke-width:10;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"
+         sodipodi:type="star"
+         transform="matrix(0,-2.0000001,1.9999999,0,1034.195,1298.6541)" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="633.09552"
+         y="111.05016"
+         id="text1059"><tspan
+           sodipodi:role="line"
+           id="tspan1057"
+           x="633.09552"
+           y="111.05016"
+           style="stroke-width:1px">-10</tspan></text>
+    </g>
+    <g
+       id="g1096"
+       inkscape:label="-100"
+       transform="translate(-416.52022,170.47452)"
+       style="stroke-width:2">
+      <path
+         inkscape:transform-center-x="14.956364"
+         transform="rotate(-90,746.45698,-44.543641)"
+         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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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="path979"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="-216.2599"
+         sodipodi:r1="59.825443"
+         sodipodi:r2="29.912722"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 648.55108,-186.34718 -103.62071,0 51.81035,-89.73817 z"
+         inkscape:transform-center-y="-5.9989963e-06" />
+      <text
+         id="text1063"
+         y="111.05016"
+         x="537.25018"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:1px"
+           y="111.05016"
+           x="537.25018"
+           id="tspan1061"
+           sodipodi:role="line">-100</tspan></text>
+    </g>
+    <g
+       id="g1076"
+       inkscape:label="+100"
+       transform="translate(-416.52022,170.47452)"
+       style="stroke-width:2">
+      <path
+         inkscape:transform-center-x="-14.956365"
+         transform="matrix(0,-1,-1,0,1043.9134,701.91334)"
+         inkscape:transform-center-y="-5.5023185e-06"
+         d="m 648.55108,135.08534 -103.62071,0 51.81035,-89.738161 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="29.912722"
+         sodipodi:r1="59.825443"
+         sodipodi:cy="105.17262"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path985"
+         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:none;stroke-width:10;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"
+         sodipodi:type="star" />
+      <text
+         id="text1067"
+         y="111.05016"
+         x="925.82605"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:1px"
+           y="111.05016"
+           x="925.82605"
+           id="tspan1065"
+           sodipodi:role="line">+100</tspan></text>
+    </g>
+    <g
+       id="g1081"
+       inkscape:label="+10"
+       transform="translate(-416.52022,170.47452)"
+       style="stroke-width:2">
+      <path
+         inkscape:transform-center-x="-14.956349"
+         transform="matrix(0,-2.0000001,-1.9999999,0,1122.1514,1298.6541)"
+         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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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="path987"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="136.44444"
+         sodipodi:r1="29.912722"
+         sodipodi:r2="14.956361"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 622.6459,151.4008 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:transform-center-y="-3.3040441e-05" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="842.71497"
+         y="111.05016"
+         id="text1071"><tspan
+           sodipodi:role="line"
+           id="tspan1069"
+           x="842.71497"
+           y="111.05016"
+           style="stroke-width:1px">+10</tspan></text>
+    </g>
+  </g>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#82ff77;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+     x="736.32812"
+     y="1478.2422"
+     id="text995"
+     inkscape:label="HMI:Display@/PUMP0/PRESSURE"><tspan
+       sodipodi:role="line"
+       id="tspan993"
+       x="736.32812"
+       y="1478.2422"
+       style="fill:#82ff77;fill-opacity:1;stroke-width:1px;">8888</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:45.74443054px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.28590268px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="28.181862"
+     y="365.32291"
+     id="text134"
+     inkscape:label="HMI:Display@/PUMP0/STROUT"><tspan
+       sodipodi:role="line"
+       id="tspan132"
+       x="28.181862"
+       y="365.32291"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.28590268px">8888</tspan></text>
+  <text
+     inkscape:label="HMI:Display@/PUMP0/BOOLOUT"
+     id="text138"
+     y="422.50345"
+     x="28.181862"
+     style="font-style:normal;font-weight:normal;font-size:45.74443054px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.28590268px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"><tspan
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.28590268px"
+       y="422.50345"
+       x="28.181862"
+       id="tspan136"
+       sodipodi:role="line">8888</tspan></text>
+  <g
+     transform="matrix(0.28590269,0,0,0.28590269,0.70444171,226.1427)"
+     id="g208-1"
+     inkscape:label="HMI:Input@/PUMP0/STRIN"
+     style="stroke-width:2">
+    <text
+       inkscape:label="value"
+       id="text164"
+       y="218.24219"
+       x="136.32812"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         style="stroke-width:2px"
+         y="218.24219"
+         x="136.32812"
+         id="tspan162"
+         sodipodi:role="line">8888</tspan></text>
+    <rect
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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="rect166"
+       width="407.7037"
+       height="128"
+       x="139.85185"
+       y="95.40741"
+       onclick=""
+       inkscape:label="edit" />
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="+&quot;dhu&quot;"
+       id="g174"
+       style="stroke-width:2">
+      <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:none;stroke-width:10;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"
+         inkscape:transform-center-y="-14.956361"
+         d="m 797.19546,145.18619 -80.62929,0.60214 -0.60215,-80.629288 80.6293,-0.60214 z"
+         id="path168"
+         inkscape:connector-curvature="0" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="733.58197"
+         y="111.05016"
+         id="text172"><tspan
+           sodipodi:role="line"
+           id="tspan170"
+           x="733.58197"
+           y="111.05016"
+           style="stroke-width:1px">dhu</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;plop&quot;"
+       id="g182"
+       style="stroke-width:2">
+      <path
+         transform="matrix(0,-2.0000001,1.9999999,0,1034.195,1298.6541)"
+         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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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="path176"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="-184.98808"
+         sodipodi:r1="29.912722"
+         sodipodi:r2="14.956361"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 622.6459,-170.03172 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:transform-center-y="-3.6154501e-05"
+         inkscape:transform-center-x="14.956371" />
+      <text
+         id="text180"
+         y="111.05016"
+         x="633.09552"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:1px"
+           y="111.05016"
+           x="633.09552"
+           id="tspan178"
+           sodipodi:role="line">plop</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;mhoo&quot;"
+       id="g190"
+       style="stroke-width:2">
+      <path
+         inkscape:transform-center-y="-5.9989963e-06"
+         d="m 648.55108,-186.34718 -103.62071,0 51.81035,-89.73817 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="29.912722"
+         sodipodi:r1="59.825443"
+         sodipodi:cy="-216.2599"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path184"
+         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:none;stroke-width:10;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"
+         sodipodi:type="star"
+         transform="rotate(-90,746.45698,-44.543641)"
+         inkscape:transform-center-x="14.956364" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="537.25018"
+         y="111.05016"
+         id="text188"><tspan
+           sodipodi:role="line"
+           id="tspan186"
+           x="537.25018"
+           y="111.05016"
+           style="stroke-width:1px">mhoo</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;yodl&quot;"
+       id="g198"
+       style="stroke-width:2">
+      <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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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="path192"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="105.17262"
+         sodipodi:r1="59.825443"
+         sodipodi:r2="29.912722"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 648.55108,135.08534 -103.62071,0 51.81035,-89.738161 z"
+         inkscape:transform-center-y="-5.5023185e-06"
+         transform="matrix(0,-1,-1,0,1043.9134,701.91334)"
+         inkscape:transform-center-x="-14.956365" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="925.82605"
+         y="111.05016"
+         id="text196"><tspan
+           sodipodi:role="line"
+           id="tspan194"
+           x="925.82605"
+           y="111.05016"
+           style="stroke-width:1px">yodl</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;mhe&quot;"
+       id="g206-1"
+       style="stroke-width:2">
+      <path
+         inkscape:transform-center-y="-3.3040441e-05"
+         d="m 622.6459,151.4008 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="14.956361"
+         sodipodi:r1="29.912722"
+         sodipodi:cy="136.44444"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path200"
+         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:none;stroke-width:10;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"
+         sodipodi:type="star"
+         transform="matrix(0,-2.0000001,-1.9999999,0,1122.1514,1298.6541)"
+         inkscape:transform-center-x="-14.956349" />
+      <text
+         id="text204"
+         y="111.05016"
+         x="842.71497"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:1px"
+           y="111.05016"
+           x="842.71497"
+           id="tspan202"
+           sodipodi:role="line">mhe</tspan></text>
+    </g>
+  </g>
+  <g
+     inkscape:label="HMI:Keypad:HMI_INT:HMI_REAL"
+     id="g2432"
+     style="fill-rule:evenodd;stroke-width:0.47631353"
+     transform="matrix(3.3549332,0,0,3.14525,-181.87457,2336.0198)">
+    <path
+       sodipodi:nodetypes="ccccc"
+       inkscape:label="Background"
+       inkscape:connector-curvature="0"
+       id="path2136"
+       d="M 54.211099,1.2654702 H 435.73881 V 230.18209 H 54.211099 Z"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.6;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.16776976;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" />
+    <rect
+       ry="3.8152773"
+       rx="3.8152773"
+       y="15.77106"
+       x="64.024963"
+       height="30.150299"
+       width="361.89996"
+       id="rect2426"
+       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:#fffff5;fill-opacity:1;fill-rule:nonzero;stroke:#202326;stroke-width:0;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"
+       inkscape:label="Field" />
+    <text
+       id="text2430"
+       y="37.408375"
+       x="72.50132"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:19.0763855px;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:0.47690967px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"
+       inkscape:label="Value"><tspan
+         style="text-align:start;text-anchor:start;stroke-width:0.47690967px"
+         y="37.408375"
+         x="72.50132"
+         id="tspan2428"
+         sodipodi:role="line">number</tspan></text>
+    <g
+       style="fill-rule:evenodd;stroke-width:0.13585199"
+       inkscape:label="Enter"
+       id="g4947"
+       transform="matrix(1.6700128,0,0,1.6700128,-826.83854,-145.60855)">
+      <path
+         style="opacity:1;vector-effect:none;fill:#4f4c4d;fill-opacity:1;stroke:none;stroke-width:0.10074362;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="path193"
+         d="m 750,175 c 0,-2 -1,-3 -3,-3 h -20 c -1,0 -3,1 -3,3 v 43 c 0,1 2,2 3,2 h 20 c 2,0 3,-1 3,-2 z"
+         inkscape:connector-curvature="0" />
+      <path
+         style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;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:evenodd;stroke:none;stroke-width:1.99999988;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         d="m -1244.2949,1166.5938 v 15.791 h -38.6875 v -2.9981 l -6.9199,4 6.9199,4 v -2.998 h 40.6836 v -17.7949 z"
+         transform="matrix(0.28557246,0,0,0.28557246,1098.7155,-140.51013)"
+         id="path6545-4"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       style="fill-rule:evenodd;stroke-width:0.13585199"
+       inkscape:label="Keys"
+       id="g4993"
+       transform="matrix(1.6700128,0,0,1.6700128,-826.83854,-145.60855)">
+      <g
+         style="stroke-width:0.13585199"
+         inkscape:label="7"
+         id="g4892">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 638,120 h 20 c 2,0 3,2 3,3 v 18 c 0,2 -1,3 -3,3 h -20 c -1,0 -3,-1 -3,-3 v -18 c 0,-1 2,-3 3,-3 z"
+           id="path163"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.10074359;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;stroke-width:0.10514989"
+           id="text331"
+           y="129.38269"
+           x="636.4165"
+           transform="scale(1.0007154,0.99928514)">7</text>
+      </g>
+      <g
+         style="stroke-width:0.13585199"
+         inkscape:label="4"
+         id="g4907">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 638,146 h 20 c 2,0 3,1 3,3 v 18 c 0,2 -1,3 -3,3 h -20 c -1,0 -3,-1 -3,-3 v -18 c 0,-2 2,-3 3,-3 z"
+           id="path169"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.10074359;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;stroke-width:0.10514989"
+           id="text335"
+           y="154.10822"
+           x="636.4165"
+           transform="scale(1.0007154,0.99928514)">4</text>
+      </g>
+      <g
+         style="stroke-width:0.13585199"
+         inkscape:label="1"
+         id="g4922">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 638,172 h 20 c 2,0 3,1 3,3 v 17 c 0,1 -1,3 -3,3 h -20 c -1,0 -3,-2 -3,-3 v -17 c 0,-2 2,-3 3,-3 z"
+           id="path175"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.10074359;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;stroke-width:0.10514989"
+           id="text339"
+           y="179.82285"
+           x="636.4165"
+           transform="scale(1.0007154,0.99928514)">1</text>
+      </g>
+      <g
+         style="stroke-width:0.13585199"
+         inkscape:label="8"
+         id="g4897">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 668,120 h 19 c 2,0 3,2 3,3 v 18 c 0,2 -1,3 -3,3 h -19 c -1,0 -3,-1 -3,-3 v -18 c 0,-1 2,-3 3,-3 z"
+           id="path165"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.10074359;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;stroke-width:0.10514989"
+           id="text347"
+           y="129.38269"
+           x="667.07562"
+           transform="scale(1.0007154,0.99928514)">8</text>
+      </g>
+      <g
+         style="stroke-width:0.13585199"
+         inkscape:label="5"
+         id="g4912">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 668,146 h 19 c 2,0 3,1 3,3 v 18 c 0,2 -1,3 -3,3 h -19 c -1,0 -3,-1 -3,-3 v -18 c 0,-2 2,-3 3,-3 z"
+           id="path171"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.10074359;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;stroke-width:0.10514989"
+           id="text351"
+           y="154.10822"
+           x="667.07562"
+           transform="scale(1.0007154,0.99928514)">5</text>
+      </g>
+      <g
+         style="stroke-width:0.13585199"
+         inkscape:label="2"
+         id="g4927">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 668,172 h 19 c 2,0 3,1 3,3 v 17 c 0,1 -1,3 -3,3 h -19 c -1,0 -3,-2 -3,-3 v -17 c 0,-2 2,-3 3,-3 z"
+           id="path177"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.10074359;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;stroke-width:0.10514989"
+           id="text355"
+           y="179.82285"
+           x="667.07562"
+           transform="scale(1.0007154,0.99928514)">2</text>
+      </g>
+      <g
+         style="stroke-width:0.13585199"
+         inkscape:label="9"
+         id="g4902">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 697,120 h 20 c 2,0 3,2 3,3 v 18 c 0,2 -1,3 -3,3 h -20 c -1,0 -3,-1 -3,-3 v -18 c 0,-1 2,-3 3,-3 z"
+           id="path167"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.10074359;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;stroke-width:0.10514989"
+           id="text363"
+           y="129.38269"
+           x="695.75708"
+           transform="scale(1.0007154,0.99928514)">9</text>
+      </g>
+      <g
+         style="stroke-width:0.13585199"
+         inkscape:label="6"
+         id="g4917">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 697,146 h 20 c 2,0 3,1 3,3 v 18 c 0,2 -1,3 -3,3 h -20 c -1,0 -3,-1 -3,-3 v -18 c 0,-2 2,-3 3,-3 z"
+           id="path173"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.10074359;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;stroke-width:0.10514989"
+           id="text367"
+           y="154.10822"
+           x="695.75708"
+           transform="scale(1.0007154,0.99928514)">6</text>
+      </g>
+      <g
+         style="stroke-width:0.13585199"
+         inkscape:label="3"
+         id="g4932">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 697,172 h 20 c 2,0 3,1 3,3 v 17 c 0,1 -1,3 -3,3 h -20 c -1,0 -3,-2 -3,-3 v -17 c 0,-2 2,-3 3,-3 z"
+           id="path179"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.10074359;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;stroke-width:0.10514989"
+           id="text371"
+           y="179.82285"
+           x="695.75708"
+           transform="scale(1.0007154,0.99928514)">3</text>
+      </g>
+      <g
+         style="stroke-width:0.13585199"
+         inkscape:label="0"
+         id="g4937">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 638,220 c -1,0 -3,-1 -3,-2 v -19 c 0,-1 2,-2 3,-2 h 49 c 2,0 3,1 3,2 v 19 c 0,1 -1,2 -3,2 z"
+           id="path373"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.10074359;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;stroke-width:0.10514989"
+           id="text377"
+           y="205.53712"
+           x="636.4165"
+           transform="scale(1.0007154,0.99928514)">0</text>
+      </g>
+    </g>
+    <g
+       id="g3113"
+       inkscape:label="Esc"
+       transform="translate(-318.22576)">
+      <path
+         style="opacity:1;vector-effect:none;fill:#4f4c4d;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.16824313;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="path167-3"
+         d="m 387.26079,54.792986 h 33.40019 c 3.34,0 5.01006,3.34003 5.01006,5.010045 v 30.060225 c 0,3.340029 -1.67006,5.010032 -5.01006,5.010032 h -33.40019 c -1.67006,0 -5.01007,-1.670003 -5.01007,-5.010032 V 59.803031 c 0,-1.670015 3.34001,-5.010045 5.01007,-5.010045 z"
+         inkscape:connector-curvature="0" />
+      <text
+         x="394.42801"
+         y="78.632088"
+         id="text469-4"
+         style="font-weight:normal;font-size:10.63882256px;font-family:Arial;fill:#ffffff;fill-rule:evenodd;stroke-width:0.36866826"
+         transform="scale(1.0007154,0.99928511)">Esc</text>
+    </g>
+    <g
+       id="g3109"
+       inkscape:label="BackSpace"
+       transform="translate(0,-43.420332)">
+      <path
+         style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="path173-1"
+         d="m 387.26079,98.213318 h 33.40019 c 3.34,0 5.01006,1.670013 5.01006,5.010032 v 30.06024 c 0,3.34002 -1.67006,5.01003 -5.01006,5.01003 h -33.40019 c -1.67006,0 -5.01007,-1.67001 -5.01007,-5.01003 v -30.06024 c 0,-3.340019 3.34001,-5.010032 5.01007,-5.010032 z"
+         inkscape:connector-curvature="0" />
+      <path
+         style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;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:#2b2828;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         d="m -1278.9668,1041.3047 -6.9199,4 6.9199,4 v -3 h 33.416 v -1.9981 h -33.416 z"
+         transform="matrix(0.47690966,0,0,0.47690966,1008.0304,-380.26227)"
+         id="path11623-1-0-2"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       id="g787"
+       inkscape:label="Sign"
+       style="fill-rule:evenodd;stroke-width:0.13585199"
+       transform="matrix(1.6700128,0,0,1.6700128,-678.20742,-102.18822)">
+      <path
+         style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.10074359;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="path781"
+         d="m 638,120 h 20 c 2,0 3,2 3,3 v 18 c 0,2 -1,3 -3,3 h -20 c -1,0 -3,-1 -3,-3 v -18 c 0,-1 2,-3 3,-3 z"
+         inkscape:connector-curvature="0" />
+      <text
+         x="642.1239"
+         y="135.09822"
+         id="text783"
+         style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;stroke-width:0.10514989"
+         transform="scale(1.0007154,0.99928514)">+/-</text>
+    </g>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.31375408px;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;fill-rule:evenodd;stroke:none;stroke-width:0.30784383px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="252.9579"
+       y="12.333653"
+       id="text509"
+       transform="scale(0.96824589,1.0327955)"
+       inkscape:label="Info"><tspan
+         sodipodi:role="line"
+         id="tspan507"
+         x="252.9579"
+         y="12.333653"
+         style="stroke-width:0.30784383px">information</tspan></text>
+    <g
+       transform="matrix(1.6700128,0,0,1.6700128,-826.83854,-145.60856)"
+       style="fill-rule:evenodd;stroke-width:0.13585199"
+       id="g4942"
+       inkscape:label="NumDot">
+      <path
+         inkscape:connector-curvature="0"
+         d="m 697,197 h 20 c 2,0 3,1 3,2 v 19 c 0,1 -1,2 -3,2 h -20 c -1,0 -3,-1 -3,-2 v -19 c 0,-1 2,-2 3,-2 z"
+         id="path181"
+         style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.10074359;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      <text
+         style="font-weight:normal;font-size:6.96602964px;font-family:Arial;fill:#2b2828;stroke-width:0.10514989"
+         id="text771"
+         y="204.54802"
+         x="696.7464"
+         transform="scale(1.0007154,0.99928514)">.</text>
+    </g>
+  </g>
+  <g
+     transform="matrix(3.3549332,0,0,3.14525,-181.87457,1556.0198)"
+     style="fill-rule:evenodd;stroke-width:0.47631353"
+     id="g4278"
+     inkscape:label="HMI:Keypad:HMI_STRING:HMI_LOCAL:PAGE_LOCAL">
+    <path
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.6;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.16776976;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 54.211084,1.2654702 H 435.7388 V 230.18209 H 54.211084 Z"
+       id="rect1006-3"
+       inkscape:connector-curvature="0"
+       inkscape:label="Background"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path185"
+       d="m 162,197 h -11 c -2,0 -3,1 -3,3 v 18 c 0,2 1,3 3,3 h 11 168 18 c 0,0 1,-1 1,-3 v -18 c 0,-2 -1,-3 -1,-3 h -18 z"
+       inkscape:connector-curvature="0"
+       inkscape:label="Space" />
+    <g
+       id="g4380"
+       inkscape:label="Keys"
+       style="stroke-width:0.47631353"
+       transform="translate(0,-19.076386)">
+      <g
+         id="g4283"
+         inkscape:label="q Q"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path41"
+           d="m 95,121 h 19 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 H 95 c -1,0 -3,-2 -3,-3 v -18 c 0,-2 2,-3 3,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="99.378708"
+           y="138.28395"
+           id="text203"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">Q</text>
+      </g>
+      <g
+         id="g4337"
+         inkscape:label="w W"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path43"
+           d="m 124,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -3,-2 -3,-3 v -18 c 0,-2 2,-3 3,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="127.0709"
+           y="138.28395"
+           id="text207"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">W</text>
+      </g>
+      <g
+         id="g4332"
+         inkscape:label="e E"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path45"
+           d="m 154,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -3,-2 -3,-3 v -18 c 0,-2 2,-3 3,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="159.70854"
+           y="138.28395"
+           id="text211"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">E</text>
+      </g>
+      <g
+         id="g4326"
+         inkscape:label="r R"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path47"
+           d="m 184,121 h 19 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -19 c -1,0 -3,-2 -3,-3 v -18 c 0,-2 2,-3 3,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="188.39003"
+           y="138.28395"
+           id="text215"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">R</text>
+      </g>
+      <g
+         id="g4321"
+         inkscape:label="t T"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path49"
+           d="m 213,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 v -18 c 0,-2 1,-3 2,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="219.04961"
+           y="138.28395"
+           id="text219"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">T</text>
+      </g>
+      <g
+         id="g4316"
+         inkscape:label="y Y"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path51"
+           d="m 243,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 v -18 c 0,-2 1,-3 2,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="248.72017"
+           y="138.28395"
+           id="text223"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">Y</text>
+      </g>
+      <g
+         id="g4311"
+         inkscape:label="u U"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path53"
+           d="m 273,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 v -18 c 0,-2 1,-3 2,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="278.39075"
+           y="138.28395"
+           id="text227"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">U</text>
+      </g>
+      <g
+         id="g4306"
+         inkscape:label="i I"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path55"
+           d="m 302,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 v -18 c 0,-2 1,-3 2,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="311.02859"
+           y="138.28395"
+           id="text231"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">I</text>
+      </g>
+      <g
+         id="g4301"
+         inkscape:label="o O"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path57"
+           d="m 332,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 v -18 c 0,-2 1,-3 2,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="336.74319"
+           y="138.28395"
+           id="text235"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">O</text>
+      </g>
+      <g
+         id="g4296"
+         inkscape:label="p P"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path59"
+           d="m 362,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 v -18 c 0,-2 1,-3 2,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="367.40256"
+           y="138.28395"
+           id="text239"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">P</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4511"
+         inkscape:label="a A">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 103,147 h 19 c 1,0 3,1 3,2 v 19 c 0,1 -2,2 -3,2 h -19 c -2,0 -3,-1 -3,-2 v -19 c 0,-1 1,-2 3,-2 z"
+           id="path65"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text243"
+           y="163.99854"
+           x="107.29005"
+           transform="scale(1.0007154,0.99928514)">A</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4516"
+         inkscape:label="s S">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 132,147 h 20 c 1,0 3,1 3,2 v 19 c 0,1 -2,2 -3,2 h -20 c -2,0 -3,-1 -3,-2 v -19 c 0,-1 1,-2 3,-2 z"
+           id="path67"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text247"
+           y="163.99854"
+           x="137.95012"
+           transform="scale(1.0007154,0.99928514)">S</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4521"
+         inkscape:label="d D">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 162,147 h 20 c 2,0 3,1 3,2 v 19 c 0,1 -1,2 -3,2 h -20 c -2,0 -3,-1 -3,-2 v -19 c 0,-1 1,-2 3,-2 z"
+           id="path69"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text251"
+           y="163.99854"
+           x="166.63159"
+           transform="scale(1.0007154,0.99928514)">D</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4526"
+         inkscape:label="f F">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 192,147 h 19 c 2,0 3,1 3,2 v 19 c 0,1 -1,2 -3,2 h -19 c -2,0 -3,-1 -3,-2 v -19 c 0,-1 1,-2 3,-2 z"
+           id="path71"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text255"
+           y="163.99854"
+           x="197.29166"
+           transform="scale(1.0007154,0.99928514)">F</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4531"
+         inkscape:label="g G">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 221,147 h 20 c 2,0 3,1 3,2 v 19 c 0,1 -1,2 -3,2 h -20 c -2,0 -3,-1 -3,-2 v -19 c 0,-1 1,-2 3,-2 z"
+           id="path73"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text259"
+           y="163.99854"
+           x="225.97284"
+           transform="scale(1.0007154,0.99928514)">G</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4536"
+         inkscape:label="h H">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 251,147 h 20 c 2,0 3,1 3,2 v 19 c 0,1 -1,2 -3,2 h -20 c -1,0 -3,-1 -3,-2 v -19 c 0,-1 2,-2 3,-2 z"
+           id="path75"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text263"
+           y="163.99854"
+           x="255.64342"
+           transform="scale(1.0007154,0.99928514)">H</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4541"
+         inkscape:label="j J">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 281,147 h 19 c 2,0 3,1 3,2 v 19 c 0,1 -1,2 -3,2 h -19 c -1,0 -3,-1 -3,-2 v -19 c 0,-1 2,-2 3,-2 z"
+           id="path77"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text267"
+           y="163.99854"
+           x="287.29208"
+           transform="scale(1.0007154,0.99928514)">J</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4546"
+         inkscape:label="k K">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 310,147 h 20 c 2,0 3,1 3,2 v 19 c 0,1 -1,2 -3,2 h -20 c -1,0 -3,-1 -3,-2 v -19 c 0,-1 2,-2 3,-2 z"
+           id="path79"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text271"
+           y="163.99854"
+           x="314.98465"
+           transform="scale(1.0007154,0.99928514)">K</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4551"
+         inkscape:label="l L">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 340,147 h 20 c 2,0 3,1 3,2 v 19 c 0,1 -1,2 -3,2 h -20 c -1,0 -3,-1 -3,-2 v -19 c 0,-1 2,-2 3,-2 z"
+           id="path81"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text275"
+           y="163.99854"
+           x="345.64444"
+           transform="scale(1.0007154,0.99928514)">L</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4586"
+         inkscape:label="z Z"
+         transform="translate(0,9.5381929)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 113,172 h 21 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 h -21 c -1,0 -2,-1 -2,-3 v -17 c 0,-1 1,-3 2,-3 z"
+           id="path87-3"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text279"
+           y="188.72411"
+           x="119.15855"
+           transform="scale(1.0007154,0.99928514)">Z</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4581"
+         inkscape:label="x X"
+         transform="translate(0,9.5381929)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 143,172 h 21 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 h -21 c -1,0 -2,-1 -2,-3 v -17 c 0,-1 1,-3 2,-3 z"
+           id="path89-6"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text283"
+           y="188.72411"
+           x="148.82933"
+           transform="scale(1.0007154,0.99928514)">X</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4576"
+         inkscape:label="c C"
+         transform="translate(0,9.5381929)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 173,172 h 21 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 h -21 c -1,0 -2,-1 -2,-3 v -17 c 0,-1 1,-3 2,-3 z"
+           id="path91-7"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text287"
+           y="188.72411"
+           x="178.50011"
+           transform="scale(1.0007154,0.99928514)">C</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4571"
+         inkscape:label="v V"
+         transform="translate(0,9.5381929)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 202,172 h 21 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 h -21 c 0,0 -1,-1 -1,-3 v -17 c 0,-1 1,-3 1,-3 z"
+           id="path195"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text291"
+           y="188.72411"
+           x="208.16988"
+           transform="scale(1.0007154,0.99928514)">V</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4566"
+         inkscape:label="b B"
+         transform="translate(0,9.5381929)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 233,172 h 20 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 h -20 c -2,0 -3,-1 -3,-3 v -17 c 0,-1 1,-3 3,-3 z"
+           id="path93"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text295"
+           y="188.72411"
+           x="237.84096"
+           transform="scale(1.0007154,0.99928514)">B</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4561"
+         inkscape:label="n N"
+         transform="translate(0,9.5381929)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 263,172 h 20 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 h -20 c -2,0 -3,-1 -3,-3 v -17 c 0,-1 1,-3 3,-3 z"
+           id="path95"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text299"
+           y="188.72411"
+           x="267.51193"
+           transform="scale(1.0007154,0.99928514)">N</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4556"
+         inkscape:label="m M"
+         transform="translate(0,9.5381929)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 293,172 h 19 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 h -19 c -2,0 -3,-1 -3,-3 v -17 c 0,-1 1,-3 3,-3 z"
+           id="path97"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text303"
+           y="188.72411"
+           x="296.1933"
+           transform="scale(1.0007154,0.99928514)">M</text>
+      </g>
+      <g
+         id="g4818"
+         inkscape:label=". :"
+         style="stroke-width:0.47631353"
+         transform="translate(0,9.5381929)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 352,172 h 20 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 h -20 c -2,0 -3,-1 -3,-3 v -17 c 0,-1 1,-3 3,-3 z"
+           id="path101"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           transform="scale(1.0007154,0.99928513)"
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;fill-rule:evenodd;stroke-width:0.36866826"
+           id="text719"
+           y="189.66107"
+           x="359.58276">.</text>
+        <text
+           x="359.58276"
+           y="181.64532"
+           id="text4834"
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;fill-rule:evenodd;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928512)">:</text>
+      </g>
+      <g
+         id="g4813"
+         inkscape:label=", ;"
+         style="stroke-width:0.47631353"
+         transform="translate(0,9.5381929)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 322,172 h 20 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 h -20 c -2,0 -3,-1 -3,-3 v -17 c 0,-1 1,-3 3,-3 z"
+           id="path99"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;fill-rule:evenodd;stroke-width:0.36866826"
+           id="text727"
+           y="181.64532"
+           x="330.00806"
+           transform="scale(1.0007154,0.99928512)">;</text>
+        <text
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;fill-rule:evenodd;stroke-width:0.36866826"
+           y="189.66107"
+           x="330.00806"
+           transform="scale(1.0007154,0.99928512)"
+           id="text4826">,</text>
+      </g>
+      <g
+         style="stroke-width:0.47631353"
+         inkscape:label="1"
+         id="g2845"
+         transform="translate(-13.353469,-45.783327)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 95,121 h 19 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 H 95 c -1,0 -3,-2 -3,-3 v -18 c 0,-2 2,-3 3,-3 z"
+           id="path2839"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2841"
+           y="138.28395"
+           x="101.07153"
+           transform="scale(1.0007154,0.99928513)">1</text>
+      </g>
+      <g
+         style="stroke-width:0.47631353"
+         inkscape:label="2"
+         id="g2853"
+         transform="translate(-13.353469,-45.783327)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 124,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -3,-2 -3,-3 v -18 c 0,-2 2,-3 3,-3 z"
+           id="path2847"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2849"
+           y="138.28395"
+           x="130.18704"
+           transform="scale(1.0007154,0.99928513)">2</text>
+      </g>
+      <g
+         inkscape:label="3"
+         id="g2861"
+         style="stroke-width:0.47631353"
+         transform="translate(-13.353469,-45.783327)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 154,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -3,-2 -3,-3 v -18 c 0,-2 2,-3 3,-3 z"
+           id="path2855"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2857"
+           y="138.28395"
+           x="159.70854"
+           transform="scale(1.0007154,0.99928514)">3</text>
+      </g>
+      <g
+         id="g2957"
+         inkscape:label="4"
+         transform="translate(0,-19.076386)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 170.64653,94.293059 h 19 c 2,0 3,1 3,3 v 18.000001 c 0,1 -1,3 -3,3 h -19 c -1,0 -3,-2 -3,-3 V 97.293059 c 0,-2 2,-3 3,-3 z"
+           id="path2865"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2867"
+           y="111.55791"
+           x="176.39188"
+           transform="scale(1.0007154,0.99928514)">4</text>
+      </g>
+      <g
+         id="g2962"
+         inkscape:label="5"
+         transform="translate(0,-19.076386)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 199.64653,94.293059 h 20 c 2,0 3,1 3,3 v 18.000001 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 V 97.293059 c 0,-2 1,-3 2,-3 z"
+           id="path2873"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2875"
+           y="111.55791"
+           x="205.70567"
+           transform="scale(1.0007154,0.99928514)">5</text>
+      </g>
+      <g
+         id="g2967"
+         inkscape:label="6"
+         transform="translate(0,-19.076386)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 229.64653,94.293059 h 20 c 2,0 3,1 3,3 v 18.000001 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 V 97.293059 c 0,-2 1,-3 2,-3 z"
+           id="path2881"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2883"
+           y="111.55791"
+           x="236.15851"
+           transform="scale(1.0007154,0.99928514)">6</text>
+      </g>
+      <g
+         id="g2972"
+         inkscape:label="7"
+         transform="translate(0,-19.076386)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 259.64653,94.293059 h 20 c 2,0 3,1 3,3 v 18.000001 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 V 97.293059 c 0,-2 1,-3 2,-3 z"
+           id="path2889"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2891"
+           y="111.55791"
+           x="266.06564"
+           transform="scale(1.0007154,0.99928514)">7</text>
+      </g>
+      <g
+         id="g2977"
+         inkscape:label="8"
+         transform="translate(0,-19.076386)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 288.64653,94.293059 h 20 c 2,0 3,1 3,3 v 18.000001 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 V 97.293059 c 0,-2 1,-3 2,-3 z"
+           id="path2897"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2899"
+           y="111.55791"
+           x="295.08231"
+           transform="scale(1.0007154,0.99928514)">8</text>
+      </g>
+      <g
+         id="g2982"
+         inkscape:label="9 -"
+         transform="translate(0,-19.076386)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 318.64653,94.293059 h 20 c 2,0 3,1 3,3 v 18.000001 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 V 97.293059 c 0,-2 1,-3 2,-3 z"
+           id="path2905"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2907"
+           y="111.55791"
+           x="325.05408"
+           transform="scale(1.0007154,0.99928514)">9</text>
+        <text
+           transform="scale(1.0007154,0.99928511)"
+           x="335.72681"
+           y="102.42173"
+           id="text806"
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;fill-rule:evenodd;stroke-width:0.36866826">-</text>
+      </g>
+      <g
+         id="g2987"
+         inkscape:label="0 +"
+         transform="translate(0,-19.076386)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 348.64653,94.293059 h 20 c 2,0 3,1 3,3 v 18.000001 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 V 97.293059 c 0,-2 1,-3 2,-3 z"
+           id="path2913"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2915"
+           y="111.55791"
+           x="355.05984"
+           transform="scale(1.0007154,0.99928514)">0</text>
+        <text
+           transform="scale(1.0007154,0.99928511)"
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;fill-rule:evenodd;stroke-width:0.36866826"
+           id="text804"
+           y="102.42173"
+           x="365.30151">+</text>
+      </g>
+    </g>
+    <g
+       transform="translate(335.89988,-58.934803)"
+       id="g3544"
+       inkscape:label="Esc"
+       style="stroke-width:0.47631353">
+      <path
+         style="opacity:1;vector-effect:none;fill:#4f4c4d;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.16824313;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="path105"
+         d="m 47.948645,115.07509 h 39.076386 c 1,0 3,1 3,3 v 18 c 0,1 -2,3 -3,3 H 47.948645 c -2,0 -3,-2 -3,-3 v -18 c 0,-2 1,-3 3,-3 z"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="sssssssss" />
+      <text
+         transform="scale(1.0007154,0.99928512)"
+         style="font-weight:normal;font-size:9.37966251px;font-family:Arial;fill:#ffffff;fill-rule:evenodd;stroke-width:0.36866826"
+         id="text469"
+         y="130.02028"
+         x="59.288635">Esc</text>
+    </g>
+    <g
+       inkscape:label="Enter"
+       id="g4291"
+       style="stroke-width:0.47631353"
+       transform="translate(0,-19.076386)">
+      <path
+         sodipodi:nodetypes="sssssssss"
+         style="opacity:1;vector-effect:none;fill:#4f4c4d;fill-opacity:1;stroke:none;stroke-width:0.16824313;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="path3616"
+         d="m 368.68274,170 c -1,0 -2,-1 -2,-3 v -17 c 0,-1 1,-3 2,-3 h 54.24217 c 2,0 3,2 3,3 v 17 c 0,2 -1,3 -3,3 z"
+         inkscape:connector-curvature="0" />
+      <path
+         style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;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:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         d="m -260.23633,1080.8125 v 15.7949 h -38.68555 v -3 l -6.91992,4 6.91992,4 v -3.0019 h 40.6836 v -17.793 z"
+         transform="matrix(0.47690966,0,0,0.47690966,531.12074,-361.18588)"
+         id="path6545"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       inkscape:label="BackSpace"
+       id="g4287"
+       style="fill-rule:evenodd;stroke-width:0.47631353"
+       transform="translate(2.3648311e-6,-28.614579)">
+      <path
+         sodipodi:nodetypes="sssssssss"
+         style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="path3624"
+         d="m 391.97749,144 c -1,0 -2,-1 -2,-3 v -17 c 0,-1 1,-3 2,-3 h 30.94742 c 2,0 3,2 3,3 v 17 c 0,2 -1,3 -3,3 z"
+         inkscape:connector-curvature="0" />
+      <path
+         style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;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:#2b2828;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         d="m -268.72656,1011.1777 -6.91992,4 6.91992,4 v -3.0019 h 29.18945 v -1.9981 h -29.18945 z"
+         transform="matrix(0.47690966,0,0,0.47690966,531.12074,-351.64769)"
+         id="path11623-1-0"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       id="g934"
+       inkscape:label="CapsLock">
+      <g
+         inkscape:label="inactive"
+         id="g942"
+         style="display:inline;fill-rule:evenodd;stroke-width:0.47631353"
+         transform="translate(0,-19.076386)">
+        <path
+           sodipodi:nodetypes="sssssssss"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path936"
+           d="m 67.025031,170 c -1,0 -3,-1 -3,-2 v -19 c 0,-1 2,-2 3,-2 H 92 c 2,0 4,1 4,2 v 19 c 0,1 -2,2 -4,2 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="69.789322"
+           y="156.71973"
+           id="text938-5"
+           style="font-weight:normal;font-size:8.66233635px;font-family:Arial;fill:#2b2828;stroke-width:0.36866823"
+           transform="scale(1.0007154,0.99928515)">Caps</text>
+        <text
+           x="69.789322"
+           y="166.5585"
+           id="text940"
+           style="font-weight:normal;font-size:8.66233635px;font-family:Arial;fill:#2b2828;stroke-width:0.36866823"
+           transform="scale(1.0007154,0.99928515)">Lock</text>
+      </g>
+      <g
+         transform="translate(0,-19.076386)"
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4429"
+         inkscape:label="active">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 67.025031,170 c -1,0 -3,-1 -3,-2 v -19 c 0,-1 2,-2 3,-2 H 92 c 2,0 4,1 4,2 v 19 c 0,1 -2,2 -4,2 z"
+           id="path199"
+           style="opacity:1;vector-effect:none;fill:#4f4c4d;fill-opacity:1;stroke:none;stroke-width:0.16824313;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           sodipodi:nodetypes="sssssssss" />
+        <text
+           transform="scale(1.0007154,0.99928515)"
+           style="font-weight:normal;font-size:8.66233635px;font-family:Arial;fill:#ffffff;stroke-width:0.36866823"
+           id="text647"
+           y="156.71973"
+           x="69.789322">Caps</text>
+        <text
+           transform="scale(1.0007154,0.99928515)"
+           style="font-weight:normal;font-size:8.66233635px;font-family:Arial;fill:#ffffff;stroke-width:0.36866823"
+           id="text651"
+           y="166.5585"
+           x="69.789322">Lock</text>
+      </g>
+    </g>
+    <rect
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fffff5;fill-opacity:1;fill-rule:nonzero;stroke:#202326;stroke-width:0;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="rect2130"
+       width="361.89996"
+       height="30.150299"
+       x="64.024956"
+       y="15.771065"
+       rx="3.8152773"
+       ry="3.8152773"
+       inkscape:label="Field" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:19.0763855px;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:0.47690967px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="72.50132"
+       y="38.296417"
+       id="text1309"
+       inkscape:label="Value"><tspan
+         sodipodi:role="line"
+         id="tspan1307"
+         x="72.50132"
+         y="38.296417"
+         style="text-align:start;text-anchor:start;stroke-width:0.47690967px">text</tspan></text>
+    <g
+       id="g437"
+       inkscape:label="Shift">
+      <g
+         id="g421"
+         inkscape:label="inactive">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 379.96247,185.46181 c -1,0 -2,-1 -2,-3 v -17 c 0,-1 1,-3 2,-3 h 42.96244 c 2,0 3,2 3,3 v 17 c 0,2 -1,3 -3,3 z"
+           id="path910"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           sodipodi:nodetypes="sssssssss" />
+        <text
+           style="font-weight:normal;font-size:8.92098808px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text912"
+           y="177.90059"
+           x="392.55679"
+           transform="scale(1.0007154,0.99928513)">Shift</text>
+        <path
+           sodipodi:nodetypes="sssssssss"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path856"
+           d="m 67.025031,185.46181 c -1,0 -3,-1 -3,-3 v -17 c 0,-1 2,-3 3,-3 H 104 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="75.85218"
+           y="177.90059"
+           id="text858"
+           style="font-weight:normal;font-size:8.92098808px;font-family:Arial;fill:#2b2828;fill-rule:evenodd;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928513)">Shift</text>
+      </g>
+      <g
+         id="g413"
+         inkscape:label="active">
+        <path
+           sodipodi:nodetypes="sssssssss"
+           style="opacity:1;vector-effect:none;fill:#4f4c4d;fill-opacity:1;stroke:none;stroke-width:0.16824313;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path551"
+           d="m 379.96247,185.46181 c -1,0 -2,-1 -2,-3 v -17 c 0,-1 1,-3 2,-3 h 42.96244 c 2,0 3,2 3,3 v 17 c 0,2 -1,3 -3,3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           transform="scale(1.0007154,0.99928513)"
+           x="392.55679"
+           y="177.90059"
+           id="text629"
+           style="font-weight:normal;font-size:8.92098808px;font-family:Arial;fill:#ffffff;stroke-width:0.36866826">Shift</text>
+        <path
+           inkscape:connector-curvature="0"
+           d="m 67.025031,185.46181 c -1,0 -3,-1 -3,-3 v -17 c 0,-1 2,-3 3,-3 H 104 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 z"
+           id="path879"
+           style="opacity:1;vector-effect:none;fill:#4f4c4d;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.16824313;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           sodipodi:nodetypes="sssssssss" />
+        <text
+           transform="scale(1.0007154,0.99928513)"
+           style="font-weight:normal;font-size:8.92098808px;font-family:Arial;fill:#ffffff;fill-rule:evenodd;stroke-width:0.36866826"
+           id="text881"
+           y="177.90059"
+           x="75.85218">Shift</text>
+      </g>
+    </g>
+    <text
+       transform="scale(0.96824588,1.0327955)"
+       id="text471"
+       y="12.333657"
+       x="252.9579"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.31375408px;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;fill-rule:evenodd;stroke:none;stroke-width:0.30784383px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"
+       inkscape:label="Info"><tspan
+         style="stroke-width:0.30784383px"
+         y="12.333657"
+         x="252.9579"
+         id="tspan469"
+         sodipodi:role="line">information</tspan></text>
+  </g>
+  <g
+     id="g14237"
+     inkscape:label="HMI:DropDown:1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27@/SELECTION"
+     transform="matrix(0.81491208,0,0,0.81491208,243.6641,-510.30491)"
+     style="stroke-width:0.35083869">
+    <rect
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#53676c;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.75419343;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       id="rect14212"
+       width="391.99988"
+       height="130.9433"
+       x="864.00842"
+       y="923.98993"
+       rx="2.4558709"
+       ry="2.4558709"
+       inkscape:label="box" />
+    <rect
+       inkscape:label="highlight"
+       ry="2.4558709"
+       rx="2.4558709"
+       y="943.10553"
+       x="864.00842"
+       height="92.71212"
+       width="391.99988"
+       id="rect5497"
+       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:1.75419331;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" />
+    <text
+       id="text14183"
+       y="1011.9975"
+       x="881.44226"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:80px;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:#d42aff;fill-opacity:1;stroke:none;stroke-width:0.35083869px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"
+       inkscape:label="text"><tspan
+         style="text-align:start;text-anchor:start;fill:#d42aff;stroke-width:0.35083869px"
+         y="1011.9975"
+         x="881.44226"
+         sodipodi:role="line"
+         id="tspan421">sel_0</tspan></text>
+    <path
+       sodipodi:type="star"
+       style="opacity:1;vector-effect:none;fill:#a7a5a6;fill-opacity:1;stroke:none;stroke-width:0.12376806;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path424"
+       sodipodi:sides="3"
+       sodipodi:cx="1200.5"
+       sodipodi:cy="975"
+       sodipodi:r1="43.683521"
+       sodipodi:r2="21.841761"
+       sodipodi:arg1="1.5707963"
+       sodipodi:arg2="2.6179939"
+       inkscape:flatsided="false"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 1200.5,1018.6835 -18.9155,-32.76262 -18.9155,-32.76264 37.831,0 37.831,0 -18.9155,32.76264 z"
+       inkscape:transform-center-y="10.92088"
+       inkscape:label="button" />
+  </g>
+  <g
+     id="g14274"
+     inkscape:label="HMI:List:HoodNames:ForEach:HOOD:NAME@/" />
+  <g
+     inkscape:label="HMI:Input@/SELECTION"
+     id="g446"
+     transform="matrix(0.28590269,0,0,0.28590269,85.246911,560.98603)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="216.32812"
+       y="218.24219"
+       id="text432"
+       inkscape:label="value"><tspan
+         sodipodi:role="line"
+         id="tspan430"
+         x="216.32812"
+         y="218.24219"
+         style="text-align:end;text-anchor:end;stroke-width:1px">8</tspan></text>
+    <path
+       transform="scale(1,-1)"
+       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:#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="path436"
+       sodipodi:sides="3"
+       sodipodi:cx="276.74072"
+       sodipodi:cy="-224.98808"
+       sodipodi:r1="29.912722"
+       sodipodi:r2="14.956361"
+       sodipodi:arg1="0.52359878"
+       sodipodi:arg2="1.5707963"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 302.6459,-210.03172 -51.81035,0 25.90517,-44.86908 z"
+       inkscape:transform-center-y="7.4781812"
+       inkscape:label="-1" />
+    <rect
+       inkscape:label="edit"
+       onclick=""
+       y="95.40741"
+       x="-174.94055"
+       height="128"
+       width="407.7037"
+       id="rect438"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;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" />
+    <path
+       inkscape:label="+1"
+       inkscape:transform-center-y="-7.4781804"
+       d="m 302.6459,111.4008 -51.81035,0 25.90517,-44.869079 z"
+       inkscape:randomized="0"
+       inkscape:rounded="0"
+       inkscape:flatsided="true"
+       sodipodi:arg2="1.5707963"
+       sodipodi:arg1="0.52359878"
+       sodipodi:r2="14.956361"
+       sodipodi:r1="29.912722"
+       sodipodi:cy="96.444443"
+       sodipodi:cx="276.74072"
+       sodipodi:sides="3"
+       id="path442"
+       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"
+       sodipodi:type="star" />
+    <path
+       inkscape:label="=0"
+       inkscape:transform-center-y="-10.828983"
+       d="m 306.14807,189.68763 -58.37872,0.43598 -0.43597,-58.37872 58.37871,-0.43597 z"
+       inkscape:randomized="0"
+       inkscape:rounded="0"
+       inkscape:flatsided="true"
+       sodipodi:arg2="1.5633284"
+       sodipodi:arg1="0.77793027"
+       sodipodi:r2="21.657967"
+       sodipodi:r1="41.281136"
+       sodipodi:cy="160.71626"
+       sodipodi:cx="276.74072"
+       sodipodi:sides="4"
+       id="path444"
+       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"
+       sodipodi:type="star"
+       inkscape:transform-center-x="1.0089177e-06" />
+  </g>
+  <g
+     transform="matrix(0.57180538,0,0,0.57180538,-522.96165,161.69266)"
+     id="g443"
+     inkscape:label="HMI:Button@/SELECTION"
+     style="stroke-width:1">
+    <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;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="rect5492"
+       width="245.44583"
+       height="95.723877"
+       x="971.96545"
+       y="594.82263"
+       ry="23.930969"
+       inkscape:label="inactive"
+       rx="23.930969" />
+    <rect
+       rx="23.930969"
+       inkscape:label="active"
+       ry="23.930969"
+       y="594.82263"
+       x="971.96545"
+       height="95.723877"
+       width="245.44583"
+       id="rect433"
+       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:#fdfdfd;fill-opacity:1;fill-rule:nonzero;stroke:#ffd0b2;stroke-width:28.60938263;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
+       style="stroke-width:1"
+       inkscape:label="text"
+       id="g952">
+      <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="text950"
+         inkscape:label="setting_jmp"><tspan
+           sodipodi:role="line"
+           id="tspan948"
+           x="1090.7626"
+           y="656.98151"
+           style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px">up</tspan></text>
+    </g>
+  </g>
+  <g
+     id="g5053"
+     inkscape:label="HMI:Switch@/PUMP0/BOOLOUT">
+    <g
+       sodipodi:type="inkscape:box3d"
+       id="g473"
+       style="fill:#ff0000;stroke:#ff00ff"
+       inkscape:perspectiveID="#perspective445"
+       inkscape:corner0="-0.22508846 : -0.3474613 : 0 : 1"
+       inkscape:corner7="-0.30162293 : -0.45734167 : 0.25 : 1"
+       inkscape:label="true">
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path461"
+         style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         inkscape:box3dsidetype="6"
+         d="M 825.90072,963.24473 V 1105.042 L 960.08286,916.47892 V 809.26931 Z"
+         points="825.90072,1105.042 960.08286,916.47892 960.08286,809.26931 825.90072,963.24473 " />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path463"
+         style="fill:#afafde;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         inkscape:box3dsidetype="13"
+         d="m 825.90072,1105.042 90.50967,81.6485 121.15161,-225.30347 -77.47914,-44.90811 z"
+         points="916.41039,1186.6905 1037.562,961.38703 960.08286,916.47892 825.90072,1105.042 " />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path465"
+         style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         inkscape:box3dsidetype="11"
+         d="m 960.08286,809.26931 77.47914,36.25624 v 115.86148 l -77.47914,-44.90811 z"
+         points="1037.562,845.52555 1037.562,961.38703 960.08286,916.47892 960.08286,809.26931 " />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path467"
+         style="fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         inkscape:box3dsidetype="5"
+         d="M 825.90072,963.24473 916.41039,1029.3537 1037.562,845.52555 960.08286,809.26931 Z"
+         points="916.41039,1029.3537 1037.562,845.52555 960.08286,809.26931 825.90072,963.24473 " />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path469"
+         style="fill:#d7d7ff;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         inkscape:box3dsidetype="14"
+         d="m 916.41039,1029.3537 v 157.3368 L 1037.562,961.38703 V 845.52555 Z"
+         points="916.41039,1186.6905 1037.562,961.38703 1037.562,845.52555 916.41039,1029.3537 " />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path471"
+         style="fill:#8686bf;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         inkscape:box3dsidetype="3"
+         d="m 825.90072,963.24473 90.50967,66.10897 v 157.3368 l -90.50967,-81.6485 z"
+         points="916.41039,1029.3537 916.41039,1186.6905 825.90072,1105.042 825.90072,963.24473 " />
+    </g>
+    <g
+       sodipodi:type="inkscape:box3d"
+       id="g501"
+       style="fill:#ff0000;stroke:#ff00ff"
+       inkscape:perspectiveID="#perspective503"
+       inkscape:corner0="-0.22508846 : -0.3474613 : 0 : 1"
+       inkscape:corner7="-0.30162293 : -0.45734167 : 0.25 : 1"
+       inkscape:label="false">
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path489"
+         style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         inkscape:box3dsidetype="6"
+         d="M 855.90072,905.24473 V 1047.042 L 978.37453,966.29311 V 859.08349 Z"
+         points="855.90072,1047.042 978.37453,966.29311 978.37453,859.08349 855.90072,905.24473 " />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path491"
+         style="fill:#afafde;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         inkscape:box3dsidetype="13"
+         d="m 855.90072,1047.042 90.50967,81.6485 108.49841,-108.7886 -76.53427,-53.60879 z"
+         points="946.41039,1128.6905 1054.9088,1019.9019 978.37453,966.29311 855.90072,1047.042 " />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path493"
+         style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         inkscape:box3dsidetype="11"
+         d="m 978.37453,859.08349 76.53427,44.9569 v 115.86151 l -76.53427,-53.60879 z"
+         points="1054.9088,904.04039 1054.9088,1019.9019 978.37453,966.29311 978.37453,859.08349 " />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path495"
+         style="fill:#4d389f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         inkscape:box3dsidetype="5"
+         d="m 855.90072,905.24473 90.50967,66.109 108.49841,-67.31334 -76.53427,-44.9569 z"
+         points="946.41039,971.35373 1054.9088,904.04039 978.37453,859.08349 855.90072,905.24473 " />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path497"
+         style="fill:#d78bff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         inkscape:box3dsidetype="14"
+         d="M 946.41039,971.35373 V 1128.6905 L 1054.9088,1019.9019 V 904.04039 Z"
+         points="946.41039,1128.6905 1054.9088,1019.9019 1054.9088,904.04039 946.41039,971.35373 " />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path499"
+         style="fill:#8667bf;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         inkscape:box3dsidetype="3"
+         d="m 855.90072,905.24473 90.50967,66.109 v 157.33677 l -90.50967,-81.6485 z"
+         points="946.41039,971.35373 946.41039,1128.6905 855.90072,1047.042 855.90072,905.24473 " />
+    </g>
+  </g>
+  <g
+     transform="matrix(3.3549332,0,0,3.14525,-181.87457,3116.0198)"
+     style="fill-rule:evenodd;stroke-width:0.47631353"
+     id="g1490"
+     inkscape:label="HMI:ModalOKDialog">
+    <path
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.6;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.16776976;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 54.211099,1.2654702 H 435.73881 V 230.18209 H 54.211099 Z"
+       id="path1386"
+       inkscape:connector-curvature="0"
+       inkscape:label="Background"
+       sodipodi:nodetypes="ccccc" />
+    <rect
+       inkscape:label="Field"
+       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:#fffff5;fill-opacity:1;fill-rule:nonzero;stroke:#202326;stroke-width:0;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="rect1388"
+       width="314.68832"
+       height="68.369255"
+       x="87.630791"
+       y="56.041908"
+       rx="3.8152773"
+       ry="3.8152773" />
+    <text
+       inkscape:label="Message"
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:19.0763855px;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:0.47690967px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="243.24242"
+       y="94.637527"
+       id="text1392"><tspan
+         sodipodi:role="line"
+         id="tspan1390"
+         x="243.24242"
+         y="94.637527"
+         style="text-align:center;text-anchor:middle;stroke-width:0.47690967px">message</tspan></text>
+    <g
+       transform="translate(-158.98593,95.381925)"
+       inkscape:label="OK"
+       id="g1466">
+      <path
+         inkscape:connector-curvature="0"
+         d="m 363.41531,54.792986 h 81.09115 c 3.34,0 5.01006,3.34003 5.01006,5.010045 v 30.060225 c 0,3.340029 -1.67006,5.010032 -5.01006,5.010032 h -81.09115 c -1.67006,0 -5.01007,-1.670003 -5.01007,-5.010032 V 59.803031 c 0,-1.670015 3.34001,-5.010045 5.01007,-5.010045 z"
+         id="path1462"
+         style="opacity:1;vector-effect:none;fill:#4f4c4d;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.16824313;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         sodipodi:nodetypes="sssssssss" />
+      <text
+         transform="scale(1.0007154,0.99928511)"
+         style="font-weight:normal;font-size:10.63882256px;font-family:Arial;fill:#ffffff;fill-rule:evenodd;stroke-width:0.36866826"
+         id="text1464"
+         y="78.632088"
+         x="402.71881">
+        <tspan
+           style="text-align:center;text-anchor:middle"
+           id="tspan5195">OK</tspan>
+      </text>
+    </g>
+    <text
+       inkscape:label="Info"
+       transform="scale(0.96824589,1.0327955)"
+       id="text1482"
+       y="12.333653"
+       x="252.9579"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.31375408px;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;fill-rule:evenodd;stroke:none;stroke-width:0.30784383px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         style="stroke-width:0.30784383px"
+         y="12.333653"
+         x="252.9579"
+         id="tspan1480"
+         sodipodi:role="line">information</tspan></text>
+  </g>
+  <g
+     inkscape:label="HMI:Meter@/PUMP0/SLOTH"
+     transform="matrix(3.7795276,0,0,3.7795276,1628.51,630.30393)"
+     id="g1338">
+    <path
+       inkscape:label="range"
+       sodipodi:open="true"
+       d="M 63.610123,2.2017068 A 64.411957,64.411957 0 0 1 128.02208,-62.210247"
+       sodipodi:end="4.712389"
+       sodipodi:start="3.1415927"
+       sodipodi:ry="64.411957"
+       sodipodi:rx="64.411957"
+       sodipodi:cy="2.2017097"
+       sodipodi:cx="128.02208"
+       sodipodi:type="arc"
+       id="path1318"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#3ee800;stroke-width:26.45833397;stroke-miterlimit:4;stroke-dasharray:2.64583333, 2.64583333;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       inkscape:label="needle"
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path1320"
+       d="M 130.96206,4.0725977 79.111776,-41.363223"
+       style="fill:none;fill-rule:evenodd;stroke:#ff3000;stroke-width:2.9633333;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:29.63333301;stroke-opacity:1;marker-end:url(#marker1656)" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:125%;font-family:sans-serif;text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="49.132977"
+       y="4.9187088"
+       id="text1324"
+       inkscape:label="min"><tspan
+         sodipodi:role="line"
+         id="tspan1322"
+         x="49.132977"
+         y="4.9187088"
+         style="text-align:end;text-anchor:end;fill:#ff6600;stroke-width:0.26458332px">0</tspan></text>
+    <text
+       id="text1328"
+       y="-78.144218"
+       x="127.48073"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"
+       inkscape:label="max"><tspan
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.26458332px"
+         y="-78.144218"
+         x="127.48073"
+         id="tspan1326"
+         sodipodi:role="line">10000</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="113.53007"
+       y="-6.1937833"
+       id="text1332"
+       inkscape:label="value"><tspan
+         sodipodi:role="line"
+         x="113.53007"
+         y="-6.1937833"
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.26458332px"
+         id="tspan1330">000</tspan></text>
+    <text
+       inkscape:label="unit"
+       id="text1336"
+       y="1.1408259"
+       x="124.77896"
+       style="font-style:normal;font-weight:normal;font-size:7.5467205px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         id="tspan1334"
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.26458332px"
+         y="1.1408259"
+         x="124.77896"
+         sodipodi:role="line">bar</tspan></text>
+  </g>
+  <g
+     inkscape:label="HMI:Switch@/PUMP0/BOOLOUT"
+     id="g1368"
+     transform="translate(1340,-520)">
+    <g
+       inkscape:label="true"
+       inkscape:corner7="-0.30162293 : -0.45734167 : 0.25 : 1"
+       inkscape:corner0="-0.22508846 : -0.3474613 : 0 : 1"
+       inkscape:perspectiveID="#perspective1370"
+       style="fill:#ff0000;stroke:#ff00ff"
+       id="g1352"
+       sodipodi:type="inkscape:box3d">
+      <path
+         points="825.90072,1105.042 960.08286,916.47892 960.08286,809.26931 825.90072,963.24473 "
+         d="M 825.90072,963.24473 V 1105.042 L 960.08286,916.47892 V 809.26931 Z"
+         inkscape:box3dsidetype="6"
+         style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         id="path1340"
+         sodipodi:type="inkscape:box3dside" />
+      <path
+         points="916.41039,1186.6905 1037.562,961.38703 960.08286,916.47892 825.90072,1105.042 "
+         d="m 825.90072,1105.042 90.50967,81.6485 121.15161,-225.30347 -77.47914,-44.90811 z"
+         inkscape:box3dsidetype="13"
+         style="fill:#afafde;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         id="path1342"
+         sodipodi:type="inkscape:box3dside" />
+      <path
+         points="1037.562,845.52555 1037.562,961.38703 960.08286,916.47892 960.08286,809.26931 "
+         d="m 960.08286,809.26931 77.47914,36.25624 v 115.86148 l -77.47914,-44.90811 z"
+         inkscape:box3dsidetype="11"
+         style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         id="path1344"
+         sodipodi:type="inkscape:box3dside" />
+      <path
+         points="916.41039,1029.3537 1037.562,845.52555 960.08286,809.26931 825.90072,963.24473 "
+         d="M 825.90072,963.24473 916.41039,1029.3537 1037.562,845.52555 960.08286,809.26931 Z"
+         inkscape:box3dsidetype="5"
+         style="fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         id="path1346"
+         sodipodi:type="inkscape:box3dside" />
+      <path
+         points="916.41039,1186.6905 1037.562,961.38703 1037.562,845.52555 916.41039,1029.3537 "
+         d="m 916.41039,1029.3537 v 157.3368 L 1037.562,961.38703 V 845.52555 Z"
+         inkscape:box3dsidetype="14"
+         style="fill:#d7d7ff;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         id="path1348"
+         sodipodi:type="inkscape:box3dside" />
+      <path
+         points="916.41039,1029.3537 916.41039,1186.6905 825.90072,1105.042 825.90072,963.24473 "
+         d="m 825.90072,963.24473 90.50967,66.10897 v 157.3368 l -90.50967,-81.6485 z"
+         inkscape:box3dsidetype="3"
+         style="fill:#8686bf;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         id="path1350"
+         sodipodi:type="inkscape:box3dside" />
+    </g>
+    <g
+       inkscape:label="false"
+       inkscape:corner7="-0.30162293 : -0.45734167 : 0.25 : 1"
+       inkscape:corner0="-0.22508846 : -0.3474613 : 0 : 1"
+       inkscape:perspectiveID="#perspective1372"
+       style="fill:#ff0000;stroke:#ff00ff"
+       id="g1366"
+       sodipodi:type="inkscape:box3d">
+      <path
+         points="855.90072,1047.042 978.37453,966.29311 978.37453,859.08349 855.90072,905.24473 "
+         d="M 855.90072,905.24473 V 1047.042 L 978.37453,966.29311 V 859.08349 Z"
+         inkscape:box3dsidetype="6"
+         style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         id="path1354"
+         sodipodi:type="inkscape:box3dside" />
+      <path
+         points="946.41039,1128.6905 1054.9088,1019.9019 978.37453,966.29311 855.90072,1047.042 "
+         d="m 855.90072,1047.042 90.50967,81.6485 108.49841,-108.7886 -76.53427,-53.60879 z"
+         inkscape:box3dsidetype="13"
+         style="fill:#afafde;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         id="path1356"
+         sodipodi:type="inkscape:box3dside" />
+      <path
+         points="1054.9088,904.04039 1054.9088,1019.9019 978.37453,966.29311 978.37453,859.08349 "
+         d="m 978.37453,859.08349 76.53427,44.9569 v 115.86151 l -76.53427,-53.60879 z"
+         inkscape:box3dsidetype="11"
+         style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         id="path1358"
+         sodipodi:type="inkscape:box3dside" />
+      <path
+         points="946.41039,971.35373 1054.9088,904.04039 978.37453,859.08349 855.90072,905.24473 "
+         d="m 855.90072,905.24473 90.50967,66.109 108.49841,-67.31334 -76.53427,-44.9569 z"
+         inkscape:box3dsidetype="5"
+         style="fill:#4d389f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         id="path1360"
+         sodipodi:type="inkscape:box3dside" />
+      <path
+         points="946.41039,1128.6905 1054.9088,1019.9019 1054.9088,904.04039 946.41039,971.35373 "
+         d="M 946.41039,971.35373 V 1128.6905 L 1054.9088,1019.9019 V 904.04039 Z"
+         inkscape:box3dsidetype="14"
+         style="fill:#d78bff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         id="path1362"
+         sodipodi:type="inkscape:box3dside" />
+      <path
+         points="946.41039,971.35373 946.41039,1128.6905 855.90072,1047.042 855.90072,905.24473 "
+         d="m 855.90072,905.24473 90.50967,66.109 v 157.33677 l -90.50967,-81.6485 z"
+         inkscape:box3dsidetype="3"
+         style="fill:#8667bf;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-linejoin:round"
+         id="path1364"
+         sodipodi:type="inkscape:box3dside" />
+    </g>
+  </g>
+  <g
+     transform="matrix(0.63690435,0,0,0.63690435,1576.4961,80.355376)"
+     inkscape:label="HMI:Input@/PUMP0/PRESSURE"
+     id="g1394">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="136.32812"
+       y="218.24219"
+       id="text1380"
+       inkscape:label="value"><tspan
+         sodipodi:role="line"
+         id="tspan1378"
+         x="136.32812"
+         y="218.24219"
+         style="stroke-width:1px">8888</tspan></text>
+    <path
+       inkscape:label="-100"
+       inkscape:transform-center-y="14.956363"
+       d="m 648.55108,-186.34718 -103.62071,0 51.81035,-89.73817 z"
+       inkscape:randomized="0"
+       inkscape:rounded="0"
+       inkscape:flatsided="true"
+       sodipodi:arg2="1.5707963"
+       sodipodi:arg1="0.52359878"
+       sodipodi:r2="29.912722"
+       sodipodi:r1="59.825443"
+       sodipodi:cy="-216.2599"
+       sodipodi:cx="596.74072"
+       sodipodi:sides="3"
+       id="path1382"
+       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"
+       sodipodi:type="star"
+       transform="scale(1,-1)" />
+    <path
+       transform="scale(1,-1)"
+       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:#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="path1384"
+       sodipodi:sides="3"
+       sodipodi:cx="596.74072"
+       sodipodi:cy="-184.98808"
+       sodipodi:r1="29.912722"
+       sodipodi:r2="14.956361"
+       sodipodi:arg1="0.52359878"
+       sodipodi:arg2="1.5707963"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 622.6459,-170.03172 -51.81035,0 25.90517,-44.86908 z"
+       inkscape:transform-center-y="7.4781812"
+       inkscape:label="-10" />
+    <rect
+       inkscape:label="edit"
+       onclick=""
+       y="95.40741"
+       x="139.85185"
+       height="128"
+       width="407.7037"
+       id="rect1386"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;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" />
+    <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:#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="path1388"
+       sodipodi:sides="3"
+       sodipodi:cx="596.74072"
+       sodipodi:cy="105.17262"
+       sodipodi:r1="59.825443"
+       sodipodi:r2="29.912722"
+       sodipodi:arg1="0.52359878"
+       sodipodi:arg2="1.5707963"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 648.55108,135.08534 -103.62071,0 51.81035,-89.738161 z"
+       inkscape:transform-center-y="-14.956361"
+       inkscape:label="+100" />
+    <path
+       inkscape:label="+10"
+       inkscape:transform-center-y="-7.4781804"
+       d="m 622.6459,151.4008 -51.81035,0 25.90517,-44.86908 z"
+       inkscape:randomized="0"
+       inkscape:rounded="0"
+       inkscape:flatsided="true"
+       sodipodi:arg2="1.5707963"
+       sodipodi:arg1="0.52359878"
+       sodipodi:r2="14.956361"
+       sodipodi:r1="29.912722"
+       sodipodi:cy="136.44444"
+       sodipodi:cx="596.74072"
+       sodipodi:sides="3"
+       id="path1390"
+       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"
+       sodipodi:type="star" />
+    <path
+       inkscape:label="=0"
+       inkscape:transform-center-y="-14.956361"
+       d="M 121.35644,205.1862 C 158.18649,167.80191 3.342862,168.95829 40.72715,205.78834 78.111437,242.61839 76.95506,87.774762 40.125008,125.15905 3.2949549,162.54334 158.13858,161.38696 120.7543,124.55691 83.370008,87.726855 84.526385,242.57048 121.35644,205.1862 Z"
+       inkscape:randomized="0"
+       inkscape:rounded="-0.65084865"
+       inkscape:flatsided="true"
+       sodipodi:arg2="1.5633284"
+       sodipodi:arg1="0.77793027"
+       sodipodi:r2="29.912722"
+       sodipodi:r1="57.015106"
+       sodipodi:cy="165.17262"
+       sodipodi:cx="80.740723"
+       sodipodi:sides="4"
+       id="path1392"
+       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"
+       sodipodi:type="star" />
+  </g>
+  <g
+     style="stroke-width:2"
+     inkscape:label="HMI:Input@/PUMP0/STRIN"
+     id="g1442"
+     transform="matrix(0.5,0,0,0.5,1470.1103,205.71623)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="136.32812"
+       y="218.24219"
+       id="text1398"
+       inkscape:label="value"><tspan
+         sodipodi:role="line"
+         id="tspan1396"
+         x="136.32812"
+         y="218.24219"
+         style="stroke-width:2px">8888</tspan></text>
+    <rect
+       inkscape:label="edit"
+       onclick=""
+       y="95.40741"
+       x="139.85185"
+       height="128"
+       width="407.7037"
+       id="rect1400"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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
+       style="stroke-width:2"
+       id="g1408"
+       inkscape:label="+&quot;dhu&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:connector-curvature="0"
+         id="path1402"
+         d="m 797.19546,145.18619 -80.62929,0.60214 -0.60215,-80.629288 80.6293,-0.60214 z"
+         inkscape:transform-center-y="-14.956361"
+         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:none;stroke-width:10;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" />
+      <text
+         id="text1406"
+         y="111.05016"
+         x="733.58197"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:1px"
+           y="111.05016"
+           x="733.58197"
+           id="tspan1404"
+           sodipodi:role="line">dhu</tspan></text>
+    </g>
+    <g
+       style="stroke-width:2"
+       id="g1416"
+       inkscape:label="=&quot;plop&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="14.956371"
+         inkscape:transform-center-y="-3.6154501e-05"
+         d="m 622.6459,-170.03172 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="14.956361"
+         sodipodi:r1="29.912722"
+         sodipodi:cy="-184.98808"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path1410"
+         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:none;stroke-width:10;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"
+         sodipodi:type="star"
+         transform="matrix(0,-2.0000001,1.9999999,0,1034.195,1298.6541)" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="633.09552"
+         y="111.05016"
+         id="text1414"><tspan
+           sodipodi:role="line"
+           id="tspan1412"
+           x="633.09552"
+           y="111.05016"
+           style="stroke-width:1px">plop</tspan></text>
+    </g>
+    <g
+       style="stroke-width:2"
+       id="g1424"
+       inkscape:label="=&quot;mhoo&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="14.956364"
+         transform="rotate(-90,746.45698,-44.543641)"
+         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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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="path1418"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="-216.2599"
+         sodipodi:r1="59.825443"
+         sodipodi:r2="29.912722"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 648.55108,-186.34718 -103.62071,0 51.81035,-89.73817 z"
+         inkscape:transform-center-y="-5.9989963e-06" />
+      <text
+         id="text1422"
+         y="111.05016"
+         x="537.25018"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:1px"
+           y="111.05016"
+           x="537.25018"
+           id="tspan1420"
+           sodipodi:role="line">mhoo</tspan></text>
+    </g>
+    <g
+       style="stroke-width:2"
+       id="g1432"
+       inkscape:label="=&quot;yodl&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="-14.956365"
+         transform="matrix(0,-1,-1,0,1043.9134,701.91334)"
+         inkscape:transform-center-y="-5.5023185e-06"
+         d="m 648.55108,135.08534 -103.62071,0 51.81035,-89.738161 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="29.912722"
+         sodipodi:r1="59.825443"
+         sodipodi:cy="105.17262"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path1426"
+         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:none;stroke-width:10;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"
+         sodipodi:type="star" />
+      <text
+         id="text1430"
+         y="111.05016"
+         x="925.82605"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:1px"
+           y="111.05016"
+           x="925.82605"
+           id="tspan1428"
+           sodipodi:role="line">yodl</tspan></text>
+    </g>
+    <g
+       style="stroke-width:2"
+       id="g1440"
+       inkscape:label="=&quot;mhe&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="-14.956349"
+         transform="matrix(0,-2.0000001,-1.9999999,0,1122.1514,1298.6541)"
+         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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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="path1434"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="136.44444"
+         sodipodi:r1="29.912722"
+         sodipodi:r2="14.956361"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 622.6459,151.4008 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:transform-center-y="-3.3040441e-05" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="842.71497"
+         y="111.05016"
+         id="text1438"><tspan
+           sodipodi:role="line"
+           id="tspan1436"
+           x="842.71497"
+           y="111.05016"
+           style="stroke-width:1px">mhe</tspan></text>
+    </g>
+  </g>
+  <text
+     inkscape:label="HMI:Display@/PUMP0/STROUT"
+     id="text1446"
+     y="469.12109"
+     x="1578.1641"
+     style="font-style:normal;font-weight:normal;font-size:80px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.5px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"><tspan
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.5px"
+       y="469.12109"
+       x="1578.1641"
+       id="tspan1444"
+       sodipodi:role="line">8888</tspan></text>
+  <g
+     transform="matrix(0.57180538,0,0,0.57180538,-153.64055,248.51305)"
+     inkscape:label="HMI:Jump:RelativePageTest@/PUMP0"
+     id="g1458">
+    <g
+       inkscape:label="button"
+       id="g1450">
+      <rect
+         inkscape:label="button"
+         ry="35.579063"
+         y="594.82263"
+         x="971.96545"
+         height="95.723877"
+         width="245.44583"
+         id="rect1448"
+         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">
+      <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"
+         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">Pump 0</tspan></text>
+    </g>
+  </g>
+  <g
+     id="g1475"
+     inkscape:label="HMI:Jump:RelativePageTest@/PUMP1"
+     transform="matrix(0.57180538,0,0,0.57180538,6.35945,248.51305)">
+    <g
+       id="g1467"
+       inkscape:label="button">
+      <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;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"
+         width="245.44583"
+         height="95.723877"
+         x="971.96545"
+         y="594.82263"
+         ry="35.579063"
+         inkscape:label="button" />
+    </g>
+    <g
+       id="g1473"
+       inkscape:label="text">
+      <text
+         inkscape:label="setting_jmp"
+         id="text1471"
+         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"
+           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" /></text>
+    </g>
+  </g>
+  <g
+     transform="matrix(0.57180538,0,0,0.57180538,166.35945,248.51305)"
+     inkscape:label="HMI:Jump:RelativePageTest@/PUMP2"
+     id="g1491">
+    <g
+       inkscape:label="button"
+       id="g1481">
+      <rect
+         inkscape:label="button"
+         ry="35.579063"
+         y="594.82263"
+         x="971.96545"
+         height="95.723877"
+         width="245.44583"
+         id="rect1479"
+         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">
+      <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"
+         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">Pump 2</tspan><tspan
+           id="tspan1485"
+           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"
+     inkscape:label="HMI:Jump:RelativePageTest@/PUMP3"
+     transform="matrix(0.57180538,0,0,0.57180538,326.35945,248.51305)">
+    <g
+       id="g1499"
+       inkscape:label="button">
+      <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;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"
+         width="245.44583"
+         height="95.723877"
+         x="971.96545"
+         y="594.82263"
+         ry="35.579063"
+         inkscape:label="button" />
+    </g>
+    <g
+       id="g1507"
+       inkscape:label="text">
+      <text
+         inkscape:label="setting_jmp"
+         id="text1505"
+         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">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" /></text>
+    </g>
+  </g>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:55.09014511px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.34431386px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="403.8551"
+     y="700.05371"
+     id="text1517"
+     inkscape:label="HMI:Display@/PUMP0/STROUT"><tspan
+       sodipodi:role="line"
+       id="tspan1515"
+       x="403.8551"
+       y="700.05371"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.34431386px">8888</tspan></text>
+  <text
+     inkscape:label="HMI:Display@/PUMP1/STROUT"
+     id="text1521"
+     y="700.05371"
+     x="563.8551"
+     style="font-style:normal;font-weight:normal;font-size:55.09014511px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.34431386px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"><tspan
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.34431386px"
+       y="700.05371"
+       x="563.8551"
+       id="tspan1519"
+       sodipodi:role="line">8888</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:55.09014511px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.34431386px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="723.8551"
+     y="700.05371"
+     id="text1525"
+     inkscape:label="HMI:Display@/PUMP2/STROUT"><tspan
+       sodipodi:role="line"
+       id="tspan1523"
+       x="723.8551"
+       y="700.05371"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.34431386px">8888</tspan></text>
+  <text
+     inkscape:label="HMI:Display@/PUMP3/STROUT"
+     id="text1529"
+     y="700.05371"
+     x="883.8551"
+     style="font-style:normal;font-weight:normal;font-size:55.09014511px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.34431386px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"><tspan
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.34431386px"
+       y="700.05371"
+       x="883.8551"
+       id="tspan1527"
+       sodipodi:role="line">8888</tspan></text>
+  <g
+     id="g6077"
+     inkscape:label="HMI:ForEach:PUMP@/">
+    <g
+       id="g6130"
+       inkscape:label="PUMP:1">
+      <g
+         transform="matrix(0.57180538,0,0,0.57180538,1024.0513,-317.49049)"
+         inkscape:label="HMI:Jump:RelativePageTest@/PUMP0"
+         id="g1458-8">
+        <g
+           inkscape:label="button"
+           id="g1450-4">
+          <rect
+             inkscape:label="button"
+             ry="35.579063"
+             y="594.82263"
+             x="971.96545"
+             height="95.723877"
+             width="245.44583"
+             id="rect1448-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:#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-1">
+          <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="1038.2972"
+             y="635.99542"
+             id="text1454-0"
+             inkscape:label="setting_jmp"><tspan
+               sodipodi:role="line"
+               x="1038.2972"
+               y="635.99542"
+               style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px"
+               id="tspan1460-3">Pump</tspan></text>
+          <text
+             xml:space="preserve"
+             style="font-style:normal;font-weight:normal;font-size:39.32668304px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.24579209px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+             x="992.45087"
+             y="674.76117"
+             id="text1517-8"
+             inkscape:label="HMI:Display@/PUMP0/STROUT"><tspan
+               sodipodi:role="line"
+               id="tspan1515-5"
+               x="992.45087"
+               y="674.76117"
+               style="fill:#000000;fill-opacity:1;stroke-width:0.24579209px">8888</tspan></text>
+        </g>
+      </g>
+    </g>
+    <g
+       id="g6122"
+       inkscape:label="PUMP:2">
+      <g
+         id="g1475-0"
+         inkscape:label="HMI:Jump:RelativePageTest@/PUMP1"
+         transform="matrix(0.57180538,0,0,0.57180538,1184.0513,-317.49049)">
+        <g
+           id="g1467-4"
+           inkscape:label="button">
+          <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;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-4"
+             width="245.44583"
+             height="95.723877"
+             x="971.96545"
+             y="594.82263"
+             ry="35.579063"
+             inkscape:label="button" />
+        </g>
+        <g
+           id="g1473-4"
+           inkscape:label="text">
+          <text
+             inkscape:label="setting_jmp"
+             id="text1471-4"
+             y="635.99542"
+             x="1038.2972"
+             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="635.99542"
+               x="1038.2972"
+               sodipodi:role="line"
+               id="tspan1477-6">Pump</tspan></text>
+          <text
+             xml:space="preserve"
+             style="font-style:normal;font-weight:normal;font-size:39.32668304px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.24579208px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+             x="992.8111"
+             y="674.76117"
+             id="text1517-8-5"
+             inkscape:label="HMI:Display@/PUMP1/STROUT"><tspan
+               sodipodi:role="line"
+               id="tspan1515-5-3"
+               x="992.8111"
+               y="674.76117"
+               style="fill:#000000;fill-opacity:1;stroke-width:0.24579208px">8888</tspan></text>
+        </g>
+      </g>
+    </g>
+    <g
+       id="g6113"
+       inkscape:label="PUMP:3">
+      <g
+         transform="matrix(0.57180538,0,0,0.57180538,1344.0513,-317.49049)"
+         inkscape:label="HMI:Jump:RelativePageTest@/PUMP2"
+         id="g1491-3">
+        <g
+           inkscape:label="button"
+           id="g1481-1">
+          <rect
+             inkscape:label="button"
+             ry="35.579063"
+             y="594.82263"
+             x="971.96545"
+             height="95.723877"
+             width="245.44583"
+             id="rect1479-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:#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-5">
+          <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="1038.2972"
+             y="635.99542"
+             id="text1487-9"
+             inkscape:label="setting_jmp"><tspan
+               id="tspan1485-2"
+               sodipodi:role="line"
+               x="1038.2972"
+               y="635.99542"
+               style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px">Pump</tspan></text>
+          <text
+             xml:space="preserve"
+             style="font-style:normal;font-weight:normal;font-size:39.32668304px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.24579208px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+             x="993.17108"
+             y="674.76117"
+             id="text1517-8-8"
+             inkscape:label="HMI:Display@/PUMP2/STROUT"><tspan
+               sodipodi:role="line"
+               id="tspan1515-5-8"
+               x="993.17108"
+               y="674.76117"
+               style="fill:#000000;fill-opacity:1;stroke-width:0.24579208px">8888</tspan></text>
+        </g>
+      </g>
+    </g>
+    <g
+       id="g6104"
+       inkscape:label="PUMP:4">
+      <g
+         id="g1509-1"
+         inkscape:label="HMI:Jump:RelativePageTest@/PUMP3"
+         transform="matrix(0.57180538,0,0,0.57180538,1504.0513,-317.49049)">
+        <g
+           id="g1499-7"
+           inkscape:label="button">
+          <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;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-8"
+             width="245.44583"
+             height="95.723877"
+             x="971.96545"
+             y="594.82263"
+             ry="35.579063"
+             inkscape:label="button" />
+        </g>
+        <g
+           id="g1507-5"
+           inkscape:label="text">
+          <text
+             inkscape:label="setting_jmp"
+             id="text1505-7"
+             y="635.99542"
+             x="1038.2972"
+             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="635.99542"
+               x="1038.2972"
+               sodipodi:role="line"
+               id="tspan1511-4">Pump</tspan><tspan
+               style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px"
+               y="685.99542"
+               x="1038.2972"
+               sodipodi:role="line"
+               id="tspan1503-1" /></text>
+          <text
+             xml:space="preserve"
+             style="font-style:normal;font-weight:normal;font-size:39.32668304px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.24579208px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+             x="993.53101"
+             y="674.76117"
+             id="text1517-8-3"
+             inkscape:label="HMI:Display@/PUMP3/STROUT"><tspan
+               sodipodi:role="line"
+               id="tspan1515-5-1"
+               x="993.53101"
+               y="674.76117"
+               style="fill:#000000;fill-opacity:1;stroke-width:0.24579208px">8888</tspan></text>
+        </g>
+      </g>
+    </g>
+    <g
+       inkscape:label="PUMP:+1"
+       id="g6241"
+       transform="matrix(0.57180538,0,0,0.57180538,1461.2541,-321.48847)">
+      <rect
+         style="fill:#000000;fill-opacity:1;stroke:#ff0000;stroke-width:1.74884677"
+         id="rect6235"
+         width="89.036743"
+         height="79.143768"
+         x="1326.8333"
+         y="612.41589"
+         rx="22.385239"
+         ry="20.986162" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:42.81540298px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.0703851"
+         x="1340.5292"
+         y="663.73657"
+         id="text6239"><tspan
+           sodipodi:role="line"
+           id="tspan6237"
+           x="1340.5292"
+           y="663.73657"
+           style="fill:#ffffff;stroke-width:1.0703851">+1</tspan></text>
+    </g>
+    <g
+       transform="matrix(0.57180538,0,0,0.57180538,752.02604,-322.19558)"
+       id="g6209"
+       inkscape:label="PUMP:-1">
+      <rect
+         ry="20.986162"
+         rx="22.385239"
+         y="612.41589"
+         x="1326.8333"
+         height="79.143768"
+         width="89.036743"
+         id="rect6200"
+         style="fill:#000000;fill-opacity:1;stroke:#ff0000;stroke-width:1.74884677" />
+      <text
+         id="text6204"
+         y="663.73657"
+         x="1340.5292"
+         style="font-style:normal;font-weight:normal;font-size:42.81540298px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.0703851"
+         xml:space="preserve"><tspan
+           style="fill:#ffffff;stroke-width:1.0703851"
+           y="663.73657"
+           x="1340.5292"
+           id="tspan6202"
+           sodipodi:role="line">-1</tspan></text>
+    </g>
+  </g>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:59.01374435px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#82ff77;fill-opacity:1;stroke:none;stroke-width:0.3688359px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="689.9715"
+     y="539.24927"
+     id="text995-6"
+     inkscape:label="HMI:Display:Ploc %d (%d) grmbl !@/PUMP0/PRESSURE@/PUMP0/SLOTH"><tspan
+       sodipodi:role="line"
+       id="tspan993-3"
+       x="689.9715"
+       y="539.24927"
+       style="text-align:center;text-anchor:middle;fill:#82ff77;fill-opacity:1;stroke-width:0.3688359px">8888</tspan></text>
+  <text
+     id="text831-1"
+     y="477.76758"
+     x="581.62634"
+     style="font-style:normal;font-weight:normal;font-size:25.4761734px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#008000;fill-opacity:1;stroke:none;stroke-width:0.63690436px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"
+     inkscape:label="actual_label"><tspan
+       y="477.76758"
+       x="581.62634"
+       id="tspan829-7"
+       sodipodi:role="line"
+       style="stroke-width:0.63690436px">Multiple variables</tspan></text>
+  <text
+     inkscape:label="HMI:Display@paff"
+     id="text1457"
+     y="68.844757"
+     x="750.28473"
+     style="font-style:normal;font-weight:normal;font-size:22.87221527px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.28590268px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"><tspan
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.28590268px"
+       y="68.844757"
+       x="750.28473"
+       id="tspan1455"
+       sodipodi:role="line">8888</tspan></text>
+  <g
+     style="stroke-width:4"
+     inkscape:label="HMI:Input@paff"
+     id="g1505"
+     transform="matrix(0.14295135,0,0,0.14295135,589.21833,37.615184)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="136.32812"
+       y="218.24219"
+       id="text1461"
+       inkscape:label="value"><tspan
+         sodipodi:role="line"
+         id="tspan1459"
+         x="136.32812"
+         y="218.24219"
+         style="stroke-width:4px">8888</tspan></text>
+    <rect
+       inkscape:label="edit"
+       onclick=""
+       y="95.40741"
+       x="139.85185"
+       height="128"
+       width="407.7037"
+       id="rect1463"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;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
+       style="stroke-width:4"
+       id="g1471"
+       inkscape:label="+&quot;dhu&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:connector-curvature="0"
+         id="path1465"
+         d="m 797.19546,145.18619 -80.62929,0.60214 -0.60215,-80.629288 80.6293,-0.60214 z"
+         inkscape:transform-center-y="-14.956361"
+         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:none;stroke-width:20;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" />
+      <text
+         id="text1469"
+         y="111.05016"
+         x="733.58197"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:2px"
+           y="111.05016"
+           x="733.58197"
+           id="tspan1467"
+           sodipodi:role="line">dhu</tspan></text>
+    </g>
+    <g
+       style="stroke-width:4"
+       id="g1479"
+       inkscape:label="=&quot;plop&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="14.956371"
+         inkscape:transform-center-y="-3.6154501e-05"
+         d="m 622.6459,-170.03172 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="14.956361"
+         sodipodi:r1="29.912722"
+         sodipodi:cy="-184.98808"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path1473"
+         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:none;stroke-width:20;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"
+         sodipodi:type="star"
+         transform="matrix(0,-2.0000001,1.9999999,0,1034.195,1298.6541)" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="633.09552"
+         y="111.05016"
+         id="text1477"><tspan
+           sodipodi:role="line"
+           id="tspan1475"
+           x="633.09552"
+           y="111.05016"
+           style="stroke-width:2px">plop</tspan></text>
+    </g>
+    <g
+       style="stroke-width:4"
+       id="g1487"
+       inkscape:label="=&quot;mhoo&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="14.956364"
+         transform="rotate(-90,746.45698,-44.543641)"
+         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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;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="path1481"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="-216.2599"
+         sodipodi:r1="59.825443"
+         sodipodi:r2="29.912722"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 648.55108,-186.34718 -103.62071,0 51.81035,-89.73817 z"
+         inkscape:transform-center-y="-5.9989963e-06" />
+      <text
+         id="text1485"
+         y="111.05016"
+         x="537.25018"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:2px"
+           y="111.05016"
+           x="537.25018"
+           id="tspan1483"
+           sodipodi:role="line">mhoo</tspan></text>
+    </g>
+    <g
+       style="stroke-width:4"
+       id="g1495"
+       inkscape:label="=&quot;yodl&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="-14.956365"
+         transform="matrix(0,-1,-1,0,1043.9134,701.91334)"
+         inkscape:transform-center-y="-5.5023185e-06"
+         d="m 648.55108,135.08534 -103.62071,0 51.81035,-89.738161 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="29.912722"
+         sodipodi:r1="59.825443"
+         sodipodi:cy="105.17262"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path1489"
+         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:none;stroke-width:20;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"
+         sodipodi:type="star" />
+      <text
+         id="text1493"
+         y="111.05016"
+         x="925.82605"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:2px"
+           y="111.05016"
+           x="925.82605"
+           id="tspan1491"
+           sodipodi:role="line">yodl</tspan></text>
+    </g>
+    <g
+       style="stroke-width:4"
+       id="g1503"
+       inkscape:label="=&quot;mhe&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="-14.956349"
+         transform="matrix(0,-2.0000001,-1.9999999,0,1122.1514,1298.6541)"
+         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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;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="path1497"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="136.44444"
+         sodipodi:r1="29.912722"
+         sodipodi:r2="14.956361"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 622.6459,151.4008 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:transform-center-y="-3.3040441e-05" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="842.71497"
+         y="111.05016"
+         id="text1501"><tspan
+           sodipodi:role="line"
+           id="tspan1499"
+           x="842.71497"
+           y="111.05016"
+           style="stroke-width:2px">mhe</tspan></text>
+    </g>
+  </g>
+  <text
+     inkscape:label="actual_label"
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:12.7380867px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#008000;fill-opacity:1;stroke:none;stroke-width:0.63690436px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="509.67926"
+     y="43.42762"
+     id="text1527"><tspan
+       style="stroke-width:0.63690436px"
+       sodipodi:role="line"
+       id="tspan1525"
+       x="509.67926"
+       y="43.42762">HMI_LOCAL variables</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:22.87221527px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.28590268px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="750.28473"
+     y="128.84476"
+     id="text1557"
+     inkscape:label="HMI:Display@.piff"><tspan
+       sodipodi:role="line"
+       id="tspan1555"
+       x="750.28473"
+       y="128.84476"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.28590268px">8888</tspan></text>
+  <g
+     transform="matrix(0.14295135,0,0,0.14295135,589.21833,97.61518)"
+     id="g1605"
+     inkscape:label="HMI:Input@.piff"
+     style="stroke-width:4">
+    <text
+       inkscape:label="value"
+       id="text1561"
+       y="218.24219"
+       x="136.32812"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         style="stroke-width:4px"
+         y="218.24219"
+         x="136.32812"
+         id="tspan1559"
+         sodipodi:role="line">8888</tspan></text>
+    <rect
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;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="rect1563"
+       width="407.7037"
+       height="128"
+       x="139.85185"
+       y="95.40741"
+       onclick=""
+       inkscape:label="edit" />
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="+&quot;dhu&quot;"
+       id="g1571"
+       style="stroke-width:4">
+      <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:none;stroke-width:20;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"
+         inkscape:transform-center-y="-14.956361"
+         d="m 797.19546,145.18619 -80.62929,0.60214 -0.60215,-80.629288 80.6293,-0.60214 z"
+         id="path1565"
+         inkscape:connector-curvature="0" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="733.58197"
+         y="111.05016"
+         id="text1569"><tspan
+           sodipodi:role="line"
+           id="tspan1567"
+           x="733.58197"
+           y="111.05016"
+           style="stroke-width:2px">dhu</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;plop&quot;"
+       id="g1579"
+       style="stroke-width:4">
+      <path
+         transform="matrix(0,-2.0000001,1.9999999,0,1034.195,1298.6541)"
+         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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;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="path1573"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="-184.98808"
+         sodipodi:r1="29.912722"
+         sodipodi:r2="14.956361"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 622.6459,-170.03172 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:transform-center-y="-3.6154501e-05"
+         inkscape:transform-center-x="14.956371" />
+      <text
+         id="text1577"
+         y="111.05016"
+         x="633.09552"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:2px"
+           y="111.05016"
+           x="633.09552"
+           id="tspan1575"
+           sodipodi:role="line">plop</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;mhoo&quot;"
+       id="g1587"
+       style="stroke-width:4">
+      <path
+         inkscape:transform-center-y="-5.9989963e-06"
+         d="m 648.55108,-186.34718 -103.62071,0 51.81035,-89.73817 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="29.912722"
+         sodipodi:r1="59.825443"
+         sodipodi:cy="-216.2599"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path1581"
+         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:none;stroke-width:20;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"
+         sodipodi:type="star"
+         transform="rotate(-90,746.45698,-44.543641)"
+         inkscape:transform-center-x="14.956364" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="537.25018"
+         y="111.05016"
+         id="text1585"><tspan
+           sodipodi:role="line"
+           id="tspan1583"
+           x="537.25018"
+           y="111.05016"
+           style="stroke-width:2px">mhoo</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;yodl&quot;"
+       id="g1595"
+       style="stroke-width:4">
+      <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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;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="path1589"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="105.17262"
+         sodipodi:r1="59.825443"
+         sodipodi:r2="29.912722"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 648.55108,135.08534 -103.62071,0 51.81035,-89.738161 z"
+         inkscape:transform-center-y="-5.5023185e-06"
+         transform="matrix(0,-1,-1,0,1043.9134,701.91334)"
+         inkscape:transform-center-x="-14.956365" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="925.82605"
+         y="111.05016"
+         id="text1593"><tspan
+           sodipodi:role="line"
+           id="tspan1591"
+           x="925.82605"
+           y="111.05016"
+           style="stroke-width:2px">yodl</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;mhe&quot;"
+       id="g1603"
+       style="stroke-width:4">
+      <path
+         inkscape:transform-center-y="-3.3040441e-05"
+         d="m 622.6459,151.4008 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="14.956361"
+         sodipodi:r1="29.912722"
+         sodipodi:cy="136.44444"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path1597"
+         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:none;stroke-width:20;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"
+         sodipodi:type="star"
+         transform="matrix(0,-2.0000001,-1.9999999,0,1122.1514,1298.6541)"
+         inkscape:transform-center-x="-14.956349" />
+      <text
+         id="text1601"
+         y="111.05016"
+         x="842.71497"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:2px"
+           y="111.05016"
+           x="842.71497"
+           id="tspan1599"
+           sodipodi:role="line">mhe</tspan></text>
+    </g>
+  </g>
+  <text
+     id="text1609"
+     y="103.42763"
+     x="509.67926"
+     style="font-style:normal;font-weight:normal;font-size:12.7380867px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#008000;fill-opacity:1;stroke:none;stroke-width:0.63690436px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"
+     inkscape:label="actual_label"><tspan
+       y="103.42763"
+       x="509.67926"
+       sodipodi:role="line"
+       style="stroke-width:0.63690436px"
+       id="tspan1611">PAGE_LOCAL variables</tspan></text>
+  <g
+     inkscape:label="HMI:Meter@level"
+     transform="matrix(2.1611542,0,0,2.1611542,602.76714,428.92423)"
+     id="g709">
+    <path
+       inkscape:label="range"
+       sodipodi:open="true"
+       d="M 63.610123,2.2017068 A 64.411957,64.411957 0 0 1 128.02208,-62.210247"
+       sodipodi:end="4.712389"
+       sodipodi:start="3.1415927"
+       sodipodi:ry="64.411957"
+       sodipodi:rx="64.411957"
+       sodipodi:cy="2.2017097"
+       sodipodi:cx="128.02208"
+       sodipodi:type="arc"
+       id="path689"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ff7f2a;stroke-width:26.45833397;stroke-miterlimit:4;stroke-dasharray:2.64583333, 2.64583333;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       inkscape:label="needle"
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path691"
+       d="M 130.96206,4.0725977 79.111776,-41.363223"
+       style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ff3000;stroke-width:2.96333337;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:0, 32.59666667;stroke-dashoffset:29.63333321;stroke-opacity:1;marker-end:url(#marker1971)" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:125%;font-family:sans-serif;text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="49.132977"
+       y="4.9187088"
+       id="text695"
+       inkscape:label="min"><tspan
+         sodipodi:role="line"
+         id="tspan693"
+         x="49.132977"
+         y="4.9187088"
+         style="text-align:end;text-anchor:end;fill:#ff6600;stroke-width:0.26458332px">0</tspan></text>
+    <text
+       id="text699"
+       y="-78.144218"
+       x="127.48073"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"
+       inkscape:label="max"><tspan
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.26458332px"
+         y="-78.144218"
+         x="127.48073"
+         id="tspan697"
+         sodipodi:role="line">10000</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="113.53007"
+       y="-6.1937833"
+       id="text703"
+       inkscape:label="value"><tspan
+         sodipodi:role="line"
+         x="113.53007"
+         y="-6.1937833"
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.26458332px"
+         id="tspan701">000</tspan></text>
+    <text
+       inkscape:label="unit"
+       id="text707"
+       y="1.1408259"
+       x="124.77896"
+       style="font-style:normal;font-weight:normal;font-size:7.5467205px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         id="tspan705"
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.26458332px"
+         y="1.1408259"
+         x="124.77896"
+         sodipodi:role="line">bar</tspan></text>
+  </g>
+  <g
+     id="g84-3"
+     inkscape:label="HMI:Input@level"
+     transform="matrix(0.35865594,0,0,0.35865594,458.57767,253.49106)">
+    <text
+       inkscape:label="value"
+       id="text5151-6"
+       y="218.24219"
+       x="136.32812"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         style="stroke-width:1px"
+         y="218.24219"
+         x="136.32812"
+         id="tspan5149-7"
+         sodipodi:role="line">8888</tspan></text>
+    <path
+       transform="scale(1,-1)"
+       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:#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="path89-5"
+       sodipodi:sides="3"
+       sodipodi:cx="596.74072"
+       sodipodi:cy="-216.2599"
+       sodipodi:r1="59.825443"
+       sodipodi:r2="29.912722"
+       sodipodi:arg1="0.52359878"
+       sodipodi:arg2="1.5707963"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 648.55108,-186.34718 -103.62071,0 51.81035,-89.73817 z"
+       inkscape:transform-center-y="14.956363"
+       inkscape:label="-100" />
+    <path
+       inkscape:label="-10"
+       inkscape:transform-center-y="7.4781812"
+       d="m 622.6459,-170.03172 -51.81035,0 25.90517,-44.86908 z"
+       inkscape:randomized="0"
+       inkscape:rounded="0"
+       inkscape:flatsided="true"
+       sodipodi:arg2="1.5707963"
+       sodipodi:arg1="0.52359878"
+       sodipodi:r2="14.956361"
+       sodipodi:r1="29.912722"
+       sodipodi:cy="-184.98808"
+       sodipodi:cx="596.74072"
+       sodipodi:sides="3"
+       id="path88-3"
+       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"
+       sodipodi:type="star"
+       transform="scale(1,-1)" />
+    <rect
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;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="rect85-5"
+       width="407.7037"
+       height="128"
+       x="139.85185"
+       y="95.40741"
+       onclick=""
+       inkscape:label="edit" />
+    <path
+       inkscape:label="+100"
+       inkscape:transform-center-y="-14.956361"
+       d="m 648.55108,135.08534 -103.62071,0 51.81035,-89.738161 z"
+       inkscape:randomized="0"
+       inkscape:rounded="0"
+       inkscape:flatsided="true"
+       sodipodi:arg2="1.5707963"
+       sodipodi:arg1="0.52359878"
+       sodipodi:r2="29.912722"
+       sodipodi:r1="59.825443"
+       sodipodi:cy="105.17262"
+       sodipodi:cx="596.74072"
+       sodipodi:sides="3"
+       id="path87-6"
+       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"
+       sodipodi:type="star" />
+    <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:#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="path86-2"
+       sodipodi:sides="3"
+       sodipodi:cx="596.74072"
+       sodipodi:cy="136.44444"
+       sodipodi:r1="29.912722"
+       sodipodi:r2="14.956361"
+       sodipodi:arg1="0.52359878"
+       sodipodi:arg2="1.5707963"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 622.6459,151.4008 -51.81035,0 25.90517,-44.86908 z"
+       inkscape:transform-center-y="-7.4781804"
+       inkscape:label="+10" />
+    <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:#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="path91-9"
+       sodipodi:sides="4"
+       sodipodi:cx="80.740723"
+       sodipodi:cy="165.17262"
+       sodipodi:r1="57.015106"
+       sodipodi:r2="29.912722"
+       sodipodi:arg1="0.77793027"
+       sodipodi:arg2="1.5633284"
+       inkscape:flatsided="true"
+       inkscape:rounded="-0.65084865"
+       inkscape:randomized="0"
+       d="M 121.35644,205.1862 C 158.18649,167.80191 3.342862,168.95829 40.72715,205.78834 78.111437,242.61839 76.95506,87.774762 40.125008,125.15905 3.2949549,162.54334 158.13858,161.38696 120.7543,124.55691 83.370008,87.726855 84.526385,242.57048 121.35644,205.1862 Z"
+       inkscape:transform-center-y="-14.956361"
+       inkscape:label="=0" />
+  </g>
+  <text
+     inkscape:label="HMI:Display@paff"
+     id="text1457-1"
+     y="215.65211"
+     x="2632.9148"
+     style="font-style:normal;font-weight:normal;font-size:45.74443054px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.28590268px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"><tspan
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.28590268px"
+       y="215.65211"
+       x="2632.9148"
+       id="tspan1455-2"
+       sodipodi:role="line">8888</tspan></text>
+  <g
+     style="stroke-width:2"
+     inkscape:label="HMI:Input@paff"
+     id="g1505-7"
+     transform="matrix(0.28590269,0,0,0.28590269,2430.782,153.19299)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="136.32812"
+       y="218.24219"
+       id="text1461-0"
+       inkscape:label="value"><tspan
+         sodipodi:role="line"
+         id="tspan1459-9"
+         x="136.32812"
+         y="218.24219"
+         style="stroke-width:2px">8888</tspan></text>
+    <rect
+       inkscape:label="edit"
+       onclick=""
+       y="95.40741"
+       x="139.85185"
+       height="128"
+       width="407.7037"
+       id="rect1463-3"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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
+       style="stroke-width:2"
+       id="g1471-6"
+       inkscape:label="+&quot;dhu&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:connector-curvature="0"
+         id="path1465-0"
+         d="m 797.19546,145.18619 -80.62929,0.60214 -0.60215,-80.629288 80.6293,-0.60214 z"
+         inkscape:transform-center-y="-14.956361"
+         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:none;stroke-width:10;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" />
+      <text
+         id="text1469-6"
+         y="111.05016"
+         x="733.58197"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:1px"
+           y="111.05016"
+           x="733.58197"
+           id="tspan1467-2"
+           sodipodi:role="line">dhu</tspan></text>
+    </g>
+    <g
+       style="stroke-width:2"
+       id="g1479-6"
+       inkscape:label="=&quot;plop&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="14.956371"
+         inkscape:transform-center-y="-3.6154501e-05"
+         d="m 622.6459,-170.03172 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="14.956361"
+         sodipodi:r1="29.912722"
+         sodipodi:cy="-184.98808"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path1473-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:none;stroke-width:10;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"
+         sodipodi:type="star"
+         transform="matrix(0,-2.0000001,1.9999999,0,1034.195,1298.6541)" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="633.09552"
+         y="111.05016"
+         id="text1477-8"><tspan
+           sodipodi:role="line"
+           id="tspan1475-7"
+           x="633.09552"
+           y="111.05016"
+           style="stroke-width:1px">plop</tspan></text>
+    </g>
+    <g
+       style="stroke-width:2"
+       id="g1487-9"
+       inkscape:label="=&quot;mhoo&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="14.956364"
+         transform="rotate(-90,746.45698,-44.543641)"
+         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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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="path1481-2"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="-216.2599"
+         sodipodi:r1="59.825443"
+         sodipodi:r2="29.912722"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 648.55108,-186.34718 -103.62071,0 51.81035,-89.73817 z"
+         inkscape:transform-center-y="-5.9989963e-06" />
+      <text
+         id="text1485-0"
+         y="111.05016"
+         x="537.25018"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:1px"
+           y="111.05016"
+           x="537.25018"
+           id="tspan1483-2"
+           sodipodi:role="line">mhoo</tspan></text>
+    </g>
+    <g
+       style="stroke-width:2"
+       id="g1495-3"
+       inkscape:label="=&quot;yodl&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="-14.956365"
+         transform="matrix(0,-1,-1,0,1043.9134,701.91334)"
+         inkscape:transform-center-y="-5.5023185e-06"
+         d="m 648.55108,135.08534 -103.62071,0 51.81035,-89.738161 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="29.912722"
+         sodipodi:r1="59.825443"
+         sodipodi:cy="105.17262"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path1489-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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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"
+         sodipodi:type="star" />
+      <text
+         id="text1493-5"
+         y="111.05016"
+         x="925.82605"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:1px"
+           y="111.05016"
+           x="925.82605"
+           id="tspan1491-9"
+           sodipodi:role="line">yodl</tspan></text>
+    </g>
+    <g
+       style="stroke-width:2"
+       id="g1503-2"
+       inkscape:label="=&quot;mhe&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="-14.956349"
+         transform="matrix(0,-2.0000001,-1.9999999,0,1122.1514,1298.6541)"
+         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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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="path1497-2"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="136.44444"
+         sodipodi:r1="29.912722"
+         sodipodi:r2="14.956361"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 622.6459,151.4008 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:transform-center-y="-3.3040441e-05" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="842.71497"
+         y="111.05016"
+         id="text1501-8"><tspan
+           sodipodi:role="line"
+           id="tspan1499-9"
+           x="842.71497"
+           y="111.05016"
+           style="stroke-width:1px">mhe</tspan></text>
+    </g>
+  </g>
+  <text
+     inkscape:label="actual_label"
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:25.4761734px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#008000;fill-opacity:1;stroke:none;stroke-width:0.63690436px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="2471.7039"
+     y="164.81787"
+     id="text1527-7"><tspan
+       style="stroke-width:0.63690436px"
+       sodipodi:role="line"
+       id="tspan1525-3"
+       x="2471.7039"
+       y="164.81787">HMI_LOCAL variables</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:45.74443054px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.28590268px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="2632.9148"
+     y="335.65213"
+     id="text1557-6"
+     inkscape:label="HMI:Display@.piff"><tspan
+       sodipodi:role="line"
+       id="tspan1555-1"
+       x="2632.9148"
+       y="335.65213"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.28590268px">8888</tspan></text>
+  <g
+     transform="matrix(0.28590269,0,0,0.28590269,2430.782,273.19298)"
+     id="g1605-2"
+     inkscape:label="HMI:Input@.piff"
+     style="stroke-width:2">
+    <text
+       inkscape:label="value"
+       id="text1561-9"
+       y="218.24219"
+       x="136.32812"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         style="stroke-width:2px"
+         y="218.24219"
+         x="136.32812"
+         id="tspan1559-3"
+         sodipodi:role="line">8888</tspan></text>
+    <rect
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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="rect1563-1"
+       width="407.7037"
+       height="128"
+       x="139.85185"
+       y="95.40741"
+       onclick=""
+       inkscape:label="edit" />
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="+&quot;dhu&quot;"
+       id="g1571-9"
+       style="stroke-width:2">
+      <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:none;stroke-width:10;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"
+         inkscape:transform-center-y="-14.956361"
+         d="m 797.19546,145.18619 -80.62929,0.60214 -0.60215,-80.629288 80.6293,-0.60214 z"
+         id="path1565-4"
+         inkscape:connector-curvature="0" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="733.58197"
+         y="111.05016"
+         id="text1569-7"><tspan
+           sodipodi:role="line"
+           id="tspan1567-8"
+           x="733.58197"
+           y="111.05016"
+           style="stroke-width:1px">dhu</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;plop&quot;"
+       id="g1579-4"
+       style="stroke-width:2">
+      <path
+         transform="matrix(0,-2.0000001,1.9999999,0,1034.195,1298.6541)"
+         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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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="path1573-5"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="-184.98808"
+         sodipodi:r1="29.912722"
+         sodipodi:r2="14.956361"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 622.6459,-170.03172 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:transform-center-y="-3.6154501e-05"
+         inkscape:transform-center-x="14.956371" />
+      <text
+         id="text1577-0"
+         y="111.05016"
+         x="633.09552"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:1px"
+           y="111.05016"
+           x="633.09552"
+           id="tspan1575-3"
+           sodipodi:role="line">plop</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;mhoo&quot;"
+       id="g1587-6"
+       style="stroke-width:2">
+      <path
+         inkscape:transform-center-y="-5.9989963e-06"
+         d="m 648.55108,-186.34718 -103.62071,0 51.81035,-89.73817 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="29.912722"
+         sodipodi:r1="59.825443"
+         sodipodi:cy="-216.2599"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path1581-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:none;stroke-width:10;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"
+         sodipodi:type="star"
+         transform="rotate(-90,746.45698,-44.543641)"
+         inkscape:transform-center-x="14.956364" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="537.25018"
+         y="111.05016"
+         id="text1585-0"><tspan
+           sodipodi:role="line"
+           id="tspan1583-6"
+           x="537.25018"
+           y="111.05016"
+           style="stroke-width:1px">mhoo</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;yodl&quot;"
+       id="g1595-3"
+       style="stroke-width:2">
+      <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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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="path1589-2"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="105.17262"
+         sodipodi:r1="59.825443"
+         sodipodi:r2="29.912722"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 648.55108,135.08534 -103.62071,0 51.81035,-89.738161 z"
+         inkscape:transform-center-y="-5.5023185e-06"
+         transform="matrix(0,-1,-1,0,1043.9134,701.91334)"
+         inkscape:transform-center-x="-14.956365" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="925.82605"
+         y="111.05016"
+         id="text1593-0"><tspan
+           sodipodi:role="line"
+           id="tspan1591-6"
+           x="925.82605"
+           y="111.05016"
+           style="stroke-width:1px">yodl</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;mhe&quot;"
+       id="g1603-1"
+       style="stroke-width:2">
+      <path
+         inkscape:transform-center-y="-3.3040441e-05"
+         d="m 622.6459,151.4008 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="14.956361"
+         sodipodi:r1="29.912722"
+         sodipodi:cy="136.44444"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path1597-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:none;stroke-width:10;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"
+         sodipodi:type="star"
+         transform="matrix(0,-2.0000001,-1.9999999,0,1122.1514,1298.6541)"
+         inkscape:transform-center-x="-14.956349" />
+      <text
+         id="text1601-5"
+         y="111.05016"
+         x="842.71497"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:1px"
+           y="111.05016"
+           x="842.71497"
+           id="tspan1599-4"
+           sodipodi:role="line">mhe</tspan></text>
+    </g>
+  </g>
+  <text
+     id="text1609-7"
+     y="284.81787"
+     x="2471.7039"
+     style="font-style:normal;font-weight:normal;font-size:25.4761734px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#008000;fill-opacity:1;stroke:none;stroke-width:0.63690436px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"
+     inkscape:label="actual_label"><tspan
+       y="284.81787"
+       x="2471.7039"
+       sodipodi:role="line"
+       style="stroke-width:0.63690436px"
+       id="tspan1611-6">PAGE_LOCAL variables</tspan></text>
+  <text
+     inkscape:label="HMI:Display@paff"
+     id="text1457-5"
+     y="1208.4301"
+     x="276.83508"
+     style="font-style:normal;font-weight:normal;font-size:45.74443054px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.28590268px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"><tspan
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.28590268px"
+       y="1208.4301"
+       x="276.83508"
+       id="tspan1455-6"
+       sodipodi:role="line">8888</tspan></text>
+  <g
+     style="stroke-width:2"
+     inkscape:label="HMI:Input@paff"
+     id="g1505-9"
+     transform="matrix(0.28590269,0,0,0.28590269,74.702238,1145.9709)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="136.32812"
+       y="218.24219"
+       id="text1461-3"
+       inkscape:label="value"><tspan
+         sodipodi:role="line"
+         id="tspan1459-7"
+         x="136.32812"
+         y="218.24219"
+         style="stroke-width:2px">8888</tspan></text>
+    <rect
+       inkscape:label="edit"
+       onclick=""
+       y="95.40741"
+       x="139.85185"
+       height="128"
+       width="407.7037"
+       id="rect1463-4"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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
+       style="stroke-width:2"
+       id="g1471-5"
+       inkscape:label="+&quot;dhu&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:connector-curvature="0"
+         id="path1465-2"
+         d="m 797.19546,145.18619 -80.62929,0.60214 -0.60215,-80.629288 80.6293,-0.60214 z"
+         inkscape:transform-center-y="-14.956361"
+         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:none;stroke-width:10;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" />
+      <text
+         id="text1469-5"
+         y="111.05016"
+         x="733.58197"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:1px"
+           y="111.05016"
+           x="733.58197"
+           id="tspan1467-4"
+           sodipodi:role="line">dhu</tspan></text>
+    </g>
+    <g
+       style="stroke-width:2"
+       id="g1479-7"
+       inkscape:label="=&quot;plop&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="14.956371"
+         inkscape:transform-center-y="-3.6154501e-05"
+         d="m 622.6459,-170.03172 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="14.956361"
+         sodipodi:r1="29.912722"
+         sodipodi:cy="-184.98808"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path1473-4"
+         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:none;stroke-width:10;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"
+         sodipodi:type="star"
+         transform="matrix(0,-2.0000001,1.9999999,0,1034.195,1298.6541)" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="633.09552"
+         y="111.05016"
+         id="text1477-4"><tspan
+           sodipodi:role="line"
+           id="tspan1475-3"
+           x="633.09552"
+           y="111.05016"
+           style="stroke-width:1px">plop</tspan></text>
+    </g>
+    <g
+       style="stroke-width:2"
+       id="g1487-0"
+       inkscape:label="=&quot;mhoo&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="14.956364"
+         transform="rotate(-90,746.45698,-44.543641)"
+         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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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="path1481-7"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="-216.2599"
+         sodipodi:r1="59.825443"
+         sodipodi:r2="29.912722"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 648.55108,-186.34718 -103.62071,0 51.81035,-89.73817 z"
+         inkscape:transform-center-y="-5.9989963e-06" />
+      <text
+         id="text1485-8"
+         y="111.05016"
+         x="537.25018"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:1px"
+           y="111.05016"
+           x="537.25018"
+           id="tspan1483-6"
+           sodipodi:role="line">mhoo</tspan></text>
+    </g>
+    <g
+       style="stroke-width:2"
+       id="g1495-8"
+       inkscape:label="=&quot;yodl&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="-14.956365"
+         transform="matrix(0,-1,-1,0,1043.9134,701.91334)"
+         inkscape:transform-center-y="-5.5023185e-06"
+         d="m 648.55108,135.08534 -103.62071,0 51.81035,-89.738161 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="29.912722"
+         sodipodi:r1="59.825443"
+         sodipodi:cy="105.17262"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path1489-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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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"
+         sodipodi:type="star" />
+      <text
+         id="text1493-4"
+         y="111.05016"
+         x="925.82605"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:1px"
+           y="111.05016"
+           x="925.82605"
+           id="tspan1491-3"
+           sodipodi:role="line">yodl</tspan></text>
+    </g>
+    <g
+       style="stroke-width:2"
+       id="g1503-1"
+       inkscape:label="=&quot;mhe&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="-14.956349"
+         transform="matrix(0,-2.0000001,-1.9999999,0,1122.1514,1298.6541)"
+         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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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="path1497-4"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="136.44444"
+         sodipodi:r1="29.912722"
+         sodipodi:r2="14.956361"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 622.6459,151.4008 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:transform-center-y="-3.3040441e-05" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="842.71497"
+         y="111.05016"
+         id="text1501-9"><tspan
+           sodipodi:role="line"
+           id="tspan1499-2"
+           x="842.71497"
+           y="111.05016"
+           style="stroke-width:1px">mhe</tspan></text>
+    </g>
+  </g>
+  <text
+     inkscape:label="actual_label"
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:25.4761734px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#008000;fill-opacity:1;stroke:none;stroke-width:0.63690436px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="115.62414"
+     y="1157.5958"
+     id="text1527-0"><tspan
+       style="stroke-width:0.63690436px"
+       sodipodi:role="line"
+       id="tspan1525-6"
+       x="115.62414"
+       y="1157.5958">HMI_LOCAL variables</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:45.74443054px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.28590268px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="276.83508"
+     y="1328.4301"
+     id="text1557-8"
+     inkscape:label="HMI:Display@.piff"><tspan
+       sodipodi:role="line"
+       id="tspan1555-9"
+       x="276.83508"
+       y="1328.4301"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.28590268px">8888</tspan></text>
+  <g
+     transform="matrix(0.28590269,0,0,0.28590269,74.702238,1265.9709)"
+     id="g1605-26"
+     inkscape:label="HMI:Input@.piff"
+     style="stroke-width:2">
+    <text
+       inkscape:label="value"
+       id="text1561-6"
+       y="218.24219"
+       x="136.32812"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         style="stroke-width:2px"
+         y="218.24219"
+         x="136.32812"
+         id="tspan1559-4"
+         sodipodi:role="line">8888</tspan></text>
+    <rect
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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="rect1563-9"
+       width="407.7037"
+       height="128"
+       x="139.85185"
+       y="95.40741"
+       onclick=""
+       inkscape:label="edit" />
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="+&quot;dhu&quot;"
+       id="g1571-5"
+       style="stroke-width:2">
+      <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:none;stroke-width:10;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"
+         inkscape:transform-center-y="-14.956361"
+         d="m 797.19546,145.18619 -80.62929,0.60214 -0.60215,-80.629288 80.6293,-0.60214 z"
+         id="path1565-0"
+         inkscape:connector-curvature="0" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="733.58197"
+         y="111.05016"
+         id="text1569-4"><tspan
+           sodipodi:role="line"
+           id="tspan1567-87"
+           x="733.58197"
+           y="111.05016"
+           style="stroke-width:1px">dhu</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;plop&quot;"
+       id="g1579-1"
+       style="stroke-width:2">
+      <path
+         transform="matrix(0,-2.0000001,1.9999999,0,1034.195,1298.6541)"
+         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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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="path1573-7"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="-184.98808"
+         sodipodi:r1="29.912722"
+         sodipodi:r2="14.956361"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 622.6459,-170.03172 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:transform-center-y="-3.6154501e-05"
+         inkscape:transform-center-x="14.956371" />
+      <text
+         id="text1577-2"
+         y="111.05016"
+         x="633.09552"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:1px"
+           y="111.05016"
+           x="633.09552"
+           id="tspan1575-7"
+           sodipodi:role="line">plop</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;mhoo&quot;"
+       id="g1587-2"
+       style="stroke-width:2">
+      <path
+         inkscape:transform-center-y="-5.9989963e-06"
+         d="m 648.55108,-186.34718 -103.62071,0 51.81035,-89.73817 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="29.912722"
+         sodipodi:r1="59.825443"
+         sodipodi:cy="-216.2599"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path1581-2"
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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"
+         sodipodi:type="star"
+         transform="rotate(-90,746.45698,-44.543641)"
+         inkscape:transform-center-x="14.956364" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="537.25018"
+         y="111.05016"
+         id="text1585-6"><tspan
+           sodipodi:role="line"
+           id="tspan1583-1"
+           x="537.25018"
+           y="111.05016"
+           style="stroke-width:1px">mhoo</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;yodl&quot;"
+       id="g1595-0"
+       style="stroke-width:2">
+      <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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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="path1589-6"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="105.17262"
+         sodipodi:r1="59.825443"
+         sodipodi:r2="29.912722"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 648.55108,135.08534 -103.62071,0 51.81035,-89.738161 z"
+         inkscape:transform-center-y="-5.5023185e-06"
+         transform="matrix(0,-1,-1,0,1043.9134,701.91334)"
+         inkscape:transform-center-x="-14.956365" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="925.82605"
+         y="111.05016"
+         id="text1593-1"><tspan
+           sodipodi:role="line"
+           id="tspan1591-5"
+           x="925.82605"
+           y="111.05016"
+           style="stroke-width:1px">yodl</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;mhe&quot;"
+       id="g1603-9"
+       style="stroke-width:2">
+      <path
+         inkscape:transform-center-y="-3.3040441e-05"
+         d="m 622.6459,151.4008 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="14.956361"
+         sodipodi:r1="29.912722"
+         sodipodi:cy="136.44444"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path1597-4"
+         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:none;stroke-width:10;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"
+         sodipodi:type="star"
+         transform="matrix(0,-2.0000001,-1.9999999,0,1122.1514,1298.6541)"
+         inkscape:transform-center-x="-14.956349" />
+      <text
+         id="text1601-9"
+         y="111.05016"
+         x="842.71497"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:1px"
+           y="111.05016"
+           x="842.71497"
+           id="tspan1599-0"
+           sodipodi:role="line">mhe</tspan></text>
+    </g>
+  </g>
+  <text
+     id="text1609-9"
+     y="1277.5958"
+     x="115.62414"
+     style="font-style:normal;font-weight:normal;font-size:25.4761734px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#008000;fill-opacity:1;stroke:none;stroke-width:0.63690436px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"
+     inkscape:label="actual_label"><tspan
+       y="1277.5958"
+       x="115.62414"
+       sodipodi:role="line"
+       style="stroke-width:0.63690436px"
+       id="tspan1611-1">PAGE_LOCAL variables</tspan></text>
+  <g
+     id="g2387"
+     inkscape:label="HMI:VarInit:42@level" />
+  <g
+     inkscape:label="HMI:VarInit:&quot;a string&quot;@paff"
+     id="g2389" />
+  <g
+     id="g825"
+     inkscape:label="HMI:VarInit:&quot;a page string&quot;@.piff" />
+  <g
+     inkscape:label="HMI:VarInit:50@.position"
+     id="g906" />
+  <g
+     id="g908"
+     inkscape:label="HMI:VarInit:100@.range" />
+  <g
+     inkscape:label="HMI:VarInit:7@.visibleAlarms"
+     id="g906-3" />
+  <use
+     x="0"
+     y="0"
+     xlink:href="#g7994"
+     id="use8000"
+     transform="translate(-1380,800)"
+     width="100%"
+     height="100%"
+     inkscape:label="HMI:Page:AlarmPage" />
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:80px;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="-738.18359"
+     y="86.260696"
+     id="text2019"><tspan
+       sodipodi:role="line"
+       id="tspan2017"
+       x="-738.18359"
+       y="86.260696"
+       style="fill:#ffffff;stroke-width:1px">Alarm Page</tspan></text>
+  <g
+     id="g1289"
+     inkscape:label="HMI:JsonTable:/alarms@/ALARMNOTIFY@.range@.position@.visibleAlarms@.filter"
+     transform="matrix(0.5,0,0,0.5,-1757.3465,454.4367)">
+    <g
+       id="g5231"
+       inkscape:label="data">
+      <g
+         id="g1384"
+         inkscape:label="[0]"
+         transform="translate(52.326002,240.30067)">
+        <g
+           id="g901"
+           inkscape:label="# commented group"
+           transform="translate(419.716,-441.73566)">
+          <path
+             style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+             d="m 528.62458,486.07049 23.69122,21.00809"
+             id="path903"
+             inkscape:connector-curvature="0"
+             sodipodi:nodetypes="cc" />
+        </g>
+        <use
+           x="0"
+           y="0"
+           xlink:href="#use1297"
+           inkscape:transform-center-x="0.11123312"
+           inkscape:transform-center-y="2.2824109"
+           id="use1378"
+           width="100%"
+           height="100%"
+           transform="matrix(0.7609336,0,0,0.7609336,199.15217,164.3798)"
+           inkscape:label=".status onClick[acknowledge]=.alarmid" />
+        <use
+           transform="matrix(1.3019536,0,0,1.3019536,39.582906,238.73392)"
+           x="0"
+           y="0"
+           xlink:href="#use913"
+           id="use966"
+           width="100%"
+           height="100%"
+           inkscape:label=".status textContent=.time"
+           style="stroke-width:1.53615308" />
+        <use
+           inkscape:label=".status textContent=.text"
+           height="100%"
+           width="100%"
+           id="use1832"
+           xlink:href="#use913"
+           y="0"
+           x="0"
+           transform="matrix(2,0,0,2,85.95394,349.02524)" />
+        <path
+           style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           d="M 972.0318,65.34292 H 2780.6604"
+           id="path2238"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="cc"
+           inkscape:label="# separation line" />
+      </g>
+      <use
+         inkscape:label="[1]"
+         transform="translate(0,-62.914773)"
+         height="100%"
+         width="100%"
+         id="use5200"
+         xlink:href="#g1384"
+         y="0"
+         x="0" />
+      <use
+         inkscape:label="[2]"
+         x="0"
+         y="0"
+         xlink:href="#g1384"
+         id="use5202"
+         width="100%"
+         height="100%"
+         transform="translate(0,-125.82955)" />
+      <use
+         inkscape:label="[3]"
+         transform="translate(0,-188.74432)"
+         height="100%"
+         width="100%"
+         id="use5204"
+         xlink:href="#g1384"
+         y="0"
+         x="0" />
+      <use
+         x="0"
+         y="0"
+         xlink:href="#g1384"
+         id="use2176"
+         width="100%"
+         height="100%"
+         transform="translate(0,-251.65909)"
+         inkscape:label="[4]" />
+      <use
+         inkscape:label="[5]"
+         transform="translate(0,-314.57387)"
+         height="100%"
+         width="100%"
+         id="use2178"
+         xlink:href="#g1384"
+         y="0"
+         x="0" />
+      <use
+         x="0"
+         y="0"
+         xlink:href="#g1384"
+         id="use2180"
+         width="100%"
+         height="100%"
+         transform="translate(0,-377.48864)"
+         inkscape:label="[6]" />
+    </g>
+  </g>
+  <g
+     id="g1332"
+     inkscape:label="polygons"
+     transform="translate(-1556.6506,114.93627)">
+    <path
+       inkscape:transform-center-y="2.9995242"
+       inkscape:transform-center-x="0.14620371"
+       d="m 1081.9632,-246.81598 -27.9274,5.51725 -27.9273,5.51724 9.1856,-26.94439 9.1856,-26.94439 18.7417,21.42715 z"
+       inkscape:randomized="0"
+       inkscape:rounded="0"
+       inkscape:flatsided="false"
+       sodipodi:arg2="1.3757507"
+       sodipodi:arg1="0.32855317"
+       sodipodi:r2="16.43548"
+       sodipodi:r1="32.87096"
+       sodipodi:cy="-257.42258"
+       sodipodi:cx="1050.8505"
+       sodipodi:sides="3"
+       id="path1298"
+       style="fill:#8fbc8f;fill-opacity:1;stroke:#ff0000"
+       sodipodi:type="star"
+       inkscape:label="three" />
+    <path
+       sodipodi:type="star"
+       style="fill:#ff8c00;fill-opacity:1;stroke:#ff0000"
+       id="path1308"
+       sodipodi:sides="4"
+       sodipodi:cx="1110.8505"
+       sodipodi:cy="-257.42258"
+       sodipodi:r1="32.87096"
+       sodipodi:r2="16.43548"
+       sodipodi:arg1="0.32855317"
+       sodipodi:arg2="1.1139513"
+       inkscape:flatsided="false"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 1141.9632,-246.81598 -23.8627,4.1434 -17.8566,16.3627 -4.1434,-23.8627 -16.3627,-17.8566 23.8627,-4.1434 17.8566,-16.3627 4.1434,23.8627 z"
+       inkscape:transform-center-x="0.14620371"
+       inkscape:transform-center-y="2.9995242"
+       inkscape:label="four" />
+    <path
+       inkscape:transform-center-y="2.9995242"
+       inkscape:transform-center-x="0.14620371"
+       d="m 1201.9632,-246.81598 -21.6446,2.82766 -9.9413,19.4333 -9.3778,-19.7114 -21.5541,-3.44949 15.8487,-15.00997 -3.3799,-21.5652 19.1728,10.43473 19.4653,-9.87854 -3.9993,21.45898 z"
+       inkscape:randomized="0"
+       inkscape:rounded="0"
+       inkscape:flatsided="false"
+       sodipodi:arg2="0.9568717"
+       sodipodi:arg1="0.32855317"
+       sodipodi:r2="16.43548"
+       sodipodi:r1="32.87096"
+       sodipodi:cy="-257.42258"
+       sodipodi:cx="1170.8505"
+       sodipodi:sides="5"
+       id="path1310"
+       style="fill:#bc8f8f;fill-opacity:1;stroke:#ff0000"
+       sodipodi:type="star"
+       inkscape:label="five" />
+    <path
+       sodipodi:type="star"
+       style="fill:#f0f8ff;fill-opacity:1;stroke:#ff0000"
+       id="path1312"
+       sodipodi:sides="6"
+       sodipodi:cx="1230.8505"
+       sodipodi:cy="-257.42258"
+       sodipodi:r1="32.87096"
+       sodipodi:r2="16.43548"
+       sodipodi:arg1="0.32855317"
+       sodipodi:arg2="0.85215195"
+       inkscape:flatsided="false"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 1261.9632,-246.81598 -20.2922,1.76437 -4.4498,19.87672 -11.674,-16.69134 -19.4387,6.08474 8.6181,-18.45571 -14.9888,-13.79198 20.2921,-1.76436 4.4498,-19.87673 11.6741,16.69134 19.4386,-6.08473 -8.6181,18.4557 z"
+       inkscape:transform-center-x="0.14620371"
+       inkscape:transform-center-y="2.9995242"
+       inkscape:label="six" />
+  </g>
+  <g
+     inkscape:label="HMI:List"
+     id="g1311"
+     transform="translate(-1396.6506,94.93627)">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#path1298"
+       inkscape:transform-center-x="0.14620371"
+       inkscape:transform-center-y="2.9995242"
+       id="use1293"
+       width="100%"
+       height="100%"
+       transform="translate(-69.76703,100)"
+       style="display:inline"
+       inkscape:label="ack" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#path1308"
+       inkscape:transform-center-x="0.14620371"
+       inkscape:transform-center-y="2.9995242"
+       id="use1295"
+       width="100%"
+       height="100%"
+       transform="translate(-126.48474,100)"
+       inkscape:label="alarm" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#path1310"
+       inkscape:transform-center-x="0.14620371"
+       inkscape:transform-center-y="2.9995242"
+       id="use1297"
+       width="100%"
+       height="100%"
+       transform="translate(-186.33351,100)"
+       inkscape:label="active" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#path1312"
+       inkscape:transform-center-x="0.14620371"
+       inkscape:transform-center-y="2.9995242"
+       id="use1299"
+       width="100%"
+       height="100%"
+       transform="translate(-246.4848,100)"
+       inkscape:label="disabled" />
+  </g>
+  <g
+     transform="matrix(0.33436432,0,0,0.33436432,-584.21063,278.8185)"
+     inkscape:label="HMI:Input@/ALARMNOTIFY"
+     id="g5222"
+     style="stroke-width:0.75594342">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.75594342px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="136.32812"
+       y="218.24219"
+       id="text5208"
+       inkscape:label="value"><tspan
+         sodipodi:role="line"
+         id="tspan5206"
+         x="136.32812"
+         y="218.24219"
+         style="stroke-width:0.75594342px">8888</tspan></text>
+    <path
+       transform="scale(1,-1)"
+       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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:#ff6600;stroke-width:3.77971721;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="path5212"
+       sodipodi:sides="3"
+       sodipodi:cx="608.70374"
+       sodipodi:cy="-209.2599"
+       sodipodi:r1="59.825443"
+       sodipodi:r2="29.912722"
+       sodipodi:arg1="0.52359878"
+       sodipodi:arg2="1.5707963"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 660.51409,-179.34718 -103.62071,0 51.81036,-89.73817 z"
+       inkscape:transform-center-y="14.956362"
+       inkscape:label="-1" />
+    <rect
+       inkscape:label="edit"
+       onclick=""
+       y="95.40741"
+       x="139.85185"
+       height="128"
+       width="407.7037"
+       id="rect5214"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.77971721;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" />
+    <path
+       inkscape:label="+1"
+       inkscape:transform-center-y="-14.95636"
+       d="m 660.51409,142.08535 -103.62071,0 51.81036,-89.738163 z"
+       inkscape:randomized="0"
+       inkscape:rounded="0"
+       inkscape:flatsided="true"
+       sodipodi:arg2="1.5707963"
+       sodipodi:arg1="0.52359878"
+       sodipodi:r2="29.912722"
+       sodipodi:r1="59.825443"
+       sodipodi:cy="112.17263"
+       sodipodi:cx="608.70374"
+       sodipodi:sides="3"
+       id="path5218"
+       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:3.77971721;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"
+       sodipodi:type="star" />
+  </g>
+  <g
+     id="g1766"
+     inkscape:label="HMI:Slider@.position@.range@.alarmVisible">
+    <g
+       transform="matrix(0.620824,0,0,0.5,-963.61047,260.72872)"
+       id="g1752"
+       inkscape:label="HMI:Input@.position">
+      <path
+         inkscape:label="+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:#ff6600;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.55573034px;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 1175.2115,143.25263 34.1278,56.73732 h -68.2556 z"
+         id="path1266"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cccc" />
+      <path
+         inkscape:label="-1"
+         sodipodi:nodetypes="cccc"
+         inkscape:connector-curvature="0"
+         id="path1268"
+         d="m 1175.2115,851.99803 34.1278,-54.90445 h -68.2556 z"
+         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:#ff6600;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.51411843px;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>
+    <path
+       style="opacity:0;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.00058591px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M -234.01102,648.56465 V 371.89445"
+       id="path1772"
+       inkscape:connector-curvature="0"
+       inkscape:label="range" />
+    <rect
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.30952382;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.03627348px;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="rect1264-3"
+       width="42.374725"
+       height="276.64423"
+       x="-255.19838"
+       y="371.91068"
+       rx="7.6034913"
+       ry="6.8822322"
+       inkscape:label="background" />
+    <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:#ff6600;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"
+       id="rect1264"
+       width="42.374725"
+       height="82.841492"
+       x="-255.19838"
+       y="565.71338"
+       rx="7.6034913"
+       ry="7"
+       inkscape:label="handle" />
+  </g>
+  <g
+     id="g893"
+     inkscape:label="textstyles"
+     transform="translate(-1566.6506,56.936266)">
+    <text
+       inkscape:label="red"
+       id="text1382-7"
+       y="-171.54395"
+       x="1298.9102"
+       style="font-style:normal;font-weight:normal;font-size:20px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.5"
+       xml:space="preserve"><tspan
+         y="-171.54395"
+         x="1298.9102"
+         id="tspan1380-5"
+         sodipodi:role="line"
+         style="stroke-width:0.5">value</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:20px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.5"
+       x="1298.9102"
+       y="-191.54395"
+       id="text875"
+       inkscape:label="black"><tspan
+         style="fill:#000000;stroke-width:0.5"
+         sodipodi:role="line"
+         id="tspan873"
+         x="1298.9102"
+         y="-191.54395">value</tspan></text>
+    <text
+       inkscape:label="green"
+       id="text879"
+       y="-211.54395"
+       x="1298.9102"
+       style="font-style:normal;font-weight:normal;font-size:20px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#00ff00;fill-opacity:1;stroke:none;stroke-width:0.5"
+       xml:space="preserve"><tspan
+         y="-211.54395"
+         x="1298.9102"
+         id="tspan877"
+         sodipodi:role="line"
+         style="fill:#00ff00;stroke-width:0.5">value</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:20px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#999999;fill-opacity:1;stroke:none;stroke-width:0.5"
+       x="1298.9102"
+       y="-231.54395"
+       id="text883"
+       inkscape:label="gray"><tspan
+         style="fill:#999999;stroke-width:0.5"
+         sodipodi:role="line"
+         id="tspan881"
+         x="1298.9102"
+         y="-231.54395">value</tspan></text>
+  </g>
+  <g
+     id="g907"
+     inkscape:label="HMI:TextStyleList"
+     transform="translate(-990.65059,102.93627)">
+    <use
+       x="0"
+       y="0"
+       xlink:href="#text879"
+       id="use913"
+       width="100%"
+       height="100%"
+       transform="translate(-573,60.999998)"
+       inkscape:label="active" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#text875"
+       id="use911"
+       width="100%"
+       height="100%"
+       transform="translate(-573,40.999998)"
+       inkscape:label="ack" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#text1382-7"
+       id="use909"
+       width="100%"
+       height="100%"
+       transform="translate(-573,20.999998)"
+       inkscape:label="alarm" />
+    <use
+       x="0"
+       y="0"
+       xlink:href="#text883"
+       id="use915"
+       width="100%"
+       height="100%"
+       transform="translate(-573,80.999998)"
+       inkscape:label="disabled" />
+  </g>
+  <g
+     transform="matrix(0.33436432,0,0,0.33436432,-1048.7703,278.8185)"
+     inkscape:label="HMI:Input@.range"
+     id="g5222-3"
+     style="stroke-width:0.75594342">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.75594342px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="136.32812"
+       y="218.24219"
+       id="text5208-6"
+       inkscape:label="value"><tspan
+         sodipodi:role="line"
+         id="tspan5206-7"
+         x="136.32812"
+         y="218.24219"
+         style="stroke-width:0.75594342px">8888</tspan></text>
+    <path
+       transform="scale(1,-1)"
+       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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:#ff6600;stroke-width:3.77971721;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="path5212-5"
+       sodipodi:sides="3"
+       sodipodi:cx="620.66675"
+       sodipodi:cy="-209.2599"
+       sodipodi:r1="59.825443"
+       sodipodi:r2="29.912722"
+       sodipodi:arg1="0.52359878"
+       sodipodi:arg2="1.5707963"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 672.4771,-179.34718 -103.62071,0 51.81036,-89.73817 z"
+       inkscape:transform-center-y="14.956362"
+       inkscape:label="-1" />
+    <rect
+       inkscape:label="edit"
+       onclick=""
+       y="95.40741"
+       x="139.85185"
+       height="128"
+       width="407.7037"
+       id="rect5214-3"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.77971721;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" />
+    <path
+       inkscape:label="+1"
+       inkscape:transform-center-y="-14.95636"
+       d="m 672.4771,142.08535 -103.62071,0 51.81036,-89.738163 z"
+       inkscape:randomized="0"
+       inkscape:rounded="0"
+       inkscape:flatsided="true"
+       sodipodi:arg2="1.5707963"
+       sodipodi:arg1="0.52359878"
+       sodipodi:r2="29.912722"
+       sodipodi:r1="59.825443"
+       sodipodi:cy="112.17263"
+       sodipodi:cx="620.66675"
+       sodipodi:sides="3"
+       id="path5218-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:3.77971721;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"
+       sodipodi:type="star" />
+  </g>
+  <g
+     transform="matrix(0.33436432,0,0,0.33436432,-816.49047,278.8185)"
+     inkscape:label="HMI:Input@.position"
+     id="g5222-6"
+     style="stroke-width:0.75594342">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.75594342px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="136.32812"
+       y="218.24219"
+       id="text5208-2"
+       inkscape:label="value"><tspan
+         sodipodi:role="line"
+         id="tspan5206-9"
+         x="136.32812"
+         y="218.24219"
+         style="stroke-width:0.75594342px">8888</tspan></text>
+    <path
+       transform="scale(1,-1)"
+       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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:#ff6600;stroke-width:3.77971721;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="path5212-1"
+       sodipodi:sides="3"
+       sodipodi:cx="608.70374"
+       sodipodi:cy="-209.2599"
+       sodipodi:r1="59.825443"
+       sodipodi:r2="29.912722"
+       sodipodi:arg1="0.52359878"
+       sodipodi:arg2="1.5707963"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 660.51409,-179.34718 -103.62071,0 51.81036,-89.73817 z"
+       inkscape:transform-center-y="14.956362"
+       inkscape:label="-1" />
+    <rect
+       inkscape:label="edit"
+       onclick=""
+       y="95.40741"
+       x="139.85185"
+       height="128"
+       width="407.7037"
+       id="rect5214-2"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.77971721;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" />
+    <path
+       inkscape:label="+1"
+       inkscape:transform-center-y="-14.95636"
+       d="m 660.51409,142.08535 -103.62071,0 51.81036,-89.738163 z"
+       inkscape:randomized="0"
+       inkscape:rounded="0"
+       inkscape:flatsided="true"
+       sodipodi:arg2="1.5707963"
+       sodipodi:arg1="0.52359878"
+       sodipodi:r2="29.912722"
+       sodipodi:r1="59.825443"
+       sodipodi:cy="112.17263"
+       sodipodi:cx="608.70374"
+       sodipodi:sides="3"
+       id="path5218-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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:#ff6600;stroke-width:3.77971721;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"
+       sodipodi:type="star" />
+  </g>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:26.45700645px;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="-935.5838"
+     y="291.8042"
+     id="text887"><tspan
+       sodipodi:role="line"
+       id="tspan885"
+       x="-935.5838"
+       y="291.8042"
+       style="fill:#ffffff;stroke-width:1px">range</tspan></text>
+  <text
+     id="text891"
+     y="291.8042"
+     x="-702.87115"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:26.45700645px;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
+       style="fill:#ffffff;stroke-width:1px"
+       y="291.8042"
+       x="-702.87115"
+       id="tspan889"
+       sodipodi:role="line">position</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:26.45700645px;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="-471.33417"
+     y="291.8042"
+     id="text895"><tspan
+       sodipodi:role="line"
+       id="tspan893"
+       x="-471.33417"
+       y="291.8042"
+       style="fill:#ffffff;stroke-width:1px">notify</tspan></text>
+  <g
+     style="stroke-width:2"
+     inkscape:label="HMI:Input@/ALARMTEXT"
+     id="g1442-3"
+     transform="matrix(0.5,0,0,0.5,-915.0529,113.05833)">
+    <rect
+       inkscape:label="edit"
+       onclick=""
+       y="77.265099"
+       x="-648.04266"
+       height="179.83517"
+       width="1195.5988"
+       id="rect1400-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:#cacaca;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:10;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"
+       ry="36.786537" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#0e0e0e;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="545.95312"
+       y="218.24219"
+       id="text1398-6"
+       inkscape:label="value"><tspan
+         sodipodi:role="line"
+         id="tspan1396-7"
+         x="545.95312"
+         y="218.24219"
+         style="text-align:end;text-anchor:end;fill:#0e0e0e;fill-opacity:1;stroke-width:2px">8888</tspan></text>
+  </g>
+  <g
+     style="stroke-width:1.04184687"
+     inkscape:label="HMI:Input@/SENDALARM"
+     id="g953"
+     transform="translate(-1386.3329,-450.57041)">
+    <g
+       id="g1839"
+       inkscape:label="+1">
+      <g
+         id="g945"
+         inkscape:label="bg"
+         style="stroke-width:1.04184687">
+        <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"
+           width="245.44583"
+           height="95.723877"
+           x="971.96545"
+           y="594.82263"
+           ry="23.177595"
+           inkscape:label="button"
+           rx="26.820074" />
+      </g>
+      <g
+         id="g951"
+         inkscape:label="text"
+         style="stroke-width:1.04184687">
+        <text
+           inkscape:label="setting_jmp"
+           id="text949"
+           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: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="656.98151"
+             x="1090.7626"
+             id="tspan947"
+             sodipodi:role="line">trigger</tspan></text>
+      </g>
+    </g>
+  </g>
+  <g
+     style="stroke-width:2"
+     inkscape:label="HMI:Input@/ALARMSTATUS"
+     id="g1887"
+     transform="matrix(0.28590269,0,0,0.28590269,-631.94615,129.07897)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:148.39013672px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.99999988px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="329.13501"
+       y="214.01605"
+       id="text1843"
+       inkscape:label="value"><tspan
+         sodipodi:role="line"
+         id="tspan1841"
+         x="329.13501"
+         y="214.01605"
+         style="text-align:center;text-anchor:middle;stroke-width:1.99999988px">8888</tspan></text>
+    <g
+       style="stroke-width:1.09375393"
+       id="g1853"
+       inkscape:label="=&quot;ack&quot;"
+       transform="matrix(1.8285648,0,0,1.8285648,-936.17681,115.40643)">
+      <path
+         inkscape:connector-curvature="0"
+         id="path1847"
+         d="m 797.19546,145.18619 -80.62929,0.60214 -0.60215,-80.629288 80.6293,-0.60214 z"
+         inkscape:transform-center-y="-14.956361"
+         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:none;stroke-width:5.46877003;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" />
+      <text
+         id="text1851"
+         y="112.62867"
+         x="738.57678"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.54687697px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:0.54687697px"
+           y="112.62867"
+           x="738.57678"
+           id="tspan1849"
+           sodipodi:role="line">ack</tspan></text>
+    </g>
+    <g
+       style="stroke-width:1.09375393"
+       id="g1861"
+       inkscape:label="=&quot;disabled&quot;"
+       transform="matrix(1.8285648,0,0,1.8285648,-1012.4359,109.57379)">
+      <path
+         inkscape:connector-curvature="0"
+         id="path1847-7"
+         d="m 738.52607,148.37593 -80.6293,0.60214 -0.6021,-80.629288 80.6293,-0.60214 z"
+         inkscape:transform-center-y="-14.956361"
+         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:none;stroke-width:5.46877003;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" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.54687697px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="656.177"
+         y="115.81841"
+         id="text1859"><tspan
+           sodipodi:role="line"
+           id="tspan1857"
+           x="656.177"
+           y="115.81841"
+           style="stroke-width:0.54687697px">disabled</tspan></text>
+    </g>
+    <g
+       style="stroke-width:1.09375393"
+       id="g1869"
+       inkscape:label="=&quot;active&quot;"
+       transform="matrix(1.8285648,0,0,1.8285648,-998.18055,84.666267)">
+      <path
+         inkscape:connector-curvature="0"
+         id="path1847-5"
+         d="m 630.35651,161.99728 -80.6293,0.60214 -0.6021,-80.629287 80.6293,-0.60214 z"
+         inkscape:transform-center-y="-14.956361"
+         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:none;stroke-width:5.46877003;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" />
+      <text
+         id="text1867"
+         y="129.43976"
+         x="559.26227"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.54687697px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:0.54687697px"
+           y="129.43976"
+           x="559.26227"
+           id="tspan1865"
+           sodipodi:role="line">active</tspan></text>
+    </g>
+    <g
+       style="stroke-width:1.09375393"
+       id="g1877"
+       inkscape:label="=&quot;alarm&quot;"
+       transform="matrix(1.8285648,0,0,1.8285648,-1114.212,118.29284)">
+      <path
+         inkscape:connector-curvature="0"
+         id="path1847-3"
+         d="m 994.91832,143.60768 -80.62931,0.60214 -0.6021,-80.629285 80.62931,-0.60214 z"
+         inkscape:transform-center-y="-14.956361"
+         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:none;stroke-width:5.46877003;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" />
+      <text
+         id="text1875"
+         y="111.05016"
+         x="925.82605"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.54687697px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:0.54687697px"
+           y="111.05016"
+           x="925.82605"
+           id="tspan1873"
+           sodipodi:role="line">alarm</tspan></text>
+    </g>
+  </g>
+  <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:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="-926.47461"
+     y="134.36742"
+     id="text2019-9"><tspan
+       sodipodi:role="line"
+       id="tspan2017-2"
+       x="-926.47461"
+       y="134.36742"
+       style="fill:#ffffff;stroke-width:1px">Alarm Text</tspan></text>
+  <text
+     id="text2174"
+     y="134.36742"
+     x="-546.47461"
+     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:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"><tspan
+       style="fill:#ffffff;stroke-width:1px"
+       y="134.36742"
+       x="-546.47461"
+       id="tspan2172"
+       sodipodi:role="line">Status</tspan></text>
+  <g
+     transform="matrix(0.57180538,0,0,0.57180538,326.35945,-231.48695)"
+     inkscape:label="HMI:Jump:AlarmPage"
+     id="g2198">
+    <g
+       inkscape:label="button"
+       id="g2190">
+      <rect
+         inkscape:label="button"
+         ry="35.579063"
+         y="594.82263"
+         x="971.96545"
+         height="95.723877"
+         width="245.44583"
+         id="rect2188"
+         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"
+         rx="35.579063" />
+    </g>
+    <g
+       inkscape:label="text"
+       id="g2196">
+      <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="text2194"
+         inkscape:label="setting_jmp"><tspan
+           sodipodi:role="line"
+           id="tspan2192"
+           x="1090.7626"
+           y="656.98151"
+           style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.99999994px">Alarms</tspan></text>
+    </g>
+  </g>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:45.74443054px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.28590268px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="628.18188"
+     y="242.50345"
+     id="text889"
+     inkscape:label="HMI:Display@/PUMP0/FLOATING"><tspan
+       sodipodi:role="line"
+       id="tspan887"
+       x="628.18188"
+       y="242.50345"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.28590268px">8888</tspan></text>
+  <g
+     style="stroke-width:0.75594342"
+     id="g900"
+     inkscape:label="HMI:Input@.filter"
+     transform="matrix(0.33436432,0,0,0.33436432,-1288.7703,278.8185)">
+    <text
+       inkscape:label="value"
+       id="text892"
+       y="218.24219"
+       x="136.32812"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.75594342px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         style="stroke-width:0.75594342px"
+         y="218.24219"
+         x="136.32812"
+         id="tspan890"
+         sodipodi:role="line">8888</tspan></text>
+    <rect
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.77971721;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="rect896"
+       width="615.05096"
+       height="128"
+       x="139.85185"
+       y="95.40741"
+       onclick=""
+       inkscape:label="edit" />
+  </g>
+  <text
+     id="text904"
+     y="291.8042"
+     x="-1175.5837"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:26.45700645px;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
+       style="fill:#ffffff;stroke-width:1px"
+       y="291.8042"
+       x="-1175.5837"
+       id="tspan902"
+       sodipodi:role="line">filter</tspan></text>
+  <g
+     id="g909"
+     inkscape:label="HMI:VarInit:&quot;&quot;@.filter" />
+  <g
+     transform="matrix(0.14295135,0,0,0.14295135,449.21833,37.615184)"
+     id="g4646"
+     inkscape:label="HMI:Input@paff"
+     style="stroke-width:4">
+    <text
+       inkscape:label="value"
+       id="text4602"
+       y="218.24219"
+       x="136.32812"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         style="stroke-width:4px"
+         y="218.24219"
+         x="136.32812"
+         id="tspan4600"
+         sodipodi:role="line">8888</tspan></text>
+    <rect
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;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="rect4604"
+       width="407.7037"
+       height="128"
+       x="139.85185"
+       y="95.40741"
+       onclick=""
+       inkscape:label="edit" />
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="+&quot;dhu&quot;"
+       id="g4612"
+       style="stroke-width:4">
+      <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:none;stroke-width:20;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"
+         inkscape:transform-center-y="-14.956361"
+         d="m 797.19546,145.18619 -80.62929,0.60214 -0.60215,-80.629288 80.6293,-0.60214 z"
+         id="path4606"
+         inkscape:connector-curvature="0" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="733.58197"
+         y="111.05016"
+         id="text4610"><tspan
+           sodipodi:role="line"
+           id="tspan4608"
+           x="733.58197"
+           y="111.05016"
+           style="stroke-width:2px">dhu</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;plop&quot;"
+       id="g4620"
+       style="stroke-width:4">
+      <path
+         transform="matrix(0,-2.0000001,1.9999999,0,1034.195,1298.6541)"
+         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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;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="path4614"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="-184.98808"
+         sodipodi:r1="29.912722"
+         sodipodi:r2="14.956361"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 622.6459,-170.03172 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:transform-center-y="-3.6154501e-05"
+         inkscape:transform-center-x="14.956371" />
+      <text
+         id="text4618"
+         y="111.05016"
+         x="633.09552"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:2px"
+           y="111.05016"
+           x="633.09552"
+           id="tspan4616"
+           sodipodi:role="line">plop</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;mhoo&quot;"
+       id="g4628"
+       style="stroke-width:4">
+      <path
+         inkscape:transform-center-y="-5.9989963e-06"
+         d="m 648.55108,-186.34718 -103.62071,0 51.81035,-89.73817 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="29.912722"
+         sodipodi:r1="59.825443"
+         sodipodi:cy="-216.2599"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path4622"
+         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:none;stroke-width:20;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"
+         sodipodi:type="star"
+         transform="rotate(-90,746.45698,-44.543641)"
+         inkscape:transform-center-x="14.956364" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="537.25018"
+         y="111.05016"
+         id="text4626"><tspan
+           sodipodi:role="line"
+           id="tspan4624"
+           x="537.25018"
+           y="111.05016"
+           style="stroke-width:2px">mhoo</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;yodl&quot;"
+       id="g4636"
+       style="stroke-width:4">
+      <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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;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="path4630"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="105.17262"
+         sodipodi:r1="59.825443"
+         sodipodi:r2="29.912722"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 648.55108,135.08534 -103.62071,0 51.81035,-89.738161 z"
+         inkscape:transform-center-y="-5.5023185e-06"
+         transform="matrix(0,-1,-1,0,1043.9134,701.91334)"
+         inkscape:transform-center-x="-14.956365" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="925.82605"
+         y="111.05016"
+         id="text4634"><tspan
+           sodipodi:role="line"
+           id="tspan4632"
+           x="925.82605"
+           y="111.05016"
+           style="stroke-width:2px">yodl</tspan></text>
+    </g>
+    <g
+       transform="translate(-416.52022,170.47452)"
+       inkscape:label="=&quot;mhe&quot;"
+       id="g4644"
+       style="stroke-width:4">
+      <path
+         inkscape:transform-center-y="-3.3040441e-05"
+         d="m 622.6459,151.4008 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="14.956361"
+         sodipodi:r1="29.912722"
+         sodipodi:cy="136.44444"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path4638"
+         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:none;stroke-width:20;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"
+         sodipodi:type="star"
+         transform="matrix(0,-2.0000001,-1.9999999,0,1122.1514,1298.6541)"
+         inkscape:transform-center-x="-14.956349" />
+      <text
+         id="text4642"
+         y="111.05016"
+         x="842.71497"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:2px"
+           y="111.05016"
+           x="842.71497"
+           id="tspan4640"
+           sodipodi:role="line">mhe</tspan></text>
+    </g>
+  </g>
+  <g
+     style="stroke-width:4"
+     inkscape:label="HMI:Input@.piff"
+     id="g4694"
+     transform="matrix(0.14295135,0,0,0.14295135,449.21833,97.61518)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="136.32812"
+       y="218.24219"
+       id="text4650"
+       inkscape:label="value"><tspan
+         sodipodi:role="line"
+         id="tspan4648"
+         x="136.32812"
+         y="218.24219"
+         style="stroke-width:4px">8888</tspan></text>
+    <rect
+       inkscape:label="edit"
+       onclick=""
+       y="95.40741"
+       x="139.85185"
+       height="128"
+       width="407.7037"
+       id="rect4652"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff00ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;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
+       style="stroke-width:4"
+       id="g4660"
+       inkscape:label="+&quot;dhu&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4654"
+         d="m 797.19546,145.18619 -80.62929,0.60214 -0.60215,-80.629288 80.6293,-0.60214 z"
+         inkscape:transform-center-y="-14.956361"
+         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:none;stroke-width:20;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" />
+      <text
+         id="text4658"
+         y="111.05016"
+         x="733.58197"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:2px"
+           y="111.05016"
+           x="733.58197"
+           id="tspan4656"
+           sodipodi:role="line">dhu</tspan></text>
+    </g>
+    <g
+       style="stroke-width:4"
+       id="g4668"
+       inkscape:label="=&quot;plop&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="14.956371"
+         inkscape:transform-center-y="-3.6154501e-05"
+         d="m 622.6459,-170.03172 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="14.956361"
+         sodipodi:r1="29.912722"
+         sodipodi:cy="-184.98808"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path4662"
+         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:none;stroke-width:20;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"
+         sodipodi:type="star"
+         transform="matrix(0,-2.0000001,1.9999999,0,1034.195,1298.6541)" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="633.09552"
+         y="111.05016"
+         id="text4666"><tspan
+           sodipodi:role="line"
+           id="tspan4664"
+           x="633.09552"
+           y="111.05016"
+           style="stroke-width:2px">plop</tspan></text>
+    </g>
+    <g
+       style="stroke-width:4"
+       id="g4676"
+       inkscape:label="=&quot;mhoo&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="14.956364"
+         transform="rotate(-90,746.45698,-44.543641)"
+         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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;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="path4670"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="-216.2599"
+         sodipodi:r1="59.825443"
+         sodipodi:r2="29.912722"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 648.55108,-186.34718 -103.62071,0 51.81035,-89.73817 z"
+         inkscape:transform-center-y="-5.9989963e-06" />
+      <text
+         id="text4674"
+         y="111.05016"
+         x="537.25018"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:2px"
+           y="111.05016"
+           x="537.25018"
+           id="tspan4672"
+           sodipodi:role="line">mhoo</tspan></text>
+    </g>
+    <g
+       style="stroke-width:4"
+       id="g4684"
+       inkscape:label="=&quot;yodl&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="-14.956365"
+         transform="matrix(0,-1,-1,0,1043.9134,701.91334)"
+         inkscape:transform-center-y="-5.5023185e-06"
+         d="m 648.55108,135.08534 -103.62071,0 51.81035,-89.738161 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="1.5707963"
+         sodipodi:arg1="0.52359878"
+         sodipodi:r2="29.912722"
+         sodipodi:r1="59.825443"
+         sodipodi:cy="105.17262"
+         sodipodi:cx="596.74072"
+         sodipodi:sides="3"
+         id="path4678"
+         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:none;stroke-width:20;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"
+         sodipodi:type="star" />
+      <text
+         id="text4682"
+         y="111.05016"
+         x="925.82605"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           style="stroke-width:2px"
+           y="111.05016"
+           x="925.82605"
+           id="tspan4680"
+           sodipodi:role="line">yodl</tspan></text>
+    </g>
+    <g
+       style="stroke-width:4"
+       id="g4692"
+       inkscape:label="=&quot;mhe&quot;"
+       transform="translate(-416.52022,170.47452)">
+      <path
+         inkscape:transform-center-x="-14.956349"
+         transform="matrix(0,-2.0000001,-1.9999999,0,1122.1514,1298.6541)"
+         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:#e6e6e6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;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="path4686"
+         sodipodi:sides="3"
+         sodipodi:cx="596.74072"
+         sodipodi:cy="136.44444"
+         sodipodi:r1="29.912722"
+         sodipodi:r2="14.956361"
+         sodipodi:arg1="0.52359878"
+         sodipodi:arg2="1.5707963"
+         inkscape:flatsided="true"
+         inkscape:rounded="0"
+         inkscape:randomized="0"
+         d="m 622.6459,151.4008 -51.81035,0 25.90517,-44.86908 z"
+         inkscape:transform-center-y="-3.3040441e-05" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="842.71497"
+         y="111.05016"
+         id="text4690"><tspan
+           sodipodi:role="line"
+           id="tspan4688"
+           x="842.71497"
+           y="111.05016"
+           style="stroke-width:2px">mhe</tspan></text>
+    </g>
+  </g>
+  <g
+     id="g7994">
+    <rect
+       y="-800"
+       x="0"
+       height="720"
+       width="1280"
+       id="rect4270"
+       style="color:#000000;fill:#4d4d4d" />
+    <g
+       id="g4282"
+       inkscape:label="HMI:Jump:Home"
+       transform="translate(-10.6526,-2134.1633)">
+      <g
+         id="g4274"
+         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"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="cssssccc" />
+      </g>
+      <g
+         id="g4280"
+         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"
+           inkscape:label="home_jmp"><tspan
+             sodipodi:role="line"
+             id="tspan4276"
+             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>
+</svg>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tests/svghmi_v2/beremiz.xml	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,5 @@
+<?xml version='1.0' encoding='utf-8'?>
+<BeremizRoot xmlns:xsd="http://www.w3.org/2001/XMLSchema" URI_location="PYRO://127.0.0.1:61284">
+  <TargetType/>
+  <Libraries Enable_SVGHMI_Library="true"/>
+</BeremizRoot>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tests/svghmi_v2/plc.xml	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,585 @@
+<?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="2019-08-06T14:23:42"/>
+  <contentHeader name="Unnamed" modificationDateTime="2020-09-30T13:04:27">
+    <coordinateInfo>
+      <fbd>
+        <scaling x="5" y="5"/>
+      </fbd>
+      <ld>
+        <scaling x="0" y="0"/>
+      </ld>
+      <sfc>
+        <scaling x="0" y="0"/>
+      </sfc>
+    </coordinateInfo>
+  </contentHeader>
+  <types>
+    <dataTypes/>
+    <pous>
+      <pou name="MainStuff" pouType="program">
+        <interface>
+          <localVars>
+            <variable name="TargetPressure">
+              <type>
+                <derived name="HMI_INT"/>
+              </type>
+            </variable>
+            <variable name="selection">
+              <type>
+                <derived name="HMI_INT"/>
+              </type>
+            </variable>
+            <variable name="Pump0">
+              <type>
+                <derived name="PumpControl"/>
+              </type>
+            </variable>
+            <variable name="TestButton">
+              <type>
+                <derived name="HMI_BOOL"/>
+              </type>
+            </variable>
+            <variable name="TestLocal">
+              <type>
+                <BOOL/>
+              </type>
+            </variable>
+            <variable name="Multistate">
+              <type>
+                <derived name="HMI_INT"/>
+              </type>
+            </variable>
+            <variable name="Radiostate">
+              <type>
+                <derived name="HMI_INT"/>
+              </type>
+            </variable>
+            <variable name="Toggle">
+              <type>
+                <derived name="HMI_BOOL"/>
+              </type>
+            </variable>
+            <variable name="Toggle1">
+              <type>
+                <derived name="HMI_BOOL"/>
+              </type>
+            </variable>
+            <variable name="Toggle2">
+              <type>
+                <derived name="HMI_BOOL"/>
+              </type>
+            </variable>
+            <variable name="MultistateExt">
+              <type>
+                <INT/>
+              </type>
+            </variable>
+            <variable name="Speed">
+              <type>
+                <derived name="HMI_INT"/>
+              </type>
+            </variable>
+          </localVars>
+        </interface>
+        <body>
+          <FBD>
+            <block localId="4" typeName="PumpControl" instanceName="Pump0" executionOrderId="0" height="40" width="127">
+              <position x="595" y="50"/>
+              <inputVariables>
+                <variable formalParameter="TargetPressure">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="5">
+                      <position x="595" y="80"/>
+                      <position x="570" y="80"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables/>
+            </block>
+            <inVariable localId="5" executionOrderId="0" height="30" width="125" negated="false">
+              <position x="445" y="65"/>
+              <connectionPointOut>
+                <relPosition x="125" y="15"/>
+              </connectionPointOut>
+              <expression>TargetPressure</expression>
+            </inVariable>
+            <inVariable localId="6" executionOrderId="0" height="25" width="90" negated="false">
+              <position x="130" y="60"/>
+              <connectionPointOut>
+                <relPosition x="90" y="10"/>
+              </connectionPointOut>
+              <expression>TestButton</expression>
+            </inVariable>
+            <outVariable localId="7" executionOrderId="0" height="25" width="85" negated="false">
+              <position x="495" y="220"/>
+              <connectionPointIn>
+                <relPosition x="0" y="10"/>
+                <connection refLocalId="6">
+                  <position x="495" y="230"/>
+                  <position x="367" y="230"/>
+                  <position x="367" y="70"/>
+                  <position x="220" y="70"/>
+                </connection>
+              </connectionPointIn>
+              <expression>TestLocal</expression>
+            </outVariable>
+            <inVariable localId="1" executionOrderId="0" height="25" width="115" negated="false">
+              <position x="175" y="355"/>
+              <connectionPointOut>
+                <relPosition x="115" y="10"/>
+              </connectionPointOut>
+              <expression>Multistate</expression>
+            </inVariable>
+            <outVariable localId="8" executionOrderId="0" height="25" width="115" negated="false">
+              <position x="495" y="355"/>
+              <connectionPointIn>
+                <relPosition x="0" y="10"/>
+                <connection refLocalId="1">
+                  <position x="495" y="365"/>
+                  <position x="290" y="365"/>
+                </connection>
+              </connectionPointIn>
+              <expression>MultistateExt</expression>
+            </outVariable>
+          </FBD>
+        </body>
+      </pou>
+      <pou name="PumpControl" pouType="functionBlock">
+        <interface>
+          <localVars>
+            <variable name="Pump">
+              <type>
+                <derived name="HMI_NODE"/>
+              </type>
+            </variable>
+            <variable name="Pressure">
+              <type>
+                <derived name="HMI_INT"/>
+              </type>
+            </variable>
+          </localVars>
+          <inputVars>
+            <variable name="TargetPressure">
+              <type>
+                <INT/>
+              </type>
+            </variable>
+          </inputVars>
+          <localVars>
+            <variable name="Sloth">
+              <type>
+                <derived name="HMI_INT"/>
+              </type>
+            </variable>
+            <variable name="boolout">
+              <type>
+                <derived name="HMI_BOOL"/>
+              </type>
+            </variable>
+            <variable name="boolin">
+              <type>
+                <derived name="HMI_BOOL"/>
+              </type>
+              <initialValue>
+                <simpleValue value="True"/>
+              </initialValue>
+            </variable>
+            <variable name="strout">
+              <type>
+                <derived name="HMI_STRING"/>
+              </type>
+            </variable>
+            <variable name="strin">
+              <type>
+                <derived name="HMI_STRING"/>
+              </type>
+              <initialValue>
+                <simpleValue value="blup"/>
+              </initialValue>
+            </variable>
+          </localVars>
+        </interface>
+        <body>
+          <FBD>
+            <inVariable localId="5" executionOrderId="0" height="30" width="125" negated="false">
+              <position x="150" y="100"/>
+              <connectionPointOut>
+                <relPosition x="125" y="15"/>
+              </connectionPointOut>
+              <expression>TargetPressure</expression>
+            </inVariable>
+            <block localId="6" typeName="ADD" executionOrderId="0" height="60" width="65">
+              <position x="405" y="65"/>
+              <inputVariables>
+                <variable formalParameter="IN1">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                  </connectionPointIn>
+                </variable>
+                <variable formalParameter="IN2">
+                  <connectionPointIn>
+                    <relPosition x="0" y="50"/>
+                    <connection refLocalId="7" formalParameter="OUT">
+                      <position x="405" y="115"/>
+                      <position x="360" y="115"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="65" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <inVariable localId="1" executionOrderId="0" height="30" width="75" negated="false">
+              <position x="150" y="135"/>
+              <connectionPointOut>
+                <relPosition x="75" y="15"/>
+              </connectionPointOut>
+              <expression>Pressure</expression>
+            </inVariable>
+            <block localId="7" typeName="SUB" executionOrderId="0" height="60" width="65">
+              <position x="295" y="85"/>
+              <inputVariables>
+                <variable formalParameter="IN1">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="5">
+                      <position x="295" y="115"/>
+                      <position x="275" y="115"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+                <variable formalParameter="IN2">
+                  <connectionPointIn>
+                    <relPosition x="0" y="50"/>
+                    <connection refLocalId="1">
+                      <position x="295" y="135"/>
+                      <position x="285" y="135"/>
+                      <position x="285" y="150"/>
+                      <position x="225" y="150"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="65" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <inVariable localId="2" executionOrderId="0" height="30" width="60" negated="false">
+              <position x="240" y="190"/>
+              <connectionPointOut>
+                <relPosition x="60" y="15"/>
+              </connectionPointOut>
+              <expression>Sloth</expression>
+            </inVariable>
+            <outVariable localId="3" executionOrderId="0" height="30" width="75" negated="false">
+              <position x="435" y="205"/>
+              <connectionPointIn>
+                <relPosition x="0" y="15"/>
+                <connection refLocalId="8" formalParameter="OUT">
+                  <position x="435" y="220"/>
+                  <position x="410" y="220"/>
+                </connection>
+              </connectionPointIn>
+              <expression>Pressure</expression>
+            </outVariable>
+            <block localId="8" typeName="DIV" executionOrderId="0" height="60" width="65">
+              <position x="345" y="190"/>
+              <inputVariables>
+                <variable formalParameter="IN1">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="2">
+                      <position x="345" y="220"/>
+                      <position x="335" y="220"/>
+                      <position x="335" y="205"/>
+                      <position x="300" y="205"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+                <variable formalParameter="IN2">
+                  <connectionPointIn>
+                    <relPosition x="0" y="50"/>
+                    <connection refLocalId="9">
+                      <position x="345" y="240"/>
+                      <position x="300" y="240"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="65" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <inVariable localId="9" executionOrderId="0" height="30" width="60" negated="false">
+              <position x="240" y="225"/>
+              <connectionPointOut>
+                <relPosition x="60" y="15"/>
+              </connectionPointOut>
+              <expression>100</expression>
+            </inVariable>
+            <block localId="10" typeName="CONCAT" executionOrderId="0" height="60" width="65">
+              <position x="360" y="345"/>
+              <inputVariables>
+                <variable formalParameter="IN1">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="13" formalParameter="OUT">
+                      <position x="360" y="375"/>
+                      <position x="330" y="375"/>
+                      <position x="330" y="332"/>
+                      <position x="440" y="332"/>
+                      <position x="440" y="300"/>
+                      <position x="430" y="300"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+                <variable formalParameter="IN2">
+                  <connectionPointIn>
+                    <relPosition x="0" y="50"/>
+                    <connection refLocalId="14">
+                      <position x="360" y="395"/>
+                      <position x="322" y="395"/>
+                      <position x="322" y="400"/>
+                      <position x="285" y="400"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="65" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <outVariable localId="11" executionOrderId="0" height="30" width="58" negated="false">
+              <position x="495" y="355"/>
+              <connectionPointIn>
+                <relPosition x="0" y="15"/>
+                <connection refLocalId="10" formalParameter="OUT">
+                  <position x="495" y="370"/>
+                  <position x="450" y="370"/>
+                  <position x="450" y="375"/>
+                  <position x="425" y="375"/>
+                </connection>
+              </connectionPointIn>
+              <expression>strout</expression>
+            </outVariable>
+            <inVariable localId="12" executionOrderId="0" height="30" width="125" negated="false">
+              <position x="145" y="285"/>
+              <connectionPointOut>
+                <relPosition x="125" y="15"/>
+              </connectionPointOut>
+              <expression>TargetPressure</expression>
+            </inVariable>
+            <block localId="13" typeName="INT_TO_STRING" executionOrderId="0" height="40" width="115">
+              <position x="315" y="270"/>
+              <inputVariables>
+                <variable formalParameter="IN">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="12">
+                      <position x="315" y="300"/>
+                      <position x="270" y="300"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="115" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <inVariable localId="14" executionOrderId="0" height="30" width="50" negated="false">
+              <position x="235" y="385"/>
+              <connectionPointOut>
+                <relPosition x="50" y="15"/>
+              </connectionPointOut>
+              <expression>strin</expression>
+            </inVariable>
+            <inVariable localId="15" executionOrderId="0" height="30" width="60" negated="false">
+              <position x="690" y="210"/>
+              <connectionPointOut>
+                <relPosition x="60" y="15"/>
+              </connectionPointOut>
+              <expression>boolin</expression>
+            </inVariable>
+            <outVariable localId="16" executionOrderId="0" height="30" width="70" negated="false">
+              <position x="915" y="240"/>
+              <connectionPointIn>
+                <relPosition x="0" y="15"/>
+                <connection refLocalId="17" formalParameter="OUT">
+                  <position x="915" y="255"/>
+                  <position x="880" y="255"/>
+                </connection>
+              </connectionPointIn>
+              <expression>boolout</expression>
+            </outVariable>
+            <block localId="17" typeName="AND" executionOrderId="0" height="60" width="65">
+              <position x="815" y="225"/>
+              <inputVariables>
+                <variable formalParameter="IN1">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="15">
+                      <position x="815" y="255"/>
+                      <position x="762" y="255"/>
+                      <position x="762" y="225"/>
+                      <position x="750" y="225"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+                <variable formalParameter="IN2">
+                  <connectionPointIn>
+                    <relPosition x="0" y="50"/>
+                    <connection refLocalId="21" formalParameter="OUT">
+                      <position x="815" y="275"/>
+                      <position x="750" y="275"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="65" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <inVariable localId="18" executionOrderId="0" height="30" width="75" negated="false">
+              <position x="455" y="260"/>
+              <connectionPointOut>
+                <relPosition x="75" y="15"/>
+              </connectionPointOut>
+              <expression>Pressure</expression>
+            </inVariable>
+            <block localId="19" typeName="MOD" executionOrderId="0" height="60" width="65">
+              <position x="585" y="245"/>
+              <inputVariables>
+                <variable formalParameter="IN1">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="18">
+                      <position x="585" y="275"/>
+                      <position x="530" y="275"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+                <variable formalParameter="IN2">
+                  <connectionPointIn>
+                    <relPosition x="0" y="50"/>
+                    <connection refLocalId="20">
+                      <position x="585" y="295"/>
+                      <position x="555" y="295"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="65" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <inVariable localId="20" executionOrderId="0" height="30" width="20" negated="false">
+              <position x="535" y="280"/>
+              <connectionPointOut>
+                <relPosition x="20" y="15"/>
+              </connectionPointOut>
+              <expression>2</expression>
+            </inVariable>
+            <block localId="21" typeName="EQ" executionOrderId="0" height="60" width="65">
+              <position x="685" y="245"/>
+              <inputVariables>
+                <variable formalParameter="IN1">
+                  <connectionPointIn>
+                    <relPosition x="0" y="30"/>
+                    <connection refLocalId="19" formalParameter="OUT">
+                      <position x="685" y="275"/>
+                      <position x="650" y="275"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+                <variable formalParameter="IN2">
+                  <connectionPointIn>
+                    <relPosition x="0" y="50"/>
+                    <connection refLocalId="22">
+                      <position x="685" y="295"/>
+                      <position x="670" y="295"/>
+                      <position x="670" y="330"/>
+                      <position x="650" y="330"/>
+                    </connection>
+                  </connectionPointIn>
+                </variable>
+              </inputVariables>
+              <inOutVariables/>
+              <outputVariables>
+                <variable formalParameter="OUT">
+                  <connectionPointOut>
+                    <relPosition x="65" y="30"/>
+                  </connectionPointOut>
+                </variable>
+              </outputVariables>
+            </block>
+            <inVariable localId="22" executionOrderId="0" height="30" width="20" negated="false">
+              <position x="630" y="315"/>
+              <connectionPointOut>
+                <relPosition x="20" y="15"/>
+              </connectionPointOut>
+              <expression>0</expression>
+            </inVariable>
+            <inVariable localId="4" executionOrderId="0" height="30" width="60" negated="false">
+              <position x="510" y="80"/>
+              <connectionPointOut>
+                <relPosition x="60" y="15"/>
+              </connectionPointOut>
+              <expression>Sloth</expression>
+            </inVariable>
+          </FBD>
+        </body>
+      </pou>
+    </pous>
+  </types>
+  <instances>
+    <configurations>
+      <configuration name="config">
+        <resource name="resource1">
+          <task name="task0" priority="0" interval="T#20ms">
+            <pouInstance name="instance0" typeName="MainStuff"/>
+          </task>
+        </resource>
+      </configuration>
+    </configurations>
+  </instances>
+</project>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tests/svghmi_v2/py_ext_0@py_ext/baseconfnode.xml	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,2 @@
+<?xml version='1.0' encoding='utf-8'?>
+<BaseParams xmlns:xsd="http://www.w3.org/2001/XMLSchema" IEC_Channel="1" Name="py_ext_0"/>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tests/svghmi_v2/py_ext_0@py_ext/pyfile.xml	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,30 @@
+<?xml version='1.0' encoding='utf-8'?>
+<PyFile xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
+  <variables>
+    <variable name="SomePLCglobal" type="HMI_STRING" initial="'blaf'" onchange="MyOnChangeFunc"/>
+  </variables>
+  <globals>
+    <xhtml:p><![CDATA[
+
+def MyOnChangeFunc(changed_var_name):
+    print changed_var_name + ": " + getattr(PLCGlobals, changed_var_name)
+
+]]></xhtml:p>
+  </globals>
+  <init>
+    <xhtml:p><![CDATA[
+]]></xhtml:p>
+  </init>
+  <cleanup>
+    <xhtml:p><![CDATA[
+]]></xhtml:p>
+  </cleanup>
+  <start>
+    <xhtml:p><![CDATA[
+]]></xhtml:p>
+  </start>
+  <stop>
+    <xhtml:p><![CDATA[
+]]></xhtml:p>
+  </stop>
+</PyFile>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tests/svghmi_v2/svghmi_0@svghmi/baseconfnode.xml	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,2 @@
+<?xml version='1.0' encoding='utf-8'?>
+<BaseParams xmlns:xsd="http://www.w3.org/2001/XMLSchema" IEC_Channel="0" Name="svghmi_0"/>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tests/svghmi_v2/svghmi_0@svghmi/confnode.xml	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,2 @@
+<?xml version='1.0' encoding='utf-8'?>
+<SVGHMI xmlns:xsd="http://www.w3.org/2001/XMLSchema" OnWatchdog="echo Watchdog for {name} !" OnStart="xdg-open http://127.0.0.1:{port}/{name}" OnStop="echo Closing {name}" WatchdogInitial="10" WatchdogInterval="5"/>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tests/svghmi_v2/svghmi_0@svghmi/svghmi.svg	Tue Dec 22 14:57:59 2020 +0100
@@ -0,0 +1,1619 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1280"
+   height="720"
+   viewBox="0 0 1280 720"
+   version="1.1"
+   id="hmi0"
+   sodipodi:docname="svghmi.svg"
+   inkscape:version="0.92.5 (0.92.5+68)"
+   inkscape:label="Layer">
+  <metadata
+     id="metadata4542">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs2">
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="-688.56326 : 510.71991 : 1"
+       inkscape:vp_y="0 : 1306.0642 : 0"
+       inkscape:vp_z="662.62627 : 323.72015 : 1"
+       inkscape:persp3d-origin="147.31778 : 353.99223 : 1"
+       id="perspective258" />
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="-457.78124 : 416.79285 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="576.76945 : 273.61475 : 1"
+       inkscape:persp3d-origin="182.21876 : 296.79285 : 1"
+       id="perspective503" />
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="-104 : 357 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="1272 : 385 : 1"
+       inkscape:persp3d-origin="536 : 237 : 1"
+       id="perspective445" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient962">
+      <stop
+         style="stop-color:#ff3000;stop-opacity:1;"
+         offset="0"
+         id="stop958" />
+      <stop
+         style="stop-color:#0022ff;stop-opacity:1"
+         offset="1"
+         id="stop960" />
+    </linearGradient>
+    <marker
+       inkscape:isstock="true"
+       style="overflow:visible"
+       id="marker926"
+       refX="0"
+       refY="0"
+       orient="auto"
+       inkscape:stockid="Arrow2Lend">
+      <path
+         transform="matrix(-1.1,0,0,-1.1,-1.1,0)"
+         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+         style="fill:#ff3000;fill-opacity:1;fill-rule:evenodd;stroke:#ff3000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
+         id="path924"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient962"
+       id="linearGradient1407"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.5,0,0,0.03945396,73.07865,3.7693345)"
+       x1="113.38908"
+       y1="-62.210247"
+       x2="113.38908"
+       y2="4.0725975" />
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="-470.06413 : 851.30353 : 1"
+       inkscape:vp_y="0 : 1319.7648 : 0"
+       inkscape:vp_z="895.29941 : 662.3421 : 1"
+       inkscape:persp3d-origin="374.58537 : 692.93174 : 1"
+       id="perspective503-6" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:document-units="px"
+     inkscape:current-layer="hmi0"
+     showgrid="false"
+     units="px"
+     inkscape:zoom="1"
+     inkscape:cx="379.07861"
+     inkscape:cy="265.09897"
+     inkscape:window-width="2503"
+     inkscape:window-height="1416"
+     inkscape:window-x="57"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     showguides="true"
+     inkscape:guide-bbox="true" />
+  <rect
+     style="color:#000000;fill:#4d4d4d"
+     id="page0"
+     width="1280"
+     height="720"
+     x="0"
+     y="0"
+     inkscape:label="HMI:Page:Home"
+     sodipodi:insensitive="true" />
+  <g
+     inkscape:label="HMI:Slider@/SPEED"
+     transform="matrix(7.5590552,0,0,7.5590552,-780.78539,561.61779)"
+     id="g110-0">
+    <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;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ff0000;stroke-width:0.52916664;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 113.38908,2.2017068 V -62.210247"
+       id="path90-9"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc"
+       inkscape:label="range" />
+    <path
+       inkscape:label="handle"
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path92-3"
+       d="m 113.32293,4.2048893 v -5.230241"
+       style="fill:none;fill-rule:evenodd;stroke:url(#linearGradient1407);stroke-width:5.28146696;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:29.63333321;stroke-opacity:1" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:5.29166651px;line-height:125%;font-family:sans-serif;text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="115.07632"
+       y="9.3424692"
+       id="text96-6"
+       inkscape:label="min"><tspan
+         sodipodi:role="line"
+         id="tspan94-0"
+         x="115.07632"
+         y="9.3424692"
+         style="text-align:end;text-anchor:end;fill:#ff6600;stroke-width:0.26458332px">0</tspan></text>
+    <text
+       id="text100-6"
+       y="-64.195457"
+       x="113.27539"
+       style="font-style:normal;font-weight:normal;font-size:5.29166651px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"
+       inkscape:label="max"><tspan
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.26458332px"
+         y="-64.195457"
+         x="113.27539"
+         sodipodi:role="line"
+         id="tspan1409">10</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="-24.72547"
+       y="-121.97556"
+       id="text104-6"
+       inkscape:label="value"
+       transform="rotate(90)"><tspan
+         sodipodi:role="line"
+         x="-24.72547"
+         y="-121.97556"
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.26458332px"
+         id="tspan102-1">000</tspan></text>
+  </g>
+  <g
+     id="g4557"
+     inkscape:label="HMI:Input@/SOMEPLCGLOBAL">
+    <text
+       inkscape:label="value"
+       transform="scale(1.1201068,0.89277202)"
+       id="text2398"
+       y="479.46704"
+       x="247.53484"
+       style="font-style:normal;font-weight:normal;font-size:124.08008575px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:3.10200214px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         style="stroke-width:3.10200214px"
+         y="479.46704"
+         x="247.53484"
+         id="tspan2396"
+         sodipodi:role="line">Test</tspan></text>
+    <rect
+       style="opacity:0.18600003;fill:#de2cc9;fill-opacity:1;stroke:none;stroke-width:1.11699021"
+       id="rect4559"
+       width="323.85489"
+       height="132.93608"
+       x="257.10974"
+       y="328.97858"
+       inkscape:label="edit" />
+    <rect
+       style="opacity:0;fill:#de2cc9;fill-opacity:1;stroke:none;stroke-width:3.45667744"
+       id="rect4561"
+       width="580.42413"
+       height="339.91623"
+       x="699.57587"
+       y="380.08374"
+       inkscape:label="key_pos" />
+  </g>
+  <g
+     transform="matrix(1.5213157,0,0,1.4848913,-82.472173,789.79964)"
+     style="fill-rule:evenodd;stroke-width:0.47631353"
+     id="g4278"
+     inkscape:label="HMI:Keypad:HMI_STRING">
+    <path
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.6;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.16776976;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 54.211084,1.2654702 H 435.7388 V 230.18209 H 54.211084 Z"
+       id="rect1006-3"
+       inkscape:connector-curvature="0"
+       inkscape:label="Background"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path185"
+       d="m 162,197 h -11 c -2,0 -3,1 -3,3 v 18 c 0,2 1,3 3,3 h 11 168 18 c 0,0 1,-1 1,-3 v -18 c 0,-2 -1,-3 -1,-3 h -18 z"
+       inkscape:connector-curvature="0"
+       inkscape:label="Space" />
+    <g
+       id="g4380"
+       inkscape:label="Keys"
+       style="stroke-width:0.47631353"
+       transform="translate(0,-19.076386)">
+      <g
+         id="g4283"
+         inkscape:label="q Q"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path41"
+           d="m 95,121 h 19 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 H 95 c -1,0 -3,-2 -3,-3 v -18 c 0,-2 2,-3 3,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="99.378708"
+           y="138.28395"
+           id="text203"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">Q</text>
+      </g>
+      <g
+         id="g4337"
+         inkscape:label="w W"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path43"
+           d="m 124,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -3,-2 -3,-3 v -18 c 0,-2 2,-3 3,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="127.0709"
+           y="138.28395"
+           id="text207"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">W</text>
+      </g>
+      <g
+         id="g4332"
+         inkscape:label="e E"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path45"
+           d="m 154,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -3,-2 -3,-3 v -18 c 0,-2 2,-3 3,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="159.70854"
+           y="138.28395"
+           id="text211"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">E</text>
+      </g>
+      <g
+         id="g4326"
+         inkscape:label="r R"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path47"
+           d="m 184,121 h 19 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -19 c -1,0 -3,-2 -3,-3 v -18 c 0,-2 2,-3 3,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="188.39003"
+           y="138.28395"
+           id="text215"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">R</text>
+      </g>
+      <g
+         id="g4321"
+         inkscape:label="t T"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path49"
+           d="m 213,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 v -18 c 0,-2 1,-3 2,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="219.04961"
+           y="138.28395"
+           id="text219"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">T</text>
+      </g>
+      <g
+         id="g4316"
+         inkscape:label="y Y"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path51"
+           d="m 243,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 v -18 c 0,-2 1,-3 2,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="248.72017"
+           y="138.28395"
+           id="text223"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">Y</text>
+      </g>
+      <g
+         id="g4311"
+         inkscape:label="u U"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path53"
+           d="m 273,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 v -18 c 0,-2 1,-3 2,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="278.39075"
+           y="138.28395"
+           id="text227"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">U</text>
+      </g>
+      <g
+         id="g4306"
+         inkscape:label="i I"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path55"
+           d="m 302,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 v -18 c 0,-2 1,-3 2,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="311.02859"
+           y="138.28395"
+           id="text231"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">I</text>
+      </g>
+      <g
+         id="g4301"
+         inkscape:label="o O"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path57"
+           d="m 332,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 v -18 c 0,-2 1,-3 2,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="336.74319"
+           y="138.28395"
+           id="text235"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">O</text>
+      </g>
+      <g
+         id="g4296"
+         inkscape:label="p P"
+         style="stroke-width:0.47631353"
+         transform="translate(0,-9.5381931)">
+        <path
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path59"
+           d="m 362,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 v -18 c 0,-2 1,-3 2,-3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="367.40256"
+           y="138.28395"
+           id="text239"
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928514)">P</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4511"
+         inkscape:label="a A">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 103,147 h 19 c 1,0 3,1 3,2 v 19 c 0,1 -2,2 -3,2 h -19 c -2,0 -3,-1 -3,-2 v -19 c 0,-1 1,-2 3,-2 z"
+           id="path65"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text243"
+           y="163.99854"
+           x="107.29005"
+           transform="scale(1.0007154,0.99928514)">A</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4516"
+         inkscape:label="s S">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 132,147 h 20 c 1,0 3,1 3,2 v 19 c 0,1 -2,2 -3,2 h -20 c -2,0 -3,-1 -3,-2 v -19 c 0,-1 1,-2 3,-2 z"
+           id="path67"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text247"
+           y="163.99854"
+           x="137.95012"
+           transform="scale(1.0007154,0.99928514)">S</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4521"
+         inkscape:label="d D">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 162,147 h 20 c 2,0 3,1 3,2 v 19 c 0,1 -1,2 -3,2 h -20 c -2,0 -3,-1 -3,-2 v -19 c 0,-1 1,-2 3,-2 z"
+           id="path69"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text251"
+           y="163.99854"
+           x="166.63159"
+           transform="scale(1.0007154,0.99928514)">D</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4526"
+         inkscape:label="f F">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 192,147 h 19 c 2,0 3,1 3,2 v 19 c 0,1 -1,2 -3,2 h -19 c -2,0 -3,-1 -3,-2 v -19 c 0,-1 1,-2 3,-2 z"
+           id="path71"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text255"
+           y="163.99854"
+           x="197.29166"
+           transform="scale(1.0007154,0.99928514)">F</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4531"
+         inkscape:label="g G">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 221,147 h 20 c 2,0 3,1 3,2 v 19 c 0,1 -1,2 -3,2 h -20 c -2,0 -3,-1 -3,-2 v -19 c 0,-1 1,-2 3,-2 z"
+           id="path73"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text259"
+           y="163.99854"
+           x="225.97284"
+           transform="scale(1.0007154,0.99928514)">G</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4536"
+         inkscape:label="h H">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 251,147 h 20 c 2,0 3,1 3,2 v 19 c 0,1 -1,2 -3,2 h -20 c -1,0 -3,-1 -3,-2 v -19 c 0,-1 2,-2 3,-2 z"
+           id="path75"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text263"
+           y="163.99854"
+           x="255.64342"
+           transform="scale(1.0007154,0.99928514)">H</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4541"
+         inkscape:label="j J">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 281,147 h 19 c 2,0 3,1 3,2 v 19 c 0,1 -1,2 -3,2 h -19 c -1,0 -3,-1 -3,-2 v -19 c 0,-1 2,-2 3,-2 z"
+           id="path77"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text267"
+           y="163.99854"
+           x="287.29208"
+           transform="scale(1.0007154,0.99928514)">J</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4546"
+         inkscape:label="k K">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 310,147 h 20 c 2,0 3,1 3,2 v 19 c 0,1 -1,2 -3,2 h -20 c -1,0 -3,-1 -3,-2 v -19 c 0,-1 2,-2 3,-2 z"
+           id="path79"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text271"
+           y="163.99854"
+           x="314.98465"
+           transform="scale(1.0007154,0.99928514)">K</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4551"
+         inkscape:label="l L">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 340,147 h 20 c 2,0 3,1 3,2 v 19 c 0,1 -1,2 -3,2 h -20 c -1,0 -3,-1 -3,-2 v -19 c 0,-1 2,-2 3,-2 z"
+           id="path81"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text275"
+           y="163.99854"
+           x="345.64444"
+           transform="scale(1.0007154,0.99928514)">L</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4586"
+         inkscape:label="z Z"
+         transform="translate(0,9.5381929)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 113,172 h 21 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 h -21 c -1,0 -2,-1 -2,-3 v -17 c 0,-1 1,-3 2,-3 z"
+           id="path87-3"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text279"
+           y="188.72411"
+           x="119.15855"
+           transform="scale(1.0007154,0.99928514)">Z</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4581"
+         inkscape:label="x X"
+         transform="translate(0,9.5381929)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 143,172 h 21 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 h -21 c -1,0 -2,-1 -2,-3 v -17 c 0,-1 1,-3 2,-3 z"
+           id="path89-6"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text283"
+           y="188.72411"
+           x="148.82933"
+           transform="scale(1.0007154,0.99928514)">X</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4576"
+         inkscape:label="c C"
+         transform="translate(0,9.5381929)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 173,172 h 21 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 h -21 c -1,0 -2,-1 -2,-3 v -17 c 0,-1 1,-3 2,-3 z"
+           id="path91-7"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text287"
+           y="188.72411"
+           x="178.50011"
+           transform="scale(1.0007154,0.99928514)">C</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4571"
+         inkscape:label="v V"
+         transform="translate(0,9.5381929)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 202,172 h 21 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 h -21 c 0,0 -1,-1 -1,-3 v -17 c 0,-1 1,-3 1,-3 z"
+           id="path195"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text291"
+           y="188.72411"
+           x="208.16988"
+           transform="scale(1.0007154,0.99928514)">V</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4566"
+         inkscape:label="b B"
+         transform="translate(0,9.5381929)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 233,172 h 20 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 h -20 c -2,0 -3,-1 -3,-3 v -17 c 0,-1 1,-3 3,-3 z"
+           id="path93"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text295"
+           y="188.72411"
+           x="237.84096"
+           transform="scale(1.0007154,0.99928514)">B</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4561"
+         inkscape:label="n N"
+         transform="translate(0,9.5381929)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 263,172 h 20 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 h -20 c -2,0 -3,-1 -3,-3 v -17 c 0,-1 1,-3 3,-3 z"
+           id="path95"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text299"
+           y="188.72411"
+           x="267.51193"
+           transform="scale(1.0007154,0.99928514)">N</text>
+      </g>
+      <g
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4556"
+         inkscape:label="m M"
+         transform="translate(0,9.5381929)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 293,172 h 19 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 h -19 c -2,0 -3,-1 -3,-3 v -17 c 0,-1 1,-3 3,-3 z"
+           id="path97"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text303"
+           y="188.72411"
+           x="296.1933"
+           transform="scale(1.0007154,0.99928514)">M</text>
+      </g>
+      <g
+         id="g4818"
+         inkscape:label=". :"
+         style="stroke-width:0.47631353"
+         transform="translate(0,9.5381929)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 352,172 h 20 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 h -20 c -2,0 -3,-1 -3,-3 v -17 c 0,-1 1,-3 3,-3 z"
+           id="path101"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           transform="scale(1.0007154,0.99928513)"
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;fill-rule:evenodd;stroke-width:0.36866826"
+           id="text719"
+           y="189.66107"
+           x="359.58276">.</text>
+        <text
+           x="359.58276"
+           y="181.64532"
+           id="text4834"
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;fill-rule:evenodd;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928512)">:</text>
+      </g>
+      <g
+         id="g4813"
+         inkscape:label=", ;"
+         style="stroke-width:0.47631353"
+         transform="translate(0,9.5381929)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 322,172 h 20 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 h -20 c -2,0 -3,-1 -3,-3 v -17 c 0,-1 1,-3 3,-3 z"
+           id="path99"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;fill-rule:evenodd;stroke-width:0.36866826"
+           id="text727"
+           y="181.64532"
+           x="330.00806"
+           transform="scale(1.0007154,0.99928512)">;</text>
+        <text
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;fill-rule:evenodd;stroke-width:0.36866826"
+           y="189.66107"
+           x="330.00806"
+           transform="scale(1.0007154,0.99928512)"
+           id="text4826">,</text>
+      </g>
+      <g
+         style="stroke-width:0.47631353"
+         inkscape:label="1"
+         id="g2845"
+         transform="translate(-13.353469,-45.783327)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 95,121 h 19 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 H 95 c -1,0 -3,-2 -3,-3 v -18 c 0,-2 2,-3 3,-3 z"
+           id="path2839"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2841"
+           y="138.28395"
+           x="101.07153"
+           transform="scale(1.0007154,0.99928513)">1</text>
+      </g>
+      <g
+         style="stroke-width:0.47631353"
+         inkscape:label="2"
+         id="g2853"
+         transform="translate(-13.353469,-45.783327)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 124,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -3,-2 -3,-3 v -18 c 0,-2 2,-3 3,-3 z"
+           id="path2847"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2849"
+           y="138.28395"
+           x="130.18704"
+           transform="scale(1.0007154,0.99928513)">2</text>
+      </g>
+      <g
+         inkscape:label="3"
+         id="g2861"
+         style="stroke-width:0.47631353"
+         transform="translate(-13.353469,-45.783327)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 154,121 h 20 c 2,0 3,1 3,3 v 18 c 0,1 -1,3 -3,3 h -20 c -1,0 -3,-2 -3,-3 v -18 c 0,-2 2,-3 3,-3 z"
+           id="path2855"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2857"
+           y="138.28395"
+           x="159.70854"
+           transform="scale(1.0007154,0.99928514)">3</text>
+      </g>
+      <g
+         id="g2957"
+         inkscape:label="4"
+         transform="translate(0,-19.076386)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 170.64653,94.293059 h 19 c 2,0 3,1 3,3 v 18.000001 c 0,1 -1,3 -3,3 h -19 c -1,0 -3,-2 -3,-3 V 97.293059 c 0,-2 2,-3 3,-3 z"
+           id="path2865"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2867"
+           y="111.55791"
+           x="176.39188"
+           transform="scale(1.0007154,0.99928514)">4</text>
+      </g>
+      <g
+         id="g2962"
+         inkscape:label="5"
+         transform="translate(0,-19.076386)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 199.64653,94.293059 h 20 c 2,0 3,1 3,3 v 18.000001 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 V 97.293059 c 0,-2 1,-3 2,-3 z"
+           id="path2873"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2875"
+           y="111.55791"
+           x="205.70567"
+           transform="scale(1.0007154,0.99928514)">5</text>
+      </g>
+      <g
+         id="g2967"
+         inkscape:label="6"
+         transform="translate(0,-19.076386)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 229.64653,94.293059 h 20 c 2,0 3,1 3,3 v 18.000001 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 V 97.293059 c 0,-2 1,-3 2,-3 z"
+           id="path2881"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2883"
+           y="111.55791"
+           x="236.15851"
+           transform="scale(1.0007154,0.99928514)">6</text>
+      </g>
+      <g
+         id="g2972"
+         inkscape:label="7"
+         transform="translate(0,-19.076386)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 259.64653,94.293059 h 20 c 2,0 3,1 3,3 v 18.000001 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 V 97.293059 c 0,-2 1,-3 2,-3 z"
+           id="path2889"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2891"
+           y="111.55791"
+           x="266.06564"
+           transform="scale(1.0007154,0.99928514)">7</text>
+      </g>
+      <g
+         id="g2977"
+         inkscape:label="8"
+         transform="translate(0,-19.076386)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 288.64653,94.293059 h 20 c 2,0 3,1 3,3 v 18.000001 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 V 97.293059 c 0,-2 1,-3 2,-3 z"
+           id="path2897"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2899"
+           y="111.55791"
+           x="295.08231"
+           transform="scale(1.0007154,0.99928514)">8</text>
+      </g>
+      <g
+         id="g2982"
+         inkscape:label="9 -"
+         transform="translate(0,-19.076386)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 318.64653,94.293059 h 20 c 2,0 3,1 3,3 v 18.000001 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 V 97.293059 c 0,-2 1,-3 2,-3 z"
+           id="path2905"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2907"
+           y="111.55791"
+           x="325.05408"
+           transform="scale(1.0007154,0.99928514)">9</text>
+        <text
+           transform="scale(1.0007154,0.99928511)"
+           x="335.72681"
+           y="102.42173"
+           id="text806"
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;fill-rule:evenodd;stroke-width:0.36866826">-</text>
+      </g>
+      <g
+         id="g2987"
+         inkscape:label="0 +"
+         transform="translate(0,-19.076386)">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 348.64653,94.293059 h 20 c 2,0 3,1 3,3 v 18.000001 c 0,1 -1,3 -3,3 h -20 c -1,0 -2,-2 -2,-3 V 97.293059 c 0,-2 1,-3 2,-3 z"
+           id="path2913"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+        <text
+           style="font-weight:normal;font-size:13.93205929px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text2915"
+           y="111.55791"
+           x="355.05984"
+           transform="scale(1.0007154,0.99928514)">0</text>
+        <text
+           transform="scale(1.0007154,0.99928511)"
+           style="font-weight:normal;font-size:9.28803921px;font-family:Arial;fill:#2b2828;fill-rule:evenodd;stroke-width:0.36866826"
+           id="text804"
+           y="102.42173"
+           x="365.30151">+</text>
+      </g>
+    </g>
+    <g
+       transform="translate(335.89988,-58.934803)"
+       id="g3544"
+       inkscape:label="Esc"
+       style="stroke-width:0.47631353">
+      <path
+         style="opacity:1;vector-effect:none;fill:#4f4c4d;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.16824313;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="path105"
+         d="m 47.948645,115.07509 h 39.076386 c 1,0 3,1 3,3 v 18 c 0,1 -2,3 -3,3 H 47.948645 c -2,0 -3,-2 -3,-3 v -18 c 0,-2 1,-3 3,-3 z"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="sssssssss" />
+      <text
+         transform="scale(1.0007154,0.99928512)"
+         style="font-weight:normal;font-size:9.37966251px;font-family:Arial;fill:#ffffff;fill-rule:evenodd;stroke-width:0.36866826"
+         id="text469"
+         y="130.02028"
+         x="59.288635">Esc</text>
+    </g>
+    <g
+       inkscape:label="Enter"
+       id="g4291"
+       style="stroke-width:0.47631353"
+       transform="translate(0,-19.076386)">
+      <path
+         sodipodi:nodetypes="sssssssss"
+         style="opacity:1;vector-effect:none;fill:#4f4c4d;fill-opacity:1;stroke:none;stroke-width:0.16824313;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="path3616"
+         d="m 368.68274,170 c -1,0 -2,-1 -2,-3 v -17 c 0,-1 1,-3 2,-3 h 54.24217 c 2,0 3,2 3,3 v 17 c 0,2 -1,3 -3,3 z"
+         inkscape:connector-curvature="0" />
+      <path
+         style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;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:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         d="m -260.23633,1080.8125 v 15.7949 h -38.68555 v -3 l -6.91992,4 6.91992,4 v -3.0019 h 40.6836 v -17.793 z"
+         transform="matrix(0.47690966,0,0,0.47690966,531.12074,-361.18588)"
+         id="path6545"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       inkscape:label="BackSpace"
+       id="g4287"
+       style="fill-rule:evenodd;stroke-width:0.47631353"
+       transform="translate(2.3648311e-6,-28.614579)">
+      <path
+         sodipodi:nodetypes="sssssssss"
+         style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="path3624"
+         d="m 391.97749,144 c -1,0 -2,-1 -2,-3 v -17 c 0,-1 1,-3 2,-3 h 30.94742 c 2,0 3,2 3,3 v 17 c 0,2 -1,3 -3,3 z"
+         inkscape:connector-curvature="0" />
+      <path
+         style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;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:#2b2828;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         d="m -268.72656,1011.1777 -6.91992,4 6.91992,4 v -3.0019 h 29.18945 v -1.9981 h -29.18945 z"
+         transform="matrix(0.47690966,0,0,0.47690966,531.12074,-351.64769)"
+         id="path11623-1-0"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       id="g934"
+       inkscape:label="CapsLock">
+      <g
+         inkscape:label="inactive"
+         id="g942"
+         style="display:inline;fill-rule:evenodd;stroke-width:0.47631353"
+         transform="translate(0,-19.076386)">
+        <path
+           sodipodi:nodetypes="sssssssss"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path936-3"
+           d="m 67.025031,170 c -1,0 -3,-1 -3,-2 v -19 c 0,-1 2,-2 3,-2 H 92 c 2,0 4,1 4,2 v 19 c 0,1 -2,2 -4,2 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="69.789322"
+           y="156.71973"
+           id="text938-5"
+           style="font-weight:normal;font-size:8.66233635px;font-family:Arial;fill:#2b2828;stroke-width:0.36866823"
+           transform="scale(1.0007154,0.99928515)">Caps</text>
+        <text
+           x="69.789322"
+           y="166.5585"
+           id="text940"
+           style="font-weight:normal;font-size:8.66233635px;font-family:Arial;fill:#2b2828;stroke-width:0.36866823"
+           transform="scale(1.0007154,0.99928515)">Lock</text>
+      </g>
+      <g
+         transform="translate(0,-19.076386)"
+         style="fill-rule:evenodd;stroke-width:0.47631353"
+         id="g4429"
+         inkscape:label="active">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 67.025031,170 c -1,0 -3,-1 -3,-2 v -19 c 0,-1 2,-2 3,-2 H 92 c 2,0 4,1 4,2 v 19 c 0,1 -2,2 -4,2 z"
+           id="path199"
+           style="opacity:1;vector-effect:none;fill:#4f4c4d;fill-opacity:1;stroke:none;stroke-width:0.16824313;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           sodipodi:nodetypes="sssssssss" />
+        <text
+           transform="scale(1.0007154,0.99928515)"
+           style="font-weight:normal;font-size:8.66233635px;font-family:Arial;fill:#ffffff;stroke-width:0.36866823"
+           id="text647"
+           y="156.71973"
+           x="69.789322">Caps</text>
+        <text
+           transform="scale(1.0007154,0.99928515)"
+           style="font-weight:normal;font-size:8.66233635px;font-family:Arial;fill:#ffffff;stroke-width:0.36866823"
+           id="text651"
+           y="166.5585"
+           x="69.789322">Lock</text>
+      </g>
+    </g>
+    <rect
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fffff5;fill-opacity:1;fill-rule:nonzero;stroke:#202326;stroke-width:0;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="rect2130"
+       width="361.89996"
+       height="30.150299"
+       x="64.024956"
+       y="15.771065"
+       rx="3.8152773"
+       ry="3.8152773"
+       inkscape:label="Field" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:19.0763855px;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:0.47690967px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="72.50132"
+       y="38.296417"
+       id="text1309"
+       inkscape:label="Value"><tspan
+         sodipodi:role="line"
+         id="tspan1307"
+         x="72.50132"
+         y="38.296417"
+         style="text-align:start;text-anchor:start;stroke-width:0.47690967px">text</tspan></text>
+    <g
+       id="g437"
+       inkscape:label="Shift">
+      <g
+         id="g421"
+         inkscape:label="inactive">
+        <path
+           inkscape:connector-curvature="0"
+           d="m 379.96247,185.46181 c -1,0 -2,-1 -2,-3 v -17 c 0,-1 1,-3 2,-3 h 42.96244 c 2,0 3,2 3,3 v 17 c 0,2 -1,3 -3,3 z"
+           id="path910"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           sodipodi:nodetypes="sssssssss" />
+        <text
+           style="font-weight:normal;font-size:8.92098808px;font-family:Arial;fill:#2b2828;stroke-width:0.36866826"
+           id="text912"
+           y="177.90059"
+           x="392.55679"
+           transform="scale(1.0007154,0.99928513)">Shift</text>
+        <path
+           sodipodi:nodetypes="sssssssss"
+           style="opacity:1;vector-effect:none;fill:#d3d2d2;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.16824308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path856"
+           d="m 67.025031,185.46181 c -1,0 -3,-1 -3,-3 v -17 c 0,-1 2,-3 3,-3 H 104 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           x="75.85218"
+           y="177.90059"
+           id="text858"
+           style="font-weight:normal;font-size:8.92098808px;font-family:Arial;fill:#2b2828;fill-rule:evenodd;stroke-width:0.36866826"
+           transform="scale(1.0007154,0.99928513)">Shift</text>
+      </g>
+      <g
+         id="g413"
+         inkscape:label="active">
+        <path
+           sodipodi:nodetypes="sssssssss"
+           style="opacity:1;vector-effect:none;fill:#4f4c4d;fill-opacity:1;stroke:none;stroke-width:0.16824313;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           id="path551"
+           d="m 379.96247,185.46181 c -1,0 -2,-1 -2,-3 v -17 c 0,-1 1,-3 2,-3 h 42.96244 c 2,0 3,2 3,3 v 17 c 0,2 -1,3 -3,3 z"
+           inkscape:connector-curvature="0" />
+        <text
+           transform="scale(1.0007154,0.99928513)"
+           x="392.55679"
+           y="177.90059"
+           id="text629"
+           style="font-weight:normal;font-size:8.92098808px;font-family:Arial;fill:#ffffff;stroke-width:0.36866826">Shift</text>
+        <path
+           inkscape:connector-curvature="0"
+           d="m 67.025031,185.46181 c -1,0 -3,-1 -3,-3 v -17 c 0,-1 2,-3 3,-3 H 104 c 1,0 2,2 2,3 v 17 c 0,2 -1,3 -2,3 z"
+           id="path879"
+           style="opacity:1;vector-effect:none;fill:#4f4c4d;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.16824313;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+           sodipodi:nodetypes="sssssssss" />
+        <text
+           transform="scale(1.0007154,0.99928513)"
+           style="font-weight:normal;font-size:8.92098808px;font-family:Arial;fill:#ffffff;fill-rule:evenodd;stroke-width:0.36866826"
+           id="text881"
+           y="177.90059"
+           x="75.85218">Shift</text>
+      </g>
+    </g>
+    <text
+       transform="scale(0.96824588,1.0327955)"
+       id="text471"
+       y="12.333657"
+       x="252.9579"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.31375408px;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;fill-rule:evenodd;stroke:none;stroke-width:0.30784383px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"
+       inkscape:label="Info"><tspan
+         style="stroke-width:0.30784383px"
+         y="12.333657"
+         x="252.9579"
+         id="tspan469"
+         sodipodi:role="line">information</tspan></text>
+    <rect
+       style="opacity:0.18600003;fill:#de2cc9;fill-opacity:1;stroke:none;stroke-width:0.31677353"
+       id="rect4563"
+       width="381.45959"
+       height="14.110301"
+       x="54.211086"
+       y="1.2654642"
+       inkscape:label="position" />
+  </g>
+  <g
+     inkscape:label="HMI:Slider@/PUMP0/SLOTH"
+     transform="matrix(7.5590552,0,0,7.5590552,-248.554,584.0829)"
+     id="g110-0-9">
+    <g
+       inkscape:label="setpoint"
+       style="opacity:0.5;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.76565915"
+       inkscape:corner7="-0.15304809 : -0.15652183 : 0.051043755 : 1"
+       inkscape:corner0="-0.13109479 : -0.13697746 : 0 : 1"
+       inkscape:perspectiveID="#perspective258"
+       id="g256"
+       sodipodi:type="inkscape:box3d">
+      <path
+         style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+         points="69.054145,5.4029493 71.910946,3.7246414 71.910946,0.053890203 69.054145,1.5165601 "
+         d="M 69.054145,1.5165601 V 5.4029493 L 71.910946,3.7246414 V 0.0538902 Z"
+         inkscape:box3dsidetype="6"
+         id="path244"
+         sodipodi:type="inkscape:box3dside" />
+      <path
+         style="fill:#afafde;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+         points="72.352867,6.8282124 75.092002,5.0278603 71.910946,3.7246414 69.054145,5.4029493 "
+         d="M 69.054145,5.4029493 72.352867,6.8282124 75.092002,5.0278603 71.910946,3.7246414 Z"
+         inkscape:box3dsidetype="13"
+         id="path246"
+         sodipodi:type="inkscape:box3dside" />
+      <path
+         style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+         points="75.092002,1.2673703 75.092002,5.0278603 71.910946,3.7246414 71.910946,0.053890203 "
+         d="m 71.910946,0.0538902 3.181056,1.2134801 v 3.76049 L 71.910946,3.7246414 Z"
+         inkscape:box3dsidetype="11"
+         id="path248"
+         sodipodi:type="inkscape:box3dside" />
+      <path
+         style="fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+         points="72.352867,2.8410867 75.092002,1.2673703 71.910946,0.053890203 69.054145,1.5165601 "
+         d="M 69.054145,1.5165601 72.352867,2.8410867 75.092002,1.2673703 71.910946,0.0538902 Z"
+         inkscape:box3dsidetype="5"
+         id="path250"
+         sodipodi:type="inkscape:box3dside" />
+      <path
+         style="fill:#d7d7ff;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+         points="72.352867,6.8282124 75.092002,5.0278603 75.092002,1.2673703 72.352867,2.8410867 "
+         d="m 72.352867,2.8410867 v 3.9871257 l 2.739135,-1.8003521 v -3.76049 z"
+         inkscape:box3dsidetype="14"
+         id="path252"
+         sodipodi:type="inkscape:box3dside" />
+      <path
+         style="fill:#8686bf;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+         points="72.352867,2.8410867 72.352867,6.8282124 69.054145,5.4029493 69.054145,1.5165601 "
+         d="m 69.054145,1.5165601 3.298722,1.3245266 V 6.8282124 L 69.054145,5.4029493 Z"
+         inkscape:box3dsidetype="3"
+         id="path254"
+         sodipodi:type="inkscape:box3dside" />
+    </g>
+    <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;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ff0000;stroke-width:0.52375954;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 71.94894,3.6581855 79.3256,0.040092"
+       id="path90-9-3"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc"
+       inkscape:label="range" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:5.29166651px;line-height:125%;font-family:sans-serif;text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="68.771873"
+       y="5.501111"
+       id="text96-6-0"
+       inkscape:label="min"><tspan
+         sodipodi:role="line"
+         id="tspan94-0-62"
+         x="68.771873"
+         y="5.501111"
+         style="text-align:end;text-anchor:end;fill:#ff6600;stroke-width:0.26458332px">0</tspan></text>
+    <text
+       id="text100-6-6"
+       y="5.501111"
+       x="159.67337"
+       style="font-style:normal;font-weight:normal;font-size:5.29166651px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"
+       inkscape:label="max"><tspan
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.26458332px"
+         y="5.501111"
+         x="159.67337"
+         sodipodi:role="line"
+         id="tspan1409-1">1000</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:7.78479624px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#ff6600;fill-opacity:1;stroke:none;stroke-width:0.19461991px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="-115.32294"
+       y="-9.0188799"
+       id="text104-6-8"
+       inkscape:label="value"
+       transform="scale(-1)"><tspan
+         sodipodi:role="line"
+         x="-115.32294"
+         y="-9.0188799"
+         style="text-align:center;text-anchor:middle;fill:#ff6600;stroke-width:0.19461991px"
+         id="tspan102-1-7">000</tspan></text>
+    <g
+       sodipodi:type="inkscape:box3d"
+       id="g930"
+       inkscape:perspectiveID="#perspective503"
+       inkscape:corner0="-0.13109479 : -0.13697746 : 0 : 1"
+       inkscape:corner7="-0.15304809 : -0.15652183 : 0.051043755 : 1"
+       style="fill:#ff0000;fill-opacity:1;stroke:none"
+       inkscape:label="handle"
+       transform="translate(0.01,0.01)">
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path932"
+         inkscape:box3dsidetype="6"
+         d="M 69.751604,1.9575481 V 4.9331975 L 71.93894,3.6481857 V 0.8376415 Z"
+         points="69.751604,4.9331975 71.93894,3.6481857 71.93894,0.8376415 69.751604,1.9575481 "
+         style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path940"
+         inkscape:box3dsidetype="13"
+         d="M 69.751604,4.9331975 72.2773,6.0244633 74.374544,4.6460073 71.93894,3.6481857 Z"
+         points="72.2773,6.0244633 74.374544,4.6460073 71.93894,3.6481857 69.751604,4.9331975 "
+         style="fill:#afafde;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path942"
+         inkscape:box3dsidetype="11"
+         d="m 71.93894,0.8376415 2.435604,0.9291122 V 4.6460073 L 71.93894,3.6481857 Z"
+         points="74.374544,1.7667537 74.374544,4.6460073 71.93894,3.6481857 71.93894,0.8376415 "
+         style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path934"
+         inkscape:box3dsidetype="5"
+         d="M 69.751604,1.9575481 72.2773,2.971684 74.374544,1.7667537 71.93894,0.8376415 Z"
+         points="72.2773,2.971684 74.374544,1.7667537 71.93894,0.8376415 69.751604,1.9575481 "
+         style="fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path938"
+         inkscape:box3dsidetype="14"
+         d="m 72.2773,2.971684 v 3.0527793 l 2.097244,-1.378456 V 1.7667537 Z"
+         points="72.2773,6.0244633 74.374544,4.6460073 74.374544,1.7667537 72.2773,2.971684 "
+         style="fill:#d7d7ff;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path936"
+         inkscape:box3dsidetype="3"
+         d="M 69.751604,1.9575481 72.2773,2.971684 V 6.0244633 L 69.751604,4.9331975 Z"
+         points="72.2773,2.971684 72.2773,6.0244633 69.751604,4.9331975 69.751604,1.9575481 "
+         style="fill:#8686bf;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />
+    </g>
+  </g>
+  <g
+     id="g1292-3"
+     inkscape:label="HMI:Input@/RADIOSTATE"
+     transform="matrix(0.94144976,0,0,1.7212489,176.35468,-2117.077)">
+    <g
+       id="g2530"
+       inkscape:label="=3">
+      <rect
+         style="display:inline;fill:#0009ff;fill-opacity:1;stroke:none;stroke-width:0.24259248"
+         id="rect1273-6-3"
+         width="57.391823"
+         height="24.148804"
+         x="230.03636"
+         y="1238.2637"
+         inkscape:label="3" />
+      <g
+         transform="translate(-213.152,55.750293)"
+         id="g2520-5"
+         inkscape:label="HMI:Switch@/RADIOSTATE"
+         style="fill:#0009ff;fill-opacity:1">
+        <rect
+           inkscape:label="3"
+           y="1206.6622"
+           x="443.18835"
+           height="24.148754"
+           width="57.39183"
+           id="rect1273-6-9-9-9"
+           style="display:inline;fill:#0009ff;fill-opacity:1;stroke:none;stroke-width:0.24259226" />
+      </g>
+    </g>
+    <g
+       id="g2527"
+       inkscape:label="=2">
+      <rect
+         style="display:inline;fill:#00ffed;fill-opacity:1;stroke:none;stroke-width:0.24259254"
+         id="rect1273-6-56"
+         width="57.391857"
+         height="24.148804"
+         x="313.84549"
+         y="1238.2637"
+         inkscape:label="2" />
+      <g
+         transform="translate(-303.62283,32.70105)"
+         id="g2520-2"
+         inkscape:label="HMI:Switch@/RADIOSTATE">
+        <rect
+           inkscape:label="2"
+           y="1229.7114"
+           x="617.46832"
+           height="24.148754"
+           width="57.39183"
+           id="rect1273-6-9-9-0"
+           style="display:inline;fill:#00ffed;fill-opacity:1;stroke:none;stroke-width:0.24259226" />
+      </g>
+    </g>
+    <g
+       id="g2524"
+       inkscape:label="=1">
+      <rect
+         style="display:inline;fill:#3eff00;fill-opacity:1;stroke:none;stroke-width:0.24182089"
+         id="rect1273-6-2"
+         width="57.027344"
+         height="24.148796"
+         x="146.22725"
+         y="1238.2637"
+         inkscape:label="1" />
+      <g
+         transform="translate(-213.152,55.750293)"
+         id="g2520-23"
+         inkscape:label="HMI:Switch@/RADIOSTATE">
+        <rect
+           inkscape:label="1"
+           y="1206.6622"
+           x="359.37924"
+           height="24.148754"
+           width="57.39183"
+           id="rect1273-6-9-9-7"
+           style="display:inline;fill:#3eff00;fill-opacity:1;stroke:none;stroke-width:0.24259226" />
+      </g>
+    </g>
+    <g
+       id="g2501"
+       inkscape:label="=0"
+       transform="translate(-260.62575)">
+      <rect
+         inkscape:label="0"
+         y="1238.2637"
+         x="323.04385"
+         height="24.148754"
+         width="57.39183"
+         id="rect1273-6-9"
+         style="display:inline;fill:#ffea00;fill-opacity:1;stroke:none;stroke-width:0.24259225" />
+      <g
+         id="g2520"
+         inkscape:label="HMI:Switch@/RADIOSTATE">
+        <rect
+           inkscape:label="0"
+           y="1262.4125"
+           x="323.04385"
+           height="24.148754"
+           width="57.39183"
+           id="rect1273-6-9-9"
+           style="display:inline;fill:#ffea00;fill-opacity:1;stroke:none;stroke-width:0.24259226" />
+      </g>
+    </g>
+  </g>
+  <g
+     id="g1047"
+     inkscape:label="HMI:CircularBar@/PUMP0/SLOTH"
+     transform="matrix(0.39840034,0,0,0.35920948,-97.955902,106.13488)">
+    <path
+       inkscape:label="range"
+       sodipodi:open="true"
+       d="M 1079.626,411.60913 A 184.25998,167.44942 0 0 1 874.51345,308.78336 184.25998,167.44942 0 0 1 946.20137,106.11681 184.25998,167.44942 0 0 1 1178.8257,131.16507"
+       sodipodi:end="5.5191826"
+       sodipodi:start="1.3860423"
+       sodipodi:ry="167.44942"
+       sodipodi:rx="184.25998"
+       sodipodi:cy="247.00946"
+       sodipodi:cx="1045.7766"
+       sodipodi:type="arc"
+       id="path1044"
+       style="opacity:1;fill:none;fill-opacity:1;stroke:#fe00dc;stroke-width:22.07197189;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:90.1384964px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff00ca;fill-opacity:1;stroke:none;stroke-width:2.25346255px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="1046.8701"
+       y="258.16129"
+       id="text1051"
+       transform="scale(0.91814752,1.0891496)"
+       inkscape:label="value"><tspan
+         sodipodi:role="line"
+         id="tspan1049"
+         x="1046.8701"
+         y="258.16129"
+         style="fill:#ff00ca;fill-opacity:1;stroke:none;stroke-width:2.25346255px;stroke-opacity:1">000</tspan></text>
+    <path
+       inkscape:label="path"
+       sodipodi:open="true"
+       d="M 1083.68,410.87778 A 184.25998,167.44942 0 0 1 875.42544,310.83196 184.25998,167.44942 0 0 1 945.58759,106.47662 184.25998,167.44942 0 0 1 1179.4956,131.8038"
+       sodipodi:end="5.524452"
+       sodipodi:start="1.3636114"
+       sodipodi:ry="167.44942"
+       sodipodi:rx="184.25998"
+       sodipodi:cy="247.00946"
+       sodipodi:cx="1045.7766"
+       sodipodi:type="arc"
+       id="path1044-3"
+       style="opacity:1;fill:none;fill-opacity:1;stroke:#00fff1;stroke-width:40;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+  <g
+     id="g1047-6"
+     inkscape:label="HMI:CircularSlider@/PUMP0/SLOTH"
+     transform="matrix(0.45707797,0,0,0.45707797,33.744118,80.994747)">
+    <path
+       inkscape:label="range"
+       d="M 970.29569,399.76446 A 184.25998,167.44942 0 0 1 866.26395,284.77467 184.25998,167.44942 0 0 1 904.10823,139.93753"
+       sodipodi:end="3.8353474"
+       sodipodi:start="1.9928597"
+       sodipodi:ry="167.44942"
+       sodipodi:rx="184.25998"
+       sodipodi:cy="247.00946"
+       sodipodi:cx="1045.7766"
+       sodipodi:type="arc"
+       id="path1044-7"
+       style="opacity:1;fill:none;fill-opacity:1;stroke:#fe00dc;stroke-width:22.07197189;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       sodipodi:open="true" />
+    <g
+       sodipodi:type="inkscape:box3d"
+       id="g930-2"
+       inkscape:perspectiveID="#perspective503-6"
+       inkscape:corner0="-0.086129988 : -0.14445971 : 0 : 1"
+       inkscape:corner7="-0.10808329 : -0.16400408 : 0.051043755 : 1"
+       style="fill:#ff0000;fill-opacity:1;stroke:none"
+       inkscape:label="handle"
+       inkscape:transform-center-x="8"
+       inkscape:transform-center-y="98">
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path932-9"
+         inkscape:box3dsidetype="6"
+         d="m 919.8592,371.09875 v 61.75093 l 51.05152,-25.59855 v -58.48432 z"
+         points="919.8592,432.84968 970.91072,407.25113 970.91072,348.76681 919.8592,371.09875 "
+         style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-width:21.82598114px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path940-1"
+         inkscape:box3dsidetype="13"
+         d="m 919.8592,432.84968 49.77112,22.08624 49.54588,-27.39007 -48.26548,-20.29472 z"
+         points="969.63032,454.93592 1019.1762,427.54585 970.91072,407.25113 919.8592,432.84968 "
+         style="fill:#afafde;fill-rule:evenodd;stroke:none;stroke-width:21.82598114px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path942-2"
+         inkscape:box3dsidetype="11"
+         d="m 970.91072,348.76681 48.26548,18.93313 v 59.84591 l -48.26548,-20.29472 z"
+         points="1019.1762,367.69994 1019.1762,427.54585 970.91072,407.25113 970.91072,348.76681 "
+         style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-width:21.82598114px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path934-7"
+         inkscape:box3dsidetype="5"
+         d="m 919.8592,371.09875 49.77112,20.56633 49.54588,-23.96514 -48.26548,-18.93313 z"
+         points="969.63032,391.66508 1019.1762,367.69994 970.91072,348.76681 919.8592,371.09875 "
+         style="fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-width:21.82598114px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path938-0"
+         inkscape:box3dsidetype="14"
+         d="m 969.63032,391.66508 v 63.27084 l 49.54588,-27.39007 v -59.84591 z"
+         points="969.63032,454.93592 1019.1762,427.54585 1019.1762,367.69994 969.63032,391.66508 "
+         style="fill:#d7d7ff;fill-rule:evenodd;stroke:none;stroke-width:21.82598114px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />
+      <path
+         sodipodi:type="inkscape:box3dside"
+         id="path936-9"
+         inkscape:box3dsidetype="3"
+         d="m 919.8592,371.09875 49.77112,20.56633 v 63.27084 L 919.8592,432.84968 Z"
+         points="969.63032,391.66508 969.63032,454.93592 919.8592,432.84968 919.8592,371.09875 "
+         style="fill:#8686bf;fill-rule:evenodd;stroke:none;stroke-width:21.82598114px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />
+    </g>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:90.1384964px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff00ca;fill-opacity:1;stroke:none;stroke-width:2.25346255px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="1046.8701"
+       y="258.16129"
+       id="text1051-5"
+       transform="scale(0.91814752,1.0891496)"
+       inkscape:label="value"><tspan
+         sodipodi:role="line"
+         id="tspan1049-3"
+         x="1046.8701"
+         y="258.16129"
+         style="fill:#ff00ca;fill-opacity:1;stroke:none;stroke-width:2.25346255px;stroke-opacity:1">000</tspan></text>
+  </g>
+  <g
+     transform="translate(-289.17513,-33.060654)"
+     id="g4791-6"
+     inkscape:label="HMI:ToggleButton@/TOGGLE1">
+    <rect
+       inkscape:label="inactive"
+       y="47.187904"
+       x="906.51086"
+       height="44.547726"
+       width="45.254833"
+       id="rect4772-5"
+       style="opacity:1;fill:#ff0015;fill-opacity:1;stroke:none" />
+    <rect
+       inkscape:label="active"
+       y="47.187904"
+       x="906.51086"
+       height="44.547726"
+       width="45.254833"
+       id="rect4772-3-7"
+       style="opacity:1;fill:#00ff03;fill-opacity:1;stroke:none" />
+  </g>
+  <g
+     transform="translate(-287.05529,41.033314)"
+     id="g479hgjk"
+     inkscape:label="HMI:Button@/TOGGLE">
+    <rect
+       inkscape:label="active"
+       y="46.127251"
+       x="906.51086"
+       height="44.547726"
+       width="45.254833"
+       id="rect47fuzkj"
+       style="opacity:1;fill:#00ff03;fill-opacity:1;stroke:none" />
+    <rect
+       inkscape:label="inactive"
+       y="46.127251"
+       x="906.51086"
+       height="44.547726"
+       width="45.254833"
+       id="rect477hjoj"
+       style="opacity:1;fill:#ff0015;fill-opacity:1;stroke:none" />
+  </g>
+  <g
+     id="g1112"
+     inkscape:label="HMI:AnimateRotation@/SPEED">
+    <circle
+       r="32.057827"
+       cy="436.18585"
+       cx="747.05347"
+       id="path1380"
+       style="fill:#ececec;fill-opacity:1;stroke:#ff0000;stroke-width:2.95733476;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       y="286.18585"
+       x="597.05353"
+       height="300"
+       width="300"
+       id="rect1382"
+       style="opacity:0;fill:#ececec;fill-opacity:1;stroke:none;stroke-width:3.69000006;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       sodipodi:nodetypes="sssssss"
+       inkscape:connector-curvature="0"
+       id="path1388"
+       d="m 719.75481,403.83452 c 1.9692,9.54564 9.417,-4.37059 26.6751,-4.06174 27.2477,0.48762 30.0401,21.24497 35.5749,12.81174 6.6594,-10.14673 12.6699,-22.7446 14.75,-33.25 13.5509,-68.43783 -46.4736,-97.18589 -72,-91.49999 -40.88858,9.10778 -49.54078,47.21136 -31.99998,71.75 13.16428,18.41615 23.37448,26.67508 26.99998,44.24999 z"
+       style="fill:#fd0000;fill-opacity:1;stroke:#ff0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <path
+       sodipodi:nodetypes="sssssss"
+       inkscape:connector-curvature="0"
+       id="path1388-9"
+       d="m 789.45321,432.25975 c -8.9783,-3.79302 -1.7422,10.23457 -11.7862,24.27224 -15.8577,22.16324 -34.5364,12.68834 -30.7308,22.03024 4.5788,11.24 11.5443,23.3361 19.0162,31.0083 48.6752,49.9808 106.3992,16.8549 116.1963,-7.3926 15.6932,-38.84015 -10.7791,-67.57972 -40.9378,-67.05341 -22.634,0.39495 -35.2273,4.11873 -51.7577,-2.86477 z"
+       style="fill:#fd0000;fill-opacity:1;stroke:#ff0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <path
+       sodipodi:nodetypes="sssssss"
+       inkscape:connector-curvature="0"
+       id="path1388-9-8"
+       d="m 730.85671,475.85643 c 7.5732,-6.1355 -8.2092,-6.3552 -15.8654,-21.82523 -12.0882,-24.42445 5.0646,-36.44319 -4.9688,-37.48364 -12.07218,-1.25186 -26.02318,-0.80116 -36.30958,2.17903 -67.0109,19.41388 -64.9607,85.93594 -48.1806,105.99474 26.8787,32.1304 64.6969,22.3051 78.43058,-4.5502 10.3071,-20.1549 12.9505,-33.0184 26.8938,-44.3147 z"
+       style="fill:#fd0000;fill-opacity:1;stroke:#ff0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <animateTransform
+       attributeName="transform"
+       attributeType="XML"
+       type="rotate"
+       from="0 1049 278"
+       to="360 1049 278"
+       dur="1s"
+       repeatCount="indefinite" />
+  </g>
+  <g
+     id="g1093"
+     inkscape:label="HMI:CustomHtml">
+    <rect
+       inkscape:label="container"
+       y="12"
+       x="818"
+       height="323"
+       width="452"
+       id="rect1072"
+       style="opacity:0.29800002;fill:#0000ff;fill-opacity:1;stroke:none;stroke-width:1.11057007" />
+    <text
+       inkscape:label="code"
+       transform="scale(0.57360572,1.7433578)"
+       id="text1076"
+       y="23.059681"
+       x="1433.04"
+       style="font-style:normal;font-weight:normal;font-size:9.29032898px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.87096828px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         style="stroke-width:0.87096828px"
+         id="tspan1078"
+         y="23.059681"
+         x="1433.04"
+         sodipodi:role="line">    &lt;img xmlns=&quot;http://www.w3.org/1999/xhtml&quot; id=&quot;img&quot; src=&quot;https://thumbs.gfycat.com/ImpoliteSoupyKakapo-size_restricted.gif&quot;  width=&quot;100%&quot; height=&quot;80%&quot; /&gt;</tspan><tspan
+         style="stroke-width:0.87096828px"
+         id="tspan1080"
+         y="34.672592"
+         x="1433.04"
+         sodipodi:role="line">    &lt;a xmlns=&quot;http://www.w3.org/1999/xhtml&quot; href='www.gmail.com'&gt;Gmail&lt;/a&gt;</tspan><tspan
+         style="stroke-width:0.87096828px"
+         id="tspan1082"
+         y="46.285503"
+         x="1433.04"
+         sodipodi:role="line">    &lt;p xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;Koj kurac to ne dela&lt;/p&gt;</tspan><tspan
+         style="stroke-width:0.87096828px"
+         id="tspan1084"
+         y="57.898415"
+         x="1433.04"
+         sodipodi:role="line" /></text>
+  </g>
+</svg>