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.


5 Antworten zu “HTML5-Visualisierungen auch mit CoDeSys 2.3”

  1. Hallo Florian,
    ich hab bei meiner Mutter eine Hausautomation mittels Beckhoff realisiert. Damals (vor 2 Jahren) zwar mit dem Gedanken einmal eine Visu zu installieren, aber noch ohne genaue Vorstellung.
    Inzwischen habe ich die Raspberry / Codesys Webvisu Kombination ausprobiert. Was mir fehlt, ist die Verbindung zum Beckhoff CX.
    Hast du da vielleicht auch schon Erfahrung?
    Ev. per Modbus oder Ethercat oder …?
    Wenn du da eine Idee oder sogar eine Lösung hättest, wäre super.

  2. Hallo zusammen,
    Ich habe auch das gleich Problem mit meiner sps.
    Ich komme auch fast mit keinem Browser mehr auf meine webvisu.
    Ich habe eine Eaton xc202 und die webvisu habe ich mit codesys 2.3 erstellt.
    Wenn es auch hier möglich wäre den Server zu installieren würde ich dies sehr gern tun.

    Vielen Dank für eure Hilfe

  3. Hi Florian,
    I have tested your WebVisu.html on 841 and 881.
    At the moment I have found that the controls „Trend“, „Table“ and „Meter“ doesn’t works well.
    The Trend and Table are not displayed at all.
    The Meter is displayed correctly but the arrow doesn’t move with the change of the variable.
    If you will fix them It will be great!
    Thank you.
    ————————————————————
    Translated with Deepl:
    Hallo Florian,
    Ich habe Ihre WebVisu.html auf 841 und 881 getestet.
    Im Moment habe ich festgestellt, dass die Regler „Trend“, „Tabelle“ und „Meter“ nicht gut funktionieren.
    Der Trend und die Tabelle werden überhaupt nicht angezeigt.
    Das Messgerät wird korrekt angezeigt, aber der Pfeil bewegt sich nicht mit der Änderung der Variablen.
    Wenn du sie reparierst, wird es großartig!
    Ich danke Ihnen.

  4. Beim verwenden der WebVisu.html bis Rev.5 mit CoDeSys 2.3 werden die Schriftarten auf einen PC unabhängig vom Browser oder auch mit IOS sehr unscharf angezeigt.
    Hat jemand darfür eine Lösung?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert