Circular Progress Bar
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller
Circular Progress Bar
So I'm a bit stumped. The client wants a circular progress bar:
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!
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!
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
-
- VIP Livecode Opensource Backer
- Posts: 114
- Joined: Fri Apr 28, 2006 12:10 am
- Location: Seattle
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
https://www.dropbox.com/s/jxbntyp6l5n7o ... e.zip?dl=0
Best Regards,
Roger
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
-
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
-
-
- VIP Livecode Opensource Backer
- Posts: 114
- Joined: Fri Apr 28, 2006 12:10 am
- Location: Seattle
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
Cheers,
Roger
Re: Circular Progress Bar
Thank you very much; I was able to create this control. I appreciate all the help!