15 |
15 |
16 template "widget[@type='Keypad']", mode="widget_class" |
16 template "widget[@type='Keypad']", mode="widget_class" |
17 || |
17 || |
18 class KeypadWidget extends Widget{ |
18 class KeypadWidget extends Widget{ |
19 moving = undefined; |
19 moving = undefined; |
20 enTimer = undefined; |
20 click = undefined; |
21 offset = undefined; |
21 offset = undefined; |
22 |
22 |
23 on_position_click(evt) { |
23 on_position_click(evt) { |
24 this.moving = true; |
24 this.moving = true; |
25 this.enTimer = true; |
25 |
|
26 // chatch window events |
|
27 window.addEventListener("touchmove", this.bound_on_drag, true); |
|
28 window.addEventListener("mousemove", this.bound_on_drag, true); |
|
29 |
|
30 window.addEventListener("mouseup", this.bound_on_release, true) |
|
31 window.addEventListener("touchend", this.bound_on_release, true); |
|
32 window.addEventListener("touchcancel", this.bound_on_release, true); |
26 |
33 |
27 // get click position offset from widget x,y and save it to variable |
34 // get click position offset from widget x,y and save it to variable |
28 var keypad_borders = this.position_elt.getBoundingClientRect(); |
35 var keypad_borders = this.position_elt.getBoundingClientRect(); |
29 var clickX = undefined; |
36 var clickX = undefined; |
30 var clickY = undefined; |
37 var clickY = undefined; |
37 clickY = evt.pageY; |
44 clickY = evt.pageY; |
38 } |
45 } |
39 this.offset=[clickX-keypad_borders.left,clickY-keypad_borders.top] |
46 this.offset=[clickX-keypad_borders.left,clickY-keypad_borders.top] |
40 } |
47 } |
41 |
48 |
42 off_position_click(evt) { |
49 on_release(evt) { |
|
50 //relase binds |
|
51 window.removeEventListener("touchmove", this.bound_on_drag, true); |
|
52 window.removeEventListener("mousemove", this.bound_on_drag, true); |
|
53 |
|
54 window.removeEventListener("mouseup", this.bound_on_release, true) |
|
55 window.removeEventListener("touchend", this.bound_on_release, true); |
|
56 window.removeEventListener("touchcancel", this.bound_on_release, true); |
|
57 |
43 if(this.moving) |
58 if(this.moving) |
44 this.moving = false; |
59 this.moving = false; |
45 } |
60 } |
46 |
61 |
47 on_move(evt) { |
62 on_drag(evt) { |
48 if(this.moving && this.enTimer){ |
63 if(this.moving) |
49 //get keyboard pos in html |
64 //get mouse coordinates |
50 let [eltid, tmpgrp] = current_modal; |
65 var clickX = undefined; |
51 let [xcoord,ycoord] = this.coordinates; |
66 var clickY = undefined; |
52 let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox; |
67 if (evt.type == "touchmove"){ |
53 |
68 clickX = Math.ceil(evt.touches[0].clientX); |
54 //get mouse coordinates |
69 clickY = Math.ceil(evt.touches[0].clientY); |
55 var clickX = undefined; |
70 } |
56 var clickY = undefined; |
71 else{ |
57 if (evt.type == "touchmove"){ |
72 clickX = evt.pageX; |
58 clickX = Math.ceil(evt.touches[0].clientX); |
73 clickY = evt.pageY; |
59 clickY = Math.ceil(evt.touches[0].clientY); |
74 } |
60 } |
75 this.click = [clickX,clickY] |
61 else{ |
76 |
62 clickX = evt.pageX; |
77 //requeset redraw |
63 clickY = evt.pageY; |
78 this.request_animate(); |
64 } |
79 } |
65 |
80 |
66 //translate keyboard position |
81 animate(){ |
67 let mouseX = ((clickX-this.offset[0])/window.innerWidth)*svgWidth; |
82 //get keyboard pos in html |
68 let mouseY = ((clickY-this.offset[1])/window.innerHeight)*svgHeight; |
83 let [eltid, tmpgrp] = current_modal; |
69 tmpgrp.setAttribute("transform","translate("+String(xdest-xcoord+mouseX)+","+String(ydest-ycoord+mouseY)+")"); |
84 let [xcoord,ycoord] = this.coordinates; |
70 |
85 let [clickX,clickY] = this.click; |
71 //reset timer |
86 let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox; |
72 this.enTimer = false; |
87 |
73 setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); |
88 //translate keyboard position |
74 } |
89 let mouseX = ((clickX-this.offset[0])/window.innerWidth)*svgWidth; |
75 |
90 let mouseY = ((clickY-this.offset[1])/window.innerHeight)*svgHeight; |
|
91 tmpgrp.setAttribute("transform","translate("+String(xdest-xcoord+mouseX)+","+String(ydest-ycoord+mouseY)+")"); |
76 } |
92 } |
77 |
93 |
78 on_key_click(symbols) { |
94 on_key_click(symbols) { |
79 var syms = symbols.split(" "); |
95 var syms = symbols.split(" "); |
80 this.shift |= this.caps; |
96 this.shift |= this.caps; |
174 foreach "str:split('Esc Enter BackSpace Sign Space NumDot CapsLock Shift')" { |
190 foreach "str:split('Esc Enter BackSpace Sign Space NumDot CapsLock Shift')" { |
175 | if(this.«.»_elt) |
191 | if(this.«.»_elt) |
176 | this.«.»_elt.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_«.»_click()"); |
192 | this.«.»_elt.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_«.»_click()"); |
177 } |
193 } |
178 | if(this.position_elt){ |
194 | if(this.position_elt){ |
|
195 | this.bound_on_release = this.on_release.bind(this); |
|
196 | this.bound_on_drag = this.on_drag.bind(this); |
|
197 | |
179 | this.position_elt.setAttribute("onmousedown", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)"); |
198 | this.position_elt.setAttribute("onmousedown", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)"); |
180 | this.position_elt.setAttribute("ontouchstart", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)"); |
199 | this.position_elt.setAttribute("ontouchstart", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)"); |
181 |
|
182 | window.addEventListener("mouseup", hmi_widgets[this.element_id].off_position_click.bind(this)); |
|
183 | window.addEventListener("touchend", hmi_widgets[this.element_id].off_position_click.bind(this)); |
|
184 | window.addEventListener("touchcancel", hmi_widgets[this.element_id].off_position_click.bind(this)); |
|
185 |
|
186 | window.addEventListener("mousemove", hmi_widgets[this.element_id].on_move.bind(this)); |
|
187 | window.addEventListener("touchmove", hmi_widgets[this.element_id].on_move.bind(this)); |
|
188 | } |
200 | } |
189 | }, |
201 | }, |
190 | |
202 | |
191 const "g", "$geometry[@Id = $hmi_element/@id]"; |
203 const "g", "$geometry[@Id = $hmi_element/@id]"; |
192 | coordinates: [«$g/@x», «$g/@y»], |
204 | coordinates: [«$g/@x», «$g/@y»], |