Sign in to follow this  
Followers 0
Lucid

Flicker-free OnHover

7 posts in this topic

First off, I'm still learning AutoIT, so hopefully this isn't already covered somewhere that my Google-fu didn't turn up for me.

I'm trying to find a good method to detect when the cursor is hovering over a picture control and to then change the picture. Basically, I'm wanting to use images for buttons - with three different states/images (normal, hover, pressed). I took the GUICtrlSetOnHover UDF for a spin, but kept seeing flickers at times when I quickly moved the mouse on/off the images (the images are on top of a dark background image).

'?do=embed' frameborder='0' data-embedContent>>

Has anyone done something like this, and care to share some info? What can I do to use images as a animated/reactive button? Is GUICtrlSetOnHover the recommended way to go and I should continue to dig into it? Any advice is appreciated.

Also, is there a reason to use one image format over another? Like .BMP over .JPG or .PNG?

Thanks!

Share this post


Link to post
Share on other sites



Lucid,

 

I'm wanting to use images for buttons - with three different states/images (normal, hover, pressed)

Does this help: :)

#include <GUIConstantsEx.au3>
#include <GuiButton.au3>
#include <GuiImageList.au3>

_Main()

Func _Main()

    Local $sAutoIt_Path = StringReplace(@AutoItExe, "AutoIt3.exe", "")
    ConsoleWrite($sAutoIt_Path & @CRLF)

    Local $sGreen = $sAutoIt_Path & "Examples\GUI\Advanced\Images\Green.bmp"
    Local $sBlue = $sAutoIt_Path & "Examples\GUI\Advanced\Images\Blue.bmp"
    Local $sRed = $sAutoIt_Path & "Examples\GUI\Advanced\Images\Red.bmp"
    Local $sIcon1 = $sAutoIt_Path & "Icons\au3.ico"
    Local $sIcon2 = $sAutoIt_Path & "Icons\au3script_v10.ico"
    Local $btn1, $btn2, $btn3, $btn4, $msg
    Local $hImagebtn1, $hImagebtn2, $hImagebtn3, $hImagebtn4
    Local $label1

    ;Caveat: Minimum Operating Systems: Windows XP

    Local $hGUI = GUICreate("Button Imagelists", 500, 300)

    $label1 = GUICtrlCreateLabel("", 150, 30, 340, 250)
    GUICtrlSetFont(-1, 12)

    $msg = "The 'Changer' button shows what can be done.  " & @CRLF
    $msg &= "It displays Blue normally," & @CRLF
    $msg &= "but changes to Red when the cursor is over it. " & @CRLF
    $msg &= "Pressing changes it to Green." & @CRLF
    $msg &= "When disabled it shows Red, " & @CRLF
    $msg &= "and when focused (use the Tab key)" & @CRLF
    $msg &= "it switches between 2 icons."
    GUICtrlSetData($label1, $msg)

    ;multi state image Bitmap
    $btn1 = GUICtrlCreateButton("Changer", 30, 30, 90, 32)
    GUICtrlSetTip(-1, "Multi state bitmap imagelist")
    $hImagebtn1 = _GUIImageList_Create(24, 24, 5, 5)
    _GUIImageList_AddBitmap($hImagebtn1, $sBlue)  ;1 - Normal
    _GUIImageList_AddBitmap($hImagebtn1, $sRed)   ;2 - Hot
    _GUIImageList_AddBitmap($hImagebtn1, $sGreen) ;3 - Pressed
    _GUIImageList_AddBitmap($hImagebtn1, $sRed)   ;4 - Disabled
    _GUIImageList_AddIcon($hImagebtn1, $sIcon1)   ;5 - Focus Switch - possibly Vista only for the switch
    _GUIImageList_AddIcon($hImagebtn1, $sIcon2)   ;6 - Focus Switch
    _GUICtrlButton_SetImageList($btn1, $hImagebtn1)

    ;single state image Bitmap
    $btn2 = GUICtrlCreateButton("Disable", 30, 70, 90, 32)
    GUICtrlSetTip(-1, "Single bitmap imagelist")
    $hImagebtn2 = _GUIImageList_Create(24, 24, 5, 3)
    _GUIImageList_AddBitmap($hImagebtn2, $sRed);1 - Normal
    _GUICtrlButton_SetImageList($btn2, $hImagebtn2)

    ;single state image Icon
    $btn3 = GUICtrlCreateButton("Unlock", 30, 110, 90, 40)
    GUICtrlSetTip(-1, "Single icon imagelist")
    $hImagebtn3 = _GUIImageList_Create(32, 32, 5, 3)
    _GUIImageList_AddIcon($hImagebtn3, "shell32.dll", 47, True)
    _GUICtrlButton_SetImageList($btn3, $hImagebtn3)

    ;single state image Bitmap with overlay text
    $btn4 = GUICtrlCreateButton("Help", 30, 160, 90, 32)
    GUICtrlSetTip(-1, "Single bitmap imagelist with overlayed text")
    GUICtrlSetFont(-1, 14, 800, -1, "Comic Sans MS")
    $hImagebtn4 = _GUIImageList_Create(90, 32, 5, 3)
    _GUIImageList_AddBitmap($hImagebtn4, $sRed)
    _GUICtrlButton_SetImageList($btn4, $hImagebtn4, 4)

    GUISetState()

    While 1
        $msg = GUIGetMsg()
        Switch $msg
            Case $GUI_EVENT_CLOSE
                Exit
            Case $btn1
                GUICtrlSetState($btn4, $GUI_FOCUS)
            Case $btn2
                GUICtrlSetState($btn1, $GUI_DISABLE)
            Case $btn3
                GUICtrlSetState($btn1, $GUI_ENABLE)
            Case $btn4
                MsgBox(0, "", "Hi!")
        EndSwitch
    WEnd
EndFunc   ;==>_Main
M23

Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind._______My UDFs:

Spoiler

ArrayMultiColSort ---- Sort arrays on multiple columns
ChooseFileFolder ---- Single and multiple selections from specified path treeview listing
Date_Time_Convert -- Easily convert date/time formats, including the language used
ExtMsgBox --------- A highly customisable replacement for MsgBox
GUIExtender -------- Extend and retract multiple sections within a GUI
GUIFrame ---------- Subdivide GUIs into many adjustable frames
GUIListViewEx ------- Insert, delete, move, drag, sort, edit and colour ListView items
GUITreeViewEx ------ Check/clear parent and child checkboxes in a TreeView
Marquee ----------- Scrolling tickertape GUIs
NoFocusLines ------- Remove the dotted focus lines from buttons, sliders, radios and checkboxes
Notify ------------- Small notifications on the edge of the display
Scrollbars ----------Automatically sized scrollbars with a single command
StringSize ---------- Automatically size controls to fit text
Toast -------------- Small GUIs which pop out of the notification area

 

Share this post


Link to post
Share on other sites

Melba23,

Thanks for the quick response. I ran through some tests with your sample code, and it's almost workable for what I want. But I can't get rid of part of the actual button control. I can get my image to display over the top of 95% of the button, but there's some space along the left of my image. I tweaked the sizes and everything, but I guess I must be missing something. If my .BMP is 72x32, how can I set it so that takes up (hides?) 100% of the button control?

Also, are .BMPs the recommended image format? I tend to lean towards something that allows transparency. Just wondering since I'm still figuring this language out.

Thanks again!

Share this post


Link to post
Share on other sites

Lucid,

As far as I know you cannot cover the entire button - there is always a small border. :(

And I am afraid that using anything other than bitmaps to play with buttons like this is well outside my range of expertise - you need a proper image specialist to answer that. ;)

M23


Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind._______My UDFs:

Spoiler

ArrayMultiColSort ---- Sort arrays on multiple columns
ChooseFileFolder ---- Single and multiple selections from specified path treeview listing
Date_Time_Convert -- Easily convert date/time formats, including the language used
ExtMsgBox --------- A highly customisable replacement for MsgBox
GUIExtender -------- Extend and retract multiple sections within a GUI
GUIFrame ---------- Subdivide GUIs into many adjustable frames
GUIListViewEx ------- Insert, delete, move, drag, sort, edit and colour ListView items
GUITreeViewEx ------ Check/clear parent and child checkboxes in a TreeView
Marquee ----------- Scrolling tickertape GUIs
NoFocusLines ------- Remove the dotted focus lines from buttons, sliders, radios and checkboxes
Notify ------------- Small notifications on the edge of the display
Scrollbars ----------Automatically sized scrollbars with a single command
StringSize ---------- Automatically size controls to fit text
Toast -------------- Small GUIs which pop out of the notification area

 

Share this post


Link to post
Share on other sites

Thanks for the feedback Melba23! Guess I'm back to square one since I can't cover the entire button. Anyone else using some sort of "mouseover" code?

Share this post


Link to post
Share on other sites

#7 ·  Posted (edited)

Or maybe try this.

#region
#AutoIt3Wrapper_Run_Tidy=y
#AutoIt3Wrapper_Tidy_Stop_OnError=n
#endregion

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

DirCreate(@TempDir & "\images")
FileInstall("images\header.jpg", @TempDir & "\images\header.jpg", 1)
FileInstall("images\x_close_1.jpg", @TempDir & "\images\x_close_1.jpg", 1)
FileInstall("images\x_close_2.jpg", @TempDir & "\images\x_close_2.jpg", 1)

Global $GUI_BGC = "0xacacac", $main, $pic_exit

$main = GUICreate("Test titlebar button", 615, 422, -1, -1, $WS_POPUP)
GUISetBkColor($GUI_BGC)

GUICtrlCreatePic(@TempDir & "\images\header.jpg", 0, 0, 615, 20)
GUICtrlSetState(-1, $GUI_DISABLE)

$pic_exit = GUICtrlCreatePic(@TempDir & "\images\x_close_1.jpg", 580, 0, 30, 18)

GUIRegisterMsg($WM_NCHITTEST, "_MY_NCHITTEST")

GUISetState(@SW_SHOW, $main)

$Icon1UnderCursor = False

While 1
    $nMsg = GUIGetMsg()
    Switch $nMsg
        Case $pic_exit
            DirRemove(@TempDir & "\images", 1)
            Exit
    EndSwitch
    $cursor = GUIGetCursorInfo($main)
   If Not @error Then
        Select
            Case $cursor[4] = $pic_exit And $Icon1UnderCursor = False
                GUICtrlSetImage($pic_exit, @TempDir & "\images\x_close_2.jpg")
                $Icon1UnderCursor = True
            Case $cursor[4] <> $pic_exit And $Icon1UnderCursor
                GUICtrlSetImage($pic_exit, @TempDir & "\images\x_close_1.jpg")
                $Icon1UnderCursor = False
                $Icon1Pressed = False
            Case $cursor[4] = $pic_exit And $cursor[2] = 1 And $Icon1Pressed = False
                $Icon1Pressed = True
                MsgBox(0, "", "Pressed Exit")
        EndSelect
    EndIf
WEnd

Func _MY_NCHITTEST($hWnd, $uMsg, $wParam, $lParam)
    Switch $hWnd
        Case $main
            Local $aPos = WinGetPos($hWnd) ; Check if mouse is over top 50 pixels
            If Abs(BitAND(BitShift($lParam, 16), 0xFFFF) - $aPos[1]) < 20 Then Return $HTCAPTION
    EndSwitch
    Return $GUI_RUNDEFMSG
EndFunc

Pictures:

x_close_1.jpg = hb1r.jpg

x_close_2.jpg = t87s.jpg
header.jpg = rj6j.jpg

Edit: Testing a on click function at the moment!

Edited by Fraser

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0