--- a/svghmi/analyse_widget.xslt Fri Oct 01 15:34:04 2021 +0200
+++ b/svghmi/analyse_widget.xslt Fri Oct 01 15:36:09 2021 +0200
@@ -601,12 +601,39 @@
<xsl:text>Value to display</xsl:text>
+ <xsl:template match="widget[@type='PathSlider']" mode="widget_desc"> + <xsl:value-of select="@type"/> + <xsl:text>Slide an SVG element along a path by dragging it</xsl:text> + <path name="value" accepts="HMI_INT,HMI_REAL"> + <xsl:text>value</xsl:text> + <path name="min" count="optional" accepts="HMI_INT,HMI_REAL"> + <xsl:text>min</xsl:text> + <path name="max" count="optional" accepts="HMI_INT,HMI_REAL"> + <xsl:text>max</xsl:text> + <arg name="min" count="optional" accepts="int,real"> + <xsl:text>minimum value</xsl:text> + <arg name="max" count="optional" accepts="int,real"> + <xsl:text>maximum value</xsl:text> <xsl:template match="widget[@type='ScrollBar']" mode="widget_desc">
<xsl:value-of select="@type"/>
- <xsl:text>ScrollBar - documentation to be written+ <xsl:text>ScrollBar - svg:rect based scrollbar --- a/svghmi/gen_index_xhtml.xslt Fri Oct 01 15:34:04 2021 +0200
+++ b/svghmi/gen_index_xhtml.xslt Fri Oct 01 15:36:09 2021 +0200
@@ -1904,17 +1904,6 @@
- <func:function name="func:reverse">- <xsl:param name="content"/>- <xsl:when test="count($content) > 0">- <func:result select="func:reverse($content[position() > 1]) | $content[1]"/>- <func:result select="/.."/> <xsl:template match="widget[@type='Animate']" mode="widget_class">
<xsl:text>class </xsl:text>
<xsl:text>AnimateWidget</xsl:text>
@@ -6395,12 +6384,352 @@
+ <xsl:template match="widget[@type='PathSlider']" mode="widget_desc"> + <xsl:value-of select="@type"/> + <xsl:text>Slide an SVG element along a path by dragging it</xsl:text> + <path name="value" accepts="HMI_INT,HMI_REAL"> + <xsl:text>value</xsl:text> + <path name="min" count="optional" accepts="HMI_INT,HMI_REAL"> + <xsl:text>min</xsl:text> + <path name="max" count="optional" accepts="HMI_INT,HMI_REAL"> + <xsl:text>max</xsl:text> + <arg name="min" count="optional" accepts="int,real"> + <xsl:text>minimum value</xsl:text> + <arg name="max" count="optional" accepts="int,real"> + <xsl:text>maximum value</xsl:text> + <xsl:template match="widget[@type='PathSlider']" mode="widget_class"> + <xsl:text>class </xsl:text> + <xsl:text>PathSliderWidget</xsl:text> + <xsl:text> extends Widget{ + <xsl:text> frequency = 10; + <xsl:text> position = undefined; + <xsl:text> scannedPoints = []; + <xsl:text> pathLength = undefined; + <xsl:text> precision = undefined; + <xsl:text> origPt = undefined; + <xsl:text> scanPath() { + <xsl:text> this.pathLength = this.path_elt.getTotalLength(); + <xsl:text> this.precision = Math.floor(this.pathLength / 10); + <xsl:text> // save linear scan for coarse approximation + <xsl:text> for (var scanLength = 0; scanLength <= this.pathLength; scanLength += this.precision) { + <xsl:text> this.scannedPoints.push([this.path_elt.getPointAtLength(scanLength), scanLength]); + <xsl:text> [this.origPt,] = this.scannedPoints[0]; + <xsl:text> closestPoint(point) { + <xsl:text> var bestPoint, + <xsl:text> bestDistance = Infinity, + <xsl:text> scanDistance; + <xsl:text> // use linear scan for coarse approximation + <xsl:text> for (let [scanPoint, scanLength] of this.scannedPoints){ + <xsl:text> if ((scanDistance = distance2(scanPoint)) < bestDistance) { + <xsl:text> bestPoint = scanPoint, + <xsl:text> bestLength = scanLength, + <xsl:text> bestDistance = scanDistance; + <xsl:text> // binary search for more precise estimate + <xsl:text> let precision = this.precision / 2; + <xsl:text> while (precision > 0.5) { + <xsl:text> var beforePoint, + <xsl:text> beforeLength, + <xsl:text> afterLength, + <xsl:text> beforeDistance, + <xsl:text> afterDistance; + <xsl:text> if ((beforeLength = bestLength - precision) >= 0 && + <xsl:text> (beforeDistance = distance2(beforePoint = this.path_elt.getPointAtLength(beforeLength))) < bestDistance) { + <xsl:text> bestPoint = beforePoint, + <xsl:text> bestLength = beforeLength, + <xsl:text> bestDistance = beforeDistance; + <xsl:text> } else if ((afterLength = bestLength + precision) <= this.pathLength && + <xsl:text> (afterDistance = distance2(afterPoint = this.path_elt.getPointAtLength(afterLength))) < bestDistance) { + <xsl:text> bestPoint = afterPoint, + <xsl:text> bestLength = afterLength, + <xsl:text> bestDistance = afterDistance; + <xsl:text> precision /= 2; + <xsl:text> return [bestPoint, bestLength]; + <xsl:text> function distance2(p) { + <xsl:text> var dx = p.x - point.x, + <xsl:text> dy = p.y - point.y; + <xsl:text> return dx * dx + dy * dy; + <xsl:text> dispatch(value,oldval, index) { + <xsl:text> switch(index) { + <xsl:text> this.position = value; + <xsl:text> this.min = value; + <xsl:text> this.max = value; + <xsl:text> this.request_animate(); + <xsl:text> get_current_point(){ + <xsl:text> let currLength = this.pathLength * (this.position - this.min) / (this.max - this.min) + <xsl:text> return this.path_elt.getPointAtLength(currLength); + <xsl:text> if(this.position == undefined) + <xsl:text> let currPt = this.get_current_point(); + <xsl:text> this.cursor_transform.setTranslate(currPt.x - this.origPt.x, currPt.y - this.origPt.y); + <xsl:text> if(this.args.length == 2) + <xsl:text> [this.min, this.max]=this.args; + <xsl:text> this.scanPath(); + <xsl:text> this.cursor_transform = svg_root.createSVGTransform(); + <xsl:text> this.cursor_elt.transform.baseVal.appendItem(this.cursor_transform); + <xsl:text> this.cursor_elt.onpointerdown = (e) => this.on_cursor_down(e); + <xsl:text> this.bound_drag = this.drag.bind(this); + <xsl:text> this.bound_drop = this.drop.bind(this); + <xsl:text> start_dragging_from_event(e){ + <xsl:text> let clientPoint = new DOMPoint(e.clientX, e.clientY); + <xsl:text> let point = clientPoint.matrixTransform(this.invctm); + <xsl:text> let currPt = this.get_current_point(); + <xsl:text> this.draggingOffset = new DOMPoint(point.x - currPt.x , point.y - currPt.y); + <xsl:text> apply_position_from_event(e){ + <xsl:text> let clientPoint = new DOMPoint(e.clientX, e.clientY); + <xsl:text> let rawPoint = clientPoint.matrixTransform(this.invctm); + <xsl:text> let point = new DOMPoint(rawPoint.x - this.draggingOffset.x , rawPoint.y - this.draggingOffset.y); + <xsl:text> let [closestPoint, closestLength] = this.closestPoint(point); + <xsl:text> let new_position = this.min + (this.max - this.min) * closestLength / this.pathLength; + <xsl:text> this.position = Math.round(Math.max(Math.min(new_position, this.max), this.min)); + <xsl:text> this.apply_hmi_value(0, this.position); + <xsl:text> on_cursor_down(e){ + <xsl:text> // get scrollbar -> root transform + <xsl:text> let ctm = this.path_elt.getCTM(); + <xsl:text> // root -> path transform + <xsl:text> this.invctm = ctm.inverse(); + <xsl:text> this.start_dragging_from_event(e); + <xsl:text> svg_root.addEventListener("pointerup", this.bound_drop, true); + <xsl:text> svg_root.addEventListener("pointermove", this.bound_drag, true); + <xsl:text> svg_root.removeEventListener("pointerup", this.bound_drop, true); + <xsl:text> svg_root.removeEventListener("pointermove", this.bound_drag, true); + <xsl:text> this.apply_position_from_event(e); + <xsl:template match="widget[@type='PathSlider']" mode="widget_defs"> + <xsl:param name="hmi_element"/> + <xsl:call-template name="defs_by_labels"> + <xsl:with-param name="hmi_element" select="$hmi_element"/> + <xsl:with-param name="labels"> + <xsl:text>cursor path</xsl:text> <xsl:template match="widget[@type='ScrollBar']" mode="widget_desc">
<xsl:value-of select="@type"/>
- <xsl:text>ScrollBar - documentation to be written+ <xsl:text>ScrollBar - svg:rect based scrollbar @@ -6469,15 +6798,13 @@
<xsl:text> let range = this.range;
- <xsl:text> let size = Math.max(this.range * this.mincursize, Math.min(this.size, range));+ <xsl:text> let size = Math.max(range * this.mincursize, Math.min(this.size, range)); <xsl:text> let maxh = this.range_elt.height.baseVal.value;
<xsl:text> let pixels = maxh;
- <xsl:text> let units = range;- <xsl:text> return [size, maxh, range, pixels, units];+ <xsl:text> return [size, maxh, range, pixels]; @@ -6489,11 +6816,11 @@
- <xsl:text> let [size, maxh, range, pixels, units] = this.get_ratios();- <xsl:text> let new_y = this.range_elt.y.baseVal.value + Math.round(Math.min(this.position,range-size) * pixels / units);+ <xsl:text> let [size, maxh, range, pixels] = this.get_ratios(); + <xsl:text> let new_y = this.range_elt.y.baseVal.value + Math.round(Math.min(this.position,range-size) * pixels / range); <xsl:text> let new_height = Math.round(maxh * size/range);
@@ -6579,7 +6906,7 @@
- <xsl:text> let [size, maxh, range, pixels, units] = this.get_ratios();+ <xsl:text> let [size, maxh, range, pixels] = this.get_ratios(); <xsl:text> if(pixels == 0) return;
@@ -6587,7 +6914,7 @@
<xsl:text> let movement = point.matrixTransform(this.invctm).y;
- <xsl:text> this.dragpos += movement * units / pixels;+ <xsl:text> this.dragpos += movement * range / pixels; <xsl:text> this.apply_position(this.dragpos);
