maykar / kiosk-mode Goto Github PK

When hiding just the header, with the following config

kiosk_mode:
  hide_header: true

this also hides the menu button on mobile or if "Always hide the sidebar" option is enabled in the profile, like this:

This prevents the sidebar from being able to be displayed, as this relies on the menu button.

The menu button is not hidden when on desktop browsers without the "Always hide the sidebar" option enabled in the profile, for example:

The menu button should not be hidden if the sidebar is not configured to be hidden.

Great to see a replacement voor custom header!! In its basics it looks great. I have configured it as follows in a yaml file I use as dashboard.

views:
  - panel: true
    path: default_view?kiosk

With customer header I could actually set different modes per e.g. user, like this:

custom_header:
  kiosk_mode: false
  exceptions:
    - conditions:
        user: Wallpanel
      config:
        kiosk_mode: true

I would love to have my dashboard use kiosk mode only for Wallpanel user.
Since I'm using yaml mode, creating a new dashboard doesn't make sense, as I will refer to one and the same yaml file for both dashboards.

Can I write some condition check in the dashboard yaml to create the proper view path based on the logged in user?

Thanks a lot for your help!

Hi,
It all says it all in the title. I use the sidebar
https://github.com/DBuit/sidebar-card
With Customer-header, I didn't have the problem. Now the whole page seems to go up a notch.

I would like to use this addon in a project but since there is no license attached I (legally speaking) can't use any of this code.

Would you be so kind and add one to this repo?
I guessing that since you provided install instruction it is meant to be used by other people. :)

Hi, is there anyway I can implement a button to toggle the kiosk mode on lovelace.
I am thinking to create an input.boolean and toogle using template.

Here is my code which doesn't work :(

kiosk_mode:
  kiosk: >-
    {% if is_state('input_boolean.kiosk_mode', 'on') %}
      true
    {% else %}
      false
    {% endif %}

Any tips for me?

Still have troubles hiding part of the UI .... Page loads in less than 15s with 1.7.0 but setting doesn't apply in non-admin

Error:

Lovelace config not found, continuing with default configuration.

Config is correct as reverting to 1.6.5 hides stuff correctly

kiosk_mode:
  admin_settings:
    hide_header: false
    hide_sidebar: false
    hide_overflow: false
  non_admin_settings:
    hide_header: false
    hide_sidebar: true
    hide_overflow: true

This is working nicely with my tablet, but I would need a fullscreen mode option. For example adding ?kiosk&fullscreen would execute browser in full screen mode.

var elem = document.documentElement;

/* View in fullscreen /
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { / Safari /
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { / IE11 */
elem.msRequestFullscreen();
}
}

I have been using the now discontinued Custom Header project and the feature I used there was to hide the Title but leave the Navigation header. I have multiple dashboards views that I switch between on my wall-mounted display and that option enabled navigation but saved one line of screen space.

Please consider replicating this mode in your project.

When a lovelace dashboard has 2 tabs that you want to be able to access you can currently hide just the sidebar.

This is nice but leaves the help / menu in the top right visible, it would be nice if there was an option to hide this as well.
Note that when in kiosk mode it almost never makes sense to show this, so one could argue that this should always be hidden if the sidebar is hidden.

I tried putting the "path: kiosk" into the ui-lovelace and my other dashboards.yaml file, but it doesnt hide.
Tried putting it in the "dashboard pages" like "home" and my other pages, doesnt work either

When i put ?kiosk in the url, it does work..

Question: will path: hide_header also work?

I've updated version 1.51 but it doesn't work.
I also cancelled the cache as described.
Back to 1.49 and everything came back perfect.
Sorry for my English
Walter

this are my settings
kiosk_mode:
hide_header: true
ignore_mobile_settings: true

in others just have this.
kiosk_mode:
kiosk: true

And this are the logs
Logger: frontend.js.latest.202106030
Source: components/system_log/init.py:190
First occurred: 12:25:47 AM (7 occurrences)
Last logged: 12:28:42 AM

http://xxx.xxx.x.x:8123/hacsfiles/kiosk-mode/kiosk-mode.js?hacstag=303101606166:49:122 ReferenceError: regeneratorRuntime is not defined
http://xxx.xxx.x.x:8123/hacsfiles/kiosk-mode/kiosk-mode.js?hacstag=303101606166:49:144 ReferenceError: Can't find variable: regeneratorRuntime

Running all Apple devices of all ages, the all stopped hiding headers and sidebars. Before it was just the older ones having problems

I'm using "Trusted networks" to allow my TV via cast to show the dashboard, but I can't dismiss the "Do you want to stay logged in" prompt in the bottom right-hand corner.

Would you accept a PR to add a feature to hide that as well?

Getting this error:
2020-12-09 12:56:29 ERROR (MainThread) [frontend.js.latest.202011112] https://xxx.duckdns.org/hacsfiles/kiosk-mode/kiosk-mode.js:18:15 Uncaught TypeError: Cannot read property 'config' of undefined.

Kiosk Mode 1.4.7
Info:
**System Health

Home Assistant Core Integration

version: 0.118.5
installation_type: Home Assistant OS
dev: false
hassio: true
docker: true
virtualenv: false
python_version: 3.8.6
os_name: Linux
os_version: 4.19.127-v7l
arch: armv7l
timezone: America/xxx

Home Assistant Cloud

logged_in: false
can_reach_cert_server: ok
can_reach_cloud_auth: ok
can_reach_cloud: ok

Hass.io

host_os: HassOS 4.17
update_channel: stable
supervisor_version: 2020.12.6
docker_version: 19.03.12
disk_total: 28.7 GB
disk_used: 17.7 GB
healthy: true
supported: true
board: rpi4
supervisor_api: ok
version_api: ok
installed_addons: File editor (5.2.0), Samba share (9.3.0), Duck DNS (1.12.4), NGINX Home Assistant SSL proxy (3.0.1), Let's Encrypt (4.11.0), SSH & Web Terminal (7.8.0), Log Viewer (0.9.1)

Lovelace

dashboards: 3
mode: yaml
views: 14
resources: 12**

edit: At first thought it (this error) hung my screen; but it didn't was another issue unrelated.

This error randomly will appear and upon refresh of panel does not other problems.

Hi all,

I have a picture element showing my floor plan, and I'd like a button to toggle kiosk mode. The following rewrite the URL but it does nothing:

  - type: icon
    icon: 'mdi:home'
    tap_action:
      action: navigate
      navigation_path: /lovelace/plan?kiosk
    style:
      right: 10%
      bottom: 10%

Any idea? And then it does not even support "toggling". It's for a raspberry pi touchscreen without keyboard, so when I go to kiosk mode I'm kind of locked on the floor plan.

Hi,
I have setup the kiosk-mode on mine dashboard. It work well when I load the dashboard as startup page of Fully Kiosk Browser.
The issue appear when from a button I manage the navigate action to a different dashboard.
In this case the header bar appear at the top.

Here an example of mine button that recall the navigate action:

      - type: icon
        icon: mdi:cog-outline
        ########################################################################
        title: Settings
        ########################################################################
        style:
          top: 75%
          left: 15%
          color: rgb(255, 255, 255)
          opacity: 0.1
          padding: 0.8vw
          --mdc-icon-size: 4vw
        tap_action:
          action: navigate
          navigation_path: /lovelace-settings?kiosk

If after loaded the dashboard I refresh the browser the header will be hidden correctly.

Many thanks for your help
Alberto

Hi, I'm using HA 0.118.3 on a VM an installed Kiosk-Mode 1.4.7 via HACS 1.6.2. The installation seemed to be successfull, as the ressource is listed unter "Configuration" > "Lovelace Dashboards" > "Resources" and the files are present on the disk in the right place.

Nevertheless the HA logs say "Setup failed for kiosk_mode: Integration not found." after I restarted my HA. And the config check says "Component error: kiosk_mode - Integration 'kiosk_mode' not found."

Can you add a swipe to move between tabs when the header is hidden.

hello i have my ui set up in buttons navigating to pages (path: devices, path: rooms etc) your instructions say add path: kiosk but i dont work when you have a path already, also swapping between lovelace ui's drops ?kiosk even though i have added this to the navigation link. if i hit refresh it will go into kiosk but not working for me as i can see.

thanks chris

I have a few page in the menu, and a few of them should be available in kiosk mode. is it possible?

Hi!
I am using the Axis integration to display the video stream from my two cameras.
When "camera_view: live" is enabled, static picture is displayed in kiosk mode. In standard mode, I see a normal video stream.

cards:
  - type: picture-entity
    entity: camera.m0
    camera_view: live
    show_state: false
    show_name: false

I'm currently working on a PR that adds uglify.js to this. I'm wondering why instead of

function getSidebarElem() {

we use
https://github.com/matt8707/kiosk-mode/blob/039fc16d53fbadcff3201e9008c988ab4986cdcf/kiosk-mode.js#L18

I have 5 tablets in my house, all running FKB and using Kiosk mode.

One tablet would show 4 columns, while the other 4 would only show 3 columns.

The way to fix was to take these steps:
Take all 4 of the "borken" tablets out of kiosk mode (I have it set by user)
Go to each tablet and minimize the sidebar.
Put all 4 of the tablets back into kiosk mode, and then it would show all 4 columns.

It is as if there is some remnant left that only allows 3 columns, BUT there is no space taken up. All 3 columns still span the whole width of the tablet.

I put this in the RAW configuration
kiosk_mode:
user_settings:
- users:
- "guest"
- "guest01demo"
hide_sidebar: true

My question is will guest users be able to bypass the "kiosk_mode" using Chrome inspect tools(F12) or anything similar?

As of today kiosk-mode started to act very strange. I hit reload (ctrl+r) when I was working on my UI in YAML (like I'v been doing for the past months) and suddenly the sidebar and header were back. I use applicationize.me. So thought, I'll delete the extension and create a new one perhaps something is just bugged.

The new one worked, but as soon as I hit reload it showed the header and sidebar yet again. Now this is the stranger part: when I go through my browder (Edge chromium) and open the dashboard, it's in kiosk mode. When I hit ctrl+r to reload the page, the header and and sidebar are back again. When I change dashboards or reload, it stays that way (still visbile). BUT when I close the tab entirely and open my instance again and open the dashboard: again in kiosk mode. Reloading results in header and sidebar to return again. Closing tab again and opening the dashboard, reloads it again in kiosk mode (this I can repeat on and on).

This same behavior happens on my Samsung tablet opening this dashboard. This had worked fine untill today. I tried all the versions in HACS right now and all show the same issue suddenly. Just to clarify, I use this code in mn lovelace view YAML (dashboard)

kiosk_mode:
  kiosk: true

Before I used the ?kiosk entry after the url for my tablet mode dashboard (was the file from a Github user which mattias later used and put on HACS). And I had the theme setting to disable the header (also for my smartphone dashboard)

  card-mod-root: |
    app-header {
      display: none;
    }

Then this option came about and tried this, and deleted the theme variable. Which worked fine up untill today.

I also have a smartphone dashboard where I disabled the header:

kiosk_mode:
  hide_header: true

This shows the exact same behaviour, also on my iPhone. But there the header disappears after a pull to refresh. If I do it a few times, the header is sometimes back. This looks a lot (a LOT) like an infamous bug in Custom Header that always kept coming back where the header was reset.

Then I used the plugin somewhere from Github with the ?kiosk add behind the url for my tablets. Right now I have enabled the theme line again and all works again.

I don't know what causes this, but there definitely is an issue somewhere. For now I have enabled the theme variable and have hidden the sidebar through options. This is not a big issue for me, since I disable the header on all my dashboards anyway and I don't see the sidebar now. But perhaps others experience this as well.

version 1.6.5 works no problem on the latest home assistant build
1.6.6. does not appear to working at all side bar and top bar fully visible

Does not work in Fully Kiosk browser, free or pro version.
I have cleared cache and even uninstalled, and tried on a new device as well.
Tried both enabled in .yaml and adding ?kiosk to url.

Is there any way to temporarily disable kiosk-mode by moving the mouse to the left/top edge of Lovelace? Or, maybe a keyboard hotkey? If not, perhaps you might consider this as a feature request?

I am sorry for posting this here but I don't know where else to ask it. I installed kiosk-mode through HACS and it looks like it's working (I tested with the ?kiosk). I have absolutely no idea which configuration file I am supposed to edit. Where that file is and if that means I have to configure Lovelace with YAML only. I am fairly new to Home Assistant so I don't have very much experience with Lovelace.

These two directives are where I'm stuck:

Config is placed in the root of your Lovelace config: kiosk_mode: should not be indented & is per dashboard.
If you want the same settings on other dashboards you'll need to repeat the config on those dashboards as well.

Is there more documentation that explains these in more detail? I've already spent an hour or so trying to find the answer myself but have had no success.

I appreciate the help!

It is possible to add a hide_menu_button option to block ui modification?

Thank you

Hi!

I'm new to home assistant and just making my first steps. I tried to install kiosk-mode with HACS but i can't make it work. I repeated all the steps over and over agian

1. Install using HACS

2. edit configuration.yaml

What am I missing?

I am having issues multiple issues with this addon. No matter what, the side bar remains. The top bar is iffy and works sometimes.

Supervisor Version 249
Operating System HassOS 4.15
Home Assistant 0.116.4

1. Sometimes only the top bar is hidden, but the page never loads.

2. Sometimes only the top bar is hidden, but it leaves a white bar at the top.

3. When I shrink or expand the sidebar, the white bar at the top goes away.

Hi there. I've been running kiosk_mode on an iPad Mini 2 pretty flawlessly for about 3 weeks and today it's started to act up. upon loading the HA app, it will display properly with sidebar and header hidden, but once Lovelace refreshes (for whatever reason) both the sidebar and header will reappear and it's necessary to force quit the app and reopen to get kiosk_mode to reinitialise (only for it to break again when lovelace refreshes).

I updated to 2021.6 which I think may be the problem... however, i've also just switched over to a new router but I don't see how that would affect things. Anyone experienced anything similar? I have kiosk_mode set by user, if that makes any difference?

I cannot seem to find a good way to be able to log out while the sidebar is hidden.

Add in config options to be set in lovelace. This will help solve some issues related to the fact that the companion apps are unable to use query strings and be helpful in general.

From v1.6.6 and onwards Kiosk mode no longer hides sidebar or header.

Visited from Chrom (incognito):

• Console shows 'version 1.6.7'
• the only warning I see is
  kiosk-mode.js?hacstag=303101606167:20 Lovelace config not found, continuing with default configuration.
• Config

kiosk_mode:
  admin_settings:
    ignore_entity_settings: true
  non_admin_settings:
    hide_sidebar: true
    hide_header: true
    hide_overflow: true

• Devices affected are Windows (Chrome) and iPads (2x) iOS 14

Interestingly enough 1.6.5 shows following error:

kiosk-mode.js?hacstag=303101606165:37 Uncaught (in promise) ReferenceError: regeneratorRuntime is not defined
    at v (kiosk-mode.js?hacstag=303101606165:37)
    at k (kiosk-mode.js?hacstag=303101606165:37)
    at kiosk-mode.js?hacstag=303101606165:44
v @ kiosk-mode.js?hacstag=303101606165:37
k @ kiosk-mode.js?hacstag=303101606165:37
(anonymous) @ kiosk-mode.js?hacstag=303101606165:44
Promise.then (async)
(anonymous) @ kiosk-mode.js?hacstag=303101606165:43

Hi!

I use an iPad in wallmount mode using this JS module.

However, even if all cards fit on the screen, the browser still shows this rubberband effect if you pull down the page.

I have found this snippet to disable it:
https://gist.github.com/amolk/1599412

Would it be possible to integrate this as well?

Every ~3 out of 4 times I load the HASS UI in Chrome browser, I get the error as seen in the attached screenshot and of course the kiosk mode is not working. However, using v1.2.2 seems like the issue is not manifesting.

LE: v1.2.2 only has a slightly better loading frequency but the issue is still there.

I seem to have something going wrong, pressing f12 in Chrome gives me the following:

Uncaught (in promise) ReferenceError: regeneratorRuntime is not defined at v (kiosk-mode.js:37) at k (kiosk-mode.js:37) at kiosk-mode.js:44

Please let me know what info you need to diagnose and I will send it, this is on latest HomeAssistant build (I keep everything up to date)

most of the time it doesnt work for me.
I get an error in the console:

Uncaught TypeError: Cannot read property 'config' of undefined
    at m (kiosk-mode.js:17)
    at u (kiosk-mode.js:21)
    at kiosk-mode.js:35

which is raised from kiosk_mode.js line 8 return ll && ll.lovelace.config.kiosk_mode ? ll.lovelace.config.kiosk_mode : {};

I had a breakpoint in that line and it seems like the ll.lovelace object is undefined and only being initialized after the kiosk_mode loads.

When I click Ctrl+F5 it works just fine. But, when I only click F5 or when I enter the site it doesnt work

Hi,
since v1.5.6 (I haven't updated a few versions ago), I get this error in logs:

hacsfiles/kiosk-mode/kiosk-mode.js:36:23 Uncaught TypeError: Cannot read property 'length' of undefined

I tried to install a previous version (v1.5.2 it's the oldest HACS allows me to install) but the error still it's there.

Thanks.

I was using the "Custom-Header" component, until it has been discontinued by the developer. I have installed this addon from HACS, but I get the following error.

Uncaught TypeError: home_assistant_main.shadowRoot.querySelector(...).shadowRoot.querySelector(...) is null
    <anonymous> https://XX/hacsfiles/kiosk-mode/kiosk-mode.js:7

Hi Guys!

First, thank you very much for your contribution.

I'm failing to use this since this won't work stable at all. Looks like, for some reason, the MutationObserver are not waiting for rendering.

Weird enough, this work flawlessly when Debugger is opened.

Tested an replicated on FF and Chrome.

Hi.
Firstly, great work and worked first time for me and does exactly what i need.

However, how can I get access to the lovelace raw editor after I've hidden the title bar which contains the three dots (dropdown menu)?
The title bar is hidden, but I still need to access the raw editor. How can I get access back?

Many thanks and sorry for the total n00b question.

So this is the issue in the picture.
The main container background is an image. The sidebar background is a css code.

For whatever reason this does not seem to work. When inspecting with developer tools the white space is not a seperate part, its just the main view as is everything else.

Any help is much appreciated.

Logfile has several instances of:
2020-12-20 12:55:18 ERROR (MainThread) [frontend.js.latest.202012120] https:/*****.ui.nabu.casa/hacsfiles/kiosk-mode/kiosk-mode.js:18:14 TypeError: undefined is not an object (evaluating 'e.lovelace.config')

kiosk_mode version 1.4.7
Home Assistant version 2020.12.01

Hello,
It seems that kiosk-mode is preventing the android app from showing the frontend. The issue is only there in version 1.4.9, and everything works as intended when disabling the module in HA resources.

I'm new to this, so any guidance with troubleshooting is appreciated.

Thanks for this special plugin.

I build the interface through the homeassisteint ui. Is there a way to add kiosk mode?

Hi
Is it possible to hide the 3 dots (right side of the header) the Help for mobile view

Thanks

Hi there! First of all would like to thank you for your work. This component is great, I was using custom header to do the same thing and I was really bummed when it was archived, I´m really happy you made an alternative.

I just have one request: Would it be possible to hide the help button from the header?

I use kiosk mode to hide the side bar and only display the header with several tabs and having the help button taking up screen space is a real nuisance.

Really hope this is possible! Thanks a lot!