Kiosk mode for lovelace

Readme.md

Kiosk mode

Installation

Add kiosk.js file with the content below to your www folder in config.

Like any other custom script, use ui-lovelace.yaml resources section to reference the kiosk.js file.

Make sure you add kiosk somewhere in your URL. You can use it in the id of your view or in the query string.

Examples:

/lovelace/0?kiosk

views:
  - title: Kiosk
    icon: mdi:heart
    id: kiosk_alarm

Keep tabs

If you still want to keep the Lovelace tabs and hide everything else use add show_tabs in your URL as query string.

/lovelace/0?kiosk&show_tabs

Note

If this is your first file in www make sure you restart Home Assistant.

kiosk.js

if (window.location.href.indexOf('kiosk') > 0)
    setTimeout(function () {
        try {
            const root = document.querySelector('home-assistant').shadowRoot;
            const main = root.querySelector('home-assistant-main').shadowRoot;
            const drawer_layout = main.querySelector('app-drawer-layout');
            const drawer = drawer_layout.querySelector('app-drawer');
            drawer_sidebar = drawer.querySelector('ha-sidebar').shadowRoot;
            const app_toolbar = drawer_sidebar.querySelector('app-toolbar');
            const pages = drawer_layout.querySelector('partial-panel-resolver').shadowRoot;
            const lovelace = pages.querySelector('ha-panel-lovelace').shadowRoot;
            const huiroot = lovelace.querySelector('hui-root').shadowRoot;
            const header = huiroot.querySelector('app-header');
            const toolbar = huiroot.querySelector('app-toolbar');
            if (window.location.href.indexOf('show_tabs') > 0) {
                toolbar.style.display = 'none';
            } else {
                header.style.display = 'none';
            }
            app_toolbar.querySelector('paper-icon-button').click();
            window.dispatchEvent(new Event('resize'));
        }
        catch (e) {
            console.log(e);
        }
    }, 200);

ui-lovelace.yaml

resources:
  - url: /local/kiosk.js
    type: js
  - url: /local/custom-lovelace/thermostat-card/thermostat-card.js?v=0.1
    type: module
title: Lovelace Demo
views:
  - title: Home
    icon: mdi:heart
    id: kiosk_thermostat
    panel: true
    cards:
      - type: custom:thermostat-card
        title: HVAC
        entity: climate.hvac

I use this one, and it is really great. After updating hassio to 0.84 (and use yaml mode), there is a new empty area between the tabs and the content. Anthing kiosk.js can do with this?

Same as @zvennis, After upgrade to 0.84 and enabling lovelace yaml mode, I get a white bar between tabs and view. (This is the white section in the screenshot below.

Echoing the above, I get the white bar between the tabs and the webview now as well.

I have the same issue, and the left menu bar is also visible.

that is because of hiding the top bar after loading the page.
the cards are on the same position as if you are not using kiosk mode.

the top padding of the content-container must be changed and the content-container moved higher.

my javascript knowledge is too bad to fix it.

EDIT
Figured out the issue, and condensed the query selectors a bit.

if (window.location.href.indexOf('kiosk') > 0)
    setTimeout(function () {
        try {
            const drawer_layout = document
                    .querySelector('home-assistant').shadowRoot
                    .querySelector('home-assistant-main').shadowRoot
                    .querySelector('app-drawer-layout');
            const huiroot = drawer_layout
                    .querySelector('partial-panel-resolver').shadowRoot
                    .querySelector('ha-panel-lovelace').shadowRoot
                    .querySelector('hui-root').shadowRoot;
            
            const header = huiroot.querySelector('app-header');
            const toolbar = huiroot.querySelector('app-toolbar');
            const button_menu = toolbar
                    .querySelector('ha-menu-button').shadowRoot;

            if (window.location.href.indexOf('show_tabs') > 0) {
                toolbar.style.display = 'none';
            } else {
                header.style.display = 'none';
            }
            button_menu.querySelector('paper-icon-button').click();
            window.dispatchEvent(new Event('resize'));
        }
        catch (e) {
            console.log(e);
        }
    }, 200);

@Zemoj
Thanks. New JS working for me after browser JS cache refresh.

One additional bug I'm seeing -- the sidebar seems to be hidden by calling .click() on paper-icon-button from the JS, but if sidebar is already hidden and page is reloaded, this causes sidebar to reappear. Is there any way to only click when sidebar is shown? or to hide sidebar in another form? My JS-fu isn't good enough to figure this out. Tried.

Hey,

I had a problem using a background-image on the view: Hidding the app-header made a blank line of 64px at the bottom of the page

I solved it by setting the minHeight at 100vh for the view component:

if (window.location.href.indexOf('kiosk') > 0) {
    setTimeout(function () {
        try {
            const root = document.querySelector('home-assistant').shadowRoot;
            const main = root.querySelector('home-assistant-main').shadowRoot;
            const drawer_layout = main.querySelector('app-drawer-layout');
            const drawer = drawer_layout.querySelector('app-drawer');
            drawer_sidebar = drawer.querySelector('ha-sidebar').shadowRoot;
            const app_toolbar = drawer_sidebar.querySelector('app-toolbar');
            const pages = drawer_layout.querySelector('partial-panel-resolver').shadowRoot;
            const lovelace = pages.querySelector('ha-panel-lovelace').shadowRoot;
            const huiroot = lovelace.querySelector('hui-root').shadowRoot;
            const view = huiroot.querySelector('.tabs-hidden');
            const header = huiroot.querySelector('app-header');
            const toolbar = huiroot.querySelector('app-toolbar');
            if (window.location.href.indexOf('show_tabs') > 0) {
                toolbar.style.display = 'none';
            } else {
                header.style.display = 'none';
                view.style.minHeight = "100vh";
            }
            app_toolbar.querySelector('paper-icon-button').click();
            window.dispatchEvent(new Event('resize'));
        }
        catch (e) {
            console.log(e);
        }
    }, 2000);
}

@brahmafear haha i was just thinking about this also.

Add this new variable:

const app_drawer = drawer_layout.querySelector('app-drawer');

Then enclose the click part:

if(app_drawer.hasAttribute("opened")){
    button_menu.querySelector('paper-icon-button').click();
}

You can see my full file here https://gist.github.com/Zemoj/d2893f6be8ac5b7c58541ff92eeea54b
I also extended the time because the tablet I'm using take a little longer to load the first page.

Thanks @Zemoj, that's perfect :)

Alternative way to force the sidebar to hide:
drawer_layout.forceNarrow = true;

@brahmafear how did you clear the JS cache?

@brahmafear how did you clear the JS cache?

Add this part

Then go to your Home Assistant website and hit CTRL+SHIFT+R

The kiosk mode looks great, however I was wondering if it was possible to automatically switch tabs every {x} seconds, I have created my own JS file to do this but the page reloads on each interval, and I cannot for the life of me workout how to do it correctly.

Is there a possibility to request fullscreen?

Hi, I am trying to get this to work. On my desktop it works fine! Looking very good and exactly what I want. A clean dashboard. On the Ipad however I cannot get it to work. The header from lovelace keeps coming back after a period of time. Looks like it happens on a refresh or something. Does some body have the same experience? Does somebody have some tips? Thanks!

Hi, is there any way to add a refresh button in the top right corner? I have a kiosk set up and there's no easy way to refresh it other than turning the pi off and then on.

view.style.minHeight = "100vh";

Hi Jesselenne, did you manage to get it right? I have the same problem with a background image. But when I add your line to the config or use your whole config, I get an empty bar on top. Hope to hear from you.