In this article by Dr Edward Lavieri, author of LiveCode Mobile Development Cookbook, you will learn how to use timers and loops in your mobile apps. Timers can be used for many different functions, including a basketball shot clock, car racing time, the length of time logged into a system, and so much more. Loops are useful for counting and iterating through lists. All of this will be covered in this article.

(For more resources related to this topic, see here.)

Implementing a countdown timer

To implement a countdown timer, we will create two objects: a field to display the current timer and a button to start the countdown. We will code two handlers: one for the button and one for the timer.

How to do it...

Perform the following steps to create a countdown timer:

Create a new main stack.
Place a field on the stack's card and name it timerDisplay.
Place a button on the stack's card and name it Count Down.

Add the following code to the Count Down button:

on mouseUp
  local pTime
   
  put 19 into pTime
  put pTime into fld "timerDisplay"
  countDownTimer pTime
end mouseUp

Add the following code to the Count Down button:

on countDownTimer currentTimerValue
  subtract 1 from currentTimerValue
  put currentTimerValue into fld "timerDisplay"
  if currentTimerValue > 0 then 
    send "countDownTimer" && currentTimerValue to me 
      in 1 sec
  end if
end countDownTimer

Test the code using a mobile simulator or an actual device.

How it works...

To implement our timer, we created a simple callback situation where the countDownTimer method will be called each second until the timer is zero. We avoided the temptation to use a repeat loop because that would have blocked all other messages and introduced unwanted app behavior.

There's more...

LiveCode provides us with the send command, which allows us to transfer messages to handlers and objects immediately or at a specific time, such as this recipe's example.

Implementing a count-up timer

To implement a count-up timer, we will create two objects: a field to display the current timer and a button to start the upwards counting. We will code two handlers: one for the button and one for the timer.

How to do it...

Perform the following steps to implement a count-up timer:

Create a new main stack.
Place a field on the stack's card and name it timerDisplay.
Place a button on the stack's card and name it Count Up.

Add the following code to the Count Up button:

on mouseUp
  local pTime
   
  put 0 into pTime
  put pTime into fld "timerDisplay"
  countUpTimer pTime
end mouseUp

Add the following code to the Count Up button:

on countUpTimer currentTimerValue
  add 1 to currentTimerValue
  put currentTimerValue into fld "timerDisplay"
  if currentTimerValue < 10 then 
    send "countUpTimer" && currentTimerValue to me 
      in 1 sec
  end if
end countUpTimer

Test the code using a mobile simulator or an actual device.

How it works...

To implement our timer, we created a simple callback situation where the countUpTimer method will be called each second until the timer is at 10. We avoided the temptation to use a repeat loop because that would have blocked all other messages and introduced unwanted app behavior.

There's more...

Timers can be tricky, especially on mobile devices. For example, using the repeat loop control when working with timers is not recommended because repeat blocks other messages.

Pausing a timer

It can be important to have the ability to stop or pause a timer once it is started. The difference between stopping and pausing a timer is in keeping track of where the timer was when it was interrupted. In this recipe, you'll learn how to pause a timer. Of course, if you never resume the timer, then the act of pausing it has the same effect as stopping it.

How to do it...

Use the following steps to create a count-up timer and pause function:

Create a new main stack.
Place a field on the stack's card and name it timerDisplay.
Place a button on the stack's card and name it Count Up.

Add the following code to the Count Up button:

on mouseUp
  local pTime
  put 0 into pTime
  put pTime into fld "timerDisplay"
  countUpTimer pTime
end mouseUp

Add the following code to the Count Up button:

on countUpTimer currentTimerValue
  add 1 to currentTimerValue
  put currentTimerValue into fld "timerDisplay"
  if currentTimerValue < 60 then 
    send "countUpTimer" && currentTimerValue to me 
    in 1 sec
  end if
end countUpTimer

Add a button to the card and name it Pause.
Add the following code to the Pause button:
```
on mouseUp
  repeat for each line i in the pendingMessages
    cancel (item 1 of i)
  end repeat
end mouseUp
```
In LiveCode, the pendingMessages option returns a list of currently scheduled messages. These are messages that have been scheduled for delivery but are yet to be delivered.
To test this, first click on the Count Up button, and then click on the Pause button before the timer reaches 60.

How it works...

We first created a timer that counts up from 0 to 60. Next, we created a Pause button that, when clicked, cancels all pending system messages, including the call to the countUpTimer handler.

Resuming a timer

If you have a timer as part of your mobile app, you will most likely want the user to be able to pause and resume a timer, either directly or through in-app actions. See previous recipes in this article to create and pause a timer. This recipe covers how to resume a timer once it is paused.

How to do it...

Perform the following steps to resume a timer once it is paused:

Create a new main stack.
Place a field on the stack's card and name it timerDisplay.
Place a button on the stack's card and name it Count Up.

Add the following code to the Count Up button:

on mouseUp
  local pTime
   
  put 0 into pTime
  put pTime into fld "timerDisplay"
  countUpTimer pTime
end mouseUp
on countUpTimer currentTimerValue
  add 1 to currentTimerValue
  put currentTimerValue into fld "timerDisplay"
  if currentTimerValue < 60 then 
    send "countUpTimer" && currentTimerValue to me 
    in 1 sec
  end if
end countUpTimer

Add a button to the card and name it Pause.

Add the following code to the Pause button:

on mouseUp
  repeat for each line i in the pendingMessages
    cancel (item 1 of i)
  end repeat
end mouseUp

Place a button on the card and name it Resume.

Add the following code to the Resume button:

on mouseUp
  local pTime
   
  put the text of fld "timerDisplay" into pTime
  countUpTimer pTime
end mouseUp

on countUpTimer currentTimerValue
  add 1 to currentTimerValue
  put currentTimerValue into fld "timerDisplay"
  if currentTimerValue <60 then 
    send "countUpTimer" && currentTimerValue to me 
    in 1 sec
  end if
end countUpTimer

To test this, first, click on the Count Up button, then click on the Pause button before the timer reaches 60. Finally, click on the Resume button.

How it works...

We first created a timer that counts up from 0 to 60. Next, we created a Pause button that, when clicked, cancels all pending system messages, including the call to the countUpTimer handler. When the Resume button is clicked on, the current value of the timer, based on the timerDisplay button, is used to continue incrementing the timer.

In LiveCode, pendingMessages returns a list of currently scheduled messages. These are messages that have been scheduled for delivery but are yet to be delivered.

Using a loop to count

There are numerous reasons why you might want to implement a counter in a mobile app. You might want to count the number of items on a screen (that is, cold pieces in a game), the number of players using your app simultaneously, and so on. One of the easiest methods of counting is to use a loop. This recipe shows you how to easily implement a loop.

How to do it...

Use the following steps to instantiate a loop that counts:

Create a new main stack.
Rename the stack's default card to MainScreen.
Drag a label field to the card and name it counterDisplay.
Drag five checkboxes to the card and place them anywhere. Change the names to 1, 2, 3, 4, and 5.
Drag a button to the card and name it Loop to Count.

Add the following code to the Loop to Count button:

on mouseUp
  local tButtonNumber
   
  put the number of buttons on this 
  card into tButtonNumber
  if tButtonNumber > 0 then
    repeat with tLoop = 1 to tButtonNumber
      set the label of btn value(tLoop) to 
      "Changed " & tLoop
    end repeat
    put "Number of button's changed: " & 
    tButtonNumber into fld "counterDisplay"
  end if
end mouseUp

Test the code by running it in a mobile simulator or on an actual device.

How it works...

In this recipe, we created several buttons on a card. Next, we created code to count the number of buttons and a repeat control structure to sequence through the buttons and change their labels.

Using a loop to iterate through a list

In this recipe, we will create a loop to iterate through a list of text items. Our list will be a to-do or action list. Our loop will process each line and number them on screen. This type of loop can be useful when you need to process lists of unknown lengths.

How to do it...

Perform the following steps to create an iterative loop:

Create a new main stack.
Drag a scrolling list field to the stack's card and name it myList.
Change the contents of the myList field to the following, paying special attention to the upper- and lowercase values of each line:
- Wash Truck
- Write Paper
- Clean Garage
- Eat Dinner
- Study for Exam
Drag a button to the card and name it iterate.

Add the following code to the iterate button:

on mouseUp
  local tLines
   
  put the number of lines of fld "myList" into tLines
  repeat with tLoop = 1 to tLines
    put tLoop & " - " & line tLoop of fld 
    "myList"into line tLoop of fld "myList"
  end repeat
end mouseUp

Test the code by clicking on the iterate button.

How it works...

We used the repeat control structure to iterate through a list field one line at a time. This was accomplished by first determining the number of lines in that list field, and then setting the repeat control structure to sequence through the lines.

Summary

In this article we examined the LiveCode scripting required to implement and control count-up and countdown timers. We also learnt how to use loops to count and iterate through a list.