diff -r 407a0205405a -r 0a9f6f29b7dd svghmi/svghmi.js
--- a/svghmi/svghmi.js	Wed Aug 12 13:36:18 2020 +0200
+++ b/svghmi/svghmi.js	Wed Aug 12 15:24:02 2020 +0200
@@ -75,6 +75,10 @@
     if(jumps_need_update) update_jumps();
 
     apply_updates();
+
+    pending_widget_animates.forEach(widget => widget._animate());
+    pending_widget_animates = [];
+
     requestAnimationFrameID = null;
 }
 
@@ -409,26 +413,31 @@
 
 var xmlns = "http://www.w3.org/2000/svg";
 var edit_callback;
-function edit_value(path, valuetype, callback, initial) {
+function edit_value(path, valuetype, callback, initial, size) {
 
     let [keypadid, xcoord, ycoord] = keypads[valuetype];
     console.log('XXX TODO : Edit value', path, valuetype, callback, initial, keypadid);
     edit_callback = callback;
     let widget = hmi_widgets[keypadid];
-    widget.start_edit(path, valuetype, callback, initial);
+    widget.start_edit(path, valuetype, callback, initial, size);
 };
 
 var current_modal; /* TODO stack ?*/
 
-function show_modal() {
+function show_modal(size) {
     let [element, parent] = detachable_elements[this.element.id];
 
     tmpgrp = document.createElementNS(xmlns,"g");
     tmpgrpattr = document.createAttribute("transform");
-
     let [xcoord,ycoord] = this.coordinates;
     let [xdest,ydest] = page_desc[current_visible_page].bbox;
-    tmpgrpattr.value = "translate("+String(xdest-xcoord)+","+String(ydest-ycoord)+")";
+    if (typeof size === 'undefined'){
+        tmpgrpattr.value = "translate("+String(xdest-xcoord)+","+String(ydest-ycoord)+")";
+    }
+    else{
+        tmpgrpattr.value = "translate("+String(xdest-xcoord+size.x)+","+String(ydest-ycoord+size.y)+")";
+    }
+
     tmpgrp.setAttributeNode(tmpgrpattr);
 
     tmpgrp.appendChild(element);