Button mouse over

#1 If you're wanting to detect the mouse over event in order to highlight the button, then there is already a built in way to do this. You just need to name your button images with a set of extensions. For example if your button is called "mybutton" then create the following files

mybutton_n.png (normal state)
mybutton_h.png (highlighted state)
mybutton_i.png (inactive state)
mybutton_d.png (down state)

Then when you set the "bitmap" your button uses, rather than using "mybutton.png" as you originally will have done, you now use the button name only, without the underscore and anything following it, eg just "mybutton".

The gui will then automatically use _n, _h, _i and _d as appropriate based on the state of your button.

#2 Thanks Gary but I am already doing this for the visual part of the button.
What I am trying to do is to display some bitmaps (executing code) when the mouse is over a button.
Thanks.

Regards,
Fernando.

#3 It's not built into the engine, but it's very easy to add as long as you have a pro license. Quick change in core/gui/buttons/guiButtonBaseCtrl.cc, it already has onMouseEnter and onMouseLeave handlers, but it's not calling script methods. Just add something like this to the end of them:

if (isMethod ("onMouseEnter"))
   Con::executef (this, 2, "onMouseEnter");

if (isMethod ("onMouseLeave"))
   Con::executef (this, 2, "onMouseLeave"))

Now in your gui you can define something like:

function MyButton::onMouseEnter (%this)
{
   // display the bitmap
}

function MyButton::onMouseLeave (%this)
{
   // hide the bitmap
}

#4 @Gary

Sweet! I didn't know TGB did that. I'll be updating my game's menus tonight! :D

#5 Out of curiosity, is there a parameter for a mouseOver/mouseDown/etc sound effect built into the GUI as well?

#6 There is, but it's not on the button itself, it's on the profile that you attach to the button.

First make sure that your sound profiles are loaded before your gui profiles and the exec'g of your .gui file or you'll get an error. Then modify the profile you have specified for your button, adding the values "soundButtonDown=;" and/or "soundButtonOver=;", where is the name of the audioProfile created for the sound you want to play.

#7 @Fernando,

Hi. You can also use the GuiMouseEventCtrl. Overlap the 'hot region' where you want to catch inputs with this control and define the proper callbacks.

Basic Steps:
1. Name your GuiMouseEventCtrl control. For example: myMouseCatcher

2. Write a callback for each of the events you want to catch:

function myMouseCatcher::onMouseDown( %theControl, %modifiers, %point, %clicks )
{
    // Do something with the inputs.
}

Some Possible Events:
onMouseDown - Left Mouse Button Press
onMouseUp - Left Mouse Button Release
onRightMouseDown - Right Mouse Button Press
onRightMouseUp - Right Mouse Button Release
onMouseEnter - self explanatory
onMouseLeave - self explanatory
onMouseMove - self explanatory
onMouseDrag - Moving with left mouse button down.

3. You should be good to go.

I talk about this in my book The Game Programmers Guide To Torque on pages 525 .. 528. Note: Although this book was written for TGE,much of it also applies to TGB.

Hall Of Worlds - For Gamers
EdM|GPGT

#8 Buy the book! its worth every $$

#9 Is there a way using script only, to have the cursor change when you move over a GUI button? I have got every other aspect working (button changing shape, button making sound )with script only but this I still am searching.

#10 Cool. I got the audio to work. This thread helped: www.garagegames.com/mg/forums/result.thread.php?qt=28663

#11 @Stanley: Ed Maurina's example using a GuiMouseEventCtrl is script :)

#12 @Matt: Not when the GuiMouseEventCtrl is over a GuiButton. It does not work!! Why, because it takes the mouseclicks away from the GuiButton which defeats the purpose. You can try to do it modeless but I couldn't get it working. Check out this post to see what I mean.


garagegames.com/mg/forums/result.thread.php?qt=50831

#13 @Stanley,

Hi. My answer was intended to help with hot spots, but your idea is interesting. You are correct, this control will catch the inputs to a button so overlaying the button is no good. Also, by making the control modeless, you're telling it to drop the mouse inputs to the layer below.

My best guess for a solution is do do something like this. Add the GuiMouseEventCtrl first, then add a button inside the control. However, make sure that the button is centered in the GuiMouseEventCtrl and there is at least a single pixel of border on each side (more is better). Now, the GuiMouseEventCtrl can be used to catch mouse enter and exit events.

Interestingly, I have an example exactly like this in the kit that comes with my book. If you have the book just start up the lesson kit and click on the 'GUIs Sampler' button. Go to the second page of samples and click on the 'guiMouseEventCtrl' button.

You will see something like this:


It is probably hard to tell, but the whole bounded area is covered by a guiMouseEventCtrl object and in that control is a button. Clicking the buton works and moving over the button registers a leave event for the guiMouesEventCtrl.

I hope this helps. If not and if you come up with an alternate idea, please post it here. I'd love to see it.

Hall Of Worlds - For Gamers
EdM|GPGT

Oops, posted wrong image... that should fix it.

#14 @Edward,

I tried your technique on my GUI, but got some mixed results. It seems that when the mouse enters the guiMouseEventCtrl boundary, it generates both an onMouseEnter and an onMouseLeave callback at the same time. What I am trying to do is use the guiMouseEventCtrl to detect when a user has the mouse over a menu tab, and while it is there pop up another menu they can select from. What is interesting is that the hover tooltip stays active over the entire area of the guiMouseEventCtrl.

Maybe this is happening because as soon as the onMouseEnter callback occurs, the guiMouseEventCtrl does something to switch it's layer, making the mouse leave? I am new to the GUI building process, and it seems the TGB documentation is very lacking in this area. I am almost to the point of just building my own GUI using triggers and sprites. At least that way I will get some predictable results when it comes to mouse handling.

Any help would be greatly appreciated!

Thanks,

Brian

#15 @Brian,

Hello. My wife was in a head-on collision Saturday (27th) so I've been unable to attend to business as usual this week. I will begin answering queries and e-mails tomorrow. I apologize for the delay.

-Ed M.

#16 Edward,

No apologies necessary. I hope your wife is OK!

Brian

#17 I have a GuiBitmapButtonCtrl and a GuiMouseEventCtrl. I want to be able to click and hold the button to fill a meter (which is simply an image that I scale).

As of now, if I "bring to front" the Button, I can mouse over, click, and mouse leave and have the image change for each, but nothing happens to my meter. If I "bring to front" the MouseEvent, then I can click and hold and my meter will fill, but the button becomes inactive and all mouse over/down/leave images are disabled.

How can I use both at the same time?

#18 Don't buttonctrls have a field usemouseevents, which if true allows you to implement all mouse callbacks? I don't think you need a separate mouseeventctrl because it has been integrated into the buttoncontrol already.

Also, please describe what your "meter" is.

#19 I know this is old, but can any one please post a way to get Edward's solution to work in T3D?

PS. love your Book.