Connecting frame visualizations with a radio buttons element

1. Create a new standard project in CODESYS.

2. Select the application in the device tree and click “Add Object  Visualization”.

3. In the “Add Visualization” dialog, specify the name ‎VisuMain‎ and click “Add” to close the dialog.

4. Select the application in the device tree and click “Add Object  Visualization”.

5. In the “Add Visualization” dialog, specify the name ‎Visu1‎ and click “Add” to close the dialog.

6. Select the application in the device tree and click “Add Object  Visualization”.

7. In the “Add Visualization” dialog, specify the name ‎Visu2‎ and click “Add” to close the dialog.

8. Select the application in the device tree and click “Add Object  Visualization”.

9. In the “Add Visualization” dialog, specify the name ‎Visu3‎ and click “Add” to close the dialog.

   In addition to the main visualization, there are three more visualization objects.

10. Open the ‎Visu1‎ object.

11. In the “Visualization ToolBox”, in the “Basic” category, select and drag the “Radio Buttons” element to the visualization editor.

    The “Properties” view of the element opens.

12. Configure the properties of the rectangle as follows:

    • “Texts”, “Text” property: ‎Visu1‎

    • “Text properties”, “Font” property: “Title”

    • “Colors”, “Normal state”, “Fill color” property: “Light gray”

    

13. Program the object ‎Visu2‎ accordingly.

    Properties of the rectangle:

    • “Texts”, “Text” property: ‎Visu2‎

    • “Text properties”, “Font” property: “Title”

    • “Colors”, “Normal state”, “Fill color” property: “Gray”

14. Program the object ‎Visu3‎ accordingly.

    Properties of the rectangle:

    • “Texts”, “Text” property: ‎Visu3‎

    • “Text properties”, “Font” property: “Title”

    • “Colors”, “Normal state”, “Fill color” property: “Dark gray”

15. Open the ‎VisuMain‎ object.

16. In the “Visualization ToolBox”, in the “Basic” category, select and drag the “Frame” element to the visualization editor.

    The “Frame Configuration” dialog opens.

17. In the “Available Visualizations” window area, on the “By Visualization Name” tab, select the object ‎Visu1‎. In “Selected Visualizations”, click “Add”.

18. Then select the object ‎Visu2‎ and click “Add” in “Selected Visualizations”.

19. Then select the object ‎Visu3‎ and click “Add” in “Selected Visualizations”.

20. Click “OK” to exit the dialog.

    Now the “Frame” element references the three selected visualizations. The references (1) are listed in the “References” property in the element properties of the “Frame” element. In addition to the visualization name, the corresponding index value (2) is also displayed.

    

    Note: You can open the dialog when you click the “Configure” button in the value field of the “References” property. See (3). You can influence the index by means of the visualization order in the “Selected Visualizations” list.

21. In the “Visualization ToolBox”, in the “Common Controls” category, drag the “Radio Buttons” element to the visualization editor.

    The “Properties” view of the element opens.

22. In the “Radio button settings”, “Radio button”, click the “Create new” button.

    This element has three switches to select from.

23. Configure the properties of the radio button as follows:

    • “Radio button settings”, “Areas”, “[0]”, “Text” property: ‎Visu1‎

    • “Radio button settings”, “Areas”, “[1]”, “Text” property: ‎Visu2‎

    • “Radio button settings”, “Areas”, “[2]”, “Text” property: ‎Visu3‎

    

24. In the ‎PLC_PRG‎ program, declare a local variable for the number of the visualization that is active.

                                        VAR
                                        iActiveVisu : INT; // Index of visu activated by the user
                                        END_VAR
                                    

25. Select the “Radio Buttons” element and in the value field of the “Variable” property, click the button.

26. In the “Input Assistant” dialog, select the recently declared variable. Then exit the dialog.

    Property of the “Radio Buttons” element:

    • “Variable”: ‎PLC_PRG.iActiveVisu‎

27. Select the “Frame” element. Click in the value field of the “Switch frame variable”, “Variable” property. Specify the recently declared variable here as well.

    Property of the “Frame” element:

    • “Switch frame variable ”, “Variable” property: ‎PLC_PRG.iActiveVisu‎

    The control variable of the “Radio Buttons” element is also the switch frame variable of the “Frame” element. User input for the “Radio Buttons”element switches the frame visualization.

28. Click “Build  Generate Code”.

29. Click “Online  Login” and start the application.

    The visualization starts. One of the referenced visualizations is running in the frame. When you click an unselected option of the “Radio Buttons” element, the visualization switches the contents in the frame to the desired visualization.