Circular progress bar

totebo · December 2016

How would you go about making a circular progress bar in Gideros?

pie · December 2016

I am lazy and I would edit this one:

http://giderosmobile.com/forum/discussion/6374/path2d-circle-indicator/p1

hgy29 · December 2016

What about this ? Heavily based on my attempt at a rainbow

 
CircularProgress=Core.class(Sprite)
 
function CircularProgress:setValue(val)
	local angs,ange=0,math.pi*val*1.999
	local rl,rh=self.radiusMin,self.radiusMax
	local ta=self:getChildAt(1)
	local ra=math.floor(val*2)
		ta:setLineColor(self.color,1)
		ta:setFillColor(self.color,1)
		ta:setPath("MALAZ",
			math.sin(angs)*rl,-math.cos(angs)*rl,
			rl,rl,0,ra,1,
			math.sin(ange)*rl,-math.cos(ange)*rl,
			math.sin(ange)*rh,-math.cos(ange)*rh,
			rh,rh,0,ra,0,
			math.sin(angs)*rh,-math.cos(angs)*rh
			)
		ta:setLineThickness(4,0.5)
		ta=self:getChildAt(2)
		ta:setText(("%d%%"):format(math.floor(val*100)))
		local tax,tay,taw,tah=ta:getBounds(ta)
		ta:setAnchorPosition(tax+taw/2,tay+tah/2)
	return ta
end
 
 
function CircularProgress:init(radius,width,color,font,fontscale)
	self.radiusMin,self.radiusMax=radius-width/2,radius+width/2
	self.color=color
	self.font=font
	self:addChild(Path2D.new())
	local text=TextField.new(font,"-")
	text:setTextColor(color)
	text:setScale(fontscale or 1)
	self:addChild(text)
	self:setValue(0.4)
end
 
 
 
application:setBackgroundColor(0)
local meter=CircularProgress.new(80,20,0xFF0000,nil,4)
meter:setPosition(100,100)
stage:addChild(meter)
 
local animSpeed=240
stage:addEventListener(Event.ENTER_FRAME,function ()
	local frame=Core.frameStatistics().frameCounter
	local frameIndex=frame%animSpeed
	local ratio=math.abs(frameIndex-animSpeed/2)/(animSpeed/2)
	meter:setValue(ratio)
end)

totebo · December 2016

Away from a computer, but I'm going to accept that answer based on previous magic from your direction @hgy29. Can't wait to try it out!

totebo · December 2016

@hgy29 I've gotten around to play with this and it's amazing!

Is there a way to make the corners of the bar clean and crisp (not bevelled)? See screenshot to show what I mean.

hgy29 · December 2016

Try to comment out ta:setLineColor(...), or use 0,0 (transparent) as line color

PaulH · December 2016

I was thinking about a sprite based method - Have a bitmap of a complete circle (100% progress), and an texture of a half circle of the background color. Make two bitmaps of the blank half circle and overlap the completed circle with those, set the anchor point to the circle center, and set the rotation to expose a wedge of the completed circle. That would get you from 0 to 50% (50% when the two blank ones are aligned.) Then make a bitmap of the 0-50% portion of the 100% progress texture, and overlap the others with that. Remove one of the two blank halves and rotate the other to expose the 50 to 100% side. Possibly overlap all of that with a text field for a numerical display.

The advantage of that method is you could use any texture image for the progress circle.

I have a little time right now... maybe I'll try whipping that up.

Paul

PaulH · December 2016

Here's an implementation of the method I was describing, using a cheesy tinted checkerboard for the completed circle as proof of concept:

Source code is here: http://www.pishtech.com/progress_circle.zip

One could use any sort of image for the completed progress, including a ring (with a blank center), perhaps with the color progressing from red to green, etc.

Not to discredit hgy29's method in any way - that's really slick, and has the advantage of not requiring any texture editing. This is just another option.

Paul

totebo · December 2016

This is the sort of thing I would have done back in the flash days, and deffo has its uses if a more complex background is needsd. Thanks for posting!

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Circular progress bar

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Circular progress bar

Comments