[Resolved] GUI with vertical scrollbar to display and select pictures from folder

[Faalamva]

Hello,

I'm new to GUI autoit programming, and so far I have checked several threads with solutions that would fit my need, but none using a scrollbar like I wish...

Please let me explain what I'm trying to do :

I want a simple GUI, this GUI shall contain a zone with a vertical scrollbar.

In this zone, I want to display several pictures all in 1 column.

Since I won't have enough place to display them all, I'd like to have the scrollbar to help me... well... scroll the pictures as I want.

• I don't know yet how to create a specific zone, so I have created a scrollbar on the main GUI : GUICreate(..., $WS_VSCROLL)
• I have also managed to display several pictures in my GUI using GUICtrlCreatePic, including pictures located outside the GUI lower boundary. I thought it would "activate" the scrollbar, but no, it doesn't work.

So I'm a bit stucked at this point. Is what I'm trying to do even possible ?

Thank you so much for your help !

Cheers !

Edited February 19, 2013 by Faalamva

[guinness]

Did you search Scrollbars in the help file and in the Examples section of the Forum?

[Melba23]

Faalamva,

Welcome to the AutoIt forum.

Take a look at the Scrollbars UDF in my sig - it will help you.

M23

Edit: Here is an example of it being used:

expandcollapse popup

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

#include <GUIScrollBars_Ex.au3>

Global $aButton[5]

; Create GUI
$hGUI_Main = GUICreate("Test", 500, 500)
GUISetBkColor(0xC4C4C4)

; Create child GUI
$hChild = GUICreate("", 200, 150, 100, 100, $WS_POPUP, $WS_EX_MDICHILD, $hGUI_Main)

; Add controls to child
For $i = 0 To 4
    $aButton[$i] = GUICtrlCreateButton("Button " & $i, 10, 10 + (50 * $i), 80, 30)
Next

; Create scrollbars in child
_GUIScrollBars_Generate($hChild, 0, 240)

; Show GUIs
GUISetState(@SW_SHOW, $hChild)
GUISetState(@SW_SHOW, $hGUI_Main)

While 1
    $nMsg = GUIGetMsg()
    Switch $nMsg
        Case $GUI_EVENT_CLOSE
            Exit
        Case Else
            ; Look for a button
            For $i = 0 To 4
                If $nMsg = $aButton[$i] Then
                    MsgBox(0, "Pressed", "Button " & $i)
                    ExitLoop
                EndIf
            Next
    EndSwitch
WEnd

Edited February 12, 2013 by Melba23

[Faalamva]

Thank you both,

OK, here is the code of my application so far.

I didn't have much time today to focus on the scrollbars, so what it does basically so far is : display all JPG images in a directory called "Images" placed in the current directory.

• Some images are created outside the GUI lower boundary and I will now concentrate my efforts to implement the vertical scrollbar.
• After that, I'll try to put the images in a separate zone with scrollbar, because I want to place more (fixed) buttons on the main GUI.
• The images are clickable. Still working on that part too. I'd like to be able to select/unselect several images.

expandcollapse popup

#cs ----------------------------------------------------------------------------
AutoIt Version: 3.3.8.1
Author: myName
#ce ----------------------------------------------------------------------------

#include 
#include 
#include 
#include 

Local $ScreenWidth = 1920
Local $ScreenHeight = 1080
Local $GUIWidth = 1200
Local $GUIHeight = 800
Local $ImgRep = ".\Images\"
Local $Images[100]
Local $Pic[100]
Local $ZoomFactor = 0.1
Local $Spacer = 10

; Initialize GDI+ library and GUI
_GDIPlus_Startup()
$GUI = GUICreate("My application", $GUIWidth, $GUIHeight, ($ScreenWidth-$GUIWidth)/2, ($ScreenHeight-$GUIHeight)/2, $WS_SYSMENU + $WS_VSCROLL)

; Browse all filenames in Images directory
Local $search = FileFindFirstFile($ImgRep & "*.jpg")
If $search = -1 Then
MsgBox(0, "Error", "No files in directory")
Exit
EndIf

$Index = 0
Do
$Images[$Index] = FileFindNextFile($search)
$Index = $Index + 1
Until @error <> 0
$Index = $Index - 2

; Close the search handle
FileClose($search)

$yPos = $Spacer
For $i = 0 To $Index
; Get image size
$hImage = _GDIPlus_ImageLoadFromFile($ImgRep & $Images[$i])
$iX = _GDIPlus_ImageGetWidth($hImage)
$iY = _GDIPlus_ImageGetHeight($hImage)
_GDIPlus_ImageDispose($hImage)
; Create image in GUI
$Pic[$i] = GUICtrlCreatePic($ImgRep & $Images[$i], $Spacer, $yPos, $iX*$ZoomFactor, $iY*$ZoomFactor)
$yPos = $yPos + $iY*$ZoomFactor + $Spacer
Next

; Display GUI
GUISetState(@SW_SHOW)

; Main events listener
While 1
$nMsg = GUIGetMsg()
Switch $nMsg
Case $GUI_EVENT_CLOSE
Exit
Case $Pic[0] To $Pic[$Index]
For $n = 0 To $Index
If $nMsg = $Pic[$n] Then MsgBox(64 + 8192, "Message", "This is image " & $Images[$n])
Next
EndSwitch
WEnd

; Shut down GDI+ library
_GDIPlus_Shutdown()

The vertical scrollbar is displayed but doesn't work. I will now read thoroughly the previous posts to know why.

Any comments and improvements are welcome !

Cheers !

[Melba23]

Faalamva,

Quick tip: Use FileListToArray to get all the files in the folder rather than using FileFindFirst/NextFile - why do all the work yourself when the function does it for you?

M23

[Faalamva]

Works like a charm, thank you !

The code is now :

expandcollapse popup

#cs ----------------------------------------------------------------------------
AutoIt Version: 3.3.8.1
Author:      myName
#ce ----------------------------------------------------------------------------

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

Local $ScreenWidth = 1920
Local $ScreenHeight = 1080
Local $GUIWidth = 1200
Local $GUIHeight = 800
Local $ImgRep = ".\Images\"
Local $Images[100]
Local $Pic[100]
Local $ZoomFactor = 0.1
Local $Spacer = 10

; Initialize GDI+ library and GUI
_GDIPlus_Startup()
$GUI = GUICreate("My application", $GUIWidth, $GUIHeight, ($ScreenWidth-$GUIWidth)/2, ($ScreenHeight-$GUIHeight)/2, $WS_SYSMENU + $WS_VSCROLL)

; Browse all filenames in Images directory
Local $Images = _FileListToArray($ImgRep, "*.jpg", 1)
If @error = 4 Then
MsgBox(0, "Error", "No files found in " & $ImgRep)
Exit
EndIf

; Create images in GUI
$yPos = $Spacer
For $i = 1 To $Images[0]
; Get image size
$hImage = _GDIPlus_ImageLoadFromFile($ImgRep & $Images[$i])
$iX = _GDIPlus_ImageGetWidth($hImage)
$iY = _GDIPlus_ImageGetHeight($hImage)
_GDIPlus_ImageDispose($hImage)
; Resizes and places image in GUI
$Pic[$i] = GUICtrlCreatePic($ImgRep & $Images[$i], $Spacer, $yPos, $iX*$ZoomFactor, $iY*$ZoomFactor)
$yPos = $yPos + $iY*$ZoomFactor + $Spacer
Next

; Display GUI
GUISetState(@SW_SHOW)

; Main events listener
While 1
$nMsg = GUIGetMsg()
Switch $nMsg
     Case $GUI_EVENT_CLOSE
         Exit
     Case $Pic[1] To $Pic[$Images[0]]
For $n = 1 To $Images[0]
If $nMsg = $Pic[$n] Then MsgBox(64 + 8192, "Message", "This is image " & $Images[$n])
Next
EndSwitch
WEnd

; Shut down GDI+ library
_GDIPlus_Shutdown()

Edited February 16, 2013 by Faalamva

[Melba23]

Faalamva,

Next tip: Use the @DesktopWidth/Height macros rather than hard coding the screen size - then you can adjust the size of your GUI to fit.

Have you looked at my Scrollbars UDF to see how easy it is to add scrollbars to your GUI yet? If not, please do so - because you only need 1 line of code as shown in the example I posted.

M23

P.S. And I have lifted your "New Member" 5 post limitation so do not worry about that any more.

[Faalamva]

Thank you for this new tip. I'll sure use it on the next code iteration.

Yes yes, I have read carefully your post about scrollbars. UDF's have been installed, example is working, everything looks perfectly clear AND also perfectly fitting my needs !

I'll post the new code when it's ready, and of course, tested !

Oh, and thank you also for the extra posts !

Edited February 16, 2013 by Faalamva

[Melba23]

Faalamva,

everything looks perfectly clear AND also perfectly fitting my needs !

Excellent! I look forward to seeing the finished script.

M23

[Faalamva]

Here it is, along with some questions :

1) At first, I have put the "$ChildGUI = GUICreate(..." line just after the "$ParentGUI = GUICreate(..." line, resulting in the images being systematically displayed in the parent GUI...

This is confusing because from what I know, the last handle created (i.e. the child one) should be the one used by default by the next commands ?

So as a workaround, I have moved the ChildGUI creation just before the "$Pic[$i] = GUICtrlCreatePic(..." loop, for it to work properly.

But it's not very satisfying. It seems the GUICtrlCreatePic doesn't accept any handle parameter, too bad...

2) Do you know what is the default scrollbar width ? I have checked the GUIScrollBars_Ex.au3 inner code but couldn't find this information. I assume it's something like 15 pixels. Can it be changed for a wider one (it's only a minor detail anyway) ?

3) The main objective of this thread has been reached. Thank you for your very quick feedback and accuracy. Although I'm not new in programming, this is very encouraging for an AutoIt newcomer like me. Shall I continue the next program evolutions in this very thread, or create a new thread (if needed of course) ? As said before, I may now focus on multiple images selection, and some more functionalities in the parent interface.

Cheers,

expandcollapse popup

#cs ----------------------------------------------------------------------------
AutoIt Version: 3.3.8.1
Purpose: Displays all images in the $ImgRep directory (by default, the .\Images directory)
         The images are displayed in a child GUI with vertical scrollbar.
Images are resized according to the $ZoomFactor parameter.
#ce ----------------------------------------------------------------------------

#include <GUIConstantsEx.au3>
#include <WindowsConstants.au3>
#include <GDIPlus.au3>
#include <File.au3>
#include <GUIScrollBars_Ex.au3>

Local $ImgRep = ".\Images\"
Local $Images[100]
Local $Pic[100]
Local $MaxImgWidth = 1200
Local $ZoomFactor = 0.2
Local $Spacer = 20
Local $ParentGUIWidth = 1200
Local $ParentGUIHeight = 800
Local $ChildGUIWidth = $MaxImgWidth*$ZoomFactor + 2*$Spacer + 15
Local $ChildGUIHeight = $ParentGUIHeight - 2*$Spacer

; Initialize GDI+ library and parent GUI
_GDIPlus_Startup()
$ParentGUI = GUICreate("My application", $ParentGUIWidth, $ParentGUIHeight, (@DesktopWidth-$ParentGUIWidth)/2, (@DesktopHeight-$ParentGUIHeight)/2)
GUISetBkColor(0xC4C4C4, $ParentGUI)

; Browse all filenames in Images directory
Local $Images = _FileListToArray($ImgRep, "*.jpg", 1)
If @error = 4 Then
MsgBox(0, "Error", "No files found in " & $ImgRep)
Exit
EndIf

; Initialize child GUI
$ChildGUI = GUICreate("", $ChildGUIWidth, $ChildGUIHeight, $Spacer, $Spacer, $WS_POPUP, $WS_EX_MDICHILD, $ParentGUI)

; Create images in GUI
$yPos = $Spacer
For $i = 1 To $Images[0]
; Get image size
$hImage = _GDIPlus_ImageLoadFromFile($ImgRep & $Images[$i])
$iX = _GDIPlus_ImageGetWidth($hImage)
$iY = _GDIPlus_ImageGetHeight($hImage)
_GDIPlus_ImageDispose($hImage)
; Resizes and places image in GUI
$Pic[$i] = GUICtrlCreatePic($ImgRep & $Images[$i], $Spacer, $yPos, $iX*$ZoomFactor, $iY*$ZoomFactor)
$yPos = $yPos + $iY*$ZoomFactor + $Spacer
Next

; Create scrollbars in child
_GUIScrollBars_Generate($ChildGUI, 0, $yPos - $Spacer)

; Display GUIs
GUISetState(@SW_SHOW, $ParentGUI)
GUISetState(@SW_SHOW, $ChildGUI)

; Main events listener
While 1
$nMsg = GUIGetMsg()
Switch $nMsg
     Case $GUI_EVENT_CLOSE
         Exit
     Case $Pic[1] To $Pic[$Images[0]]
         For $n = 1 To $Images[0]
             If $nMsg = $Pic[$n] Then MsgBox(64 + 8192, "Message", "This is image " & $Images[$n])
         Next
EndSwitch
WEnd

; Shut down GDI+ library
_GDIPlus_Shutdown()

Edited February 16, 2013 by Faalamva

[Melba23]

Faalamva,

1. AutoIt creates controls in the last created GUI. I think your problem is the order of the GUISetState commands - try showing the child before the parent as in my example.

2. Scrollbar width is set by the system - they are 17 pixels wide (on my machine) and I have never found a way to change it.

3. If the question deals with this particular script then ask away here. But I encourage you to open a new thread if the question is significantly different.

Glad you got the script working - and that I could help. Welcome to the forum again!

M23

[Faalamva]

OK, now that I have my image display working, I'd like to be able to click on one or several images, and set/unset some kind of visual effect (a border maybe ?) on selected/unselected images.

I'd also want to dynamically set an array containing the filenames of the selected images.

I really have no idea what function I could use for that. And what kind of sexy select/unselect effect I could use. Any idea is welcome !

Edit : Concerning Pt. 1 above, I have found what's wrong : the GUISetBkColor(0xC4C4C4, $ParentGUI) sets the current GUI back to ParentGUI, making the GUICtrlCreatePic(...) defaulting to Parent GUI. So if I want the pictures in the Child GUI, I have to create the Child GUI after the GUISetBkColor(0xC4C4C4, $ParentGUI) line.

Edit 2 : I think I have found what I need in the GUICtrlSetStyle function. Gotta check later those Common styles and Extended styles to see what is possible to do.

Edited February 16, 2013 by Faalamva

[Melba23]

Faalamva,

GUISwitch allows you to determine in which GUI the script will create controls - using it will allow you to be very specific about where you want teh next commands to act.

M23

[Melba23]

Faalamva,

And this thread might give you some hints as to how you might highlight your images.

M23

[Faalamva]

Wow thank you, this is exactly what I needed. It works perfectly but I still have two issues :

- The first is the major one : if you check my script, you will see that I have deactivated the scrollbar. The yellow borders are working and their size is correct. Now, if I uncomment the scrollbars, you may notice that the yellow borders are somehow truncated. How can it be explained, and fixed ?

Without scrollbars :

With scrollbars :

- Second, a minor issue : the select/unselect speed is quite slow. Sometimes if I click too fast on the same image, it doesn't select or unselect. Is there a way to improve the speed of my program ?

Code :

expandcollapse popup

#cs ----------------------------------------------------------------------------
AutoIt Version: 3.3.8.1
Purpose: Displays all images in the $ImgRep directory (by default, the .\Images directory)
The images are displayed in a child GUI with vertical scrollbar.
Images are resized according to the $ZoomFactor parameter.
#ce ----------------------------------------------------------------------------

#include 
#include 
#include 
#include 
#include 

Local $ImgRep = ".\Images\"
Local $NbMaxImages = 100
Local $ImageFilenames[$NbMaxImages]
Local $hLabel[$NbMaxImages]
Local $hPic[$NbMaxImages]
Local $PicXPos[$NbMaxImages]
Local $PicYPos[$NbMaxImages]
Local $PicWidth[$NbMaxImages]
Local $PicHeight[$NbMaxImages]
Local $SelectedState[$NbMaxImages]
Local $MaxImgWidth = 1200
Local $ZoomFactor = 0.2
Local $Spacer = 20
Local $BorderWidth = 5
Local $ParentGUIWidth = 1200
Local $ParentGUIHeight = 800
Local $ChildGUIWidth = $MaxImgWidth*$ZoomFactor + 2*$Spacer + 13
Local $ChildGUIHeight = $ParentGUIHeight - 2*$Spacer
Local $ParentBkColor = 0xBBBBBB
Local $ChildBkColor = 0xDDDDDD
Local $BorderColor = 0xFFFF00

; Initialize GDI+ library and parent GUI
_GDIPlus_Startup()
$ParentGUI = GUICreate("My application", $ParentGUIWidth, $ParentGUIHeight, (@DesktopWidth-$ParentGUIWidth)/2, (@DesktopHeight-$ParentGUIHeight)/2)
GUISetBkColor($ParentBkColor, $ParentGUI)
$ChildGUI = GUICreate("", $ChildGUIWidth, $ChildGUIHeight, $Spacer, $Spacer, $WS_POPUP, $WS_EX_MDICHILD, $ParentGUI)
GUISetBkColor($ChildBkColor, $ChildGUI)

; Browse all filenames in Images directory
Local $ImageFilenames = _FileListToArray($ImgRep, "*.jpg", 1)
If @error = 4 Then
MsgBox(0, "Error", "No files found in " & $ImgRep)
Exit
EndIf

; Create images in child GUI
$PicHeight[0] = 0
$PicYPos[0] = 0
For $i = 1 To $ImageFilenames[0]
; Get image size
$hImage = _GDIPlus_ImageLoadFromFile($ImgRep & $ImageFilenames[$i])
$PicWidth[$i] = _GDIPlus_ImageGetWidth($hImage)*$ZoomFactor
$PicHeight[$i] = _GDIPlus_ImageGetHeight($hImage)*$ZoomFactor
_GDIPlus_ImageDispose($hImage)
; Resizes and places image in child GUI
$PicXPos[$i] = $Spacer
$PicYPos[$i] = $PicYPos[$i-1] + $PicHeight[$i-1] + $Spacer
$hLabel[$i] = GUICtrlCreateLabel("", $PicXPos[$i]-$BorderWidth, $PicYPos[$i]-$BorderWidth, $PicWidth[$i]+2*$BorderWidth, $PicHeight[$i]+2*$BorderWidth)
GUICtrlSetBkColor($hLabel[$i], $ChildBkColor)
GUICtrlSetState($hLabel[$i], $GUI_DISABLE)
$SelectedState[$i] = 0
$hPic[$i] = GUICtrlCreatePic($ImgRep & $ImageFilenames[$i], $PicXPos[$i], $PicYPos[$i], $PicWidth[$i], $PicHeight[$i])
Next

; Create scrollbars in child GUI
;_GUIScrollBars_Generate($ChildGUI, 0, $PicYPos[$ImageFilenames[0]] + $PicHeight[$ImageFilenames[0]])

; Display GUIs
GUISetState(@SW_SHOW, $ParentGUI)
GUISetState(@SW_SHOW, $ChildGUI)

; Main events listener
While 1
$nMsg = GUIGetMsg()
Switch $nMsg
Case $GUI_EVENT_CLOSE
Exit
Case $hPic[1] To $hPic[$ImageFilenames[0]]
$n = 0
Do
$n = $n + 1
Until $hPic[$n] = $nMsg
$SelectedState[$n] = 1 - $SelectedState[$n]
GUICtrlSetBkColor($hLabel[$n], $SelectedState[$n]*$BorderColor + (1-$SelectedState[$n])*$ChildBkColor)
EndSwitch
WEnd

; Shut down GDI+ library
_GDIPlus_Shutdown()

[Melba23]

Faalamva,

Adding this to the top of your script should fix the first problem:

Opt("GUIResizeMode", $GUI_DOCKSIZE)

That prevents the controls from being resized when the scrollbars affect the size of the client area.

I cannot see any delay in selecting/unselecting - how many images are you displaying?

M23

[Faalamva]

Works perfectly, as always, thank you !

I have only 10 images displayed for now. It's not really a matter of delay when I click, for the border to appear, but rather a delay in case of several fast consecutive clicks. For example, if I click 5 times rapidly on the same image, the image may be only unselected and selected once instead of twice.

It's a very minor issue, I can live with that. I'm not supposed to click fast several times on the same image anyway, it's more a crashtest or somethin' for me to test the interface stability.

Next step : add a button that removes the selected images from the list when clicked. For now, I don't know how I'm supposed to manage that from a GUI point of view (disable the image-controls and refresh the child GUI ?). Gotta test some ideas but any hint is obviously welcome !

Cheers !

Edited February 16, 2013 by Faalamva

[Melba23]

Faalamva,

Each click on the control will be honoured, but you have to wait until the border is set/cleared before the subsequent click is honoured. Perhaps you might want to disable the pic control to prevent clicks from being registered until the border has been changed.

In any event, I would write the Case like this:

Case $hPic[1] To $hPic[$ImageFilenames[0]]
    For $n = 1 To $ImageFilenames[0]
        If $nMsg = $hPic[$n] Then
            GUICtrlSetState($hPic[$n], $GUI_DISABLE)
            $SelectedState[$n] = Not $SelectedState[$n]
            GUICtrlSetBkColor($hLabel[$n], $SelectedState[$n] * $BorderColor + (1 - $SelectedState[$n]) * $ChildBkColor)
            GUICtrlSetState($hPic[$n], $GUI_ENABLE)
            ExitLoop
        EndIf
    Next

Please ask if you do understand what I have changed, or why I have done it.

M23

[Faalamva]

I understand what you mean. However, the testing shows that it pretty much doesn't change anything, so I'll just leave it as is and focus on the next developments, thank you !

Do you think it is better to have a "for/if" instead of a "do...until" to retrieve the correct control handler ? I had changed that by thinking the loop would be faster, since it stops as soon as the handler is found. Technically, the only risk I see is an infinite loop but the Case range should prevent that from happening.

Edited February 16, 2013 by Faalamva

[Melba23]

Faalamva,

Do you think it is better to have a "for/if" instead of a "do...until" to retrieve the correct control handler ?

Your choice - I do not think it makes a lot of differnce!

But note that I too exit the loop when I find a match - so I do not waste extra passes either.

M23

P.S. And please stop quoting the entire post - I know what I wrote!