Visualization: WebVisu
The P2CDS-622 contains advanced visualization/graphics generation capability to create an HMI called “WebVisu”.
Note
The P2CDS-622 WebVisu solution is not an “Application Based” CODESYS license and as such, does not have any maximum variable/data point restrictions. In addition, the P2CDS-622 supports all the WebVisu functionality and features.
It is an integrated web server that makes image and variable data available in a data network. This data can be displayed on any HTML5-capable display devices with a standard web browser.
There are numerous options to visualize static and animated images, some examples are shown below:
The WebVisu generates an IP Address for P2CDS-622 device and “serves up” a web page at that address. This URL can be HTTP or secure HTTPS. The following are some examples.
Quick Start
Caution
The P2CDS-622 is an entry level CODESYS PLC that runs on a single 600MHz core. As such, adding complex Visualizations may affect performance.
More detailed information is listed in the links below, but for a “Quick Start” to generate a secure HTTPS page, after adding a Visualization Object in the Application, follow the steps below.
(1). If you do not have a project created, create one in any language.
(2). Add the NetConfig device. This is used to identify the PLC’s IP Address when needed later. Select Device in the project tree and Right-click. Select Add Device > Miscellaneous > P2CDS_NetConfig .
(3). Connect to the P2CDS-622 via the Scan Network > Select Device.
(4). Generate the security certificate that HTTPS will utilize. Select View > Security Screen > Devices and click on the green recycle to generate keys.
You should see something similar to the image below:
If you do not see the Web Server with a Certificate issued, double click on the symbol shown below, use default key lengths and click ok. It may take a minute, but a Certificate issued for the Web Server should appear.
Note
Some browsers e.g. Chrome requires you to import the WebVisu self-signed certificate into it’s browser certificates. Refer to online Chrome tutorials on how to do this. Firefox lets you continue to the WebVisu site without requiring this step.
(5). Add the Visualization object by right-clicking on Application in the Device Tree, selecting Add Object > Visualization. Use default name and select VisuSymbols as Active.
(6). Setup the name of WebVisu htm file by expanding the Visualization Manager and double-clicking on WebVisu. The image below shows the WebVisu name changed to mywebvisu. This name needs to be all lower case.
Obtain IP Address of PLC
In the next steps, you wil identify the IP Address for the PLC. This will be the IP Address for the Web Server- mywebvisu.htm.
(7). Build the project. Login and Download into PLC. Verify the green Run Icons are in the device tree.
(8). Double-click on P2CDS622_NetConfig. Confirm which Ethernet port you are connected to and verify the IP Address desired. You will need the IP Address to be able to connect to the WebVisu from an external device.
Create a Visualization
(9). Double-click on Visualization and create your HMI. Refer to the links below for detailed help.
The Web Server generated certificates will be used to enable an HTTPS connection.
Access your HMI via the secure URL HTTPS by using port 443. Note- 8080 is used for non-secure for HTTP.
(10). In a browser type https://x.x.x.x:443/mywebvisu.htm where x.x.x.x = your IP address e.g. 192.168.5.67 from previous.
Your page should be displayed in the browser.
Note
The browser establishes a connection. If the certificate is not rated as trusted (due to be “self signed”), then a security notice appears. Click okay, etc. to continue. Some browsers like Chrome may require installing this certificate into it’s security section. Firefox does not require installation.
Detailed Help Areas
General Tutorial: General Visu
Multiple Data Types from Arrays, to Strings, etc. can be displayed. The following link gives an example of displaying some text and an associated integer value (%i Data Type) Visu Mixed Text/Data
The links below give additional information for incorporating Security into WebVisu utilizing HTTPS and security certificates:
There are also many example videos online illustrating the WebVisu application.