How to add image background to audio plugin?

my code working flawlessly, but there is something is bother me, the background is just a boring grey color. And i want to change it to a image. How can i do it ??

The dropdown inside GUI Editor menu is greyed out

Juce Latest Version
Win10

a) Either paint it manually in your paint function (the first item to display, so everything else is on top of it) or put an ImageComponent as the first item in your parent component. Both methods would use an Image class.

b) move on from the GUI editor. it can be useful to start with, but will only get in the way as your UI gets more advanced.

I am assuming the dropdown would show images if you dragged them into Projucer and resaved it so the image will be available in BinaryResources.
This step is necessary anyway, apart from that follow @cpr2323 s advice in the long term.

Can you give me some tutorial please ?


i mean like this sub menu, class, subcomponent, graphic and etc

I just typed this out without compiling, but it’s the general idea:

class MyComponent : public Component
{
public:
	MyComponent ()
	{
		myImage = ImageCache::getFromMemory (BinaryData::backgroundImage, BinaryData::backgroundImageSize);
	}
	
    void paint (Graphics&)
	{
		// first draw the background
		g.drawImage (myImage, getLocalBounds ().toFloat ());

		// draw other things
	}
	
private:
	Image myImage;
}

Thanks in advance

And how to use this code ?. In plugineditor.h .cpp ? Or where ?

N.B. thanks to the ImageCache you don’t need the myImage instance. The ImageCache will keep the image loaded until memory gets thin. So you only need the paint method:

void paint (juce::Graphics& g)
{
	// first draw the background
	auto myImage = juce::ImageCache::getFromMemory (BinaryData::backgroundImage, BinaryData::backgroundImageSize);
	g.drawImage (myImage, getLocalBounds().toFloat());

	// draw other things
}

@animussavior this code goes in the Component you want to draw, e.g. the PluginEditor.cpp

For an understanding of the general C++ syntax I suggest to start with some tutorials, e.g.
https://docs.juce.com/master/tutorial_graphics_class.html

@daniel maybe I over think these things. but, paint seems like a place where I want to keep compute cycles in mind. so, the question for me is, is the getMemory call as efficient as caching it locally? in a similar way, I do as much as I can in resized ().

Absolutely! Image is a wrapper around a ReferenceCountedObject<Image::PixelData>, that means adding the local Image doesn’t cost anything.

But your question made me look into the sources, and amazingly the lookup is indeed linear - iterating over a vector (I expected a map). So there is a little cost (although in a release build I would not worry before you added >1000 images in your ImageCache).

The drawback of keeping it as a member is, the system cannot swap out the image data if memory becomes thin.

Thanks for the reply. So i have my custom background with .png file format. How can i load these .png file to the code you provided ?

Sorry for the dumb question, i new to C++. Mostly i use python to coding some stuff. But when it come to C++ im totally blind

Add your PNG to the Projucer project and use the BinaryData reference as I do in the example.

I am not handing you the specific steps because it will be best for you to learn how to find the answers. By providing you with the pertinent pieces of information, I am hoping you will do the work to discover the details. That is also why I did not initially give you code. Search the API docs, the forum, and tutorials using the given data points. :slight_smile: if you are still stuck, then we will obviously help more. :slight_smile:

as well, I (we) don’t mind giving some guidance on C++, but more likely I (we) will tell you to go learn more. so that we can spend our time helping with JUCE related questions. :slight_smile:

Thank you very much for the help. And yeah i need reading and watching some video to improve my understading

This tutorial may help. Good luck!

1 Like

Thank you so much