1

// widget_tooglebutton.ysl2

     2

     3

     4

widget_desc("ToggleButton") {

     5

    longdesc

     6

    ||

     7

    Button widget takes one boolean variable path, and reflect current true

     8

    or false value by showing "active" or "inactive" labeled element

     9

    respectively. Clicking or touching button toggles variable.

    10

    ||

    11

    12

    shortdesc > Toggle button reflecting given boolean variable

    13

    14

    path name="value" accepts="HMI_BOOL" > Boolean variable

    15

    16

}

    17

    18

widget_class("ToggleButton") {

    19

    ||

    20

        frequency = 5;

    21

        state = 0;

    22

        active_style = undefined;

    23

        inactive_style = undefined;

    24

    25

        dispatch(value) {

    26

            this.state = value;

    27

            //redraw toggle button

    28

            this.request_animate();

    29

        }

    30

    31

        on_click(evt) {

    32

            //toggle state and apply

    33

            this.state = this.state ? false : true;

    34

            this.apply_hmi_value(0, this.state);

    35

    36

            //redraw toggle button

    37

            this.request_animate();

    38

        }

    39

    40

        activate(val) {

    41

            let [active, inactive] = val ? ["none",""] : ["", "none"];

    42

            if (this.active_elt)

    43

                this.active_elt.style.display = active;

    44

            if (this.inactive_elt)

    45

                this.inactive_elt.style.display = inactive;

    46

        }

    47

    48

        animate(){

    49

            // redraw toggle button on screen refresh

    50

            this.activate(this.state);

    51

        }

    52

    53

        init() {

    54

            this.activate(false);

    55

            this.element.onclick = (evt) => this.on_click(evt);

    56

        }

    57

    ||

    58

}

    59

    60

widget_defs("ToggleButton") {

    61

    optional_labels("active inactive");

    62

}