TC3 HMI: Javascript

[XMG]

Zuviel Werbung?
-> Hier kostenlos registrieren

Hallo zusammen,

ich arbeite mich gerade in Javascript ein, um die doch recht beschränkte Funktionalität von TC3 HMI zu erweitern.
Leider wrapt Beckhoff die Standard-Klassen wie zB das Input in eigene Klassen.
Das heißt ich scheitere schon an einfachen Aufgaben wie dem Setzen des Fokus auf ein Input.

Normalerweise müsste das in Jvascript so funktioneren:

[COLOR=#0000ff]var[/COLOR] input = document.getElementById([COLOR=#a0522d]"Textbox_ProductionOrder"[/COLOR]);
input.focus();

Wenn ich das ausführe passiert aber leider nicht viel. Das liegt wohl daran, dass ich mit der ID nicht direkt auf das Input komme, sondern auf die Beckhoff-Klasse der Textbox.

Kann mir da jemand weiterhelfen und gibt es da bestenfalls vielleicht noch weiterführende Literatur zu?

Vielen Dank und beste Grüße!

 

[zuse]

var Textbox = TcHmi.Controls.get("Textbox_ProductionOrder");
var jQueryElem = Textbox.getElement();
var inputOrTextbox = jQueryElem.find('.tchmi-textbox-template-input');
inputOrTextbox.focus();

Dies sollte funktionieren.

Dokumentation von getElement:
https://infosys.beckhoff.com/conten.../9007203456751499.html?id=3812635596454307026

 

[PatrickSt]

Zuviel Werbung?
-> Hier kostenlos registrieren

Ich habe dasselbe Problem wie XMG, für die Textbox funktioniert die Lösung von zuse auch wunderbar. Aber wie mache ich es bei einem NumericInput?

in der Ersten Zeile tausche ich den Namen aus, soweit klar.
die zweite Zeile scheint auch noch zu funktioieren, aber was muss ich in der dritten Zeile eingeben?

 

[zuse]

Bitte nutze die DevTools um die DOM Struktur der Elemente zu lernen.
TcHmi_Controls_Beckhoff_TcHmiNumericInput-template-input
heisst die Klasse vom input element des numeric controls. Damit kannst du es über den Klassen-Selektor (Punkt davor) per jQuery finden:
jQueryElem.find('.TcHmi_Controls_Beckhoff_TcHmiNumericInput-template-input')

 

[PatrickSt]

Vielen Dank für deine Hilfe. Das hat soweit funktioniert. Ich habe das aber jetz noch mal mit der Textbox verglichen. Hier habe ich in den Dev-Tools ja folgenden Eintrag:

<input class="TcHmi_Controls_Beckhoff_TcHmiTextbox-template-input tchmi-textbox-template-input" spellcheck="false" wrap="off" style="padding: 3px;" data-tchmi-input-mode="text">

Und beim Num-Input:

<input class="TcHmi_Controls_Beckhoff_TcHmiNumericInput-template-input tchmi-box" inputmode="text" spellcheck="false" style="padding: 3px; color: rgb(0, 70, 140); font-size: 24px;" data-tchmi-input-mode="decimal">

Bei der Textbox hast du ja folgendes als Lösung vorgeschlagen:

jQueryElem.find('.tchmi-textbox-template-input')

Also den Teil nach dem Leerzeichen beim Klassenname

Beim Num-Input allerdings den Teil vor dem Leerzeichen

jQueryElem.find('.TcHmi_Controls_Beckhoff_TcHmiNumericInput-template-input')

Ich hab jetzt mal noch ein bisschen herumgespielt und das hier funktioniert auch.

jQueryElem.find('.tchmi-box')[1]

Ich kann also auch hier den Teil nach dem Leerzeichen nehmen, bekomme dann aber ein Array, in dem ich noch den Index [1] auswählen muss.

Geht da also grundsätzlich immer beides, oder ist das jetzt Zufall bei den beiden Klassen?

 

[zuse]

Zuviel Werbung?
-> Hier kostenlos registrieren

Jedes Element kann beliebig vielen (CSS-) Klassen angehören. Diese werden im DOM mit Leerzeichen getrennt.
Das Element
<input class="TcHmi_Controls_Beckhoff_TcHmiNumericInput-template-input tchmi-box"
ist also von den beiden Klassen
TcHmi_Controls_Beckhoff_TcHmiNumericInput-template-input
und
tchmi-box
Letzteres ist eine sehr generische Klasse (die eine Unschönheit von CSS wegbügelt) und daher sehr oft genutzt wird. Daher findest du mehr als ein Treffer wenn du nur nach dieser Klasse suchst.
Daher solltest du immer die spezifischste Klasse nutzen, wovon es dann hoffentlich nur ein Element in diesem Control gibt.
Sonst gibt es in einer zukünftigen tchmi Version dann noch mehr elemente mit tchmi-box und du nutzt versehendlich das falsche.

In meiner Applikation mit 135 Controls hab ich beispielsweise 399 Element mit tchmi-box.

Ach ja:
TcHmi_Controls_Beckhoff_TcHmiTextbox-template-input ist der Klassename für die Namespaces die in 1.12 neu waren.
tchmi-textbox-template-input ist der Klassenname der aus der 1.8 / 1.10er Welt kommt.
Alte Controls haben daher beides, damit Kunden Code der den alten Namen verwendet auch weiter funktioniert.
NumericInput ist neu in 1.12 hat daher den alten Namen nicht mehr.

 

[PatrickSt]

Vielen Dank für die Klarstellung