# First Post: Help with ImageButton

**URL:** <https://forum.juce.com/t/first-post-help-with-imagebutton/32506>\
**Category:** Getting Started\
**Created:** [March 25, 2019, 9:20pm UTC](https://forum.juce.com/t/first-post-help-with-imagebutton/32506 "2019-03-25T21:20:49Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Thealienthing](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/thealienthing/32/6094_2.png) [@Thealienthing](https://forum.juce.com/u/Thealienthing)\
**Post date:** [March 25, 2019, 9:20pm UTC](https://forum.juce.com/t/first-post-help-with-imagebutton/32506/1 "2019-03-25T21:20:49Z")

</div>

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).

 ![30%20PM](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/1/1ba48024ba3bc5d68c58d5918d17019192645f15.jpeg)

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!

---

<div class="post-metadata">

**Author:** ![cpr2323](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/cpr2323/32/18682_2.png) [@cpr2323](https://forum.juce.com/u/cpr2323)\
**Post date:** [March 25, 2019, 9:50pm UTC](https://forum.juce.com/t/first-post-help-with-imagebutton/32506/2 "2019-03-25T21:50:39Z")

</div>

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.

```auto
        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, {});

```

---

<div class="post-metadata">

**Author:** ![Thealienthing](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/thealienthing/32/6094_2.png) [@Thealienthing](https://forum.juce.com/u/Thealienthing)\
**Post date:** [March 25, 2019, 10:56pm UTC](https://forum.juce.com/t/first-post-help-with-imagebutton/32506/3 "2019-03-25T22:56:51Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![cpr2323](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/cpr2323/32/18682_2.png) [@cpr2323](https://forum.juce.com/u/cpr2323)\
**Post date:** [March 25, 2019, 11:26pm UTC](https://forum.juce.com/t/first-post-help-with-imagebutton/32506/4 "2019-03-25T23:26:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![asimilon](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/asimilon/32/4235_2.png) [@asimilon](https://forum.juce.com/u/asimilon)\
**Post date:** [March 25, 2019, 11:54pm UTC](https://forum.juce.com/t/first-post-help-with-imagebutton/32506/5 "2019-03-25T23:54:00Z")

</div>

> [@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.

---

<div class="post-metadata">

**Author:** ![matt](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/matt/32/18340_2.png) [@matt](https://forum.juce.com/u/matt)\
**Post date:** [March 26, 2019, 12:31am UTC](https://forum.juce.com/t/first-post-help-with-imagebutton/32506/6 "2019-03-26T00:31:37Z")

</div>

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

Matt

---

<div class="post-metadata">

**Author:** ![asimilon](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/asimilon/32/4235_2.png) [@asimilon](https://forum.juce.com/u/asimilon)\
**Post date:** [March 26, 2019, 1:07am UTC](https://forum.juce.com/t/first-post-help-with-imagebutton/32506/7 "2019-03-26T01:07:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![railjonrogut](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/railjonrogut/32/505_2.png) [@railjonrogut](https://forum.juce.com/u/railjonrogut)\
**Post date:** [March 26, 2019, 1:30am UTC](https://forum.juce.com/t/first-post-help-with-imagebutton/32506/8 "2019-03-26T01:30:17Z")

</div>

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](https://forum.juce.com/t/three-position-switch/14794/6):
>
> +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

---

<div class="post-metadata">

**Author:** ![Thealienthing](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/thealienthing/32/6094_2.png) [@Thealienthing](https://forum.juce.com/u/Thealienthing)\
**Post date:** [March 26, 2019, 2:24am UTC](https://forum.juce.com/t/first-post-help-with-imagebutton/32506/9 "2019-03-26T02:24:38Z")

</div>

Thanks for all the help! I really appreciate it!

---

<div class="post-metadata">

**Author:** ![rbeg](https://avatars.discourse-cdn.com/v4/letter/r/87869e/32.png) [@rbeg](https://forum.juce.com/u/rbeg)\
**Post date:** [January 3, 2025, 8:54am UTC](https://forum.juce.com/t/first-post-help-with-imagebutton/32506/10 "2025-01-03T08:54:14Z")

</div>

Hello,  
Where did you find these nice knobs please?