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_alarmIf this is your first file in www make sure you restart Home Assistant.
| 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 |
That's good, sorry about the autocorrect type, how "hide sidebar" changes into "code sidebar" I will never know! At least you knew what I meant!. I use mine to manage two sites; one is my homes, the other is my amateur radio TV repeater (GB3JV) and I present a dashboard showing the status and another that is part of the test card. I use Kiosk mode for the test card. I use a ModBus/TCP controller for the sensor interface to HASS.
Justin