This is a small tutorial on how to use this project.
Download package
First download this package and install it.
The package will require CODESYS 3.5 SP16.
It will add a visualization element required for the detection of the webvisu state.
This element contains some javascript code, which will forward any log messages from the webvisu to its referenced iframe.
Then download the changes to the PLC.
Next we have to get started on our website which switches between different webvisualizations.
Therefore use the provided files test.html and wvdetection.js.
Look for the function onBodyLoad().
It contains the constructor and some required methods.
const wvDetection = new WVDetection("frame");
wvDetection.setWebvisuUrls(["http://localhost:8080/webvisu.htm", "http://localhost:8081/webvisu.htm"]);
wvDetection.start();
The constructor requires the id of the iframe, which should be switched.
This argument is required.
The method setWebvisuUrls() allows you to set a number of urls, but at least two are required.
The method start() will start the detection. It has an optional parameter timeout, which will default to 5000, and will be used as number of milliseconds to wait for a message from the webvisualization.