Timer

The Timer component allows you to manage time interactively in your PandaSuite projects. It is particularly useful for triggering actions at specific moments, controlling animations, or creating time-based dynamic interactions.

This component is invisible in the interface but operates in the background to orchestrate events.

Use Cases

The Timer component can be used in various scenarios, such as:

• Creating a countdown for a quiz or game
• Triggering actions when the user is inactive
• Synchronizing with other components, such as a scrolling area

Setting Up the Component

Insert the Timer Component

1. Go to the Components section in PandaSuite.
2. Add the Timer component to your project.

Note that the Timer is a system component that has no visible representation on the screen. It is accessible from the Objects list at the bottom left.

Initial Configuration

After adding the component, configure its key settings:

• Type: Choose between Normal and Inactivity.
  • In Normal mode, the timer operates based on the specified duration and starts counting down or progressing as soon as it is activated or triggered.
  • In Inactivity mode, the timer detects the absence of user interaction and resets with each activity. This allows you to trigger an action on user inactivity.
• Auto-play: Automatically starts when the screen or component containing the timer is displayed.
• Loop: Automatically restarts after each cycle.
• Duration: Total countdown duration.

Component Features

Trigger Events

The Timer component allows you to trigger actions based on time. Here are the main trigger events:

• Start playing
• Pause
• Stop playing
• End playing
• Time: If a marker is defined

Interactive Actions

Here are the actions associated with this component:

• Play / Pause
• Play
• Pause
• Stop
• Forward
• Rewind
• Restart from the beginning

If a marker is defined:

• Change time
• Next time
• Previous time
• Random time

Advanced Interactions

Synchronizing with Other Components

The Timer can be synchronized with other components for complex interactions. For example, to scroll an area horizontally in sync with a Timer:

1. Add a Scrolling Area component and set it up.
2. Insert a Timer with a duration of 4 seconds and enable auto-play.
3. Add a Synchronization component and select both components.
4. Synchronize the Timer’s time with the “x” position of the Scrolling Area.

Using Markers

Markers allow you to execute actions at specific times:

1. Create a marker at 4 seconds.
2. Go to Actions.
3. Add an action triggered by the marker.
4. Select the desired action (e.g., open a pop-up).

Practical Examples

Display the Timer

1. Add a Timer and choose its maximum duration.
2. Insert a text block.
3. Use data binding to link the Timer value to the text. The value is expressed in seconds.
4. To display the time in the correct format, use the Format Date function. This function requires a value expressed in milliseconds:

• Multiply the time value by 1000 to convert it to milliseconds.

  

• Then, to format it as MM:SS, select Custom and use the universal format codes mm:ss.

• For the Time Zone, select UTC, the global reference time that is not affected by time zones.

Display a Countdown

To display the timer as a countdown, the process is similar to displaying the timer, but with different functions and calculations:

1. Add a Timer and choose its duration.
2. Insert a text block.
3. Use data binding to link the Timer value to the text. The value is expressed in seconds.
4. To display the time in countdown mode:
   • Apply the Subtract function and enter the total timer duration (in seconds).
   • Use the Multiply function to multiply by -1 to reverse the values.
   • Use the Format Date function. Multiply the time value by 1000 to convert it to milliseconds.
   • Then, to format it as MM:SS, select Custom and use the universal format codes mm:ss.
   • For the Time Zone, select UTC, the global reference time that is not affected by time zones.

Animate a Counter

Learn how to create custom animations for numerical data, such as an animated counter in interactive infographics.

Trigger an Action on Inactivity

Read the dedicated article to learn more:

• Trigger an action on user inactivity