Skip to content

Instantly share code, notes, and snippets.

@ciotlosm
Last active February 5, 2024 15:04
Show Gist options
  • Save ciotlosm/1f09b330aa5bd5ea87b59f33609cc931 to your computer and use it in GitHub Desktop.
Save ciotlosm/1f09b330aa5bd5ea87b59f33609cc931 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.

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
@feradelectronics
Copy link

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

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

@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