ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Image control
  • Item characteristics
  • How to?
  • Storing the images in the data file as Text items
  • Storing the images in the data file as "Image" items
  • Retrieving the content of the image in an item
  • HFSQL thumbnails
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
Binding an Image control to an item
Item characteristics
An Image control can correspond to an item found in a data file, in a query, ... Two types of items can be associated with an Image control:
  • A "Text" item: the stored information is the path of the image.
  • A "Sound, image, binary" item: the stored information is the image itself.
In both cases, the Image control is used to display the information found in the data file.
How to?

Storing the images in the data file as Text items

This solution is used to store the path of images in the data file.
To manage the images as Text items:
  1. In the data model editor:
    • Create a Text item (PHOTO_Path for example). This item will be used to store the path giving access to the image.
    • Don' forget to resize this item (255 characters for example).
    • In the shared information of the item, this control is associated with an edit control.
    • Generate the analysis to take the modifications into account.
  2. In the window (or in the page) that will be used to edit/view the image:
    • Create an Image control (IMG_Photo in our example). This Image control is not bound to any item.
    • Create an Edit control bound to the PHOTO_Path item (in our example, the name of this control is EDT_Photo).
      To create this control, Drag and Drop the item found in the "Analysis" pane to your window or page.
      This control allows the user to specify the path of the image file to use. A button used to select the requested image can be added beside this control. The "Click" event of the Button control can contain the following code (for example):
      // Opens an image picker
      EDT_Photo = fImageSelect("c:\my documents", "", "Select the customer photo")
      // Run the "Whenever modifying" event of the EDT_Photo Edit control
      // to update the Image control
      ExecuteProcess(EDT_Photo, trtChange)
    • Write the following code in the "Whenever modifying" event of this control:
      IF fFileExist(MySelf) = True THEN
      IMG_Photo = MySelf
      ELSE
      IMG_Photo = ""
      END

      This code is used to:
      • check the existence of the image file.
      • display the image in the Image control. All you have to do is assign the path of the image to the Image control in order for the image to be displayed. If the image does not exist, no image is displayed.
    • When displaying the window or the page, force (if necessary) the execution of the "Whenever modifying" event of the control with ExecuteProcess. For example:
      ExecuteProcess(EDT_Photo, trtChange)
  3. The information will be automatically saved in the data file when using:
The path of the image will be automatically saved in the Text item.

Storing the images in the data file as "Image" items

This solution is used to directly store the images in the data file.
To manage the images in the format of "Image" items:
  1. In the data model editor:
    • Create a "Sound, image, binary" item (PHOTO_Image for example). This item will be used to store the image.
    • In the "General" tab of item, specify the "Image (binary memo)" sub-type.
    • In the shared information of the item, this control is associated with an Image control.
    • Generate the analysis to take the modifications into account.
  2. In the window (or in the page) that will be used to edit/view the image:
    • Create an Image control (IMG_Photo in our example). This Image control is bound to the "Sound, image, binary" item created in the analysis. To create this control, Drag and Drop the item found in the "Analysis" pane to your window or page.
    • Create an edit control if necessary (EDT_Photo in our example). This control allows the user to specify the path of the image file to use. This control is not bound to any item. A button used to select the requested image can be added beside this control. The "Click" event of the Button control can contain the following code (for example):
      // Opens an image picker
      EDT_Photo = fImageSelect("c:\my documents", "", "Select the customer photo")
      // Run the "Whenever modifying" event of the EDT_Photo Edit control
      // to update the Image control
      ExecuteProcess(EDT_Photo, trtChange)
    • Write the following code in the "Whenever modifying" event of this control:
      IF fFileExist(MySelf) = True THEN
      IMG_Photo = MySelf
      ELSE
      IMG_Photo = ""
      END

      This code is used to:
      • check the existence of the image file.
      • display the image in the Image control. All you have to do is assign the path of the image to the Image control in order for the image to be displayed. If the image does not exist, no image is displayed.
  3. The information will be automatically saved in the data file when using:
The image will be automatically saved in the "Sound, image, binary" item.
Retrieving the content of the image in an item
1st case: the controls in the window or page are bound to items in a data file
All the items in the data file (or a related file) that are bound to a control in the window or page will be updated by:
2nd case: the controls in the window or page are not bound to items in a data file
The value of each control must be assigned to each item using the following syntax:
<Data file>.<Item> = <Control name>
For a Binary Memo item: A value must be assigned to each control using HLinkMemo.
HFSQL thumbnails
The item bound to the Image control can use HFSQL thumbnails. In this case, the display of images will be optimized.
For more details, see HFSQL thumbnails.
Minimum version required
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 09/15/2023

Send a report | Local help