# HG changeset patch # User Edouard Tisserant # Date 1613163607 -3600 # Node ID 784c839d42597ba11c3b604943b986986b45a404 # Parent d723472a18a42e169d6b77718270f3ef6a1444f4 SVGHMI: Add a robust ScrollBar widget. HMI:ScrollBar@positionrange@size diff -r d723472a18a4 -r 784c839d4259 svghmi/widget_scrollbar.ysl2 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/svghmi/widget_scrollbar.ysl2 Fri Feb 12 22:00:07 2021 +0100 @@ -0,0 +1,106 @@ +// widget_scrollbar.ysl2 + +template "widget[@type='ScrollBar']", mode="widget_class"{ + || + class ScrollBarWidget extends Widget{ + frequency = 5; + position = undefined; + range = undefined; + size = undefined; + mincursize = 0.1; + + dispatch(value,oldval, index) { + switch(index) { + case 0: + if (Math.round(this.position) != value) + this.position = value; + break; + case 1: + this.range = value; + break; + case 2: + this.size = value; + break; + } + + this.request_animate(); + } + + get_ratios() { + let range = this.range; + let size = Math.max(this.range * this.mincursize, Math.min(this.size, range)); + let maxh = this.range_elt.height.baseVal.value; + let pixels = (range - size) * maxh; + let units = range*range; + return [size, maxh, range, pixels, units]; + } + + animate(){ + if(this.position == undefined || this.range == undefined || this.size == undefined) + return; + let [size, maxh, range, pixels, units] = this.get_ratios(); + + let new_y = this.range_elt.y.baseVal.value + Math.round(Math.min(this.position,range) * pixels / units); + let new_height = Math.round(maxh * size/range); + console.log(new_y, new_height); + + this.cursor_elt.y.baseVal.value = new_y; + this.cursor_elt.height.baseVal.value = new_height; + } + + init_mandatory() { + this.cursor_elt.onpointerdown = () => this.on_cursor_down(); + + this.bound_drag = this.drag.bind(this); + this.bound_drop = this.drop.bind(this); + } + + apply_position(position){ + this.position = Math.max(Math.min(position, this.range), 0); + this.apply_hmi_value(0, Math.round(this.position)); + } + + on_page_click(is_up){ + this.apply_position(is_up ? this.position-this.size + : this.position+this.size); + } + + on_cursor_down(e){ + svg_root.addEventListener("pointerup", this.bound_drop, true); + svg_root.addEventListener("pointermove", this.bound_drag, true); + } + + drop(e) { + svg_root.removeEventListener("pointerup", this.bound_drop, true); + svg_root.removeEventListener("pointermove", this.bound_drag, true); + } + + drag(e) { + let [size, maxh, range, pixels, units] = this.get_ratios(); + if(pixels == 0) return; + let matrix = this.range_elt.getCTM().inverse(); + let point = new DOMPoint(e.movementX, e.movementY); + let movement = point.matrixTransform(matrix).y; + this.apply_position(this.position + movement * units / pixels); + } + } + || +} + +template "widget[@type='ScrollBar']", mode="widget_defs" { + param "hmi_element"; + labels("cursor range"); + + const "pagebuttons" optional_labels("pageup pagedown"); + const "have_pagebuttons","string-length($pagebuttons)>0"; + value "$pagebuttons"; + + | init: function() { + | this.init_mandatory(); + + if "$have_pagebuttons" { + | this.pageup_elt.onclick = () => this.on_page_click(true); + | this.pagedown_elt.onclick = () => this.on_page_click(false); + } + | }, +} diff -r d723472a18a4 -r 784c839d4259 tests/svghmi_i18n/svghmi_0@svghmi/messages.pot --- a/tests/svghmi_i18n/svghmi_0@svghmi/messages.pot Fri Feb 12 21:58:03 2021 +0100 +++ b/tests/svghmi_i18n/svghmi_0@svghmi/messages.pot Fri Feb 12 22:00:07 2021 +0100 @@ -5,7 +5,7 @@ msgid "" msgstr "" "Project-Id-Version: PACKAGE VERSION\n" -"POT-Creation-Date: 2021-02-08 21:34+CET\n" +"POT-Creation-Date: 2021-02-09 16:59+CET\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "Last-Translator: FULL NAME \n" "Language-Team: LANGUAGE \n" diff -r d723472a18a4 -r 784c839d4259 tests/svghmi_scrollbar/beremiz.xml --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/tests/svghmi_scrollbar/beremiz.xml Fri Feb 12 22:00:07 2021 +0100 @@ -0,0 +1,5 @@ + + + + + diff -r d723472a18a4 -r 784c839d4259 tests/svghmi_scrollbar/plc.xml --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/tests/svghmi_scrollbar/plc.xml Fri Feb 12 22:00:07 2021 +0100 @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + var0 + + + + + + + + + + + + + var1 + + + + + + + + + + + + + + + + + + diff -r d723472a18a4 -r 784c839d4259 tests/svghmi_scrollbar/svghmi_0@svghmi/baseconfnode.xml --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/tests/svghmi_scrollbar/svghmi_0@svghmi/baseconfnode.xml Fri Feb 12 22:00:07 2021 +0100 @@ -0,0 +1,2 @@ + + diff -r d723472a18a4 -r 784c839d4259 tests/svghmi_scrollbar/svghmi_0@svghmi/confnode.xml --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/tests/svghmi_scrollbar/svghmi_0@svghmi/confnode.xml Fri Feb 12 22:00:07 2021 +0100 @@ -0,0 +1,2 @@ + + diff -r d723472a18a4 -r 784c839d4259 tests/svghmi_scrollbar/svghmi_0@svghmi/messages.pot --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/tests/svghmi_scrollbar/svghmi_0@svghmi/messages.pot Fri Feb 12 22:00:07 2021 +0100 @@ -0,0 +1,17 @@ +# SOME DESCRIPTIVE TITLE. +# Copyright (C) YEAR ORGANIZATION +# FIRST AUTHOR , YEAR. +# +msgid "" +msgstr "" +"Project-Id-Version: PACKAGE VERSION\n" +"POT-Creation-Date: 2021-02-12 21:55+CET\n" +"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" +"Last-Translator: FULL NAME \n" +"Language-Team: LANGUAGE \n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: 8bit\n" +"Generated-By: SVGHMI 1.0\n" + + diff -r d723472a18a4 -r 784c839d4259 tests/svghmi_scrollbar/svghmi_0@svghmi/svghmi.svg --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/tests/svghmi_scrollbar/svghmi_0@svghmi/svghmi.svg Fri Feb 12 22:00:07 2021 +0100 @@ -0,0 +1,819 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + number + + + + + + + + 7 + + + + 4 + + + + 1 + + + + 8 + + + + 5 + + + + 2 + + + + 9 + + + + 6 + + + + 3 + + + + 0 + + + + + Esc + + + + + + + + +/- + + information + + + . + + + + + + 1234 + + + -1 + + + + -10 + + + + +1 + + + + +10 + + + + + 1234 + + + -1 + + + + -10 + + + + +1 + + + + +10 + + + + + 1234 + + + -1 + + + + -10 + + + + +1 + + + + +10 + + + + + + + + + + + + Position + Range + Size +