template "widget[@type='Button']", mode="widget_class"{
class ButtonWidget extends Widget{
active_style = undefined;
inactive_style = undefined;
// TODO decouple update of DOM from event (i.e use animate())
// TODO State of the button should distinguish UI feedbak from current PLC value
if (this.active_style && this.inactive_style) {
this.active_elt.setAttribute("style", this.active_style);
this.inactive_elt.setAttribute("style", "display:none");
this.apply_hmi_value(0, 1);
// TODO inhibit all mouse/touch events except mouse up (in other word grab cursor)
if (this.active_style && this.inactive_style) {
this.active_elt.setAttribute("style", "display:none");
this.inactive_elt.setAttribute("style", this.inactive_style);
this.apply_hmi_value(0, 0);
// TODO release inhibited events
// TODO : move to widget_defs so that we can have generated string literals directly
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("onmousedown", "hmi_widgets[\""+this.element_id+"\"].on_mouse_down(evt)");
this.element.setAttribute("onmouseup", "hmi_widgets[\""+this.element_id+"\"].on_mouse_up(evt)");
template "widget[@type='Button']", mode="widget_defs" {
optional_labels("active inactive");