Adding Images to AutoIt GUIs

Tutorial on how to add images to AutoIt GUIs while maintaining aspect ratio.

5188 views

Edited: 2017-02-10 22:17

In this Tutorial, we will show how to insert images into your GUIs, while also maintaining the aspect ratio of the images you are using.

How to create the actual GUI will not be covered, and it is expected that you at least know the basics of GUI creation. If in doubt, check out the GUI Tutorial.

Loading images into a GUI

.jpg and .gif images can be added to a GUI easily using GUICtrlCreatePic. You need to specify the coordinated in the GUI where you want to insert the image, along with the dimensions of the image, and the path to the image file.

$ImgLoad = "b.jpg"
$idPic = GUICtrlCreatePic($ImgLoad, 120, 120, 100, 100)

The below example includes the rest of the GUI code, so it should work, if you get the path to the image right. See also: Absolute and Relative Paths

#include <GUIConstantsEx.au3>

Opt("GUIOnEventMode", 1)  ; Change to OnEvent mode 

$mainwindow = GUICreate("Hello World", 1224, 768)
GUISetOnEvent($GUI_EVENT_CLOSE, "CLOSE_GUI")

; Load the image, and position it in the GUI
$ImgLoad = "b.jpg"
$idPic = GUICtrlCreatePic($ImgLoad, 120, 120, 100, 100)
   
GUISetState(@SW_SHOW)

While 1
  Sleep(1000)  ; Idle around
WEnd

Func CLOSE_GUI()
  Exit
EndFunc

How to maintain the aspect ratio

When you place your image, its useful to know how to maintain the aspect ratio. But to do that you will need to know the dimensions of the image, as we will be using the dimensions to calculate the aspect ratio. The aspect ratio is the width divided by the height of the image.

To get the dimensions directly from the image, rather than having to tyoe them yourself, you can use GDIPlus. The below example shows how to calculate the aspect ratio.

#include <GDIPlus.au3>

_GDIPlus_Startup()
$ImgLoad = "b.jpg"
$IMG = _GDIPlus_ImageLoadFromFile($ImgLoad)
; Calculate the ratio of the First image
$h = _GDIPlus_ImageGetHeight($IMG)
$w = _GDIPlus_ImageGetWidth($IMG)
_GDIPlus_ImageDispose($IMG)
_GDIPlus_Shutdown()
$ratio = $w/$h

MsgBox(0, "Aspect ratio", $ratio)

You also need to call _GDIPlus_Startup(), before you can use the GDIPlus functions.

When you are placing the image, simply multiply the height of the image, with the aspect ratio. A fully working example can be found below:

#include <GDIPlus.au3>
#include <GUIConstantsEx.au3>
#include <WinAPI.au3>
#include <WindowsConstants.au3>

Opt("GUIOnEventMode", 1)  ; Change to OnEvent mode 
$mainwindow = GUICreate("Hello World", 1224, 768)
GUISetOnEvent($GUI_EVENT_CLOSE, "CLOSEClicked")

_GDIPlus_Startup()
$ImgLoad = "b.jpg"
$IMG = _GDIPlus_ImageLoadFromFile($ImgLoad)
; Calculate the ratio of the image
$h = _GDIPlus_ImageGetHeight($IMG)
$w = _GDIPlus_ImageGetWidth($IMG)
_GDIPlus_ImageDispose($IMG)
 _GDIPlus_Shutdown()
$ratio = $w/$h
	
; set dimensions
; The width is calculated from the Height
$GuiH = 500

	
$idPic = GUICtrlCreatePic($ImgLoad, 120, 120, $GuiH*$ratio, $GuiH)
   

GUISetState(@SW_SHOW)

While 1
  Sleep(1000)  ; Idle around
WEnd

Func CLOSEClicked()
  Exit
EndFunc

Tell us what you think:

  1. How to create a list of selectable items with AutoIt.
  2. Tutorial on how to make GUIs using the AutoIt scripting language.
  3. How to disable and enable AutoIt GUI elements using GUICtrlSetState.
  4. How to interrupt running functions and handle system events in AutoIt GUI scripting.

More in: AutoIt GUIs