Kiosk mode for lovelace

Readme.md

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

Note

If this is your first file in www make sure you restart Home Assistant.

kiosk.js

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

ui-lovelace.yaml

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

More on this. I discovered that I can change style.display for the header from "none" to "block" and it will appear. However, because it draws the header before the tabs disappear, it leaves a space. But the odd part (to me, at least): if I click on a header tab to change the view, the header corrects itself. Here are "before" and "after" images. First, the before:

Now, the after:

Are you using the latest code? Justin

…

Sent from my Remington Rand UNIVAC www.g8ytz.com On 15 Sep 2020, at 03:09, wheindl <notifications@github.com> wrote: @wheindl commented on this gist. More on this. I discovered that I can change style.display for the header from "none" to "block" and it will appear. However, because it draws the header before the tabs disappear, it leaves a space. But the odd part (to me, at least): if I click on a header tab to change the view, the header corrects itself. Here are "before" and "after" images. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

Thanks, Justin. I'm using the code in the box at the top of this article, modified only to change style.display from "none" to "block" in the header statement. I've tried a couple of variants. My intent is what you see in the second picture I posted, which is the full header without a space to the left of it. (I'd be happy with the view tabs only, and not the rest of the header; but the problem with hiding the header is that by default it also hides the view tabs, and I need the view tabs, as shown above.)

I'm sure you have, but just to double check, are you using a URL like my example below? Just add /kiosk to the end. Also you could create a specific userID and perhaps specify to hide the sidebar as the default? The space issue is definitely what the old code did, its covered by adding a line specified in the configuration.yaml

http://192.168.0.24:8123/lovelace/20/kiosk

Example in ui-lovelace.yaml

`
resources:

• url: /local/my-custom-card.js
  type: js
• url: /local/my-webfont.css
  type: css
• url: /local/kiosk.js
  type: js
  `

Thanks. Just to be clear, I'm using the kiosk tag at the end of the URL. And when I use the code provided, it hides the sidebar tabs and also the header (though the latter is replaced by space), which I understand to be the expected behavior. What I'm trying to do here is hide the sidebar but NOT hide the header, which I need mainly so as not to lose access to the header tabs that will allow access to multiple views under a single dashboard. I was able to make that happen by changing the style.display from "none" to "block," but as you can see from the first screen shot, while I recover the header, there's white space to the left of it. My goal is to make it come up like the second screen shot.

Ah, you just need to set the “hide sidebar” option in the user configuration and stay out of kiosk mode then. best regards, Justin

…

On 15 Sep 2020, at 14:26, wheindl ***@***.***> wrote: @wheindl commented on this gist. Thanks. Just to be clear, I'm using the kiosk tag at the end of the URL. And when I use the code provided, it hides the sidebar tabs and also the header (though the latter is replaced by space), which I understand to be the expected behavior. What I'm trying to do here is hide the sidebar but NOT hide the header, which I need mainly so as not to lose access to the header tabs that will allow access to multiple views under a single dashboard. I was able to make that happen by changing the style.display from "none" to "block," but as you can see from the first screen shot, while I recover the header, there's white space to the left of it. My goal is to make it come up like the second screen shot. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/c8288df960e7f59e82c12d14de26fde8#gistcomment-3454916>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIR3TTYBYZHC7C4ZOAIZ3NLSF5TPNANCNFSM4L2QQLLA>.

Now that's an idea I haven't thought of before. I've tried it, and it works (depending on one's preferences) as follows:

1. Hide the sidebar in the secondary HA instance, show the sidebar in the primary HA instance. I can add the web URL to a Lovelace dashboard in the secondary HA instance, as a panel-width web page in a Lovelace dashboard in the primary HA instance. It displays perfectly in the primary HA instance (though with the second header... not a problem if it's needed to get access to multiple view tabs). (An odd side effect is that I get four narrower columns despite the sidebar being present in the primary instance. I'm not sure if there's a way around this.)

2. Hide the sidebar in both instances (needed if I want to be able to make this work in both directions). As I get more used to the HA user interface, I'll probably be comfortable with this.

I am thinking that this is a pretty elegant way to manage multiple instances of HA (e.g. two homes), and manage both from a single user interface... much easier than MQTT, Remote Homeassistant, and other solutions. It has the added benefit that I can build and maintain a single Lovelace dashboard that can be used (without needing to be duplicated) on both instances.

Thank you again for your help with this.

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