controlling button border color

kiboost · January 8, 2011

Hi,

I have two long scripts/applications with dark background and buttons, and I can't get ride of a blue contour around my buttons. I've search in help and everywhere I can think of and can't see how to change that (apart settings bitmaps, but I would have to create too many bitmap)

Here is my gui :

$Form1 = GUICreate($myversion, $width, $height, $pref_uiposx, $pref_uiposy, BitOR($GUI_SS_DEFAULT_GUI,$WS_BORDER))
GUISetBkColor(0x505050)
GUICtrlSetDefColor(0xc1c1c1)

GUICtrlCreateButton("Browse", $left+570, $top-4, 60, 25)
GUICtrlSetOnEvent(-1, "projectfiledialog")
GUICtrlSetBkColor(-1, 0x414141)

How can I remove this blue contour around buttons ? Getting a black one, or even no contour ? This blue has nothing to do in my GUI, and is very distracting.

Thks

Kib

Edited January 8, 2011 by kiboost

Melba23 · January 8, 2011

kiboost,

How is this different from your earlier post on button borders just a few topics below this?

Stick to just the one thread please.

M23

kiboost · January 9, 2011

Arg sorry, can't understand how I could post same post twice ... I must have done something and came back saying "ah, I was thinking about asking this ..." forgetting I did ever done it ! Sometimes coding is evil.

So, any idea ?

Melba23 · January 9, 2011

kiboost,

So, any idea ?

I am afraid not. :shifty:

Colouring buttons has always been fraught with danger in AutoIt. For example, any coloured button traps the "Enter" key regardless of focus. There is apparently a problem in the way button colouring was implemented the deep GUI code a very long time ago, which no-one seems to eager to change for obvious reasons.

However, have you thought of using labels rather than buttons? The only real difference is that the label fires on mouse-down whereas the button fires on mouse-up:

#include <GUIConstantsEx.au3>
#include <StaticConstants.au3>

Opt("GUIOnEventMode", 1)

$hGUI = GUICreate("Test", 500, 500)
GUISetOnEvent($GUI_EVENT_CLOSE, "_Exit")
GUISetBkColor(0x505050)
GUICtrlSetDefColor(0xc1c1c1)

GUICtrlCreateLabel("Browse", 10, 10, 60, 25, BitOr($SS_NOTIFY, $SS_CENTER, $SS_CENTERIMAGE))
GUICtrlSetOnEvent(-1, "Hi")
GUICtrlSetBkColor(-1, 0x414141)

GUISetState()

While 1
    Sleep(10)
WEnd

Func _Exit()
    Exit
EndFunc

Func Hi()
    MsgBox(0, "", "Hi!")
EndFunc

Best I can offer, sorry.

M23

kiboost · January 9, 2011

Thanks Melba. Indeed, controling button appearance is really poor in autoit. Your label trick can be a workaround, but it's annoying to not have the mouseup behavior and changing state of the button. The default button with gradient is nice, and controling start/end color for the gradient and contour color wouldn't be too much.

Do you know if it's something being enhance in future versions of autoit ? It's really annoying, regarding how amazing this language is. The more I create GUIs (I now do some really complexe stuff now with autoit), the more I would like to have pro looking UI. I know autoit is free and can't ask anything, it is ever an amazing tool, let alone being free, but it would be really nice indeed.

Do you know if there is a way to put a button as bitmap, but with some text on it ? So we could create one bitmap for every buttons in the UI, and still having text to differentiate them. Actually, creating one bitmap per button is just not doable.

Regards,

Kib

Melba23 · January 9, 2011

kiboost,

Something I found in my Snippets folder which might help with your buttons. It uses the .bmp and icon files from the standard AutoIt install so it should work for you. If not, then just substitute your own files:

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

_Main()

Func _Main()
    Local $sGreen = "C:\Program Files\AutoIt3\Examples\GUI\Advanced\Images\Green.bmp"
    Local $sBlue = "C:\Program Files\AutoIt3\Examples\GUI\Advanced\Images\Blue.bmp"
    Local $sRed = "C:\Program Files\AutoIt3\Examples\GUI\Advanced\Images\Red.bmp"
    Local $sIcon1 = "C:\Program Files\AutoIt3\Icons\au3.ico"
    Local $sIcon2 = "C:\Program Files\AutoIt3\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 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

I hope it proves useful.

M23

guinness · January 9, 2011

Nice example! I have been playing with _GUIImageList_Create() the last couple of days and its surprisingly easy to implement with a lot of reward at the end. Added to my Function Folder

kiboost · January 10, 2011

Thanks Melba

The problem is once I set GUICtrlSetDefColor(0xc1c1c1) to set dark background, no image button and such works anymore.

I've found in another msg in the forum that is seems to be an autoit bug. I develop only dark GUI and it's a real pain.

I would need to define input borders colors, button border colors, checkbox transparent around the checkbox itself, button gradients, etc etc etc. And here, it's a total mess on autoit side. I've try gdi+ plus it is an overlay function so I can't put labels on top of it for buttons, or inputs etc. Would also be an heavy solution.

I don't know if this will be fixed and enhanced in next autoit versions. I'm looking at C++ right now, which seems to be more like php but very similar to autoit also. Just hope it will allow me to design gui like I need. Autoit is o much easy and powerfull, it's really annoying to have such limitations for GUIs.

Cheers,

Kib

Melba23 · January 10, 2011

kiboost,

As I mentioned before, the button colouring problems stem from deep within the AutoIt source code and I doubt they will ever be fixed unless AutoIt4 ever sees the light of day - which is not very likely at any time soon. If you only want to develop "dark" GUIs then you will always have these problems. Best you try another language, I am afraid.

I'm looking at C++ right now, which seems to be [...] very similar to autoit [...]

I am not sure I agree with you there! But good luck anyway!

M23

kiboost · January 10, 2011

Well, autoit isn't my first/only language and I guess once you know differents languages, they are all similar lol. But autoit+scite is by far the most convenient development environement I know !

AvvA · August 24, 2011

Thank you Melba23 for the label idea, this helped me a lot to see things under a different angle.

I give a simple solution to draw custom colored borders and to add a gradient over the label. I like that it doesn't require to include something special to work.

Custom colored Border:

It consists of creating a 24 bits BMP picture of 1x1 pixel and to extend it to the height and width of the label, +1 pixel. Below 24 bits it seems not to work, but I only tested on Windows 7.

Pictures get the Click events, I had to move the behavior on the border control, except for the 1st and last buttons which only use a gradient over the label, but which is a picture of the exact same size on top of the label, and the behavior is still on the label and working, but it isn't for the ones with a border, I didn't get it.).

I attach 2 BMP pictures, one black and one red, 1x1 pixel, 100% opacity.

Gradient:

It consists of creating an image of 1 pixel width and approximatively "the size of a button" height. Then rotate this image 90°, fill it with a gradient from white to black, rotate back 90°, reduce opacity to something which will please you, save as a BMP 32 bits.

32 bits is important to keep opacity.

I give 2 sample images, the first sizing 1x21 pixel, top black -> white bottom (to match with $SS_SUNKEN), 20% opacity,

the second 64x64, "glass effect", 31% opacity (made by S187).

--------------

I took Melba23 sample code and add a hand cursor on mouse over and a sunken border for some "label-buttons".

Then I read the control position and size and apply the gradient resized to the control size on top of it.

For custom border I create them first (for them to be background of the label), then create the label, then get size and position of this label and adapt the previously created border picture to slightly overlap the label (by 1px in my examples).

Don't forget to put the attached files near script file.

#include <GUIConstantsEx.au3>
#include <StaticConstants.au3>

Opt("GUIOnEventMode", 1)


$hGUI = GUICreate("Test", 350, 180)
GUISetOnEvent($GUI_EVENT_CLOSE, "_Exit")
GUISetBkColor(0x505050)
GUICtrlSetDefColor(0xcccccc)


; only gradient with default sunken border (which are also victims of the gradient)
$label = GUICtrlCreateLabel("Browse 1", 10, 10, 60, 25, BitOr($SS_NOTIFY, $SS_CENTER, $SS_CENTERIMAGE, $SS_SUNKEN)) ;$SS_SUNKEN for the bi-coloured border
GUICtrlSetOnEvent(-1, "Hi")
GUICtrlSetBkColor(-1, 0x414141)
GUICtrlSetCursor(-1, 0) ;set a hand cursor on mouse over
$ctrlpos = ControlGetPos($hGUI, "", $label) ;retrieve the control left,top, width and height
GUICtrlCreatePic(@ScriptDir & '\' & "gradient.bmp", $ctrlpos[0],$ctrlpos[1], $ctrlpos[2],$ctrlpos[3])   ; apply gradient to the whole label

; when you know the size of the control - gradient on label only, and a black border
GUICtrlCreatePic("black.bmp", 79,9, 62,27)  ;make a rectangle larger and longer than the label of 1 pixel
GUICtrlSetCursor(-1, 0)
GUICtrlSetOnEvent(-1, "Hi")
$label0 = GUICtrlCreateLabel("Browse 2", 80,10, 60,25, BitOr($SS_CENTER, $SS_CENTERIMAGE))
GUICtrlSetBkColor(-1, 0x414141)
$ctrlpos = ControlGetPos($hGUI, "", $label0)
GUICtrlCreatePic(@ScriptDir & '\' & "gradient.bmp", $ctrlpos[0],$ctrlpos[1], $ctrlpos[2],$ctrlpos[3])   ; apply gradient to the whole label

; when you know the size of the control - gradient on label, sunken borders, black borders
GUICtrlCreatePic("black.bmp", 159,9, 62,27)     ;make a rectangle larger and longer than the label of 1 pixel
GUICtrlSetCursor(-1, 0)
GUICtrlSetOnEvent(-1, "Hi")
$label1 = GUICtrlCreateLabel("Browse 3", 160,10, 60,25, BitOr($SS_CENTER, $SS_CENTERIMAGE, $SS_SUNKEN))
GUICtrlSetBkColor(-1, 0x414141)
$ctrlpos = ControlGetPos($hGUI, "", $label1)
GUICtrlCreatePic(@ScriptDir & '\' & "gradient.bmp", $ctrlpos[0],$ctrlpos[1], $ctrlpos[2],$ctrlpos[3])   ; apply gradient to the whole label

; only gradient resized to overlap label size by one pixel, thus making a border
$label2 = GUICtrlCreateLabel("Browse 4", 230, 10, 60, 25, BitOr($SS_NOTIFY, $SS_CENTER, $SS_CENTERIMAGE))
GUICtrlSetOnEvent(-1, "Hi")
GUICtrlSetBkColor(-1, 0x414141)
GUICtrlSetCursor(-1, 0)
$ctrlpos = ControlGetPos($hGUI, "", $label2)    ;retrieve the control left,top, width and height
GUICtrlCreatePic(@ScriptDir & '\' & "gradient.bmp", $ctrlpos[0]-1,$ctrlpos[1]-1, $ctrlpos[2]+2,$ctrlpos[3]+2)   ; apply gradient to the whole label + 1 pixel

; when you don't know the size of the control - gradient applied to label only, red border
$border = GUICtrlCreatePic("red.bmp", 1,1, 1,1) ; prepare the border
GUICtrlSetOnEvent(-1, "Ouille")
GUICtrlSetCursor(-1, 0)
$label3 = GUICtrlCreateLabel("Don't do that", 10,50, -1,-1, BitOr($SS_CENTER, $SS_CENTERIMAGE))
GUICtrlSetBkColor(-1, 0x991010)
$ctrlpos = ControlGetPos($hGUI, "", $label3)
GUICtrlSetPos($border, $ctrlpos[0]-1,$ctrlpos[1]-1, $ctrlpos[2]+2,$ctrlpos[3]+2)    ;make the background color to the size of the control +1 pixel
GUICtrlCreatePic(@ScriptDir & '\' & "gradient.bmp", $ctrlpos[0],$ctrlpos[1], $ctrlpos[2],$ctrlpos[3]) ;apply gradient to label only

; when you don't know the size of the control - gradient applied to label and to border
$border1 = GUICtrlCreatePic("red.bmp", 1,1, 1,1)
GUICtrlSetCursor(-1, 0)
GUICtrlSetOnEvent(-1, "Ouille")
$label4 = GUICtrlCreateLabel("I... I wonder... no, don't!", 90,50, -1,40, BitOr($SS_CENTER, $SS_CENTERIMAGE))
GUICtrlSetBkColor(-1, 0x991010)
$ctrlpos = ControlGetPos($hGUI, "", $label4)
GUICtrlSetPos($border1, $ctrlpos[0]-1,$ctrlpos[1]-1, $ctrlpos[2]+2,$ctrlpos[3]+2)
GUICtrlCreatePic(@ScriptDir & '\' & "gradient.bmp", $ctrlpos[0]-1,$ctrlpos[1]-1, $ctrlpos[2]+2,$ctrlpos[3]+2) ;apply gradient to whole label and border

; when you don't know the size of the control - special gradient applied to label, no border
$label5 = GUICtrlCreateLabel("Let me enlarge this button a bit...", 90,100, -1,70, BitOr($SS_CENTER, $SS_CENTERIMAGE))
GUICtrlSetBkColor(-1, 0x991010)
GUICtrlSetCursor(-1, 0)
GUICtrlSetOnEvent(-1, "Hi")
$ctrlpos = ControlGetPos($hGUI, "", $label5)
GUICtrlCreatePic(@ScriptDir & '\' & "ombre.bmp", $ctrlpos[0],$ctrlpos[1], $ctrlpos[2],$ctrlpos[3]) ;apply gradient to whole label


GUISetState()

While 1
    Sleep(10)
WEnd

Func _Exit()
    Exit
EndFunc

Func Ouille()
    MsgBox(0, "", "What was written already?")
EndFunc

Func Hi()
    MsgBox(0, "", "Hi!")
EndFunc

Border and gradient are similar, it is possible to use the gradient to do a better border, and as you do the gradient you can choose how it should be, but it costs room if you want something beautiful. The advantage of the color dot and the gradient bar is in their sizes.

I hope it could help :mellow: .

It gives this:

Melba23 · August 24, 2011

AvvA,

Nice work. :mellow:

M23

picea892 · August 24, 2011

Hi, my attempts at buttons are here. Take a look if you like

Backgrounds that can be buttons

AvvA · August 24, 2011

Thank you M23 :mellow:

picea892, when seeing your marvelous scripts I feel a bit like a hobbit at war with my dirty WEB trick...

Well, it's different because the work with my example is made with GIMP, whereas all by code lines with yours, which I find quite delicious despite it requires more inclusions.

In all case thanks for pointing out your scripts, they're really beautiful and seem quite customizable.

controlling button border color

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members