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!

• Sample applications(based on release 2019.20): link
• Documentation: link