Auto Rotating Pages

Transition Pages on a Timer

This HTML code will transition you to another page after a specified time period. You will need to put it on every page and set the state reference to the next page.

<ma-now update-interval="30 seconds" on-change="firstTick && $state.go('page2'); firstTick = true"></ma-now>

Note: You might want to remove this when working on the page in dashboard designer or the preview turned on as it will redirect you.

Transition Only After Idle

If you want to transition to another page only after the page has been idle (no user interaction) for a set period of time, you can use the following Javascript in the User Module and HTML on your page. It resets the timer when the mouse moves so you might want to add some more events, such as key press or touch events.

Create <my-idle-detector> Component in User Module

define(['angular', 'require'], function(angular, require) {
'use strict';
var userModule = angular.module('userModule', ['maUiApp']);
userModule.component('myIdleDetector', {
bindings: {
delay: '<?',
state: '@?'
},
controller: ['$timeout', '$state', '$document', function($timeout, $state, $document) {
const goToState = () => {
$state.go(this.state);
};
    let t;
    const restartTimer = () =&gt; {
        $timeout.cancel(t);
        t = $timeout(goToState, this.delay);
    };

    restartTimer();
    $document.on('mousemove', restartTimer);
}]

});
return userModule;
}); // define

Use <my-idle-detector> Component in HTML of Page

<my-idle-detector state="ui.home" delay="30000"></my-idle-detector>