9 min read

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:

  1. Create a new main stack.
  2. Place a field on the stack’s card and name it timerDisplay.
  3. Place a button on the stack’s card and name it Count Down.
  4. 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
  5. 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
  6. 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:

  1. Create a new main stack.
  2. Place a field on the stack’s card and name it timerDisplay.
  3. Place a button on the stack’s card and name it Count Up.
  4. 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
  5. 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
  6. 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:

  1. Create a new main stack.
  2. Place a field on the stack’s card and name it timerDisplay.
  3. Place a button on the stack’s card and name it Count Up.
  4. 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
  5. 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
  6. Add a button to the card and name it Pause.
  7. 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.

  8. 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:

  1. Create a new main stack.
  2. Place a field on the stack’s card and name it timerDisplay.
  3. Place a button on the stack’s card and name it Count Up.
  4. 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
  5. Add a button to the card and name it Pause.
  6. 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
  7. Place a button on the card and name it Resume.
  8. 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
  9. 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:

  1. Create a new main stack.
  2. Rename the stack’s default card to MainScreen.
  3. Drag a label field to the card and name it counterDisplay.
  4. Drag five checkboxes to the card and place them anywhere. Change the names to 1, 2, 3, 4, and 5.
  5. Drag a button to the card and name it Loop to Count.
  6. 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
  7. 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:

  1. Create a new main stack.
  2. Drag a scrolling list field to the stack’s card and name it myList.
  3. 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
  4. Drag a button to the card and name it iterate.
  5. 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
  6. 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.

Resources for Article:

 Further resources on this subject:


LEAVE A REPLY

Please enter your comment!
Please enter your name here