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