Providing an image per DPI

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

Help

Editors

Controls (window/page/report)

Controls

Image control

Providing an image per DPI

Overview

Implementation

Providing an image per DPI

Overview

On mobile, when displaying images, each device has its own physical size and its own graphic resolution.

Let's take a look at the terms linked to the management of screens and images:

the screen size is expressed in pixels. The screen size corresponds to width and height of a screen in number of pixels.
the graphic resolution of a screen is expressed in "dpi" (dots per inch) or in "ppi" (pixels per inch). It is the number of dots displayed per inch or the number of pixels per inch (an inch is equal to 2.54 cm). The higher this value is, the more precise the display will be.

The same image file, on 2 screens with the same physical size but with a different resolution, may be displayed in a different size.

To avoid this, and to display the image with an identical size, the images are displayed in "stretched" mode.

For the high-definition screens, the displayed image may be pixelated.
The opposite will happen for the low-resolution screens: if the image is a high-definition image, its reduction may provoke a blur effect.

To solve this problem, WINDEV Mobile proposes, for each image used in the application, to provide several image files, adapted to different DPI.

At runtime, the image adapted to the resolution will be automatically selected.

Implementation

How to?

To automatically manage the DPI of an image used in the application:

Create a set of images corresponding to the different DPI.
- 5 DPI are supported: 160, 240, 320, 480, 640.
- 3 DPI are supported: 160, 320, 480.
The name of these images must be formatted as follows:

ImageName@dpi99x.Extension

Where 99x corresponds to the multiplier coefficient in relation to the editor DPI.
The editor operates in 160 DPI. For example, for a "Logo.png" image, the set of images will be:
- "Logo@dpi1x.png" for the 160 DPI. In Android, corresponds to mdpi.
- "Logo@dpi1_5x.png" for the 240 DPI. In Android, corresponds to hdpi.
- "Logo@dpi2x.png" for the 320 DPI. In Android, corresponds to xhdpi.
- "Logo@dpi3x.png" for the 480 DPI. In Android, corresponds to xxhdpi.
- "Logo@dpi4x.png" for the 640 DPI. In Android, corresponds to xxxhdpi.
In the editor, in the control corresponding to the image file, select one of the files found in the set of images.

When creating the Android or iOS archive, WINDEV Mobile will automatically include all images supplied in the archive.

Remarks

There is no need to provide an image for the 5 supported DPI. At runtime, the best suitable image regarding the DPI of the device screen will be automatically displayed.
Pay special attention to the image formats supported by the platform used.
For some images (splash screen, application icon, ...), the interface of the editor also proposes to select a file per resolution. In this case, the two methods can be used (selecting a file per resolution or selecting a single file in multi-dpi format).
The image catalog automatically generates the necessary images. For more details, see Image catalog.
The ".WDPIC" files with the "multi-dpi" option, generated by the image editor, are automatically supported: there is no need to generate the different images corresponding to the different DPI.
Caution: If a ".WDPIC" file must be assigned through programming to a control, this file must have been previously added into the list of project elements.