Giter Club home page Giter Club logo

webvisu's Introduction

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.

webvisu's People

Contributors

dependabot[bot] avatar ekristoffe avatar tnentwig avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

webvisu's Issues

Dynamic Texts not working

Hi, I'm using the latest release on my Codesys v2.3 PLC. It works fine with most of the elements but fails with the following

  1. Codesys v2.3 dynamic texts using dynamic XML file is not working.
    image

  2. Codesys v2.3 language file is not working

  3. Button visibility works fine but Button Text is always visible regardless of the visibility state of the button.
    image

  4. Most of the Text element visibility works except for two to three
    image

Browser cache

I have problems with adding new elements to webVisu, because browser cache old one. When I open a new incognition window it works fine only first time, then I need open another one.

relative position in rectangle doesn't work

I use rectangles with relative positions to show level of a liquid tank. But it does not work, the relative variable (Tankinhalt_Visu) is ignored, and the level keeps constant (as if the value of Tankinhalt_visu would equal zero).
Screenshot_20210305_181530
In the javascript webvisu it looks like this (the tank is always full)
Screenshot_20210305_185651
But it should look like this (again the problem with wrong coordinate in grouped objects occurs in the upper picture, like in issue #12: the black lines which symbolize the outer walls are overlapped by the blue rectangle which is too big):
Screenshot_20210305_185853

grouped objects have wrong coordinates

In my visualisation I have special heat-exchangers consisting of several elements (a blue rectangle for the liquid in the exchanger, a black polyline as frame, a black polyline as pipe in the liquid and a red filled rectangle as warning for low liquid-level which is normally invisible). All these elements are grouped together as I use several heat-exchangers in my visu and just copy this group. In the javascript visu the blue and red rectangles are slightly shifted against the black frame. Below left is the original in codesys, right the javascript visu (you can see a white stripe at the bottom and a blue stripe right of the black frame):
Screenshot_20201229_104305 Screenshot_20201229_103256

interface refractoring

Java Interfaces and JS Interface need to be checked and updated.
Some interface doesn't have the right variable in them and other have too much variables.
I will rebuild the interfaces and also comment what is used where.

mouse pointer doesn't change when hovering over a clickable item

When I move my mouse pointer over a clickable item, it doesn't change its shape. In the original visu in codesys, the mouse pointer changes from a simple pointer to a hand-pointer with index-finger when I move over a clickable item and to a small text cursor, when I move it over an editable item (text, number). Thus the visu is much more intuitive to use.

conversion factor for variables doesn't work

I use the function conversion factor (Umrechnungsfaktor in german) in the visu (see picture below).

Screenshot_20210129_183647

In the java version and in the visu inside of codesys, it works. But in the javascript visu, the factor is always 1 (no conversion is done at all), independent whether there is a conversion factor or not.

mouse click on an object doesn't set the input variable of that object

In my visualisation I (mis)use objects (ellipse, rectangle) as buttons. I.e. the ellipse of my pump: Clicking on it, sets a variable to start/stop the pump. I set the variable in the tab mode (German "Variable tasten"). In the java visualisation it works without problems, but not in this javascript visualisation.

visu doesn't get updated after changes

It is frustrating. With every change of the programme the variables get more and more mixed up in the javascript visu. If I look in the visu of codesys everything shows up right.
The old variables, which I didn't touch are still displayed correctly, but variables, that I recently changed get mixed up. Even dump lables, which I added just for testing, are not shown.
It seams like webvisu.js uses still the old visu. But the plc_visu.xml is defenitely updated in the controller. I also tried to clear the cache of firefox (ctrl+F5). Without success.
I opened the visu in chrome for the first time, and there everything was displayed correct. But the next changes are lost again (I deletet the dump label, which I added just earlier for testing, and it is still there)

Web browser compatibility

Hello,
I am testing your system in an WAGO PLC (750-881)
I have different result with different web browser:

Internet explorer display nothing and in the console there is:

HTML1300: Navigation occurred.
webvisu.html

Google Chrome display the visu and in the console there is:

DevTools failed to load SourceMap: Could not load content for http://192.168.1.5/plc/WebVisu.dev.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
WebVisu.dev.js:60 GET http://192.168.1.5/visu_ini.xml 404 (Not Found)
(anonymous) @ WebVisu.dev.js:60
e.pathConfiguration @ WebVisu.dev.js:60
(anonymous) @ WebVisu.dev.js:60
(anonymous) @ WebVisu.dev.js:60
(anonymous) @ WebVisu.dev.js:60
(anonymous) @ WebVisu.dev.js:60
o @ WebVisu.dev.js:60
e.showMainVisu @ WebVisu.dev.js:60
(anonymous) @ WebVisu.dev.js:60
n @ WebVisu.dev.js:1
(anonymous) @ WebVisu.dev.js:1
(anonymous) @ WebVisu.dev.js:1
favicon.ico:1 GET http://192.168.1.5/favicon.ico 404 (Not Found)

Firefox display the visu and in the console there is:

Loading failed for the <script> with source “http://192.168.1.5/plc/WebVisu.dev.js”. webvisu.html:10:1
The script from “http://192.168.1.5/plc/WebVisu.dev.js” was loaded even though its MIME type (“text/plain”) is not a valid JavaScript MIME type. webvisu.html

What browser compability is expected ?

sector (german Kreissektor) seems not to work

In my visualisation sector doesn't work. I try to visualise a pump with a combination (from botton to top) of a polygon (green triangle in the right half of the circle), green sector (a green semicircle should be in the left half of the circle, but is transparent), ellipse (black circle around the green fields) and polyline (black line in the right half of the circle, surrounding the green triangle) (see picture below, below the pump is a green line for the pipe), everything works properly with exception of sector. It looks like this:
Screenshot_20201228_183130
The original in codesys looks like this:
Screenshot_20201228_213329

Any ideas?

polyline with "no frame colour" is not visible even if alarm-colour is activated

In my visu I use a trick to hide a line sometimes. I checked the "no frame colour" checkbox and as a result in the codesys-visu it is hidden, when the alarm variable is false, and it is visible with the alarm-colour when the alarm variable is true.
In the javascript visu it is hidden all the time, no matter whether the alarm variable is false or true.
I know, that I can solve this issue with the hidden variable, but I just want to give a hint, that there is a difference between the java and the javascript version.

hidden variable not evaluated in slider

For testing reasons, I've added some sliders in my visu, but in normal operation they should be hidden. I achieve that by the hidden variable in the slider-element (xSimulation_aus).
Screenshot_20210305_180813
It works fine in the java Visu, but in the javascript visu the sliders are shown regardless of the state of xSimulation_aus

background colour

In my visualisation I have set no background colour. In the java version, the background is white, in this javascript version the background is light grey. To show text, I use rectangles and the background of these rectangles is white. In the original the text-rectangles integrated seamlessly in the background. In the javascript version a white rectangle hovers above the grey background which looks a bit disturbing.
Screenshot_20201229_113219

WEBvisu for Codesys 3

Hi!
Among other things, I am a passionate PLC programmer and user. There are many old tablets in my craft box that I would now like to use as a visual panel. I use both Codesys 2.3 and Codesys 3.5.19. Now my question, your Gite entry for both systems. Because I have very, very old, not powerful tablets and I would also like to run Webbisu from codesys3 without any delays.
(I noticed that the two JS files require a lot of performance).

Resume: Is this also for Codesys 3 Visu?

Action Prettier fail

In the Workflow you have this line:
ref: ${{ github.head_ref }}
Which work fine if the pull request is not from a fork but as soon as the request came from a fork it will fail.
Could you use this instead:
ref: ${{ github.event.pull_request.head.ref }}
Which will work for Upstream and fork.

Ps It seem that if you use Checkout v2 this one work better:
ref: ${{ github.event.pull_request.head.sha }}

Thanks

Polylines draw triangles in the angles

Hi tnentwig,
thanks a lot for your great work. This is really a good tool to handle the vanishing java support of the old wago- visualisation.
I have a medium complex visualisation with lots of poly-lines. It seams, that for every angle in the poly-line, there is drawn a white triangle, that overlaps the other elements (see picture below).
Is there any chance, that you can fix this issue? I would gladly help you with testing

Screenshot_20201222_101321

Dynamic Text support

Hello,
Is there any plan to support the Dynamic text system of CoDeSys 2 ?
This is useful when you have a same program made for more than 1 language or when you need a solution for UTF (UTF-8 or UTF-16) support in CoDeSys 2.

variables are not working (NaN) when webvisu.js ist stored on sd-card

Due to very limited storage on a 750-880 controller (1,8 MB) I put the webvisu.js on the sd-card (S:/) and corrected the path in the webvisu.html <script src="s:/webvisu.js"></script>. The visu itself is displayed ok, but in every place, where I use numbers from the plc (actual temperatures, fluid levels, ...), just "NaN" is shown.
Is there a way to store webvisu.js on the sd-card, or is it impossible?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.