author | Edouard Tisserant <edouard.tisserant@gmail.com> |
Sun, 02 May 2021 23:15:23 +0200 | |
branch | svghmi |
changeset 3233 | 315f17e74ef5 |
parent 3232 | 7bdb766c2a4d |
child 3241 | fe945f1f48b7 |
permissions | -rw-r--r-- |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
1 |
// widget_circuralslider.ysl2 |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
2 |
|
3232
7bdb766c2a4d
SVGHMI: In order to allow widget signature and description to coexist in same ysl2 file, introduced widget_class, widget_defs to declare widget codegen templates and gen_index_xhtml to mark templates that are only usefull in gen_index_xhtml.xslt.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3062
diff
changeset
|
3 |
widget_class("CircularSlider") |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
4 |
|| |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
5 |
frequency = 5; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
6 |
range = undefined; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
7 |
circle = undefined; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
8 |
handle_pos = undefined; |
3062 | 9 |
curr_value = 0; |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
10 |
drag = false; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
11 |
enTimer = false; |
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
12 |
last_drag = false; |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
13 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
14 |
dispatch(value) { |
3062 | 15 |
let [min,max,start,totallength] = this.range; |
16 |
//save current value inside widget |
|
17 |
this.curr_value = value; |
|
18 |
||
19 |
//check if in range |
|
20 |
if (this.curr_value > max){ |
|
21 |
this.curr_value = max; |
|
22 |
this.apply_hmi_value(0, this.curr_value); |
|
23 |
} |
|
24 |
else if (this.curr_value < min){ |
|
25 |
this.curr_value = min; |
|
26 |
this.apply_hmi_value(0, this.curr_value); |
|
27 |
} |
|
28 |
||
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
29 |
if(this.value_elt) |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
30 |
this.value_elt.textContent = String(value); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
31 |
|
3062 | 32 |
//don't update if draging and setpoint ghost doesn't exist |
33 |
if(!this.drag || (this.setpoint_elt != undefined)){ |
|
34 |
this.update_DOM(value, this.handle_elt); |
|
35 |
} |
|
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
36 |
} |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
37 |
|
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
38 |
update_DOM(value, elt){ |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
39 |
let [min,max,totalDistance] = this.range; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
40 |
let length = Math.max(0,Math.min((totalDistance),(Number(value)-min)/(max-min)*(totalDistance))); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
41 |
let tip = this.range_elt.getPointAtLength(length); |
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
42 |
elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")"); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
43 |
|
3062 | 44 |
// show or hide ghost if exists |
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
45 |
if(this.setpoint_elt != undefined){ |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
46 |
if(this.last_drag!= this.drag){ |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
47 |
if(this.drag){ |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
48 |
this.setpoint_elt.setAttribute("style", this.setpoint_style); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
49 |
}else{ |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
50 |
this.setpoint_elt.setAttribute("style", "display:none"); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
51 |
} |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
52 |
this.last_drag = this.drag; |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
53 |
} |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
54 |
} |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
55 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
56 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
57 |
on_release(evt) { |
3062 | 58 |
//unbind events |
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
59 |
window.removeEventListener("touchmove", this.on_bound_drag, true); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
60 |
window.removeEventListener("mousemove", this.on_bound_drag, true); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
61 |
|
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
62 |
window.removeEventListener("mouseup", this.bound_on_release, true) |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
63 |
window.removeEventListener("touchend", this.bound_on_release, true); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
64 |
window.removeEventListener("touchcancel", this.bound_on_release, true); |
3062 | 65 |
|
66 |
//reset drag flag |
|
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
67 |
if(this.drag){ |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
68 |
this.drag = false; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
69 |
} |
3062 | 70 |
|
71 |
// get final position |
|
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
72 |
this.update_position(evt); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
73 |
} |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
74 |
|
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
75 |
on_drag(evt){ |
3062 | 76 |
//ignore drag event for X amount of time and if not selected |
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
77 |
if(this.enTimer && this.drag){ |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
78 |
this.update_position(evt); |
3062 | 79 |
|
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
80 |
//reset timer |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
81 |
this.enTimer = false; |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
82 |
setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
83 |
} |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
84 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
85 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
86 |
update_position(evt){ |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
87 |
if(this.drag && this.enTimer){ |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
88 |
var svg_dist = 0; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
89 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
90 |
//calculate center of widget in html |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
91 |
// --TODO maybe it would be better to bind this part to window change size event ??? |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
92 |
let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
93 |
let [cX, cY,fiStart,fiEnd,minMax,x1,y1,width,height] = this.circle; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
94 |
let htmlCirc = this.range_elt.getBoundingClientRect(); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
95 |
let cxHtml = ((htmlCirc.right-htmlCirc.left)/(width)*(cX-x1))+htmlCirc.left; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
96 |
let cyHtml = ((htmlCirc.bottom-htmlCirc.top)/(height)*(cY-y1))+htmlCirc.top; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
97 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
98 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
99 |
//get mouse coordinates |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
100 |
let mouseX = undefined; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
101 |
let mouseY = undefined; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
102 |
if (evt.type.startsWith("touch")){ |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
103 |
mouseX = Math.ceil(evt.touches[0].clientX); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
104 |
mouseY = Math.ceil(evt.touches[0].clientY); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
105 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
106 |
else{ |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
107 |
mouseX = evt.pageX; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
108 |
mouseY = evt.pageY; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
109 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
110 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
111 |
//calculate angle |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
112 |
let fi = Math.atan2(cyHtml-mouseY, mouseX-cxHtml); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
113 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
114 |
// transform from 0 to 2PI |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
115 |
if (fi > 0){ |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
116 |
fi = 2*Math.PI-fi; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
117 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
118 |
else{ |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
119 |
fi = -fi; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
120 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
121 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
122 |
//offset it to 0 |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
123 |
fi = fi - fiStart; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
124 |
if (fi < 0){ |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
125 |
fi = fi + 2*Math.PI; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
126 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
127 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
128 |
//get handle distance from mouse position |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
129 |
if(fi<fiEnd){ |
3062 | 130 |
this.curr_value=(fi)/(fiEnd)*(this.range[1]-this.range[0]); |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
131 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
132 |
else if(fiEnd<fi && fi<fiEnd+minMax){ |
3062 | 133 |
this.curr_value = this.range[1]; |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
134 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
135 |
else{ |
3062 | 136 |
this.curr_value = this.range[0]; |
137 |
} |
|
138 |
||
139 |
//apply value to hmi |
|
140 |
this.apply_hmi_value(0, Math.ceil(this.curr_value)); |
|
141 |
||
142 |
//redraw handle |
|
143 |
this.request_animate(); |
|
144 |
||
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
145 |
} |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
146 |
|
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
147 |
} |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
148 |
|
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
149 |
animate(){ |
3062 | 150 |
// redraw handle on screen refresh |
151 |
// check if setpoint(ghost) handle exsist otherwise update main handle |
|
152 |
if(this.setpoint_elt != undefined){ |
|
153 |
this.update_DOM(this.curr_value, this.setpoint_elt); |
|
154 |
} |
|
155 |
else{ |
|
156 |
this.update_DOM(this.curr_value, this.handle_elt); |
|
157 |
} |
|
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
158 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
159 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
160 |
on_select(evt){ |
3062 | 161 |
//enable drag flag and timer |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
162 |
this.drag = true; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
163 |
this.enTimer = true; |
3062 | 164 |
|
165 |
//bind events |
|
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
166 |
window.addEventListener("touchmove", this.on_bound_drag, true); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
167 |
window.addEventListener("mousemove", this.on_bound_drag, true); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
168 |
|
3062 | 169 |
window.addEventListener("mouseup", this.bound_on_release, true); |
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
170 |
window.addEventListener("touchend", this.bound_on_release, true); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
171 |
window.addEventListener("touchcancel", this.bound_on_release, true); |
3062 | 172 |
|
173 |
//update postion on mouse press |
|
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
174 |
this.update_position(evt); |
3062 | 175 |
|
176 |
//prevent next events |
|
177 |
evt.stopPropagation(); |
|
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
178 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
179 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
180 |
init() { |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
181 |
//get min max |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
182 |
let min = this.min_elt ? |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
183 |
Number(this.min_elt.textContent) : |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
184 |
this.args.length >= 1 ? this.args[0] : 0; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
185 |
let max = this.max_elt ? |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
186 |
Number(this.max_elt.textContent) : |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
187 |
this.args.length >= 2 ? this.args[1] : 100; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
188 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
189 |
//fiStart ==> offset |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
190 |
let fiStart = Number(this.range_elt.getAttribute('sodipodi:start')); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
191 |
let fiEnd = Number(this.range_elt.getAttribute('sodipodi:end')); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
192 |
fiEnd = fiEnd - fiStart; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
193 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
194 |
//fiEnd ==> size of angle |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
195 |
if (fiEnd < 0){ |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
196 |
fiEnd = 2*Math.PI + fiEnd; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
197 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
198 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
199 |
//min max barrier angle |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
200 |
let minMax = (2*Math.PI - fiEnd)/2; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
201 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
202 |
//get parameters from svg |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
203 |
let cX = Number(this.range_elt.getAttribute('sodipodi:cx')); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
204 |
let cY = Number(this.range_elt.getAttribute('sodipodi:cy')); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
205 |
this.range_elt.style.strokeMiterlimit="0"; //eliminates some weird border around html object |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
206 |
this.range = [min, max,this.range_elt.getTotalLength()]; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
207 |
let cPos = this.range_elt.getBBox(); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
208 |
this.handle_pos = this.range_elt.getPointAtLength(0); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
209 |
this.circle = [cX, cY,fiStart,fiEnd,minMax,cPos.x,cPos.y,cPos.width,cPos.height]; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
210 |
|
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
211 |
//bind functions |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
212 |
this.bound_on_select = this.on_select.bind(this); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
213 |
this.bound_on_release = this.on_release.bind(this); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
214 |
this.on_bound_drag = this.on_drag.bind(this); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
215 |
|
3062 | 216 |
this.handle_elt.addEventListener("mousedown", this.bound_on_select); |
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
217 |
this.element.addEventListener("mousedown", this.bound_on_select); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
218 |
this.element.addEventListener("touchstart", this.bound_on_select); |
3062 | 219 |
//touch recognised as page drag without next command |
220 |
document.body.addEventListener("touchstart", function(e){}, false); |
|
221 |
||
222 |
//save ghost style |
|
223 |
//save ghost style |
|
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
224 |
if(this.setpoint_elt != undefined){ |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
225 |
this.setpoint_style = this.setpoint_elt.getAttribute("style"); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
226 |
this.setpoint_elt.setAttribute("style", "display:none"); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
227 |
} |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
228 |
|
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
229 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
230 |
|| |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
231 |
|
3232
7bdb766c2a4d
SVGHMI: In order to allow widget signature and description to coexist in same ysl2 file, introduced widget_class, widget_defs to declare widget codegen templates and gen_index_xhtml to mark templates that are only usefull in gen_index_xhtml.xslt.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3062
diff
changeset
|
232 |
widget_defs("CircularSlider") { |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
233 |
param "hmi_element"; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
234 |
labels("handle range"); |
3062 | 235 |
optional_labels("value min max setpoint"); |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
236 |
|, |
3018 | 237 |
} |