How to add a background image

I’m in the process of learning JUCE (and C++) and by now I’ve done most of the tutorials for Mac OS X with XCode 8.2.1. I know how to add buttons, sliders and how to handle MIDI events (I think ;-)). Now I want to build a standalone app. This app is a (kind of) remote control for my synthesizer (Kurzweil K2500R). Basically rather simple, but at the moment I’m stuck. I want to add an image of the frontpanel of the K2500R as a background image to the app. I managed to use the BinaryBuilder tool to generate two files (called in my case K2500R.cpp and K2500R.h, binary coded png) and added those files to the Source folder. I assume I have to include the K2500R.h file in my Main.cpp (and MainComponent.h), but what code do I need to actually add the png as a background image? Thanks in advance for any information pointing me in the right direction!

You don’t even need the BinaryBuilder tool, simply drag and drop the image file into the projucer in the files section.
The data becomes available in the namespace BinaryData after pressing save and open in IDE.

Then you use the ImageCache::getFromMemory() method to access the image and call Graphics::drawImageAt().

void paint (Graphics& g) override {
    Image background = ImageCache::getFromMemory (BinaryData::filename_ext, BinaryData::filename_extSize);
    g.drawImageAt (background, 0, 0);
    // ...

Hope that gets you started


Hi Daniel,
Thanks for the quick reply! I think I understand the code, but when I want to drag and drop the file into Projucer, when I have opened my project, I’m not sure if the file ends up in the right place. With my first attempt, when the Files tab is active, the image file shows in the sidebar below the source folder. When I save and open the project in Xcode it shows my image file and the two project files (cpp and h) but nothing else, like BinaryData. When I click on the image file it just shows the image on my screen… On my second attempt I did drop the file into the source folder in Projucer, but the same result. No hint of BinaryData. Sorry, but I seem to miss the point somewhere…

No problem, it should look like that, and the Binary Resource is marked:

Then the File ends up in the folder “Juce Library Code” as the file BinaryData.h and .cpp.
You can use them, as soon as you included the usual

#include "../JuceLibraryCode/JuceHeader.h"

which includes all generated headers at one.
Hope that helps

Hi Daniel,
Thanks! Because I’m new at this I didn’t know one can (or has to) add a new group (like a folder) in the files tab of Projucer, and name it in this case ‘Resources’. I did this, dropped the .png file into the folder and now it generates the BinaryData.cpp and .h files automatically after ‘Save Project and Open IDE’. Then I did add your code and it works! This basically opens up a lot of GUI possibilities. As usual the solution is simple as soon as one knows how. Thanks again!


1 Like

A little bit off this topic, but where can I find information about all the useful features of Projucer?

That is a very good question, I hope we get an official statement from JUCE as well :slight_smile:
Very often some quite important things are hidden in the right click menu and hard to find, if you don’t already know them.
There are some helpful videos on youtube as well, one is a presentation from Jules when he showed the first version of the life coding engine.
Sorry that I don’t have any links…

A new website is currently underway… it had already been noted that this was missing from the old one so will hopefully be something that we improve!

1 Like

Thanks! Thumbs up anyway for all the good work already done and the quick responses. Much appreciated!

You are my hero

1 Like