This is a single page application (SPA) for displaying the web visualisation pages build with the CoDeSys 2 or WAGO-I/O-PRO IDE without using Java. With this solution it's possible to display the existing visualisations on mobile devices or modern browsers that doesn't support Java applets anymore.
👉 : Every release has been tested with bigger CoDeSys projects but the components are currently not automatically tested. Create an issue or send me a mail to [email protected] if you encounter a problem.
Just copy the webvisu.html and webvisu.js from the release tab to the folder which contents are deployed by the webserver. The path to this folder differentate by the used Wago PLC. The FTP transfer could be made with FileZilla at example.
For displaying on client use a modern browser like Chrome, Firefox or Edge that supports ES6 constructs.
Transfer them to the /webserv folder. The visualisation is available afterwards on
http://<ip-address-of-your-plc>/webvisu.html
Transfer it to /home/codesys. The visualisation is available afterwards on
http://<ip-address-of-your-plc>/webvisu/webvisu.html
This SPA is based on the React and MobX framework. CoDeSys creates a XML description file for every user generated visualisation. Every file descripes the look and behavior of the objects shown in the specific visualisation. Besides that the file contains the used variables (e.g. ".xToggleColor") and their addresses on the web interface.
The SPA parse the current visualisation XML file and insert a React component dynamically to the React-Dom as absolut positioned element. The variables depending on the element will be included to a singleton object named "ComSocket". This object saves the variables in a observable map and queries the value of the variables cyclic. If an observable value changes all dependend elements rerender. The observable map is part of the MobX framework.
The WebVisu-SPA is still in progress but already contains numerous functionalities and elements.
| Element/ Function | Integrated |
|---|---|
| Change userlevel | ✔️ |
| Rectangle | ✔️ |
| Roundrect | ✔️ |
| Ellipse | ✔️ |
| Polygon | ✔️ |
| Bezier | ✔️ |
| Polyline | ✔️ |
| Sector | ✔️ |
| Bitmap | ✔️ |
| Subvisualisation | ✔️ |
| Button | ✔️ |
| WMF-File | ✔️ |
| Table | 🔧 |
| Alarm table | ➖ |
| Slider1 | ✔️ |
| Button | ✔️ |
| Gauge | ✔️ |
| Bar display | ✔️ |
| Histogram | ➖ |
| CurrentVisu-Variable | ✔️ |
| Language switching | ➖ |
| ActiveX-Element | 💥 |
✔️ : Fully implemented
➖ : Currently not supported
🔧 : Currently in progress
💥 : Is no longer supported in modern browsers
1 : Works fine with Firefox. Sliderchange has to be throttled on Chrome in the future.