14 } |
14 } |
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; |
|
20 click = undefined; |
|
21 offset = undefined; |
|
22 |
|
23 on_position_click(evt) { |
|
24 this.moving = 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); |
|
33 |
|
34 // get click position offset from widget x,y and save it to variable |
|
35 var keypad_borders = this.position_elt.getBoundingClientRect(); |
|
36 var clickX = undefined; |
|
37 var clickY = undefined; |
|
38 if (evt.type == "touchstart"){ |
|
39 clickX = Math.ceil(evt.touches[0].clientX); |
|
40 clickY = Math.ceil(evt.touches[0].clientY); |
|
41 } |
|
42 else{ |
|
43 clickX = evt.pageX; |
|
44 clickY = evt.pageY; |
|
45 } |
|
46 this.offset=[clickX-keypad_borders.left,clickY-keypad_borders.top] |
|
47 } |
|
48 |
|
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 |
|
58 if(this.moving) |
|
59 this.moving = false; |
|
60 } |
|
61 |
|
62 on_drag(evt) { |
|
63 if(this.moving) |
|
64 //get mouse coordinates |
|
65 var clickX = undefined; |
|
66 var clickY = undefined; |
|
67 if (evt.type == "touchmove"){ |
|
68 clickX = Math.ceil(evt.touches[0].clientX); |
|
69 clickY = Math.ceil(evt.touches[0].clientY); |
|
70 } |
|
71 else{ |
|
72 clickX = evt.pageX; |
|
73 clickY = evt.pageY; |
|
74 } |
|
75 this.click = [clickX,clickY] |
|
76 |
|
77 //requeset redraw |
|
78 this.request_animate(); |
|
79 } |
|
80 |
|
81 animate(){ |
|
82 //get keyboard pos in html |
|
83 let [eltid, tmpgrp] = current_modal; |
|
84 let [xcoord,ycoord] = this.coordinates; |
|
85 let [clickX,clickY] = this.click; |
|
86 let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox; |
|
87 |
|
88 //translate keyboard position |
|
89 let mouseX = ((clickX-this.offset[0])/window.innerWidth)*svgWidth; |
|
90 let mouseY = ((clickY-this.offset[1])/window.innerHeight)*svgHeight; |
|
91 tmpgrp.setAttribute("transform","translate("+String(xdest-xcoord+mouseX)+","+String(ydest-ycoord+mouseY)+")"); |
|
92 } |
|
93 |
19 |
94 on_key_click(symbols) { |
20 on_key_click(symbols) { |
95 var syms = symbols.split(" "); |
21 var syms = symbols.split(" "); |
96 this.shift |= this.caps; |
22 this.shift |= this.caps; |
97 this.editstr += syms[this.shift?syms.length-1:0]; |
23 this.editstr += syms[this.shift?syms.length-1:0]; |
188 || |
114 || |
189 |
115 |
190 template "widget[@type='Keypad']", mode="widget_defs" { |
116 template "widget[@type='Keypad']", mode="widget_defs" { |
191 param "hmi_element"; |
117 param "hmi_element"; |
192 labels("Esc Enter BackSpace Keys Info Value"); |
118 labels("Esc Enter BackSpace Keys Info Value"); |
193 optional_labels("Sign Space NumDot position"); |
119 optional_labels("Sign Space NumDot"); |
194 activable_labels("CapsLock Shift"); |
120 activable_labels("CapsLock Shift"); |
195 | init: function() { |
121 | init: function() { |
196 foreach "$hmi_element/*[@inkscape:label = 'Keys']/*" { |
122 foreach "$hmi_element/*[@inkscape:label = 'Keys']/*" { |
197 | id("«@id»").setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_key_click('«func:escape_quotes(@inkscape:label)»')"); |
123 | id("«@id»").setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_key_click('«func:escape_quotes(@inkscape:label)»')"); |
198 } |
124 } |
199 foreach "str:split('Esc Enter BackSpace Sign Space NumDot CapsLock Shift')" { |
125 foreach "str:split('Esc Enter BackSpace Sign Space NumDot CapsLock Shift')" { |
200 | if(this.«.»_elt) |
126 | if(this.«.»_elt) |
201 | this.«.»_elt.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_«.»_click()"); |
127 | this.«.»_elt.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_«.»_click()"); |
202 } |
128 } |
203 | if(this.position_elt){ |
|
204 | this.bound_on_release = this.on_release.bind(this); |
|
205 | this.bound_on_drag = this.on_drag.bind(this); |
|
206 | |
|
207 | this.position_elt.setAttribute("onmousedown", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)"); |
|
208 | this.position_elt.setAttribute("ontouchstart", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)"); |
|
209 | } |
|
210 | }, |
129 | }, |
211 | |
130 | |
212 const "g", "$geometry[@Id = $hmi_element/@id]"; |
131 const "g", "$geometry[@Id = $hmi_element/@id]"; |
213 | coordinates: [«$g/@x», «$g/@y»], |
132 | coordinates: [«$g/@x», «$g/@y»], |
214 } |
133 } |