dgaberscek@2977: // widget_tooglebutton.ysl2
dgaberscek@2977: 
usveticic@3011: 
edouard@3241: widget_desc("ToggleButton") {
edouard@3241:     longdesc
edouard@3241:     ||
edouard@3241:     Button widget takes one boolean variable path, and reflect current true
edouard@3241:     or false value by showing "active" or "inactive" labeled element
edouard@3241:     respectively. Clicking or touching button toggles variable.
edouard@3241:     ||
edouard@3241: 
edouard@3241:     shortdesc > Toggle button reflecting given boolean variable
edouard@3241: 
edouard@3241:     path name="value" accepts="HMI_BOOL" > Boolean variable
edouard@3241:     
edouard@3241: }
edouard@3241: 
edouard@3232: widget_class("ToggleButton") {
usveticic@3011:     ||
usveticic@3011:         frequency = 5;
usveticic@3011:         state = 0;
usveticic@3011:         active_style = undefined;
usveticic@3011:         inactive_style = undefined;
usveticic@3011: 
usveticic@3011:         dispatch(value) {
usveticic@3059:             this.state = value;
usveticic@3059:             //redraw toggle button
usveticic@3059:             this.request_animate();
usveticic@3011:         }
usveticic@3011: 
usveticic@3011:         on_click(evt) {
usveticic@3059:             //toggle state and apply
Edouard@3219:             this.state = this.state ? false : true;
Edouard@3018:             this.apply_hmi_value(0, this.state);
usveticic@3059: 
usveticic@3059:             //redraw toggle button
usveticic@3059:             this.request_animate();
usveticic@3059:         }
usveticic@3059: 
Edouard@3219:         activate(val) {
Edouard@3219:             let [active, inactive] = val ? ["none",""] : ["", "none"];
Edouard@3219:             if (this.active_elt)
Edouard@3219:                 this.active_elt.style.display = active;
Edouard@3219:             if (this.inactive_elt)
Edouard@3219:                 this.inactive_elt.style.display = inactive;
Edouard@3219:         }
Edouard@3219: 
usveticic@3059:         animate(){
Edouard@3219:             // redraw toggle button on screen refresh
Edouard@3219:             this.activate(this.state);
usveticic@3011:         }
usveticic@3011: 
usveticic@3011:         init() {
Edouard@3219:             this.activate(false);
Edouard@3219:             this.element.onclick = (evt) => this.on_click(evt);
usveticic@3011:         }
usveticic@3011:     ||
Edouard@3024: }
usveticic@3011: 
edouard@3232: widget_defs("ToggleButton") {
usveticic@3059:     optional_labels("active inactive");
edouard@3004: }