⏰ Timer Task — Delay your Actions

Create a simple stopwatch using TimerTask blocks

Published in

Sketchware

4 min readJan 17, 2017

Many of the Sketchware users were requesting a sleep block to delay certain actions. We provided a component that’s more powerful than a regular sleep function—a Timer component that lets you postpone or repeat certain actions.

Here’s a sneak peek of what we’re going to create today:

What you’ll need

Sketchware Application from Google Play

What you’ll learn

Concept of using Timer component

Step 1: Designing the Application

Here, I placed 5 TextViews and a Button:

1. TextView1 — displays minutes
2. TextView2 — placeholder for “:”
3. TextView3 — displays seconds
4. TextView4 — placeholder for “:”
5. TextView5 — displays milliseconds
6. Button — starts/stops the stopwatch

Step 2: Understanding TimerTask Blocks

Note: make sure you add Timer under Components in order to gain access to these blocks.

Note that “ms” is short for milliseconds. These blocks are responsible for these actions respectively:

1. TimerTask after [] ms — executes the blocks inside after certain time.
2. TimerTask after [] ms for every [] ms — executes the blocks after certain time and repeats the task for every designated time until you cancel it.
3. TimerTask cancel — cancels the designated TimerTask.

It is IMPORTANT to remember that you can only assign one task to each TimerTask. If you need to handle another set of task, you have to create another Timer component.

Step 3: Setting up the Logic

Now that we understand what TimerTask does, let’s go straight to the logic!

We will separate the logic into two parts — starting the stopwatch and stopping the stopwatch.

Starting the Stopwatch

User presses the Button. Start the Stopwatch!
We mark the current time, and every millisecond, we calculate the difference of new time and the marked time.
We change the Button’s text to “Stop”.

Here are some variables I created to keep my logic organized:

1. started — boolean to keep track of stopwatch’s state
2. minute — string to display minutes
3. seconds — string to display seconds
4. ms — string to display milliseconds

It will look something like this:

Note that formatDate is a MoreBlock I created to format the millisecond into mm:ss:ms format.

I created two Calendar components, c1 and c2. c1 is responsible for getting the time when the stopwatch is started. Then, every millisecond, we put the new time into c2, and we calculate the difference of c2 and c1, which gives us the difference in milliseconds. Then, we put the difference into the MoreBlock we created.

You might ask, “Why are you calculating the difference between two calendar components? Can’t you just increment the number variable by 1 millisecond and pass that number into the formatDate function?”

That is a very good question — the reason behind using two calendar component is to receive the most accurate time. If you depend on local variables, there could be a high chance that the result may not be accurate. For instance, if your smartphone lags, it could delay the calculation.

Here is how the formatDate block is structured:

Calculating milliseconds — Since I only want the milliseconds to remain two digits and only go up to 99, I used the remainder and division block to cap the number.
Calculating seconds — Note that 1 second = 1,000 milliseconds. So, I divided the time by 1000 to acquire seconds, and capped the seconds to only go up to 60 by using the remainder block.
Calculating minutes — Since 1 minute = 60 seconds = 60,000 milliseconds, I divided the time by 60,000 and capped the minutes to only go up to 60 by using the remainder block.