PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

  • Overview of Image control
  • Control found in a window, page or report
  • Formats of images
  • Creating an Image control
  • In a window
  • In a page
  • In a report
  • Multilingual images
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 of Image control

Control found in a window, page or report

The Image control is used to:
Versions 16 and later
Universal Windows 10 App This type of control is now available for the Windows Phone applications.
WINDEVLinux This type of control is now available for the WINDEV applications in Linux.
New in version 16
Universal Windows 10 App This type of control is now available for the Windows Phone applications.
WINDEVLinux This type of control is now available for the WINDEV applications in Linux.
Universal Windows 10 App This type of control is now available for the Windows Phone applications.
WINDEVLinux This type of control is now available for the WINDEV applications in Linux.
Versions 17 and later
iPhone/iPad This type of control is now available for the iPhone/iPad applications.
New in version 17
iPhone/iPad This type of control is now available for the iPhone/iPad applications.
iPhone/iPad This type of control is now available for the iPhone/iPad applications.
Versions 18 and later
iPhone/iPad This type of control is now available for the reports in the iPhone/iPad applications.
Android Widget This type of control is now available for the Android Widget windows.
Universal Windows 10 App This type of control is now available for the applications in Windows Store apps mode.
New in version 18
iPhone/iPad This type of control is now available for the reports in the iPhone/iPad applications.
Android Widget This type of control is now available for the Android Widget windows.
Universal Windows 10 App This type of control is now available for the applications in Windows Store apps mode.
iPhone/iPad This type of control is now available for the reports in the iPhone/iPad applications.
Android Widget This type of control is now available for the Android Widget windows.
Universal Windows 10 App This type of control is now available for the applications in Windows Store apps mode.
Versions 19 and later
WEBDEV - Server codeWEBDEV - Browser code The management of multi-touch is now available in the WEBDEV sites.
New in version 19
WEBDEV - Server codeWEBDEV - Browser code The management of multi-touch is now available in the WEBDEV sites.
WEBDEV - Server codeWEBDEV - Browser code The management of multi-touch is now available in the WEBDEV sites.
Versions 21 and later
Universal Windows 10 App This type of control is now available in Universal Windows 10 App mode.
New in version 21
Universal Windows 10 App This type of control is now available in Universal Windows 10 App mode.
Universal Windows 10 App This type of control is now available in Universal Windows 10 App mode.

Formats of images

Windows The following image formats are supported in Windows:
  • Bitmap (*.BMP)
  • Graphics Interchange Format (*.gif)
  • Joint Picture Experts Group (*.jpg ; *.jpeg)
  • Kodak Photo CD (*.pcd)
  • PaintBrush (*.pcx)
  • Adobe Photoshop Format (*.psd)
  • TrueVision TARGA (*.tga)
  • Tagged Image File Format (*.tif ; *.tiff)
    Note: the "tiled tiff" option of the tiff 6.0 standard is not supported. In this case, we advise you to save the image in tiff 5.0 standard.
  • Portable Network Graphics (*.png)
  • Windows MetaFiles (*.emf ; *.wmf)
  • Icons (*.ico ; *.icw)
    Versions 22 and later
    Notes:
    • HQ display (High Quality) available.
    • Management of sheets in transparent BMP format (32 bits).
    New in version 22
    Notes:
    • HQ display (High Quality) available.
    • Management of sheets in transparent BMP format (32 bits).
    Notes:
    • HQ display (High Quality) available.
    • Management of sheets in transparent BMP format (32 bits).
  • Cursors (*.cur)
  • Portable Document Format (*.pdf)
  • Versions 15 and later
    Scalable Vector Graphics (*.svg)
    New in version 15
    Scalable Vector Graphics (*.svg)
    Scalable Vector Graphics (*.svg)
Note: To manage the pdf and svg formats, GDIPLUS.DLL must be installed for the computers running Windows 2000 and earlier. For the later versions, this DLL is supplied with Windows. See GDI+ framework for more details.
Linux The following image formats are supported in Linux:
  • Bitmap (*.BMP)
  • Graphics Interchange Format (*.gif)
  • Joint Picture Experts Group (*.jpg ; *.jpeg)
  • Portable Network Graphics (*.png)
  • Portable Bitmap (*.pbm)
  • Portable Graymap (*.pgm)
  • Portable Pixmap (*.ppm)
  • Tagged Image File Format (*.tiff)
    Note: the "tiled tiff" option of the tiff 6.0 standard is not supported. In this case, we advise you to save the image in tiff 5.0 standard.
  • X11 Bitmap (*.xbm)
  • X11 Pixmap (*.xpm)
  • Versions 21 and later
    Scalable Vector Graphics (*.svg)
    Note: To manage this format, you must install a QT library that supports the SVG format.
    New in version 21
    Scalable Vector Graphics (*.svg)
    Note: To manage this format, you must install a QT library that supports the SVG format.
    Scalable Vector Graphics (*.svg)
    Note: To manage this format, you must install a QT library that supports the SVG format.
Windows Mobile The supported image formats are:
  • Bitmap (*.BMP)
  • Graphics Interchange Format (*.gif)
  • Joint Picture Experts Group (*.jpg ; *.jpeg)
  • Icons (*.ico ; *.icw)
AndroidAndroid Widget The supported image formats are:
  • Bitmap (*.BMP)
  • Joint Picture Experts Group (*.jpeg)
  • Portable Network Graphics (*.png)
  • Scalable Vector Graphics (*.svg)
Universal Windows 10 App The supported image formats are:
  • Portable Network Graphics (*.png)
  • Joint Picture Experts Group (*.jpg ; *.jpeg)
Versions 17 and later
iPhone/iPad The supported image formats are:
  • Portable Network Graphics (*.png)
  • Joint Picture Experts Group (*.jpg ; *.jpeg)
  • Tagged Image File Format (*.tiff ou *.tif)
    Note: The "tiled tiff" option of the tiff 6.0 standard is not supported. In this case, we advise you to save the image in tiff 5.0 standard.
  • Graphics Interchange Format (*.gif)
    Caution: Animated Gif are not supported.
  • Bitmap (*.BMP)
  • X11 Bitmap (*.xbm)
  • Versions 21 and later
    Scalable Vector Graphics (*.svg)
    New in version 21
    Scalable Vector Graphics (*.svg)
    Scalable Vector Graphics (*.svg)
New in version 17
iPhone/iPad The supported image formats are:
  • Portable Network Graphics (*.png)
  • Joint Picture Experts Group (*.jpg ; *.jpeg)
  • Tagged Image File Format (*.tiff ou *.tif)
    Note: The "tiled tiff" option of the tiff 6.0 standard is not supported. In this case, we advise you to save the image in tiff 5.0 standard.
  • Graphics Interchange Format (*.gif)
    Caution: Animated Gif are not supported.
  • Bitmap (*.BMP)
  • X11 Bitmap (*.xbm)
  • Versions 21 and later
    Scalable Vector Graphics (*.svg)
    New in version 21
    Scalable Vector Graphics (*.svg)
    Scalable Vector Graphics (*.svg)
iPhone/iPad The supported image formats are:
  • Portable Network Graphics (*.png)
  • Joint Picture Experts Group (*.jpg ; *.jpeg)
  • Tagged Image File Format (*.tiff ou *.tif)
    Note: The "tiled tiff" option of the tiff 6.0 standard is not supported. In this case, we advise you to save the image in tiff 5.0 standard.
  • Graphics Interchange Format (*.gif)
    Caution: Animated Gif are not supported.
  • Bitmap (*.BMP)
  • X11 Bitmap (*.xbm)
  • Versions 21 and later
    Scalable Vector Graphics (*.svg)
    New in version 21
    Scalable Vector Graphics (*.svg)
    Scalable Vector Graphics (*.svg)
Java The supported image formats are:
  • Bitmap (*.BMP)
  • Graphics Interchange Format (*.gif)
    Caution: Animated Gif are not supported.
  • Joint Picture Experts Group (*.jpeg)
  • Portable Network Graphics (*.png)
Creating an Image control
WINDEVAndroidAndroid Widget iPhone/iPadWindows MobileUniversal Windows 10 AppJava

In a window

To create an Image control:
  1. In the window editor, click (or select "Insert .. Control .. Image").On the "Creation" pane, in the "Usual controls" group, click "Image".
  2. Click the position where the control will be created in the window. The control appears in creation mode.
To display the control characteristics, select "Description" from the popup menu of control.
Versions 22 and later
Note: To edit the image found in an Image control, select "Edit the image" from the popup menu. The image editor is automatically started. See Image editor for more details.
New in version 22
Note: To edit the image found in an Image control, select "Edit the image" from the popup menu. The image editor is automatically started. See Image editor for more details.
Note: To edit the image found in an Image control, select "Edit the image" from the popup menu. The image editor is automatically started. See Image editor for more details.
The main options found in the different tabs of the description window are as follows.
In the "General" tab, you have the ability to define:
In the "GUI" tab, you have the ability to define:
  • the initial control status,
  • Versions 21 and later
    whether the crosshair must be displayed (or not) in the control. The crosshair corresponds to the thumbnail displayed by default in the Image control in the editor.
    Image with crosshair
    Image with crosshair
    Image without crosshair
    Image without crosshair
    This option can also be enabled/disabled for all the Image controls in the options of window editor. See Options of window editor for more details.
    New in version 21
    whether the crosshair must be displayed (or not) in the control. The crosshair corresponds to the thumbnail displayed by default in the Image control in the editor.
    Image with crosshair
    Image with crosshair
    Image without crosshair
    Image without crosshair
    This option can also be enabled/disabled for all the Image controls in the options of window editor. See Options of window editor for more details.
    whether the crosshair must be displayed (or not) in the control. The crosshair corresponds to the thumbnail displayed by default in the Image control in the editor.
    Image with crosshair
    Image with crosshair
    Image without crosshair
    Image without crosshair
    This option can also be enabled/disabled for all the Image controls in the options of window editor. See Options of window editor for more details.
  • the action performed during a right click,
  • the popup menu associated with the control,
  • ...
The "Details" tab is used to define:
  • Whether the image will be animated. See Animating an image for more details.
  • Whether the image is a click area. See Clickable Image control for more details.
  • Whether the image will display a popup menu. See Popup menu of Image controls for more details.Whether the image must be handled by the user. See Popup menu of Image controls for more details.
  • Whether the image will display scrollbars and will allow the zoom in the control. This option is required to display the PDF files in the Image controls. If the PDF file cannot be entirely displayed in the Image control, scrollbars are displayed and the zoom is available via [CTRL] + mouse wheel. The zoom can also be handled by programming with ..Zoom.
  • Versions 18 and later
    Android If the image must be loaded in background task. If this option is enabled and if the image must be loaded on a site, the application does not wait for the end of loading to continue. An animation is automatically displayed in the Image control if necessary.
    Note: If the Image control is found in a looper, the image is always loaded in background task (no matter whether the option is enabled or not).
    New in version 18
    Android If the image must be loaded in background task. If this option is enabled and if the image must be loaded on a site, the application does not wait for the end of loading to continue. An animation is automatically displayed in the Image control if necessary.
    Note: If the Image control is found in a looper, the image is always loaded in background task (no matter whether the option is enabled or not).
    Android If the image must be loaded in background task. If this option is enabled and if the image must be loaded on a site, the application does not wait for the end of loading to continue. An animation is automatically displayed in the Image control if necessary.
    Note: If the Image control is found in a looper, the image is always loaded in background task (no matter whether the option is enabled or not).
  • Versions 18 and later
    WINDEVAndroidAndroid Widget Java If the image must be orientated according to its Exif data. If this option is enabled, a photo will be automatically displayed in the proper direction (portrait or landscape) according to the Exif data of the photo.
    New in version 18
    WINDEVAndroidAndroid Widget Java If the image must be orientated according to its Exif data. If this option is enabled, a photo will be automatically displayed in the proper direction (portrait or landscape) according to the Exif data of the photo.
    WINDEVAndroidAndroid Widget Java If the image must be orientated according to its Exif data. If this option is enabled, a photo will be automatically displayed in the proper direction (portrait or landscape) according to the Exif data of the photo.
The "Style" tab is used to define the style of the different elements found in the Image control. To define the image border:
  1. Select the "Outside border" element.
  2. Expand the "Border" list. The available borders are displayed.
    • The "Round xxx" options are used to define a round border. If these options are selected, a blue arrow allows you to open the window for style configuration in the "Style" tab.
    • The "Image (9-image mode)" option is used to choose an image for the border and to configure it via the 9-image mode.
    • The "Custom" option is used to define a custom border. If this option is selected, a blue arrow allows you to open the window for configuring the custom shape.
    • Versions 21 and later
      The "Round" option is used to create a round image. If these options are selected, a blue arrow allows you to open the configuration window (line thickness and style)
      Caution: To avoid being distorted, the display mode of the image must be homothetic.
      New in version 21
      The "Round" option is used to create a round image. If these options are selected, a blue arrow allows you to open the configuration window (line thickness and style)
      Caution: To avoid being distorted, the display mode of the image must be homothetic.
      The "Round" option is used to create a round image. If these options are selected, a blue arrow allows you to open the configuration window (line thickness and style)
      Caution: To avoid being distorted, the display mode of the image must be homothetic.
This "Style" tab is also used to define:
  • A soft shade.
  • Versions 21 and later
    An animation when changing the image displayed in the control ("Control animation" element). The "Parameters" button is used to define duration of the animation.
    New in version 21
    An animation when changing the image displayed in the control ("Control animation" element). The "Parameters" button is used to define duration of the animation.
    An animation when changing the image displayed in the control ("Control animation" element). The "Parameters" button is used to define duration of the animation.
WEBDEV - Server codePHP

In a page

To create an Image control:
  1. In the window editor, click (or select "Insert .. Control .. Image").On the "Creation" pane, in the "Usual controls" group, expand "Image" and select "Image".
  2. Click the position where the control will be created in the page. The control appears in creation mode.
To display the control characteristics, select "Description" from the popup menu of control. The important points are as follows:
  • The [...] button found in the "General" tab is used to select the image associated with the Image control. Depending on the selected image, a wizard is displayed, allowing you to:
    • compress the image automatically (for the images whose size exceeds 20 KB). This option also allows you to convert the image into one of the formats adapted to the Internet pages. If this option is not selected:
      - If the image is using a format not adapted to the Internet pages, the image will be converted whenever the page is generated, so this generation may be slowed down.
      - If the image is using a format adapted to the pages but if its size is too large, the time for displaying the page may be slowed down.

      If you choose to perform the conversion immediately, you have the ability to select the image format and its quality. You also have the ability to use the progressive JPEG format. This format displays a page progressively while the browser loads the page.
    • automatically convert the image into one of the formats suited for the Internet pages. If this option is not selected, the image will be converted whenever the page is generated, so this generation may be slowed down. If you choose to perform the conversion immediately, you have the ability to select the image format and its quality.
    • define the location of image: the image can be copied into the site directory (_WEB directory) so the time for generating the page is optimized or the image can remain in its location (recommended when the file is shared between several contributors).
  • Choosing the type of image ("General" tab): See Choosing the type of image for more details.
    Linux The dynamic images are not supported.
  • Protection of images ("Details" tab): If this option is checked, the popup menu of image will not be displayed in the browser. Some of the image operations available at browser level (backup, print, ...) will not be performed. This option is also available in the clickable image controls and in the Thumbnail controls.
  • Display mode ("General" tab): See Choosing the display mode of image for more details.
  • Versions 15 and later
    Transition ("General" tab): When the value of the image control is modified, a transition can be selected such as Faded, Overlap or Swipe to make the change of image more harmonious. See Animating an image for more details.
    New in version 15
    Transition ("General" tab): When the value of the image control is modified, a transition can be selected such as Faded, Overlap or Swipe to make the change of image more harmonious. See Animating an image for more details.
    Transition ("General" tab): When the value of the image control is modified, a transition can be selected such as Faded, Overlap or Swipe to make the change of image more harmonious. See Animating an image for more details.
  • Versions 16 and later
    Automatic scroll ("General" tab): This option is accessible for the "dynamic" images or for the images "from a database: path". See Image with automatic scroll for more details.
    New in version 16
    Automatic scroll ("General" tab): This option is accessible for the "dynamic" images or for the images "from a database: path". See Image with automatic scroll for more details.
    Automatic scroll ("General" tab): This option is accessible for the "dynamic" images or for the images "from a database: path". See Image with automatic scroll for more details.
  • You also have the ability to associate an action with the image ("General" tab). See Choosing the action associated with a control for more details.
WINDEVWEBDEV - Server codeReports and QueriesiPhone/iPadWindows Mobile

In a report

To create an Image control:
  1. In the report editor, click . On the "Creation" pane, in the "Usual controls" group, click "Image".
  2. Click the position where the control will be created in the report. The control appears in creation mode.
To display the control characteristics, select "Description" from the popup menu of control. The [...] button found in the "General" tab is used to select the image (or PDF file) associated with the Image control.
Multilingual images
If your application is a multilingual application, a different image can be selected for each language. This option is useful when the images contain a text for example.
To manage the multilingual images:
  1. Display the description of Image control.
  2. Click the icon. The window for managing multilingual images is displayed. By default, the same file is associated with all the languages supported by the window, page or report.
  3. For each language, click the [...] button and select the image corresponding to the language. At run time, the corresponding image will be displayed according to the language chosen by Nation.
Caution: Only the image files are managed by the multilingual feature, not the display characteristics of the image.
Note: If a multilingual image was defined, the following message is displayed in the image description:
Related Examples:
The Image control Unit examples (WINDEV): The Image control
[ + ] Using an Image control.
The Image control (animations) Unit examples (WINDEV): The Image control (animations)
[ + ] Animating an image with WINDEV.
Two main topics are presented in this example:
1/ animated drawings ('image to animate')
2/ one-way and two-way animations.

This example presents some features proposed by WINDEV to animate images.
This list is not an exhaustive list ; indeed, by combining the different modes, the number of possible animations exceeds 2,000.
This example proposes animations without code as well as programmed animations.
Drag and drop Unit examples (WINDEV): Drag and drop
[ + ] Using Drag & Drop with the WLanguage functions.
The following topics are presented in this example:
1/ How to manage Drag&Drop between WINDEV controls
2/ How to manage Drag&Drop from the Windows file explorer to a WINDEV control
Drag & Drop is used to move objects via the mouse. "Drag" consists in clicking an object and moving the mouse while keeping the left button down. "Drop" consists in releasing the left mouse button.
Drag & Drop can be used with WINDEV on the List Box, TreeView, Table and Image controls.
WD Lasso Training (WINDEV): WD Lasso
[ + ] This program, powered by WINDEV, uses a selection lasso in an image control to perform a zoom in a preview control.
The CLasso class is supplied with this example in order to facilitate the implementation of a selection lasso in a WINDEV application
WD Schedule Complete examples (WINDEV): WD Schedule
[ + ] This example presents the management of a graphic schedule.

The following topics are presented in this example:
1/ the scheduler control
2/ the Google Calendar functions
The Image control (map area) Unit examples (WINDEV): The Image control (map area)
[ + ] Using the Image control to manage map areas
The Image control (display a PDF or a TIFF) Unit examples (WINDEV): The Image control (display a PDF or a TIFF)
[ + ] Displaying a PDF or TIFF document in the Image control found in a window.
Image rotation Unit examples (WINDEV): Image rotation
[ + ] Image rotation from any point that will be used as rotation center.
The Image control (animations and transitions) Unit examples (WEBDEV): The Image control (animations and transitions)
[ + ] Presenting animation and effect features proposed in WEBDEV and WLanguage on the Image control.
Pocket Notes Mobile (WINDEV Mobile): Pocket Notes
[ + ] This example is using the drawing functions of WLanguage.
Summary of the example supplied with WINDEV Mobile:
This example allows you to draw graphic "notes" and to save them. You have the ability to enter keywords in order to easily find your notes.
PC Photo Album Windows (WINDEV Mobile): PC Photo Album
[ + ] The PC Photo Album example is used to import and export the photos of a Smartphone or Pocket PC from the PC.
A listview is used to preview the photos found on the Smartphone and on the Pocket PC.
The Image control (simulate a slider) Unit examples (WEBDEV): The Image control (simulate a slider)
[ + ] This example explains how to simulate a slider via an image control, to assign a mark symbolized by stars in this case.
WW_Auto_Zoom Training (WEBDEV): WW_Auto_Zoom
[ + ] This example offers a control template based on an image that displays an image thumbnail and through a click, enlarges the image without disturbing the page's layout.
Limitatiosn:
- The images cannot be loaded from a database
- The control template cannot be included in a looper
Minimum required version
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment