--- a/svghmi/detachable_pages.ysl2	Thu Apr 02 09:38:53 2020 +0200
+++ b/svghmi/detachable_pages.ysl2	Thu Apr 02 14:03:38 2020 +0200
@@ -7,6 +7,9 @@
 const "hmi_pages_descs", "$parsed_widgets/widget[@type = 'Page']";
 const "hmi_pages", "$hmi_elements[@id = $hmi_pages_descs/@id]";
 
+const "keypads_descs", "$parsed_widgets/widget[@type = 'Keypad']";
+const "keypads", "$hmi_elements[@id = $keypads_descs/@id]";
+
 const "default_page" choose {
     when "count($hmi_pages) > 1" {
         choose {
@@ -58,7 +61,7 @@
 
 const "required_elements",
     """//svg:defs/descendant-or-self::svg:*
-       | func:required_elements($hmi_pages)/ancestor-or-self::svg:*""";
+       | func:required_elements($hmi_pages | $keypads)/ancestor-or-self::svg:*""";
 
 const "discardable_elements", "//svg:*[not(@id = $required_elements/@id)]";
 
@@ -88,7 +91,7 @@
 }
 
 // Avoid nested detachables
-const "_detachable_elements", "func:detachable_elements($hmi_pages)";
+const "_detachable_elements", "func:detachable_elements($hmi_pages | $keypads)";
 const "detachable_elements", "$_detachable_elements[not(ancestor::*/@id = $_detachable_elements/@id)]";
 
 const "forEach_widgets_ids", "$parsed_widgets/widget[@type = 'ForEach']/@id";

--- a/svghmi/gen_index_xhtml.ysl2	Thu Apr 02 09:38:53 2020 +0200
+++ b/svghmi/gen_index_xhtml.ysl2	Thu Apr 02 14:03:38 2020 +0200
@@ -109,6 +109,16 @@
         apply "$hmi_pages", mode="page_desc";
         | }
 
+        | var keypads = {
+        foreach "$keypads_descs"{
+            const "keypad_id","@id";
+            foreach "arg"{
+        |     "«@value»":"«$keypad_id»",
+            }
+        }
+        | }
+
+
         |
         | var default_page = "«$default_page»";
         | var svg_root = id("«/svg:svg/@id»");

--- a/svghmi/hmi_tree.ysl2	Thu Apr 02 09:38:53 2020 +0200
+++ b/svghmi/hmi_tree.ysl2	Thu Apr 02 14:03:38 2020 +0200
@@ -93,8 +93,10 @@
                 attrib "value" > «.»
                 const "path", ".";
                 const "item", "$indexed_hmitree/*[@hmipath = $path]";
-                if "count($item) = 1"
+                if "count($item) = 1" {
                     attrib "index" > «$item/@index»
+                    attrib "type" > «local-name($item)»
+                }
             }
         }
     }

--- a/svghmi/svghmi.js	Thu Apr 02 09:38:53 2020 +0200
+++ b/svghmi/svghmi.js	Thu Apr 02 14:03:38 2020 +0200
@@ -239,6 +239,13 @@
     cache[index] = value;
 };
 
+function apply_hmi_value(index, new_val) {
+    let old_val = cache[index]
+    if(new_val != undefined && old_val != new_val)
+        send_hmi_value(index, new_val);
+    return new_val;
+}
+
 function change_hmi_value(index, opstr) {
     let op = opstr[0];
     let given_val = opstr.slice(1);
@@ -460,3 +467,13 @@
     alert("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+".");
 
 };
+
+var edit_callback;
+function edit_value(path, valuetype, callback, initial) {
+
+    keypad = keypads[valuetype];
+    console.log('XXX TODO : Edit value', path, valuetype, callback, initial, keypad);
+    edit_callback = callback;
+
+};
+

--- a/svghmi/widget_input.ysl2	Thu Apr 02 09:38:53 2020 +0200
+++ b/svghmi/widget_input.ysl2	Thu Apr 02 14:03:38 2020 +0200
@@ -9,9 +9,9 @@
     value "$value_elt";
     if "$have_value"
     |     frequency: 5,
-
+    |     last_val: undefined,
     |     dispatch: function(value) {
-
+    |         this.last_val = value;
     if "$have_value"
     |         this.value_elt.textContent = String(value);
 
@@ -19,9 +19,7 @@
     const "edit_elt_id","$hmi_element/*[@inkscape:label='edit'][1]/@id";
     |     init: function() {
     if "$edit_elt_id" {
-    |         id("«$edit_elt_id»").addEventListener(
-    |             "click", 
-    |             evt => alert('XXX TODO : Edit value'));
+    |         id("«$edit_elt_id»").setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_edit_click()");
     }
     foreach "$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]" {
     |         id("«@id»").setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_op_click('«func:escape_quotes(@inkscape:label)»')");
@@ -34,4 +32,15 @@
               /* TODO gray out value until refreshed */
         }
     |     },
+    |     on_edit_click: function(opstr) {
+    |         edit_value("«path/@value»", "«path/@type»", this.edit_callback, this.last_val);
+    |     },
+
+    |     edit_callback: function(new_val) {
+    |         apply_hmi_value(this.indexes[0], opstr);
+        if "$have_value"{
+    |         this.value_elt.textContent = String(new_val);
+              /* TODO gray out value until refreshed */
+        }
+    |     },
 }

--- a/svghmi/widget_keypad.ysl2	Thu Apr 02 09:38:53 2020 +0200
+++ b/svghmi/widget_keypad.ysl2	Thu Apr 02 14:03:38 2020 +0200
@@ -1,4 +1,6 @@
 // widget_keypad.ysl2
 
 template "widget[@type='Keypad']", mode="widget_defs" {
+    |     init: function() {
+    |     },
 }