--- a/svghmi/gen_index_xhtml.xslt	Fri Dec 18 11:50:28 2020 +0100
+++ b/svghmi/gen_index_xhtml.xslt	Fri Dec 18 15:52:58 2020 +0100
@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
-<xsl:stylesheet xmlns:ns="beremiz" xmlns:definitions="definitions" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:func="http://exslt.org/functions" xmlns:epilogue="epilogue" xmlns:preamble="preamble" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:svg="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:str="http://exslt.org/strings" xmlns:regexp="http://exslt.org/regular-expressions" xmlns:exsl="http://exslt.org/common" xmlns:declarations="declarations" xmlns:debug="debug" exclude-result-prefixes="ns func exsl regexp str dyn debug preamble epilogue declarations definitions" extension-element-prefixes="ns func exsl regexp str dyn" version="1.0">
-  <xsl:output method="xml" cdata-section-elements="xhtml:script"/>
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:exsl="http://exslt.org/common" xmlns:regexp="http://exslt.org/regular-expressions" xmlns:str="http://exslt.org/strings" xmlns:func="http://exslt.org/functions" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:debug="debug" xmlns:preamble="preamble" xmlns:declarations="declarations" xmlns:definitions="definitions" xmlns:epilogue="epilogue" xmlns:ns="beremiz" version="1.0" extension-element-prefixes="ns func exsl regexp str dyn" exclude-result-prefixes="ns func exsl regexp str dyn debug preamble epilogue declarations definitions">
+  <xsl:output cdata-section-elements="xhtml:script" method="xml"/>
   <xsl:variable name="svg" select="/svg:svg"/>
   <xsl:variable name="hmi_elements" select="//svg:*[starts-with(@inkscape:label, 'HMI:')]"/>
   <xsl:variable name="hmitree" select="ns:GetHMITree()"/>
@@ -3416,7 +3416,9 @@
 </xsl:text>
     <xsl:text>                // reduce accounted menu size because of back button
 </xsl:text>
-    <xsl:text>                if(this.menu_offset != 0) spanslength--;
+    <xsl:text>                // in current view
+</xsl:text>
+    <xsl:text>                if(this.menu_offset &gt; 0) spanslength--;
 </xsl:text>
     <xsl:text>                this.menu_offset = Math.min(
 </xsl:text>
@@ -3426,6 +3428,10 @@
 </xsl:text>
     <xsl:text>            }else{
 </xsl:text>
+    <xsl:text>                // reduce accounted menu size because of back button
+</xsl:text>
+    <xsl:text>                // in view once scrolled
+</xsl:text>
     <xsl:text>                if(this.menu_offset - spanslength &gt; 0) spanslength--;
 </xsl:text>
     <xsl:text>                this.menu_offset = Math.max(
@@ -3984,15 +3990,36 @@
     <xsl:text>}
 </xsl:text>
   </xsl:template>
+  <xsl:template mode="widget_class" match="widget[@type='Input']">
+    <xsl:text>    class InputWidget extends Widget{
+</xsl:text>
+    <xsl:text>         on_op_click(opstr) {
+</xsl:text>
+    <xsl:text>             let new_val = this.change_hmi_value(0, opstr);
+</xsl:text>
+    <xsl:text>         }
+</xsl:text>
+    <xsl:text>         edit_callback(new_val) {
+</xsl:text>
+    <xsl:text>             this.apply_hmi_value(0, new_val);
+</xsl:text>
+    <xsl:text>         }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+  </xsl:template>
   <xsl:template mode="widget_defs" match="widget[@type='Input']">
     <xsl:param name="hmi_element"/>
-    <xsl:call-template name="defs_by_labels">
-      <xsl:with-param name="hmi_element" select="$hmi_element"/>
-      <xsl:with-param name="labels">
-        <xsl:text>key_pos</xsl:text>
-      </xsl:with-param>
-      <xsl:with-param name="mandatory" select="'no'"/>
-    </xsl:call-template>
+    <xsl:variable name="key_pos_elt">
+      <xsl:call-template name="defs_by_labels">
+        <xsl:with-param name="hmi_element" select="$hmi_element"/>
+        <xsl:with-param name="labels">
+          <xsl:text>key_pos</xsl:text>
+        </xsl:with-param>
+        <xsl:with-param name="mandatory" select="'no'"/>
+      </xsl:call-template>
+    </xsl:variable>
+    <xsl:value-of select="$key_pos_elt"/>
     <xsl:variable name="value_elt">
       <xsl:call-template name="defs_by_labels">
         <xsl:with-param name="hmi_element" select="$hmi_element"/>
@@ -4004,69 +4031,69 @@
     </xsl:variable>
     <xsl:variable name="have_value" select="string-length($value_elt)&gt;0"/>
     <xsl:value-of select="$value_elt"/>
+    <xsl:variable name="edit_elt">
+      <xsl:call-template name="defs_by_labels">
+        <xsl:with-param name="hmi_element" select="$hmi_element"/>
+        <xsl:with-param name="labels">
+          <xsl:text>edit</xsl:text>
+        </xsl:with-param>
+        <xsl:with-param name="mandatory" select="'no'"/>
+      </xsl:call-template>
+    </xsl:variable>
+    <xsl:variable name="have_edit" select="string-length($edit_elt)&gt;0"/>
+    <xsl:value-of select="$edit_elt"/>
     <xsl:if test="$have_value">
       <xsl:text>    frequency: 5,
 </xsl:text>
     </xsl:if>
-    <xsl:text>    last_val: undefined,
-</xsl:text>
     <xsl:text>    dispatch: function(value) {
 </xsl:text>
-    <xsl:text>        this.last_val = value;
-</xsl:text>
+    <xsl:if test="$have_edit">
+      <xsl:text>        this.last_val = value;
+</xsl:text>
+    </xsl:if>
     <xsl:if test="$have_value">
       <xsl:text>        this.value_elt.textContent = String(value);
 </xsl:text>
     </xsl:if>
     <xsl:text>    },
 </xsl:text>
-    <xsl:variable name="edit_elt_id" select="$hmi_element/*[@inkscape:label='edit'][1]/@id"/>
     <xsl:text>    init: function() {
 </xsl:text>
-    <xsl:if test="$edit_elt_id">
-      <xsl:text>        id("</xsl:text>
-      <xsl:value-of select="$edit_elt_id"/>
-      <xsl:text>").setAttribute("onclick", "hmi_widgets['</xsl:text>
-      <xsl:value-of select="$hmi_element/@id"/>
-      <xsl:text>'].on_edit_click()");
+    <xsl:if test="$have_edit">
+      <xsl:text>        this.edit_elt.onclick = () =&gt; edit_value(
+</xsl:text>
+      <xsl:text>            "</xsl:text>
+      <xsl:value-of select="path/@value"/>
+      <xsl:text>", "</xsl:text>
+      <xsl:value-of select="path/@type"/>
+      <xsl:text>",
+</xsl:text>
+      <xsl:text>            this, this.last_val, 
+</xsl:text>
+      <xsl:choose>
+        <xsl:when test="string-length($key_pos_elt)&gt;0">
+          <xsl:text>            this.key_pos_elt.getBBox()
+</xsl:text>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:text>            undefined
+</xsl:text>
+        </xsl:otherwise>
+      </xsl:choose>
+      <xsl:text>        );
 </xsl:text>
     </xsl:if>
     <xsl:for-each select="$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]">
       <xsl:text>        id("</xsl:text>
       <xsl:value-of select="@id"/>
-      <xsl:text>").setAttribute("onclick", "hmi_widgets['</xsl:text>
-      <xsl:value-of select="$hmi_element/@id"/>
-      <xsl:text>'].on_op_click('</xsl:text>
+      <xsl:text>").onclick = () =&gt; this.on_op_click("</xsl:text>
       <xsl:value-of select="func:escape_quotes(@inkscape:label)"/>
-      <xsl:text>')");
+      <xsl:text>");
 </xsl:text>
     </xsl:for-each>
     <xsl:text>    },
 </xsl:text>
-    <xsl:text>    on_op_click: function(opstr) {
-</xsl:text>
-    <xsl:text>        let new_val = this.change_hmi_value(0, opstr);
-</xsl:text>
-    <xsl:text>    },
-</xsl:text>
-    <xsl:text>    on_edit_click: function(opstr) {
-</xsl:text>
-    <xsl:text>        var size = (typeof this.key_pos_elt !== 'undefined') ?  this.key_pos_elt.getBBox() : undefined
-</xsl:text>
-    <xsl:text>        edit_value("</xsl:text>
-    <xsl:value-of select="path/@value"/>
-    <xsl:text>", "</xsl:text>
-    <xsl:value-of select="path/@type"/>
-    <xsl:text>", this, this.last_val, size);
-</xsl:text>
-    <xsl:text>    },
-</xsl:text>
-    <xsl:text>    edit_callback: function(new_val) {
-</xsl:text>
-    <xsl:text>        this.apply_hmi_value(0, new_val);
-</xsl:text>
-    <xsl:text>    },
-</xsl:text>
   </xsl:template>
   <xsl:template mode="widget_class" match="widget[@type='JsonTable']">
     <xsl:text>class JsonTableWidget extends Widget{
@@ -4099,8 +4126,6 @@
 </xsl:text>
     <xsl:text>    do_http_request(...opt) {
 </xsl:text>
-    <xsl:text>        console.log(opt);
-</xsl:text>
     <xsl:text>        const query = {
 </xsl:text>
     <xsl:text>            args: this.args,
@@ -6227,7 +6252,7 @@
     <xsl:comment>
       <xsl:apply-templates select="document('')/*/debug:*"/>
     </xsl:comment>
-    <html xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1999/xhtml">
+    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
       <head/>
       <body style="margin:0;overflow:hidden;user-select:none;touch-action:none;">
         <xsl:copy-of select="$result_svg"/>

--- a/svghmi/widget_input.ysl2	Fri Dec 18 11:50:28 2020 +0100
+++ b/svghmi/widget_input.ysl2	Fri Dec 18 15:52:58 2020 +0100
@@ -1,48 +1,63 @@
 // widget_input.ysl2
 
+template "widget[@type='Input']", mode="widget_class"{
+||
+    class InputWidget extends Widget{
+         on_op_click(opstr) {
+             let new_val = this.change_hmi_value(0, opstr);
+         }
+         edit_callback(new_val) {
+             this.apply_hmi_value(0, new_val);
+         }
+    }
+||
+}
+
 template "widget[@type='Input']", mode="widget_defs" {
     param "hmi_element";
-    optional_labels("key_pos");
-    const "value_elt" {
-        optional_labels("value");
-    }
+
+    const "key_pos_elt" optional_labels("key_pos");
+    value "$key_pos_elt";
+
+    const "value_elt" optional_labels("value");
     const "have_value","string-length($value_elt)>0";
     value "$value_elt";
+
+    const "edit_elt" optional_labels("edit");
+    const "have_edit","string-length($edit_elt)>0";
+    value "$edit_elt";
+
     if "$have_value"
     |     frequency: 5,
-    |     last_val: undefined,
+
     |     dispatch: function(value) {
+
+    if "$have_edit"
     |         this.last_val = value;
+
     if "$have_value"
     |         this.value_elt.textContent = String(value);
 
     |     },
-    const "edit_elt_id","$hmi_element/*[@inkscape:label='edit'][1]/@id";
+
     |     init: function() {
-    if "$edit_elt_id" {
-    |         id("«$edit_elt_id»").setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_edit_click()");
+
+    if "$have_edit" {
+    |         this.edit_elt.onclick = () => edit_value(
+    |             "«path/@value»", "«path/@type»",
+    |             this, this.last_val, 
+        choose {
+            when "string-length($key_pos_elt)>0"
+    |             this.key_pos_elt.getBBox()
+            otherwise
+    |             undefined
+        }
+    |         );
     }
+
     foreach "$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]" {
-    |         id("«@id»").setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_op_click('«func:escape_quotes(@inkscape:label)»')");
+    |         id("«@id»").onclick = () => this.on_op_click("«func:escape_quotes(@inkscape:label)»");
     }
-    |     },
-    |     on_op_click: function(opstr) {
-    |         let new_val = this.change_hmi_value(0, opstr);
-    //     if "$have_value"{
-    // |         this.value_elt.textContent = String(new_val);
-    //           /* TODO gray out value until refreshed */
-    //     }
-    |     },
-    |     on_edit_click: function(opstr) {
-    |         var size = (typeof this.key_pos_elt !== 'undefined') ?  this.key_pos_elt.getBBox() : undefined
-    |         edit_value("«path/@value»", "«path/@type»", this, this.last_val, size);
-    |     },
 
-    |     edit_callback: function(new_val) {
-    |         this.apply_hmi_value(0, new_val);
-    //     if "$have_value"{
-    // |         this.value_elt.textContent = String(new_val);
-    //           /* TODO gray out value until refreshed */
-    //     }
     |     },
 }