Skip to main content

Move dialogs

If a user interface programmed by you contains dialogs, then these can be grabbed and moved in the background area at runtime. The visualization user can use the mouse (or other pointing device) to move the dialog to any position. As a result, areas which were hidden when initially opened now become visible. This can be useful if, for example, when an opening dialog obscures information on the user interface. The system remembers the new position for the next opening.

When moving, the visualization user usually uses the mouse to grab a dialog in the title bar. For standard dialogs, the title bar is therefore configured as its pointer area.

In your own dialogs, the background area is configured for this. However, you can also program any other or additional pointer ranges. To do this, delimit areas with the Invisible Input element and enable its Used as pointer area property. The element must not have an input configuration. This is useful if the background area of the dialog is rather small and therefore difficult to grab, or if the title area is not part of the background area.

. Requirements

  • The Support client animations and overlay of native elements property is enabled In the Visualization Manager.

    Note: Moving dialogs is only possible when the overlay feature is enabled. However, this is not supported in the integrated visualization. As a result, moving dialog fields cannot be displayed with this variant.

  • Besides the main visualization, a Dialog type visualization is part of the user interface

  • The visualization is displayed at runtime in one of the WebVisu or TargetVisu variants.

    Note: Moving dialogs is not possible in the integrated visualization.

Programming an input area in your own dialog

The sample project C:\Program Files\CODESYS 3.5.17.0\CODESYS\Projects\Visu\ExamplesVisuDemoOverlay which is provided in the standard installation contains an extensive user interface. There you will find the Dlg_Desktop_ControlsDetails dialog. The following steps show you how to program this dialog so that you as a visualization user can then it in the title bar and then move it.

  1. Open and extract the sample project and update the device.

  2. Open the Project Environment dialog, and on the Visualization Profile tab, set the profile to CODESYS Visualization 4.1.0.0.

    Using movable dialogs is possible in version 4.1.0.0 and higher.

  3. In the Devices view, click the Visualization Manager object.

    On the Settings tab, the Support client animations and overlay of native elements option is enabled, which enables the overlay functionality.

  4. In the visualization editor, open the Dlg_Desktop_ControlsDetails dialog.

  5. In the Visualization ToolBox view, find the Invisible Input element and drag it to the editor.

  6. Drag the borders of the element over the title bar. Do not cover the close menu.

  7. Select the new element in the element list and then switch to the Properties view.

    Hint: Make sure that all properties are displayed in the view. If necessary, enable the Advanced option.

  8. Enable the Used as pointer area property of the selected element.

    The dialog now has its own pointer area and can be grabbed there to move it.

    _visu_img_example_demo_overlay_invisable_input.png

  9. Compile the application and start the application as WebVisu(http://localhost:8080/webvisu.htm).

    The application runs. In the Dashboard below Control, you can click the exclamation mark to open the Control Details dialog. You can now grab the dialog in its pointer area and move it.

: