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 }