Displaying Visualizations in a Visualization

You can display visualizations within a main visualization by adding either the element Frame or the element Tab control. They serve as the window area element for the referenced visualizations and define the display area. In addition, they specify which visualizations are referenced. They appear under the property References.

In the case of the element Frame, the visualizations can be displayed in succession in the window area and can be toggled. The variables of the property Switch frame variable ‣ Variable control which visualization is displayed and when. For this you program the variables in the application or in the user input configuration. However, you can only reference one visualization.

In the case of the element Tab control you assign several visualizations to the property References. One of the referenced visualizations is in the foreground, while the others are hidden “behind it”. The user can navigate between them using the automatically available tabs.

Referencing a visualization in a frame

  1. Select the application in the device tree and add a further visualization with the name visFrame.

    ⇒

    The visualization editor opens.

  2. Search for visEllipse in the view ToolBox and drag the element into the editor.

    ⇒

    A frame appears under whose property References the visualization visEllipse is listed.

  3. Configure the property Show frame with Frame.

  4. You can add further elements.

    ⇒
    ../_images/a4735e7781157053c0a8640e01414aa7

  5. Select Online ‣ Login for your device and start the application.

    ⇒

    The visualization opens and displays the referenced visualization.

See also

Referencing visualizations in a frame and toggling them

  1. Select the application in the device tree and add a further visualization with the name visMain.

    ⇒

    The visualization editor opens.

  2. Select the element Frame from the view ToolBox and drag it into the editor.

    ⇒

    The dialog Frame Configuration opens.

  3. Double-click on one of the visualizations listed under Available Visualizations. Example: visEllipse.

    ⇒

    The visualization appears under Selected Visualizations.

  4. Select further visualizations: visRectangle and visRoundedRectangle.

    ⇒

    The visualizations also appear under Selected Visualizations. The visualizations are automatically numerically indexed via the order in the list.

  5. Exit the dialog with OK.

    ⇒

    The visualization contains a new element of the type Frame. The 3 selected visualizations appear under its property References.

    In the editor the frame is displayed as a frame in which the visualization is displayed with the index 0.

  6. Declare a switch frame variable in the application code:

    PROGRAM PLC_PRG

    VAR

    uiSwitch : UINT;

    END_VAR

  7. Select the frame and assign the variables in its property Switch frame variable: PLC_PRG.uiSwitch

  8. Drag an element Button into the editor and enter a label in its property Text: Next visualization

  9. Click on Configure under the property Input Configuration, OnMouseDown.

  10. Select Execute ST-Code and click on 16f2526cfd467502c0a8640e009fa810_f82f627ffc257675c0a8640e0172793b .

  11. Enter the following code: PLC_PRG.uiSwitch := (PLC_PRG.uiSwitch + 1) MOD 3;

    ⇒

    The switch frame variable of the frame is incremented on the click event.

  12. Select the menu command Create ‣ Compile.

  13. Select Online ‣ Login for your device and start the application.

    ⇒

    The visualization starts. It contains a frame in which one of the referenced visualizations is running. On clicking on the button, the visualization toggles the content in the frame to the next referenced visualization.

    ../_images/1319d09381425867c0a8640e01d8f60c

See also

Displaying visualizations in a tab control

  1. Select the application in the device tree and add a further visualization with the name visTab.

    ⇒

    The visualization editor opens.

  2. Select the element Tab controlfrom the view ToolBox and drag it into the editor.

    ⇒

    The dialog Frame Configuration opens.

  3. Double-click on one of the visualizations listed under Available Visualizations. Example: visEllipse.

    ⇒

    The visualization appears under Selected Visualizations.

  4. Select further visualizations: visRectangle and visRoundedRectangle.

    ⇒

    The visualizations also appear under Selected Visualizations. The visualizations are automatically numerically indexed via the order in the list.

  5. Exit the dialog with OK.

    ⇒

    The visualization contains a new element of the type Tab control. The 3 selected visualizations appear under its property References.

  6. In the property References ‣ <visualization> ‣ Heading, enter a suitable one: 1, 2 and 3

    ⇒

    The heading appears in the editor and on the tabs of the tab control.

  7. Select the menu command Create ‣ Compile.

  8. Select Online ‣ Login for your device and start the application.

    ⇒

    The visualization starts. It contains a tab for each referenced visualization. Clicking on the tab causes the visualization to display the next referenced visualization.

    ../_images/b939cb25815f2e01c0a8640e00f1e3d7

See also