HTML5-Visualisierungen auch mit CoDeSys 2.3

CoDeSys in der Version 2.3 (also der klassischen Version, die unter anderem von den meisten WAGO-Controllern ausschließlich unterstützt wird) bringt eine eigene Webvisualisierung mit. Die Visu kann über CoDeSys zusammengesetzt werden, sie wird mit dem Programmdownload auf den Controller übertragen.

Das Problem daran: Die Visu besteht aus einem Java-Applet, das von manchen Browsern überhaupt nicht ausgeführt wird, unter anderem von Chrome oder mobilen Browsern.

CODESYS 3.5 bringt eine neue Visualisierung auf HTML5-Basis mit, die deutlich besser funktioniert. Jedoch laufen die „klassischen“ WAGO-Controller nicht mit CODESYS 3.5, wer nicht gerade einen PFC200 oder PFC100 einsetzt, wird davon nichts sehen.

Es gibt ein Projekt namens WebVisu auf sourceforge, das sich dieses Problems annimmt. Es stellt auf dem integrierten Webserver der Controller eine HTML5-Visu bereit, die mit CoDeSys 2.3 zusammenarbeitet und in wenigen Schritten auf den Controller „installiert“ werden kann.

Installiert insofern in Anführungszeichen, als dass diese Installation lediglich aus dem Kopieren einer einzelnen HTML-Datei auf den Controller besteht. Laut Wiki ist WebVisu kompatibel mit der WAGO 750-841 und dem Beck IPC, zufällig besitze ich einen uralten Controller 750-841 bei dem leider die Buskontakte nicht mehr besonders zuverlässig sind, aber zum Testen reicht es allemal.
Vermutlich funktioniert die Visu auch bei den anderen 750-8xx Controllern mit CoDeSys-WebVisu, davon habe ich allerdings kein Gerät zum spielen.

Die WebVisu.html wird einfach auf dem Controller unter /webserv abgelegt und ist danach unter der IP des Controllers unter /webserv/WebVisu.html zu finden.

Die Visualisierung wird unter CoDeSys ganz normal erstellt, das JAVA-Applet ist nachher auch problemlos nutzbar. Die HTML5-WebVisu ist nur zusätzlich vorhanden.

Zum Test habe ich einfach einen inkrementierenden Wert auf eine 8-fach Ausgangsklemme geschrieben und diesen Wert außerdem in der Visu als Zahlenwert, als LED-Zustand und als Kreisdiagramm dargestellt. Außerdem habe ich noch einen Toggle-Taster mit einer booleschen Variable eingefügt, um auch diesen Fall testen zu können.
Direkt in CoDeSys sieht das so aus:

Webvisualisierung und ST-Programm in CoDeSys 2.3
Webvisualisierung und ST-Programm in CoDeSys 2.3

In Chrome fehlt das Kreisdiagramm, generell werden neben dynamischen Formen wie dem Kreissegment auch Tabellen und Skalen nicht angezeigt. Vermutlich fehlen diese Darstellungen in der HTML5-WebVisu einfach:

HTML5 WebVisu in Chrome auf dem Desktop
HTML5 WebVisu in Chrome auf dem Desktop

Auf dem Smartphone wird die WebVisu quasi identisch dargestellt:

HTML5 WebVisu in Chrome auf einem Android Smartphone
HTML5 WebVisu in Chrome auf einem Android Smartphone

Die Bedienung der Schaltfläche funktioniert übrigens einwandfrei, sowohl im Desktop-Browser als auch auf dem Smartphone und die Grafikaktualisierung ist ziemlich flott und ohne Ruckeln.

Alles in allem also eine sehr passende Lösung für Leute, die eine einfache Webvisualisierung unter CoDeSys 2.3 erstellen wollen, die auch ohne JAVA-Applet und damit auch auf mobilen Geräten bedienbar ist.