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

        active_style = undefined;

    22

        inactive_style = undefined;

    23

    24

        dispatch(value) {

    25

            this.activity_state = Boolean(value);

    26

            //redraw toggle button

    27

            this.request_animate();

    28

        }

    29

    30

        on_click(evt) {

    31

            //toggle state and apply

    32

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

    33

            this.apply_hmi_value(0, this.activity_state);

    34

    35

            //redraw toggle button

    36

            this.request_animate();

    37

        }

    38

    39

        init() {

    40

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

    41

            this.activity_state = undefined;

    42

        }

    43

    ||

    44

}

    45

    46

widget_defs("ToggleButton") {

    47

    activable();

    48

}

    49