Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Kiosk mode for lovelace

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

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);
}
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
@arretx
Copy link

arretx commented Apr 25, 2019

Not sure what I'm missing here, but I added the kiosk.js file to the www folder, added the resources section to the ui-lovelace.yaml, restarted, and tried accessing the URL with ?kiosk in it and I don't see anything different happening.

I see this though:

TypeError: Cannot read property 'querySelector' of null
at kiosk.js:11

v 91.4 here.

@agrigo2s
Copy link

agrigo2s commented Apr 25, 2019

like this : http://hassio.local:8123/lovelace/0?kiosk ? Can you check in the sourcecode if the js file is loaded?

@TheAlphaLaw
Copy link

TheAlphaLaw commented May 28, 2019

like this : http://hassio.local:8123/lovelace/0?kiosk ? Can you check in the sourcecode if the js file is loaded?

Doesn't work for me either, nothing in my /www is being picked up.

@jmbouffa
Copy link

jmbouffa commented Jun 7, 2019

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.

I fixed it by changing the minHeight for huiroot.querySelector('ha-app-layout').querySelector('#view').

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;
            const app_drawer = drawer_layout.querySelector('app-drawer');

            if (window.location.href.indexOf('show_tabs') > 0) {
                toolbar.style.display = 'none';
            } else {
                header.style.display = 'none';
            }

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

            const app_layout = huiroot.querySelector('ha-app-layout').querySelector('#view')
            app_layout.style.minHeight = '100vh';

            window.dispatchEvent(new Event('resize'));
        }
        catch (e) {
            console.log(e);
        }
    }, 500);

I still get the white bar, is this still working for you?

@sheminasalam
Copy link

sheminasalam commented Jun 12, 2019

i have tried this with hassio running in OPi PC2,but it is not working..any advises...the error message in consule is 404 not found. Also none of the custom addon works...any advises..?

@nsotnikov
Copy link

nsotnikov commented Jun 18, 2019

Not sure what I'm missing here, but I added the kiosk.js file to the www folder, added the resources section to the ui-lovelace.yaml, restarted, and tried accessing the URL with ?kiosk in it and I don't see anything different happening.

I see this though:

TypeError: Cannot read property 'querySelector' of null
at kiosk.js:11

v 91.4 here.

Same here:
TypeError: Cannot read property 'querySelector' of null
hassio 0.94.3
chrome latest

@Zemoj
Copy link

Zemoj commented Jun 18, 2019

Are you guys using the updated versions from the comments? My link above should work for 91.4 Also just for reference if this is the first item in the www folder HA needs to be restarted. Version 94 might have changed page structure again, I can take a look tonight.

@nsotnikov
Copy link

nsotnikov commented Jun 19, 2019

Are you guys using the updated versions from the comments? My link above should work for 91.4 Also just for reference if this is the first item in the www folder HA needs to be restarted. Version 94 might have changed page structure again, I can take a look tonight.

You are right, your version works correctly with the latest version of ha
Thank you!!!

@johan149
Copy link

johan149 commented Aug 2, 2019

I get this error on version 0.96.5"

TypeError: Cannot read property 'querySelector' of null
at kiosk.js:11

@corrafig
Copy link

corrafig commented Aug 18, 2019

I get this error on version 0.96.5"

TypeError: Cannot read property 'querySelector' of null
at kiosk.js:11

I made the following quick fix for myself:
https://gist.github.com/corrafig/c8288df960e7f59e82c12d14de26fde8

@johan149
Copy link

johan149 commented Aug 19, 2019

I get this error on version 0.96.5"
TypeError: Cannot read property 'querySelector' of null
at kiosk.js:11

I made the following quick fix for myself:
https://gist.github.com/corrafig/c8288df960e7f59e82c12d14de26fde8

thanks man! it worked! there is anyway to keep the tabs from the top?

@esbenr
Copy link

esbenr commented Oct 23, 2019

After updating to HA 100.2 the kiosk mode doesent work.
It seems to break with
TypeError: Cannot read property 'click' of null at kiosk.js?v=3:19
I assume that menu button has changed name.

Collapsing the side-bar now minimizes the menu instead of hiding it. Which means that we might need to hide the side-bar instead of collapsing it.

Anybody made a fix for HA 100.2 yet?

/Esben

@ciotlosm
Copy link
Author

ciotlosm commented Oct 23, 2019

I'll try and have a look

@esbenr
Copy link

esbenr commented Oct 23, 2019

I'll try and have a look

Using @corrafig's modified worked.
Maybe mine was old. Sorry.

@ciotlosm
Copy link
Author

ciotlosm commented Oct 23, 2019

@esbenr thanks for letting me know. I've updated the original version here with the forked working version and updated credits to reflect contribution.

@AdamRidley
Copy link

AdamRidley commented Oct 30, 2019

It seems that in the latest fix show_tabs is no longer working. Any way to get it back?

@LucaBopf
Copy link

LucaBopf commented Nov 6, 2019

Same problem like @AdamRidley.

@jscott304
Copy link

jscott304 commented Dec 13, 2019

Bump of the show_tabs function not working.

@anomaly256
Copy link

anomaly256 commented Dec 18, 2019

This one's working for me, including show_tabs. Note the removal of .shadowRoot on .querySelector('partial-panel-resolver'). I also changed the app_layout.style.minHeight to 50vh to get rid of an issue I had with scrollbars rendering when they weren't really necessary - but you may or may not want to change this back to 100vh as previous examples have

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')
                    .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;
            const app_drawer = drawer_layout.querySelector('app-drawer');
            if (window.location.href.indexOf('show_tabs') > 0) {
                toolbar.style.display = 'none';
            } else {
                header.style.display = 'none';
            }
            if(app_drawer.hasAttribute("opened")){
                button_menu.querySelector('paper-icon-button').click();
            }
            const app_layout = huiroot.querySelector('ha-app-layout').querySelector('#view')
            app_layout.style.minHeight = '50vh';
            window.dispatchEvent(new Event('resize'));
        }
        catch (e) {
            console.log(e);
        }
    }, 200);
}

@ulrikjo
Copy link

ulrikjo commented Dec 19, 2019

I'm using users and the "visible: - user:" configuration variable to only have certain Lovelace views show up on my tablet dashboard. The tabs can be hidden with kiosk mode but the sidebar is always visible when I'm using users other than my main administrator user. Any ideas why and how to solve this problem?

@johan149
Copy link

johan149 commented Jan 14, 2020

show_tabs not working anymore... anyone has a fix?

@ulrikjo
Copy link

ulrikjo commented Jan 14, 2020

Custom Header can be used as a replacement for kiosk.js, and it's well-maintained. You can install it (and keep it updated) through HACS if you use that.

@ulrikjo
Copy link

ulrikjo commented Jan 14, 2020

@manualmanul
Copy link

manualmanul commented Jun 24, 2020

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);
}

@Pirol62
Copy link

Pirol62 commented Oct 8, 2020

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

@esbenr
Copy link

esbenr commented Oct 8, 2020

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.

@Pirol62
Copy link

Pirol62 commented Oct 8, 2020

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

@feradelectronics
Copy link

feradelectronics commented Oct 8, 2020

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.
Header
Any help and code suggestions would be greatly appreciated.

@byte4geek
Copy link

byte4geek commented May 6, 2021

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?

@damienjmiller
Copy link

damienjmiller commented Aug 2, 2021

@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment