The Red Penguin

Adding a GUI widget to the JUCE app


Tuesday 28 July 2020

This will add a first text button to an empty JUCE project.

1. Create a new project in Projucer.

2. Open up VS2019. Choose Open A Local Folder which will have the source files in it. After the first time, this will appear on the "Open recent" list.

3. The source code has three files, Main.cpp, MainComponent.cpp and MainComponent.h.

4. Go to MainComponent.h

5. We need to add a variable member into the MainWindow class in the private section. So in the private: section above JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainWindow) type:

juce::TextButton playButton{ "PLAY" };

6. We then need to call Add and Make Visible to make it appear on the interface. So we need to go to MainComponent.cpp and call this at the bottom of the constructor. So look for MainComponent::MainComponent() (this is the constructor). In here, before the last }, we need to type:

addAndMakeVisible(playButton);

We are inheriting this function from another class.

7. Next we need to set the size of the component. We do this in resized. When the user changes the size of the application or when it opens, the resized function always gets called. So look for void MainComponent::resized() and just before the last }, we need to type:

playButton.setBounds(0, 0, getWidth(), getHeight() / 5);

This is start x, start y, width and height and we are getting the width and height and sizing it accordingly.

8. Then go to Debug > Start without debugging (CTRL+F5). This brings up a window with a play button on it taking up 1/5 of the top of the window.

We did three things here:
- add a variable member into the MainWindow class in MainComponent.h
- call Add and Make Visible in MainComponent.cpp to make it appear on the interface
- set the size and position of the button in resized in MainComponent.cpp

If I am copying the video instructions and I get an error saying, for example:

error C2653: 'Justification': is not a class or namespace name
error C2065: 'centred': undeclared identifier

It's possible that they haven't put juce:: in front of the function, and I'll need to add that myself.


To add a second component:

1. Go to MainComponent.h and type juce::Slider volSlider; underneath the TextButton
2. Go to MainComponent.cpp and in the constructor, type addAndMakeVisible(volSlider); (under the first addAndMakeVisible)
3. In the resized function in MainComponent.cpp type volSlider.setBounds(0, getHeight() / 5, getWidth(), getHeight() / 5);

In fact we create a variable to make this code a bit less repetitive:

double rowH = getHeight() / 5;
playButton.setBounds(0, 0, getWidth(), rowH);
volSlider.setBounds(0, rowH, getWidth(), rowH);

I went through this, and it all worked!