Creating a new component - WaveformDisplay

Tuesday 4 August 2020

1. Go to Projucer and add a new component class. Call it WaveformDisplay. Don't forget to save the project in Projucer.

2. In WaveformDisplay.cpp in the WaveformDisplay::paint function we set the colour to orange and the font to 20.0f.

3. In g.drawText we changed the first parameter to "File not loaded ...".

4. The next step is to add an instance of this class to DeckGUI. We go to DeckGUI.h and #include "WaveformDisplay.h".

5. Then scroll down to private: and put an instance of WaveformDisplay by typing

WaveformDisplay waveformDisplay;

6. Then we need to do the usual things that we would do with any component. Go to DeckGUI::DeckGUI in DeckGUI.cpp and type

addAndMakeVisible(waveformDisplay);

7. Change the whole resized() section as follows which makes the waveform "nice and large":

    double rowH = getHeight() / 8;
    playButton.setBounds(0, 0, getWidth(), rowH);
    stopButton.setBounds(0, rowH, getWidth(), rowH);
    volSlider.setBounds(0, rowH * 2, getWidth(), rowH);
    speedSlider.setBounds(0, rowH * 3, getWidth(), rowH);
    posSlider.setBounds(0, rowH * 4, getWidth(), rowH);
    waveformDisplay.setBounds(0, rowH * 5, getWidth(), rowH * 2);
    loadButton.setBounds(0, rowH * 7, getWidth(), rowH);

8. We can now build and compile to see the new GUI set out.