By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Adding Images to AutoIt GUIs

Tutorial on how to add images to GUIs, and how to maintain the aspect ratio of added images.

Edited: 2015-04-01 11:40

In this Tutorial we will be focusing on the subject of AutoIt GUIs, and how to insert images into your GUIs, and how to maintain the aspect ratio of the images that you load.

How to create the actual GUI will not be covered in this Tutorial, and it is expected that you at least know the basics of GUI creation. You may want to check out the GUI Tutorial which can help get you started on the fundamentals of this this subject.

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

More AutoIt Tutorials

  1. How to get desktop dimensions