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

    56

        make_on_click() {

    57

            let that = this;

    58

            const name = this.args[0];

    59

            return function(evt){

    60

                /* TODO: in order to allow jumps to page selected through

    61

                   for exemple a dropdown, support path pointing to local

    62

                   variable whom value would be an HMI_TREE index and then

    63

                   jump to a relative page not hard-coded in advance

    64

                */

    65

                if(that.enable_state) {

    66

                    const index =

    67

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

    68

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

    69

                    fading_page_switch(name, index);

    70

                    that.notify();

    71

                }

    72

            }

    73

        }

    74

    75

        notify_page_change(page_name, index) {

    76

            // called from animate()

    77

            if(this.activable) {

    78

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

    79

                const ref_name = this.args[0];

    80

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

    81

                // Since called from animate, update activity directly

    82

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

    83

                    this.animate_activity();

    84

                }

    85

            }

    86

        }

    87

||

    88

}

    89

    90

def "func:is_relative_jump" {

    91

    param "widget";

    92

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

    93

}

    94

    95

widget_defs("Jump") {

    96

    optional_activable();

    97

    98

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

    99

   100

    |     init: function() {

   101

    |         this.element.onclick = this.make_on_click();

   102

    if "$has_activity" {

   103

    |         this.activable = true;

   104

    }

   105

   106

    >         this.is_relative = 

   107

    choose{

   108

        when "func:is_relative_jump(.)" > true

   109

        otherwise > false

   110

    }

   111

    > ;\n

   112

    |     },

   113

   114

    |     notify: function() {

   115

    const "paths","path";

   116

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

   117

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

   118

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

   119

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

   120

    |         // «@value»

   121

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

   122

    }

   123

    |     },

   124

}

   125

   126

widget_page("Jump"){

   127

    param "page_desc";

   128

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

   129

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

   130

    if "func:is_relative_jump(.)" {

   131

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

   132

   133

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

   134

        const "target_page_name" choose {

   135

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

   136

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

   137

        }

   138

        const "target_page_path" choose {

   139

            when "arg" value "$hmi_pages_descs[arg[1]/@value = $target_page_name]/path[1]/@value";

   140

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

   141

        }

   142

   143

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

   144

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

   145

   146

    }

   147

}

   148

   149

   150

   151

/* TODO: move to detachable pages ysl2 */

   152

emit "cssdefs:jump"

   153

||

   154

.fade-out-page {

   155

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

   156

}

   157

   158

@keyframes fadeOut {

   159

    0% { opacity: 1; }

   160

    100% { opacity: 0; }

   161

}

   162

   163

||

   164

   165

emit "declarations:jump"

   166

||

   167

var jumps_need_update = false;

   168

var jump_history = [[default_page, undefined]];

   169

   170

function update_jumps() {

   171

    // called from animate()

   172

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

   173

    jumps_need_update = false;

   174

};

   175

   176

||

   177