Timer

In this tutorial you will learn how to create a timer.

→ Download a ready .uxp file for this tutorial.

Setting Up the Design

1. Add a Text element and an Icon on the canvas from the left-side toolbar.
2. Type in "00:00" inside the Text element.
3. Select the Icon and click the Add State option from the Top bar.
4. Create two States; Pause and Start. The Pause should be the Base state. You can change the icons in both States in the Icons section of the Properties panel.

Create a Timer Variable

1. Click the Variable icon [$] at the bottom of the left toolbar.
2. Click New Variable
3. Name it timer.
4. Set its default value to 1.
5. Press Enter to save it.

Change Icon States On Click

You will add interactions on the Icon. The first one on the Base state (Pause) and the second on the other state. Adding an interaction on the Base state also adds it to the other states so, as a result, you will have two interactions on the other state.

1. Set the Trigger to Click (Tap).
2. In the Action section, click More and choose Next State.
3. Under Element, choose the Icon.
4. Set the Easing to None.
5. Click Add.

Start the Timer

1. Add an interaction on the Start state of the Icon.
2. Set the Trigger to Click (Tap).
3. In the Action section, choose Set Variable.
4. Choose the timer variable in the variable dropdown.
5. In Set Variable as select Expression and type in the following expression in the text area: $timer - 1. This is because the default value of the variable is set to 1, so you want to subtract 1 when you click Start so that the time counts up from 0.

Create a Counting Interaction

1. Add a new interaction on the canvas.
2. In the Trigger dropdown, choose Variable Change.
3. In Variable, choose your variable timer. 
4. Create a condition for when the Icon doesn’t equal Start. To do that, set the first dropdown to Active state, and choose the Icon element in the dropdown below. Then, choose doesn’t equal.
5. The last dropdown is set to Value. In the input below, type in the State name exactly the way you named in at the beginning. i.e. Start.
   If the State name starts with a capital letter, you need to type it in the same way in that input.
6. Click Add condition.

Set a Delay for the Interaction

Now that you added the condition to your interaction, you need to add a delay to enable counting up in seconds for your timer.

1. In the Action section, choose Set Variable.
2. As the Variable below, choose your timer.
3. In Set Variable choose Expression and type in $timer + 1. This will increment the variable's value.
4. In Animation Settings, type 1000 ms in the Delay input.
5. Click Add.

Display the Time

Add another interaction on the canvas that sets the time format as the content of the text element.

1. Choose Variable Change as the Trigger.
2. For Variable, choose the timer.
3. Add the same condition as in the first interaction.
4. In the Action section, click More and choose Set Content.
5. In Element, select the Timer text element.
6. In Set content as, select Expression.
7. Type in the following in the text area:

dateAdd(date(), "seconds", $timer, "mm:ss")

8. Click Add and preview your prototype.