Effective way to draw a simple circular progress bar

1

I’m looking for a solution to draw a simple progress bar for a timer (I’m looking to make a pomodoro type of timer as a plug-in as a starter project to learn JUCE and c++.) I am looking to just have the starting point at 12 o’clock, then it draws the radians(?) around the circle until it completes the full circle. I would just like a second opinion on what is the best way to do this in JUCE, and in a audio plug-in.

I’ve hooked this up myself using sliders and progress bars in the GUI application template, but it would be helpful to get a second opinion on the fastest and most effective way to do this without un-necessary processing. (ive looked at methods using sine/cosine but i’m thinking it would be best to just use hard-coded coordinates and just draw from path point between path point at set intervals rather then running a timer that’s calling 60 frames per second and generating a new path and drawing to it, for minimum use of CPU)

i decided to include this simple example to show what I had in mind, it just needs to start at the 12 o clock position and fill out the circle as it progresses. its not crucial that it fills out smoothly as it would be fine if it divided the total time into 12-14 instead of advancing frame by frame as well.

simpletimer

2

You’d override drawProgressBar() in a LookAndFeel derived class and use that to draw your progress bar.

Rail

3

Alright, so I’ve gotten this set up, but the only thing is I don’t understand exactly what I should put in the void drawProgressBar function. is there a way to look at how the objects are drawn in the default lookAndFeel class so I could copy that in, edit it, and learn from it for my own progress bar?

I have followed the example in the tutorials for the slider (attaching a custom lookAndFeel class), and I think I understand how it works, it would be more helpful to see the code of how the default class is actually calculating the arc, the tab on the slider… I’m pretty much a total beginner so I need to rely on examples to do anything since I almost have no idea how to begin if I actually try and type anything in myself. any help would be very appreciated.

4

Look at the source code. Juce is Open Source for this very reason.

in your IDE, go to modules/juce_gui_basics/widgets/juce_ProgressBar.cpp, right click on that drawProgressBar “go to definition” and look at the source for the default implementation.

5

Okay I am able to access that, thank you.

since I am overriding this function none of that code will execute I am assuming.

So the variables that are in this function are what is being passed into it from the ProgressBar class:

drawProgressBar (Graphics& g, ProgressBar& progressBar, int width, int height, double progress, const String& textToShow)

that would mean that the (double progress) is the double that is referenced in the class constructor function, and that is the one updated by the class (?) as its value changed, and that is what I would use to update however I would choose to draw the progress bar within my custom drawProgressBar function?

Edit - it looks like the default circular progress bar is designed more for a ‘loading’ animation rather then a progress bar that fills up in a linear way. I think I’ll just have to look into how to draw the circular animation I need and get that working on its own and then go back and implement that into my class later.

6

currentValue is what is passed to that drawProgressBar function. the class computes currentValue in a timerCallback():

7

Hey, thanks for the help, and to close out the thread, I just wanted to add that I did find the way to draw the actual circle and have it update accurately. the easiest way to draw this simple circle progress bar is to convert the variable you are tracking to a value between 0.0 and 1.0 and use this code.

		Path myArc;
	
		myArc.addCentredArc(100,
			300,
			75,
			75,
			0,
			0.0f, 
			degreesToRadians(arcUpdate * 360.0f), 
			true);

		g.strokePath(myArc, PathStrokeType(14.0f));
8

jmap is good for that