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.

Update

Fixed based on the working fork here: https://gist.github.com/corrafig/c8288df960e7f59e82c12d14de26fde8

Credits

Thanks to @corrafig for the fixes

kiosk.js

if (window.location.href.indexOf('kiosk') > 0) {
    setTimeout(function () {
        try {
            const home_assistant_main =  document
                  .querySelector("body > home-assistant").shadowRoot
                  .querySelector("home-assistant-main");
            
            const header = home_assistant_main.shadowRoot
                  .querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot
                  .querySelector("hui-root").shadowRoot
                  .querySelector("#layout > app-header")
                  .style.display = "none";
            
            const drawer = home_assistant_main.shadowRoot
                  .querySelector("#drawer")
                  .style.display = 'none';
            
            home_assistant_main.style.setProperty("--app-drawer-width", 0);
            home_assistant_main.shadowRoot
                .querySelector("#drawer > ha-sidebar").shadowRoot
                .querySelector("div.menu > 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

Here's my take at fixing show_tabs in this script, compatible with Home Assistant 0.111:

if (window.location.href.indexOf('kiosk') > 0) {
    setTimeout(function () {
        try {
            const home_assistant_main =  document
                  .querySelector("body > home-assistant").shadowRoot
                  .querySelector("home-assistant-main");
            
            if (window.location.href.indexOf('show_tabs') > 0) {
                const header = home_assistant_main.shadowRoot
                      .querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot
                      .querySelector("hui-root").shadowRoot
                      .querySelector("#layout > app-header > app-toolbar")
                      .style.display = "none";
            } else {
                const header = home_assistant_main.shadowRoot
                      .querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot
                      .querySelector("hui-root").shadowRoot
                      .querySelector("#layout > app-header")
                      .style.display = "none";
            }
            
            const drawer = home_assistant_main.shadowRoot
                  .querySelector("#drawer")
                  .style.display = 'none';
                  
            home_assistant_main.shadowRoot
                  .querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot
                  .querySelector("hui-root").shadowRoot
                  .querySelector("ha-app-layout")
                  .querySelector("app-header").style.left="0"

            home_assistant_main.style.setProperty("--app-drawer-width", 0);
            home_assistant_main.shadowRoot
                .querySelector("#drawer > ha-sidebar").shadowRoot
                .querySelector("div.menu > ha-icon-button")
                .click();
            // window.dispatchEvent(new Event('resize')); // messes up the layout
        }
        catch (e) {
            console.log(e);
        }
    }, 200);
}

Hi, I already learned, that custom header will be depricated with 116.x. Is there any chance, to bring this component into HACS?

Hi, I already learned, that custom header will be depricated with 116.x. Is there any chance, to bring this component into HACS?

Hi.
Feel free to make a pullrequest. It’s open source.

Puh, ok. I have never done that. ;-)

how is it possible to disable the side menu for non administrator accounts and make header compact?
It would also be nice to add elements eg. time and other entities to the top right side. Sample below.

Any help and code suggestions would be greatly appreciated.

Thanks for the kiosk mode.
The kiosk mode was installed via HACS on Hassio and no other action i made and if i use lovelace/0?kiosk the kiosk mode works fine.
But if i use lovelace/0?kiosk&show_tabs i can't see the tabs.
What can i check?
I missing sometings?

@byte4geek - I just had the same problem then I realised I had this (https://github.com/maykar/kiosk-mode) installed which was over-riding this - could you be having the same issue?