beremiz

SVGHMI: also use order-preserving detach re-attach for hiding and showing active and inactive state.

2022-06-20, Edouard Tisserant
43b2bff95289
SVGHMI: also use order-preserving detach re-attach for hiding and showing active and inactive state.
// widget_tooglebutton.ysl2
widget_desc("ToggleButton") {
longdesc
||
Button widget takes one boolean variable path, and reflect current true
or false value by showing "active" or "inactive" labeled element
respectively. Clicking or touching button toggles variable.
||
shortdesc > Toggle button reflecting given boolean variable
path name="value" accepts="HMI_BOOL" > Boolean variable
}
widget_class("ToggleButton") {
||
frequency = 5;
state = 0;
active_style = undefined;
inactive_style = undefined;
dispatch(value) {
this.state = value;
//redraw toggle button
this.request_animate();
}
on_click(evt) {
//toggle state and apply
this.state = this.state ? false : true;
this.apply_hmi_value(0, this.state);
//redraw toggle button
this.request_animate();
}
set_state(active) {
if (this.active_elt){
if(active==undefined || !active){
if(this.active_elt_parent == undefined){
this.active_elt_parent = this.active_elt.parentElement;
this.active_elt_parent.removeChild(this.active_elt);
}
}else{
if(this.active_elt_parent != undefined){
this.active_elt_parent.insertBefore(this.active_elt, this.active_elt_sibling);
this.active_elt_parent = undefined;
}
}
}
if (this.inactive_elt){
if(active==undefined || active){
if(this.inactive_elt_parent == undefined){
this.inactive_elt_parent = this.inactive_elt.parentElement;
this.inactive_elt_parent.removeChild(this.inactive_elt);
}
}else{
if(this.inactive_elt_parent != undefined){
this.inactive_elt_parent.insertBefore(this.inactive_elt, this.inactive_elt_sibling);
this.inactive_elt_parent = undefined;
}
}
}
}
animate(){
// redraw toggle button on screen refresh
this.set_state(this.state);
}
init() {
this.element.onclick = (evt) => this.on_click(evt);
this.active_elt_parent = undefined;
this.active_elt_sibling = this.active_elt.nextSibling;
this.inactive_elt_parent = undefined;
this.inactive_elt_sibling = this.inactive_elt.nextSibling;
if(this.inactive_elt_sibling == this.active_elt)
this.inactive_elt_sibling = this.inactive_elt_sibling.nextSibling;
if(this.active_elt_sibling == this.inactive_elt)
this.active_elt_sibling = this.active_elt_sibling.nextSibling;
this.set_state(undefined);
}
||
}
widget_defs("ToggleButton") {
optional_labels("active inactive");
}