Using Timer

Timer object enables application designers to start a timer to trigger timing events.

By leveraging the feature of a timer, you can realize different scenarios such as:

  • create simple animations that allow image or text widgets to change their content every couple of seconds.

  • send notifications to end users in a certain interval of time.

  • refresh your analytic application in a certain interval of time.

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

Creating a Timer

  1. In the Scripting section of the Outline, select right next to Timer to create a timer.

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

  3. Click Done to finish creating the timer.

  4. To invoke the timer, write the script Timer_1.start(delayInSeconds: number) for the triggering event of the canvas or a widget. For example, if you want to invoke the timer when clicking a button, write the script for the onClick() event of the button.

    Note
    When calling the start() API on a timer that is already running, it will override the first start() API, that is, the timer stops and immediately restarts to realize the delay set by the second start() API.
    Note
    The delay time set in the timer can be both a integer that's measured by seconds, or a decimal that's measured by a smaller unit. For example, if you write start(0.1), then the delay time will be 100 milliseconds.

  5. To repeatedly restart a timer once it’s time out, you can go to its onTimeout() event and write the script Timer_1.start(delayInSeconds: number).

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

Example

Here is an example of leveraging the timer to automatically scroll some images horizontally from right to left in a certain interval.

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

Then add an image type script variable (Animation_Widgets) and an integer type script variable (LeftMargins). Enable the Set As Array option 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;

//LeftMargins = [112, 240, 368];

//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 widgets.
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 is time out.
Util_Animation.doAnimation();

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

After you save the application and choose Run Analytic Application, application users can see the images automatically scroll from right to left in turn as expected.