Edouard@2908: // widget_keypad.ysl2
Edouard@2908: 
edouard@2943: emit "declarations:keypad" {
edouard@2941:     |
edouard@2941:     | var keypads = {
edouard@2941:     foreach "$keypads_descs"{
edouard@2941:         const "keypad_id","@id";
edouard@2941:         foreach "arg"{
edouard@2941:             const "g", "$geometry[@Id = $keypad_id]";
edouard@2941:     |     "«@value»":["«$keypad_id»", «$g/@x», «$g/@y»],
edouard@2941:         }
edouard@2941:     }
edouard@2941:     | }
edouard@2941: }
edouard@2941: 
usveticic@3010: template "widget[@type='Keypad']", mode="widget_class"
usveticic@3010:     ||
usveticic@3010:     class KeypadWidget extends Widget{
usveticic@3010:          moving = undefined;
usveticic@3045:          click = undefined;
usveticic@3010:          offset = undefined;
usveticic@3010: 
usveticic@3010:          on_position_click(evt) {
usveticic@3010:              this.moving = true;
usveticic@3045: 
usveticic@3045:              // chatch window events
usveticic@3045:              window.addEventListener("touchmove", this.bound_on_drag, true);
usveticic@3045:              window.addEventListener("mousemove", this.bound_on_drag, true);
usveticic@3045: 
usveticic@3045:              window.addEventListener("mouseup", this.bound_on_release, true)
usveticic@3045:              window.addEventListener("touchend", this.bound_on_release, true);
usveticic@3045:              window.addEventListener("touchcancel", this.bound_on_release, true);
usveticic@3010: 
usveticic@3010:              // get click position offset from widget x,y and save it to variable
usveticic@3010:              var keypad_borders = this.position_elt.getBoundingClientRect();
usveticic@3010:              var clickX = undefined;
usveticic@3010:              var clickY = undefined;
usveticic@3010:              if (evt.type == "touchstart"){
usveticic@3010:                  clickX = Math.ceil(evt.touches[0].clientX);
usveticic@3010:                  clickY = Math.ceil(evt.touches[0].clientY);
usveticic@3010:              }
usveticic@3010:              else{
usveticic@3010:                  clickX = evt.pageX;
usveticic@3010:                  clickY = evt.pageY;
usveticic@3010:              }
usveticic@3010:              this.offset=[clickX-keypad_borders.left,clickY-keypad_borders.top]
usveticic@3010:          }
usveticic@3010: 
usveticic@3045:          on_release(evt) {
usveticic@3045:             //relase binds
usveticic@3045:             window.removeEventListener("touchmove", this.bound_on_drag, true);
usveticic@3045:             window.removeEventListener("mousemove", this.bound_on_drag, true);
usveticic@3045: 
usveticic@3045:             window.removeEventListener("mouseup", this.bound_on_release, true)
usveticic@3045:             window.removeEventListener("touchend", this.bound_on_release, true);
usveticic@3045:             window.removeEventListener("touchcancel", this.bound_on_release, true);
usveticic@3045: 
usveticic@3010:             if(this.moving)
usveticic@3010:                 this.moving = false;
usveticic@3010:          }
usveticic@3010: 
usveticic@3045:          on_drag(evt) {
usveticic@3045:              if(this.moving)
usveticic@3045:                 //get mouse coordinates
usveticic@3045:                 var clickX = undefined;
usveticic@3045:                 var clickY = undefined;
usveticic@3045:                 if (evt.type == "touchmove"){
usveticic@3045:                     clickX = Math.ceil(evt.touches[0].clientX);
usveticic@3045:                     clickY = Math.ceil(evt.touches[0].clientY);
usveticic@3045:                 }
usveticic@3045:                 else{
usveticic@3045:                     clickX = evt.pageX;
usveticic@3045:                     clickY = evt.pageY;
usveticic@3045:                 }
usveticic@3045:                 this.click = [clickX,clickY]
usveticic@3045: 
usveticic@3045:                 //requeset redraw
usveticic@3045:                 this.request_animate();
usveticic@3045:          }
usveticic@3045: 
usveticic@3045:          animate(){
usveticic@3045:             //get keyboard pos in html
usveticic@3045:             let [eltid, tmpgrp] = current_modal;
usveticic@3045:             let [xcoord,ycoord] = this.coordinates;
usveticic@3045:             let [clickX,clickY] = this.click;
usveticic@3045:             let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox;
usveticic@3045: 
usveticic@3045:             //translate keyboard position
usveticic@3045:             let mouseX = ((clickX-this.offset[0])/window.innerWidth)*svgWidth;
usveticic@3045:             let mouseY = ((clickY-this.offset[1])/window.innerHeight)*svgHeight;
usveticic@3045:             tmpgrp.setAttribute("transform","translate("+String(xdest-xcoord+mouseX)+","+String(ydest-ycoord+mouseY)+")");
usveticic@3010:          }
usveticic@3010: 
usveticic@3010:          on_key_click(symbols) {
usveticic@3010:              var syms = symbols.split(" ");
usveticic@3010:              this.shift |= this.caps;
usveticic@3010:              this.editstr += syms[this.shift?syms.length-1:0];
usveticic@3010:              this.shift = false;
usveticic@3010:              this.update();
usveticic@3010:          }
usveticic@3010: 
usveticic@3010:          on_Esc_click() {
usveticic@3010:              end_modal.call(this);
usveticic@3010:          }
usveticic@3010: 
usveticic@3010:          on_Enter_click() {
Edouard@3033:              let coercedval = (typeof this.initial) == "number" ? Number(this.editstr) : this.editstr;
Edouard@3042:              if(typeof coercedval == 'number' && isNaN(coercedval)){
Edouard@3042:                  // revert to initial so it explicitely shows input was ignored
Edouard@3033:                  this.editstr = String(this.initial);
Edouard@3033:                  this.update();
Edouard@3042:              } else { 
Edouard@3033:                  let callback_obj = this.result_callback_obj;
Edouard@3033:                  end_modal.call(this);
Edouard@3033:                  callback_obj.edit_callback(coercedval);
Edouard@3033:              }
usveticic@3010:          }
usveticic@3010: 
usveticic@3010:          on_BackSpace_click() {
usveticic@3010:              this.editstr = this.editstr.slice(0,this.editstr.length-1);
usveticic@3010:              this.update();
usveticic@3010:          }
usveticic@3010: 
usveticic@3010:          on_Sign_click() {
usveticic@3010:              if(this.editstr[0] == "-")
usveticic@3010:                  this.editstr = this.editstr.slice(1,this.editstr.length);
usveticic@3010:              else
usveticic@3010:                  this.editstr = "-" + this.editstr;
usveticic@3010:              this.update();
usveticic@3010:          }
usveticic@3010: 
usveticic@3010:          on_NumDot_click() {
usveticic@3010:              if(this.editstr.indexOf(".") == "-1"){
usveticic@3010:                  this.editstr += ".";
usveticic@3010:                  this.update();
usveticic@3010:              }
usveticic@3010:          }
usveticic@3010: 
usveticic@3010:          on_Space_click() {
usveticic@3010:              this.editstr += " ";
usveticic@3010:              this.update();
usveticic@3010:          }
usveticic@3010: 
usveticic@3010:          caps = false;
usveticic@3010:          _caps = undefined;
usveticic@3010:          on_CapsLock_click() {
usveticic@3010:              this.caps = !this.caps;
usveticic@3010:              this.update();
usveticic@3010:          }
usveticic@3010: 
usveticic@3010:          shift = false;
usveticic@3010:          _shift = undefined;
usveticic@3010:          on_Shift_click() {
usveticic@3010:              this.shift = !this.shift;
usveticic@3010:              this.caps = false;
usveticic@3010:              this.update();
usveticic@3010:          }
usveticic@3010:          editstr = "";
usveticic@3010:          _editstr = undefined;
usveticic@3010:          result_callback_obj = undefined;
usveticic@3010:          start_edit(info, valuetype, callback_obj, initial,size) {
usveticic@3010:              show_modal.call(this,size);
Edouard@3033:              this.editstr = String(initial);
usveticic@3010:              this.result_callback_obj = callback_obj;
usveticic@3010:              this.Info_elt.textContent = info;
usveticic@3010:              this.shift = false;
usveticic@3010:              this.caps = false;
Edouard@3033:              this.initial = initial;
Edouard@3033: 
usveticic@3010:              this.update();
usveticic@3010:          }
usveticic@3010: 
usveticic@3010:          update() {
usveticic@3010:              if(this.editstr != this._editstr){
usveticic@3010:                  this._editstr = this.editstr;
usveticic@3010:                  this.Value_elt.textContent = this.editstr;
usveticic@3010:              }
edouard@3102:              if(this.Shift_sub && this.shift != this._shift){
usveticic@3010:                  this._shift = this.shift;
usveticic@3010:                  (this.shift?widget_active_activable:widget_inactive_activable)(this.Shift_sub);
usveticic@3010:              }
edouard@3102:              if(this.CapsLock_sub && this.caps != this._caps){
usveticic@3010:                  this._caps = this.caps;
usveticic@3010:                  (this.caps?widget_active_activable:widget_inactive_activable)(this.CapsLock_sub);
usveticic@3010:              }
usveticic@3010:          }
usveticic@3010:     }
usveticic@3010:     ||
usveticic@3010: 
Edouard@2908: template "widget[@type='Keypad']", mode="widget_defs" {
Edouard@2917:     param "hmi_element";
Edouard@2917:     labels("Esc Enter BackSpace Keys Info Value");
usveticic@3010:     optional_labels("Sign Space NumDot position");
edouard@2920:     activable_labels("CapsLock Shift");
Edouard@2911:     |     init: function() {
Edouard@2917:     foreach "$hmi_element/*[@inkscape:label = 'Keys']/*" {
Edouard@2917:     |         id("«@id»").setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_key_click('«func:escape_quotes(@inkscape:label)»')");
Edouard@2917:     }
edouard@2920:     foreach "str:split('Esc Enter BackSpace Sign Space NumDot CapsLock Shift')" {
Edouard@2917:     |         if(this.«.»_elt)
Edouard@2917:     |             this.«.»_elt.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_«.»_click()");
Edouard@2917:     }
usveticic@3010:     |         if(this.position_elt){
usveticic@3045:     |            this.bound_on_release = this.on_release.bind(this);
usveticic@3045:     |            this.bound_on_drag = this.on_drag.bind(this);
usveticic@3045:     |
usveticic@3010:     |            this.position_elt.setAttribute("onmousedown", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)");
usveticic@3010:     |            this.position_elt.setAttribute("ontouchstart", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)");
usveticic@3010:     |        }
Edouard@2917:     |     },
usveticic@3010:     |
Edouard@2917:     const "g", "$geometry[@Id = $hmi_element/@id]"; 
Edouard@2917:     |     coordinates: [«$g/@x», «$g/@y»],
Edouard@2908: }