dl-breadcrumbs__homedl-breadcrumb-item__separatorConfiguration and programmingdl-breadcrumb-item__separatorProgramming with CODESYSdl-breadcrumb-item__separator...dl-breadcrumb-item__separatorCODESYS Visualizationdl-breadcrumb-item__separatorConfiguring User Inputs dl-breadcrumb-item__separatorConfiguring gesture recognition
dl-pagination__prev-inactivedl-pagination__prev-activedl-pagination__next-inactivedl-pagination__next-active
Configuring gesture recognitiondl-permalink__symbolPermalink

You can execute a visualization on a device that is operated by means of gestures. The visualization retains its user input configuration for mouse and keyboard operation and also recognizes gestures and multi-touch events. Gesture events are recognized and interpreted as mouse events.

For this purpose, activate the “Activate multi-touch” setting in the visualization manager.

Elements of the type “Frame” or “Tab control element” display contents that a user should be able to move. Therefore, configure their “Scaling type” property with “Fixed and scrollable”.

Gesture recognition for:

  • Tapping

    A quick tap on the element is interpreted as a mouse click.

  • Panning

    Pressing, moving, and releasing with one finger in a frame or with a tab control element (in the window area of the element) will move the contents.

  • Multi-finger touch detection

    Touching several elements at the same time will input for all elements. These touch events are interpreted as the respective mouse events.

    Example:

    Two-hand operation in order to trigger an action with two simultaneous inputs on two different elements.

    Virtual mixing console where multiple sliders can be operated at the same time.

In addition, the ‎IGestureEventHandler‎ interface is available in the ‎VisuElems.VisuElemBase‎ library. You can use this to implement application code that recognizes gestures and executes follow-up actions.

The following display variants can execute a visualization on a multi-touch device

  • CODESYS WebVisu

⮫ “Implementing event handling with multi-touch”

Using gestures to control visualizations

Requirement: A project is open with a visualization and a user input configuration. It contains one button. The visualization device is a display with multi-touch support.

  1. Double-click the “Visualization manager” object.

    The editor opens.

  2. Click the “Settings” tab.

  3. In the “Additional settings” group, activate the “Activate multi-touch” option.

  4. Compile, download, and start the application.

    The application runs. The visualization opens. When a user touches the display of the visualization device, the visualization responds. Elements that respond to mouse events also respond to touch events Several buttons can be pressed at the same time. Scrollable frames or tab control elements are displayed without scrollbars and can be moved by panning.

    Note: The “Scaling type” property of elements type “Frame” or “Tab control element” must be set to “Fixed and scrollable”.

Implementing event handling with multi-touch

Requirement: The device is multi-touch capable

  1. Implement and register a function block that receives the gesture events.

    ‎FUNCTION_BLOCK GesturesHandler IMPLEMENTS VisuElems.VisuElemBase.IGestureEventHandler2‎

    ‎VisuElems.g_VisuEventManager.SetGestureEventHandler(THIS^);‎

  2. Implement and register a function block that sets the touch areas.

    ‎FUNCTION_BLOCK RectProvider IMPLEMENTS VisuElems.VisuElemBase.IApplicationRectangleProvider‎

    ‎VisuElems.g_VisuRectangleProvider := THIS^;‎

  3. Implement actions as application code that are executed when a gesture event occurs