Publishing live dashboard

[henryblu]

Hello,

Is there an up-to-date tutorial on how to publish your dashboard pages once you have finished building them?
I currently have built 3 dashboard pages each displaying live/historic data. I would like to display each these pages though rotating them for a minute each on a screen. Using auto-login with 'view page' isn't preferable as the dashboard isn't full screen in the browser - there is still the view page ribbon at the top of the page, and the URL bar.

Cheers, Henry

[Jared Wiltshire]

@henryblu said in Publishing live dashboard:

lay each these pages though rotating them for a minute each on a screen. Using auto-login with 'view page' isn't preferable as the dashboard isn't full screen in the browser - there is still the view page ribbon at the top of the page, and the URL bar.

OK, so in order to view the pages without the top toolbar and the side menu you can click "Add/edit menu item" then change the parent item to "Root - top level". Give each page a url and a state name.

You can then link between the pages using something like this <a ui-sref="page2">Page 2</a> where page2 is a state name. The dashboard designer can help you construct links using the Link to state attribute of the link and button elements.

I'll get back to you about rotating through the pages automatically.

[Jared Wiltshire]

OK so this 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.

[henryblu]

Hi Jared, this all worked perfectly - thank you.

[henryblu]

Hi @Jared-Wiltshire,

This may be beyond the scope of the forum, but if I wanted an external website, such as www.google.com to appear in one of these rotations, how would you suggest I do this?

I tried adding a link to a custom page, and then updating to that state reference - but obviously I am then unable to refresh back to my initial dashboard page.

I've looked at potentially using chrome extensions which auto-refresh pages but typically they only refresh the current page and do not forward you onto a specific URL. I am wondering whether you can effectively insert a webpage as one of the dashboard pages, and then add the code above within the edit-markup section.

Any thoughts or suggestions would be greatly appreciated,

Henry.

[Jared Wiltshire]

@henryblu The easiest way, if the website allows it (Google for example will not) would be to embed the website in an iframe.

Besides that the only way would be to use a special browser or extension. It looks like there are some Chrome extensions to do this sort of thing -
https://chrome.google.com/webstore/detail/revolver-tabs/dlknooajieciikpedpldejhhijacnbda

[henryblu]

iframe worked perfectly for the website I wanted to use. Cheers!

[henryblu]

Sorry to raise an old topic @Jared-Wiltshire,

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

Has been working fine. Is there a way to only change after 30 seconds if the page is idle? ng-idle is the only AngularJS module I've found that could potentially work. However, I'm stuck figuring out how I could use it within the ma-now directive.

[Jared Wiltshire]

@henryblu I put together a quick component you can add to your userModule.js file.

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;

}); // define

You can use it on your pages like this
<my-idle-detector state="ui.home" delay="30000"></my-idle-detector>

It just resets the timer when the mouse moves so you might want to add some more events, such as key press or touch events.

[henryblu]

Thank you so much for that Jared - worked as expected!