Set up Timers

As an application designer you can use the timer technical object to trigger timing events at runtime.

Context

By setting up timers, you can realize different scenarios such as:

  • creating simple animations that make image or text widgets change their contents every couple of seconds

  • sending notifications to end users at a certain interval

  • refreshing analytic applications at a certain interval

Multiple timers can exist simultaneously, but each timer works independently from others.

Procedure

  1. In the Scripting section of the Outline panel, select right next to Timer.

    The side panel Timer opens with a default name Timer_1 displayed. You can change the name at will.

  2. Choose Done to finish adding the timer to your application.
  3. To start the timer at runtime, you can use the following API for the canvas or a widget, for example, the onClick event of a button if you want to start the timer when application users choose it:
    Code Syntax
    start(delayInSeconds: number)
    Note
    • The delay time set in the timer can be either an integer or a decimal, measured in seconds. For example, if you write start(0.1), then the delay time will be 100 milliseconds.
    • Calling the start() API on a timer that is already running will override the first start() API. This means the timer stops and immediately restarts to realize the delay time set by the second start() API.
  4. To repeatedly restart a timer once time's out, you can go to its onTimeout event and use the start() API.

    There are some other script APIs available for the onTimeout event of a timer, such as stop() and isRunning(). For detailed information, refer to Analytics Designer API Reference.

Example

Here's an example of using the timer to automatically scroll images horizontally from right to left at a certain interval.

First, insert three different images, Image_1, Image_2 and Image_3 and place them side by side on the canvas. Take notes of their left margins, which are 112px, 240px and 368 px.

Then, create an image type script variable Animation_Widgets and an integer type script variable LeftMargins. Enable Set As Array for the two script variables.

After that, add a script object Util_Animation with a function doAnimation and then add a timer Timer_1 .

Write the following scripts:

For the onInitialization event of canvas:

Sample Code
console.log('onInitialization - begin');

LeftMargins = [112, 240, 368];
Animation_Widgets = [Image_1,Image_2,Image_3];

//Start the timer after 3 seconds after initializing the canvas.
Timer_1.start(3);

console.log('onInitialization - end');

For doAnimation:

Sample Code
var num = 3;

//Redefine the sequence of the images.
var first = Animation_Widgets[0];
Animation_Widgets[0] = Animation_Widgets[1];
Animation_Widgets[1] = Animation_Widgets[2];
Animation_Widgets[2] = first;

// Update the left margin of each widget.
for(var i=0;i<num;i++) {
	Animation_Widgets[i].getLayout().setLeft(LeftMargins[i]);
}

For Timer_1:

Sample Code
//Run this script object once Timer_1 times out.
Util_Animation.doAnimation();

//Restart Timer_1 again after 3 seconds.
Timer_1.start(3);

When application users run the application, they'll soon see the images automatically scroll from right to left in turn.