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

OK, your URL is fine. Here are the important lies in the ui-lovelace.yaml:

Make sure the file you have downloaded is the latest kiosk.js file and appears in the www directory. I have attached the correct version to use - just delete the jpg extension!

Under the resources heading it should look something like this, make sure you don't have two resources headings! The first two are form my config, the last one is the one you should add. My resource heading is just under the "dark mode" section that sets the default colours for the UI.

#Include external resources
resources:

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

Next make sure your browser zoom is correct, try changing it.

Finally

REBOOT THE SERVER! Very important, especially if you've not got anything in the www directory (parent is config)

Result! that worked perfectly. Another problem solved.

Thanks a lot for you help
Cheers
Jon

Jon,

great news! It took me a bit of fiddling, but once done it works perfectly! Glad to have been some help.

Justin.

Here is a fix for the "black bar on top". Add it to kiosk.js

            const content_container = home_assistant_main.shadowRoot
                .querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot
                .querySelector("hui-root").shadowRoot
                .querySelector("ha-app-layout").shadowRoot
                .querySelector("#contentContainer").style.paddingTop = "0px";

Hi G8YTZ do you know if it is still working? followed your instructions but cannot get it to work

version: Home Assistant 0.112.3

hope you dont mind me asking

Andrew

Hi G8YTZ do you know if it is still working? followed your instructions but cannot get it to work

version: Home Assistant 0.112.3

hope you dont mind me asking

Andrew

Hi Andrew, Yes, the kiosk mode works perfectly for me. You have to add /kiosk at the end of the url like this:

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

Remember also to put the browser into full screen mode.

Justin.

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';

        const content_container = home_assistant_main.shadowRoot
              .querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot
              .querySelector("hui-root").shadowRoot
              .querySelector("ha-app-layout").shadowRoot
              .querySelector("#contentContainer").style.paddingTop = "0px";
        
        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);

}

`

Thank you Justin for replying. I must be missing something...doh I have put the .jpg (renamed to kiosk.js) that you uploaded into the folder /config/www and added: (only entry in my yaml) #Include external resources resources: url: /local/kiosk.js type: js to my /config/ui-lovelace.yaml driving me mad!!!! Thank you

…

------ Original Message ------ From: "G8YTZ" <[email protected]> To: "corrafig" <[email protected]> Cc: "Doddsie193" <[email protected]>; "Comment" <[email protected]>

Sent: 09/07/2020 18:24:44 Subject: Re: corrafig/Readme.md @G8YTZ commented on this gist. -------------------------------------------------------------------------------- >Hi G8YTZ do you know if it is still working? followed your >instructions but cannot get it to work > >version: Home Assistant 0.112.3 > >hope you dont mind me asking > >Andrew > Hi Andrew, Yes, the kiosk mode works perfectly for me. You have to add /kiosk at the end of the url like this: http://192.168.0.24:8123/lovelace/20/kiosk Remember also to put the browser into full screen mode. Justin. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/c8288df960e7f59e82c12d14de26fde8#gistcomment-3369949>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQHMFSJUEZEPSK4NX2CZK2DR2X4NZANCNFSM4L2QQLLA>.

It needs to be the code, not a jpg!

If you like I can e-mail you my file.

rename this file to .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); } it was has been added as kiosk.js thanks for helping Andrew

…

------ Original Message ------ From: "G8YTZ" <[email protected]> To: "corrafig" <[email protected]> Cc: "Doddsie193" <[email protected]>; "Mention" <[email protected]>

Sent: 09/07/2020 19:30:03 Subject: Re: corrafig/Readme.md @G8YTZ commented on this gist. -------------------------------------------------------------------------------- kiosk <https://user-images.githubusercontent.com/35895759/87077092-84224c80-c21a-11ea-9e5b-680c42d0bb55.jpg> rename this file to .js — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/c8288df960e7f59e82c12d14de26fde8#gistcomment-3370036>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQHMFSPBG2QYSDWYXO3SLVLR2YECXANCNFSM4L2QQLLA>.

Justin

have attached 2 images - do you see a problem

Much appreciated

bw
Andrew

Move the 'resources:' section from ui-lovelace.yaml to configuration.yaml
---configuration.yaml---
.........
lovelace:
mode: yaml
resources:
- url: /local/kiosk.js
type: js
.........

Thanks for writing this. I have found what I think is a very interesting use case for this, which is as an alternate solution to having two HA instances supporting two different homes (something I'm trying to set up now). I've tried Remote Homeassistant, but haven't been able to get that to work. So I had the bright idea of adding a Lovelace dashboard on one instance (e.g. main home), that brought up a Lovelace dashboard in the other instance (e.g. vacation home). I did this by creating a Lovelace dashboard, and adding a web page in panel view, pointing to the URL of the intended Lovelace dashboard in the other instance.

This works; but at the expense of having the Lovelace tabs (left-hand column) appear twice, and the header row appear twice. Kiosk.js resolves both. (A key here is that it needs to be installed on the HA instance being called, not the HA instance doing the calling.)

However, there's a limitation, which is that, by cutting off the header, one can't access additional views that are part of the same Lovelace dashboard. I'd prefer to remove only the Lovelace tabs (left column) while keeping the header row (which isn't that bothersome, and allows access to additional views on the dashboard). I've tried the "show_tabs" parameter (not being sure whether this was intended to show the Lovelace tabs on the left, or the header and views on the top) - for what it's worth, it doesn't seem to have any effect.

Is there a way to modify the script so that it would show the header and views, while suppressing the column of tabs on the left? That would allow this to work as a simple solution to having a single view that could show information from multiple HA instances. (Not to mention making the kiosk approach more versatile for other uses, e.g. by allowing for the possibility of a kiosk view that could present more than one view, without exposing the whole Homeassistant configuration.)

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 <[email protected]> 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