Sonstiges Beckhoff TE2000 HMI Keyboard einblenden

H

hsxhf

Level-2
Beiträge
24
Reaktionspunkte
2
Zuviel Werbung?
-> Hier kostenlos registrieren
Hallo,

ich möchte gerne innerhalb meiner HMI die Keyboardbox entweder automatisch bei einem Textfeld mit Eingabemöglickeit aufrufen lassen,
oder über einem Button aktivieren / ausblenden. Dabei sollte die Tastatur verschiebbar sein da Eingabetextfelder sich auf verschiedenen Positionen verteilt befinden.
Für jegliche Tipps oder Beispiele wäre ich sehr dankbar.

Gruß hsxhf
 
Hi, ich hab dir hier mal ein Beispiel, es ist nicht perfekt und etwas umständlich aber von der Performance her gesehen die beste Variante, funktioniert mit Maus und Touch.

Aber du kannst so die Tastatur auf jedem Tastenklick verschieben, was etwas nervt, besser ist es die Tastatur in ein Container zu stecken und das verschieben nur an einer bestimmten Stelle zu zulassen, soll ja nur ein schnelles Beispiel sein.

Diesen Code in eine normale JS Funktion packen, diese rufst du beim Desktop onAttached Event auf.


let tastatur = document.querySelector('#TcHmiKeyboard');


// Tastatur einblenden bei Input Click
let inputControls = document.querySelectorAll(`[data-tchmi-type="tchmi-textbox"]`);


for (let control of inputControls) {
control.addEventListener("click", e => {
if (tastatur.style.display === 'none') {
tastatur.style.display = 'block';
}
});
}




// Tastatur verschiebbar machen
tastatur.style.transform = `translate(0px, 0px)`;


let x, y, t;


function mousemove(e) {
if (e.buttons === 0) {
window.removeEventListener("mousemove", mousemove);
} else {
tastatur.style.transform = `translate(${e.clientX - x}px, ${e.clientY - y}px)`;
}
}


tastatur.addEventListener("mousedown", e => {
t = tastatur.style.transform.replace(/[^0-9\-.,]/g, '').split(',');
if (e.button === 0) {
x = e.clientX - t[0];
y = e.clientY - t[1];
window.addEventListener("mousemove", mousemove);
}
});


function touchmove(e) {
tastatur.style.transform = `translate(${e.changedTouches[0].clientX - x}px, ${e.changedTouches[0].clientY - y}px)`;
e.stopPropagation();
}


tastatur.addEventListener("touchstart", e => {
t = tastatur.style.transform.replace(/[^0-9\-.,]/g, '').split(',');
x = e.changedTouches[0].clientX - t[0];
y = e.changedTouches[0].clientY - t[1];
window.addEventListener("touchmove", touchmove);
e.stopPropagation();
});


tastatur.addEventListener("touchend", e => {
window.removeEventListener("touchmove", touchmove);
e.stopPropagation();
});
 
Zuviel Werbung?
-> Hier kostenlos registrieren
Hallo,
nun ich habe zwar "noch" keine Java Script Kenntnisse aber schon verstanden was der Code bewirkt.
So, ich habe auf meiner *.view Startseite unter Framework.onAttached -> General -> Javascript -> Edit Source Code zugefügt und
diesen Code eingefügt. Funktioniert aber nicht. Beim Versuch bei einer Textbox was einzugeben erscheint kein Keyboard.
Ich denke ich habe da grundlegend was noch nicht kapiert :confused:.
 
Du fügst deinem Projekt ein neues Element hinzu, eine JS Funktion, und dort rein kommt dieser Code.

Und beim onAttached Event führst du kein Javascript aus sondern wählst unter Functions -> Others die erstellte Funktion aus.
 
Sauberer wäre statt

Code: 
[COLOR=#333333]let tastatur = document.querySelector('#TcHmiKeyboard');[/COLOR]

Dieses hier:

Code: 
[COLOR=#333333]let tastaturCtrl = TcHmi.Controls.get('TcHmiKeyboard');
[/COLOR]if([COLOR=#333333]tastaturCtrl){
[/COLOR]                        // One of those[COLOR=#333333]
[/COLOR]                        tastaturCtrl.setVisibility('Visible');
                        tastaturCtrl.setVisibility('Collapsed');
                        // if you really want to manipulate the object itself:
                        // [COLOR=#333333]getElement is an jQuery object, so we need to select the first/only HTMLElement[/COLOR]
                        [COLOR=#333333]tastaturCtrl.getElement()[0].style ...
[/COLOR]                        [COLOR=#333333]tastaturCtrl.getElement()[0].[/COLOR][COLOR=#333333]addEventListener [/COLOR][COLOR=#333333]...[/COLOR]
}
 
Zurück
Oben