Contact Us: (425) 745-3229

The leader in industrial automation and control solutions
Maple Systems

Close Menu

Account
Cart
Send Email
Call Us

How to use CODESYS WebVisu on a Web HMI

Posted on Updated on

Engineers use CODESYS WebVisu for easy access to CODESYS visualizations. Follow this step-by-step example of how to display CODESYS WebVisu on a Maple Systems Web HMI for convenient access anywhere in your facility.

Codesys Dashboard Hero

Table of Contents

The CODESYS programming software includes powerful visualization tools that can collect and display information in a customized format. For better access to these informational displays, CODESYS projects are accessible through web browsers or Web HMIs. One of the best ways to get this access is through the CODESYS Linux SL Runtime on an Industrial PC using the CODESYS WebVisu functionality.

To do this, developers must use the CODESYS development environment on a PC, remotely connect to a target system—like an IPC running Ubuntu Linux—and install the CODESYS Control for Linux SL Runtime to use the system as a software-based PLC, or SoftPLC. Then, the project can be compiled and downloaded to the IPC, allowing it to operate a Web Visualization instance for browsers or Web HMIs to access and view.

Here, we’ll run through how to use Web HMI to visualize a CODESYS Linux SoftPLC Runtime with WebVisu.

Example Hardware

  • Any 64-bit PC capable of running Linux
  • Web HMI (WP4070AP)

Example Software

  • PC Operating System: Ubuntu Server 24.04 LTS
  • CODESYS v3.5 SP21
  • CODESYS Control for Linux SL Runtime
  • CODESYS Project Libraries (as needed)

Update CODESYS repositories and packages

1) Log in to the Linux device.

2) Open the shell and update the package repositories.

user@hostname:~$ sudo apt-get update && sudo apt-get upgradeCode language: JavaScript (javascript)

Note: Replace all instances of “user@hostname:~$” with the user name of your local system.

Create CODESYS runtime user on target system

3) Create a basic user that has sudo privilidges for operating the CODESYS runtime.

user@hostname:~$ sudo useradd -m -G sudo codesys-admin

4) Update the CODESYS user’s password.

user@hostname:~$ sudo passwd codesys-admin

Install CODESYS runtime to target system

5) Launch CODESYS and open the demo project.

6) Navigate to Tools > Deploy Control SL.

Tools Deploy CODESYS

7) Under the Communication tab, enter the IP address of the Linux box that will be running the CODESYS runtime and the username and password configured in steps 3 and 4. Select Connect.

Deploy Control Communication Acct Info CODESYS WebVisu

8) Under the Deployment tab and Product and Version dropdowns, select the latest CODESYS Control for Linux SL and CODESYS Edge Gateway for Linux packages. Select Install to install the runtime to the Linux box.

Deploy CODESYS Control for Linux

Download application to target system and visualize in a browser

CODESYS WebVisu hosts a web server/application as a .htm file for browsers to access. By default, the server runs on port 8080 of the host to file “webvisu.htm.” This demo project uses the same port, but the filename was changed to “maple_demo_webvisu.htm.” The default resolution was also changed to match the WP4070AP’s screen resolution.

CODESYS Devices WebVisualiton htm file

9) Open the target system by selecting the Login icon. Enter credentials for the CODESYS user as necessary and select options to compile the project/upload it.

Settings CODESYS WebVisu

10) After uploading the project application successfully, select the Run icon.

Start CODESYS WebVisu

11) With a device on the same network as the Target System, use a web browser to navigate to the URL of
the web server hosted by the CODESYS runtime for the WebVisu.

By default CODESYS WebVisu will create a web server that can be accessed through a web browser on port 8080 of the CODESYS device’s hostname or IP address. The URL will look like: http://[IP address]:8080 or http://[hostname]:8080.

CODESYS WebVisu Dashboard Example

Configuring WebVisu display on a WP4000 Series Web HMI

1) Power on the WP4000 Series Web HMI. Select the System Settings icon before the timeout expires.

Loading screen of WP4000 Series Web HMI.

2) Select the Web Access icon (second from the top) to access the Web Application page. Sign in.

Enter the URL and select it on the Web Application Page of the WP4000 Series Web HMI.

3) Enter URL of CODESYS WebVisu instance. Ensure the URL bullet is selected (it will be highlighted orange). This indicates that URL will be used at startup.

4) Select Save. A message will appear after succesfully saving.

Save the selected URL and exit to the homescreen.

5) Select the Home icon and then select Reboot.

6) Allow the timeout to expire. The Web HMI will boot and load the WebVisu page.

Configuring WebVisu display on a cMT W Series Web HMI

1) Power on the cMT W series Web HMI. Select the System Settings icon before the timeout expires.

2) Log in to the EasyWeb 2.0 interface.

Main dashboard of EasyWeb 2.0 on a cMT W Web HMI

3) Navigate to Web Browser > Web Browser Setting in the side toolbar.

Navigate to the Web Browser Settings in the cMT W Web HMI

4) Enter the URL of the CODESYS WebVisu instance.

Edit the default website on to match the Codesys WebVisu IP.

5) Select Save. A message will appear after succesfully saving.

Save the default website and reboot.

6) Select EXIT at the top-right. Wait for the timeout to expire. The cMT W Series Web HMI will load the WebVisu page.

Learn more with Maple Systems

Need help building a new network or programming your first PLC? Maple Systems has a library of technical and educational resources to help. View our support pages for tutorials, tech notes, sample projects, and more.

Contact us

Contact our sales team for pricing, availability, and support. Email sales@maplesystems.com or call (425) 745-3229.

Dalton Puffer Avatar

About the Author

Dalton Puffer
Dalton is a Technical Writer at Maple Systems. He’s spent nearly a decade creating web content and technical documentation for some of the biggest brands in the tech industry.