--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_tooglebutton.ysl2	Thu Sep 02 21:36:29 2021 +0200
@@ -0,0 +1,62 @@
+// widget_tooglebutton.ysl2
+
+
+widget_desc("ToggleButton") {
+    longdesc
+    ||
+    Button widget takes one boolean variable path, and reflect current true
+    or false value by showing "active" or "inactive" labeled element
+    respectively. Clicking or touching button toggles variable.
+    ||
+
+    shortdesc > Toggle button reflecting given boolean variable
+
+    path name="value" accepts="HMI_BOOL" > Boolean variable
+    
+}
+
+widget_class("ToggleButton") {
+    ||
+        frequency = 5;
+        state = 0;
+        active_style = undefined;
+        inactive_style = undefined;
+
+        dispatch(value) {
+            this.state = value;
+            //redraw toggle button
+            this.request_animate();
+        }
+
+        on_click(evt) {
+            //toggle state and apply
+            this.state = this.state ? false : true;
+            this.apply_hmi_value(0, this.state);
+
+            //redraw toggle button
+            this.request_animate();
+        }
+
+        activate(val) {
+            let [active, inactive] = val ? ["none",""] : ["", "none"];
+            if (this.active_elt)
+                this.active_elt.style.display = active;
+            if (this.inactive_elt)
+                this.inactive_elt.style.display = inactive;
+        }
+
+        animate(){
+            // redraw toggle button on screen refresh
+            this.activate(this.state);
+        }
+
+        init() {
+            this.activate(false);
+            this.element.onclick = (evt) => this.on_click(evt);
+        }
+    ||
+}
+
+widget_defs("ToggleButton") {
+    optional_labels("active inactive");
+}