svghmi/widget_jump.ysl2
author Edouard Tisserant <edouard.tisserant@gmail.com>
Sun, 12 Mar 2023 00:51:53 +0100
branchwxPython4
changeset 3746 41be039fbb8c
parent 3685 570a738239f4
permissions -rw-r--r--
IDE: fix again ruberband with gtk3.

DC logical functions are now disabled when using GTK3.
Apparently using XOR was still having an effect.
Use regular black pen with no logical funciton instead.
// 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;
};

||