WebVisu view browser pages in HTML5

With WebVisu you can create your human machine interface (HMI) directly integrated into the PLC program, the WebVisu extension in the CODESYS environment allows you to create synoptic pages that can be viewed from any browser. The pages are created in the CODESYS development environment within the PLC project of which they are an integral part and with which they share the variables.

The pages are stored in the file system of the SlimLine, to access it, just enter the IP address of the browser SlimLine followed by the 8080 port (Example http: // 192.168.0.122: 8080). The javascript management performs the automatic refresh of the objects that will change value / shape in relation to the value of the PLC program variables to which they are referred.

For demonstration purposes it is supplied with the PTP161 (Download) the project WebVisuStartUp that through a simple graphic interface demonstrates how to develop applications with WebVisu.

The PLC program in PLC_PRG executes:

  • Flashing of the variable Blinker.
  • Logical AND between the variable Blinker e ANDInp.
  • Analog acquisition 0-10 Volt with FB SysGetAnInp.
  • Management of analog output 0-10 Volt with FB SysSetAnOut.

On the graphic page there are status signaling lamps, command activation button, analogue value display input gauge and analogue output value setting potentiometer.

The various objects are connected to the program variables, as you can see from the image the yellow lamp is connected to the Blinker variable of the PLC_PRG program and so for all the other objects. By transferring the program to a system SlimLine with a mixed I / O extension module we'll see how it works in practice.

Here is the page displayed by Chrome, by pressing the button you enable the passage of the Blinker status in the AND operand and the green lamp will flash in sync with that of the yellow lamp.

By changing the input voltage to the analog module, the value will be shown on the pointer instrument.

Acting on the potentiometer we will vary the voltage on the analog output whose value is displayed on the bar instrument on the side of the potentiometer.

Was this article helpful?