--- a/svghmi/widget_keypad.ysl2	Fri Aug 28 11:27:07 2020 +0200
+++ b/svghmi/widget_keypad.ysl2	Fri Aug 28 11:31:18 2020 +0200
@@ -17,12 +17,19 @@
     ||
     class KeypadWidget extends Widget{
          moving = undefined;
-         enTimer = undefined;
+         click = undefined;
          offset = undefined;
 
          on_position_click(evt) {
              this.moving = true;
-             this.enTimer = true;
+
+             // chatch window events
+             window.addEventListener("touchmove", this.bound_on_drag, true);
+             window.addEventListener("mousemove", this.bound_on_drag, true);
+
+             window.addEventListener("mouseup", this.bound_on_release, true)
+             window.addEventListener("touchend", this.bound_on_release, true);
+             window.addEventListener("touchcancel", this.bound_on_release, true);
 
              // get click position offset from widget x,y and save it to variable
              var keypad_borders = this.position_elt.getBoundingClientRect();
@@ -39,40 +46,49 @@
              this.offset=[clickX-keypad_borders.left,clickY-keypad_borders.top]
          }
 
-         off_position_click(evt) {
+         on_release(evt) {
+            //relase binds
+            window.removeEventListener("touchmove", this.bound_on_drag, true);
+            window.removeEventListener("mousemove", this.bound_on_drag, true);
+
+            window.removeEventListener("mouseup", this.bound_on_release, true)
+            window.removeEventListener("touchend", this.bound_on_release, true);
+            window.removeEventListener("touchcancel", this.bound_on_release, true);
+
             if(this.moving)
                 this.moving = false;
          }
 
-         on_move(evt) {
-             if(this.moving && this.enTimer){
-                 //get keyboard pos in html
-                 let [eltid, tmpgrp] = current_modal;
-                 let [xcoord,ycoord] = this.coordinates;
-                 let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox;
-
-                 //get mouse coordinates
-                 var clickX = undefined;
-                 var clickY = undefined;
-                 if (evt.type == "touchmove"){
-                     clickX = Math.ceil(evt.touches[0].clientX);
-                     clickY = Math.ceil(evt.touches[0].clientY);
-                 }
-                 else{
-                     clickX = evt.pageX;
-                     clickY = evt.pageY;
-                 }
-
-                 //translate keyboard position
-                 let mouseX = ((clickX-this.offset[0])/window.innerWidth)*svgWidth;
-                 let mouseY = ((clickY-this.offset[1])/window.innerHeight)*svgHeight;
-                 tmpgrp.setAttribute("transform","translate("+String(xdest-xcoord+mouseX)+","+String(ydest-ycoord+mouseY)+")");
-
-                 //reset timer
-                 this.enTimer = false;
-                 setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
-             }
-
+         on_drag(evt) {
+             if(this.moving)
+                //get mouse coordinates
+                var clickX = undefined;
+                var clickY = undefined;
+                if (evt.type == "touchmove"){
+                    clickX = Math.ceil(evt.touches[0].clientX);
+                    clickY = Math.ceil(evt.touches[0].clientY);
+                }
+                else{
+                    clickX = evt.pageX;
+                    clickY = evt.pageY;
+                }
+                this.click = [clickX,clickY]
+
+                //requeset redraw
+                this.request_animate();
+         }
+
+         animate(){
+            //get keyboard pos in html
+            let [eltid, tmpgrp] = current_modal;
+            let [xcoord,ycoord] = this.coordinates;
+            let [clickX,clickY] = this.click;
+            let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox;
+
+            //translate keyboard position
+            let mouseX = ((clickX-this.offset[0])/window.innerWidth)*svgWidth;
+            let mouseY = ((clickY-this.offset[1])/window.innerHeight)*svgHeight;
+            tmpgrp.setAttribute("transform","translate("+String(xdest-xcoord+mouseX)+","+String(ydest-ycoord+mouseY)+")");
          }
 
          on_key_click(symbols) {
@@ -185,15 +201,11 @@
     |             this.«.»_elt.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_«.»_click()");
     }
     |         if(this.position_elt){
+    |            this.bound_on_release = this.on_release.bind(this);
+    |            this.bound_on_drag = this.on_drag.bind(this);
+    |
     |            this.position_elt.setAttribute("onmousedown", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)");
     |            this.position_elt.setAttribute("ontouchstart", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)");
-
-    |            window.addEventListener("mouseup", hmi_widgets[this.element_id].off_position_click.bind(this));
-    |            window.addEventListener("touchend", hmi_widgets[this.element_id].off_position_click.bind(this));
-    |            window.addEventListener("touchcancel", hmi_widgets[this.element_id].off_position_click.bind(this));
-
-    |            window.addEventListener("mousemove", hmi_widgets[this.element_id].on_move.bind(this));
-    |            window.addEventListener("touchmove", hmi_widgets[this.element_id].on_move.bind(this));
     |        }
     |     },
     |