6 frequency = 5; |
6 frequency = 5; |
7 range = undefined; |
7 range = undefined; |
8 fi = undefined; |
8 fi = undefined; |
9 drag = false; |
9 drag = false; |
10 enTimer = false; |
10 enTimer = false; |
11 svg_dist = 0 |
|
12 |
11 |
13 dispatch(value) { |
12 dispatch(value) { |
14 if(this.value_elt) |
13 if(this.value_elt) |
15 this.value_elt.textContent = String(value); |
14 this.value_elt.textContent = String(value); |
16 |
15 |
17 this.handle_position(value); |
16 this.update_DOM(value, this.handle_elt); |
|
17 |
18 } |
18 } |
19 |
19 |
20 handle_position(value){ |
20 last_drag = false; |
|
21 |
|
22 update_DOM(value, elt){ |
21 let [min,max,start,totallength] = this.range; |
23 let [min,max,start,totallength] = this.range; |
22 let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min))); |
24 let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min))); |
23 let tip = this.range_elt.getPointAtLength(length); |
25 let tip = this.range_elt.getPointAtLength(length); |
24 this.handle_elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")"); |
26 elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")"); |
|
27 |
|
28 if(this.setpoint_elt != undefined){ |
|
29 if(this.last_drag!= this.drag){ |
|
30 if(this.drag){ |
|
31 this.setpoint_elt.setAttribute("style", this.setpoint_style); |
|
32 }else{ |
|
33 this.setpoint_elt.setAttribute("style", "display:none"); |
|
34 } |
|
35 this.last_drag = this.drag; |
|
36 } |
|
37 } |
25 } |
38 } |
26 |
39 |
27 on_release(evt) { |
40 on_release(evt) { |
|
41 window.removeEventListener("touchmove", this.on_bound_drag, true); |
|
42 window.removeEventListener("mousemove", this.on_bound_drag, true); |
|
43 |
|
44 window.removeEventListener("mouseup", this.bound_on_release, true) |
|
45 window.removeEventListener("touchend", this.bound_on_release, true); |
|
46 window.removeEventListener("touchcancel", this.bound_on_release, true); |
28 if(this.drag){ |
47 if(this.drag){ |
29 this.drag = false; |
48 this.drag = false; |
|
49 } |
|
50 this.update_position(evt); |
|
51 } |
|
52 |
|
53 |
|
54 on_drag(evt){ |
|
55 if(this.enTimer && this.drag){ |
|
56 this.update_position(evt); |
|
57 //reset timer |
|
58 this.enTimer = false; |
|
59 setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); |
30 } |
60 } |
31 } |
61 } |
32 |
62 |
33 update_position(evt){ |
63 update_position(evt){ |
34 if(this.drag){ |
64 var html_dist = 0; |
35 var html_dist = 0; |
|
36 |
65 |
37 //calculate size of widget in html |
66 //calculate size of widget in html |
38 var range_borders = this.range_elt.getBoundingClientRect(); |
67 var range_borders = this.range_elt.getBoundingClientRect(); |
39 var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width ); |
68 var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width ); |
40 var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top]; |
69 var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top]; |
41 |
70 |
42 //get range and mouse coordinates |
71 //get range and mouse coordinates |
43 var mouseX = undefined; |
72 var mouseX = undefined; |
44 var mouseY = undefined; |
73 var mouseY = undefined; |
45 if (evt.type.startsWith("touch")){ |
74 if (evt.type.startsWith("touch")){ |
46 mouseX = Math.ceil(evt.touches[0].clientX); |
75 mouseX = Math.ceil(evt.touches[0].clientX); |
47 mouseY = Math.ceil(evt.touches[0].clientY); |
76 mouseY = Math.ceil(evt.touches[0].clientY); |
|
77 } |
|
78 else{ |
|
79 mouseX = evt.pageX; |
|
80 mouseY = evt.pageY; |
|
81 } |
|
82 |
|
83 //get handle distance from mouse position |
|
84 if (minX > mouseX && minY < mouseY){ |
|
85 html_dist = 0; |
|
86 } |
|
87 else if (maxX < mouseX && maxY > mouseY){ |
|
88 html_dist = range_length; |
|
89 } |
|
90 else{ |
|
91 // calculate distace |
|
92 if(this.fi > 0.7){ |
|
93 html_dist = (minY - mouseY)/Math.sin(this.fi); |
48 } |
94 } |
49 else{ |
95 else{ |
50 mouseX = evt.pageX; |
96 html_dist = (mouseX - minX)/Math.cos(this.fi); |
51 mouseY = evt.pageY; |
|
52 } |
97 } |
53 |
98 |
54 //get handle distance from mouse position |
99 //check if in range |
55 if (minX > mouseX && minY < mouseY){ |
100 if (html_dist > range_length){ |
|
101 html_dist = range_length; |
|
102 } |
|
103 else if (html_dist < 0){ |
56 html_dist = 0; |
104 html_dist = 0; |
57 } |
105 } |
58 else if (maxX < mouseX && maxY > mouseY){ |
|
59 html_dist = range_length; |
|
60 } |
|
61 else{ |
|
62 // calculate distace |
|
63 if(this.fi > 0.7){ |
|
64 html_dist = (minY - mouseY)/Math.sin(this.fi); |
|
65 } |
|
66 else{ |
|
67 html_dist = (mouseX - minX)/Math.cos(this.fi); |
|
68 } |
|
69 |
106 |
70 //check if in range |
107 } |
71 if (html_dist > range_length){ |
|
72 html_dist = range_length; |
|
73 } |
|
74 else if (html_dist < 0){ |
|
75 html_dist = 0; |
|
76 } |
|
77 } |
|
78 |
108 |
79 this.svg_dist=(html_dist/range_length)*this.range[1]; |
109 this.svg_dist=Math.ceil((html_dist/range_length)*this.range[1]); |
80 |
110 |
81 //redraw handle |
111 this.apply_hmi_value(0, this.svg_dist); |
82 //this.handle_position(svg_dist=(html_dist/range_length)*this.range[1]); |
|
83 //this.value_elt.textContent = String(Math.ceil(svg_dist)); |
|
84 |
112 |
85 if(this.enTimer){ |
113 // update ghost cursor |
86 this.apply_hmi_value(0, Math.ceil(this.svg_dist)); |
114 if(this.setpoint_elt != undefined){ |
|
115 this.request_animate(); |
|
116 } |
|
117 } |
87 |
118 |
88 // TODO : update ghost cursor and call this.request_animate() |
119 animate(){ |
89 |
120 this.update_DOM(this.svg_dist, this.setpoint_elt); |
90 //reset timer |
|
91 this.enTimer = false; |
|
92 setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); |
|
93 } |
|
94 } |
|
95 } |
121 } |
96 |
122 |
97 on_select(evt){ |
123 on_select(evt){ |
98 this.drag = true; |
124 this.drag = true; |
99 this.enTimer = true; |
125 this.enTimer = true; |
|
126 window.addEventListener("touchmove", this.on_bound_drag, true); |
|
127 window.addEventListener("mousemove", this.on_bound_drag, true); |
|
128 |
|
129 window.addEventListener("mouseup", this.bound_on_release, true) |
|
130 window.addEventListener("touchend", this.bound_on_release, true); |
|
131 window.addEventListener("touchcancel", this.bound_on_release, true); |
100 this.update_position(evt); |
132 this.update_position(evt); |
101 } |
133 } |
102 |
134 |
103 init() { |
135 init() { |
104 let min = this.min_elt ? |
136 let min = this.min_elt ? |
111 this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()]; |
143 this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()]; |
112 let start = this.range_elt.getPointAtLength(0); |
144 let start = this.range_elt.getPointAtLength(0); |
113 let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength()); |
145 let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength()); |
114 this.fi = Math.atan2(start.y-end.y, end.x-start.x); |
146 this.fi = Math.atan2(start.y-end.y, end.x-start.x); |
115 |
147 |
|
148 this.bound_on_select = this.on_select.bind(this); |
|
149 this.bound_on_release = this.on_release.bind(this); |
|
150 this.on_bound_drag = this.on_drag.bind(this); |
116 |
151 |
117 this.handle_elt.addEventListener("touchstart", hmi_widgets[this.element_id].on_select.bind(this)); |
152 this.element.addEventListener("mousedown", this.bound_on_select); |
118 this.handle_elt.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this)); |
153 this.element.addEventListener("touchstart", this.bound_on_select); |
119 this.element.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this)); |
|
120 |
154 |
121 window.addEventListener("touchmove", hmi_widgets[this.element_id].update_position.bind(this)); |
155 if(this.setpoint_elt != undefined){ |
122 window.addEventListener("mousemove", hmi_widgets[this.element_id].update_position.bind(this)); |
156 this.setpoint_style = this.setpoint_elt.getAttribute("style"); |
123 |
157 this.setpoint_elt.setAttribute("style", "display:none"); |
124 window.addEventListener("mouseup", hmi_widgets[this.element_id].on_release.bind(this)) |
158 } |
125 window.addEventListener("touchend", hmi_widgets[this.element_id].on_release.bind(this)); |
|
126 window.addEventListener("touchcancel", hmi_widgets[this.element_id].on_release.bind(this)); |
|
127 |
159 |
128 } |
160 } |
129 } |
161 } |
130 || |
162 || |
131 |
163 |
132 template "widget[@type='Slider']", mode="widget_defs" { |
164 template "widget[@type='Slider']", mode="widget_defs" { |
133 param "hmi_element"; |
165 param "hmi_element"; |
134 labels("handle range"); |
166 labels("handle range"); |
135 optional_labels("value min max"); |
167 optional_labels("value min max setpoint"); |
136 |, |
168 |, |
137 } |
169 } |