Using Client Animation

The example shows a visualization with 3 screens. A menu controls the navigation of the screens. The menu is hidden until it moves into view by means of a hamburger button. During the movement, the transparency of the menu is changed. After the screen is selected, the menu moves back out of view. The animation is computed entirely on the target system. The CODESYS visualization only defines the target values (positions, transparency).

1. Preparation

  1. Create a new standard project with the CODESYS Control Win V3 controller.

  2. Add a Visualization object below the Application. Choose the name Visu_Main.

  3. Remove the TargetVisu object below the Visualization Manager.

  4. Open the Visualization Manager in the editor and select the Preview: Support client animations and overlay of native elements option.

See also

2. Creating the PLC_PRG program

The program checks whether the menu button has been pressed. If the menu bar is not visible (position –300), then the position is moved to the visible area (0). If the menu bar is already visible (position 0), then the position is moved to the hidden area.

  1. Open the PLC_PRG program in the editor.

  2. Input the following code into the declaration editor: 

    PROGRAM PLC_PRG
VAR
        iSelection : INT;                             // to switch the referenced visualization page
        xVisible: BOOL;                                // auxiliary variable to toggle the menu bar
        iMenuPos : INT := -300;                    // position of the menu bar
        xToggle: BOOL;                          // button variable to toggle the menu bar
END_VAR

  3. Input the following code into the implementation: 

    IF xToggle THEN
        xToggle := FALSE;
        IF xVisible THEN
                xVisible := FALSE;
                iMenuPos := -300;
        ELSE
                xVisible := TRUE;
                iMenuPos := 0;
        END_IF
END_IF

3. Creating the menu bar

The menu bar has 3 menu items. A visualization screen is displayed by clicking the corresponding menu item.

  1. Insert a Visu_Menu visualization below the application.

  2. Open the object properties. In the Visualization tab, set the Visualization size to a Width of 300 and a Height of 180.

  3. Open the visualization in the editor.

  4. Select the Advanced option in the Properties view.

  5. In the upper left corner, add a button with a Width of 300 and a Height of 60.

  6. Label the button as "Visu 1". Set the font size to 24.

  7. Open the Inputconfiguration ‣ OnMouseClick property.

  8. Select the Execute ST-Code action.

  9. Input the following ST code: 

    PLC_PRG.iSelection := 0;
PLC_PRG.xToggle := TRUE;

  10. Set the Button state variable ‣ Digital variable property to PLC_PRG.iSelection=0

  11. Add two more buttons named "Visu 2" and "Visu 3".

  12. Edit the button properties of "Visu2" (PLC_PRG.iSelection = 1) and "Visu3" (PLC_PRG.iSelection = 2).

    ⇒ Result:

4. Creating more visualization screens

  1. Insert the "Visu1" visualization below the application.

  2. Open the object properties. In the Visualization tab, set the Visualization size to a Width of 800 and a Height of 600.

  3. Change the background color of the screen (for example, light gray).

  4. Insert a Label object into the visualization screen and name the element (example: "Visu 1").

  5. Insert two more visualizations "Visu2" and "Visu3" below the application. Edit the properties in the same way as for "Visu1".

5. Creating the main visualization screen

On this screen, you can see the menu bar and a button to show or hide the menu bar. The different visualization screens are navigated in a Frame visualization element.

  1. Open the properties of the Visu_Main visualization. In the Visualization tab, set the Visualization size to a Width of 800 and a Height of 600.

  2. Open the visualization in the editor.

  3. Insert a Frame element into the visualization.

    ⇒ The Frame Configuration dialog opens.

  4. Add the Visu1 (Index 0), Visu2 (Index 1), and Visu3 (Index 2) visualizations.

  5. Set the property values of Position as follows: X = 0, Y = 0, Width = 800, and Height = 600.

  6. Set the property value of Toggle variable ‣ Variable to PLC_PRG.iSelection.

  7. Insert a Button element into the visualization.

  8. Set the property values of Position as follows: X = 0, Y = 0, Width = 60, and Height = 60.

  9. Set the property value of Texts ‣ Text to =.

  10. Set the property value of Text properties ‣ Font to Arial; 36.

  11. Open the Inputconfiguration ‣ OnMouseClick property.

  12. Select the Execute ST-Code action.

  13. Input the following ST code: 

    PLC_PRG.xToggle := TRUE;

  14. Set the property value of Button state variable ‣ Digital variable to PLC_PRG.xVisible.

  15. Insert the Visu_Menu visualization element from the Current Project category into the visualization.

  16. Set the property values of Position as follows: X = 0, Y = 0, Width = 300, and Height = 180.

  17. Set the property value Absolute movement ‣ Movement ‣ X to PLC_PRG.iMenuPos.

  18. Set the property value of State variables ‣ Invisible to not(PLC_PRG.xVisible).

  19. Set the property value of Animation duration to 2000.

    ⇒ Result:

See also

6. Downloading the project to the controller and starting the WebVisu

  1. Build the project and download it to the PLC.

  2. Start the project.

  3. In the browser, connect to the visualization (http://localhost:8080).

    ⇒ The WebVisu connects to the controller and the visualization opens.

  4. In the visualization, click the menu button.

    ⇒ The menu moves into view.

  5. Select a menu item.

    ⇒ The visualization screen is selected and the menu moves back out of view.

See also

3.5.16.0

© Copyright 2021, CODESYS GmbH