Tag Archives: reset timer

Create a countdown timer with Titanium Appcelerator

In this post we will try to show you how to make a countdown timer using Titanium Appcelerator for Iphone or Android applications.

First we will create an OOP countDown object that can be used independently in the background of the application and then we will connect it with some interface elements.

The countDown object

To have functional a countdown timer we’ll need to declare some properties and some methods.

As properties we will set:

time:{ m : minutes, s : seconds },
total_seconds : m*60+s

I think this is pretty clear, time is an object with minutes and seconds and total_seconds contains the number of seconds until we reach 00:00.

We will need to set methods that will allow us to:

  • set a time to count from
  • stop the timer
  • start it.

We also ned to set some callback functions that will be executed on each tick of the timer   – fn_tick – and one that will execute when the timer reaches 00:00 named fn_end.

We won’t make a callback for start because we know when this occurs we can trigger it by ourselves.

The countDown timer will look like this:

var my_timer = new countDown( minutes, seconds, fn_tick, fn_complete);

on this we will be able to apply

my_timer.set( minutes, seconds );
my_timer.start();
my_tmer.stop();

Below is the code that defines the countDown (pretty simple).

var countDown =  function( m , s, fn_tick, fn_end  ) {
	return {
		total_sec:m*60+s,
		timer:this.timer,
		set: function(m,s) {
			this.total_sec = parseInt(m)*60+parseInt(s);
			this.time = {m:m,s:s};
			return this;
		},
		start: function() {
			var self = this;
			this.timer = setInterval( function() {
				if (self.total_sec) {
					self.total_sec--;
					self.time = { m : parseInt(self.total_sec/60), s: (self.total_sec%60) };
					fn_tick();
				}
				else {
					self.stop();
					fn_end();
				}
				}, 1000 );
			return this;
		},
		stop: function() {
			clearInterval(this.timer)
			this.time = {m:0,s:0};
			this.total_sec = 0;
			return this;
		}
	}
}

And now to use it in our code we will do something like this:

var my_timer = new countDown(1 , 5 ,
	function()	{
		//something here...
	},
	function() {
		// something here...
	}
);
 
my_timer.start();

Ok, the above example is useless, we will need to display the current time on each tick of the countdown times (so on each second) and at the end we’ll have to alert the user when we reached 00:00.

We will also need some interface elements to access the countdown methods and to display the current time.

For this we will create a label named display_lbl, that will show the time and also 3 buttons : set_btn , start_btn and stop_btn.

Creating the code is pretty simple so I won’t put the code here but you will be able to take a look at it downloading the countdown project.

What is most important is to connect the interface with the countdown timer.

So we create the timer and set the fn_tick and fn_end functions

var my_timer = new countDown(5,30, 
		function() {
			display_lbl.text = my_timer.time.m+" : "+my_timer.time.s;
		},
		function() {
			alert("The time is up!");
		}
	);

And this is how we connect the buttons with my_timer

 
set_btn.addEventListener('click',function(){
	display_lbl.text = "5 : 30";
	my_timer.set(5,30);
});
 
stop_btn.addEventListener('click',function(){
	my_timer.stop();
});
 
start_btn.addEventListener('click',function(){
	my_timer.start();
});

As you see we also set the label’s text to the initial value when we set the timer because otherwise we’ll loose the first second. We do this here to keep the timer object clean of any external interaction so we can use it even without an interface.

This is how the final project looks like

Countdown timer with Appcelerator

Please keep in mind that this is just a simple example and we don’t have a control mechanism to detect when the user stopped the timer or it reached by itself 00:00 – but you can add it as an exercise 🙂

You can download the Resources folder of the project from here.

Everything is MIT licensed and you can use it in any application you want to, but spreading the word would be nice.

Check the Spanish version of this post:
Crear un temporizador regresivo con Titanium Appcelerator