Custom ProgressBar

General JUCE discussion
1

Hi. I’m trying to use LookAndFeel to draw my own ProgressBar. I copied the original’s rendering into my file and redefined the ProgressBar to LookAndFeel, but nothing happened. The only thing that works is that switching class MyProgressBar: public LookAndFeel_V4 to class MyProgressBar: public LookAndFeel_V3 changes the design. Am I doing something wrong?
Here is the beginning:

class MyProgressBar : public LookAndFeel_V4
{
public:
    MyProgressBar()
    {
    }
    
    void drawCircularProgressBar (Graphics& g, const ProgressBar& progressBar,
                                              const String& textToShow)
    {
        const auto background = progressBar.findColour (ProgressBar::backgroundColourId);
        const auto foreground = progressBar.findColour (ProgressBar::foregroundColourId);
      ..................
etc.
2

I’d recommend looking through this tutorial if you haven’t already: Customise the look and feel of your app - JUCE

3

I tried different options, but I can’t even change the diameter of the LookAndFeel threads.
The main module is still being pulled up. I understand that I’m doing something wrong. If there was even a small example, it would be easier.

4

You can’t override drawCircularProgressBar that’s a private static method. You’ll need to override drawProgressBar instead (JUCE: juce::LookAndFeel_V4 Class Reference).

5

Yes, I understand that. But even if I leave only these lines:

class MyProgressBar : public LookAndFeel_V4
{
public:
    MyProgressBar()
    {
    }
    
    void drawProgressBar (Graphics& g, const ProgressBar& progressBar, int width, int height, double progress,
                                              const String& textToShow)
    {
        
    }
};

the progress bar is still drawn without changes.
In theory, the ProgressBar shouldn’t be drawn at all in this case?

6

One option is to put a breakpoint in the JUCE code where this function (ProgressBar::paint (Graphics& g)?) is called, to see what is actually being calling when it doesn’t work. This may provide more data to help debug the issue.

oh, and for good practice, you should include the override keyword, which will provide useful information at compile time, if you ever get the name/signature of an overridden function incorrect.

7

I would add the override keyword just to make sure you’ve definitely overriding the function (I would except a compiler error if not).

I loaded up a basic GUI app from the Projucer and added the following…

class ProgressBarLookAndFeel : public juce::LookAndFeel_V4
{
public:
    void drawProgressBar (juce::Graphics& g,
                          juce::ProgressBar& progressBar,
                          int width,
                          int height,
                          double progress,
                          const juce::String& textToShow) override
    {
        DBG ("Trying to draw a progress bar");
    }
};

In the main component I added the following private members…

    double progress{};
    juce::ProgressBar progressBar { progress };
    ProgressBarLookAndFeel progressBarLookAndFeel;

In the constructor I set the progress bar look and feel, added it as child component, and made it visible…

Note: I could have also set the look and feel on the MainComponent itself.

MainComponent::MainComponent()
{
    setSize (600, 400);

    progressBar.setLookAndFeel (&progressBarLookAndFeel);
    addAndMakeVisible (progressBar);
}

It will also need a size (doesn’t need to be this big)…

void MainComponent::resized()
{
    progressBar.setBounds (getLocalBounds());
}

After that I see my debug message show up in the console.

Hopefully you’re just missing something simple?

1 Like
8

Thanks, Antony. I declared a const ProgressBar& progressBar, that’s why it didn’t work. Now everything is SUPER!

1 Like