This is a single page application (SPA) for displaying the web visualisation pages build with the CoDeSys 2.3 or WAGO-I/O-PRO CAA 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.

1. Download the WebVisuSPA.zip file from the latest release here: Releases.
2. Unzip the three files it contains and transfer them to your PLC (e.t. via FTP with FileZilla). The destination folder depends on the model of your PLC:
   For the non Linux PLCs (like 750-88x, 750-89x series)

   Transfer them to the /PLC folder. The visualisation is available afterwards on:

   http://<ip-address-of-your-plc>/PLC/webvisu.html

   For the Linux PLCs (like IPC or PFC200)

   Transfer them to /home/codesys. The visualisation is available afterwards on:

   IPC: http://<ip-address-of-your-plc>:8080/webvisu.html

   PFC200: http://<ip-address-of-your-plc>/webvisu/webvisu.html

3. Use a modern browser like Chrome, Firefox or Edge.

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.

✔️ : Fully implemented
➖ : Currently not supported
🔧 : Currently in progress
💥 : Is no longer supported in modern browsers

¹ : The "Background transparent" functionality (select a specific color to become transparent) doesn't work.

² : Works fine with Firefox. Sliderchange has to be throttled on Chrome in the future.