Skip to main content

Tutorial: Visualizing a Refrigerator Controller

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.

For more information, see the following: Your First CODESYS Program

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. In the device tree, click the Application object.

  2. Click the Project → Add Object → Visualization command.

  3. Specify the name as Live_Visu.

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

Structure of the visualization Visualization

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

_visu_img_tutorial_refrigerator_elements_control.png

  • _1_r.png: Numeric display of the actual temperature

  • _2_r.png: Pointer to display of the actual temperature

  • _3_r.png: Numeric display of the set temperature

  • _4_r.png: Potentiometer for setting the set temperature

  • _5_r.png: Label for compressor lamp

  • _6_r.png: Lamp for compressor on

  • _7_r.png: Label for signal lamp

  • _8_r.png: Lamp for signal "Close doors"

  • _9_r.png: Switch for opening and closing the refrigerator door

  1. Open the visualization Visualization in the editor.

  2. Drag a Rectangle visualization element into 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 into 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 into the editor.

    . Change the following properties

    • Texts → Text: Cooling compressor

  7. Drag a Lamp visualization element into the editor. Position it behind the "Cooling compressor“ text.

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

  1. Label elements for the headline

  2. Trace element for displaying the temperature curve

  3. Rectangle elements for displaying the value

  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 Live-Visu visualization

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

  1. Open the visualization Live_Visu 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 _1_r.png element (1) is formed.

    _visu_img_tutorial_polygon1.png

  5. Select the element.

    . Change the following properties:

    • Colors → Use gradient color: _cds_icon_checked.png

    • Appearance → Line style: Invisible

  6. Click the Colors → Use gradient color property.

  7. In the Gradient Editor dialog, select the color Gray for Color 1.

    _visu_img_tutorial_polygon2.png

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

  9. Group the elements of the closed door (_2_r.png, _3_r.png, and _4_r.png) and the elements of the open door (_5_r.png, _6_r.png, _7_r.png, and _8_r.png). To do this, press the Shift key and click the Visualization → Group command 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 State variable → Invisible input field.

  13. Press the F2 key to open the Input Assistant.

  14. In the Variables category, select the rDoorOpen variable (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.

    When the rDoorOpen variable is FALSE (door is closed), 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.png

Visualization in online mode (simulation)

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

  1. Click the Online → Simulation command.

  2. Click the Online → Login command.

    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.

: