author | Edouard Tisserant <edouard@beremiz.fr> |
Fri, 25 Oct 2024 14:51:38 +0200 | |
changeset 4031 | a89ed401fbc6 |
parent 3454 | 0b5ab53007a9 |
permissions | -rw-r--r-- |
3356
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
1 |
// widget_pathslider.ysl2 |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
2 |
widget_desc("PathSlider") { |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
3 |
longdesc |
3454
0b5ab53007a9
SVGHMI: cosmetic fixes + removed dead code
Edouard Tisserant
parents:
3356
diff
changeset
|
4 |
|| |
0b5ab53007a9
SVGHMI: cosmetic fixes + removed dead code
Edouard Tisserant
parents:
3356
diff
changeset
|
5 |
PathSlider - |
3356
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
6 |
|| |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
7 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
8 |
shortdesc > Slide an SVG element along a path by dragging it |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
9 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
10 |
path name="value" accepts="HMI_INT,HMI_REAL" > value |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
11 |
path name="min" count="optional" accepts="HMI_INT,HMI_REAL" > min |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
12 |
path name="max" count="optional" accepts="HMI_INT,HMI_REAL" > max |
3454
0b5ab53007a9
SVGHMI: cosmetic fixes + removed dead code
Edouard Tisserant
parents:
3356
diff
changeset
|
13 |
|
3356
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
14 |
arg name="min" count="optional" accepts="int,real" > minimum value |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
15 |
arg name="max" count="optional" accepts="int,real" > maximum value |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
16 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
17 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
18 |
widget_class("PathSlider") { |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
19 |
|| |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
20 |
frequency = 10; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
21 |
position = undefined; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
22 |
min = 0; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
23 |
max = 100; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
24 |
scannedPoints = []; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
25 |
pathLength = undefined; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
26 |
precision = undefined; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
27 |
origPt = undefined; |
3454
0b5ab53007a9
SVGHMI: cosmetic fixes + removed dead code
Edouard Tisserant
parents:
3356
diff
changeset
|
28 |
|
3356
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
29 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
30 |
scanPath() { |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
31 |
this.pathLength = this.path_elt.getTotalLength(); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
32 |
this.precision = Math.floor(this.pathLength / 10); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
33 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
34 |
// save linear scan for coarse approximation |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
35 |
for (var scanLength = 0; scanLength <= this.pathLength; scanLength += this.precision) { |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
36 |
this.scannedPoints.push([this.path_elt.getPointAtLength(scanLength), scanLength]); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
37 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
38 |
[this.origPt,] = this.scannedPoints[0]; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
39 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
40 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
41 |
closestPoint(point) { |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
42 |
var bestPoint, |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
43 |
bestLength, |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
44 |
bestDistance = Infinity, |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
45 |
scanDistance; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
46 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
47 |
// use linear scan for coarse approximation |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
48 |
for (let [scanPoint, scanLength] of this.scannedPoints){ |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
49 |
if ((scanDistance = distance2(scanPoint)) < bestDistance) { |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
50 |
bestPoint = scanPoint, |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
51 |
bestLength = scanLength, |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
52 |
bestDistance = scanDistance; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
53 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
54 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
55 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
56 |
// binary search for more precise estimate |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
57 |
let precision = this.precision / 2; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
58 |
while (precision > 0.5) { |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
59 |
var beforePoint, |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
60 |
afterPoint, |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
61 |
beforeLength, |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
62 |
afterLength, |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
63 |
beforeDistance, |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
64 |
afterDistance; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
65 |
if ((beforeLength = bestLength - precision) >= 0 && |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
66 |
(beforeDistance = distance2(beforePoint = this.path_elt.getPointAtLength(beforeLength))) < bestDistance) { |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
67 |
bestPoint = beforePoint, |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
68 |
bestLength = beforeLength, |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
69 |
bestDistance = beforeDistance; |
3454
0b5ab53007a9
SVGHMI: cosmetic fixes + removed dead code
Edouard Tisserant
parents:
3356
diff
changeset
|
70 |
} else if ((afterLength = bestLength + precision) <= this.pathLength && |
3356
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
71 |
(afterDistance = distance2(afterPoint = this.path_elt.getPointAtLength(afterLength))) < bestDistance) { |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
72 |
bestPoint = afterPoint, |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
73 |
bestLength = afterLength, |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
74 |
bestDistance = afterDistance; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
75 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
76 |
precision /= 2; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
77 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
78 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
79 |
return [bestPoint, bestLength]; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
80 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
81 |
function distance2(p) { |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
82 |
var dx = p.x - point.x, |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
83 |
dy = p.y - point.y; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
84 |
return dx * dx + dy * dy; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
85 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
86 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
87 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
88 |
dispatch(value,oldval, index) { |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
89 |
switch(index) { |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
90 |
case 0: |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
91 |
this.position = value; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
92 |
break; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
93 |
case 1: |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
94 |
this.min = value; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
95 |
break; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
96 |
case 2: |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
97 |
this.max = value; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
98 |
break; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
99 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
100 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
101 |
this.request_animate(); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
102 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
103 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
104 |
get_current_point(){ |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
105 |
let currLength = this.pathLength * (this.position - this.min) / (this.max - this.min) |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
106 |
return this.path_elt.getPointAtLength(currLength); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
107 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
108 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
109 |
animate(){ |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
110 |
if(this.position == undefined) |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
111 |
return; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
112 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
113 |
let currPt = this.get_current_point(); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
114 |
this.cursor_transform.setTranslate(currPt.x - this.origPt.x, currPt.y - this.origPt.y); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
115 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
116 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
117 |
init() { |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
118 |
if(this.args.length == 2) |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
119 |
[this.min, this.max]=this.args; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
120 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
121 |
this.scanPath(); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
122 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
123 |
this.cursor_transform = svg_root.createSVGTransform(); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
124 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
125 |
this.cursor_elt.transform.baseVal.appendItem(this.cursor_transform); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
126 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
127 |
this.cursor_elt.onpointerdown = (e) => this.on_cursor_down(e); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
128 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
129 |
this.bound_drag = this.drag.bind(this); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
130 |
this.bound_drop = this.drop.bind(this); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
131 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
132 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
133 |
start_dragging_from_event(e){ |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
134 |
let clientPoint = new DOMPoint(e.clientX, e.clientY); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
135 |
let point = clientPoint.matrixTransform(this.invctm); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
136 |
let currPt = this.get_current_point(); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
137 |
this.draggingOffset = new DOMPoint(point.x - currPt.x , point.y - currPt.y); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
138 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
139 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
140 |
apply_position_from_event(e){ |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
141 |
let clientPoint = new DOMPoint(e.clientX, e.clientY); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
142 |
let rawPoint = clientPoint.matrixTransform(this.invctm); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
143 |
let point = new DOMPoint(rawPoint.x - this.draggingOffset.x , rawPoint.y - this.draggingOffset.y); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
144 |
let [closestPoint, closestLength] = this.closestPoint(point); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
145 |
let new_position = this.min + (this.max - this.min) * closestLength / this.pathLength; |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
146 |
this.position = Math.round(Math.max(Math.min(new_position, this.max), this.min)); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
147 |
this.apply_hmi_value(0, this.position); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
148 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
149 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
150 |
on_cursor_down(e){ |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
151 |
// get scrollbar -> root transform |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
152 |
let ctm = this.path_elt.getCTM(); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
153 |
// root -> path transform |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
154 |
this.invctm = ctm.inverse(); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
155 |
this.start_dragging_from_event(e); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
156 |
svg_root.addEventListener("pointerup", this.bound_drop, true); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
157 |
svg_root.addEventListener("pointermove", this.bound_drag, true); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
158 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
159 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
160 |
drop(e) { |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
161 |
svg_root.removeEventListener("pointerup", this.bound_drop, true); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
162 |
svg_root.removeEventListener("pointermove", this.bound_drag, true); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
163 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
164 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
165 |
drag(e) { |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
166 |
this.apply_position_from_event(e); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
167 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
168 |
|| |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
169 |
} |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
170 |
|
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
171 |
widget_defs("PathSlider") { |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
172 |
labels("cursor path"); |
2507e35976c0
SVGHMI: Added PathSlider widget
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
173 |
} |