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

const "_push_button_fsm" fsm {

    32

    state "init" {

    33

        on_dispatch "false" jump "reflect_off";

    34

        on_dispatch "true" jump "reflect_on";

    35

    }

    36

    37

    state "reflect_on" {

    38

        show "active";

    39

        on_mouse "down" jump "on";

    40

        on_mouse "up" jump "off";

    41

        on_dispatch "false" jump "reflect_off";

    42

    }

    43

    44

    state "on" {

    45

        hmi_value "true";

    46

        show "active";

    47

        on_mouse "up" jump "off";

    48

        on_dispatch "false" jump "reflect_off";

    49

    }

    50

    51

    state "reflect_off" {

    52

        show "inactive";

    53

        on_mouse "down" jump "on";

    54

        on_mouse "up" jump "off";

    55

        on_dispatch "true" jump "reflect_on";

    56

    }

    57

    58

    state "off" {

    59

        hmi_value "false";

    60

        show "inactive";

    61

        on_mouse "down" jump "on";

    62

        on_dispatch "true" jump "reflect_on";

    63

    }

    64

}

    65

    66

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

    67

const "_button_fsm" fsm {

    68

    state "init" {

    69

        on_dispatch "false" jump "released";

    70

        on_dispatch "true" jump "pressed";

    71

    }

    72

    73

    state "pressing" {

    74

        // show "waitactive";

    75

        hmi_value "true";

    76

        on_dispatch "true" jump "pressed";

    77

        on_mouse "up" jump "shortpress";

    78

    }

    79

    state "pressed" {

    80

        show "active";

    81

        on_mouse "up" jump "releasing";

    82

        on_dispatch "false" jump "released";

    83

    }

    84

    state "shortpress" {

    85

        on_dispatch "true" jump "releasing";

    86

        on_mouse "down" jump "pressing";

    87

    }

    88

    89

    state "releasing" {

    90

        // show "waitinactive";

    91

        hmi_value "false";

    92

        on_dispatch "false" jump "released";

    93

        on_mouse "down" jump "shortrelease";

    94

    }

    95

    state "released" {

    96

        show "inactive";

    97

        on_mouse "down" jump "pressing";

    98

        on_dispatch "true" jump "pressed";

    99

    }

   100

    state "shortrelease" {

   101

        on_dispatch "false" jump "pressing";

   102

        on_mouse "up" jump "releasing";

   103

    }

   104

}

   105

   106

template "fsm", mode="dispatch_transition" {

   107

    |         switch (this.state) {

   108

    apply "state", mode="dispatch_transition";

   109

    |         }

   110

}

   111

template "state", mode="dispatch_transition" {

   112

    |           case "«@name»":

   113

       apply "on-dispatch";

   114

    |             break;

   115

}

   116

template "on-dispatch" {

   117

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

   118

    apply "jump", mode="transition";

   119

    |             }

   120

}

   121

   122

template "fsm", mode="mouse_transition" {

   123

    param "position";

   124

    |         switch (this.state) {

   125

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

   126

    |         }

   127

}

   128

template "state", mode="mouse_transition" {

   129

    param "position";

   130

    |           case "«@name»":

   131

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

   132

    |             break;

   133

}

   134

template "on-mouse" {

   135

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

   136

    apply "jump", mode="transition";

   137

}

   138

   139

template "jump", mode="transition" {

   140

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

   141

    |             this.«@state»_action();

   142

}

   143

   144

template "fsm", mode="actions" {

   145

    apply "state", mode="actions";

   146

}

   147

template "state", mode="actions" {

   148

    |     «@name»_action(){

   149

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

   150

    apply "*", mode="actions";

   151

    |     }

   152

}

   153

template "show", mode="actions" {

   154

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

   155

    |         this.request_animate();

   156

}

   157

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

   158

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

   159

}

   160

   161

}

   162

   163

   164

function "generated_button_class" {

   165

    param "fsm";

   166

   167

    |     display = "inactive";

   168

    |     state = "init";

   169

   170

    |     dispatch(value) {

   171

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

   172

    |     }

   173

   174

    |     onmouseup(evt) {

   175

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

   176

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

   177

    |     }

   178

    |     onmousedown(evt) {

   179

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

   180

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

   181

    |     }

   182

   183

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

   184

   185

    |     animate(){

   186

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

   187

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

   188

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

   189

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

   190

    |             else

   191

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

   192

    }

   193

    |         }

   194

    |     }

   195

   196

    |     init() {

   197

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

   198

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

   199

    |     }

   200

}

   201

   202

   203

widget_class("Button"){

   204

    |     frequency = 5;

   205

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

   206

    call "generated_button_class" with "fsm", "$fsm";

   207

}

   208

   209

widget_defs("Button") {

   210

    optional_labels("active inactive");

   211

}

   212

   213

widget_class("PushButton"){

   214

    |     frequency = 20;

   215

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

   216

    call "generated_button_class" with "fsm", "$fsm";

   217

}

   218

   219

widget_defs("PushButton") {

   220

    optional_labels("active inactive");

   221

}

   222