Aufgabe: Anwenderwebseite
Vorteilhaft wäre im nächsten Schritt eine zweite Signalleuchte um den ausgelösten Motorschutzschalter zu visualisieren.
Für erfahrene Webprogrammierer wäre vielleicht eine entsprechende Animation, die den drehenden Motor darstellt, eine angemessenen Herausforderung.

Reale Signallampen in einer Schalttafel
Die Aufgabe lässt sich nicht ohne eine vom Browser ausgeführte Programmierungsprache lösen. Hier kommt JavaScript oder z.B. auch TypeScript zum Einsatz. Es sind außerdem einige Framework hierfür wie z.B. Angular, Vue.js, React usw. verfügbar, um die Detailarbeit zu erleichtern.
Zunächst muss klar sein, wie die Werte der AWP-Variablen zur Scriptsprache des Browsers übertragen werden. Hier gibt es z.B. folgende Möglichkeit:
<!-- AWP_In_Variable Name='"Datenbaustein_Motorschaltung".WebStart' --> <!-- AWP_In_Variable Name='"Datenbaustein_Motorschaltung".WebStop' --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="10"> <!-- page reload every 10 sec --> <title>Motorsteuerung v2</title> <link rel="stylesheet" href="css/index.css"> <script type="text/javascript" src="js/index.js"></script> </head> <body onload="myJavaScriptFunction( :="Motorschütz":, :="Motorschutzschalter":)"> <!-- receive AWP data -->
...
Auszug aus einer HTML-Datei: Abholen der Variableninhalte der SPS wie auf "Anwenderwebseite" beschrieben
Tipp:
Wem der Upload und das Testen mit der SPS zu langsam ist, kann einen Simulator des S7-Webservers programmieren oder einfach diesen hier benutzen. Damit kann schnell und bequem lokal entwickelt und getestet werden. Erst zum Schluss wird die Webseite dann auf die SPS übertragen.
(An der Werner-von-Siemens-Schule in Frankfurt darf dabei nicht der Port 80 verwendet werden, weil hierfür die Zugriffsrechte nicht gewährt werden. Verwenden Sie stattdessen den Port 8080.)