diff -r faaf677ea99d -r e50908ddec60 svghmi/widgets_common.ysl2
--- a/svghmi/widgets_common.ysl2	Fri May 08 16:47:52 2020 +0200
+++ b/svghmi/widgets_common.ysl2	Fri May 08 16:51:43 2020 +0200
@@ -24,8 +24,7 @@
 template "svg:*", mode="hmi_elements" {
     const "widget", "func:widget(@id)";
     const "eltid","@id";
-    |   "«@id»": {
-    |     type: "«$widget/@type»",
+    |   "«@id»": new «$widget/@type»Widget ({
     |     args: [
     foreach "$widget/arg"
     |         "«@value»"`if "position()!=last()" > ,`
@@ -46,7 +45,8 @@
     |     element: id("«@id»"),
     apply "$widget", mode="widget_defs" with "hmi_element",".";
     apply "$widget", mode="widget_subscribe" with "hmi_element",".";
-    |   }`if "position()!=last()" > ,`
+    |   })`if "position()!=last()" > ,`
+}
 
 def "func:unique_types" {
     param "elts_with_type";
@@ -69,17 +69,35 @@
     }
 }
 
+emit "preamble:widget-base-class" {
+    ||    
+    class Widget {
+        constructor(members){
+            Object.keys(members).forEach(prop => this[prop]=members[prop]);
+        }
+    }
+    ||
+}
+
 emit "preamble:hmi-classes" {
     const "used_widget_types", "func:unique_types($parsed_widgets/widget)";
     apply "$used_widget_types", mode="widget_class";
 }
 
+template "widget", mode="widget_class"
+||
+class «@type»Widget extends Widget{
+    /* empty class, as «@type» widget didn't provide any */
+}
+||
+
 emit "preamble:hmi-elements" {
     | var hmi_widgets = {
     apply "$hmi_elements", mode="hmi_elements";
     | }
 }
 
+
 // default : normal subscribing
 template "widget", mode="widget_subscribe" {
     |     sub: subscribe,