Anwenderwebseite

Neben der vordefinierten Webseite des Geräts können auch eigene Webseiten geschrieben und vom Webserver ausgeliefert werden. Man nennt diese auch Anwenderseiten.

Webseite programmieren

Das erweiterte Programm der Motorsteuerung muss hierfür nicht mehr verändert werden. Zunächst wird eine Webseite programmiert und unter dem Namen index.htm oder index.html abgespeichert:

Quellcode von index.htm    https://github.com/ateachment/RemoteControlPLC/blob/main/WebPage/index.html  (22.10.2024)

Zeilen 1-2:

Diese speziellen HTML-Kommentare sind sogenannte AWP-Anweisungen (AWP = Anwenderprogrammierbare Webseiten). Sie sind notwendiger Bestandteil des Programms, mit der Daten zwischen der CPU und der HTML-Datei ausgetauscht werden. In jeder Zeile wird eine Variable des Datenbausteins benannt, in die mittels dieser Webseite Daten geschrieben werden sollen.

Zeilen 3-5:

Der nichtsichtbare Bestandteil der Webseite im HTML5-Standard.
Zeile 5: Dieser Meta-Tag bezeichnet die Zeichencodierung. UTF-8 macht es möglich, dass auch deutsche Umlaute und andere sprachenspezifische Zeichen im Browser richtig angezeigt werden.
Zeile 6: Der title tag spezifiziert den Titel des Browsertabulators

Zeilen  9-21:

Der body tag kennzeichnet den Teil der Webseite, der im Browserfenster angezeigt wird.

Zeilen 10-11:

Hier werden die Texte "Motorschütz" und "Motorschutzschalter" gefolgt von den jeweiligen Variableninhalten auf der Webseite ausgegeben.
Auf eine Variable kann wie folgt zugegriffen werden (in Rot dargestellte Zeichen zwingend nötig.

Lesender Zugriff auf Variablen

Zeilen 12-15 bzw. 16-19

HTML5-Eingabeformular zum Übertragen von Daten an  einen Webserver. Hierfür wird die HTTP-Methode POST verwendet (Standard beim Senden von Daten).
Zeile 13 bzw. 17: Übertragen wird der Inhalt eines versteckten Textfeldes mit der Bezeichnung der Elemente des Datenbausteins der erweiterten Motorsteuerung. Der Inhalt ist einmal 0 (für false) im ersten Formular und 1 (für true) im zweiten Formular.
Die Absenden-Schaltfläche hat im ersten Formular den Text "Start" und im zweiten den Text "Stop".

Auf die Elemente eines Datenbausteins kann lesend und schreibend zugegriffen werden:
(Spezifikation als vorangestellter Kommentar wie in Zeile 1 und 2 ist Voraussetzung.)

Lesender oder schreibender Zugriff auf Elemente von Datenbausteinen

Anwenderseiten konfigurieren

HTML-Verzeichnis und Startseite des Webprojekts müssen ausgewählt und der Applikationsname definiert werden.
Der Abschnitt "Erweitert" kann in der Voreinstellung belassen werden:
Web-DB-Nummer: 333
Fragment-DB-Startnummer: 334

Anwenderseiten konfigurieren

Bausteine erzeugen

Durch Anklicken von "Bausteine erzeugen" werden die Webseiten (hier nur index.html) in Systembausteine übersetzt.
Sie werden als Systembausteine unter DB333 und DB334 im TIA Portal angezeigt:

Bausteine wurden erzeugt

DB334 ist der erste und hier der einzige Fragmentbaustein. Sie nehmen die Webseiten auf. Für die eine index.html-Datei wird nur ein einziger Fragmentbaustein benötigt.

WWW-Funktion im Programm aufrufen

Damit die anwenderdefinierten Webseiten funktionieren, muss im Projekt die WWW-Funktion aufgerufen werden.  Eine Leerbox wird in das nächste freie Netzwerk gezogen und WWW genannt. DB333 wird in Verbindung mit der WWW-Funktion verwendet, um das Abrufen und Ausliefern der Fragmente zu steuern. Er wird per Drag and Drop in den Eingang der WWW-Funktion gezogen.

WWW-Funktion im Programm aufrufen

Anwenderseite aufrufen

Nach der Anmeldung ist unter dem Menüpunkt "Anwenderseiten" die vom Anwender selbst definierte Webseite verlinkt:

Webseite mit Anwenderseiten

Anwenderdefinierte Webseite

Mit den Schaltflächen Start und Stop lässt sich der Motor steuern.

Selbstverständlich lässt sich die Webseite mit CSS-Dateien (Cascaded Style Sheets) und Bildern gestalten und um weitere Unterseiten erweitern. Begrenzend hierfür ist lediglich die Speicherkapazität des Geräts.