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 section “Your First Program in CODESYS”. The finished project is located in the found in the “Projects” subfolder of the CODESYS installation directory.

See also

• Your First: _cds_quick_guide

Creating visualizations

The visualization consists of the following three 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 Visualization visualization

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

• 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 Diagnosis visualization

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

• 1. Label elements for the heading
• 2. Trace element for displaying the temperature curve
• 3. Rectangle elements for displaying the values

1. Open the Diagnosis visualization 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 box 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 close the dialog box.

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 box 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

See also

• Dialog ‘Input Configuration’

Structure of 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.

1. Open the Live_Visu visualization in the editor.

2. Select the Polygon visualization element in the 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.

   ⇒

   

5. Select the element.

   Change the following properties:

   • Colors ‣ Use gradient color:
   • Appearance ‣ Line style: Invisible

6. Click in the property Colors ‣ Use gradient color.

7. Select the color Gray for Color 1 in the Color gradient editor dialog.

   ⇒

   

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). Select the elements by pressing the Shift key and clicking Visualization ‣ Group.

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 variables ‣ Invisible.

13. Open the input assistant by pressing F2.

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.

    ⇒

    

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 Live_Visu visualization in the editor.

   ⇒

   The refrigerator in online mode.

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