Mercurial Mercurial > beremiz / changeset
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | raw | bz2 | zip | gz | help
SVGHMI: Switch widget now use class declaration svghmi
authorEdouard Tisserant <edouard.tisserant@gmail.com>
Wed, 13 May 2020 22:22:13 +0200
branchsvghmi
changeset 2962 02ea529fd08c
parent 2961 00825316ed00
child 2963 113e2f2e324d
SVGHMI: Switch widget now use class declaration
svghmi/gen_index_xhtml.xslt file | annotate | diff | comparison | revisions
svghmi/widget_switch.ysl2 file | annotate | diff | comparison | revisions
tests/svghmi/svghmi_0@svghmi/svghmi.svg file | annotate | diff | comparison | revisions 
--- a/svghmi/gen_index_xhtml.xslt	Wed May 13 18:50:07 2020 +0200
+++ b/svghmi/gen_index_xhtml.xslt	Wed May 13 22:22:13 2020 +0200
@@ -866,6 +866,10 @@
 </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>    constructor(elt_id,args,indexes,members){
 </xsl:text>
     <xsl:text>        this.element_id = elt_id;
@@ -876,8 +880,6 @@
 </xsl:text>
     <xsl:text>        this.indexes = indexes;
 </xsl:text>
-    <xsl:text>        this.offset = 0;
-</xsl:text>
     <xsl:text>        Object.keys(members).forEach(prop =&gt; this[prop]=members[prop]);
 </xsl:text>
     <xsl:text>    }
@@ -1115,6 +1117,10 @@
 </xsl:text>
     <xsl:text>    init() {
 </xsl:text>
+    <xsl:text>        // TODO : use attributes to allow interaction through svg:use
+</xsl:text>
+    <xsl:text>        // TODO : deal with dragging
+</xsl:text>
     <xsl:text>        this.element.addEventListener(
 </xsl:text>
     <xsl:text>          "mousedown",
@@ -2592,34 +2598,34 @@
     <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>    frequency: 5,
-</xsl:text>
-    <xsl:text>    dispatch: function(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>    init: function() {
-</xsl:text>
-    <xsl:text>        // Hello Switch
-</xsl:text>
-    <xsl:text>    },
-</xsl:text>
     <xsl:text>    choices: [
 </xsl:text>
     <xsl:variable name="regex" select="'^(&quot;[^&quot;].*&quot;|\-?[0-9]+|false|true)(#.*)?$'"/>
--- a/svghmi/widget_switch.ysl2	Wed May 13 18:50:07 2020 +0200
+++ b/svghmi/widget_switch.ysl2	Wed May 13 22:22:13 2020 +0200
@@ -1,20 +1,23 @@
 // 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";
-    |     frequency: 5,
-    |     dispatch: function(value) {
-    |         for(let choice of this.choices){
-    |             if(value != choice.value){
-    |                 choice.elt.setAttribute("style", "display:none");
-    |             } else {
-    |                 choice.elt.setAttribute("style", choice.style);
-    |             }
-    |         }
-    |     },
-    |     init: function() {
-    |         // Hello Switch
-    |     },
     |     choices: [
     const "regex",!"'^(\"[^\"].*\"|\-?[0-9]+|false|true)(#.*)?$'"!;
     foreach "$hmi_element/*[regexp:test(@inkscape:label,$regex)]" {
--- a/tests/svghmi/svghmi_0@svghmi/svghmi.svg	Wed May 13 18:50:07 2020 +0200
+++ b/tests/svghmi/svghmi_0@svghmi/svghmi.svg	Wed May 13 22:22:13 2020 +0200
@@ -31,6 +31,20 @@
   </metadata>
   <defs
      id="defs2">
+    <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"
@@ -127,9 +141,9 @@
      inkscape:current-layer="hmi0"
      showgrid="false"
      units="px"
-     inkscape:zoom="0.70710678"
-     inkscape:cx="263.37056"
-     inkscape:cy="-24.461312"
+     inkscape:zoom="0.5"
+     inkscape:cx="523.16321"
+     inkscape:cy="-1.5475559"
      inkscape:window-width="1920"
      inkscape:window-height="1348"
      inkscape:window-x="3815"
@@ -2536,4 +2550,110 @@
            sodipodi:role="line">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>
 </svg>
beremiz