Skip to content

SPA for displaying the webvisualisation of CoDeSys 2 applications

License

Notifications You must be signed in to change notification settings

Ekristoffe/WebVisu

 
 

Repository files navigation

WebVisu

A tiny (~100 kB) Javascript based alternative to the Java applet of CoDeSys 2.3 applications

code style: prettier License: MIT

Introduction

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.

How to use

  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.

How it works

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.

Demo (1.0.9)

Currently supported features

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 ✔️
Bitmap1 ✔️
Subvisualisation ✔️
Button ✔️
WMF-File ✔️
Table 🔧
Alarm table
Slider2 ✔️
Button ✔️
Gauge ✔️
Bar display ✔️
Histogram
CurrentVisu-Variable ✔️
Language switching
ActiveX-Element 💥

Meaning of the marks

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

Comments

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

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

About

SPA for displaying the webvisualisation of CoDeSys 2 applications

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 98.4%
  • Other 1.6%