beremiz

SVGHMI: Make Back widget activable. (#52)
py2compat
18 months ago, Dino Kosic
9ade1b678069
Parents 2a5647b82666
Children 6dcf54a4f5f0101b79fc46e8
SVGHMI: Make Back widget activable. (#52)
4 files changed, 135 insertions(+), 44 deletions(-)
  • +7 -1
    svghmi/analyse_widget.xslt
  • +86 -21
    svghmi/gen_index_xhtml.xslt
  • +36 -16
    svghmi/widget_back.ysl2
  • +6 -6
    svghmi/widget_jump.ysl2
    • --- a/svghmi/analyse_widget.xslt Thu Jan 09 17:11:18 2025 +0100
    +++ b/svghmi/analyse_widget.xslt Wed Dec 11 09:31:35 2024 +0100
    @@ -288,6 +288,12 @@
    <longdesc>
    <xsl:text>Back widget brings focus back to previous page in history when clicked.
    </xsl:text>
    + <xsl:text>
    +</xsl:text>
    + <xsl:text>"active" + "inactive" labeled elements can be provided and reflect whether
    +</xsl:text>
    + <xsl:text>widget is pressed or not.
    +</xsl:text>
    </longdesc>
    <shortdesc>
    <xsl:text>Jump to previous page</xsl:text>
    @@ -636,7 +642,7 @@
    </xsl:text>
    <xsl:text>
    </xsl:text>
    - <xsl:text>If first path is pointint to HMI_NODE variable is used as new reference
    + <xsl:text>If first path is pointing to HMI_NODE variable is used as new reference
    </xsl:text>
    <xsl:text>when jumping to a relative page.
    </xsl:text>
    --- a/svghmi/gen_index_xhtml.xslt Thu Jan 09 17:11:18 2025 +0100
    +++ b/svghmi/gen_index_xhtml.xslt Wed Dec 11 09:31:35 2024 +0100
    @@ -2740,6 +2740,12 @@
    <longdesc>
    <xsl:text>Back widget brings focus back to previous page in history when clicked.
    </xsl:text>
    + <xsl:text>
    +</xsl:text>
    + <xsl:text>"active" + "inactive" labeled elements can be provided and reflect whether
    +</xsl:text>
    + <xsl:text>widget is pressed or not.
    +</xsl:text>
    </longdesc>
    <shortdesc>
    <xsl:text>Jump to previous page</xsl:text>
    @@ -2750,37 +2756,96 @@
    <xsl:text>BackWidget</xsl:text>
    <xsl:text> extends Widget{
    </xsl:text>
    - <xsl:text> on_click(evt) {
    -</xsl:text>
    - <xsl:text> if(jump_history.length &gt; 1){
    -</xsl:text>
    - <xsl:text> let page_name, index;
    + <xsl:text> onmouseup(evt) {
    +</xsl:text>
    + <xsl:text> svg_root.removeEventListener("pointerup", this.bound_onmouseup, true);
    +</xsl:text>
    + <xsl:text> this.activity_state = false;
    +</xsl:text>
    + <xsl:text> this.request_animate();
    +</xsl:text>
    + <xsl:text> let page_name, index;
    +</xsl:text>
    + <xsl:text> if (jump_history.length &gt; 1) {
    </xsl:text>
    <xsl:text> do {
    </xsl:text>
    <xsl:text> jump_history.pop(); // forget current page
    </xsl:text>
    - <xsl:text> if(jump_history.length == 0) return;
    + <xsl:text> if (jump_history.length == 0) return;
    </xsl:text>
    <xsl:text> [page_name, index] = jump_history[jump_history.length-1];
    </xsl:text>
    - <xsl:text> } while(page_name == "ScreenSaver") // never go back to ScreenSaver
    -</xsl:text>
    - <xsl:text> switch_page(page_name, index);
    -</xsl:text>
    - <xsl:text> }
    -</xsl:text>
    - <xsl:text> }
    + <xsl:text> } while (page_name == "ScreenSaver") // never go back to ScreenSaver
    +</xsl:text>
    + <xsl:text> fading_page_switch(page_name, index);
    +</xsl:text>
    + <xsl:text> }
    +</xsl:text>
    + <xsl:text> }
    +</xsl:text>
    + <xsl:text>
    +</xsl:text>
    + <xsl:text> onmousedown(){
    +</xsl:text>
    + <xsl:text> svg_root.addEventListener("pointerup", this.bound_onmouseup, true);
    +</xsl:text>
    + <xsl:text> this.activity_state = true;
    +</xsl:text>
    + <xsl:text> this.request_animate();
    +</xsl:text>
    + <xsl:text> }
    +</xsl:text>
    + <xsl:text>
    </xsl:text>
    <xsl:text> init() {
    </xsl:text>
    - <xsl:text> this.element.onclick = this.on_click.bind(this);
    + <xsl:text> this.bound_onmouseup = this.onmouseup.bind(this);
    +</xsl:text>
    + <xsl:text> this.activity_state = false;
    +</xsl:text>
    + <xsl:text> this.element.addEventListener("pointerdown", this.onmousedown.bind(this));
    </xsl:text>
    <xsl:text> }
    </xsl:text>
    <xsl:text>}
    </xsl:text>
    </xsl:template>
    + <xsl:template match="widget[@type='Back']" mode="widget_defs">
    + <xsl:param name="hmi_element"/>
    + <xsl:variable name="disability">
    + <xsl:call-template name="defs_by_labels">
    + <xsl:with-param name="hmi_element" select="$hmi_element"/>
    + <xsl:with-param name="labels">
    + <xsl:text>/disabled</xsl:text>
    + </xsl:with-param>
    + <xsl:with-param name="mandatory" select="'no'"/>
    + </xsl:call-template>
    + </xsl:variable>
    + <xsl:value-of select="$disability"/>
    + <xsl:variable name="has_disability" select="string-length($disability)&gt;0"/>
    + <xsl:text> activable_sub:{
    +</xsl:text>
    + <xsl:variable name="activity">
    + <xsl:call-template name="defs_by_labels">
    + <xsl:with-param name="hmi_element" select="$hmi_element"/>
    + <xsl:with-param name="labels">
    + <xsl:text>/active /inactive</xsl:text>
    + </xsl:with-param>
    + <xsl:with-param name="mandatory">
    + <xsl:text>warn</xsl:text>
    + </xsl:with-param>
    + </xsl:call-template>
    + </xsl:variable>
    + <xsl:value-of select="$activity"/>
    + <xsl:variable name="has_activity" select="string-length($activity)&gt;0"/>
    + <xsl:text> },
    +</xsl:text>
    + <xsl:text> has_activity: </xsl:text>
    + <xsl:value-of select="$has_activity"/>
    + <xsl:text>,
    +</xsl:text>
    + </xsl:template>
    <xsl:template match="widget[@type='Button']" mode="widget_desc">
    <type>
    <xsl:value-of select="@type"/>
    @@ -5664,7 +5729,7 @@
    </xsl:text>
    <xsl:text>
    </xsl:text>
    - <xsl:text>If first path is pointint to HMI_NODE variable is used as new reference
    + <xsl:text>If first path is pointing to HMI_NODE variable is used as new reference
    </xsl:text>
    <xsl:text>when jumping to a relative page.
    </xsl:text>
    @@ -5752,7 +5817,7 @@
    </xsl:text>
    <xsl:text> target_page_is_current_page = false;
    </xsl:text>
    - <xsl:text> button_beeing_pressed = false;
    + <xsl:text> button_being_pressed = false;
    </xsl:text>
    <xsl:text>
    </xsl:text>
    @@ -5768,9 +5833,9 @@
    </xsl:text>
    <xsl:text> this.indexes[0] + this.offset : undefined;
    </xsl:text>
    - <xsl:text> this.button_beeing_pressed = false;
    -</xsl:text>
    - <xsl:text> this.activity_state = this.target_page_is_current_page || this.button_beeing_pressed;
    + <xsl:text> this.button_being_pressed = false;
    +</xsl:text>
    + <xsl:text> this.activity_state = this.target_page_is_current_page || this.button_being_pressed;
    </xsl:text>
    <xsl:text> fading_page_switch(this.args[0], index);
    </xsl:text>
    @@ -5788,7 +5853,7 @@
    </xsl:text>
    <xsl:text> svg_root.addEventListener("pointerup", this.bound_onmouseup, true);
    </xsl:text>
    - <xsl:text> this.button_beeing_pressed = true;
    + <xsl:text> this.button_being_pressed = true;
    </xsl:text>
    <xsl:text> this.activity_state = true;
    </xsl:text>
    @@ -5812,7 +5877,7 @@
    </xsl:text>
    <xsl:text> this.target_page_is_current_page = ((ref_name == undefined || ref_name == page_name) &amp;&amp; index == ref_index);
    </xsl:text>
    - <xsl:text> this.activity_state = this.target_page_is_current_page || this.button_beeing_pressed;
    + <xsl:text> this.activity_state = this.target_page_is_current_page || this.button_being_pressed;
    </xsl:text>
    <xsl:text> // Since called from animate, update activity directly
    </xsl:text>
    --- a/svghmi/widget_back.ysl2 Thu Jan 09 17:11:18 2025 +0100
    +++ b/svghmi/widget_back.ysl2 Wed Dec 11 09:31:35 2024 +0100
    @@ -4,25 +4,45 @@
    longdesc
    ||
    Back widget brings focus back to previous page in history when clicked.
    +
    + "active" + "inactive" labeled elements can be provided and reflect whether
    + widget is pressed or not.
    ||
    shortdesc > Jump to previous page
    }
    -widget_class("Back")
    - ||
    - on_click(evt) {
    - if(jump_history.length > 1){
    - let page_name, index;
    - do {
    - jump_history.pop(); // forget current page
    - if(jump_history.length == 0) return;
    - [page_name, index] = jump_history[jump_history.length-1];
    - } while(page_name == "ScreenSaver") // never go back to ScreenSaver
    - switch_page(page_name, index);
    - }
    +widget_class("Back") {
    +||
    + onmouseup(evt) {
    + svg_root.removeEventListener("pointerup", this.bound_onmouseup, true);
    + this.activity_state = false;
    + this.request_animate();
    + let page_name, index;
    + if (jump_history.length > 1) {
    + do {
    + jump_history.pop(); // forget current page
    + if (jump_history.length == 0) return;
    + [page_name, index] = jump_history[jump_history.length-1];
    + } while (page_name == "ScreenSaver") // never go back to ScreenSaver
    + fading_page_switch(page_name, index);
    }
    - init() {
    - this.element.onclick = this.on_click.bind(this);
    - }
    - ||
    + }
    +
    + onmousedown(){
    + svg_root.addEventListener("pointerup", this.bound_onmouseup, true);
    + this.activity_state = true;
    + this.request_animate();
    + }
    +
    + init() {
    + this.bound_onmouseup = this.onmouseup.bind(this);
    + this.activity_state = false;
    + this.element.addEventListener("pointerdown", this.onmousedown.bind(this));
    + }
    +||
    +}
    +
    +widget_defs("Back") {
    + activable();
    +}
    --- a/svghmi/widget_jump.ysl2 Thu Jan 09 17:11:18 2025 +0100
    +++ b/svghmi/widget_jump.ysl2 Wed Dec 11 09:31:35 2024 +0100
    @@ -6,7 +6,7 @@
    Jump widget brings focus to a different page. Mandatory first argument
    gives name of the page.
    - If first path is pointint to HMI_NODE variable is used as new reference
    + If first path is pointing to HMI_NODE variable is used as new reference
    when jumping to a relative page.
    Additional arguments are unordered options:
    @@ -53,7 +53,7 @@
    activable = false;
    frequency = 2;
    target_page_is_current_page = false;
    - button_beeing_pressed = false;
    + button_being_pressed = false;
    onmouseup(evt) {
    svg_root.removeEventListener("pointerup", this.bound_onmouseup, true);
    @@ -61,8 +61,8 @@
    const index =
    (this.is_relative && this.indexes.length > 0) ?
    this.indexes[0] + this.offset : undefined;
    - this.button_beeing_pressed = false;
    - this.activity_state = this.target_page_is_current_page || this.button_beeing_pressed;
    + this.button_being_pressed = false;
    + this.activity_state = this.target_page_is_current_page || this.button_being_pressed;
    fading_page_switch(this.args[0], index);
    this.notify();
    }
    @@ -71,7 +71,7 @@
    onmousedown(){
    if(this.enable_state) {
    svg_root.addEventListener("pointerup", this.bound_onmouseup, true);
    - this.button_beeing_pressed = true;
    + this.button_being_pressed = true;
    this.activity_state = true;
    this.request_animate();
    }
    @@ -83,7 +83,7 @@
    const ref_index = this.indexes.length > 0 ? this.indexes[0] + this.offset : undefined;
    const ref_name = this.args[0];
    this.target_page_is_current_page = ((ref_name == undefined || ref_name == page_name) && index == ref_index);
    - this.activity_state = this.target_page_is_current_page || this.button_beeing_pressed;
    + this.activity_state = this.target_page_is_current_page || this.button_being_pressed;
    // Since called from animate, update activity directly
    if(this.enable_displayed_state && this.has_activity) {
    this.animate_activity();