1

// widget_keypad.ysl2

     2

     3

emit "declarations:keypad" {

     4

    |

     5

    | var keypads = {

     6

    foreach "$keypads_descs"{

     7

        const "keypad_id","@id";

     8

        foreach "arg"{

     9

            const "g", "$geometry[@Id = $keypad_id]";

    10

    |     "«@value»":["«$keypad_id»", «$g/@x», «$g/@y»],

    11

        }

    12

    }

    13

    | }

    14

}

    15

    16

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

    17

    ||

    18

    class KeypadWidget extends Widget{

    19

         moving = undefined;

    20

         click = undefined;

    21

         offset = undefined;

    22

    23

         on_position_click(evt) {

    24

             this.moving = true;

    25

    26

             // chatch window events

    27

             window.addEventListener("touchmove", this.bound_on_drag, true);

    28

             window.addEventListener("mousemove", this.bound_on_drag, true);

    29

    30

             window.addEventListener("mouseup", this.bound_on_release, true)

    31

             window.addEventListener("touchend", this.bound_on_release, true);

    32

             window.addEventListener("touchcancel", this.bound_on_release, true);

    33

    34

             // get click position offset from widget x,y and save it to variable

    35

             var keypad_borders = this.position_elt.getBoundingClientRect();

    36

             var clickX = undefined;

    37

             var clickY = undefined;

    38

             if (evt.type == "touchstart"){

    39

                 clickX = Math.ceil(evt.touches[0].clientX);

    40

                 clickY = Math.ceil(evt.touches[0].clientY);

    41

             }

    42

             else{

    43

                 clickX = evt.pageX;

    44

                 clickY = evt.pageY;

    45

             }

    46

             this.offset=[clickX-keypad_borders.left,clickY-keypad_borders.top]

    47

         }

    48

    49

         on_release(evt) {

    50

            //relase binds

    51

            window.removeEventListener("touchmove", this.bound_on_drag, true);

    52

            window.removeEventListener("mousemove", this.bound_on_drag, true);

    53

    54

            window.removeEventListener("mouseup", this.bound_on_release, true)

    55

            window.removeEventListener("touchend", this.bound_on_release, true);

    56

            window.removeEventListener("touchcancel", this.bound_on_release, true);

    57

    58

            if(this.moving)

    59

                this.moving = false;

    60

         }

    61

    62

         on_drag(evt) {

    63

             if(this.moving)

    64

                //get mouse coordinates

    65

                var clickX = undefined;

    66

                var clickY = undefined;

    67

                if (evt.type == "touchmove"){

    68

                    clickX = Math.ceil(evt.touches[0].clientX);

    69

                    clickY = Math.ceil(evt.touches[0].clientY);

    70

                }

    71

                else{

    72

                    clickX = evt.pageX;

    73

                    clickY = evt.pageY;

    74

                }

    75

                this.click = [clickX,clickY]

    76

    77

                //requeset redraw

    78

                this.request_animate();

    79

         }

    80

    81

         animate(){

    82

            //get keyboard pos in html

    83

            let [eltid, tmpgrp] = current_modal;

    84

            let [xcoord,ycoord] = this.coordinates;

    85

            let [clickX,clickY] = this.click;

    86

            let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox;

    87

    88

            //translate keyboard position

    89

            let mouseX = ((clickX-this.offset[0])/window.innerWidth)*svgWidth;

    90

            let mouseY = ((clickY-this.offset[1])/window.innerHeight)*svgHeight;

    91

            tmpgrp.setAttribute("transform","translate("+String(xdest-xcoord+mouseX)+","+String(ydest-ycoord+mouseY)+")");

    92

         }

    93

    94

         on_key_click(symbols) {

    95

             var syms = symbols.split(" ");

    96

             this.shift |= this.caps;

    97

             this.editstr += syms[this.shift?syms.length-1:0];

    98

             this.shift = false;

    99

             this.update();

   100

         }

   101

   102

         on_Esc_click() {

   103

             end_modal.call(this);

   104

         }

   105

   106

         on_Enter_click() {

   107

             let coercedval = (typeof this.initial) == "number" ? Number(this.editstr) : this.editstr;

   108

             if(typeof coercedval == 'number' && isNaN(coercedval)){

   109

                 // revert to initial so it explicitely shows input was ignored

   110

                 this.editstr = String(this.initial);

   111

                 this.update();

   112

             } else { 

   113

                 let callback_obj = this.result_callback_obj;

   114

                 end_modal.call(this);

   115

                 callback_obj.edit_callback(coercedval);

   116

             }

   117

         }

   118

   119

         on_BackSpace_click() {

   120

             this.editstr = this.editstr.slice(0,this.editstr.length-1);

   121

             this.update();

   122

         }

   123

   124

         on_Sign_click() {

   125

             if(this.editstr[0] == "-")

   126

                 this.editstr = this.editstr.slice(1,this.editstr.length);

   127

             else

   128

                 this.editstr = "-" + this.editstr;

   129

             this.update();

   130

         }

   131

   132

         on_NumDot_click() {

   133

             if(this.editstr.indexOf(".") == "-1"){

   134

                 this.editstr += ".";

   135

                 this.update();

   136

             }

   137

         }

   138

   139

         on_Space_click() {

   140

             this.editstr += " ";

   141

             this.update();

   142

         }

   143

   144

         caps = false;

   145

         _caps = undefined;

   146

         on_CapsLock_click() {

   147

             this.caps = !this.caps;

   148

             this.update();

   149

         }

   150

   151

         shift = false;

   152

         _shift = undefined;

   153

         on_Shift_click() {

   154

             this.shift = !this.shift;

   155

             this.caps = false;

   156

             this.update();

   157

         }

   158

         editstr = "";

   159

         _editstr = undefined;

   160

         result_callback_obj = undefined;

   161

         start_edit(info, valuetype, callback_obj, initial,size) {

   162

             show_modal.call(this,size);

   163

             this.editstr = String(initial);

   164

             this.result_callback_obj = callback_obj;

   165

             this.Info_elt.textContent = info;

   166

             this.shift = false;

   167

             this.caps = false;

   168

             this.initial = initial;

   169

   170

             this.update();

   171

         }

   172

   173

         update() {

   174

             if(this.editstr != this._editstr){

   175

                 this._editstr = this.editstr;

   176

                 this.Value_elt.textContent = this.editstr;

   177

             }

   178

             if(this.shift != this._shift){

   179

                 this._shift = this.shift;

   180

                 (this.shift?widget_active_activable:widget_inactive_activable)(this.Shift_sub);

   181

             }

   182

             if(this.caps != this._caps){

   183

                 this._caps = this.caps;

   184

                 (this.caps?widget_active_activable:widget_inactive_activable)(this.CapsLock_sub);

   185

             }

   186

         }

   187

    }

   188

    ||

   189

   190

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

   191

    param "hmi_element";

   192

    labels("Esc Enter BackSpace Keys Info Value");

   193

    optional_labels("Sign Space NumDot position");

   194

    activable_labels("CapsLock Shift");

   195

    |     init: function() {

   196

    foreach "$hmi_element/*[@inkscape:label = 'Keys']/*" {

   197

    |         id("«@id»").setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_key_click('«func:escape_quotes(@inkscape:label)»')");

   198

    }

   199

    foreach "str:split('Esc Enter BackSpace Sign Space NumDot CapsLock Shift')" {

   200

    |         if(this.«.»_elt)

   201

    |             this.«.»_elt.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_«.»_click()");

   202

    }

   203

    |         if(this.position_elt){

   204

    |            this.bound_on_release = this.on_release.bind(this);

   205

    |            this.bound_on_drag = this.on_drag.bind(this);

   206

    |

   207

    |            this.position_elt.setAttribute("onmousedown", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)");

   208

    |            this.position_elt.setAttribute("ontouchstart", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)");

   209

    |        }

   210

    |     },

   211

    |

   212

    const "g", "$geometry[@Id = $hmi_element/@id]"; 

   213

    |     coordinates: [«$g/@x», «$g/@y»],

   214

}