TwinCAT Webserver erklärt
Einführung
Mit dem JavaScript Zugriff auf ein TwinCAT System, kann eine eigene webbasierte Visualisierung erstellt werden. Es werden keine zusätzlichen Lizenzen benötigt. Die Installation besteht aus drei Schritten. Zuerst muss der IIS (Internet Information Service) von Windows installiert und konfiguriert werden, welcher als Webserver zur später die Visualisierung hostet. Danach muss ein Zugang zum ISS erstellt werden, sofern ein Zugriff von ausserhalb (Internet) erfolgen soll. Jetzt erst wird JavaScript programmiert, um aus TwinCAT die gewünschten Werte zu erhalten.
Schritt 1, IIS installieren
Alle nötigen Schritte hat Beckhoff im Infosys zusammengefasst. Es empfiehlt sich, die Anleitung ganz genau zu befolgen. Der IIS kann auch auf einem anderen Rechner als der SPS installiert und genutzt werden. Die Steuerung sollte jedoch sich im gleichen lokalen Netz befinden.
Win7:
http://infosys.beckhoff.com/content/1033/tcadswebservice/html/webservice_install_7.htm?id=17781
Win XP:
http://infosys.beckhoff.com/content/1033/tcadswebservice/html/webservice_install_xp.htm?id=17782
Win CE :
http://infosys.beckhoff.com/content/1033/tcadswebservice/html/webservice_install_ce.htm?id=17783
Sind die Tests gemäss Infosys erfolgreich verlaufen, kann zu Schritt 2 übergegangen werden.
Schritt 2, Netzwerkkonfiguration
Wer die Webvisu nur im lokalen Netz nutzen möchte, kann diesen Schritt überspringen. Soll die WebVisu übers Internet erreichbar sein, sind netzwerkseitig ein paar Überlegungen und Einstellungen nötig. Da die meisten wohl keine fixen IPs haben, muss ein dynamischer DNS (oft DynDNS oder DDNS genannt) her. Einige Router-Hersteller bieten diesen Service standardmässig an. (Weitere Infos zu DDNS gibt’s zuhauf bei Google) Danach muss ein Portforwarding auf dem Router aktiviert werden. Und zwar leitet der Router die Anfrage vom Internet (Welche ja an den Router gesendet wurde) an den Rechner/SPS mit den IIS weiter. Dazu wird eingehender Port geöffnet und an den lokalen Rechner an Port 80 weitergeleitet. Ab sofort ist der IIS aus dem Internet erreichbar! (Bitte denkt an die Sicherheit um den Zugriff zu kontrollieren!)
Schritt 3 – Erstellen der JavaScript und HTML Dateien
Hier soll zuerst auf die JavaScript Bibliothek von Beckhoff eingegangen werden. Dazu bitte die Demo-Datei herunterladen und das Programm laden. Danach werden wir hier Schritt für Schritt die Konfiguration durchgehen. (
Link Infosys)
Code:
[B]var NETID = ""; // Empty string for local machine;
var PORT = "801"; // TC2 PLC Runtime = 801, TC3 PLC Runtime = 851[/B]
Hier muss, falls der IIS nicht auf der SPS selbst läuft, die NetID der Steuerung eingetragen werden, sowie der korrekte Port.
Code:
[B]var SERVICE_URL = "http://localhost/TcAdsWebService/TcAdsWebService.dll"; // HTTP path to the TcAdsWebService;[/B]
Wichtig hier ist, dass die URL aus Sicht des Browsers (Also der Notebooks, Tablet, Smartphone etc) gesetzt werden muss. Entweder muss hier die lokale IP oder sogar die öffentliche IP, bzw den DynDNS Name eingetragen werden. (Wer eine bessere Lösung weiss, darf sich gerne melden!)
Code:
[B]var general_timeout = 500;
var readLoopDelay = 500;[/B]
Je nach Steuerung empfiehlt es sich, das general_timeout zu erhöhen. Read LoopDelay je nach Bedarf, 500ms ist übers Internet schon ziemlich schnell.
Code:
[B]var handlesVarNames = [
"MAIN.byteValue",[/B]
In diese Liste werden die gewünschten PLC-Variablen eingetragen. Globale Variablen benötigen einen führenden Punkt (wie in der Visu)
Code:
var [B]hByteValue[/B] = reader.readDWORD();
var [B]hWordValue[/B] = reader.readDWORD();
Hiermit werden die Handles erzeugt. Jede Variable die gelesen werden soll, braucht einen Handle.
Code:
// "MAIN.byteValue" // BYTE
readSymbolValuesWriter.writeDINT(TcAdsWebService.TcAdsReservedIndexGroups.SymbolValueByHandle); // IndexGroup
readSymbolValuesWriter.writeDINT([B]hByteValue[/B]); // IndexOffset = The target handle
readSymbolValuesWriter.writeDINT([B]1[/B]); // size to read
Diese Blöcke können nach belieben kopiert werden, es muss jedoch der korrekte Handle und die benötigte Anzahl Bytes eingetragen werden.
Code:
[B]26 + (8 * 4)[/B], // Length of requested data + 4 byte errorcode per variable;
Das hier ist wohl die schwierigste Zeile. Und zwar muss die Grösse der gewünschten Daten berechnet werden. Jede Variable hat unabhängig ihres Typs 4 Bytes Errorcode. Zusätzlich benötigt jede Variable ihrem Typ ensprechend Bytes. Boolsche Variablen benötigen ebenfalls ein Byte.
Beispiel: Eine Real Variabe: 4 Byte für den Real-Wert + 4 Byte Errorcode = 8 Byte, eine LREAL-Variable benötigt 12 Byte...
Code:
[I][COLOR=#a9a9a9]// "MAIN.realValue" // REAL
var realValue = reader.readREAL();[/COLOR][/I]
Besser:
[B]var rWindSpeed = parseFloat(reader.readREAL()).toFixed(2);
var rTideSpeed = parseFloat(reader.readREAL()).toFixed(1)[/B];
Danach werden die Werte ausgelesen. Ich empfehle, anstelle des Beckhoffvorschlags die Werte zu Floats zu parsen. Mit dem Befehl .toFixed(Komamstellen) kann die Anzahl gewünschter Kommastellen gewählt werden. Zudem liegt die Variable als Zahl und nicht als String vor. (z.B. für Berechnungen nötig)
Code:
[B]td_MoorNW[/B].innerHTML = rMoorNW;
[B]td_MoorNE[/B].innerHTML = rMoorNE;
Mit diesen Zeilen werden die Werte in die entsprechenden Tabellenzellen eingefügt.
Code:
<tr bgcolor=#CCCCCC>
<td>Mooring NW: [t]</td>
<td id="[B]td_MoorNW[/B]"></td> <- Hier wird der Wert angezeigt
</tr>
<tr bgcolor=#B8EDFF>
<td>Mooring NE: [t]</td>
<td id="[B]td_MoorNE[/B]"></td> <- Hier wird der Wert angezeigt
</tr>
Was dann im HTML-Teil entsprechend gekennzeichnet werden muss.
Code:
[I][B]Ganz am Anfang:[/B][/I]
Date.prototype.today = function(){
return ((this.getDate() < 10)?"0":"") + this.getDate() +"/"+(((this.getMonth()+1) < 10)?"0":"") + (this.getMonth()+1) +"/"+ this.getFullYear()
};
//For the time now
Date.prototype.timeNow = function(){
return ((this.getHours() < 10)?"0":"") + this.getHours() +":"+ ((this.getMinutes() < 10)?"0":"") + this.getMinutes() +":"+ ((this.getSeconds() < 10)?"0":"") + this.getSeconds(); };
[I][B]Und nach den Wertzuweisungen folgende Zeile:[/B][/I]
[COLOR=#a9a9a9]td_MoorNE.innerHTML = rMoorNE;[/COLOR]
[B]var newDate = new Date();
div_log.innerHTML = "LastSync: " + newDate.today() + " - " + newDate.timeNow();[/B]
Damit wird bei jedem Update der Werte die aktuelle Zeit des Browsers ausgegeben. Ist sehr nützlich bei Zugriffen über das Internet und grossen Latenzzeiten (z.B. Satelittenuplink)
Das ganze sieht dann z.B. so aus:
Ich möchte hier auch noch die Bibliothek von NieZuSpaet erwähnen:
@Guga: dann der Vollständigkeit halber noch der Hinweis auf die TAME-Javascript-Lib, die den ADSWebService etwas nutzerfreundlicher macht.
http://tomcx.github.io/tame3/
Anhang anzeigen 22549Anhang anzeigen 22550Anhang anzeigen 22551
Auf die Verknüpfung mit Highcharts werde ich (vielleicht) später noch eingehen, da man damit wirklich sehr schöne Grafiken automatisch und animiert erzeugen kann!
Für Anregungen bin ich sehr dankbar, bitte benutzt doch
diesen Thread oder PM, um diese FAQ sauber zu halten...