1

// widget_button.ysl2

     2

     3

template "widget[@type='Button']", mode="widget_class"{

     4

    ||

     5

    class ButtonWidget extends Widget{

     6

        frequency = 5;

     7

        state = 0;

     8

        active_style = undefined;

     9

        inactive_style = undefined;

    10

    11

        // TODO decouple update of DOM from event (i.e use animate())

    12

    13

    14

        // TODO State of the button should distinguish UI feedbak from current PLC value

    15

    16

        on_mouse_down(evt) {

    17

            if (this.active_style && this.inactive_style) {

    18

                this.active_elt.setAttribute("style", this.active_style);

    19

                this.inactive_elt.setAttribute("style", "display:none");

    20

            }

    21

            this.apply_hmi_value(0, 1);

    22

            // TODO inhibit all mouse/touch events except mouse up (in other word grab cursor)

    23

        }

    24

    25

        on_mouse_up(evt) {

    26

            if (this.active_style && this.inactive_style) {

    27

                this.active_elt.setAttribute("style", "display:none");

    28

                this.inactive_elt.setAttribute("style", this.inactive_style);

    29

            }

    30

            this.apply_hmi_value(0, 0);

    31

            // TODO release inhibited events 

    32

        }

    33

    34

        init() {

    35

           // TODO : move to widget_defs so that we can have generated string literals directly

    36

           this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined;

    37

           this.inactive_style = this.inactive_elt ? this.inactive_elt.style.cssText : undefined;

    38

    39

           if (this.active_style && this.inactive_style) {

    40

               this.active_elt.setAttribute("style", "display:none");

    41

               this.inactive_elt.setAttribute("style", this.inactive_style);

    42

           }

    43

    44

           this.element.setAttribute("onmousedown", "hmi_widgets[\""+this.element_id+"\"].on_mouse_down(evt)");

    45

           this.element.setAttribute("onmouseup", "hmi_widgets[\""+this.element_id+"\"].on_mouse_up(evt)");

    46

        }

    47

    }

    48

    ||

    49

}

    50

    51

    52

template "widget[@type='Button']", mode="widget_defs" {

    53

    param "hmi_element";

    54

    optional_labels("active inactive");

    55

    |,

    56

}