## Circular Progress Bar

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: Klaus, FourthWorld, heatherlaine, kevinmiller

Vanceone
Posts: 37
Joined: Sat Dec 15, 2012 7:27 pm

### Circular Progress Bar

So I'm a bit stumped. The client wants a circular progress bar:
circular progress bar.jpg (31.42 KiB) Viewed 2310 times

How can I build this in LiveCode? The grey background is the background, the yellow is the percentage done part, and the green is fixed, with the current percentage value as a label in the middle of the ring. Maybe they want to have the percentage value on the green, with the absolute number (like "250 out of 450" ) in the middle. I need to have an unknown number of these on a page, so I have to be able to create them programmatically. Since I suspect the colors will change, and the green may disappear entirely, it has to be somewhat flexible.

I think the best way is to build two or three curved lines all set to the same line weight, but the curve code I've seen is completely unreliable, starting angles are jumping all over the place. This would be, in essence, a custom control; I don't know that i need the "thumbPosition" stuff of the regular progress bar though adding it might make it more community friendly.

Any ideas? Thanks!

magice
Posts: 457
Joined: Wed Mar 18, 2009 12:57 am

### Re: Circular Progress Bar

I recently worked on a similar project.I used the startAngle and arcAngle of the graphic to achieve my effect. Since I needed the arcAngle to extend to the right instead of the left, I created a complete circle of my "meter" color, or in your case "progress" color. Then I adjusted the arcAngle of another circle the same color as the background that was on top of the first,This gave the effect that the colored arc was growing when in fact the other arc was shrinking. You will need this little function to find the correct point to place text. or anything else that will move with the circle.

Code: Select all

``````function startAnglePoint theCircle tV
--theCircle is the name of the circle graphic
--tV is a number of degrees of variation from the startAngle
put (the height of graphic theCircle /2 )into r
put the startAngle of graphic theCircle +90+tV into tSa
put the first item in the loc of graphic theCircle into tA
put the second item in the loc of graphic theCircle into tB
put r* sin(tSa/(180/pi)) + tA into x
put r* cos(tSa/(180/pi))+ tB into y
return (trunc(x)&comma&trunc(y))
end startAnglePoint
``````

RogGuay
VIP Livecode Opensource Backer
Posts: 65
Joined: Fri Apr 28, 2006 12:10 am

### Re: Circular Progress Bar

You might find suggestions for what you want in my RadialDialOmatic widgets here:

https://www.dropbox.com/s/jxbntyp6l5n7o ... e.zip?dl=0

Best Regards,

Roger

LCNeil
Livecode Staff Member
Posts: 1223
Joined: Wed Oct 03, 2012 4:07 pm

### Re: Circular Progress Bar

Nice widget stack Roger!

I have one suggestion, if you add a lock and unlock screen around your "myLoop" handler, it should remove the slight graphic flicker that occurs when you interact with the dials

Kind Regards,

Neil Roger
--
LiveCode Support Team ~ http://www.livecode.com
-

RogGuay
VIP Livecode Opensource Backer
Posts: 65
Joined: Fri Apr 28, 2006 12:10 am

### Re: Circular Progress Bar

Thank you very much, Neil. I thought I had incorporated the lock and unlock screen as you suggest . . .alas, apparently not on this stack. My apologies! Interestingly, I do not get the flicker on this stack with my current setup, although I have repeatedly complained about screen flashing in many of my other stacks since the introduction of Yosemite, and have submitted a Bug Report to that effect. Go figure...

Cheers,

Roger

Vanceone
Posts: 37
Joined: Sat Dec 15, 2012 7:27 pm

### Re: Circular Progress Bar

Thank you very much; I was able to create this control. I appreciate all the help!