HMI Server HTML5 / JavaScript

[bstr]

Zuviel Werbung?
-> Hier kostenlos registrieren

Server-Mappings und alle anderen Symboltypen (Control-Attribute, interne Symbole und so weiter) können über TcHmi.Symbol.read(ex) und TcHmi.Symbol.write(ex) gelesen/beschrieben werden:
https://infosys.beckhoff.com/index....eering/3728959755.html&id=2364060191823526788

Alle anderen Server-Symbole (z.B: Infrastrukturinformationen die im Server noch so vorliegen) können u.A. über die Server-API gelesen und beschrieben werden (TcHmi.Server.writeSymbol / TcHmi.Server.readSymbol):
https://infosys.beckhoff.com/index....eering/3728927499.html&id=4004683655817344673

In den Doku-Links sind jeweils auch Beispiele.

 

[mkersch]

Vielen Dank für die Info

test = TcHmi.Symbol.readEx('%s%PLC1.GVL.zaehler%/s%')
TcHmi.Symbol.writeEx('%s%PLC1.GVL.status%/s%', i, null);

Jetzt kann ich von JavaScript aus PLC Variablen lesen und schreiben.

Leider habe ich noch das Problem, das ich für jede Variable noch jeweils ein Control mit creat date binding zu den Variablen benötige.

Wenn ich dies nicht mache kommt folgender Fehler.

TcHmi.js:2 Uncaught Error: Symbol with expression {%s%PLC1.GVL.zaehler%/s%} does not exist!
at b.read (TcHmi.js:2)
at Function.b.readEx (TcHmi.js:2)
at DrawChart.js:76
b.read @ TcHmi.js:2
b.readEx @ TcHmi.js:2
(anonymous) @ DrawChart.js:76

mfg

mkersch

 

[bstr]

Zuviel Werbung?
-> Hier kostenlos registrieren

Probier mal anstelle von TcHmi.Symbol.writeEx mal TcHmi.Server.writeSymbol. Das sollte gehen.

Symbolname ist der gleiche, nur ohne %s% davor und am Ende. Beispiel hier: https://infosys.beckhoff.com/index....neering/3728947467.html&id=680722241250694526

 

[mkersch]

Programm läuft !

D.h. mit einem JavaScript Programm und der LIB Chart.js kann ich Grafiken verschiedenster Art in der Beckhoff HMI anzeigen.
Die benötigten Daten (PLC) hole bzw. schreibe ich direkt aus dem JavaScript-Programm.

Nur mithilfe der Unterstützung, durch dieses Forum, konnte ich dies umsetzen.


Vielen Dank für Eure Unterstützung.

if (TcHmi.Server.isWebsocketReady()) {
TcHmi.Server.readSymbol('PLC1.GVL.zaehler', function (data) {
if (data.error !== TcHmi.Errors.NONE) {
// Handle TcHmi.Server class level error here.
return;
}
var response = data.response;
if (response.error !== undefined) {
// Handle TwinCAT HMI Server response level error here.
return;
}
var commands = response.commands;
if (commands === undefined) {
return;
}
var command = response.commands[0];
if (command === undefined) {
return;
}
if (command.error !== undefined) {
// Handle TwinCAT HMI Server command level error here.
return;
}
// Handle result...
//TcHmi.Log.debug('PLC1.GVL.zaehler=' + command.readValue);
test = command.readValue;
});
}
if (TcHmi.Server.isWebsocketReady()) {
TcHmi.Server.writeSymbol('PLC1.GVL.status', i, function (data) {
if (data.error !== TcHmi.Errors.NONE) {
// Handle TcHmi.Server class level error here.
return;
}
var response = data.response;
if (response.error !== undefined) {
// Handle TwinCAT HMI Server response level error here.
return;
}
var commands = response.commands;
if (commands === undefined) {
return;
}
var command = response.commands[0];
if (command === undefined) {
return;
}
if (command.error !== undefined) {
// Handle TwinCAT HMI Server command level error here.
return;
}
// Handle result...
//TcHmi.Log.debug('PLC1.MAIN.bTest=' + command.readValue);
});
}

mfg.

mkersch

 

[slaud]

Mein nächstes Ziel wird es sein eine schöne Alarmliste zu Zaubern,.....
Denke ich werde Ein Stringliste mit ErrorID ind der Steuerung erstellen und dann versuchen den Richtigen eintrag in der Sprachenliste Anzuzeigen oder habt ihr bessere Idden

 

[slaud]

Zuviel Werbung?
-> Hier kostenlos registrieren

Hat jemand schon herausgefunden wie man den sqlitelogger verwenden kann?

 

[r.gerbers]

Das Design des Standard Themes sowie die Palette an Controls gefällt mir bisher noch nicht so gut. Hat jemand schon versucht bestehende HTML5 Open Source Templates für die Beckhoff HMI anzupassen oder weitere Controls z.B OpenUi5 implementiert?

 

[doelckenbeck]

Hallo,
ich arbeite seit einiger Zeit mit TwinCat3 Hmi und habe auch noch ein paar Fragen. Die Beschreibung auf der Beckhoff Seite ist ja nicht sehr ausführlich.

Für den Anfang würde ich gerne wissen, ob man in der TwinCat hmi Configuration eigene Datentypen bzw. Strukturen anlegen kann? Ich möchte lediglich eine interne Variable vom Typ einer eigenen Struktur verwenden.

 

[bstr]

Zuviel Werbung?
-> Hier kostenlos registrieren

Es gibt eine Datei "tchmi.project.schema.tpl.json" im Hauptverzeichnis des Projektes, darin liegen die Schemas für die Projektdatentypen. Standardmäßig ist sie leer.
Neue Datentypen kann man darin anlegen. Aktuell muß man sie von Hand beschreiben.
Die Beschreibung folgt der JSON-Schema-Spezifikation.

Wie so ein Schema irgendeines vorhandenen Typs aufgebaut ist, kann man sehen oder indem man bei den Datentypen im Config-Window mit der rechten Maustaste auf "Show Datatype Schema" o.Ä. klickt.

Hier ein Beispiel für eine tchmi.project.schema.tpl.json-Datei mit einer Struktur "meintyp" mit drei Unterelementen member1,member2,member3:

{
"$schema": "http://json-schema.org/draft-04/schema#",
"definitions": {
"meintyp": {
"properties": {
"member1": {
"$ref": "tchmi:general#/definitions/String"
},
"member2": {
"type": "boolean"
},
"member3": {
"type": "integer"
}
},
"type": "object"
}
}
}

 

[doelckenbeck]

Vielen Dank. Das hat schon mal geklappt.

Wie kann ich denn einen Member des Datentyps verwenden, beispielsweise als Text in einer Textbox? MyData.member1 funktioniert nicht. Irgendwie fehlt mir die Syntax.

 

[bstr]

Probier mal %i%MyData::member1%/i%
Wenn das nicht klappt, drück den fx-Button so dass er blau wird und probier %i%MyData%/i%.member1

 

[doelckenbeck]

Zuviel Werbung?
-> Hier kostenlos registrieren

Mein nächstes Ziel wird es sein eine schöne Alarmliste zu Zaubern,.....
Denke ich werde Ein Stringliste mit ErrorID ind der Steuerung erstellen und dann versuchen den Richtigen eintrag in der Sprachenliste Anzuzeigen oder habt ihr bessere Idden
Anhang anzeigen 38154

Eine Alarmliste steht bei mir auch noch an. Kann man dafür vielleicht die EventList aus der ToolBox verwenden?

 

[doelckenbeck]

Probier mal %i%MyData::member1%/i%
Wenn das nicht klappt, drück den fx-Button so dass er blau wird und probier %i%MyData%/i%.member1

Die Syntax ist richtig. Jetzt läufts. Danke.

 

[doelckenbeck]

Wie wäre dann die Syntax für ein Array, %i%MyArray::???%/i%?
Die Member des Datentyps haben einen Namen. Gebe ich [0] oder (0) stattdessen ein, funktionierts nicht.

 

[slaud]

Zuviel Werbung?
-> Hier kostenlos registrieren

Hat jemand schon herausgefunden wie man mit dem custom control arbeitet?

 

[olivertt82]

Hallo slaud,
meinst du mit "Custom Control" ein UserControl oder ein Framework Control (eigenes Projekt unter HMI Extensibility)?
Grüße,
Oliver

 

[slaud]

Framework control, aber ist für mich nicht ganz einfach, und eine schöne user manual lässt auch noch auf sich warten

 

[olivertt82]

Zuviel Werbung?
-> Hier kostenlos registrieren

Hallo slaud,

ich habe bereits schon mal ein bisschen damit rum gespielt.
In der Description.json definierst du Dein Control, z.B. Abhängigkeiten, Standardgröße und auch all die Attribute die Du Deinem Control geben möchtest.
Bei den Attributen musst Du immer einen Getter und einen Setter definieren, welcher nachher in der Source.js ausprogrammiert werden muss.
Das Beispiel mit dem Kreis der zwischen den beiden Farben wechselt ist zwar simpel zeigt aber eigentlich das was Du brauchst.
Im previnit Bereich in der Source.js holst Du Dir die Referenzen auf die HMTL Elemente die Du in der Template.html anlegst.
In der Template.html definierst Du also die Struktur und den Aufbau. In der Source.js manipulierst Du Elemente (Größe, Farbe, etc.)
Willst Du ein interaktives Control bauen musst Du Dir noch Deine Eventhandler deklarieren, dass solltest Du im attach Bereich machen, weil dort das Control erst wirklich sicht und nutzbar ist.

Falls Du weitere Details brauchst, lass es mich wissen.

Viele Grüße,
Oliver

 

[Matti_Tc]

Hallo Zusammen,

ich habe auch eine Frage hierzu. Ich arbeite gerade ebenfalls mit dem neuen HMI Projekt von TwinCAT 3. Es gelingt mir ohne Weiteres Variablen von PLC-Modulen
in die Oberflächen einzubinden, jedoch habe ich so meine Probleme mit den C++ Modulen. Die Variablen des PLC Moduls werden im TwinCAT HMI Configuration Window richtig angezeigt, sobald der ADS-Port 851 initialisiert wurde. Die ADS-Konfiguration steht hierbei ja in der ADS.Config.Default.json (IPADR : 127.0.0.1, NETID: 127.0.0.1.1.1, PORT: 851)...
Meine FRAGE ist nun: Welche Schritte muss ich ausführen um meine C++ Modulvariablen im HMI-Configuration Window zugreifbar zu machen. Anscheinend fehlt mir da ein bisschen das Verständnis, zum Einen wie ich via ADS die Variablen aus dem Modul bereitstelle, und wie ich den HMI-Server richtig darauf konfiguriere.

In der Dokumentation von Beckhoff wird dieser Fall nicht explizit vorgestellt, sondern nur wie man (was ja recht flott bei mir funktionierte) Data Bindings mit PLC Daten erstellt.
Ich bin noch etwas neu auf dem Gebiet deshalb bitte ich um etwas Nachsicht :wink:

Vielen Dank und Beste Grüße,

Matti

 

[Guga]

Da gibt es zwei Punkte:
#1: Variablen/Daten müssen in ADS als Symbole bekannt sein
https://infosys.beckhoff.com/content/1031/tc3_c/27021598195450507.html
#2: Der Port (die PLC hat per Definition die 851) musst du noch wissen bzw. in der HMI definieren. Ich glaube! das es die Port# der Task ist mit der du den C++ Projekt ausführst (also siehe Config der Task).
Ich persönlich würde mir ein Scope Projekt (Measurement) nehmen und das hiermit überprüfen (aber auch hier müssen eventuell Ports explizit freigegeben werden und man muss wissen wo man clickt).

Guga