Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
Circular progress bar — Gideros Forum

Circular progress bar

totebototebo Member
edited December 2016 in General questions
How would you go about making a circular progress bar in Gideros?

image
My Gideros games: www.totebo.com

Comments

  • hgy29hgy29 Maintainer
    Accepted Answer
    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)

    Likes: pie, totebo, MoKaLux

    +1 -1 (+3 / -0 )Share on Facebook
  • 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!

    Likes: hgy29

    My Gideros games: www.totebo.com
    +1 -1 (+1 / -0 )Share on Facebook
  • totebototebo Member
    edited 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.
    Screen Shot 2016-12-20 at 14.45.10.png
    208 x 228 - 7K
    My Gideros games: www.totebo.com
  • hgy29hgy29 Maintainer
    Try to comment out ta:setLineColor(...), or use 0,0 (transparent) as line color
  • 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
  • PaulHPaulH Member
    edited December 2016 Accepted Answer
    Here's an implementation of the method I was describing, using a cheesy tinted checkerboard for the completed circle as proof of concept:

    image

    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
    +1 -1 (+5 / -0 )Share on Facebook
  • 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!
    My Gideros games: www.totebo.com
Sign In or Register to comment.