dl-breadcrumbs__homedl-breadcrumb-item__separatorConfiguration and programmingdl-breadcrumb-item__separatorProgramming with CODESYSdl-breadcrumb-item__separator...dl-breadcrumb-item__separatorCODESYS Visualizationdl-breadcrumb-item__separatorTutorialdl-breadcrumb-item__separatorVisualizing a Refrigerator Controller
dl-pagination__prev-inactivedl-pagination__prev-activedl-pagination__next-inactivedl-pagination__next-active
Visualizing a Refrigerator Controllerdl-permalink__symbolPermalink

This tutorial demonstrates how to add visualizations to the project and link the elements of the visualization to the variables of the control program.

Preparation

This tutorial is based on the sample program ‎RefigeratorControl‎, which was created in the "Your First Program in CODESYS" chapter. The finished program can also be found in the installation directory of CODESYS, in the "Projects" subfolder.

Creating the visualizations

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

  1. Select the “Application” object in the device tree.

  2. Click “Project  Add Object  Visualization”.

  3. Specify ‎Live_Visu‎ as the name.

  4. Create two more visualizations with the names ‎Diagnosis‎ and ‎Visualization‎.

Structure of the visualization ‎Visualization‎

This screen consists of control and display elements that control the refrigerator.

_visu_img_tutorial_refrigerator_elements_control

  • (1) Numeric display of the actual temperature

  • (2) Pointer to display of the actual temperature

  • (3) Numeric display of the set temperature

  • (4) Potentiometer for setting the set temperature

  • (5) Label for compressor lamp

  • (6) Lamp for compressor on

  • (7) Label for signal lamp

  • (8) Lamp for signal "Close doors"

  • (9) Switch for opening and closing the refrigerator door

  1. Open the visualization ‎Visualization‎ in the editor.

  2. Drag a “Rectangle” visualization element to the editor.

    Change the following properties

    • “Texts  Text”: ‎Actual temperature: %2.1f °C‎

    • “Text variables  Text variable”: ‎Glob_Var.rTempActual‎

  3. Drag a “Meter 180°” visualization element to the editor.

    Change the following properties

    • “Value”: ‎Glob_Var.rTempActual‎

    • “Scale  Scale end”: 20

    • “Scale  Main scale”: 5

    • “Scale  Subscale”: 1

  4. Drag a “Rectangle” visualization element to the editor.

    Change the following properties

    • “Texts  Text”: ‎Temperature presetting: %.1f °C‎

    • “Text variables  Text variable”: ‎Glob_Var.rTempSet‎

  5. Drag a “Potentiometer” visualization element to the editor.

    Change the following properties

    • “Variable”: ‎Glob_Var.rTempSet‎

    • “Background  Background color”: “yellow”

    • “Pointer  Color”: “red”

    • “Scale  Subscale position”: “Outward”

    • “Scale  Scale start”: 3

    • “Scale  Scale end”: 13

    • “Scale  Subscale”: 1

    • “Scale  Main scale”: 1

    • “Label  Unit”: °C

    • “Label  Scale format (C syntax)”: %.0f

    • “Label  Max. text width of labels”: 21

    • “Label  Height of labels”:15

  6. Drag a “Label” visualization element to the editor.

    Change the following properties

    • “Texts  Text”: ‎Cooling compressor‎

  7. Drag a “Lamp” visualization element to the editor. Position it behind the text ‎Cooling compressor‎.

    Change the following properties

    • “Variable”: ‎Glob_Var.bCompressor‎

  8. Drag a “Label” visualization element to the editor.

    Change the following properties

    • “Texts  Text”: ‎Signal (beep)‎

  9. Drag a “Lamp” visualization element to the editor. Position it behind the text "Signal (beep)".

    Change the following properties

    • “Variable”: ‎Glob_Var.bSignal‎

    • “Background  Image”: ‎Red‎

  10. Drag a “Rectangle” visualization element to the editor.

    Change the following properties

    • “Texts  Text”:‎Door open‎

  11. Drag a “Rocker Switch” visualization element to the editor.

    Change the following properties

    • “Variable”: ‎Glob_Var.rDoorOpen‎

Structure of the visualization ‎Diagnosis‎

In this screen, you can monitor the temperature curve and optimize the parameters.

_visu_img_tutorial_refrigerator_diagnosis

  • (1) “Label” elements for the heading

  • (2) “Trace” element for displaying the temperature curve

  • (3) “Rectangle” elements for displaying the values

  1. Open the visualization ‎Diagnosis‎ in the editor.

  2. Drag a “Label” visualization element to the editor.

    Change the following properties

    • “Texts  Text”: Refrigerator Diagnosis & Service Menu

    • “Text properties  Font”: Arial, Standard, 18

  3. Drag a “Trace” visualization element to the editor.

  4. Click the ‎Diagnosis_Trace1‎ value of the “Trace” property.

    The “Trace Configuration” dialog opens.

  5. Select the “MainTask” in “Task”.

  6. Click the “Add Variable” link.

    A variable is added to the trace. The variable settings are displayed in the dialog.

  7. Select ‎Glob_Var.bCompressor‎ for the variable.

  8. Add the ‎Glob_Var.rTempSet‎ and ‎Glob_Var.rTempActual‎ variables to the trace. For the other settings, you can use the default values.

  9. Click “OK” to exit the dialog.

  10. Drag a “Rectangle” visualization element to the editor. Position it on he right next to the trace element.

    Change the following properties

    • “Texts  Text”: %s

    • “Text variables  Text variable”: PLC_PRG.rHysteresis

  11. Configure the “OnMouseDown” input configuration of the element. Click “Input configuration  OnMouseDown  Configure”.

    The “Input Configuration” dialog opens.

  12. Assign the “Write Variable” command to the action. Accept the default values and click “OK”.

  13. Drag a “Label” visualization element to the editor. Position it over the first rectangle.

    Change the following properties

    • “Texts  Text”: Hysteresis Regulator

  14. Adjust the size and position of both elements.

  15. Select both of the “Rectangle” and “Label” elements and duplicate them by means of copy and paste.

  16. 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‎

Structure of the visualization 'Live Visu'

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.

_visu_img_tutorial_refrigerator_elements

  1. Open the ‎Live_Visu‎ visualization in the editor.

  2. Select the “Polygon” visualization element in the “Visualization Toolbox” view.

  3. Click several times in the editor to create a surface. Right-click to stop adding corner marks.

  4. Move the corner marks to the required position so that the element (1) is formed.

    _visu_img_tutorial_polygon1

  5. Select the element.

    Change the following properties:

    • “Colors  Use gradient color”: _cds_icon_option_activated

    • “Appearance  Line style”: “Invisible”

  6. Click the “Colors  Use gradient color” property.

  7. Select the color “Gray” for “Color 1” in the “Gradient Editor” dialog.

    _visu_img_tutorial_polygon2

  8. Create all other elements with the “Polygon” visualization element.

  9. Group the elements of the closed doors (2+3+4) and the open doors (5+6+7+8). To do this, press the [Shift] key and click “Visualization  Group” to select the elements.

  10. Move the elements together so that the completed refrigerator is formed. Position the open doors precisely on the closed doors.

  11. Select the "Open doors" group.

  12. In the properties, double-click the input field “State variable  Invisible”.

  13. Press [F2] to open the Input Assistant.

  14. Select the ‎rDoorOpen‎ variable in the “Variables” category (below “Application  Glob_Var”).

  15. 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.

  16. 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

  17. Insert the elements from the clipboard to the ‎Live_Visu‎ visualization screen.

  18. Reduce the elements and position them on the refrigerator.

    _visu_img_tutorial_refrigerator_complete

Visualization in online mode (simulation)

When the visualization is complete, test it in simulation mode.

  1. Click “Online  Simulation”.

  2. Click “Online  Login”.

    A dialog opens and prompts you to create and download the application.

  3. Click “Yes” to confirm the dialog.

  4. Click “Debug  Start”.

  5. Open the visualization ‎Live_Visu‎ in the editor.

    The refrigerator is in online mode.

  6. Open the doors with the switch and monitor the temperature and the alarms. Change the parameters in the screen ‎Diagnosis‎ and watch the reaction in the temperature curve.