Instantly share code, notes, and snippets.

@ciotlosm /Readme.md
Last active Feb 13, 2019

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.

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);
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
@zvennis

This comment has been minimized.

Copy link

zvennis commented Dec 15, 2018

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

@brahmafear

This comment has been minimized.

Copy link

brahmafear commented Dec 18, 2018

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.
screen shot 2018-12-18 at 3 41 54 pm

@Galtwise

This comment has been minimized.

Copy link

Galtwise commented Dec 19, 2018

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

@MarkyMarc35

This comment has been minimized.

Copy link

MarkyMarc35 commented Dec 19, 2018

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

@raystream

This comment has been minimized.

Copy link

raystream commented Dec 21, 2018

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.

@Zemoj

This comment has been minimized.

Copy link

Zemoj commented Dec 22, 2018

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);
@brahmafear

This comment has been minimized.

Copy link

brahmafear commented Dec 23, 2018

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

@brahmafear

This comment has been minimized.

Copy link

brahmafear commented Dec 24, 2018

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.

@jessylenne

This comment has been minimized.

Copy link

jessylenne commented Dec 30, 2018

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

This comment has been minimized.

Copy link

Zemoj commented Dec 30, 2018

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

@lolouk44

This comment has been minimized.

Copy link

lolouk44 commented Jan 1, 2019

Thanks @Zemoj, that's perfect :)

@koying

This comment has been minimized.

Copy link

koying commented Jan 2, 2019

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

@lockyt

This comment has been minimized.

Copy link

lockyt commented Jan 5, 2019

@brahmafear how did you clear the JS cache?

@Tuncay-Ayhan

This comment has been minimized.

Copy link

Tuncay-Ayhan commented Jan 8, 2019

@brahmafear how did you clear the JS cache?

Add this part
image

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

@blindcoppertop

This comment has been minimized.

Copy link

blindcoppertop commented Jan 22, 2019

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.

@gijbelsy

This comment has been minimized.

Copy link

gijbelsy commented Jan 30, 2019

Is there a possibility to request fullscreen?

@wendan20

This comment has been minimized.

Copy link

wendan20 commented Jan 31, 2019

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!

@simpat1zq

This comment has been minimized.

Copy link

simpat1zq commented Jan 31, 2019

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.

@wendan20

This comment has been minimized.

Copy link

wendan20 commented Feb 3, 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.

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