PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview
  • Description of Image control: Options specific to the multi-touch
  • Special case: Managing the click areas
  • Optional processes specific to the multi-touch
  • Scroll with finger (optional process)
  • Inertial scrolling or Fling (optional process)
  • Horizontal and vertical swipe
  • Zoom with fingers (optional process)
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview
One of the most common applications of the multi-touch feature is used to handle images. The display size on a phone being reduced, it is often necessary to zoom an image and/or to move inside an image.
This allows you to perform a zoom on an image via the contact of 2 fingers moving apart.
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:
Versions 18 and later
iPhone/iPad This feature is now available for the iPhone/iPad applications.
New in version 18
iPhone/iPad This feature is now available for the iPhone/iPad applications.
iPhone/iPad This feature is now available for the iPhone/iPad applications.
Versions 19 and later
WEBDEV - Server codeWEBDEV - Browser code This feature is now available for the WEBDEV sites.
iPhone/iPad Note: The management of multi-touch is also available for the Chart controls.
WEBDEV - Server codeWEBDEV - Browser code Use conditions:
  • On the default Android browser, the 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.
New in version 19
WEBDEV - Server codeWEBDEV - Browser code This feature is now available for the WEBDEV sites.
iPhone/iPad Note: The management of multi-touch is also available for the Chart controls.
WEBDEV - Server codeWEBDEV - Browser code Use conditions:
  • On the default Android browser, the 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.
WEBDEV - Server codeWEBDEV - Browser code This feature is now available for the WEBDEV sites.
iPhone/iPad Note: The management of multi-touch is also available for the Chart controls.
WEBDEV - Server codeWEBDEV - Browser code Use conditions:
  • On the default Android browser, the 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.
Description of Image control: Options specific to the multi-touch
The "Details" tab in the window description of the Image control is used to manage the actions performed when using the fingers:
You have the ability to manage:
  • No scroll, no zoom: in this case, the multi-touch is disabled.
  • Automatic scroll only: If the image is not entirely displayed in the control, you have the ability to move it by scrolling in the image with the finger.
  • Automatic scroll and zoom: A zoom can be performed in addition to the scroll. In this case:
    • spreading out two fingers in contact with the screen is used to perform a zoom in. The zoom will be centered on the point found in the middle of the line drawn by the two contact points.
    • tightening the two fingers in contact with the screen is used to perform a zoom out.
The additional options are used to define:
  • AndroidAndroid Widget iPhone/iPad 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 it is centered in the control.
    • Homothetic centered: The image is enlarged or reduced while respecting the proportions of the initial image so that it is entirely displayed in the control and it is centered in the control.
    • Homothetic centered extended: The image is enlarged or reduced while respecting the proportions of the initial image so that the smallest side of the image is entirely displayed in the image control and so that the image is centered in the control.
  • Maximum zoom factor: Maximum zoom that can be performed with the fingers.
  • Allow the scaling by double tap: In this case, a double tap (or double click) performed in the control is used to apply the zoom on an image section. If the image is already zoomed, it is reinitialized to its initial display.
AndroidAndroid Widget iPhone/iPad Note: The multi-touch features or the Image control cannot be used if the window includes a scrollbar.
AndroidAndroid Widget iPhone/iPad

Special case: Managing the click areas

If the image is considered as being a click area ("This image is a click area" option in the "Details" tab of the control description), you can:
  • manage the first time a finger is pressed on the image (default operating mode in the earlier versions): If several fingers are used on the image, the different corresponding processes (finger pressed, click, ...) will be called when the first finger is used.
  • manage the different times the fingers are pressed on the image ("Recall the processes at each finger" option): If several fingers are used on the image, the different corresponding processes (finger pressed, click, ...) will be called whenever a finger is pressed on the image.
    iPhone/iPad If the scroll or the zoom is enabled, the "Call the processes again for each finger" option is ignored.
Optional processes specific to the multi-touch
Three specific optional processes are used to manage the multi-touch on the Image controls:
WEBDEV - Server codeWEBDEV - Browser code Note: These processes are browser processes.

Scroll with finger (optional process)

The "Scroll with finger" process is run during the vertical or horizontal move of one or more fingers while keeping contact with the screen.
This process can accept parameters by declaring a procedure in the "Scroll with finger" process with the following syntax:
PROCEDURE <Procedure Name>(<Distance X>, <Distance Y>)
where:
  • <Distance X>: Integer corresponding to the distance (in pixels) that was scrolled on the X axis in the control.
  • <Distance Y>: Integer corresponding to the distance (in pixels) that was scrolled on the Y axis in the control.
Notes:
  • Android The distance corresponds to the distance between the last contact point that was detected and the current position.
  • WEBDEV - Browser codeiPhone/iPad The distance corresponds to the distance between the first contact point that was detected and the current position.
Versions 18 and later
WEBDEV - Browser codeAndroid 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.
New in version 18
WEBDEV - Browser codeAndroid 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.
WEBDEV - Browser codeAndroid 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.

Inertial scrolling or Fling (optional process)

The "Inertial scrolling" process is run during a quick little movement of one or more fingers on the screen.
This process can accept parameters by declaring a procedure in the "Inertial scrolling" process with the following syntax:
PROCEDURE <Procedure Name>(<Speed X>, <Speed Y>)
where:
  • <Speed X>: Integer corresponding to the speed (in pixels per second) of the movement on the X axis.
  • <Speed Y>: Integer corresponding to the speed (in pixels per second) of the movement on the Y axis.

Horizontal and vertical swipe

The "Horizontal and vertical swipe" is run during a quick small movement of one or more fingers on the screen.
This process can accept parameters by declaring a procedure in the "Horizontal and vertical swipe" process with the following syntax:
PROCEDURE <Procedure Name>(<Speed X>, <Speed Y>)
where:
  • <Speed X>: Integer corresponding to the speed (in pixels per second) of the movement on the X axis.
  • <Speed Y>: Integer corresponding to the speed (in pixels per second) of the movement on the Y axis.
Versions 18 and later
WEBDEV - Browser codeAndroid 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.
New in version 18
WEBDEV - Browser codeAndroid 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.
WEBDEV - Browser codeAndroid 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" process is run when spreading out or tightening two fingers on the screen.
This process can accept parameters by declaring a procedure in the "Zoom with fingers" process with the following syntax:
PROCEDURE <Procedure Name>(<Spacing>)
where <Spacing>: Integer corresponding to the distance (in pixels) between the two contact points when the process was called.
Versions 18 and later
WEBDEV - Browser codeAndroid To find out the spacing, you have the ability to use the Gesture variable instead of the procedure.
New in version 18
WEBDEV - Browser codeAndroid To find out the spacing, you have the ability to use the Gesture variable instead of the procedure.
WEBDEV - Browser codeAndroid To find out the spacing, you have the ability to use the Gesture variable instead of the procedure.
iPhone/iPad The use of parameters in this process by declaring a procedure is not available.
Caution: The zoom with finger is not available if dStartDrawing is used on the Image control. In this case, you must:
  • save the image with a dSaveImageXXX function.
  • use dEndDrawing.
  • redisplay the image in the Image control.
Related Examples:
Android System Android (WINDEV Mobile): Android System
[ + ] This application is a tutorial example presenting some of the new features of WINDEV Mobile for Android.
The following system functions are used:
- NFC
- Multimedia control
- Brightness
- Volume
- WIFI
- Bluetooth
- Toast
- Progress Bar control
- 9-image mode
- Compass
- Accelerometer
- Camera control
- LED
- Vibrations
- Notifications
- Drawing functions
- Internet
iOS System iPhone/iPad (WINDEV Mobile): iOS System
[ + ] This application is an example presenting the use of various features.
The features are as follows:
- Playing videos
- Trace in the logs
- Slider
- Popup control
- Hourglass
...
Minimum required version
  • Version 17
This page is also available for…
Comments
Click [Add] to post a comment