Sign in to follow this  
Followers 0
timmy2

How/where in Koda do I put the two states of a custom graphic button?

11 posts in this topic

#1 ·  Posted (edited)

I want to use my own graphics for a button in Koda. I assume I can use two graphics, one for the up state and one for down.

But in an existing button's object inspector I see only one entry for a "picture".

I figured maybe there's a way to create custom buttons so I don't have to insert a picture in an existing button but I can't find any documentation re this.

Any guidance will be greatly appreciated.

Edited by timmy2

Share this post


Link to post
Share on other sites



timmy2,

It is a bit more complicated than using Koda. This is how you might do it: ;)

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

_Main()

Func _Main()

    Local $sAutoIt_Path = StringRegExpReplace(@AutoItExe, "(^.*)(.*)", "$1")

    Local $sGreen = $sAutoIt_Path & "ExamplesGUIAdvancedImagesGreen.bmp"
    Local $sBlue = $sAutoIt_Path & "ExamplesGUIAdvancedImagesBlue.bmp"
    Local $sRed = $sAutoIt_Path & "ExamplesGUIAdvancedImagesRed.bmp"
    Local $sIcon1 = $sAutoIt_Path & "Iconsau3.ico"
    Local $sIcon2 = $sAutoIt_Path & "Iconsau3script_v10.ico"

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

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

    Local $sMsg = "The 'Changer' button shows what can be done.  " & @CRLF
    $sMsg &= "It displays Blue normally," & @CRLF
    $sMsg &= "but changes to Red when the cursor is over it. " & @CRLF
    $sMsg &= "Pressing changes it to Green." & @CRLF
    $sMsg &= "When disabled it shows Red, " & @CRLF
    $sMsg &= "and when focused using {TAB}" & @CRLF
    $sMsg &= "it switches between 2 icons."
    GUICtrlSetData($cLabel, $sMsg)

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

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

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

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

    GUISetState()

    While 1
        Switch GUIGetMsg()
            Case $GUI_EVENT_CLOSE
                Exit
            Case $cButton_1
                GUICtrlSetState($cButton_4, $GUI_FOCUS)
            Case $cButton_2
                GUICtrlSetState($cButton_1, $GUI_DISABLE)
            Case $cButton_3
                GUICtrlSetState($cButton_1, $GUI_ENABLE)
            Case $cButton_4
                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

First, thank you Melba23 but your code looks very sophisticated. I'm a newbie to AutoIt so it'll take me a while to grasp what it's doing.

Did you recommend this because Koda does not permit custom buttons, because Koda's default buttons do have at least two states?

timmy2,

It is a bit more complicated than using Koda. This is how you might do it: ;)

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

_Main()

Func _Main()

Local $sAutoIt_Path = StringRegExpReplace(@AutoItExe, "(^.*)(.*)", "$1")

Local $sGreen = $sAutoIt_Path & "ExamplesGUIAdvancedImagesGreen.bmp"
Local $sBlue = $sAutoIt_Path & "ExamplesGUIAdvancedImagesBlue.bmp"
Local $sRed = $sAutoIt_Path & "ExamplesGUIAdvancedImagesRed.bmp"
Local $sIcon1 = $sAutoIt_Path & "Iconsau3.ico"
Local $sIcon2 = $sAutoIt_Path & "Iconsau3script_v10.ico"

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

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

Local $sMsg = "The 'Changer' button shows what can be done. " & @CRLF
$sMsg &= "It displays Blue normally," & @CRLF
$sMsg &= "but changes to Red when the cursor is over it. " & @CRLF
$sMsg &= "Pressing changes it to Green." & @CRLF
$sMsg &= "When disabled it shows Red, " & @CRLF
$sMsg &= "and when focused using {TAB}" & @CRLF
$sMsg &= "it switches between 2 icons."
GUICtrlSetData($cLabel, $sMsg)

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

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

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

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

GUISetState()

While 1
Switch GUIGetMsg()
Case $GUI_EVENT_CLOSE
Exit
Case $cButton_1
GUICtrlSetState($cButton_4, $GUI_FOCUS)
Case $cButton_2
GUICtrlSetState($cButton_1, $GUI_DISABLE)
Case $cButton_3
GUICtrlSetState($cButton_1, $GUI_ENABLE)
Case $cButton_4
MsgBox(0, "", "Hi!")
EndSwitch
WEnd
EndFunc ;==>_Main

M23

Share this post


Link to post
Share on other sites

timmy2,

Koda buttons are just normal AutoIt buttons - all Koda does is create the basic code for you. You cannot do everything AutoIt can do in Koda - sometimes you have to write the code manually. ;)

I do not use Koda (and never have), so I have no idea quite what the 2 button states you refer to actually do - the only button I know of with 2 states is a checkbox with the $BS_PUSHLIKE style:

#include <GUIConstantsEx.au3>
#include <ButtonConstants.au3>

Local $sAutoIt_Path = StringRegExpReplace(@AutoItExe, "(^.*)(.*)", "$1")

Local $sGreen = $sAutoIt_Path & "ExamplesGUIAdvancedImagesGreen.bmp"
Local $sRed = $sAutoIt_Path & "ExamplesGUIAdvancedImagesRed.bmp"

$hGUI = GUICreate("Test", 500, 500)

$cCheck = GUICtrlCreateCheckbox("", 10, 10, 50, 50, BitOr($BS_BITMAP, $BS_PUSHLIKE))
GUICtrlSetImage(-1, $sGreen)

GUISetState()

While 1

    Switch GUIGetMsg()
        Case $GUI_EVENT_CLOSE
            Exit
        Case $cCheck
            Switch GUICtrlRead($cCheck)
                Case 1
                    ; Pressed
                    GUICtrlSetImage($cCheck, $sRed)
                Case Else
                    ; Not pressed
                    GUICtrlSetImage($cCheck, $sGreen)
            EndSwitch
    EndSwitch

WEnd

Is that what you are looking for? :)

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,

Thank you again for responding. AutoIt et al is on my office PC and I'm not there yet so I can't try your code examples.

I saw in another post where you said you had only a few minutes exposure to Koda but if you have access to it I'd really appreciate your creating a single button in it using the default settings. When you generate a live view of the GUI click on the button and you'll see it changes "states" -- maybe it's just a color change, I don't know -- but this gave me the impression that a button might be able to consist of at least two graphic files: one for the un-pressed state and one when pressed.

I apologize for the ignorant assumptions but I'm totally new to AutoIt and just happened to discover Koda early on, before I realized it has no support or dedicated forum, and its wiki seems to be broken. Moreover, I recently did some intense learning in Pano2VAR and got accustomed to its GUI designer, which does allow buttons in multiple states, so I assumed this is common to all GUI layout software.

timmy2,

Koda buttons are just normal AutoIt buttons - all Koda does is create the basic code for you. You cannot do everything AutoIt can do in Koda - sometimes you have to write the code manually. ;)

I do not use Koda (and never have), so I have no idea quite what the 2 button states you refer to actually do - the only button I know of with 2 states is a checkbox with the $BS_PUSHLIKE style:

#include <GUIConstantsEx.au3>
#include <ButtonConstants.au3>

Local $sAutoIt_Path = StringRegExpReplace(@AutoItExe, "(^.*)(.*)", "$1")

Local $sGreen = $sAutoIt_Path & "ExamplesGUIAdvancedImagesGreen.bmp"
Local $sRed = $sAutoIt_Path & "ExamplesGUIAdvancedImagesRed.bmp"

$hGUI = GUICreate("Test", 500, 500)

$cCheck = GUICtrlCreateCheckbox("", 10, 10, 50, 50, BitOr($BS_BITMAP, $BS_PUSHLIKE))
GUICtrlSetImage(-1, $sGreen)

GUISetState()

While 1

Switch GUIGetMsg()
Case $GUI_EVENT_CLOSE
Exit
Case $cCheck
Switch GUICtrlRead($cCheck)
Case 1
; Pressed
GUICtrlSetImage($cCheck, $sRed)
Case Else
; Not pressed
GUICtrlSetImage($cCheck, $sGreen)
EndSwitch
EndSwitch

WEnd

Is that what you are looking for? :)

M23

Share this post


Link to post
Share on other sites

timmy2,

A normal button will indeed change state when you hold down the mouse button over it but reverts to the normal state when the button is released. The only way I know of changing its graphic at that moment is using the GUIImageList code in post #2. wraithdu and I once spent a lot of time looking into how to do it another way and did not succeed. :(

A push button (as I coded in post #4) remains in the new state until it is clicked a second time so we can use pretty easy code to change the image as you can see. ;)

I hope that explains the difference between the 2 types of button and why it needs complicated code to change a normal button. :)

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

Ah, well, "normal" vs "push". I wasn't aware of the distinction so my question was apparently unclear.

The "normal" button behavior is fine with me ("will change state when you hold down the mouse button over it but reverts to the normal state when the button is released"). My questions was/is: is it possible to edit the graphics involved in this button's appearance? (Again I know very little about AutoIt so try to relate.) Unless these buttons are vectors drawn "live" during use I assume there's a graphic file (icon, gif, whatever) stored somewhere that gives each button and each state its distinctive look. I'm asking if I can change that because I want the button to be a red square with a reflection (created in Photoshop) and when it's "held down" I want a shadow inside to look like it's been pressed in.

So I'm asking if I can add my own button graphics or edit existing button graphics. Whether they're in AutoIt, a dll, Koda or a folder -- doesn't matter to me.

timmy2,

A normal button will indeed change state when you hold down the mouse button over it but reverts to the normal state when the button is released. The only way I know of changing its graphic at that moment is using the GUIImageList code in post #2. wraithdu and I once spent a lot of time looking into how to do it another way and did not succeed. :(

A push button (as I coded in post #4) remains in the new state until it is clicked a second time so we can use pretty easy code to change the image as you can see. ;)

I hope that explains the difference between the 2 types of button and why it needs complicated code to change a normal button. :)

M23

Share this post


Link to post
Share on other sites

If you look at the script that Melba23 posted, he's just using graphics from the installation of AutoIt in that, because I assume he figures anyone using AutoIt will have access to those pic files. You can use anything in place of those graphics for your buttons.


If I posted any code, assume that code was written using the latest release version unless stated otherwise. Also, if it doesn't work on XP I can't help with that because I don't have access to XP, and I'm not going to.
Give a programmer the correct code and he can do his work for a day. Teach a programmer to debug and he can do his work for a lifetime - by Chirag Gude
How to ask questions the smart way!

I hereby grant any person the right to use any code I post, that I am the original author of, on the autoitscript.com forums, unless I've specifically stated otherwise in the code or the thread post. If you do use my code all I ask, as a courtesy, is to make note of where you got it from.

Back up and restore Windows user files _Array.au3 - Modified array functions that include support for 2D arrays.  -  ColorChooser - An add-on for SciTE that pops up a color dialog so you can select and paste a color code into a script.  -  Customizable Splashscreen GUI w/Progress Bar - Create a custom "splash screen" GUI with a progress bar and custom label.  -  _FileGetProperty - Retrieve the properties of a file  -  SciTE Toolbar - A toolbar demo for use with the SciTE editor  -  GUIRegisterMsg demo - Demo script to show how to use the Windows messages to interact with controls and your GUI.  -   Latin Square password generator

Share this post


Link to post
Share on other sites

timmy2,

because I want the button to be a red square with a reflection (created in Photoshop) and when it's "held down" I want a shadow inside to look like it's been pressed in

Then you need the GUIImageList code in post #2:

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

_Main()

Func _Main()

    Local $sNormal = "Path_To_The_Normal_Image"
    Local $sPressed = "Path_To_The_Pressed_Image"

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

    Local $cButton_1 = GUICtrlCreateButton("", 30, 30, 32, 32)
    Local $hImage_Button_1 = _GUIImageList_Create(24, 24, 5, 5)
    _GUIImageList_AddBitmap($hImage_Button_1, $sNormal)  ;1 - Normal
    _GUIImageList_AddBitmap($hImage_Button_1, $sNormal)  ;2 - Hot - same as normal
    _GUIImageList_AddBitmap($hImage_Button_1, $sPressed) ;3 - Pressed
    _GUICtrlButton_SetImageList($cButton_1, $hImage_Button_1)

    GUISetState()

    While 1
        Switch GUIGetMsg()
            Case $GUI_EVENT_CLOSE
                Exit
        EndSwitch
    WEnd
EndFunc   ;==>_Main

Just replace the placeholder paths with the paths to your images and it should work. :)

M23

P.S. In future please use the "Reply to this topic" button at the top of the thread or the "Reply to this topic" editor at the bottom rather than the "Quote" button - I know what I wrote and it just pads the thread unneccessarily. ;)


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

Thank you VERY MUCH, Melba23. Especially for sticking with me in all my ignorance. Your code in post #4 and additional explanations, plus BrewManNH's help finally nailed the concepts through my thick skull.

And I will definitely not use "quote" to reply.

Like one guy wrote in a post here (and I must paraphrase), "A forum where people actually provide substantive and friendly help!" This is amazing. I wish I could reciprocate.

Share this post


Link to post
Share on other sites

timmy2,

Glad we got there - and thanks for the kind words about the forum. :)

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

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