1

// widget_button.ysl2

     2

     3

widget_desc("Button") {

     4

    longdesc

     5

    ||

     6

    Button widget takes one boolean variable path, and reflect current true

     7

    or false value by showing "active" or "inactive" labeled element

     8

    respectively. Pressing and releasing button changes variable to true and

     9

    false respectively. Potential inconsistency caused by quick consecutive

    10

    presses on the button is mitigated by using a state machine that wait for

    11

    previous state change to be reflected on variable before applying next one.

    12

    ||

    13

    14

    shortdesc > Push button reflecting consistently given boolean variable

    15

    16

    path name="value" accepts="HMI_BOOL" > Boolean variable

    17

    18

}

    19

    20

// Finite state machine

    21

decl fsm(name);

    22

decl state(name);

    23

decl on_mouse(position);

    24

decl on_dispatch(value);

    25

decl jump(state);

    26

decl show(eltname);

    27

decl hmi_value(value);

    28

    29

gen_index_xhtml {

    30

    31

// State machine to drive HMI_BOOL on a potentially laggy connection

    32

const "_button_fsm" fsm {

    33

    state "init" {

    34

        on_dispatch "false" jump "released";

    35

        on_dispatch "true" jump "pressed";

    36

    }

    37

    38

    state "pressing" {

    39

        // show "waitactive";

    40

        hmi_value "true";

    41

        on_dispatch "true" jump "pressed";

    42

        on_mouse "up" jump "shortpress";

    43

    }

    44

    state "pressed" {

    45

        show "active";

    46

        on_mouse "up" jump "releasing";

    47

        on_dispatch "false" jump "released";

    48

    }

    49

    state "shortpress" {

    50

        on_dispatch "true" jump "releasing";

    51

        on_mouse "down" jump "pressing";

    52

    }

    53

    54

    state "releasing" {

    55

        // show "waitinactive";

    56

        hmi_value "false";

    57

        on_dispatch "false" jump "released";

    58

        on_mouse "down" jump "shortrelease";

    59

    }

    60

    state "released" {

    61

        show "inactive";

    62

        on_mouse "down" jump "pressing";

    63

        on_dispatch "true" jump "pressed";

    64

    }

    65

    state "shortrelease" {

    66

        on_dispatch "false" jump "pressing";

    67

        on_mouse "up" jump "releasing";

    68

    }

    69

}

    70

    71

template "fsm", mode="dispatch_transition" {

    72

    |         switch (this.state) {

    73

    apply "state", mode="dispatch_transition";

    74

    |         }

    75

}

    76

template "state", mode="dispatch_transition" {

    77

    |           case "«@name»":

    78

       apply "on-dispatch";

    79

    |             break;

    80

}

    81

template "on-dispatch" {

    82

    |             if(value ==  «@value») {

    83

    apply "jump", mode="transition";

    84

    |             }

    85

}

    86

    87

template "fsm", mode="mouse_transition" {

    88

    param "position";

    89

    |         switch (this.state) {

    90

    apply "state", mode="mouse_transition" with "position", "$position";

    91

    |         }

    92

}

    93

template "state", mode="mouse_transition" {

    94

    param "position";

    95

    |           case "«@name»":

    96

    apply "on-mouse[@position = $position]";

    97

    |             break;

    98

}

    99

template "on-mouse" {

   100

    // up or down state is already assumed because apply statement filters it

   101

    apply "jump", mode="transition";

   102

}

   103

   104

template "jump", mode="transition" {

   105

    |             this.state = "«@state»";

   106

    |             this.«@state»_action();

   107

}

   108

   109

template "fsm", mode="actions" {

   110

    apply "state", mode="actions";

   111

}

   112

template "state", mode="actions" {

   113

    |     «@name»_action(){

   114

    //| console.log("Entering state «@name»");

   115

    apply "*", mode="actions";

   116

    |     }

   117

}

   118

template "show", mode="actions" {

   119

    |         this.display = "«@eltname»";

   120

    |         this.request_animate();

   121

}

   122

template "hmi-value", mode="actions" {

   123

    |         this.apply_hmi_value(0, «@value»);

   124

}

   125

   126

}

   127

   128

widget_class("Button"){

   129

    const "fsm","exsl:node-set($_button_fsm)";

   130

    |     frequency = 5;

   131

   132

    |     display = "inactive";

   133

    |     state = "init";

   134

   135

    |     dispatch(value) {

   136

    // |         console.log("dispatch"+value);

   137

    apply "$fsm", mode="dispatch_transition";

   138

    |     }

   139

   140

    |     onmouseup(evt) {

   141

    |         svg_root.removeEventListener("pointerup", this.bound_onmouseup, true);

   142

    // |         console.log("onmouseup");

   143

    apply "$fsm", mode="mouse_transition" with "position", "'up'";

   144

    |     }

   145

    |     onmousedown(evt) {

   146

    |         svg_root.addEventListener("pointerup", this.bound_onmouseup, true);

   147

    // |         console.log("onmousedown");

   148

    apply "$fsm", mode="mouse_transition" with "position", "'down'";

   149

    |     }

   150

   151

    apply "$fsm", mode="actions";

   152

   153

    |     animate(){

   154

    |         if (this.active_elt && this.inactive_elt) {

   155

    foreach "str:split('active inactive')" {

   156

    |             if(this.display == "«.»")

   157

    |                 this.«.»_elt.style.display = "";

   158

    |             else

   159

    |                 this.«.»_elt.style.display = "none";

   160

    }

   161

    |         }

   162

    |     }

   163

   164

    |     init() {

   165

    |         this.bound_onmouseup = this.onmouseup.bind(this);

   166

    |         this.element.addEventListener("pointerdown", this.onmousedown.bind(this));

   167

    |     }

   168

}

   169

   170

widget_defs("Button") {

   171

    optional_labels("active inactive");

   172

}