--- a/svghmi/widget_keypad.ysl2 Wed Aug 05 15:04:53 2020 +0200
+++ b/svghmi/widget_keypad.ysl2 Wed Aug 05 15:13:59 2020 +0200
@@ -13,10 +13,159 @@
| }
}
+template "widget[@type='Keypad']", mode="widget_class"
+ ||
+ class KeypadWidget extends Widget{
+ moving = undefined;
+ enTimer = undefined;
+ offset = undefined;
+
+ on_position_click(evt) {
+ this.moving = true;
+ this.enTimer = true;
+
+ // get click position offset from widget x,y and save it to variable
+ var keypad_borders = this.position_elt.getBoundingClientRect();
+ var clickX = undefined;
+ var clickY = undefined;
+ if (evt.type == "touchstart"){
+ clickX = Math.ceil(evt.touches[0].clientX);
+ clickY = Math.ceil(evt.touches[0].clientY);
+ }
+ else{
+ clickX = evt.pageX;
+ clickY = evt.pageY;
+ }
+ this.offset=[clickX-keypad_borders.left,clickY-keypad_borders.top]
+ }
+
+ off_position_click(evt) {
+ if(this.moving)
+ this.moving = false;
+ }
+
+ on_move(evt) {
+ if(this.moving && this.enTimer){
+ //get keyboard pos in html
+ let [eltid, tmpgrp] = current_modal;
+ let [xcoord,ycoord] = this.coordinates;
+ let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox;
+
+ //get mouse coordinates
+ var clickX = undefined;
+ var clickY = undefined;
+ if (evt.type == "touchmove"){
+ clickX = Math.ceil(evt.touches[0].clientX);
+ clickY = Math.ceil(evt.touches[0].clientY);
+ }
+ else{
+ clickX = evt.pageX;
+ clickY = evt.pageY;
+ }
+
+ //translate keyboard position
+ let mouseX = ((clickX-this.offset[0])/window.innerWidth)*svgWidth;
+ let mouseY = ((clickY-this.offset[1])/window.innerHeight)*svgHeight;
+ tmpgrp.setAttribute("transform","translate("+String(xdest-xcoord+mouseX)+","+String(ydest-ycoord+mouseY)+")");
+
+ //reset timer
+ this.enTimer = false;
+ setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
+ }
+
+ }
+
+ on_key_click(symbols) {
+ var syms = symbols.split(" ");
+ this.shift |= this.caps;
+ this.editstr += syms[this.shift?syms.length-1:0];
+ this.shift = false;
+ this.update();
+ }
+
+ on_Esc_click() {
+ end_modal.call(this);
+ }
+
+ on_Enter_click() {
+ end_modal.call(this);
+ let callback_obj = this.result_callback_obj;
+ callback_obj.edit_callback(this.editstr);
+ }
+
+ on_BackSpace_click() {
+ this.editstr = this.editstr.slice(0,this.editstr.length-1);
+ this.update();
+ }
+
+ on_Sign_click() {
+ if(this.editstr[0] == "-")
+ this.editstr = this.editstr.slice(1,this.editstr.length);
+ else
+ this.editstr = "-" + this.editstr;
+ this.update();
+ }
+
+ on_NumDot_click() {
+ if(this.editstr.indexOf(".") == "-1"){
+ this.editstr += ".";
+ this.update();
+ }
+ }
+
+ on_Space_click() {
+ this.editstr += " ";
+ this.update();
+ }
+
+ caps = false;
+ _caps = undefined;
+ on_CapsLock_click() {
+ this.caps = !this.caps;
+ this.update();
+ }
+
+ shift = false;
+ _shift = undefined;
+ on_Shift_click() {
+ this.shift = !this.shift;
+ this.caps = false;
+ this.update();
+ }
+ editstr = "";
+ _editstr = undefined;
+ result_callback_obj = undefined;
+ start_edit(info, valuetype, callback_obj, initial,size) {
+ show_modal.call(this,size);
+ this.editstr = initial;
+ this.result_callback_obj = callback_obj;
+ this.Info_elt.textContent = info;
+ this.shift = false;
+ this.caps = false;
+ this.update();
+ }
+
+ update() {
+ if(this.editstr != this._editstr){
+ this._editstr = this.editstr;
+ this.Value_elt.textContent = this.editstr;
+ }
+ if(this.shift != this._shift){
+ this._shift = this.shift;
+ (this.shift?widget_active_activable:widget_inactive_activable)(this.Shift_sub);
+ }
+ if(this.caps != this._caps){
+ this._caps = this.caps;
+ (this.caps?widget_active_activable:widget_inactive_activable)(this.CapsLock_sub);
+ }
+ }
+ }
+ ||
+
template "widget[@type='Keypad']", mode="widget_defs" {
param "hmi_element";
labels("Esc Enter BackSpace Keys Info Value");
- optional_labels("Sign Space NumDot");
+ optional_labels("Sign Space NumDot position");
activable_labels("CapsLock Shift");
| init: function() {
foreach "$hmi_element/*[@inkscape:label = 'Keys']/*" {
@@ -26,82 +175,19 @@
| if(this.«.»_elt)
| this.«.»_elt.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_«.»_click()");
}
+ | if(this.position_elt){
+ | this.position_elt.setAttribute("onmousedown", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)");
+ | this.position_elt.setAttribute("ontouchstart", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)");
+
+ | window.addEventListener("mouseup", hmi_widgets[this.element_id].off_position_click.bind(this));
+ | window.addEventListener("touchend", hmi_widgets[this.element_id].off_position_click.bind(this));
+ | window.addEventListener("touchcancel", hmi_widgets[this.element_id].off_position_click.bind(this));
+
+ | window.addEventListener("mousemove", hmi_widgets[this.element_id].on_move.bind(this));
+ | window.addEventListener("touchmove", hmi_widgets[this.element_id].on_move.bind(this));
+ | }
| },
- | on_key_click: function(symbols) {
- | var syms = symbols.split(" ");
- | this.shift |= this.caps;
- | this.editstr += syms[this.shift?syms.length-1:0];
- | this.shift = false;
- | this.update();
- | },
- | on_Esc_click: function() {
- | end_modal.call(this);
- | },
- | on_Enter_click: function() {
- | end_modal.call(this);
- | callback_obj = this.result_callback_obj;
- | callback_obj.edit_callback(this.editstr);
- | },
- | on_BackSpace_click: function() {
- | this.editstr = this.editstr.slice(0,this.editstr.length-1);
- | this.update();
- | },
- | on_Sign_click: function() {
- | if(this.editstr[0] == "-")
- | this.editstr = this.editstr.slice(1,this.editstr.length);
- | else
- | this.editstr = "-" + this.editstr;
- | this.update();
- | },
- | on_NumDot_click: function() {
- | if(this.editstr.indexOf(".") == "-1"){
- | this.editstr += ".";
- | this.update();
- | }
- | },
- | on_Space_click: function() {
- | this.editstr += " ";
- | this.update();
- | },
- | caps: false,
- | _caps: undefined,
- | on_CapsLock_click: function() {
- | this.caps = !this.caps;
- | this.update();
- | },
- | shift: false,
- | _shift: undefined,
- | on_Shift_click: function() {
- | this.shift = !this.shift;
- | this.caps = false;
- | this.update();
- | },
+ |
const "g", "$geometry[@Id = $hmi_element/@id]";
| coordinates: [«$g/@x», «$g/@y»],
- | editstr: "",
- | _editstr: undefined,
- | result_callback_obj: undefined,
- | start_edit: function(info, valuetype, callback_obj, initial) {
- | show_modal.call(this);
- | this.editstr = initial;
- | this.result_callback_obj = callback_obj;
- | this.Info_elt.textContent = info;
- | this.shift = false;
- | this.caps = false;
- | this.update();
- | },
- | update: function() {
- | if(this.editstr != this._editstr){
- | this._editstr = this.editstr;
- | this.Value_elt.textContent = this.editstr;
- | }
- | if(this.shift != this._shift){
- | this._shift = this.shift;
- | (this.shift?widget_active_activable:widget_inactive_activable)(this.Shift_sub);
- | }
- | if(this.caps != this._caps){
- | this._caps = this.caps;
- | (this.caps?widget_active_activable:widget_inactive_activable)(this.CapsLock_sub);
- | }
- | },
}