This tutorial demonstrates how to add visualizations to the project and link the elements of the visualization to the variables of the control program.
This tutorial is based on the sample program RefigeratorControl
, which was created in the section "Your First Program in CODESYS". The finished project is located in the found in the "Projects" subfolder of the CODESYS installation directory.
The visualization consists of the following three visualization screens:
Visualization
: Control elements and display of the refrigerator
Diagnosis
: History of the set and actual temperature, parameter settings
Live Visu
: Animation with refrigerator
Select the Application object in the device tree.
Click
.
Specify Live_Visu
as the name.
Create two more visualizations with the names Diagnosis
and Visualization
.
Visualization
visualization
This screen consists of control and display elements that control the refrigerator.
Numeric display of the actual temperature
Pointer to display of the actual temperature
Numeric display of the set temperature
Potentiometer for setting the set temperature
Label for compressor lamp
Lamp for compressor on
Label for signal lamp
Lamp for signal "Close doors"
Switch for opening and closing the refrigerator door
Open the Visualization
visualization in the editor.
Drag a Rectangle visualization element to the editor.
Change the following properties:
:
Actual temperature: %2.1f °C
:
Glob_Var.rTempActual
Drag a Meter 180° visualization element to the editor.
Change the following properties:
:
Glob_Var.rTempActual
: 20
: 5
: 1
Drag a Rectangle visualization element to the editor.
Change the following properties:
:
Temperature presetting: %.1f °C
:
Glob_Var.rTempSet
Drag a Potentiometer visualization element to the editor.
Change the following properties:
:
Glob_Var.rTempSet
yellow
:red
:Outward
:: 3
: 13
: 1
: 1
: °C
: %.0f
: 21
:15
Drag a Label visualization element to the editor.
Change the following properties:
:
Cooling compressor
Drag a Lamp visualization element to the editor. Position it behind the text Cooling compressor
.
Change the following properties:
:
Glob_Var.bCompressor
Drag a Label visualization element to the editor.
Change the following properties:
:
Signal (beep)
Drag a Lamp visualization element to the editor. Position it behind the text "Signal (beep)".
Change the following properties:
:
Glob_Var.bSignal
:
Red
Drag a Rectangle visualization element to the editor.
Change the following properties:
:
Door open
Drag a Rocker switch visualization element to the editor.
Change the following properties:
:
Glob_Var.rDoorOpen
Diagnosis
visualization
In this screen, you can monitor the temperature curve and optimize the parameters.
Label elements for the heading
Trace element for displaying the temperature curve
Rectangle elements for displaying the values
Open the Diagnosis
visualization in the editor.
Drag a Label visualization element to the editor.
Change the following properties:
: Refrigerator Diagnosis & Service Menu
: Arial, Standard, 18
Drag a Trace visualization element to the editor.
Click the Diagnosis_Trace1
value of the Trace property.
⇒ The Trace Configuration dialog opens.
Select the MainTask in Task.
Click the Add Variable link.
⇒ A variable is added to the trace. The variable settings are displayed in the dialog.
Select Glob_Var.bCompressor
for the variable.
Add the Glob_Var.rTempSet
and Glob_Var.rTempActual
variables to the trace. For the other settings, you can use the default values.
Click OK to close the dialog.
Drag a Rectangle visualization element to the editor. Position it on he right next to the trace element.
Change the following properties:
: %s
: PLC_PRG.rHysteresis
Configure the OnMouseDown input configuration of the element. Click .
⇒ The Input Configuration dialog opens.
Assign the Write Variable command to the action. Accept the default values and click OK.
Drag a Label visualization element to the editor. Position it over the first rectangle.
Change the following properties:
: Hysteresis Regulator
Adjust the size and position of both elements.
Select both of the Rectangle and Label elements and duplicate them by means of copy and paste.
Adjust the labels and variables of the copied elements.
Text:
Compressor Efficiency
, Text variable:Simulation.P_Cooling
Text:
Environment Efficiency
, Text variable:Simulation.P_Environment
Text:
Environ. Efficiency DoorOpen Sim
, Text variable:Simulation.P_EnvironmentDoorOpen
Text:
Time until Beep for DoorOpen
, Text variable:Glob_Var.timDoorOpenThreshold
Text:
Time until Beep for Compressor On
, Text variable:Glob_Var.timAlarmThreshold
See also
This screen includes the representation of a refrigerator. The refrigerator consists of several polygon type visualization elements. The doors of the refrigerator are drawn in both the closed and open states. Both doors consist of a group of single elements.
Open the Live_Visu
visualization in the editor.
Select the Polygon visualization element in the Toolbox view.
Click several times in the editor to create a surface. Right-click to stop adding corner marks.
Move the corner marks to the required position so that the element (1) is formed.
⇒
Select the element.
Change the following properties:
:
![]()
Invisible
:
Click in the property
.Select the color Gray for Color 1 in the Color gradient editor dialog.
⇒
Create all other elements with the Polygon visualization element.
Group the elements of the closed doors (2+3+4) and the open doors (5+6+7+8). Select the elements by pressing the Shift key and clicking .
Move the elements together so that the completed refrigerator is formed. Position the open doors precisely on the closed doors.
Select the "Open doors" group.
In the properties, double-click the input field
.Open the input assistance by pressing F2.
Select the rDoorOpen
variable in the Variables category (below ).
Negate the variable with NOT
(--> NOT Glob_Var.rDoorOpen).
⇒ If the rDoorOpen
variable is FALSE (door is closed), then the element is invisible. Then the underlying doors are visible.
Copy the following elements from the Visualization
screen:
Potentiometer for setting the temperature
Rectangle for displaying the set temperature
Door open
switch
Cooling compressor
lamp
Signal (beep)
lamp
Insert the elements from the clipboard to the Live_Visu
visualization screen.
Reduce the elements and position them on the refrigerator.
⇒
When the visualization is complete, test it in simulation mode.
Click
.Click
.⇒ A dialog opens and prompts you to create and download the application.
Click Yes to confirm the dialog.
Click
.
Open the Live_Visu
visualization in the editor.
⇒ The refrigerator in online mode.
Open the doors with the switch and monitor the temperature and the alarms. Change the parameters in the Diagnosis
screen and watch the reaction in the temperature curve.