1

// widget_jump.ysl2

     2

     3

widget_desc("Jump") {

     4

    longdesc

     5

    ||

     6

    Jump widget brings focus to a different page. Mandatory first argument

     7

    gives name of the page.

     8

     9

    If first path is pointint to HMI_NODE variable is used as new reference

    10

    when jumping to a relative page.

    11

    12

    Additional arguments are unordered options:

    13

    14

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

    15

    16

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

    17

    18

    "active"+"inactive" labeled elements can be provided and reflect current

    19

    page being shown.

    20

    21

    Exemples:

    22

    23

    Relative jump:

    24

    25

    HMI:Jump:RelativePage@/PUMP9

    26

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

    27

    28

    Absolute jump:

    29

    30

    HMI:Jump:AbsolutePage

    31

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

    32

    33

    Forced absolute jump:

    34

    35

    HMI:Jump:AbsolutePage:Absolute@/PUMP9

    36

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

    37

    38

    Jump with feedback

    39

    40

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

    41

    42

    ||

    43

    44

    shortdesc > Jump to given page

    45

    46

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

    47

    48

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

    49

}

    50

    51

widget_class("Jump") {

    52

||

    53

        activable = false;

    54

        frequency = 2;

    55

        target_page_is_current_page = false;

    56

        button_beeing_pressed = false;

    57

    58

        onmouseup(evt) {

    59

            svg_root.removeEventListener("pointerup", this.bound_onmouseup, true);

    60

            if(this.enable_state) {

    61

                const index =

    62

                    (this.is_relative && this.indexes.length > 0) ?

    63

                    this.indexes[0] + this.offset : undefined;

    64

                this.button_beeing_pressed = false;

    65

                this.activity_state = this.target_page_is_current_page || this.button_beeing_pressed;

    66

                fading_page_switch(this.args[0], index);

    67

                this.notify();

    68

            }

    69

        }

    70

    71

        onmousedown(){

    72

            if(this.enable_state) {

    73

                svg_root.addEventListener("pointerup", this.bound_onmouseup, true);

    74

                this.button_beeing_pressed = true;

    75

                this.activity_state = true;

    76

                this.request_animate();

    77

            }

    78

        }

    79

    80

        notify_page_change(page_name, index) {

    81

            // called from animate()

    82

            if(this.activable) {

    83

                const ref_index = this.indexes.length > 0 ? this.indexes[0] + this.offset : undefined;

    84

                const ref_name = this.args[0];

    85

                this.target_page_is_current_page = ((ref_name == undefined || ref_name == page_name) && index == ref_index);

    86

                this.activity_state = this.target_page_is_current_page || this.button_beeing_pressed;

    87

                // Since called from animate, update activity directly

    88

                if(this.enable_displayed_state && this.has_activity) {

    89

                    this.animate_activity();

    90

                }

    91

            }

    92

        }

    93

||

    94

}

    95

    96

def "func:is_relative_jump" {

    97

    param "widget";

    98

    result "$widget/path and $widget/path[1]/@type='HMI_NODE' and not($widget/arg[position()>1 and @value = 'Absolute'])";

    99

}

   100

   101

widget_defs("Jump") {

   102

    optional_activable();

   103

   104

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

   105

   106

    |     init: function() {

   107

    |         this.bound_onmouseup = this.onmouseup.bind(this);

   108

    |         this.element.addEventListener("pointerdown", this.onmousedown.bind(this));

   109

    if "$has_activity" {

   110

    |         this.activable = true;

   111

    }

   112

   113

    >         this.is_relative = 

   114

    choose{

   115

        when "func:is_relative_jump(.)" > true

   116

        otherwise > false

   117

    }

   118

    > ;\n

   119

    |     },

   120

   121

    |     notify: function() {

   122

    const "paths","path";

   123

    foreach "arg[position()>1 and contains(@value,'=')]"{

   124

        const "name","substring-before(@value,'=')";

   125

        const "value","substring-after(@value,'=')";

   126

        const "index" foreach "$paths" if "@assign = $name" value "position()-1";

   127

    |         // «@value»

   128

    |         this.apply_hmi_value(«$index», «$value»);

   129

    }

   130

    |     },

   131

}

   132

   133

widget_page("Jump"){

   134

    param "page_desc";

   135

    /* jump is considered relative jump if first path points to HMI_NODE

   136

       but a jump can be forced Absolute by adding a "Absolute" argument */

   137

    if "func:is_relative_jump(.)" {

   138

        /* if relative check that given path is compatible with page's reference path */

   139

   140

        /* when no page name provided, check for same page */

   141

        const "target_page_name" choose {

   142

            when "arg" value "arg[1]/@value";

   143

            otherwise value "$page_desc/arg[1]/@value";

   144

        }

   145

        const "target_page_path" choose {

   146

            when "arg" value "$hmi_pages_descs[arg[1]/@value = $target_page_name]/path[not(@assign)]/@value";

   147

            otherwise value "$page_desc/path[not(@assign)]/@value";

   148

        }

   149

   150

        if "not(func:same_class_paths($target_page_path, path[1]/@value))"

   151

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

   152

   153

    }

   154

}

   155

   156

   157

   158

/* TODO: move to detachable pages ysl2 */

   159

emit "cssdefs:jump"

   160

||

   161

.fade-out-page {

   162

    animation: cubic-bezier(0, 0.8, 0.6, 1) fadeOut 0.6s both;

   163

}

   164

   165

@keyframes fadeOut {

   166

    0% { opacity: 1; }

   167

    100% { opacity: 0; }

   168

}

   169

   170

||

   171

   172

emit "declarations:jump"

   173

||

   174

var jumps_need_update = false;

   175

var jump_history = [[default_page, undefined]];

   176

   177

function update_jumps() {

   178

    // called from animate()

   179

    page_desc[current_visible_page].jumps.map(w=>w.notify_page_change(current_visible_page,current_page_index));

   180

    jumps_need_update = false;

   181

};

   182

   183

||

   184