Building a Full-Screen Kiosk Dashboard

Overview

Kiosk dashboards are purpose-built pages displayed on wall-mounted monitors, lobby screens, or dedicated tablets. They run in a full-screen browser, hide Mango by Radix IoT’s menu and toolbar, log in automatically, and keep their data current without anyone touching them. This guide covers every step, from a restricted account to an always-on display.

Prerequisites

• Superadmin access to Mango
• A dedicated display device (monitor, tablet, or TV with a browser)
• At least one data source with active data points
• Basic familiarity with page markup in Mango

Step 1: Create a Kiosk Role and a Restricted User

Never use an administrator account on a public display. Give the display its own account, with a role of its own, so you can grant it exactly what the dashboard needs and nothing else.

1. Go to Access management > Users
2. In the Roles card, click Add role and create a role for the display, e.g. kiosk (on this page, Add role creates a new role; it does not assign one)
3. Select the user role to list every account, then click the Add user icon
4. Fill in the new user:

5. Click Save
6. On each data point the dashboard shows, add the kiosk role to View point & value only. Leave Edit point and Set point value alone, and do not add kiosk to roles that hold system permissions such as editing pages

Step 2: Build the Dashboard Page

1. Go to Platform management > Edit pages and click Create new page
2. Name it Kiosk Home, and in Edit page name and permissions add the kiosk role to View page. Leave Edit page empty (superadmin only): if a non-superadmin may edit a page, Mango sanitizes its markup, which strips things like the <style> block in Step 6
3. Write the layout in the Editor; the Preview beside it shows the result live. Use <div layout="column"> for vertical stacking or <div layout="row"> for side-by-side panels:

<div layout="column" layout-fill style="padding: 16px; background: #1a1a2e; color: #ffffff;">
    <div layout="row" layout-align="space-between center">
        <h2 style="margin: 0;">Building Operations Dashboard</h2>
        <ma-now update-interval="1 seconds" output="updatedTime"></ma-now>
        <span>{{ updatedTime | maMoment:'format':'LTS' }}</span>
    </div>

    <div flex layout="row" layout-wrap>
        <md-card flex="50" style="margin: 8px;">
            <md-card-content>
                <h3>Zone Temperature</h3>
                <ma-point-value point-xid="DP_Zone1_Temp" flash-on-change="true"></ma-point-value>
            </md-card-content>
        </md-card>
    </div>
</div>

4. Click Save. There is no keyboard shortcut for it

Design Tips for Kiosk Displays

• Use dark backgrounds (#1a1a2e, #0d1117) to reduce screen burn-in and improve readability at a distance
• Increase font sizes with inline styles: body text at least 18px, headings 28px or larger
• Use layout-fill to stretch the content across the whole viewport
• Include a live clock with the <ma-now> component, so anyone can see the display is still updating

Step 3: Create a Menu Item for the Kiosk Page

The menu item gives the page its address.

1. Go to Platform management > Edit menu and click the + button (or use Add/edit menu item in the page editor)
2. In Create menu item, set:

3. Save the dialog, click Save on the Edit menu page, then reload the browser. Mango’s note on the dialog: a new URL path or linked page does not take effect until you reload

Superadmins always see every menu item, so View menu item limits who else can open it; it does not hide it from administrators.

Step 4: Check the User’s Home URL

The kiosk user’s Home URL from Step 1 must match the menu item’s address: /ui/kiosk-home. It has to be an absolute path, starting with a single slash. After login, Mango sends the user straight there.

Step 5: Configure Auto-Login

Mango takes auto-login credentials from three places, in this order: the URL, then credentials stored in that browser, then the UI settings.

Method A: URL Parameters

Add the credentials to the address. With autoLoginStoreCredentials, Mango also stores them in the browser’s local storage, so later loads need only the plain address:

http://your-mango-server:8080/ui/kiosk-home?autoLoginUsername=kiosk-display&autoLoginPassword=YourPassword&autoLoginStoreCredentials=true

Method B: Auto login (local)

On the kiosk’s own browser, open Admin home, and on its Utilities card choose Auto login (local). Enter the kiosk account’s Username and Password and click Save. These credentials are stored in that browser only, take precedence over the UI settings, and cannot belong to a superadmin.

Method C: UI settings (every client)

For many kiosks sharing one account, set the credentials once for every client:

1. Go to Platform management > UI settings
2. In the Auto login for all clients card, enter the kiosk account’s Username and Password
3. Click Save

These are the autoLoginUsername and autoLoginPassword keys of the UI settings, which Mango keeps in the mangoUI-settings entry of Platform management > JSON store:

{
    "autoLoginUsername": "kiosk-display",
    "autoLoginPassword": "YourPassword"
}

Mango’s own note on that card: the credentials are used by every client, are stored on the server, and are publicly accessible through the REST API.

Removing Stored Credentials

To remove auto-login from a device, open this once in its browser (or use Delete on its Auto login (local) page):

http://your-mango-server:8080/ui/?autoLoginDeleteCredentials=true

Step 6: Hide the Menu, Toolbar and Footer

Put a <style> block at the top of the kiosk page’s markup. It applies only while that page is showing, so everyone else keeps the normal interface:

<style>
    md-sidenav[md-component-id="left"],
    md-toolbar.ma-ui-main-toolbar,
    ma-ui-footer {
        display: none !important;
    }
    .main-page-area {
        margin-left: 0 !important;
    }
    body {
        overflow: hidden;
    }
</style>

The side menu is md-sidenav with md-component-id="left", the top bar is md-toolbar with the class ma-ui-main-toolbar, and the footer is ma-ui-footer. The .main-page-area rule removes the margin the menu leaves behind, so the page’s content fills the whole screen.

Step 7: Keep the Data Current

Option A: Live Values (no configuration)

Components such as <ma-point-value> receive new values as they arrive, over Mango’s point-value WebSocket. Nothing extra is needed for live data.

Option B: Re-render the Page on a Timer

<ma-now> evaluates its on-change expression each time it ticks, with $firstTick true on the first tick. $state is available in page markup, so this re-renders the page every 30 minutes:

<ma-now update-interval="30 minutes" on-change="!$firstTick && $state.reload()"></ma-now>

This rebuilds the page; it is not a full browser reload, and it does not free the browser’s memory. Page markup cannot reach window, so an expression such as $window.location.reload() silently does nothing. To clear memory on a low-powered device, restart the browser on a schedule from the device itself.

Option C: Rotate Between Pages

To cycle through several kiosk pages, give each one a menu item (Step 3) and add a timer that moves to the next state:

<ma-now update-interval="30 seconds" on-change="!$firstTick && $state.go('ui.kioskPage2')"></ma-now>

Point each page at the next one, and the last back at the first. Each page needs its own <style> block from Step 6.

Step 8: Launch the Browser in Kiosk Mode

Configure the display device’s browser for unattended operation. --kiosk is the flag that matters; the others suppress first-run and error prompts, and flags vary between browser versions.

Google Chrome:

chrome --kiosk --no-first-run --noerrdialogs "http://your-mango-server:8080/ui/kiosk-home"

Chromium on Linux / Raspberry Pi:

chromium-browser --kiosk --no-first-run --noerrdialogs --disable-translate "http://your-mango-server:8080/ui/kiosk-home"

Firefox:

firefox --kiosk "http://your-mango-server:8080/ui/kiosk-home"

With the credentials stored by Method A or B, the plain address is enough; putting the password in the launch command also works but leaves it in the device’s configuration.

Verification

• Signed in as the kiosk user, the page opens straight away and nothing else is reachable from it
• Auto-login works: restarting the browser does not ask for credentials
• The menu, toolbar and footer are hidden on the kiosk page
• Values update without a manual refresh
• The browser runs full screen with no address bar or tabs
• Page rotation works (if configured)

Troubleshooting

Auto-login not working after a browser restart

• Confirm the credentials are stored: the first URL carried autoLoginStoreCredentials=true, or the browser’s Auto login (local) page shows the user, or Auto login for all clients holds them
• Check the kiosk account is not Disabled

The menu or toolbar is still visible

• Check the <style> block is in the kiosk page and the selectors match Step 6 exactly
• If the page’s Edit page permission includes any role, Mango sanitizes the markup and removes the <style> block. Leave Edit page empty

The page is blank for the kiosk user

• The kiosk role needs View page on the page, View menu item on the menu item, and View point & value on each point it shows

The page goes blank or shows a login screen after a while

• The session expired. Open the user under Access management > Users, tick Override session expiration, and set a longer Session expiration
• Or store the credentials in the browser (Method A or B), so the display signs itself back in

The display goes to sleep or shows a screensaver

• On Windows, disable the screensaver and sleep in Power Settings
• On a Linux X11 desktop, run xset s off && xset -dpms

Memory use grows over time on a Raspberry Pi or low-end device

• Restart the browser on a schedule from the device; a page re-render (Option B) does not free the browser’s memory
• Chromium’s --disable-gpu flag can help on some low-end hardware