author | Edouard Tisserant <edouard.tisserant@gmail.com> |
Sat, 13 Aug 2022 16:12:39 +0200 | |
branch | wxPython4 |
changeset 3583 | 27e7679ddb99 |
parent 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 |
|
3241
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
3 |
widget_desc("CircularSlider") { |
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
4 |
longdesc |
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
5 |
|| |
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
6 |
CircularSlider - DEPRECATED, to be replaced by PathSlider |
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
7 |
This widget moves "handle" labeled group along "range" labeled |
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
8 |
arc, according to value of the single accepted variable. |
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
9 |
|
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
10 |
If "min" a "max" labeled texts are provided, or if first and second |
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
11 |
argument are given, then they are used as respective minimum and maximum |
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
12 |
value. Otherwise, value is expected to be in between 0 and 100. |
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
13 |
|
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
14 |
If "value" labeled text is found, then its content is replaced by value. |
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
15 |
During drag, "setpoint" labeled group is moved to position defined by user |
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
16 |
while "handle" reflects current value from variable. |
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
17 |
|| |
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
18 |
|
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
19 |
shortdesc > CircularSlider - DEPRECATED |
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
20 |
|
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
21 |
arg name="min" count="optional" accepts="int,real" > minimum value |
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
22 |
|
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
23 |
arg name="min" count="optional" accepts="int,real" > maximum value |
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
24 |
|
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
25 |
// TODO: add printf-like format |
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
26 |
|
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
27 |
path name="value" accepts="HMI_INT,HMI_REAL" > Value to display |
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
28 |
|
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
29 |
} |
fe945f1f48b7
SVGHMI: WIP on Widget DnD UI : Added documentation to widgets, that is injected in widget parse tree during widget analysis
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
3232
diff
changeset
|
30 |
|
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
|
31 |
widget_class("CircularSlider") |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
32 |
|| |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
33 |
frequency = 5; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
34 |
range = undefined; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
35 |
circle = undefined; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
36 |
handle_pos = undefined; |
3062 | 37 |
curr_value = 0; |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
38 |
drag = false; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
39 |
enTimer = false; |
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
40 |
last_drag = false; |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
41 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
42 |
dispatch(value) { |
3062 | 43 |
let [min,max,start,totallength] = this.range; |
44 |
//save current value inside widget |
|
45 |
this.curr_value = value; |
|
46 |
||
47 |
//check if in range |
|
48 |
if (this.curr_value > max){ |
|
49 |
this.curr_value = max; |
|
50 |
this.apply_hmi_value(0, this.curr_value); |
|
51 |
} |
|
52 |
else if (this.curr_value < min){ |
|
53 |
this.curr_value = min; |
|
54 |
this.apply_hmi_value(0, this.curr_value); |
|
55 |
} |
|
56 |
||
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
57 |
if(this.value_elt) |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
58 |
this.value_elt.textContent = String(value); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
59 |
|
3062 | 60 |
//don't update if draging and setpoint ghost doesn't exist |
61 |
if(!this.drag || (this.setpoint_elt != undefined)){ |
|
62 |
this.update_DOM(value, this.handle_elt); |
|
63 |
} |
|
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
64 |
} |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
65 |
|
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
66 |
update_DOM(value, elt){ |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
67 |
let [min,max,totalDistance] = this.range; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
68 |
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
|
69 |
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
|
70 |
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
|
71 |
|
3062 | 72 |
// 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
|
73 |
if(this.setpoint_elt != undefined){ |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
74 |
if(this.last_drag!= this.drag){ |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
75 |
if(this.drag){ |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
76 |
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
|
77 |
}else{ |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
78 |
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
|
79 |
} |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
80 |
this.last_drag = this.drag; |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
81 |
} |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
82 |
} |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
83 |
} |
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 |
on_release(evt) { |
3062 | 86 |
//unbind events |
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
87 |
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
|
88 |
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
|
89 |
|
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
90 |
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
|
91 |
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
|
92 |
window.removeEventListener("touchcancel", this.bound_on_release, true); |
3062 | 93 |
|
94 |
//reset drag flag |
|
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
95 |
if(this.drag){ |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
96 |
this.drag = false; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
97 |
} |
3062 | 98 |
|
99 |
// get final position |
|
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
100 |
this.update_position(evt); |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
101 |
} |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
102 |
|
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
103 |
on_drag(evt){ |
3062 | 104 |
//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
|
105 |
if(this.enTimer && this.drag){ |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
106 |
this.update_position(evt); |
3062 | 107 |
|
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
108 |
//reset timer |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
109 |
this.enTimer = false; |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
110 |
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
|
111 |
} |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
112 |
} |
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 |
update_position(evt){ |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
115 |
if(this.drag && this.enTimer){ |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
116 |
var svg_dist = 0; |
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 |
//calculate center of widget in html |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
119 |
// --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
|
120 |
let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
121 |
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
|
122 |
let htmlCirc = this.range_elt.getBoundingClientRect(); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
123 |
let cxHtml = ((htmlCirc.right-htmlCirc.left)/(width)*(cX-x1))+htmlCirc.left; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
124 |
let cyHtml = ((htmlCirc.bottom-htmlCirc.top)/(height)*(cY-y1))+htmlCirc.top; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
125 |
|
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 |
//get mouse coordinates |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
128 |
let mouseX = undefined; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
129 |
let mouseY = undefined; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
130 |
if (evt.type.startsWith("touch")){ |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
131 |
mouseX = Math.ceil(evt.touches[0].clientX); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
132 |
mouseY = Math.ceil(evt.touches[0].clientY); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
133 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
134 |
else{ |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
135 |
mouseX = evt.pageX; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
136 |
mouseY = evt.pageY; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
137 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
138 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
139 |
//calculate angle |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
140 |
let fi = Math.atan2(cyHtml-mouseY, mouseX-cxHtml); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
141 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
142 |
// transform from 0 to 2PI |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
143 |
if (fi > 0){ |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
144 |
fi = 2*Math.PI-fi; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
145 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
146 |
else{ |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
147 |
fi = -fi; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
148 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
149 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
150 |
//offset it to 0 |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
151 |
fi = fi - fiStart; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
152 |
if (fi < 0){ |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
153 |
fi = fi + 2*Math.PI; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
154 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
155 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
156 |
//get handle distance from mouse position |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
157 |
if(fi<fiEnd){ |
3062 | 158 |
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
|
159 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
160 |
else if(fiEnd<fi && fi<fiEnd+minMax){ |
3062 | 161 |
this.curr_value = this.range[1]; |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
162 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
163 |
else{ |
3062 | 164 |
this.curr_value = this.range[0]; |
165 |
} |
|
166 |
||
167 |
//apply value to hmi |
|
168 |
this.apply_hmi_value(0, Math.ceil(this.curr_value)); |
|
169 |
||
170 |
//redraw handle |
|
171 |
this.request_animate(); |
|
172 |
||
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
173 |
} |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
174 |
|
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
175 |
} |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
176 |
|
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
177 |
animate(){ |
3062 | 178 |
// redraw handle on screen refresh |
179 |
// check if setpoint(ghost) handle exsist otherwise update main handle |
|
180 |
if(this.setpoint_elt != undefined){ |
|
181 |
this.update_DOM(this.curr_value, this.setpoint_elt); |
|
182 |
} |
|
183 |
else{ |
|
184 |
this.update_DOM(this.curr_value, this.handle_elt); |
|
185 |
} |
|
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
186 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
187 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
188 |
on_select(evt){ |
3062 | 189 |
//enable drag flag and timer |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
190 |
this.drag = true; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
191 |
this.enTimer = true; |
3062 | 192 |
|
193 |
//bind events |
|
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
194 |
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
|
195 |
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
|
196 |
|
3062 | 197 |
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
|
198 |
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
|
199 |
window.addEventListener("touchcancel", this.bound_on_release, true); |
3062 | 200 |
|
201 |
//update postion on mouse press |
|
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
202 |
this.update_position(evt); |
3062 | 203 |
|
204 |
//prevent next events |
|
205 |
evt.stopPropagation(); |
|
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
206 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
207 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
208 |
init() { |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
209 |
//get min max |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
210 |
let min = this.min_elt ? |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
211 |
Number(this.min_elt.textContent) : |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
212 |
this.args.length >= 1 ? this.args[0] : 0; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
213 |
let max = this.max_elt ? |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
214 |
Number(this.max_elt.textContent) : |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
215 |
this.args.length >= 2 ? this.args[1] : 100; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
216 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
217 |
//fiStart ==> offset |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
218 |
let fiStart = Number(this.range_elt.getAttribute('sodipodi:start')); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
219 |
let fiEnd = Number(this.range_elt.getAttribute('sodipodi:end')); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
220 |
fiEnd = fiEnd - fiStart; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
221 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
222 |
//fiEnd ==> size of angle |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
223 |
if (fiEnd < 0){ |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
224 |
fiEnd = 2*Math.PI + fiEnd; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
225 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
226 |
|
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
227 |
//min max barrier angle |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
228 |
let minMax = (2*Math.PI - fiEnd)/2; |
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 |
//get parameters from svg |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
231 |
let cX = Number(this.range_elt.getAttribute('sodipodi:cx')); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
232 |
let cY = Number(this.range_elt.getAttribute('sodipodi:cy')); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
233 |
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
|
234 |
this.range = [min, max,this.range_elt.getTotalLength()]; |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
235 |
let cPos = this.range_elt.getBBox(); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
236 |
this.handle_pos = this.range_elt.getPointAtLength(0); |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
237 |
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
|
238 |
|
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
239 |
//bind functions |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
240 |
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
|
241 |
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
|
242 |
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
|
243 |
|
3062 | 244 |
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
|
245 |
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
|
246 |
this.element.addEventListener("touchstart", this.bound_on_select); |
3062 | 247 |
//touch recognised as page drag without next command |
248 |
document.body.addEventListener("touchstart", function(e){}, false); |
|
249 |
||
250 |
//save ghost style |
|
251 |
//save ghost style |
|
3045
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
252 |
if(this.setpoint_elt != undefined){ |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
253 |
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
|
254 |
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
|
255 |
} |
f6d428330e04
All widgets reworked to use widget class and animate function if needed
usveticic
parents:
3018
diff
changeset
|
256 |
|
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
257 |
} |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
258 |
|| |
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
259 |
|
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
|
260 |
widget_defs("CircularSlider") { |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
261 |
labels("handle range"); |
3062 | 262 |
optional_labels("value min max setpoint"); |
3013
0ea6b4f435de
Create new CircularSlider widget which extand class widget
usveticic
parents:
diff
changeset
|
263 |
|, |
3018 | 264 |
} |