author | Edouard Tisserant |
Fri, 27 Aug 2021 11:31:32 +0200 | |
branch | svghmi |
changeset 3299 | 8b45d8494fae |
parent 3283 | 71ae6f02a7ff |
permissions | -rw-r--r-- |
3012 | 1 |
// widget_slider.ysl2 |
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("Slider") { |
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 |
Slider - DEPRECATED - use ScrollBar or PathSlider instead |
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 |
|| |
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 |
|
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 |
shortdesc > Slider - DEPRECATED - use ScrollBar instead |
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 |
|
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 |
path name="value" accepts="HMI_INT" > 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
|
12 |
path name="range" accepts="HMI_INT" > range |
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 |
path name="visible" accepts="HMI_INT" > visible |
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 |
|
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 |
} |
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 |
|
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
|
17 |
widget_class("Slider") |
3012 | 18 |
|| |
19 |
frequency = 5; |
|
20 |
range = undefined; |
|
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
21 |
handle_orig = undefined; |
3062 | 22 |
scroll_size = undefined; |
23 |
scroll_range = 0; |
|
24 |
scroll_visible = 7; |
|
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
25 |
min_size = 0.07; |
3012 | 26 |
fi = undefined; |
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
27 |
curr_value = 0; |
3012 | 28 |
drag = false; |
29 |
enTimer = false; |
|
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
30 |
handle_click = undefined; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
31 |
last_drag = false; |
3012 | 32 |
|
3062 | 33 |
dispatch(value,oldval, index) { |
34 |
if (index == 0){ |
|
35 |
let [min,max,start,totallength] = this.range; |
|
36 |
//save current value inside widget |
|
37 |
this.curr_value = value; |
|
38 |
||
39 |
//check if in range |
|
40 |
if (this.curr_value > max){ |
|
41 |
this.curr_value = max; |
|
42 |
this.apply_hmi_value(0, this.curr_value); |
|
43 |
} |
|
44 |
else if (this.curr_value < min){ |
|
45 |
this.curr_value = min; |
|
46 |
this.apply_hmi_value(0, this.curr_value); |
|
47 |
} |
|
48 |
||
49 |
if(this.value_elt) |
|
50 |
this.value_elt.textContent = String(value); |
|
51 |
} |
|
52 |
else if(index == 1){ |
|
53 |
this.scroll_range = value; |
|
54 |
this.set_scroll(); |
|
55 |
} |
|
56 |
else if(index == 2){ |
|
57 |
this.scroll_visible = value; |
|
58 |
this.set_scroll(); |
|
59 |
} |
|
3012 | 60 |
|
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
61 |
//don't update if draging and setpoint ghost doesn't exist |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
62 |
if(!this.drag || (this.setpoint_elt != undefined)){ |
3062 | 63 |
this.update_DOM(this.curr_value, this.handle_elt); |
64 |
} |
|
65 |
} |
|
66 |
||
67 |
set_scroll(){ |
|
68 |
//check if range is bigger than visible and set scroll size |
|
69 |
if(this.scroll_range > this.scroll_visible){ |
|
70 |
this.scroll_size = this.scroll_range - this.scroll_visible; |
|
71 |
this.range[0] = 0; |
|
72 |
this.range[1] = this.scroll_size; |
|
73 |
} |
|
74 |
else{ |
|
75 |
this.scroll_size = 1; |
|
76 |
this.range[0] = 0; |
|
77 |
this.range[1] = 1; |
|
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
78 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
79 |
} |
3021
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
80 |
|
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
81 |
update_DOM(value, elt){ |
3012 | 82 |
let [min,max,start,totallength] = this.range; |
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
83 |
// check if handle is resizeable |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
84 |
if (this.scroll_size != undefined){ //size changes |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
85 |
//get parameters |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
86 |
let length = Math.max(min,Math.min(max,(Number(value)-min)*max/(max-min))); |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
87 |
let tip = this.range_elt.getPointAtLength(length); |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
88 |
let handle_min = totallength*this.min_size; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
89 |
|
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
90 |
let step = 1; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
91 |
//check if range is bigger than max displayed and recalculate step |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
92 |
if ((totallength/handle_min) < (max-min+1)){ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
93 |
step = (max-min+1)/(totallength/handle_min-1); |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
94 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
95 |
|
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
96 |
let kx,ky,offseY,offseX = undefined; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
97 |
//scale on x or y axes |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
98 |
if (this.fi > 0.75){ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
99 |
//get scale factor |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
100 |
if(step > 1){ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
101 |
ky = handle_min/this.handle_orig.height; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
102 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
103 |
else{ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
104 |
ky = (totallength-handle_min*(max-min))/this.handle_orig.height; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
105 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
106 |
kx = 1; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
107 |
//get 0 offset to stay inside range |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
108 |
offseY = start.y - (this.handle_orig.height + this.handle_orig.y) * ky; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
109 |
offseX = 0; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
110 |
//get distance from value |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
111 |
tip.y =this.range_elt.getPointAtLength(0).y - length/step *handle_min; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
112 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
113 |
else{ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
114 |
//get scale factor |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
115 |
if(step > 1){ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
116 |
kx = handle_min/this.handle_orig.width; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
117 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
118 |
else{ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
119 |
kx = (totallength-handle_min*(max-min))/this.handle_orig.width; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
120 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
121 |
ky = 1; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
122 |
//get 0 offset to stay inside range |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
123 |
offseX = start.x - (this.handle_orig.x * kx); |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
124 |
offseY = 0; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
125 |
//get distance from value |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
126 |
tip.x =this.range_elt.getPointAtLength(0).x + length/step *handle_min; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
127 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
128 |
elt.setAttribute('transform',"matrix("+(kx)+" 0 0 "+(ky)+" "+(tip.x-start.x+offseX)+" "+(tip.y-start.y+offseY)+")"); |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
129 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
130 |
else{ //size stays the same |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
131 |
let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min))); |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
132 |
let tip = this.range_elt.getPointAtLength(length); |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
133 |
elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")"); |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
134 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
135 |
|
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
136 |
// show or hide ghost if exists |
3021
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
137 |
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
|
138 |
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
|
139 |
if(this.drag){ |
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
140 |
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
|
141 |
}else{ |
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
142 |
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
|
143 |
} |
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
144 |
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
|
145 |
} |
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
146 |
} |
3012 | 147 |
} |
148 |
||
149 |
on_release(evt) { |
|
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
150 |
//unbind events |
3021
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
151 |
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
|
152 |
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
|
153 |
|
3059
e0db3f6a5f39
Button and toggle reworked to use animate and dispatch
usveticic
parents:
3056
diff
changeset
|
154 |
window.removeEventListener("mouseup", this.bound_on_release, true); |
3021
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
155 |
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
|
156 |
window.removeEventListener("touchcancel", this.bound_on_release, true); |
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
157 |
|
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
158 |
//reset drag flag |
3012 | 159 |
if(this.drag){ |
160 |
this.drag = false; |
|
161 |
} |
|
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
162 |
|
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
163 |
// get final position |
3021
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
164 |
this.update_position(evt); |
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
165 |
|
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
166 |
} |
3021
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
167 |
|
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
168 |
on_drag(evt){ |
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
169 |
//ignore drag event for X amount of time and if not selected |
3021
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
170 |
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
|
171 |
this.update_position(evt); |
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
172 |
|
3021
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
173 |
//reset timer |
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
174 |
this.enTimer = false; |
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
175 |
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
|
176 |
} |
3012 | 177 |
} |
178 |
||
179 |
update_position(evt){ |
|
3021
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
180 |
var html_dist = 0; |
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
181 |
let [min,max,start,totallength] = this.range; |
3012 | 182 |
|
3021
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
183 |
//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
|
184 |
var range_borders = this.range_elt.getBoundingClientRect(); |
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
185 |
var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top]; |
3021
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
186 |
var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width ); |
3012 | 187 |
|
3021
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
188 |
//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
|
189 |
var mouseX = undefined; |
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
190 |
var mouseY = undefined; |
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
191 |
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
|
192 |
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
|
193 |
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
|
194 |
} |
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
195 |
else{ |
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
196 |
mouseX = evt.pageX; |
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
197 |
mouseY = evt.pageY; |
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
198 |
} |
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
199 |
|
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
200 |
// calculate position |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
201 |
if (this.handle_click){ //if clicked on handle |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
202 |
let moveDist = 0, resizeAdd = 0; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
203 |
let range_percent = 1; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
204 |
|
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
205 |
//set paramters for resizeable handle |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
206 |
if (this.scroll_size != undefined){ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
207 |
// add one more object to stay inside range |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
208 |
resizeAdd = 1; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
209 |
|
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
210 |
//chack if range is bigger than display option and |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
211 |
// calculate percent of range with out handle |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
212 |
if(((max/(max*this.min_size)) < (max-min+1))){ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
213 |
range_percent = 1-this.min_size; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
214 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
215 |
else{ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
216 |
range_percent = 1-(max-max*this.min_size*(max-min))/max; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
217 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
218 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
219 |
|
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
220 |
//calculate value difference on x or y axis |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
221 |
if(this.fi > 0.7){ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
222 |
moveDist = ((max-min+resizeAdd)/(range_length*range_percent))*((this.handle_click[1]-mouseY)/Math.sin(this.fi)); |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
223 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
224 |
else{ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
225 |
moveDist = ((max-min+resizeAdd)/(range_length*range_percent))*((mouseX-this.handle_click[0])/Math.cos(this.fi)); |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
226 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
227 |
|
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
228 |
this.curr_value = Math.ceil(this.handle_click[2] + moveDist); |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
229 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
230 |
else{ //if clicked on widget |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
231 |
//get handle distance from mouse position |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
232 |
if (minX > mouseX && minY < mouseY){ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
233 |
html_dist = 0; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
234 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
235 |
else if (maxX < mouseX && maxY > mouseY){ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
236 |
html_dist = range_length; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
237 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
238 |
else{ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
239 |
if(this.fi > 0.7){ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
240 |
html_dist = (minY - mouseY)/Math.sin(this.fi); |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
241 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
242 |
else{ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
243 |
html_dist = (mouseX - minX)/Math.cos(this.fi); |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
244 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
245 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
246 |
//calculate distance |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
247 |
this.curr_value=Math.ceil((html_dist/range_length)*(this.range[1]-this.range[0])+this.range[0]); |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
248 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
249 |
|
3062 | 250 |
//check if in range and apply |
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
251 |
if (this.curr_value > max){ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
252 |
this.curr_value = max; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
253 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
254 |
else if (this.curr_value < min){ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
255 |
this.curr_value = min; |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
256 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
257 |
this.apply_hmi_value(0, this.curr_value); |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
258 |
|
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
259 |
//redraw handle |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
260 |
this.request_animate(); |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
261 |
|
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
262 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
263 |
|
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
264 |
animate(){ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
265 |
// redraw handle on screen refresh |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
266 |
// check if setpoint(ghost) handle exsist otherwise update main handle |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
267 |
if(this.setpoint_elt != undefined){ |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
268 |
this.update_DOM(this.curr_value, this.setpoint_elt); |
3021
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
269 |
} |
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
270 |
else{ |
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
271 |
this.update_DOM(this.curr_value, this.handle_elt); |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
272 |
} |
3012 | 273 |
} |
274 |
||
275 |
on_select(evt){ |
|
3062 | 276 |
//enable drag flag and timer |
277 |
this.drag = true; |
|
278 |
this.enTimer = true; |
|
279 |
||
280 |
//bind events |
|
281 |
window.addEventListener("touchmove", this.on_bound_drag, true); |
|
282 |
window.addEventListener("mousemove", this.on_bound_drag, true); |
|
283 |
||
284 |
window.addEventListener("mouseup", this.bound_on_release, true); |
|
285 |
window.addEventListener("touchend", this.bound_on_release, true); |
|
286 |
window.addEventListener("touchcancel", this.bound_on_release, true); |
|
287 |
||
288 |
// check if handle was pressed |
|
289 |
if (evt.currentTarget == this.handle_elt){ |
|
290 |
//get mouse position on the handle |
|
291 |
let mouseX = undefined; |
|
292 |
let mouseY = undefined; |
|
293 |
if (evt.type.startsWith("touch")){ |
|
294 |
mouseX = Math.ceil(evt.touches[0].clientX); |
|
295 |
mouseY = Math.ceil(evt.touches[0].clientY); |
|
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
296 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
297 |
else{ |
3062 | 298 |
mouseX = evt.pageX; |
299 |
mouseY = evt.pageY; |
|
300 |
} |
|
301 |
//save coordinates and orig value |
|
302 |
this.handle_click = [mouseX,mouseY,this.curr_value]; |
|
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
303 |
} |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
304 |
else{ |
3062 | 305 |
// get new handle position and reset if handle was not pressed |
306 |
this.handle_click = undefined; |
|
307 |
this.update_position(evt); |
|
308 |
} |
|
309 |
||
310 |
//prevent next events |
|
311 |
evt.stopPropagation(); |
|
312 |
||
313 |
} |
|
314 |
||
3012 | 315 |
|
316 |
init() { |
|
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
317 |
//set min max value if not defined |
3012 | 318 |
let min = this.min_elt ? |
319 |
Number(this.min_elt.textContent) : |
|
320 |
this.args.length >= 1 ? this.args[0] : 0; |
|
321 |
let max = this.max_elt ? |
|
322 |
Number(this.max_elt.textContent) : |
|
323 |
this.args.length >= 2 ? this.args[1] : 100; |
|
324 |
||
3059
e0db3f6a5f39
Button and toggle reworked to use animate and dispatch
usveticic
parents:
3056
diff
changeset
|
325 |
|
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
326 |
// save initial parameters |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
327 |
this.range_elt.style.strokeMiterlimit="0"; |
3012 | 328 |
this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()]; |
329 |
let start = this.range_elt.getPointAtLength(0); |
|
330 |
let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength()); |
|
331 |
this.fi = Math.atan2(start.y-end.y, end.x-start.x); |
|
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
332 |
this.handle_orig = this.handle_elt.getBBox(); |
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
333 |
|
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
334 |
//bind functions |
3021
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
335 |
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
|
336 |
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
|
337 |
this.on_bound_drag = this.on_drag.bind(this); |
3012 | 338 |
|
3056
827bf284feec
Button, ToggleButton and slider updated. Error to warning when building
usveticic
parents:
3045
diff
changeset
|
339 |
this.handle_elt.addEventListener("mousedown", this.bound_on_select); |
3062 | 340 |
this.element.addEventListener("mousedown", this.bound_on_select); |
341 |
this.element.addEventListener("touchstart", this.bound_on_select); |
|
342 |
//touch recognised as page drag without next command |
|
343 |
document.body.addEventListener("touchstart", function(e){}, false); |
|
344 |
||
345 |
//save ghost style |
|
3021
49799de67540
SVGHMI: add a SetPoint to Slider Widget, visible only when operating the slider.
Edouard Tisserant
parents:
3020
diff
changeset
|
346 |
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
|
347 |
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
|
348 |
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
|
349 |
} |
3012 | 350 |
|
351 |
} |
|
352 |
|| |
|
353 |
||
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
|
354 |
widget_defs("Slider") { |
3012 | 355 |
labels("handle range"); |
3062 | 356 |
optional_labels("value min max setpoint"); |
3018 | 357 |
} |