Dieses Mal müsst ihr keinen Code selbst programmieren, er wird euch bereitgestellt. Dennoch erkläre ich euch Schritt für Schritt wie er funktioniert, damit ihr genau versteht, wie die einzelnen Teile zusammenwirken, um letztendlich die Steuerung der Anlagen mit der App zu ermöglichen.

Die sichtbare Oberfläche von Webseiten wird mit sogenannten HTML-Dateien realisiert. Die Abkürzung steht für "Hypertext Markup Language". Macht euch mal einen Spaß draus, und wählt nach einem Rechtsklick auf einer beliebigen Webseite "Untersuchen". Was euch angezeigt wird, ist der HTML-Code der jeweiligen Webseite. Ihr könnt den Code sogar bearbeiten und Elemente ändern oder löschen! Natürlich nur bei euch, ihr verändert nicht die Webseite für alle Benutzer ;-)

Auch wir verwenden HTML zum Schreiben unserer Variablen, nur höchstwahrscheinlich deutlich einfacher als die Webseiten, die ihr euch angeschaut habt. Außerdem weist unsere HTML-Seite tatsächlich sehr wenig HTML auf, der Hauptanteil ist JavaScript! JavaScript?

Mit JavaScript können dynamische Inhalte in Webseiten eingefügt werden. Damit kann auf Nutzereingaben reagiert werden, ohne nochmal eine Anfrage an den Server zu stellen. Ohne dynamische Inhalte müsste eine Webseite immer wieder beim Server nachfragen, mit ihnen kann eine Webseite bespielsweise eine neues Fenster öffnen, dass eine/-n Nutzer/-in nach dem Namen fragt. Wir benutzen JavaScript, um auszuwerten, welche Variable beschrieben werden soll und um anschließend den Schreibvorgang durchzuführen.

Hier im Bild seht ihr einen Screenshot vom Code. Öffnet das Bild am besten in einem neuen Tab, dann könnt ihr nebeneinander die Erklärungen lesen und den Code anschauen, ohne dass ihr immer wieder hochscrollen müsst.


Das war's! Nur 24 Zeilen ermöglichen es, über einen Link Variablen in der CPU zu setzen. Doch was tun diese Zeilen?

Was zuerst ins Auge fällt, sind die ersten drei Zeilen, die zugegeben ziemlich seltsam aussehen. Es handelt sich um HTML-Kommentare. Diese werden mit "<!--" eingeleitet und mit ">--" beendet. Mit "AWP_In_Variable" wird der CPU angekündigt, dass die Variable, die bei "Name=" steht, vom Webserver aus beschrieben werden soll. Diese Befehle sind eine Vorgabe von Siemens und genauso im Datenblatt des CPU-Webservers zu finden. Das Ganze machen wir drei Mal, ein Mal für jeden der drei Befehle, die wir zunächst umsetzen wollen.

Danach geht der JavaScript-Teil los, gut zu sehen am Stichwort <script>, mit dem er eingeleitet wird. Um den Sinn der ersten Zeilen dieses Teils zu verstehen, müssen wir uns zuerst anschauen, wie die Links aussehen werden, mit denen die Variablen später gesetzt werden könnnen.

URLs können mit sogenannten Query Strings (dt.: Anfrage-Strings) zusätzliche Informationen angefügt werden. Beispielsweise wendet YouTube dieses Verfahren an, um die Videos, die es abspielen soll, zu unterscheiden. Der Teil nach dem Fragezeichen ist der Query String, durch das "v=..." wird angezeigt, dass das Video mit dem Code dahinter gewünscht wird. Ein Link sieht dann z.B. so aus:

https://www.youtube.com/watch?v=dQw4w9WgXcQ

Die Adresse, die wir ansprechen wollen, ist die IP-Adresse unserer Anlage, die 192.168.0.1. Nachdem wir die Webseiten im übernächsten Abschnitt in die SPS hochgeladen werden, ergibt sich zum Schreiben insgesamt die URL:

http://192.168.0.1/awp//schreiben.html

Um dort mit Query Strings zu arbeiten, fügen wir wieder ein Fragezeichen an, und geben dem Link z.B. mit, dass der Automatikbetrieb aktiviert werden soll. Das sieht dann so aus:

http://192.168.0.1/awp//schreiben.html?Automatik=1

Was machen nun die ersten Zeilen des JavaScript-Teils, wegen der wir durch diese längliche Erklärung mussten? Zeile 6 erstellt ein Objekt der Klasse URLSearchParams. Mit dessen Hilfe kann später nach Query Strings gesucht werden. Die Klasse müssen wir und haben wir nicht selbst programmiert, es ist einfach in JavaScript integriert und kann ohne Weiteres benutzt werden.

Zeile 8 und 9 haben erstmal nichts mit der Anfrage selbst zu tun. In dem Array "moeglicheBefehle" werden alle Query Strings hinterlegt, auf die reagiert werden soll. Wird die Webseite z.B. mit dem Query String "Quittieren" aufgerufen, wird im weiteren Verlauf des Codes nichts damit gemacht. Nur bei "Handbetrieb", "Automatik" und "AutomatikStart" werden durch den folgenden Code die entsprechenden Variablen gesetzt. anzahlMoeglicheBefehle gibt die 3 zurück, die Anzahl an Elementen im Array. Zeile 10 realisiert einen Platzhalter namens "datenZuBefehl" für die Daten, die mit einem Query String mitgeschickt werden, im Fall des Aufrufs oben also die "1".

Mit Zeile 13 beginnt eine for-Schleife, die genau so oft durchlaufen wird, wie das Array mit den Query Strings lang ist. Hier im Beispiel also drei Mal. Gleich zu Beginn, in Zeile 15, wird das zuvor erstellte URLSearchParams-Objekt benutzt. Die Methode "get" vom Objekt sucht nach Daten zu dem Query String, das an die Methode übergeben wird. Beim ersten Schleifendurchlauf sucht es also nach Daten zu "Handbetrieb", da das das erste Element im Array ist.

Wenn wir die Webseite allerdings mit dem Link von oben Aufrufen, werden keine Daten zu "Handbetrieb" gefunden, weil wir den Link mit dem Query String "Automatik" aufrufen. Deshalb wird in "datenZuBefehl" der Wert "null" gespeichert. Nicht die Zahl 0, sondern der Wert null, der dafür steht, dass gar nichts gefunden wurde. Aufgrund dessen wird auch die If-Abfrage nicht durchlaufen, der Code darin wird nur ausgeführt, wenn "datenZuBefehl" nicht null ist.

Im zweiten Schleifendurchlauf ist genau das der Fall. Jetzt hat "moeglicheBefehle[i]" den Wert "Automatik", also genau den, mit dem der Link aufgerufen wurde! Jetzt wird nach Daten dazu gesucht, und daher die "1" gefunden, die in die Variable "datenZuBefehl" geschrieben wird. Als Folge wird die If-Anweisung durchlaufen.

Ihre Aufgabe ist es, die Daten an die Anlage weiterzugeben. Dies geschieht, indem wieder ein Link aufgerufen wird. Dieser Link lautet im Beispiel:

?"App_DB".Automatik=1

Da wir uns mit der Website bereits im Webserver der Anlage befinden, ist es nicht mehr nötig, noch die IP-Adresse anzugeben. Im Code selbst wird in Zeile 18 zunächst ein neuer HTTP-Request erstellt. Mit HTTP-Requests sind die Technik, mit der Links aufgerufen werden. Auch wenn Ihr in einem Browser eine Website aufruft, setzt ihr einen HTTP-Request ab, auch wenn ihr dafür keinen Code schreiben müsst. In Zeile 17 wird dann er Link "zusammengebaut", den ihr oben seht. Da er im Falle eines anderen Query Strings oder anderer Daten auch anders aussehen kann, muss er variabel aus den möglichen Befehlen und den aktuellen Daten erstellt werden, wir können ihn nicht einfach auf den Obigen festsetzen. Mit Zeile 20 und 21 wird der Request eröffnet und abgeschickt, wodurch die Variable in der Anlage geschrieben wird.

Das war's! Ganz schön viel Code. Glückwunsch, dass ihr es bis hier geschafft habt! Hier könnt ihr den fertigen Code herunterladen, speichert ihn in dem Ordner, den ihr dafür erstellt habt.



Zuletzt geändert: Montag, 12. Juli 2021, 13:56