svghmi/widget_jump.ysl2
author Edouard Tisserant <edouard.tisserant@gmail.com>
Tue, 01 Aug 2023 21:04:00 +0200
changeset 3840 c2b6354f036f
parent 3685 570a738239f4
permissions -rw-r--r--
Tests: Add minimal SVGHMI test
// widget_jump.ysl2

widget_desc("Jump") {
    longdesc
    ||
    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
    when jumping to a relative page.

    Additional arguments are unordered options:

    - Absolute: force page jump to be not relative even if first path is of type HMI_NODE

    - name=value: Notify PLC about jump by setting variable with path having same name assigned

    "active"+"inactive" labeled elements can be provided and reflect current
    page being shown.

    Exemples:

    Relative jump:

    HMI:Jump:RelativePage@/PUMP9
    HMI:Jump:RelativePage@/PUMP9@role=.userrole#role=="admin"

    Absolute jump:

    HMI:Jump:AbsolutePage
    HMI:Jump:AbsolutePage@role=.userrole#role=="admin"

    Forced absolute jump:

    HMI:Jump:AbsolutePage:Absolute@/PUMP9
    HMI:Jump:AbsolutePage:Absolute:notify=1@notify=/PUMP9

    Jump with feedback

    HMI:Jump:AbsolutePage:notify=1@notify=.did_jump

    ||

    shortdesc > Jump to given page

    arg name="page" accepts="string" > name of page to jump to

    path name="reference" count="optional" accepts="HMI_NODE" > reference for relative jump
}

widget_class("Jump") {
||
        activable = false;
        frequency = 2;
        target_page_is_current_page = false;
        button_beeing_pressed = false;

        onmouseup(evt) {
            svg_root.removeEventListener("pointerup", this.bound_onmouseup, true);
            if(this.enable_state) {
                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;
                fading_page_switch(this.args[0], index);
                this.notify();
            }
        }

        onmousedown(){
            if(this.enable_state) {
                svg_root.addEventListener("pointerup", this.bound_onmouseup, true);
                this.button_beeing_pressed = true;
                this.activity_state = true;
                this.request_animate();
            }
        }

        notify_page_change(page_name, index) {
            // called from animate()
            if(this.activable) {
                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;
                // Since called from animate, update activity directly
                if(this.enable_displayed_state && this.has_activity) {
                    this.animate_activity();
                }
            }
        }
||
}

def "func:is_relative_jump" {
    param "widget";
    result "$widget/path and $widget/path[1]/@type='HMI_NODE' and not($widget/arg[position()>1 and @value = 'Absolute'])";
}

widget_defs("Jump") {
    optional_activable();

    const "jump_disability","$has_activity and $has_disability";

    |     init: function() {
    |         this.bound_onmouseup = this.onmouseup.bind(this);
    |         this.element.addEventListener("pointerdown", this.onmousedown.bind(this));
    if "$has_activity" {
    |         this.activable = true;
    }

    >         this.is_relative = 
    choose{
        when "func:is_relative_jump(.)" > true
        otherwise > false
    }
    > ;\n
    |     },

    |     notify: function() {
    const "paths","path";
    foreach "arg[position()>1 and contains(@value,'=')]"{
        const "name","substring-before(@value,'=')";
        const "value","substring-after(@value,'=')";
        const "index" foreach "$paths" if "@assign = $name" value "position()-1";
    |         // «@value»
    |         this.apply_hmi_value(«$index», «$value»);
    }
    |     },
}

widget_page("Jump"){
    param "page_desc";
    /* jump is considered relative jump if first path points to HMI_NODE
       but a jump can be forced Absolute by adding a "Absolute" argument */
    if "func:is_relative_jump(.)" {
        /* if relative check that given path is compatible with page's reference path */

        /* when no page name provided, check for same page */
        const "target_page_name" choose {
            when "arg" value "arg[1]/@value";
            otherwise value "$page_desc/arg[1]/@value";
        }
        const "target_page_path" choose {
            when "arg" value "$hmi_pages_descs[arg[1]/@value = $target_page_name]/path[not(@assign)]/@value";
            otherwise value "$page_desc/path[not(@assign)]/@value";
        }

        if "not(func:same_class_paths($target_page_path, path[1]/@value))"
            error > Jump id="«@id»" to page "«$target_page_name»" with incompatible path "«path[1]/@value» (must be same class as "«$target_page_path»")

    }
}



/* TODO: move to detachable pages ysl2 */
emit "cssdefs:jump"
||
.fade-out-page {
    animation: cubic-bezier(0, 0.8, 0.6, 1) fadeOut 0.6s both;
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

||

emit "declarations:jump"
||
var jumps_need_update = false;
var jump_history = [[default_page, undefined]];

function update_jumps() {
    // called from animate()
    page_desc[current_visible_page].jumps.map(w=>w.notify_page_change(current_visible_page,current_page_index));
    jumps_need_update = false;
};

||