--- a/svghmi/widget_tooglebutton.ysl2	Wed Aug 12 13:36:18 2020 +0200
+++ b/svghmi/widget_tooglebutton.ysl2	Wed Aug 12 15:24:02 2020 +0200
@@ -1,30 +1,42 @@
 // widget_tooglebutton.ysl2
 
+
+template "widget[@type='ToggleButton']", mode="widget_class"{
+    ||
+    class ToggleButtonWidget extends Widget{
+        frequency = 5;
+        state = 0;
+        active_style = undefined;
+        inactive_style = undefined;
+
+        dispatch(value) {
+            this.state = value;
+            if (this.state) {
+                this.active_elt.setAttribute("style", this.active_style);
+                this.inactive_elt.setAttribute("style", "display:none");
+                this.state = 0;
+            } else {
+                this.inactive_elt.setAttribute("style", this.inactive_style);
+                this.active_elt.setAttribute("style", "display:none");
+                this.state = 1;
+            }
+        }
+
+        on_click(evt) {
+            this.apply_hmi_value(0, this.state);
+        }
+
+        init() {
+            this.active_style = this.active_elt.style.cssText;
+            this.inactive_style = this.inactive_elt.style.cssText;
+            this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
+        }
+    }
+    ||
+}
+
 template "widget[@type='ToggleButton']", mode="widget_defs" {
     param "hmi_element";
     labels("active inactive");
-    |     frequency: 5,
-    |     state: 0,
-    |     dispatch: function(value) {
-    |         this.state = value;
-    |         if (this.state) {
-    |             this.active_elt.setAttribute("style", this.active_style);
-    |             this.inactive_elt.setAttribute("style", "display:none");
-    |             this.state = 0;
-    |         } else {
-    |             this.inactive_elt.setAttribute("style", this.inactive_style);
-    |             this.active_elt.setAttribute("style", "display:none");
-    |             this.state = 1;
-    |         }
-    |     },
-    |     on_click: function(evt) {
-    |         this.apply_hmi_value(0, this.state);
-    |     },
-    |     active_style: undefined,
-    |     inactive_style: undefined,
-    |     init: function() {
-    |         this.active_style = this.active_elt.style.cssText;
-    |         this.inactive_style = this.inactive_elt.style.cssText;
-    |         this.element.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_click(evt)");
-    |     },
+    |,
 }