Change colors in a button

[papiosaur]

Hello,

i would like to colorize a button, is possible? Background in red and text in white for example.

Thanks for your help.

[Bugala]

Yes and No.

Buttons themselves dont have any colors, or text.

But in practice you make graphics that represent a button.

you have two ways to do it:

1. You can attach your button into some graphics. as example:

Code: Select all

[id] = MakeButton(id, #LAYERBUTTON, layerid, exactcoll, noautohide, t

Whic in practice could be:

Code: Select all

MakeButton(1, #LAYERBUTTON, 2, True, True, {OnMouseUp = Function() Debugprint("button OnMouseUp happened") EndFunction )

You of course need to have some layer with ID 2, and this could be for example a Brush, which could be a picture of a red button with a white text.


2. Using #SIMPLEBUTTON option, you would have to handle the graphics yourself, simplebutton works following:

Code: Select all

[id] = MakeButton(id, #SIMPLEBUTTON, x, y, width, height, t[, userdata])

and example could be:

Code: Select all

MyBox = {X = 100, Y = 200, Width=100, Height=100}

MakeButton(1, #SIMPLEBUTTON, Mybox.x, Mybox.Y, Mybox.Width, Mybox.Height, {OnMouseUp = Function() Debugprint("Button OnMouseUp Happened") )
Box(MyBox.X, MyBox.Y, MyBox.Width, MyBox.Height, #RED)
Text(MyBox.X + 5, MyBox.Y + 5, "My White Text", #WHITE)

In this one, you first defined MyBox and gave it X location, Y location, and widht and height.

This is not actually necessary to do, you could just put these numbers directly instead, but this way there are two benefits.
A: it makes sure that both Box and button are actually in same place.
B: if you wish to change the location of your button and box, then you only need to change the values of MyBox, instead of having to change every number on each place.

First this makes #SIMPLEBUTTON using MyBox variables. #SIMPLEBUTTON is a button that is not attached to anything. It just appears where ever you tell it to appear.

Then you draw a BOX to exactly same location as that Button is. This way this graphic tells the user where the button is. Notice that this box is not the button, Button is just at exactly same place as that box is.

And third you write text inside the location where that button resides.

This way, while neither the box nor the text is that button, they however are placed to exactly same place where that button is, and therefore in users mind, that box with text is the button, although in reality the button is just in same location as those two.


So you can have something that represents the button that is red and has white text, but technically speaking, buttons dont have graphics.

[papiosaur]

Thanks Bugala for your answer and examples!

I will try.

[jPV]

Bugala's answer doesn't work with RapaGUI.

I'm not sure if you can tune looks of buttons with RapaGUI.. maybe with some trickery in certain amount, but basically MUI is designed so that users can config their button looks and programmers shouldn't hardcode anything.

[Bugala]

@JPV

ah, you are right, I missed this was in the RapaGUI subsection.

@papiosaur

My answer was about Hollywood general button commands, not about RapaGUI ones. I haven't used RapaGUI at all, so don't know answer to your question.

[plouf]

maybe above idea can be implemented using hollywood class, a bit complicated but doable

probalby the "cleanest" way is just to use an icon to a button, icon is not actually "background color" but a big red square ,for example, can have similar eye impact to user

[jPV]

Or maybe create a group just for a button and set the background color for the group... to get red borders around the button.

Like this:

Code: Select all

@REQUIRE "rapagui"

gui$ = [[
<?xml version="1.0" encoding="iso-8859-1"?>
<application id="app">
    <window title="Test" id="win" notify="closerequest" width="screen:30" height="screen:30">
        <vgroup>
            <rectangle/>
            <hgroup>
                <rectangle/>

                <hgroup color="#ff0000" padding="10" frame="true">
                    <button id="mybutton1" notify="pressed">With Frame</button>
                </hgroup>

                <rectangle/>

                <hgroup color="#ff0000">
                    <hspace width="10"/>
                    <vgroup>
                        <vspace height="10"/>
                        <button id="mybutton2" notify="pressed">Without Frame</button>
                        <vspace height="10"/>
                    </vgroup>
                    <hspace width="10"/>
                </hgroup>

                <rectangle/>
            </hgroup>
            <rectangle/>
        </vgroup>
    </window>
</application>
]]

Function p_EventFunc(msg)
    Switch msg.action
    Case "RapaGUI"
    	Switch msg.Class
    	Case "Window":
    		End
        EndSwitch
    EndSwitch
EndFunction

moai.CreateApp(gui$)
gui$ = Nil ; Global variables bad, die.

InstallEventHandler({RapaGUI = p_EventFunc})

Repeat
	WaitEvent
Forever

[papiosaur]

@Bugala: it doesn't matter, your example could be used bu others guys and others projects

@jPV: thanks a lot for your example!, your solution is better than mine because is low "flashy"

Thanks a lot to all!