Home Assistant dashboard:
on a tablet in Kiosk mode
With Fully Kiosk Browser
Home Assistant has multiple ways to show you the dashboard.
It has an Android native app which can be used on an Android tablet or phone, or you can browse to the frontend on any device with a browser.
In all these scenarios, you see all Home Assistant side and top menu items, you can edit all screens and see the browser with its url.
If you want to show only the content of a single dashboard in fullscreen, then you need to define this page in Kiosk mode.
Here you can read how to configure this.
Example of a Home Assistant dashboard presented on a tablet.
Table of Contents
- What is Kiosk mode?
- Set Home Assistant in Kiosk mode
- Set a tablet in Kiosk mode
- Configure Fully Kiosk Browser
- Create a tablet dashboard
What is Kiosk mode?
A kiosk is a standalone computer with a touchscreen (also like a tablet) which runs a single website.
It has only limited functionality.
An example of a kiosk is to order a meal in a fast-food restaurant.
This is in the background just a website or application with payment functionality attached to it.
When it’s in a public place, it’s also restricted, without access to the rest of the computer or browser.
In the scope of Home Assistant, we want to have access to a single overview dashboard without menu items.
Set Home Assistant in Kiosk mode
By default, you only want to show a single page on the tablet without the default toolbars to navigate to other dashboards.
Hide side toolbar
It’s a setting for the user to hide the side menu by default.
Select in the side toolbar the last item, the current logged-in user.
This shows a list of settings and one of them is Always hide the sidebar.
The best way is to create a custom user for your tablet and enable the feature to hide the sidebar. Use on your desktop and phone a different user to still show here all the default menu items.
Hide top toolbar
We want to hide this top menu by default. This can be achieved with the integration kiosk-mode.
Install the kiosk-mode integration via this button
Once’s installed some dashboard properties has to be set in the raw dashboard editor.
To set these properties, select the three dots in the top right corner of the dashboard in edit-mode and select Raw configuration editor.
See all possible configuration parameters at https://github.com/NemesisRE/kiosk-mode
To hide the top bar, only define hide_header: true is enough.
# Sourcecode by vdbrink.github.io
# Raw configuration editor
kiosk_mode:
hide_header: true
views:
...
To show the top toolbar again, add ?disable_km= to the url.
Swipe to other dashboard view
It’s possible if you still want to swipe left/right to go to other defined views on the same dashboard without using the extra top toolbar.
With the HACS integration Swipe Navigation
Repo: https://github.com/zanna-37/hass-swipe-navigation
Install this integration via this button in your own HA instance
Set a tablet in Kiosk mode
To show a dashboard on a tablet, you can open a browser and go to the Home Assistant dashboard url and have this as dashboard. The downside is that you lose a lot of space on your screen to the OS- and browser controls. Better is to show only the content of the page in fullscreen.
Fullscreen browser
Browsers does also support kiosk mode by them self. From a single website, you can create a (Progressive Web) App from every website which hides the browser menus and url.
In Chrome, open the page you want to convert to a single app.
Go to the menu, select Cast, save and share, then select Install page as app....
How to create in Chrome an app from a single page.
Now, you only have a small topbar.
And even this can be removed by choosing the Full screen option.
Page as app in fullscreen
This app can also be cast to a TV!
Android tablet
If you want to show a page in fullscreen on an Android tablet, the app Fully Kiosk Browser can do this (and much more usefull things).
There is a free version with a watermark and has limited functionality. For € 7,90 + VAT you can buy an unlimited lifetime single pc license.
It’s full of features, I use these:
- Define a url to load on startup:
- Automatically load the latest state of the page on start up.
- Light detection via the camera:
- Disable the screen if the room is completely dark.
- Nearby detection:
- Enable the screen when someone is nearby.
- Remote screen on/off via an API call:
- Enable the screen when someone enters the room.
- Disable the screen at a certain time or without presence.
- Monitor the battery level:
- Control a smart socket to load only the battery from 20 to 80%.
It has tons of more features!
See here the full list of features.
iOS iPad tablet
For the iPad, the app Kiosker: Fullscreen Web Kiosk can be used to define a page as a single page to run in kiosk mode.
Do you have better ways for iOS? Please let me know!
Configure Fully Kiosk Browser
The Android app Fully Kiosk Browser can be used to control the tablet from remote.
Enable remote admin
Auto screen on
With the API GET call http://192.168.1.x:2323/?cmd=screenOn&password=<password>
is it possible to turn the screen on.
Auto screen off
With the API GET call http://192.168.1.x:2323/?cmd=screenOff&password=<password>
is it possible to turn the screen off.
Only charge tablet battery when needed
I have a smart plug connected to my tablet. To avoid damaging the battery I only charge it when needed. If the battery level becomes lower than 15%, it will charge it until it’s at least 80% and then turn the power off again. Now it’s always charged with enough power, but not all day long charging.
Fully Kiosk can push tablet and other Kiosk state data to the MQTT topic fully/deviceInfo/<hash>
one of those properties is batteryLevel, based on this value I trigger an automation to control the smart socket to charge the tablet.
Create a tablet dashboard
Before you start with your dashboard ask yourself the next questions:
- Horizontal or vertical?
- How many data do you want to show, what resolution do you need/have?
- Two or three columns?
- Do you want to show data conditional?
- Which data do you want to show?
Or continue to see also more examples.
What’s on my dashboard
Basic elements
This screenshot is an interactive, clickable image of my dashboard. You can click on a dashboard element and you get redirected to the card details.
Clickable dashboard: each element is linked to the corresponding code
Optional elements
On my dashboard I also have elements which are by default hidden and only visible when it’s relevant.
Optional elements are:
- Rain prediction graph, only if rain is expected the upcoming hours
- Weather alert text, only if there is a weather alarm
- Camera stream, only if someone is detected at the front door
- Mushrooms:
- Bigger trash can icon, if tomorrow is bin day
- CO2 incorrect
- Rain amount fallen
- Nice to sit outside
Clickable dashboard: each element is linked to the corresponding code
YAML how to make elements conditional
For each condition you need a sensor with a boolean state, which is true when the element should be visible and false when it should be hidden. If this doesn’t exist yet, you can create this with a template binary sensor. I have a page with many examples of how to create these sensors: Home Assistant templates.
This is how you can define a conditional Mushroom element.
You need the boolean sensor waste_tomorrow for this condition.
# Sourcecode by vdbrink.github.io
# Dashboard card code
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: sensor.waste_tomorrow
state: "true"
chip:
type: template
entity: sensor.cyclus_gft
icon: mdi:trash-can-outline
content: ""
This is how you can define a conditional camera stream element.
You need the boolean sensor frontdoor_detection_mode for this condition.
# Sourcecode by vdbrink.github.io
# Dashboard card code
- type: conditional
conditions:
- condition: state
entity: input_boolean.frontdoor_detection_mode
state: "on"
card:
type: custom:webrtc-camera
url: rtsp://....
See also my other examples of dashboard elements.