--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_multistate.ysl2	Thu Sep 02 21:36:29 2021 +0200
@@ -0,0 +1,80 @@
+// widget_multistate.ysl2
+
+widget_defs("MultiState") {
+
+    longdesc
+    ||
+    Mutlistateh widget hides all subelements whose label do not match given
+    variable value representation. For exemple if given variable type
+    is HMI_INT and value is 1, then elements with label '1' will be displayed.
+    Label can have comments, so '1#some comment' would also match. If matching
+    variable of type HMI_STRING, then double quotes must be used. For exemple,
+    '"hello"' or '"hello"#another comment' match HMI_STRING 'hello'.
+
+    Click on widget changes variable value to next value in given list, or to
+    first one if not initialized to value already part of the list.
+    ||
+
+    shortdesc > Show elements whose label match value.
+
+    // TODO: add optional format/precision argument to support floating points
+
+    path name="value" accepts="HMI_INT,HMI_STRING" > value to compare to labels
+    
+}
+
+widget_class("MultiState")
+    ||
+        frequency = 5;
+        state = 0;
+        dispatch(value) {
+            this.state = value;
+            for(let choice of this.choices){
+                if(this.state != choice.value){
+                    choice.elt.setAttribute("style", "display:none");
+                } else {
+                    choice.elt.setAttribute("style", choice.style);
+                }
+            }
+        }
+
+        on_click(evt) {
+            //get current selected value
+            let next_ind;
+            for(next_ind=0; next_ind<this.choices.length; next_ind++){
+                if(this.state == this.choices[next_ind].value){
+                   next_ind = next_ind + 1;
+                   break;
+                }
+            }
+
+            //get next selected value
+            if(this.choices.length > next_ind){
+                this.state = this.choices[next_ind].value;
+            }
+            else{
+                this.state = this.choices[0].value;
+            }
+
+            //post value to plc
+            this.apply_hmi_value(0, this.state);
+        }
+
+        init() {
+            this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
+        }
+    ||
+
+widget_defs("MultiState") {
+    |     choices: [
+    const "regex",!"'^(\"[^\"].*\"|\-?[0-9]+|false|true)(#.*)?$'"!;
+    foreach "$result_svg_ns//*[@id = $hmi_element/@id]//*[regexp:test(@inkscape:label,$regex)]" {
+        const "literal", "regexp:match(@inkscape:label,$regex)[2]";
+    |         {
+    |             elt:id("«@id»"),
+    |             style:"«@style»",
+    |             value:«$literal»
+    |         }`if "position()!=last()" > ,`
+    }
+    |     ],
+}