First Post: Help with ImageButton

[Thealienthing]

First off, happy to finally be making my first post here! I’m currently working on building the interface for the Minimoog with JUCE and it’s been coming along quite well. The problem I’ve been having is figuring out how to make the switches on the front panel (see picture).

My thought is that an ImageButton would be what I need to make this work. I have high resolution images of the switches that I can use for showing when it’s switched on and off. The main problem I’ve having is actually making an ImageButton. Unfortunately, I’ve been unable to find any tutorials or explanations of how to implement this.

Could anyone please offer a brief explanation of how to create a basic ImageButton? Sorry if the question seems stupid, but I’m still figuring out some of the deeper aspects of OOP.

Thanks!

[cpr2323]

Hmm… there isn’t really anything ‘oop’ about an ImageButton. After you create it, you call setImages on it, passing in the various images used for the various states, normal, (mouse)over, and down. Assuming you put the images into your project, so they are compiled in as resources, here is the code. If the button doesn’t change looks when you hover the mouse over it, you can just use the normalButton image for the overImage in setImages. As well, the ImageButton itself will likely be defined as a member of your larger UI Component.

        ImageButton myImageButton;
        Image normalButton = ImageCache::getFromMemory (BinaryData::normalButton_png, BinaryData::normalButton_png);
        Image overButton = ImageCache::getFromMemory (BinaryData::overButton_png, BinaryData::overButton_png);
        Image downButton = ImageCache::getFromMemory (BinaryData::downButton_png, BinaryData::downButton_png);
        myImageButton.setImages (false, false, true, normalButton, 1.0f, {}, overButton, 1.0f, {}, downButton, 1.0f, {});

[Thealienthing]

Thank you for the quick reply! I figured I got my class working! The thing I was having trouble with was creating the image objects. I was wondering, is there a way to make ImageButton latch like a switch when clicked? Or would you need to create a new ImageButton class?

[cpr2323]

When you say ‘latch like a switch’, do you mean an animation of the switch changing position?

[asimilon]

@Thealienthing

is there a way to make ImageButton latch like a switch when clicked?

Not that I’m aware of (but there is a lot of JUCE I’m unaware of, it’s deep!).

Or would you need to create a new ImageButton class?

You’ll likely have to create your own sub-class, a sort of amalgam of ToggleButton and ImageButton perhaps.

I just inherited Button, overriding paintButton to paint the “on” or “off” image based on getToggleState(), and overriding mouseUp to flip the toggle state.

[matt]

You’ll also want to call setClickingTogglesState(true).

Matt

[asimilon]

Ha! Another day, yet another thing learned about JUCE! So I didn’t need to flip the state myself on mouseUp

[railjonrogut]

JUCE doesn’t have a 2-pole toggle switch like those… You can check out this thread on the forum where we discussed a 3 pole toggle switch:

Three Position Switch

+1 for the implementation using the Slider class. Also, you could achieve the "discrete positions" feel by setting the interval in your setRange() call, i. e. slider->setRange (0.0, 2.0, 1.0) will give you a slider whose values will always be 0.0, 1.0 or 2.0 no matter how dragged/clicked, and the "thumb" of the slider will be discretely positioned at the left/middle/right position as well

Rail

[Thealienthing]

Thanks for all the help! I really appreciate it!