1

// widget_multistate.ysl2

     2

     3

widget_defs("MultiState") {

     4

     5

    longdesc

     6

    ||

     7

    Mutlistateh widget hides all subelements whose label do not match given

     8

    variable value representation. For exemple if given variable type

     9

    is HMI_INT and value is 1, then elements with label '1' will be displayed.

    10

    Label can have comments, so '1#some comment' would also match. If matching

    11

    variable of type HMI_STRING, then double quotes must be used. For exemple,

    12

    '"hello"' or '"hello"#another comment' match HMI_STRING 'hello'.

    13

    14

    Click on widget changes variable value to next value in given list, or to

    15

    first one if not initialized to value already part of the list.

    16

    ||

    17

    18

    shortdesc > Show elements whose label match value.

    19

    20

    // TODO: add optional format/precision argument to support floating points

    21

    22

    path name="value" accepts="HMI_INT,HMI_STRING" > value to compare to labels

    23

    24

}

    25

    26

widget_class("MultiState")

    27

    ||

    28

        frequency = 5;

    29

        state = 0;

    30

        dispatch(value) {

    31

            this.state = value;

    32

            for(let choice of this.choices){

    33

                if(this.state != choice.value){

    34

                    choice.elt.setAttribute("style", "display:none");

    35

                } else {

    36

                    choice.elt.setAttribute("style", choice.style);

    37

                }

    38

            }

    39

            // TODO : use RequestAnimate and animate()

    40

        }

    41

    42

        on_click(evt) {

    43

            //get current selected value

    44

            let next_ind;

    45

            for(next_ind=0; next_ind<this.choices.length; next_ind++){

    46

                if(this.state == this.choices[next_ind].value){

    47

                   next_ind = next_ind + 1;

    48

                   break;

    49

                }

    50

            }

    51

    52

            //get next selected value

    53

            if(this.choices.length > next_ind){

    54

                this.state = this.choices[next_ind].value;

    55

            }

    56

            else{

    57

                this.state = this.choices[0].value;

    58

            }

    59

    60

            //post value to plc

    61

            this.apply_hmi_value(0, this.state);

    62

        }

    63

    64

        init() {

    65

            this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");

    66

        }

    67

    ||

    68

    69

widget_defs("MultiState") {

    70

    |     choices: [

    71

    const "regex",!"'^(\"[^\"].*\"|\-?[0-9]+|false|true)(#.*)?$'"!;

    72

    foreach "$result_svg_ns//*[@id = $hmi_element/@id]//*[regexp:test(@inkscape:label,$regex)]" {

    73

        const "literal", "regexp:match(@inkscape:label,$regex)[2]";

    74

    |         {

    75

    |             elt:id("«@id»"),

    76

    |             style:"«@style»",

    77

    |             value:«$literal»

    78

    |         }`if "position()!=last()" > ,`

    79

    }

    80

    |     ],

    81

}