From bd9e08c0648c1be6f4aaf7d9d526c8b50a4b7ac3 Mon Sep 17 00:00:00 2001 From: Ryan Meek <25127328+maykar@users.noreply.github.com> Date: Thu, 5 Nov 2020 17:14:48 -0500 Subject: [PATCH 1/2] Add Lovelace config method --- kiosk-mode.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/kiosk-mode.js b/kiosk-mode.js index a112e38..70fd313 100644 --- a/kiosk-mode.js +++ b/kiosk-mode.js @@ -1,11 +1,10 @@ -const ha = document.querySelector("home-assistant"); -const main = ha.shadowRoot.querySelector("home-assistant-main").shadowRoot; +const main = document.querySelector("home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot; const panel = main.querySelector("partial-panel-resolver"); const drawerLayout = main.querySelector("app-drawer-layout"); function getConfig() { const ll = main.querySelector("ha-panel-lovelace"); - return ll && ll.lovelace.config.kiosk_mode ? ll.lovelace.config.kiosk_mode : null; + return ll && ll.lovelace.config.kiosk_mode ? ll.lovelace.config.kiosk_mode : {}; } // Return true if any keyword is found in location. @@ -50,16 +49,18 @@ function kiosk_mode() { if (url.includes("disable_km")) return; // Retrieve localStorage values & query string options. - const hide_header = cacheAsBool("kmHeader") || locIncludes(["kiosk", "hide_header"]); - const hide_sidebar = cacheAsBool("kmSidebar") || locIncludes(["kiosk", "hide_sidebar"]); + let hide_header = cacheAsBool("kmHeader") || locIncludes(["kiosk", "hide_header"]); + let hide_sidebar = cacheAsBool("kmSidebar") || locIncludes(["kiosk", "hide_sidebar"]); const config = getConfig(); - if (config) { - const hass = ha.hass; - } + const queryStringsSet = hide_sidebar || hide_header; + + // Use config values only if config strings and cache aren't used. + hide_header = queryStringsSet ? hide_header : config.kiosk || config.hide_header; + hide_sidebar = queryStringsSet ? hide_sidebar : config.kiosk || config.hide_sidebar; // Only run if needed. - if (hide_sidebar || hide_header) { + if (queryStringsSet) { const lovelace = main.querySelector("ha-panel-lovelace"); const huiRoot = lovelace ? lovelace.shadowRoot.querySelector("hui-root").shadowRoot : null; From d83e2b86281f7b6badd4d89b498eaba6dccd2c30 Mon Sep 17 00:00:00 2001 From: Ryan Meek <25127328+maykar@users.noreply.github.com> Date: Thu, 5 Nov 2020 17:37:52 -0500 Subject: [PATCH 2/2] Update README.md --- README.md | 37 +++++++++++++++++++++++++------------ 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index fff44d9..b33f4ec 100644 --- a/README.md +++ b/README.md @@ -59,15 +59,6 @@ Add a query string such as `?kiosk` to the end of your URL: https://hass:8123/lovelace/default_view?kiosk ``` -**OR** name a dashboard path `kiosk` (currently using this option requires a refresh on the view) - -```yaml -views: - - title: Tablet - path: kiosk - -``` - ## Query Strings The query string options are: @@ -85,8 +76,28 @@ This works for all query strings except for the utility strings listed below. **Utility Query Strings** -* `?clear_cache` will clear all cached preferences -* `?disable_kiosk` will temporarily disable any modifications +* `?clear_km_cache` will clear all cached preferences +* `?disable_km` will temporarily disable any modifications + +## Configuration in Lovelace + +You can also set up kiosk-mode in your Lovelace config. + +* Query strings & cached options are always used first & if any are set on a device, the Lovelace config will be ignored. +* Config is placed in the root of your Lovelace config & is per dashboard. +* If you want the same settings on other dashboards you'll need to repeat the config on those dashboards as well. +* kisok-mode has 3 options: `kiosk`, `hide_header`, and `hide_sidebar`. Set any option to true to activate. +* `kiosk` sets both `hide_header` and `hide_sidebar` to true, so no need to set either of those if you set `kiosk: true`. + +**Example**
+*Note: `views:` is added in the example below to show what it means for the config to be in the root of your Lovelace configuration.* + +``` +kiosk_mode: + hide_header: true + +views: +``` ### Related @@ -95,4 +106,6 @@ This works for all query strings except for the utility strings listed below. * [KTibow/fullscreen-card](https://github.com/KTibow/fullscreen-card) - Make your Home Assistant browser fullscreen ### Credit -This is based on [ciotlosm's kiosk mode gist](https://gist.github.com/ciotlosm/1f09b330aa5bd5ea87b59f33609cc931) and includes features from [corrafig's fork](https://gist.github.com/corrafig/c8288df960e7f59e82c12d14de26fde8) as well as [maykar's Custom Header](https://github.com/maykar/custom-header/). +This was originally based on and inspired by [ciotlosm's kiosk mode gist](https://gist.github.com/ciotlosm/1f09b330aa5bd5ea87b59f33609cc931) and [corrafig's fork](https://gist.github.com/corrafig/c8288df960e7f59e82c12d14de26fde8) of the same gist. + +Big thank you to [matt8707](https://github.com/matt8707) for starting this project and allowing me to rewrite it and take over ownership.