Button, ToggleButton and slider updated. Error to warning when building
Button fixed so it doesn't release until it gets feedback from plc
Toggle button changed so it makes changes instantly. There was too big delay if we waited for feedback.
Slider added new features need some changes for final version.
// widget_keypad.ysl2
emit "declarations:keypad" {
|
| var keypads = {
foreach "$keypads_descs"{
const "keypad_id","@id";
foreach "arg"{
const "g", "$geometry[@Id = $keypad_id]";
| "«@value»":["«$keypad_id»", «$g/@x», «$g/@y»],
}
}
| }
}
template "widget[@type='Keypad']", mode="widget_class"
||
class KeypadWidget extends Widget{
moving = undefined;
click = undefined;
offset = undefined;
on_position_click(evt) {
this.moving = true;
// chatch window events
window.addEventListener("touchmove", this.bound_on_drag, true);
window.addEventListener("mousemove", this.bound_on_drag, true);
window.addEventListener("mouseup", this.bound_on_release, true)
window.addEventListener("touchend", this.bound_on_release, true);
window.addEventListener("touchcancel", this.bound_on_release, 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]
}
on_release(evt) {
//relase binds
window.removeEventListener("touchmove", this.bound_on_drag, true);
window.removeEventListener("mousemove", this.bound_on_drag, true);
window.removeEventListener("mouseup", this.bound_on_release, true)
window.removeEventListener("touchend", this.bound_on_release, true);
window.removeEventListener("touchcancel", this.bound_on_release, true);
if(this.moving)
this.moving = false;
}
on_drag(evt) {
if(this.moving)
//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;
}
this.click = [clickX,clickY]
//requeset redraw
this.request_animate();
}
animate(){
//get keyboard pos in html
let [eltid, tmpgrp] = current_modal;
let [xcoord,ycoord] = this.coordinates;
let [clickX,clickY] = this.click;
let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox;
//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)+")");
}
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 position");
activable_labels("CapsLock Shift");
| init: function() {
foreach "$hmi_element/*[@inkscape:label = 'Keys']/*" {
| id("«@id»").setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_key_click('«func:escape_quotes(@inkscape:label)»')");
}
foreach "str:split('Esc Enter BackSpace Sign Space NumDot CapsLock Shift')" {
| if(this.«.»_elt)
| this.«.»_elt.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_«.»_click()");
}
| if(this.position_elt){
| this.bound_on_release = this.on_release.bind(this);
| this.bound_on_drag = this.on_drag.bind(this);
|
| 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)");
| }
| },
|
const "g", "$geometry[@Id = $hmi_element/@id]";
| coordinates: [«$g/@x», «$g/@y»],
}