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

        animate(){

    41

            // redraw toggle button on screen refresh

    42

            this.set_activation_state(this.state);

    43

        }

    44

    45

        init() {

    46

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

    47

            this.set_activation_state(undefined);

    48

        }

    49

    ||

    50

}

    51

    52

widget_defs("ToggleButton") {

    53

    activable();

    54

}

    55