Circular countdown timer code you might find it useful (MIT license)

Solar2D General Questions/Discussion
#1

Hi,

I wrote this to use in one of my project.  it’s a countdown timer with the ring around it.  You can get the code at

https://github.com/uchat/circularCountdown

or you can visit my blog at http://devnote.tmeta.com/

It’s released under MIT license.  Feel free to use in any of your projects.

tr.gif

#2

Nice one. I have a small suggestion to customise it, which is another param which sets how many segments you want in the ring. That way if you have a 10s counter and only want 10 notches in the ring, you can do so. Here is a quick example I’ve made (only including the top part of the function, the rest was unchanged):

CircularCountdown.newCircularCountdown = function(radius, second, callback, notches) local \_ring = display.newGroup() local \_ticks = {} local \_timer = second local \_label local \_thandle local angle = 360 / (notches or 60) --round it off to prevent fractional amounts taking it just over 360 degrees in loop below angle = math.round(angle \* 10) / 10 for i=180-angle,-180,-angle do local rd = rad(i) local sinrd = sin(rd) local cosrd = cos(rd) local c = display.newRect(sinrd \* radius, cosrd \* radius, 4, 10) c.rotation = -i c:setFillColor(0, 0, 0, 0.2) \_ring:insert(c) \_ticks[#\_ticks + 1] = c end

and then to call it:

local cirCountdown = CircularCountdown.newCircularCountdown(100, 5, onCountdown, 10)

Edit: moved new param to the end, that way it is optional. If not supplied, then it will just draw 60 notches by default.

Edit 2: or you could even change the angle line so that it uses the number or seconds when no number is supplied:

local angle = 360 / (notches or second)
#3

Thanks for sharing this!

Rob

#4

Nice one. I have a small suggestion to customise it, which is another param which sets how many segments you want in the ring. That way if you have a 10s counter and only want 10 notches in the ring, you can do so. Here is a quick example I’ve made (only including the top part of the function, the rest was unchanged):

CircularCountdown.newCircularCountdown = function(radius, second, callback, notches) local \_ring = display.newGroup() local \_ticks = {} local \_timer = second local \_label local \_thandle local angle = 360 / (notches or 60) --round it off to prevent fractional amounts taking it just over 360 degrees in loop below angle = math.round(angle \* 10) / 10 for i=180-angle,-180,-angle do local rd = rad(i) local sinrd = sin(rd) local cosrd = cos(rd) local c = display.newRect(sinrd \* radius, cosrd \* radius, 4, 10) c.rotation = -i c:setFillColor(0, 0, 0, 0.2) \_ring:insert(c) \_ticks[#\_ticks + 1] = c end

and then to call it:

local cirCountdown = CircularCountdown.newCircularCountdown(100, 5, onCountdown, 10)

Edit: moved new param to the end, that way it is optional. If not supplied, then it will just draw 60 notches by default.

Edit 2: or you could even change the angle line so that it uses the number or seconds when no number is supplied:

local angle = 360 / (notches or second)
#5

Thanks for sharing this!

Rob