Multi-touch in an Image control

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

This content has been translated automatically. Click here to view the French version.

Help / Developing an application or website / WINDEV Mobile specific features

Overview
Image field description: Multi-touch-specific options
Special case: Managing click zones
Optional events specific to multi-touch
Scroll with finger optional event
Horizontal and vertical swipe
"Zoom with fingers" optional process

WINDEV

WEBDEV

WINDEV Mobile

Others

See also

Multi-touch in an Image control

Overview

One of the most common applications of the multi-touch feature is used to handle images. Since mobile devices usually have smaller screens, sometimes it is necessary to zoom and move images.

This technology allows you to zoom images with a pinch gesture.

The multi-touch can be implemented:

on the applications run on a phone.
on the sites displayed on a phone.

The management of multi-touch in the Image controls can be implemented via:

Specific options available in the control description.
Specific optional events.

Note: Multi-touch support is also available for Chart control fields..

Use conditions:

On the default Android browser, multi-touch is supported from Android version 3.0 and later.
On the default Android browser, the zoom of gestures may conflict with the default zoom of the browser for the versions earlier than Android 4.3.

Image field description: Multi-touch-specific options

The "Details" tab in the window description of the Image control is used to manage the actions performed when using the fingers:

You can manage:

No scroll, no zoom: in this case, multi-touch is disabled.
Automatic scroll only: If the image is not displayed in its entirety in the field, it can be moved by scrolling directly in the image with the finger.
Automatic scroll and zoom: In addition to scrolling, it is possible to zoom in and out.. In this case:
- moving two fingers away from each other on the screen allows zooming in. The zoom will be centered on the point found in the middle of the line drawn by the two contact points.
- moving two fingers towards each other on the screen allows zooming out.

The additional options are used to define:

Initial display mode of the image. The image can be displayed in one of the following modes:
- 100% centered: the image is displayed at 100% and centered in the field.
- Homothetic centered: The image is enlarged or reduced in size, respecting the proportions of the original image, so that it is displayed entirely in the field and centered in the field.
- Homothetic extended centered: The image is enlarged or reduced in size, respecting the proportions of the original image, so that the smaller side of the image is displayed entirely in the field and the image is centered in the field.
Maximum zoom factor: Maximum zoom with fingertips.
Enable double-tap scaling: In this case, a double-tap (or double-click) in the field enables zooming in on an image area.. If the image is already zoomed, it is reinitialized to its initial display.

Note: If the window has an elevator, it is not possible to use the multi-touch functions of the Image field..

Special case: Managing click zones

If the image is considered as being a click area ("This image is a click area" option in the "Details" tab of control description), you can:

or manage only the first press of a finger on the image (default setting in previous versions): If several fingers are used on the image, the various corresponding events (finger pressed, click, etc.) are called up only when the first finger is used..
or to manage different finger presses on the image (option "Recall processes for each pointer (multiple pointers)"): If several fingers are used on the image, the various corresponding events (finger pressed, click, etc.) are called up each time an additional finger is pressed..
If the scroll or zoom features are enabled, the option "Recall processes for each pointer (multiple pointers)" is ignored.

Optional events specific to multi-touch

There are three specific optional events to manage multi-touch on Image controls:

Touch scrolling
Horizontal and vertical swipe
Pinch zoom

Note: These events are browser events.

Scroll with finger optional event

The "Scroll with finger" event is run when one or more fingers move vertically or horizontally while in contact with the screen

This event can accept parameters by declaring a procedure directly in the "Scroll with finger" event with the following syntax:

PROCEDURE <Procedure name>(<Distance X>, <Distance Y>)

where:

<Distance X> Integer corresponding to the distance (in pixels) scrolled along the X axis in the field.
<Distance Y> Integer corresponding to the distance (in pixels) scrolled along the Y axis in the field.

Remarks:

The distance corresponds to the distance between the last contact point that was detected and the current position.
The distance corresponds to the distance between the first contact point that was detected and the current position.

To find out the direction and the distance for the operation performed, you have the ability to use the Gesture variable instead of the procedure.

Horizontal and vertical swipe

The "Horizontal and vertical swipe" event is run during a quick small movement of one or more fingers on the screen.

This event can accept parameters by declaring a procedure directly in the "Horizontal and vertical swipe" event with the following syntax:

PROCEDURE <Procedure name>(<Speed X>, <Speed Y>)

where:

<Vitesse X> Integer corresponding to the speed (in pixels per second) of movement on the X axis.
<Vitesse Y> Integer corresponding to the speed (in pixels per second) of movement on the Y axis.

To find out the direction and the speed for the operation performed, you have the ability to use the Gesture variable instead of the procedure.

"Zoom with fingers" optional process

The "Zoom with fingers" event is run with a pinch or spread finger gesture on the screen.

This event can accept parameters by declaring a procedure directly in the "Zoom with fingers" event with the following syntax:

PROCEDURE <Procedure name>(<Spacing>)

where <Ecartement>: Integer corresponding to the distance (in pixels) between the two contact points when the event is called.

To find out the spacing, you have the ability to use the Gesture variable instead of the procedure.

The use of parameters in this event by declaring a procedure is not available.

Caution: Pinch zoom is not available if the dStartDrawing function is used in the Image field.. In this case, you must:

save the image with a dSaveImageXXX function.
use the dEndDrawing function.
redisplay the image in the Image control.

Related Examples:

Cross-platform examples (WINDEV Mobile): WM System

[ + ] This application is an example of some of the features of WINDEV Mobile available for Android/iOS.
The following system functions are used:
- NFC
- Multimedia control
- Brightness
- Volume
- Wi-Fi
- Bluetooth
- Toast
- Compass
- Accelerometer
- Camera control
- LED
- Vibration
- Notifications
- Drawing functions
- Internet