Welcome to the next lesson of the free CODESYS Mini-Course! 🚀
So far, you’ve created your first programs in Ladder and Structured Text, and built a circuit for starting and stopping a motor with hold functionality.
Now it’s time for something that makes working with PLCs more intuitive and tangible — Visualization.
Why Use Visualization?
Programming PLCs isn’t just about writing code.
Visualization is equally important because it:
- allows you to monitor the program in real time,
- enables you to operate devices using buttons and indicator lamps,
- can be displayed in a web browser or on an HMI panel (e.g. Weintek, Deepsea Electronics).
With visualization, you can test programs more easily, learn faster, and diagnose errors more efficiently.
Creating a Visualization in CODESYS – Step by Step
Add a Visualization Manager
- In the project tree, right-click Application → Add Object.
- Select Visualization Manager and confirm.
- Leave the visualization style as Default.
Add a Visualization
- Again, right-click Application → Add Object.
- Select Visualization and click Add.
- A blank canvas will open — this is where you’ll build your interface.
Add Elements from the Toolbox
On the right side, you’ll find the Visualization Toolbox.
- Drag a Push Switch and add it as Start.
- Add a second Push Switch as Stop.
- Add a Lamp — it will indicate the motor’s running state.
Link Variables
- Assign variable xStartBtn to the Start button.
- Assign variable xStopBtn to the Stop button.
- Assign variable xMotorOnOff to the lamp.
Improve the Appearance
- Set the Start button background color to green.
- Set the Stop button color to red.
- Set the Lamp to green.
Testing the Visualization
- Go to Online → Login and download the program to the simulator.
- Click Start — the motor starts and the lamp turns green.
- Click Stop — the motor stops.
👉 By default, the buttons are bistable — they keep their state after being clicked.
You can switch their mode to monostable (Image Toggler) to make them behave like real pushbuttons that return to the initial state.
Summary
In this lesson, you learned how to:
✔ add a Visualization Manager in CODESYS,
✔ use built-in elements such as buttons and lamps,
✔ link them to program variables,
✔ test your control logic in the simulator with visualization.
Using just a few basic elements, you built your first HMI visualization, which can be displayed in a web browser or uploaded to an operator panel.
Author
