Trying to make an Image button that switches between two Images

Im trying to make a button that can switch between two images for example a play button that holds a play image when its not clicked then turns to a pause button when clicked, I need to be able to switch the image of the button and it will stay that way until the user clicks it again then it shall switch back to the other image.

so for example
play image to start
then play is clicked
then button switches to pause image
the button is clicked
the button is switched to play image again
start loop over.

In Projucer (or in code) you can set a “down” image as well as a “normal” image. But if you’re talking about making the button latch its down state, then for that I use a ToggleButton, and in my derived Look&Feel class, I draw the image that I want, depending on the state of the button.

OK ill give that a shot. Thank you.

Just curious, did you try using setClickingTogglesState (true) with an ImageButton? It’s been awhile since I’ve used ImageButtons for anything, but I would expect this to work for the toggle button use case.

I did and it switched the button to the other image but it stayed on the other image and was unable to revert

If it’s an option for you to have vector icons for your button, then I definitely recommend using the DrawableButton, which in its setImages() method allows you to specify the icon to use when the button is in the OFF toggle state and the one for the ON toggle state.

The caveat here is that the icons need to be Drawables, so either you draw them in code, or load them from SVG files (mind that JUCE support for SVG files doesn’t fully cover the full specification of the format, but for simple shapes without fancy gradients it should be up to the task, never had a problem myself)

1 Like

So I tried doing drawables but I’m not too good at instantiating them. I tried doing

// file made from a PNG image file and called ImageFile1
std::unique_ptr Drawable:: createFromImageFile(ImageFile1);

but it wasn’t able to pass that as a Drawable parameter in the setImages method on my Drawable button. Do you think you could help me out with the basic instantiation of a DrawableButton as they are the button I know least about. Im not sure how to instantiate a Drawable button and fill it with the images I need. If its not too much to ask… Thanks for any help.

Hmm I think the shortest path is (disclaimer: written from memory, untested code):

auto drawable = juce::Drawable::createFromImageFile (imageFile1);

/* here I assumed ImageOnButtonBackground as style, but you may want to use a
different one depending on what your image represents */
juce::DrawableButton button ("playPauseButton",  juce::Drawable::ImageOnButtonBackground);

button.setImages (drawable.get () /* here add the other images if needed */);

Obviously, this is only a proof of concept to show you the syntax, in any real world example the button shall be declared as a member variable of some class rather than created “inline” like in this example.