Skip to content

Instantly share code, notes, and snippets.

@Zemoj
Forked from ciotlosm/Readme.md
Last active June 14, 2019 13:07
Show Gist options
  • Save Zemoj/d2893f6be8ac5b7c58541ff92eeea54b to your computer and use it in GitHub Desktop.
Save Zemoj/d2893f6be8ac5b7c58541ff92eeea54b to your computer and use it in GitHub Desktop.
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 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.querySelector('ha-app-layout');
const header = huiroot.querySelector('app-header');
const toolbar = header.querySelector('app-toolbar');
const button_menu = toolbar.querySelector('ha-menu-button');
const app_drawer = drawer_layout.querySelector('app-drawer');
if(app_drawer.hasAttribute("opened")){
button_menu.querySelector('paper-icon-button').click();
}
if (window.location.href.indexOf('show_tabs') > 0) {
toolbar.style.display = 'none';
} else {
header.style.display = 'none';
}
window.dispatchEvent(new Event('resize'));
}
catch (e) {
console.log(e);
}
}, 500);
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
@reevery
Copy link

reevery commented Apr 6, 2019

Great, thanks! Can I suggest you move lines 24 to 26 to line 18 so that the sidebar disappears before the top bar. I had some difficulty getting the side to go until I applied that change.

@Zemoj
Copy link
Author

Zemoj commented Apr 21, 2019

Updated for 0.91.4, and changed the order like you suggested.

@jmbouffa
Copy link

jmbouffa commented Jun 7, 2019

When using a background image, I get a white bar at the bottom equal in height to the header that is hidden. Can't figure out how to fix.

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