setClickingTogglesState & button highlighting problem!

Hi Jucers

I’m experiencing a problem using the DrawableButton: I have DrawableButtons with an Image on them, which should be only highlighted when clicked (so setClickingTogglesState = FALSE)

This works perfectly when I use the ButtonStyle DrawableButton::ImageOnButtonBackground. If I want to put a label under each button though - using clearly the ButtonStyle DrawableButton::ImageAboveTextLabel I don’t have this “clicking” behaviour anymore:

The Button doesn’t highlight on clicking at all, unless I set setClickingTogglesState = TRUE, which I don’t want, since it should stay highlighted after the mouse is up.

Can u help me, what am I missing??



I think you might have contradicted yourself in that post a bit, so I’m not quite sure what you want!

Using ImageOnButtonBackground gives you a normal button background, with an image on top. The button behaves as it normally would (it highlights when the mouse is over it, and darkens when pressed), and the images are drawn on top of that. setClickingTogglesState (true) would make the button switch ‘on’ and ‘off’ when you click it, so it has additional appearances for ‘on’. setClickingTogglesState (false) makes the button NOT switch on or off when you click it, but just change when the button is down (or the mouse is over it).

You say at the start it should only be highlighted when clicked; that sounds like you mean that you don’t want it to actually highlight when the mouse is hovering over it, so you don’t want an ‘Over’ image.

At the end, however, you say you don’t want setClickingTogglesState(true), because “it should stay highlighted after the mouse is up”; but that’s exactly what that does. When you click on it, it becomes ‘on’, so when you release the button it appears ‘on’. With setClickingTogglesState(false), when you release the button, it goes back to how it was.

I guess maybe your problem is that you’ve given the images to the wrong parameters? With ImageAboveTextLabel, obviously you don’t get the button background, you just get the images you’ve set. Maybe the ‘highlighting’ you’re talking about is the feedback provided by the button background? So it just comes down to making sure it’s showing the correct images for each state.

The ‘normal’ image parameter is the one it shows normally. If you want it to stay ‘visibly different’ after it has been clicked, you want setClickingTogglesState(true), and the ‘different’ image should be the ‘normalImageOn’ AND the ‘downImage’ parameter (so that it’s different before you release the mouse button too). If not, you’ll want setClickingTogglesState(false), and just have the different image for the ‘downImage’ parameter.

You might, of course, be talking about the highlighting that goes behind the image, which doesn’t show until you release the button, as it’s not toggled ‘on’ til then. This toggling behaviour is not a bug, it’s a feature (if you accidentally click on a button, you can keep your mouse button held down and drag off the button before you release to cancel it). If you want it to highlight differently (e.g. a colour to show that the mouse is down or over), then it’d requre editing DrawableButton::getBackgroundColour(), checking whether the button ‘isDown()’ in addition to its toggle state.

Hopefully your problem is covered in one of the above minirambles.

Hi Juce

Thx for your reply. The whole confusion about my message comes from the faultly written sentense: “it should stay highlighted after the mouse is up”, which should OF COURSE be “it should NOT stay highlighted after the mouse is up”! My mistake! Sorry! So the problem can be reduced to one word: higlighting behind the button:

Using DrawableButton::ImageOnButtonBackground everything is fine since it makes use of the button highlighting behaviour. I am using DrawableButton::ImageAboveTextLabel however, and so I don’t have this behaviour anymore. Do u suggest mixing up with the getBackgroundColour() method, or just using another image? (i think using another image, just to emphasize a MouseDown state is maybe too much)



it’s up to you - it depends whether what you want is the background highlighting or the image changing (or both) when the mouse is down.

If you just want it to display the same image regardless of the button’s state, then you’d just want to edit the DrawableButton::getBackgroundColour() function (juce_DrawableButton.cpp line 149).

if (getToggleState() || isDown()) return backgroundOn; 
else return backgroundOff;

[and make sure that you’ve got setClickingTogglesState(false)]

If you want the image to change too, you’ll want to specify the ‘downImage’ parameter (not the normalImageOn parameter). So you’d have…

setImages (img1,0,img2);

*It would be nicer if DrawableButton used different colours too, like TextButton - the fix above is fine for you but in general it’s better for such a flexible class to be able to differentiate between ‘on’ and ‘down’.

Ok, thanks, now I got the behaviour I want!