Product Information
Using Timer in Your Analytic Applications
In this blog I would like to introduce the new Timer object in Analytics Designer. Timer object enables you to start a timer to trigger timing events. By leveraging the feature of a timer, you can realize different scenarios such as:
- create animations
- send notifications to end users regularly
- refresh your analytics application in a certain interval of time
To further delve into its usage, I will share two samples for your reference. You can download the samples from the bottom of this blog.
Script APIs:
Timer_1.start(delayInSeconds: number): void
Timer_1.stop(): void
Timer_1.isRunning(): boolean
Timer_1.onTimeout // event
Sample 1. Create Animation
Let’s look at the demo first:
In this demo, we add animation to the header above, making the widgets shift from right to left repeatedly.
We use Timer + Layout API.
//Start a timer
Timer_1.start(ANIMATION_INTERVAL);
//To make the Widget moving, the Layout API is used to dynamically change the position of the widget.
// These are the 4 panels we want to apply animation to
PANELS = [Panel_10, Panel_11, Panel_12, Panel_13];
var numOfPanels = PANELS.length;
var moveStep = 0.1;
var firstPanel = PANELS[0];
var leftMarginOfFirstPanel = firstPanel.getLayout().getLeft().value;
var panelWidth = firstPanel.getLayout().getWidth().value;
var padding = 0;
if(leftMarginOfFirstPanel >= moveStep) {
for(var i = 0 ; i < numOfPanels; i++) {
var layout = PANELS[i].getLayout();
layout.setLeft(LayoutValue.create(layout.getLeft().value - moveStep, LayoutUnit.Percent));
}
} else { // Move the first panel to end
firstPanel.getLayout().setLeft(LayoutValue.create((panelWidth + padding)* numOfPanels, LayoutUnit.Percent));
for(i = 0 ; i < numOfPanels - 1; i++) {
PANELS[i] = PANELS[i+1];
}
PANELS[i] = firstPanel;
Util_Animation.doAnimation();
}
Sample 2. Automatically play the application
This is an interesting requirement coming from customer. This customer wants an application that is displayed in a big screen with its pages automatically played in turn similar as a page book and can be manually stopped at will.
We can do it with Timer + TabStrip.
In order to make a TabStrip widget look like a page book, a small tip is to hide the header of the Tabstrip for example using a shape, then use API TabStrip_1.setSelectedKey(TabID) to dynamicly “slide” the tab.
Then start a timer to repeat this action.
//Here’s the code sample to switch and slide the tabs.
var key = TabStrip_1.getSelectedKey();
if (key === "Tab_1")
{
TabStrip_1.setSelectedKey("Tab_2");
}
else if (key === "Tab_2")
{
TabStrip_1.setSelectedKey("Tab_3");
}
else if (key === "Tab_3")
{
TabStrip_1.setSelectedKey("Tab_1");
}
Hope this blog could give you some inspirations when you meet similar use cases.
Enjoy your exploration with Analytics Designer!
Hi Ryan,
I am trying to implement your 'sample 1'.
I created a variable for 'PANELS' of type 'Panel' and 'Array' enabled.
In my main 'Animation_Panel' I have 4 panels. However, only the first panel is moving.
The other 3 panels are not moving.
All 4 panels are defined the same. Width is a % and left margin is px.
Any idea why the other 3 panels are not moving?
I managed to get all my 4 panels moving.
However, now only the first panel is moved to the end (i.e. going around in a loop).
The other 3 panels stop moving when they are completely on the left hand side.