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              end_modal.call(this);

    92              let callback_obj = this.result_callback_obj;

    93              callback_obj.edit_callback(this.editstr);

    94          }

    95 

    96          on_BackSpace_click() {

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

    98              this.update();

    99          }

   100 

   101          on_Sign_click() {

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

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

   104              else

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

   106              this.update();

   107          }

   108 

   109          on_NumDot_click() {

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

   111                  this.editstr += ".";

   112                  this.update();

   113              }

   114          }

   115 

   116          on_Space_click() {

   117              this.editstr += " ";

   118              this.update();

   119          }

   120 

   121          caps = false;

   122          _caps = undefined;

   123          on_CapsLock_click() {

   124              this.caps = !this.caps;

   125              this.update();

   126          }

   127 

   128          shift = false;

   129          _shift = undefined;

   130          on_Shift_click() {

   131              this.shift = !this.shift;

   132              this.caps = false;

   133              this.update();

   134          }

   135          editstr = "";

   136          _editstr = undefined;

   137          result_callback_obj = undefined;

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

   139              show_modal.call(this,size);

   140              this.editstr = initial;

   141              this.result_callback_obj = callback_obj;

   142              this.Info_elt.textContent = info;

   143              this.shift = false;

   144              this.caps = false;

   145              this.update();

   146          }

   147 

   148          update() {

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

   150                  this._editstr = this.editstr;

   151                  this.Value_elt.textContent = this.editstr;

   152              }

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

   154                  this._shift = this.shift;

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

   156              }

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

   158                  this._caps = this.caps;

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

   160              }

   161          }

   162     }

   163     ||

   164 

   178     |         if(this.position_elt){

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

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

   181 

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

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

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

   185 

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

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

   188     |        }