Skip to main content

Configuring Gesture Recognition

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 multitouch events. Gesture events are recognized and interpreted as mouse events.

To do this, activate the Activate multitouch handling setting in the Visualization Manager.

Elements of the type Frame or Tabs 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 (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-handed 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 subsequent actions.

The following display variants can execute a visualization on a multitouch device

  • CODESYS TargetVisu on a device with a Windows operating system

  • CODESYS TargetVisu on a device with a Linux operating system

  • CODESYS WebVisu

Note

0_Sample_ProjectSample project for handling multitouch displays

Controlling with gestures

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

  1. Double-click the Visualization Manager object.

    The editor opens.

  2. Click the Settings tab.

  3. In the Additional Settings group, select the Activate multitouch handling option.

  4. Compile, download, and start the application.

    The application runs. The visualization opens. When the user touches the display of the visualization device, the visualization responds. Elements that respond to mouse events also respond to touch events Multiple buttons can be pressed at the same time. Scrollable Frames or Tabs are displayed without scroll bars and can be moved by panning.

    Note

    The Scaling type property of elements type Frame or Tabs have to be set to Fixed and scrollable.

Implementing an event handler for a multitouch device

Requirement: The device is multitouch-capable.

  1. Implement and register a function block that gets 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

: