How Do I Publish a Rotating Live Dashboard Full Screen?

Live dashboard pages need three separate controls: page-state navigation for rotation, top-level menu placement to remove application chrome, and browser full-screen or kiosk mode to remove the URL bar. Treat those layers independently. Changing a timer cannot remove a toolbar, and hiding an application menu cannot hide browser controls.

Why do the usual fixes fail?

Several plausible fixes address only one layer of the display. Identify which layer produces the symptom before changing the dashboard.

Look at the page behavior first. If a manual state link works but automatic rotation does not, troubleshoot the timer. If the application ribbon disappears but the URL bar remains, configure the browser rather than the dashboard.

What causes the dashboard and browser chrome to remain?

The display path has distinct stages. Data sources produce live or historic values; dashboard widgets render those values; the application state router selects a page; the application shell adds its toolbar and side menu; the browser adds its own tabs and address bar. Each stage has a different failure signature.

Tuning does not fix wiring: changing the dwell time will not repair the page-state chain. Test the link from page 1 to page 2, then test the timer, and only then evaluate the visual presentation.

How should the dashboard pages be prepared?

1. Open Add/edit menu item for each dashboard page.
2. Change its parent item to Root - top level. This removes the normal top toolbar and side-menu context from the page view.
3. Assign every page a URL and a unique state name.
4. Create a manual transition to the next state. For example, use <a ui-sref="page2">Page 2</a>, where page2 is the configured state name. The dashboard designer's Link to state attribute can build the same connection for link or button elements.
5. Test every transition manually and close the sequence by linking the last page back to the first.

For three pages, the state chain must be circular: page 1 to page 2, page 2 to page 3, and page 3 to page 1. A missing final link leaves the display parked on the last page.

Root-level placement controls the application shell only. Put the browser into its supported full-screen or kiosk presentation mode to remove the URL bar and tabs. Keep a documented method for leaving that mode during maintenance.

How do I configure a one-minute rotation?

The timed directive changes state after its first initialization tick and the next configured update. The proven 30-second form is:

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

1. Place the directive on page 1 and set $state.go('page2').
2. Place it on page 2 and target page 3.
3. Place it on page 3 and target page 1.
4. Save the pages, leave the designer, and measure the time between completed page transitions.

The firstTick expression prevents navigation on the initial change callback. The first callback sets the flag; a later callback performs the state change. Remove the directive while using dashboard designer or preview, because it continues to redirect when those views are active.

Can rotation wait until the page is idle?

Use an idle-aware component when interaction should postpone the transition. The supplied component starts a $timeout, cancels it on mouse movement, and starts a new timeout for the same target state:

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 = () => {
          $timeout.cancel(t);
          t = $timeout(goToState, this.delay);
        };
        restartTimer();
        $document.on('mousemove', restartTimer);
      }
    ]
  });
  return userModule;
});

Add it to a page as <my-idle-detector state="ui.home" delay="30000"></my-idle-detector>. Here, 30000 represents 30 seconds in milliseconds. Set each page's state binding to its next destination.

Mouse movement is the only activity signal in this implementation. Add keyboard and touch events when operators use those input methods. For production use, cancel the outstanding timeout and detach document-level event handlers when the component is destroyed; otherwise repeated page creation can leave obsolete handlers attached.

How do I verify the complete display path?

1. Confirm that all live and historic widgets update correctly while the page remains stationary.
2. Activate each manual state link and verify the exact next page.
3. Run one complete automatic cycle and time each dwell from completed transition to completed transition.
4. Move the mouse during an idle-controlled dwell. The full delay must restart from that activity event.
5. Verify keyboard and touch behavior if those events were added.
6. Confirm that root-level pages omit the application toolbar and side menu.
7. Enter browser full-screen or kiosk mode and confirm that tabs and the URL bar disappear.
8. Restart the display session and verify authentication, initial page selection, and the complete rotation again.

If a rotation page contains an external site, embed it with an iframe only when that site permits framing. Sites may block embedding through their browser security policy. Direct external navigation breaks the internal state chain; when framing is blocked, use a browser or display tool designed to rotate independent URLs.

FAQ