beremiz

SVGHMI: generalize detach/re-attach of binary choices for ToggleButton, PushButton, Button and Keypad's Shit and CapsLock.

2022-06-22, Edouard Tisserant
b27e50143083
Parents 43b2bff95289
Children 4345b3c9b9de
SVGHMI: generalize detach/re-attach of binary choices for ToggleButton, PushButton, Button and Keypad's Shit and CapsLock.
4 files changed, 46 insertions(+), 62 deletions(-)
  • +4 -10
    svghmi/widget_button.ysl2
  • +2 -2
    svghmi/widget_keypad.ysl2
  • +3 -40
    svghmi/widget_tooglebutton.ysl2
  • +37 -10
    svghmi/widgets_common.ysl2
    • --- a/svghmi/widget_button.ysl2 Mon Jun 20 09:30:11 2022 +0200
    +++ b/svghmi/widget_button.ysl2 Wed Jun 22 11:48:40 2022 +0200
    @@ -183,19 +183,13 @@
    apply "$fsm", mode="actions";
    | animate(){
    - | if (this.active_elt && this.inactive_elt) {
    - foreach "str:split('active inactive')" {
    - | if(this.display == "«.»")
    - | this.«.»_elt.style.display = "";
    - | else
    - | this.«.»_elt.style.display = "none";
    - }
    - | }
    + | this.set_activation_state(this.display == "active");
    | }
    | init() {
    | this.bound_onmouseup = this.onmouseup.bind(this);
    | this.element.addEventListener("pointerdown", this.onmousedown.bind(this));
    + | this.set_activation_state(undefined);
    | }
    }
    @@ -207,7 +201,7 @@
    }
    widget_defs("Button") {
    - optional_labels("active inactive");
    + activable();
    }
    widget_class("PushButton"){
    @@ -217,6 +211,6 @@
    }
    widget_defs("PushButton") {
    - optional_labels("active inactive");
    + activable();
    }
    --- a/svghmi/widget_keypad.ysl2 Mon Jun 20 09:30:11 2022 +0200
    +++ b/svghmi/widget_keypad.ysl2 Wed Jun 22 11:48:40 2022 +0200
    @@ -118,11 +118,11 @@
    }
    if(this.Shift_sub && this.shift != this._shift){
    this._shift = this.shift;
    - (this.shift?this.activate_activable:this.inactivate_activable)(this.Shift_sub);
    + set_activation_state(this.Shift_sub, this.shift);
    }
    if(this.CapsLock_sub && this.caps != this._caps){
    this._caps = this.caps;
    - (this.caps?this.activate_activable:this.inactivate_activable)(this.CapsLock_sub);
    + set_activation_state(this.CapsLock_sub, this.caps);
    }
    }
    ||
    --- a/svghmi/widget_tooglebutton.ysl2 Mon Jun 20 09:30:11 2022 +0200
    +++ b/svghmi/widget_tooglebutton.ysl2 Wed Jun 22 11:48:40 2022 +0200
    @@ -37,56 +37,19 @@
    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);
    + this.set_activation_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);
    + this.set_activation_state(undefined);
    }
    ||
    }
    widget_defs("ToggleButton") {
    - optional_labels("active inactive");
    + activable();
    }
    --- a/svghmi/widgets_common.ysl2 Mon Jun 20 09:30:11 2022 +0200
    +++ b/svghmi/widgets_common.ysl2 Wed Jun 22 11:48:40 2022 +0200
    @@ -14,6 +14,13 @@
    }
    };
    +decl activable() alias - {
    + | activable_sub:{
    + labels("/active /inactive") {
    + content;
    + }
    + | }
    +};
    decl activable_labels(*ptr) alias - {
    optional_labels(*ptr) {
    with "subelements","'active inactive'";
    @@ -165,6 +172,33 @@
    ||
    var pending_widget_animates = [];
    + function _hide(elt, placeholder){
    + if(elt.parentNode != null)
    + placeholder.parentNode.removeChild(elt);
    + }
    + function _show(elt, placeholder){
    + placeholder.parentNode.insertBefore(elt, placeholder);
    + }
    +
    + function set_activation_state(eltsub, state){
    + if(eltsub.active_elt_placeholder == undefined){
    + eltsub.active_elt_placeholder = document.createComment("");
    + eltsub.active_elt.parentNode.insertBefore(eltsub.active_elt_placeholder, eltsub.active_elt);
    + eltsub.inactive_elt_placeholder = document.createComment("");
    + eltsub.inactive_elt.parentNode.insertBefore(eltsub.inactive_elt_placeholder, eltsub.inactive_elt);
    + }
    + (state?_show:_hide)(eltsub.active_elt, eltsub.active_elt_placeholder);
    + ((state || state==undefined)?_hide:_show)(eltsub.inactive_elt, eltsub.inactive_elt_placeholder);
    + }
    +
    + function activate_activable(eltsub) {
    + set_activation_state(eltsub, true);
    + }
    +
    + function inactivate_activable(eltsub) {
    + set_activation_state(eltsub, false);
    + }
    +
    class Widget {
    offset = 0;
    frequency = 10; /* FIXME arbitrary default max freq. Obtain from config ? */
    @@ -411,17 +445,10 @@
    this.pending_animate = true;
    requestHMIAnimation();
    }
    -
    }
    - activate_activable(eltsub) {
    - eltsub.inactive.style.display = "none";
    - eltsub.active.style.display = "";
    - }
    -
    - inactivate_activable(eltsub) {
    - eltsub.active.style.display = "none";
    - eltsub.inactive.style.display = "";
    + set_activation_state(state){
    + set_activation_state(this.activable_sub, state);
    }
    }
    ||
    @@ -489,7 +516,7 @@
    | /* missing «$name»/«$subname» element */
    }
    otherwise {
    - | "«$subname»": id("«$subelt/@id»")`if "position()!=last()" > ,`
    + | "«$subname»_elt": id("«$subelt/@id»")`if "position()!=last()" > ,`
    }
    }
    }