svghmi/widget_button.ysl2
author usveticic
Thu, 24 Sep 2020 11:52:40 +0200
branchsvghmi
changeset 3059 e0db3f6a5f39
parent 3058 6ea4b7e1a9ed
child 3062 9ec338a99a18
permissions -rw-r--r--
Button and toggle reworked to use animate and dispatch
Slider added buttons to incremente/decrement by 1
Init for animate widget
Changed test svg and plc
// widget_button.ysl2

template "widget[@type='Button']", mode="widget_class"{
    ||
    class ButtonWidget extends Widget{
        frequency = 5;
        state_plc = 0;
        state_hmi = 0;
        plc_lock = false;
        active_style = undefined;
        inactive_style = undefined;

        dispatch(value) {
            this.state_plc = value;
            if(this.plc_lock){
                if(this.state_plc == 1){
                    this.apply_hmi_value(0, 0);
                    this.plc_lock = false;
                }
            }

            //redraw button
            this.state_hmi = this.state_plc;
            this.request_animate();
        }

        animate(){
           // redraw button on screen refresh
           if (this.state_hmi) {
               this.active_elt.setAttribute("style", this.active_style);
               this.inactive_elt.setAttribute("style", "display:none");
           } else {
               this.inactive_elt.setAttribute("style", this.inactive_style);
               this.active_elt.setAttribute("style", "display:none");
           }
        }

        on_click(evt) {
            //set state and apply if plc is 0
            this.plc_lock = true;
            if(this.state_plc == 0){
                this.apply_hmi_value(0, 1);
            }
            //redraw button
            this.request_animate();
        }

        on_press(evt) {
            //set graphic
            this.state_hmi = 1;
            //redraw button
            this.request_animate();
        }

         init() {
            this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined;
            this.inactive_style = this.inactive_elt ? this.inactive_elt.style.cssText : undefined;

            if (this.active_style && this.inactive_style) {
                this.active_elt.setAttribute("style", "display:none");
                this.inactive_elt.setAttribute("style", this.inactive_style);
            }

            this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
            this.element.setAttribute("onmousedown", "hmi_widgets['"+this.element_id+"'].on_press(evt)");
         }
    }
    ||
}


template "widget[@type='Button']", mode="widget_defs" {
    param "hmi_element";
    optional_labels("active inactive");
    |,
}