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

         enTimer = undefined;

    21

         offset = undefined;

    22

    23

         on_position_click(evt) {

    24

             this.moving = true;

    25

             this.enTimer = true;

    26

    27

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

    28

             var keypad_borders = this.position_elt.getBoundingClientRect();

    29

             var clickX = undefined;

    30

             var clickY = undefined;

    31

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

    32

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

    33

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

    34

             }

    35

             else{

    36

                 clickX = evt.pageX;

    37

                 clickY = evt.pageY;

    38

             }

    39

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

    40

         }

    41

    42

         off_position_click(evt) {

    43

            if(this.moving)

    44

                this.moving = false;

    45

         }

    46

    47

         on_move(evt) {

    48

             if(this.moving && this.enTimer){

    49

                 //get keyboard pos in html

    50

                 let [eltid, tmpgrp] = current_modal;

    51

                 let [xcoord,ycoord] = this.coordinates;

    52

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

    53

    54

                 //get mouse coordinates

    55

                 var clickX = undefined;

    56

                 var clickY = undefined;

    57

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

    58

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

    59

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

    60

                 }

    61

                 else{

    62

                     clickX = evt.pageX;

    63

                     clickY = evt.pageY;

    64

                 }

    65

    66

                 //translate keyboard position

    67

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

    68

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

    69

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

    70

    71

                 //reset timer

    72

                 this.enTimer = false;

    73

                 setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);

    74

             }

    75

    76

         }

    77

    78

         on_key_click(symbols) {

    79

             var syms = symbols.split(" ");

    80

             this.shift |= this.caps;

    81

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

    82

             this.shift = false;

    83

             this.update();

    84

         }

    85

    86

         on_Esc_click() {

    87

             end_modal.call(this);

    88

         }

    89

    90

         on_Enter_click() {

    91

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

    94

                 this.editstr = String(this.initial);

    95

                 this.update();

    97

                 let callback_obj = this.result_callback_obj;

    98

                 end_modal.call(this);

    99

                 callback_obj.edit_callback(coercedval);

   100

             }

   101

         }

   102

   103

         on_BackSpace_click() {

   104

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

   105

             this.update();

   106

         }

   107

   108

         on_Sign_click() {

   109

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

   110

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

   111

             else

   112

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

   113

             this.update();

   114

         }

   115

   116

         on_NumDot_click() {

   117

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

   118

                 this.editstr += ".";

   119

                 this.update();

   120

             }

   121

         }

   122

   123

         on_Space_click() {

   124

             this.editstr += " ";

   125

             this.update();

   126

         }

   127

   128

         caps = false;

   129

         _caps = undefined;

   130

         on_CapsLock_click() {

   131

             this.caps = !this.caps;

   132

             this.update();

   133

         }

   134

   135

         shift = false;

   136

         _shift = undefined;

   137

         on_Shift_click() {

   138

             this.shift = !this.shift;

   139

             this.caps = false;

   140

             this.update();

   141

         }

   142

         editstr = "";

   143

         _editstr = undefined;

   144

         result_callback_obj = undefined;

   145

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

   146

             show_modal.call(this,size);

   147

             this.editstr = String(initial);

   148

             this.result_callback_obj = callback_obj;

   149

             this.Info_elt.textContent = info;

   150

             this.shift = false;

   151

             this.caps = false;

   152

             this.initial = initial;

   153

   154

             this.update();

   155

         }

   156

   157

         update() {

   158

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

   159

                 this._editstr = this.editstr;

   160

                 this.Value_elt.textContent = this.editstr;

   161

             }

   162

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

   163

                 this._shift = this.shift;

   164

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

   165

             }

   166

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

   167

                 this._caps = this.caps;

   168

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

   169

             }

   170

         }

   171

    }

   172

    ||

   173

   174

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

   175

    param "hmi_element";

   176

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

   177

    optional_labels("Sign Space NumDot position");

   178

    activable_labels("CapsLock Shift");

   179

    |     init: function() {

   180

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

   181

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

   182

    }

   183

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

   184

    |         if(this.«.»_elt)

   185

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

   186

    }

   187

    |         if(this.position_elt){

   188

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

   189

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

   190

   191

    |            window.addEventListener("mouseup", hmi_widgets[this.element_id].off_position_click.bind(this));

   192

    |            window.addEventListener("touchend", hmi_widgets[this.element_id].off_position_click.bind(this));

   193

    |            window.addEventListener("touchcancel", hmi_widgets[this.element_id].off_position_click.bind(this));

   194

   195

    |            window.addEventListener("mousemove", hmi_widgets[this.element_id].on_move.bind(this));

   196

    |            window.addEventListener("touchmove", hmi_widgets[this.element_id].on_move.bind(this));

   197

    |        }

   198

    |     },

   199

    |

   200

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

   201

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

   202

}