SVGHMI: add support for "reference" and "frame" rectangles to spread-out ovelapping elements.
authorEdouard Tisserant
Wed, 28 Sep 2022 09:19:07 +0200
changeset 3625 bb1eff4091ab
parent 3624 770c613c424f
child 3626 dfcd13683362
child 3733 d1acf20e8e7c
SVGHMI: add support for "reference" and "frame" rectangles to spread-out ovelapping elements.

When HMI become complicated, designer needs to spread-out ovelapping elements
in order to unclutter drawing and facilitate maintenance.
exemples/svghmi_references/beremiz.xml
exemples/svghmi_references/plc.xml
exemples/svghmi_references/svghmi_0@svghmi/baseconfnode.xml
exemples/svghmi_references/svghmi_0@svghmi/confnode.xml
exemples/svghmi_references/svghmi_0@svghmi/svghmi.svg
svghmi/geometry.ysl2
svghmi/inline_svg.ysl2
svghmi/svghmi.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/exemples/svghmi_references/beremiz.xml	Wed Sep 28 09:19:07 2022 +0200
@@ -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:61427">
+  <TargetType/>
+  <Libraries Enable_SVGHMI_Library="true"/>
+</BeremizRoot>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/exemples/svghmi_references/plc.xml	Wed Sep 28 09:19:07 2022 +0200
@@ -0,0 +1,71 @@
+<?xml version='1.0' encoding='utf-8'?>
+<project xmlns:ns1="http://www.plcopen.org/xml/tc6_0201" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://www.plcopen.org/xml/tc6_0201">
+  <fileHeader companyName="Unknown" productName="Unnamed" productVersion="1" creationDateTime="2022-09-05T09:02:48"/>
+  <contentHeader name="Unnamed" modificationDateTime="2022-09-20T11:48:55">
+    <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="program0" pouType="program">
+        <interface>
+          <localVars>
+            <variable name="LocalVar0">
+              <type>
+                <DINT/>
+              </type>
+            </variable>
+            <variable name="LocalVar1">
+              <type>
+                <DINT/>
+              </type>
+            </variable>
+          </localVars>
+        </interface>
+        <body>
+          <FBD>
+            <inVariable localId="31" executionOrderId="0" height="25" width="85" negated="false">
+              <position x="175" y="290"/>
+              <connectionPointOut>
+                <relPosition x="85" y="10"/>
+              </connectionPointOut>
+              <expression>LocalVar0</expression>
+            </inVariable>
+            <outVariable localId="30" executionOrderId="0" height="25" width="85" negated="false">
+              <position x="330" y="290"/>
+              <connectionPointIn>
+                <relPosition x="0" y="10"/>
+                <connection refLocalId="31">
+                  <position x="330" y="300"/>
+                  <position x="260" y="300"/>
+                </connection>
+              </connectionPointIn>
+              <expression>LocalVar1</expression>
+            </outVariable>
+          </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="program0"/>
+          </task>
+        </resource>
+      </configuration>
+    </configurations>
+  </instances>
+</project>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/exemples/svghmi_references/svghmi_0@svghmi/baseconfnode.xml	Wed Sep 28 09:19:07 2022 +0200
@@ -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/exemples/svghmi_references/svghmi_0@svghmi/confnode.xml	Wed Sep 28 09:19:07 2022 +0200
@@ -0,0 +1,2 @@
+<?xml version='1.0' encoding='utf-8'?>
+<SVGHMI xmlns:xsd="http://www.w3.org/2001/XMLSchema"/>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/exemples/svghmi_references/svghmi_0@svghmi/svghmi.svg	Wed Sep 28 09:19:07 2022 +0200
@@ -0,0 +1,1236 @@
+<?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"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="svghmi.svg"
+   id="hmi0"
+   version="1.1"
+   viewBox="0 0 1280 720"
+   height="720"
+   width="1280">
+  <metadata
+     id="metadata8">
+    <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="defs6">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3492">
+      <stop
+         style="stop-color:#ffe7c7;stop-opacity:1"
+         offset="0"
+         id="stop3488" />
+      <stop
+         style="stop-color:#ffa32a;stop-opacity:1"
+         offset="1"
+         id="stop3490" />
+    </linearGradient>
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3492"
+       id="radialGradient3494"
+       cx="216.07262"
+       cy="502.80469"
+       fx="216.07262"
+       fy="502.80469"
+       r="163.49561"
+       gradientTransform="matrix(0.4681866,-0.01866012,0.01595521,0.40031975,730.16721,420.75466)"
+       gradientUnits="userSpaceOnUse" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3492"
+       id="radialGradient3514"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.4681866,-0.01866012,0.01595521,0.40031975,350.16721,420.75466)"
+       cx="958.08276"
+       cy="613.50269"
+       fx="958.08276"
+       fy="613.50269"
+       r="163.49561" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3492"
+       id="radialGradient3534"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.4681866,-0.01866012,0.01595521,0.40031975,-29.83279,420.75466)"
+       cx="1680.1648"
+       cy="652.54999"
+       fx="1680.1648"
+       fy="652.54999"
+       r="163.49561" />
+  </defs>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1600"
+     inkscape:window-height="836"
+     id="namedview4"
+     showgrid="false"
+     inkscape:zoom="0.92709556"
+     inkscape:cx="1883.1062"
+     inkscape:cy="712.84763"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="hmi0"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     borderlayer="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <use
+     x="0"
+     y="0"
+     xlink:href="#g2496"
+     id="use2504"
+     transform="translate(3940,-2.1367187e-5)"
+     width="100%"
+     height="100%"
+     inkscape:label="HMI:Page:Buttons"
+     sodipodi:insensitive="true" />
+  <use
+     inkscape:label="HMI:Page:Switch"
+     height="100%"
+     width="100%"
+     transform="translate(2640,-2.1367187e-5)"
+     id="use2502"
+     xlink:href="#g2496"
+     y="0"
+     x="0"
+     sodipodi:insensitive="true" />
+  <use
+     x="0"
+     y="0"
+     xlink:href="#g2496"
+     id="use2498"
+     transform="translate(1320,-2.1367187e-5)"
+     width="100%"
+     height="100%"
+     inkscape:label="HMI:Page:Home"
+     sodipodi:insensitive="true" />
+  <rect
+     y="422.29605"
+     x="54.419678"
+     height="280.44577"
+     width="240"
+     id="rect1189"
+     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="2079.7461"
+     y="73.559319"
+     id="text106"><tspan
+       sodipodi:role="line"
+       id="tspan104"
+       x="2079.7461"
+       y="73.559319">Switch widget</tspan></text>
+  <g
+     id="g2496"
+     inkscape:label="page_template"
+     transform="translate(0,2.1367187e-5)">
+    <rect
+       y="0"
+       x="-1320"
+       height="720"
+       width="1280"
+       id="rect1420"
+       style="color:#000000;opacity:1;fill:#d6d6d6;fill-opacity:1" />
+    <g
+       inkscape:label="HMI:Jump:Home"
+       id="g2455">
+      <use
+         x="0"
+         y="0"
+         xlink:href="#rect2313"
+         id="use2435"
+         transform="translate(400,-2.1367187e-5)"
+         width="100%"
+         height="100%"
+         inkscape:label="active" />
+      <use
+         x="0"
+         y="0"
+         xlink:href="#rect2311"
+         id="use2437"
+         transform="translate(400,-2.1367187e-5)"
+         width="100%"
+         height="100%"
+         inkscape:label="inactive" />
+      <text
+         id="text855-7-1"
+         y="70.251053"
+         x="-1166.8177"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           id="tspan66-3"
+           y="70.251053"
+           x="-1166.8177"
+           sodipodi:role="line">Home</tspan></text>
+    </g>
+    <g
+       inkscape:label="HMI:Jump:Switch"
+       id="g2461"
+       transform="translate(0,20)">
+      <use
+         height="100%"
+         width="100%"
+         transform="translate(400,99.999979)"
+         id="use2439"
+         xlink:href="#rect2313"
+         y="0"
+         x="0"
+         inkscape:label="active" />
+      <use
+         height="100%"
+         width="100%"
+         transform="translate(400,99.999979)"
+         id="use2441"
+         xlink:href="#rect2311"
+         y="0"
+         x="0"
+         inkscape:label="inactive" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="-1165.1674"
+         y="170.25105"
+         id="text2349"><tspan
+           sodipodi:role="line"
+           x="-1165.1674"
+           y="170.25105"
+           id="tspan2347">Swith</tspan></text>
+    </g>
+    <g
+       inkscape:label="HMI:Jump:Buttons"
+       id="g2467"
+       transform="translate(0,40)">
+      <use
+         x="0"
+         y="0"
+         xlink:href="#rect2313"
+         id="use2443"
+         transform="translate(400,199.99998)"
+         width="100%"
+         height="100%"
+         inkscape:label="active" />
+      <use
+         x="0"
+         y="0"
+         xlink:href="#rect2311"
+         id="use2445"
+         transform="translate(400,199.99998)"
+         width="100%"
+         height="100%"
+         inkscape:label="inactive" />
+      <text
+         id="text2357"
+         y="270.25104"
+         x="-1165.7826"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           id="tspan2355"
+           y="270.25104"
+           x="-1165.7826"
+           sodipodi:role="line">Buttons</tspan></text>
+    </g>
+  </g>
+  <g
+     id="g2590"
+     inkscape:label="HMI:VarInit:1@.position"
+     transform="translate(-875.45983,1716.017)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.66666603px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="3726.6924"
+       y="-108.39357"
+       id="text2743"><tspan
+         sodipodi:role="line"
+         x="3726.6924"
+         y="-108.39357"
+         id="tspan2765">declaration of &quot;position&quot; HMI local variable</tspan></text>
+  </g>
+  <g
+     style="stroke-width:1.42987263"
+     inkscape:label="HMI:Input@selection"
+     id="g3550"
+     transform="matrix(0.699363,0,0,0.699363,-463.71175,196.54679)">
+    <g
+       id="g2763-2"
+       inkscape:label="=1"
+       style="stroke-width:1.42987263"
+       transform="translate(100.09108)">
+      <rect
+         rx="30.536263"
+         ry="30.536263"
+         y="93.088097"
+         x="3373.916"
+         height="84.580788"
+         width="328.02896"
+         id="rect114-6-7"
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.40424299;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+      <text
+         id="text118-3-0"
+         y="149.95857"
+         x="3537.5791"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.42987263px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           y="149.95857"
+           x="3537.5791"
+           id="tspan116-1-9"
+           sodipodi:role="line"
+           style="stroke-width:1.42987263px">Show popup 1</tspan></text>
+    </g>
+    <g
+       id="g2758-3"
+       inkscape:label="=2"
+       style="stroke-width:1.42987263"
+       transform="translate(0.09077482,114.38981)">
+      <rect
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.40424299;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         id="rect2531-6"
+         width="328.02908"
+         height="84.58078"
+         x="3473.9163"
+         y="93.088097"
+         ry="30.536263"
+         rx="30.536263" />
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.42987263px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="3637.5791"
+         y="149.95857"
+         id="text2557-0"><tspan
+           sodipodi:role="line"
+           id="tspan2555-6"
+           x="3637.5791"
+           y="149.95857"
+           style="stroke-width:1.42987263px">Show popup 2</tspan></text>
+    </g>
+  </g>
+  <g
+     style="stroke-width:1.42987263"
+     transform="translate(2248.2618,144.23794)"
+     id="g2775"
+     inkscape:label="HMI:ToggleButton@.boolvar">
+    <g
+       inkscape:label="active"
+       id="g3474">
+      <rect
+         rx="21.355932"
+         ry="21.355932"
+         y="618.00537"
+         x="518.36066"
+         height="125.00497"
+         width="320.99121"
+         id="rect2781"
+         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:url(#radialGradient3494);fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:6;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+      <rect
+         inkscape:label="frame"
+         y="618.00537"
+         x="518.36066"
+         height="125.00497"
+         width="320.99121"
+         id="rect3470"
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:3.00000003, 3.00000003;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    </g>
+    <rect
+       inkscape:label="inactive"
+       rx="21.355932"
+       ry="21.355932"
+       y="318.00534"
+       x="518.36066"
+       height="125.00497"
+       width="320.99121"
+       id="rect2767"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.77952766;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <text
+       id="text2773"
+       y="365.98633"
+       x="677.57697"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         id="tspan2779"
+         y="365.98633"
+         x="677.57697"
+         sodipodi:role="line">Toggle</tspan><tspan
+         id="tspan3478"
+         y="415.98633"
+         x="677.57697"
+         sodipodi:role="line">button</tspan></text>
+    <rect
+       inkscape:label="reference"
+       y="318.00534"
+       x="518.36066"
+       height="125.00497"
+       width="320.99121"
+       id="rect3468"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:3.00000003, 3.00000003;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
+     style="stroke-width:1.42987263"
+     inkscape:label="HMI:Button@.boolvar"
+     id="g3512"
+     transform="translate(2628.2624,144.23794)">
+    <g
+       id="g3500"
+       inkscape:label="active">
+      <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:url(#radialGradient3514);fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:6;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         id="rect3496"
+         width="320.99121"
+         height="125.00497"
+         x="518.36066"
+         y="618.00537"
+         ry="21.355932"
+         rx="21.355932" />
+      <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:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:3.00000003, 3.00000003;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         id="rect3498"
+         width="320.99121"
+         height="125.00497"
+         x="518.36066"
+         y="618.00537"
+         inkscape:label="frame" />
+    </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:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.77952766;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       id="rect3502"
+       width="320.99121"
+       height="125.00497"
+       x="518.36066"
+       y="318.00534"
+       ry="21.355932"
+       rx="21.355932"
+       inkscape:label="inactive" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="677.57697"
+       y="365.98633"
+       id="text3508"><tspan
+         sodipodi:role="line"
+         x="677.57697"
+         y="365.98633"
+         id="tspan3506">Button</tspan></text>
+    <rect
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:3.00000003, 3.00000003;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       id="rect3510"
+       width="320.99121"
+       height="125.00497"
+       x="518.36066"
+       y="318.00534"
+       inkscape:label="reference" />
+  </g>
+  <g
+     style="stroke-width:1.42987263"
+     transform="translate(3008.263,144.23794)"
+     id="g3532"
+     inkscape:label="HMI:PushButton@.boolvar">
+    <g
+       inkscape:label="active"
+       id="g3522">
+      <rect
+         rx="21.355932"
+         ry="21.355932"
+         y="618.00537"
+         x="518.36066"
+         height="125.00497"
+         width="320.99121"
+         id="rect3518"
+         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:url(#radialGradient3534);fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:6;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+      <rect
+         inkscape:label="frame"
+         y="618.00537"
+         x="518.36066"
+         height="125.00497"
+         width="320.99121"
+         id="rect3520"
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:3.00000003, 3.00000003;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    </g>
+    <rect
+       inkscape:label="inactive"
+       rx="21.355932"
+       ry="21.355932"
+       y="318.00534"
+       x="518.36066"
+       height="125.00497"
+       width="320.99121"
+       id="rect3524"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.77952766;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <text
+       id="text3528"
+       y="365.98633"
+       x="677.57697"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         id="tspan3526"
+         y="365.98633"
+         x="677.57697"
+         sodipodi:role="line">Push</tspan><tspan
+         id="tspan3536"
+         y="415.98633"
+         x="677.57697"
+         sodipodi:role="line">Button</tspan></text>
+    <rect
+       inkscape:label="reference"
+       y="318.00534"
+       x="518.36066"
+       height="125.00497"
+       width="320.99121"
+       id="rect3530"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:3.00000003, 3.00000003;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+  </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:#999999;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     id="rect1807"
+     width="280"
+     height="81.859505"
+     x="-1705.9194"
+     y="17.83654"
+     ry="21.355932"
+     rx="21.355932"
+     inkscape:label="disabled_template" />
+  <rect
+     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.77952766;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     id="rect2311"
+     width="280"
+     height="81.859505"
+     x="-1705.9194"
+     y="17.83654"
+     ry="21.355932"
+     rx="21.355932"
+     inkscape:label="inactive_template" />
+  <rect
+     inkscape:label="active_template"
+     rx="21.355932"
+     ry="21.355932"
+     y="17.83654"
+     x="-1705.9194"
+     height="81.859505"
+     width="280"
+     id="rect2313"
+     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:6;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="703.23212"
+     y="588.7594"
+     id="text2948"><tspan
+       sodipodi:role="line"
+       id="tspan2946"
+       x="703.23212"
+       y="624.15002" /></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="44.283585"
+     y="-289.18591"
+     id="text2952"><tspan
+       sodipodi:role="line"
+       id="tspan2950"
+       x="44.283585"
+       y="-289.18591">Notes: </tspan><tspan
+       sodipodi:role="line"
+       x="44.283585"
+       y="-239.18593"
+       id="tspan2954">- Widget roles are described in objects labels.</tspan><tspan
+       sodipodi:role="line"
+       x="44.283585"
+       y="-189.18593"
+       id="tspan2956">- Press Ctrl+O to open object properties panel</tspan><tspan
+       sodipodi:role="line"
+       x="44.283585"
+       y="-139.18593"
+       id="tspan2962">- To see objects in a tree, select Object-&gt;Objects in menu</tspan><tspan
+       sodipodi:role="line"
+       x="44.283585"
+       y="-89.185921"
+       id="tspan2960">- Inkscape's &quot;objects&quot; are SVG elements</tspan><tspan
+       sodipodi:role="line"
+       x="44.283585"
+       y="-39.185921"
+       id="tspan2966">- Press Ctrl+X to edit SVG elements directly with XML editor</tspan></text>
+  <rect
+     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     id="rect376"
+     width="129.43649"
+     height="73.347351"
+     x="116.35406"
+     y="506.02609" />
+  <rect
+     y="506.02609"
+     x="336.35406"
+     height="73.347351"
+     width="129.43649"
+     id="rect1183"
+     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+  <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:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     id="rect1185"
+     width="129.43649"
+     height="73.347351"
+     x="536.35406"
+     y="506.02609" />
+  <rect
+     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#6d6d6d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     id="rect1187"
+     width="15.100924"
+     height="280.44574"
+     x="294.41968"
+     y="422.29605" />
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="85.593231"
+     y="442.47458"
+     id="text1193"><tspan
+       sodipodi:role="line"
+       id="tspan1191"
+       x="85.593231"
+       y="442.47458">Page</tspan></text>
+  <path
+     sodipodi:type="star"
+     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     id="path1199"
+     sodipodi:sides="6"
+     sodipodi:cx="181.13559"
+     sodipodi:cy="544.00531"
+     sodipodi:r1="26.350622"
+     sodipodi:r2="13.175311"
+     sodipodi:arg1="0.58235295"
+     sodipodi:arg2="1.1059517"
+     inkscape:flatsided="false"
+     inkscape:rounded="0"
+     inkscape:randomized="0"
+     d="m 203.14286,558.4979 -16.10099,-2.71529 -7.4536,14.52785 -5.69898,-15.30151 -16.30829,0.80892 10.40201,-12.58622 -8.85469,-13.71893 16.10099,2.7153 7.4536,-14.52786 5.69898,15.30151 16.30829,-0.80892 -10.40201,12.58622 z"
+     inkscape:transform-center-x="0.43452006"
+     inkscape:transform-center-y="-2.5530423" />
+  <path
+     inkscape:transform-center-y="-2.5530423"
+     inkscape:transform-center-x="0.43452006"
+     d="m 423.14289,558.4979 -19.35043,-1.58794 -17.14943,9.10262 1.58794,-19.35043 -9.10262,-17.14943 19.35043,1.58794 17.14943,-9.10262 -1.58794,19.35043 z"
+     inkscape:randomized="0"
+     inkscape:rounded="0"
+     inkscape:flatsided="false"
+     sodipodi:arg2="1.3677511"
+     sodipodi:arg1="0.58235295"
+     sodipodi:r2="13.175311"
+     sodipodi:r1="26.350622"
+     sodipodi:cy="544.00531"
+     sodipodi:cx="401.13562"
+     sodipodi:sides="4"
+     id="path1201"
+     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#008000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     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:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4, 4;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     id="path1203"
+     sodipodi:sides="5"
+     sodipodi:cx="601.13562"
+     sodipodi:cy="544.00531"
+     sodipodi:r1="26.350622"
+     sodipodi:r2="13.175311"
+     sodipodi:arg1="0.58235295"
+     sodipodi:arg2="1.2106715"
+     inkscape:flatsided="false"
+     inkscape:rounded="0"
+     inkscape:randomized="0"
+     d="m 623.14289,558.4979 -17.36441,-2.16244 -11.62551,13.07847 -3.3093,-17.18277 -16.03084,-7.01505 15.31915,-8.4571 1.71792,-17.414 12.77705,11.95599 17.09257,-3.74739 -7.4225,15.8463 z"
+     inkscape:transform-center-x="0.43452006"
+     inkscape:transform-center-y="-2.5530423" />
+  <text
+     id="text1207"
+     y="480.47458"
+     x="177.59323"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"><tspan
+       y="480.47458"
+       x="177.59323"
+       id="tspan1205"
+       sodipodi:role="line">final position in page</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="397.59326"
+     y="460.47458"
+     id="text1211"><tspan
+       sodipodi:role="line"
+       id="tspan1209"
+       x="397.59326"
+       y="460.47458">offset position</tspan><tspan
+       sodipodi:role="line"
+       x="397.59326"
+       y="485.47458"
+       id="tspan1251">for &quot;B&quot;</tspan></text>
+  <text
+     id="text1215"
+     y="460.47458"
+     x="597.59326"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"><tspan
+       y="460.47458"
+       x="597.59326"
+       id="tspan1213"
+       sodipodi:role="line">offset position</tspan><tspan
+       y="485.47458"
+       x="597.59326"
+       sodipodi:role="line"
+       id="tspan1249">for &quot;C&quot;</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:125%;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="744.59033"
+     y="440.47458"
+     id="text1219"><tspan
+       sodipodi:role="line"
+       id="tspan1217"
+       x="744.59033"
+       y="440.47458"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start">HMI:Switch@... (group)</tspan><tspan
+       sodipodi:role="line"
+       x="744.59033"
+       y="465.47458"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
+       id="tspan1225">  |-. &quot;A&quot; (group)</tspan><tspan
+       sodipodi:role="line"
+       x="744.59033"
+       y="490.47458"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
+       id="tspan1233">  | |- reference (rect)</tspan><tspan
+       sodipodi:role="line"
+       x="744.59033"
+       y="515.47461"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
+       id="tspan1295">  | |- ...</tspan><tspan
+       sodipodi:role="line"
+       x="744.59033"
+       y="540.47461"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
+       id="tspan1229">  |-. &quot;B&quot; (group)</tspan><tspan
+       sodipodi:role="line"
+       x="744.59033"
+       y="565.47461"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
+       id="tspan1235">  | |- frame (rect)</tspan><tspan
+       sodipodi:role="line"
+       x="744.59033"
+       y="590.47461"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
+       id="tspan1237">  | |- ...</tspan><tspan
+       sodipodi:role="line"
+       x="744.59033"
+       y="615.47461"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
+       id="tspan1239">  |-. &quot;C&quot; (group)</tspan><tspan
+       sodipodi:role="line"
+       x="744.59033"
+       y="640.47461"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
+       id="tspan1241">  | |- frame (rect)</tspan><tspan
+       sodipodi:role="line"
+       x="744.59033"
+       y="665.47461"
+       id="tspan1221"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start">  | |- ...</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:29.3258667px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="317.2059"
+     y="63.193573"
+     id="text1257"><tspan
+       sodipodi:role="line"
+       id="tspan1255"
+       x="317.2059"
+       y="63.193573"
+       style="text-align:start;text-anchor:start;stroke-width:1px">Some widgets like Switch or Button are displaying one of many </tspan><tspan
+       sodipodi:role="line"
+       x="317.2059"
+       y="99.850906"
+       id="tspan1259"
+       style="text-align:start;text-anchor:start;stroke-width:1px">groups that represent the possible states of the widget.</tspan><tspan
+       sodipodi:role="line"
+       x="317.2059"
+       y="136.50824"
+       id="tspan1261"
+       style="text-align:start;text-anchor:start;stroke-width:1px" /><tspan
+       sodipodi:role="line"
+       x="317.2059"
+       y="173.16557"
+       id="tspan1263"
+       style="text-align:start;text-anchor:start;stroke-width:1px">Since all groups need to appear in the same place, they overlap </tspan><tspan
+       sodipodi:role="line"
+       x="317.2059"
+       y="209.82291"
+       id="tspan1265"
+       style="text-align:start;text-anchor:start;stroke-width:1px">and the drawing becomes hard to understand and maintain.</tspan><tspan
+       sodipodi:role="line"
+       x="317.2059"
+       y="246.48024"
+       id="tspan1267"
+       style="text-align:start;text-anchor:start;stroke-width:1px" /><tspan
+       sodipodi:role="line"
+       x="317.2059"
+       y="283.13757"
+       id="tspan1269"
+       style="text-align:start;text-anchor:start;stroke-width:1px">Using specially labelled &quot;reference&quot; and &quot;frame&quot; rectangles, </tspan><tspan
+       sodipodi:role="line"
+       x="317.2059"
+       y="319.79492"
+       id="tspan1271"
+       style="text-align:start;text-anchor:start;stroke-width:1px">groups can be spread out.</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="177.59323"
+     y="600.47461"
+     id="text1275"><tspan
+       sodipodi:role="line"
+       id="tspan1273"
+       x="177.59323"
+       y="600.47461">reference</tspan></text>
+  <text
+     id="text1281"
+     y="600.47461"
+     x="397.59326"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"><tspan
+       id="tspan1279"
+       y="600.47461"
+       x="397.59326"
+       sodipodi:role="line">frame</tspan></text>
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="597.59326"
+     y="600.47461"
+     id="text1287"><tspan
+       id="tspan1285"
+       sodipodi:role="line"
+       x="597.59326"
+       y="600.47461">frame</tspan></text>
+  <g
+     id="g3108"
+     inkscape:label="HMI:Switch@selection">
+    <g
+       id="g1318"
+       inkscape:label="1">
+      <rect
+         inkscape:label="overlay_background"
+         y="760"
+         x="1320"
+         height="720"
+         width="1280"
+         id="rect1420-8"
+         style="color:#000000;opacity:0.28800001;fill:#000000;fill-opacity:1" />
+      <rect
+         y="890.84747"
+         x="1607.7966"
+         height="442.37289"
+         width="668.13562"
+         id="rect1468"
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+      <rect
+         inkscape:label="frame"
+         style="color:#000000;opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:3, 3;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect1312"
+         width="1280"
+         height="720"
+         x="1320"
+         y="760" />
+      <g
+         style="stroke-width:1.42987263"
+         transform="matrix(0.699363,0,0,0.699363,-327.0073,866.04792)"
+         inkscape:label="HMI:Input@selection"
+         id="g2585-1-6">
+        <g
+           transform="matrix(1.4170886,0,0,1.4170886,-1453.6968,-56.464826)"
+           style="stroke-width:1.00902128"
+           inkscape:label="=0"
+           id="g2763-2-8">
+          <rect
+             style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.81362391;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+             id="rect114-6-7-0"
+             width="161.32761"
+             height="84.580788"
+             x="3457.2671"
+             y="93.088097"
+             ry="21.548592"
+             rx="21.548594" />
+          <text
+             xml:space="preserve"
+             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.00902128px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+             x="3537.5791"
+             y="149.95857"
+             id="text118-3-0-2"><tspan
+               style="stroke-width:1.00902128px"
+               sodipodi:role="line"
+               id="tspan116-1-9-1"
+               x="3537.5791"
+               y="149.95857">Close</tspan></text>
+        </g>
+      </g>
+      <text
+         id="text1472"
+         y="1138.5114"
+         x="1943.3489"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           y="1138.5114"
+           x="1943.3489"
+           id="tspan1470"
+           sodipodi:role="line">A MODAL DIALOG</tspan></text>
+    </g>
+    <rect
+       inkscape:label="reference"
+       style="color:#000000;opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:3, 3;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect1314"
+       width="1280"
+       height="720"
+       x="1320"
+       y="0" />
+    <g
+       transform="translate(0,760)"
+       id="g1494"
+       inkscape:label="2">
+      <rect
+         style="color:#000000;opacity:0.28800001;fill:#000000;fill-opacity:1"
+         id="rect1474"
+         width="1280"
+         height="720"
+         x="1320"
+         y="760"
+         inkscape:label="overlay_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:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         id="rect1476"
+         width="668.13562"
+         height="442.37289"
+         x="1607.7966"
+         y="890.84747" />
+      <rect
+         y="760"
+         x="1320"
+         height="720"
+         width="1280"
+         id="rect1478"
+         style="color:#000000;opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:3, 3;stroke-dashoffset:0;stroke-opacity:1"
+         inkscape:label="frame" />
+      <g
+         id="g1488"
+         inkscape:label="HMI:Input@selection"
+         transform="matrix(0.699363,0,0,0.699363,-327.0073,866.04792)"
+         style="stroke-width:1.42987263">
+        <g
+           id="g1486"
+           inkscape:label="=0"
+           style="stroke-width:1.00902128"
+           transform="matrix(1.4170886,0,0,1.4170886,-1453.6968,-56.464826)">
+          <rect
+             rx="21.548594"
+             ry="21.548592"
+             y="93.088097"
+             x="3457.2671"
+             height="84.580788"
+             width="161.32761"
+             id="rect1480"
+             style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.81362391;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+          <text
+             id="text1484"
+             y="149.95857"
+             x="3537.5791"
+             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.00902128px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+             xml:space="preserve"><tspan
+               y="149.95857"
+               x="3537.5791"
+               id="tspan1482"
+               sodipodi:role="line"
+               style="stroke-width:1.00902128px">Close</tspan></text>
+        </g>
+      </g>
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="1943.3489"
+         y="1058.5115"
+         id="text1492"><tspan
+           sodipodi:role="line"
+           id="tspan1490"
+           x="1943.3489"
+           y="1058.5115">A MODAL DIALOG</tspan><tspan
+           id="tspan1504"
+           sodipodi:role="line"
+           x="1943.3489"
+           y="1108.5115">with widgets</tspan></text>
+      <g
+         style="stroke-width:1.42987263"
+         transform="matrix(0.699363,0,0,0.699363,-632.97869,1158.0327)"
+         inkscape:label="HMI:Input@.position"
+         id="g2585-1-4">
+        <g
+           style="stroke-width:1.42987263"
+           inkscape:label="=0"
+           id="g2763-2-7">
+          <rect
+             style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.40424299;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+             id="rect114-6-7-2"
+             width="96.681831"
+             height="84.580788"
+             x="3489.5898"
+             y="93.088097"
+             ry="30.536263"
+             rx="30.536263" />
+          <text
+             xml:space="preserve"
+             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.42987263px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+             x="3537.5791"
+             y="149.95857"
+             id="text118-3-0-4"><tspan
+               style="stroke-width:1.42987263px"
+               sodipodi:role="line"
+               id="tspan116-1-9-0"
+               x="3537.5791"
+               y="149.95857">0</tspan></text>
+        </g>
+        <g
+           style="stroke-width:1.42987263"
+           inkscape:label="=1"
+           id="g2758-3-6">
+          <rect
+             rx="30.536263"
+             ry="30.536263"
+             y="93.088097"
+             x="3589.5898"
+             height="84.580788"
+             width="96.681831"
+             id="rect2531-6-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:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.40424299;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+          <text
+             id="text2557-0-9"
+             y="149.95857"
+             x="3637.5791"
+             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.42987263px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+             xml:space="preserve"><tspan
+               style="stroke-width:1.42987263px"
+               y="149.95857"
+               x="3637.5791"
+               id="tspan2555-6-9"
+               sodipodi:role="line">1</tspan></text>
+        </g>
+        <g
+           style="stroke-width:1.42987263"
+           inkscape:label="=2"
+           id="g2753-2-0">
+          <rect
+             style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.40424299;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+             id="rect2533-6-8"
+             width="96.681831"
+             height="84.580788"
+             x="3689.5898"
+             y="93.088097"
+             ry="30.536263"
+             rx="30.536263" />
+          <text
+             xml:space="preserve"
+             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.42987263px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+             x="3737.5791"
+             y="149.95857"
+             id="text2561-1-1"><tspan
+               style="stroke-width:1.42987263px"
+               sodipodi:role="line"
+               id="tspan2559-8-3"
+               x="3737.5791"
+               y="149.95857">2</tspan></text>
+        </g>
+        <g
+           style="stroke-width:1.42987263"
+           inkscape:label="=3"
+           id="g2748-7-1">
+          <rect
+             rx="30.536263"
+             ry="30.536263"
+             y="93.088097"
+             x="3789.5898"
+             height="84.580788"
+             width="96.681831"
+             id="rect2535-9-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:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.40424299;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+          <text
+             id="text2565-2-0"
+             y="149.95857"
+             x="3837.5791"
+             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.42987263px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+             xml:space="preserve"><tspan
+               style="stroke-width:1.42987263px"
+               y="149.95857"
+               x="3837.5791"
+               id="tspan2563-0-3"
+               sodipodi:role="line">3</tspan></text>
+        </g>
+        <text
+           inkscape:label="value"
+           xml:space="preserve"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:85.33333588px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.42987263px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           x="3687.7056"
+           y="56.031158"
+           id="text2569-2-4"><tspan
+             style="stroke-width:1.42987263px"
+             sodipodi:role="line"
+             id="tspan2567-3-0"
+             x="3687.7056"
+             y="56.031158">0</tspan></text>
+        <text
+           id="text2820-7-3"
+           y="216.03116"
+           x="3687.7056"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.42987263px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           xml:space="preserve"><tspan
+             id="tspan3031"
+             style="stroke-width:1.42987263px"
+             y="216.03116"
+             x="3687.7056"
+             sodipodi:role="line">position</tspan></text>
+      </g>
+      <g
+         transform="translate(1898.746,605.58892)"
+         inkscape:label="HMI:ScrollBar@.range@.position@.size"
+         id="g1766">
+        <path
+           inkscape:label="pageup"
+           style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.42391574px;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 -234.01097,332.35504 21.18736,28.36866 h -42.37471 z"
+           id="path1266"
+           inkscape:connector-curvature="0"
+           sodipodi:nodetypes="cccc" />
+        <path
+           inkscape:label="pagedown"
+           sodipodi:nodetypes="cccc"
+           inkscape:connector-curvature="0"
+           id="path1268"
+           d="m -234.01097,686.72773 21.18736,-27.45222 h -42.37471 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:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.4007318px;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
+           inkscape:label="range"
+           ry="6.8822322"
+           rx="7.6034913"
+           y="371.91068"
+           x="-255.19838"
+           height="276.64423"
+           width="42.374725"
+           id="rect1264-3"
+           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" />
+        <rect
+           inkscape:label="cursor"
+           ry="7"
+           rx="7.6034913"
+           y="371.91068"
+           x="-255.19838"
+           height="82.841492"
+           width="42.374725"
+           id="rect1264"
+           style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffa32a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.11429262px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+      </g>
+    </g>
+  </g>
+  <g
+     transform="translate(-1677.9661,-25.084725)"
+     inkscape:label="HMI:VarInit:0@selection"
+     id="g1502">
+    <text
+       id="text1500"
+       y="-108.39357"
+       x="3726.6924"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.66666603px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         y="-108.39357"
+         x="3726.6924"
+         id="tspan1496"
+         sodipodi:role="line">declaration of user_level HMI local variable</tspan><tspan
+         id="tspan1498"
+         y="-85.060234"
+         x="3726.6924"
+         sodipodi:role="line">(not a PLC variable)</tspan></text>
+  </g>
+  <g
+     transform="translate(-875.45983,1776.017)"
+     inkscape:label="HMI:VarInit:4@.range"
+     id="g3041">
+    <text
+       id="text3039"
+       y="-108.39357"
+       x="3726.6924"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.66666603px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         id="tspan3037"
+         y="-108.39357"
+         x="3726.6924"
+         sodipodi:role="line">declaration of &quot;range&quot; HMI local variable</tspan></text>
+  </g>
+  <g
+     id="g3049"
+     inkscape:label="HMI:VarInit:1@.size"
+     transform="translate(-875.45983,1836.017)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.66666603px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="3726.6924"
+       y="-108.39357"
+       id="text3047"><tspan
+         sodipodi:role="line"
+         x="3726.6924"
+         y="-108.39357"
+         id="tspan3045">declaration of &quot;size&quot; HMI local variable</tspan></text>
+  </g>
+  <text
+     id="text3607"
+     y="73.559319"
+     x="3359.7461"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:40px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     xml:space="preserve"><tspan
+       y="73.559319"
+       x="3359.7461"
+       id="tspan3605"
+       sodipodi:role="line">Button widgets</tspan></text>
+  <g
+     transform="translate(-155.45983,36.017)"
+     inkscape:label="HMI:VarInit:true@.boolvar"
+     id="g195">
+    <text
+       id="text193"
+       y="-108.39357"
+       x="3726.6924"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.66666603px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       xml:space="preserve"><tspan
+         id="tspan191"
+         y="-108.39357"
+         x="3726.6924"
+         sodipodi:role="line">declaration of &quot;position&quot; HMI local variable</tspan></text>
+  </g>
+</svg>
--- a/svghmi/geometry.ysl2	Thu Sep 22 09:42:38 2022 +0200
+++ b/svghmi/geometry.ysl2	Wed Sep 28 09:19:07 2022 +0200
@@ -145,3 +145,16 @@
     result """$candidates[(@Id = $groups/@id and (func:intersect($g, .) = 9)) or 
                           (not(@Id = $groups/@id) and (func:intersect($g, .) > 0 ))]""";
 }
+
+def "func:offset" {
+    param "elt1";
+    param "elt2";
+    const "g1", "$geometry[@Id = $elt1/@id]";
+    const "g2", "$geometry[@Id = $elt2/@id]";
+    const "result" vector {
+        attrib "x" value "$g2/@x - $g1/@x";
+        attrib "y" value "$g2/@y - $g1/@y";
+    }
+    result "exsl:node-set($result)";
+}
+
--- a/svghmi/inline_svg.ysl2	Thu Sep 22 09:42:38 2022 +0200
+++ b/svghmi/inline_svg.ysl2	Wed Sep 28 09:19:07 2022 +0200
@@ -42,6 +42,23 @@
     attrib "{name()}" > «substring(., 2)»
 }
 
+// remove "reference" and "frame" rectangles
+svgtmpl "svg:rect[@inkscape:label='reference' or @inkscape:label='frame']", mode="inline_svg" {
+    // nothing
+}
+
+svgtmpl "svg:g[svg:rect/@inkscape:label='frame']", mode="inline_svg" {
+    const "reference_rect","(../svg:rect | ../svg:g/svg:rect)[@inkscape:label='reference']";
+    const "frame_rect","svg:rect[@inkscape:label='frame']";
+    const "offset","func:offset($frame_rect, $reference_rect)";
+
+    xsl:copy {
+        attrib "svghmi_x_offset" value "$offset/vector/@x";
+        attrib "svghmi_y_offset" value "$offset/vector/@y";
+        apply "@* | node()", mode="inline_svg";
+    }
+}
+
 ////// Clone unlinking
 //
 // svg:use (inkscape's clones) inside a widgets are
--- a/svghmi/svghmi.js	Thu Sep 22 09:42:38 2022 +0200
+++ b/svghmi/svghmi.js	Wed Sep 28 09:19:07 2022 +0200
@@ -532,8 +532,49 @@
     current_visible_page = page_name;
 };
 
+/* From https://jsfiddle.net/ibowankenobi/1mmh7rs6/6/ */
+function getAbsoluteCTM(element){
+	var height = svg_root.height.baseVal.value,
+		width = svg_root.width.baseVal.value,
+		viewBoxRect = svg_root.viewBox.baseVal,
+		vHeight = viewBoxRect.height,
+		vWidth = viewBoxRect.width;
+	if(!vWidth || !vHeight){
+		return element.getCTM();
+	}
+	var sH = height/vHeight,
+		sW = width/vWidth,
+		matrix = svg_root.createSVGMatrix();
+	matrix.a = sW;
+	matrix.d = sH
+	var realCTM = element.getCTM().multiply(matrix.inverse());
+	realCTM.e = realCTM.e/sW + viewBoxRect.x;
+	realCTM.f = realCTM.f/sH + viewBoxRect.y;
+	return realCTM;
+}
+
+function apply_reference_frames(){
+    const matches = svg_root.querySelectorAll("g[svghmi_x_offset]");
+    matches.forEach((group) => {
+        let [x,y] = ["x", "y"].map((axis) => Number(group.getAttribute("svghmi_"+axis+"_offset")));
+        let ctm = getAbsoluteCTM(group);
+        // zero translation part of CTM
+        // to only apply rotation/skewing to offset vector
+        ctm.e = 0;
+        ctm.f = 0;
+        let invctm = ctm.inverse();
+        let vect = new DOMPoint(x, y);
+        let newvect = vect.matrixTransform(invctm);
+        let transform = svg_root.createSVGTransform();
+        transform.setTranslate(newvect.x, newvect.y);
+        group.transform.baseVal.appendItem(transform);
+        ["x", "y"].forEach((axis) => group.removeAttribute("svghmi_"+axis+"_offset"));
+    });
+}
+
 // Once connection established
 ws.onopen = function (evt) {
+    apply_reference_frames();
     init_widgets();
     send_reset();
     // show main page