ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Image control
  • Overview
  • Implementation
  • How to?
  • Remarks
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
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.
DPI difference
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:
  1. Create a set of images corresponding to the different DPI.
    • Android 5 DPI are supported: 160, 240, 320, 480, 640.
    • iPhone/iPadIOS WidgetMac Catalyst 3 DPI are supported: 160, 320, 480.
  2. 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.
  3. 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.
    Android 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.
Minimum version required
  • Version 20
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 03/20/2023

Send a report | Local help