Flicker-free OnHover

[Lucid]

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!

[Melba23]

Lucid,

 

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

Does this help:

expandcollapse popup

#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

[Lucid]

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!

[Melba23]

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

[Lucid]

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?

[Valuater]

Button Hover is your friend...

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

8)

 

EDIT:  needs updated, you will have to add button and label constatnts au3 files

Edited January 17, 2014 by Valuater

[Fraser]

Or maybe try this.

expandcollapse popup

#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 =

x_close_2.jpg =
header.jpg =

Edit: Testing a on click function at the moment!

Edited January 19, 2014 by Fraser