But why? I mean thats a website. Ok there is something to do for the tablet, but for example a game is much more work and they are running fine?
Is your tablet running fine? That would be my next attempt.
I mean my tablet is running fine but I definitely notice screen stutter. home-assistant frontend is pretty heavy, it used to be worse pre 0.109, that and cheapo android tablets…
Changed brwoser from wallpanel to fullykiosk, its running better. Seems that it is running on the edge 
But now the next problem: browser_mod update.
hold_action:
action: fire-dom-event
browser_mod:
command: popup
title: '[[[ return entity.attributes.friendly_name ]]]'
card:
type: entities
entities:
- type: custom:light-popup-card
entity: '[[[ return entity.entity_id ]]]'
icon: none
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
...
copied exactly the changes from your github. But no popup is working. Did I miss something?
Cleared cache? Indentation between hold_action and action? Errors?
Cache is cleared, intendation is correct (code above has a copy paste mistake), no errors shown.
hold_action:
action: fire-dom-event
browser_mod:
command: popup
title: '[[[ return entity.attributes.friendly_name ]]]'
card:
type: entities
entities:
- type: custom:light-popup-card
entity: '[[[ return entity.entity_id ]]]'
icon: none
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
toast is working. popup and more-info are not working.
€: missed the update for button-card. Had 3.4.1 running…
For some reason, I am not able to hit the buttons to toggle on and toggle off. I have to press and hold and slide the brightness up to turn on. How would I enable toggle on and off from hitting the buttons?
Also, how would I configure basic lights that do not offer brightness adjust or hue adjustments?
Hi, incredible job. Can you create a fast step-by-step guide to install your UI? I’m trying to figure out how to start 
Got this up an running, it is such a nice interface!
Only problem I’ve run into is getting the header bar to disapear and the sidebar?!
It’s not showing the clock as its hidden and just ruining the aesthetic.
I am not running fully kiosk, will be running in Chrome or Edge on a Win Tablet.
You have to set the theme to tablet in home assistant.
thomasloven just updated the card-mod. This need a little bit of rework to the code.
2 Likes
Ok done that and it helped with the sidebar, but the HA sidebar and top-bar are still showing, this normal?
Do you have kiosk mode installed?
Look at the original configuration file from Mattias.
The sibebar you can hide in your profile settings.
Can someone help me, how do i get the TV icon to work without input_boolean.
So i only have a on/off switch.
- type: custom:button-card
entity: switch.hub_tv_kijken
style:
top: 23.9%
left: 23.8%
width: 47.7%
custom_fields:
icon_tv: &icon_tv >
[[[ const boolean = states[entity.entity_id.replace(entity.entity_id.split('.')[0], 'input_boolean')].state;
const style = '<style>@keyframes animate_on{from{transform: scaleY(0);}to{transform: scaleY(1);}}.animate_on{animation: animate_on 1s; transform-origin: -100% 46%; animation-fill-mode: forwards;}@keyframes animate_off{from{transform: scaleY(1);}to{transform: scaleY(0);}}.animate_off{animation: animate_off 1s; transform-origin: -100% 46%; animation-fill-mode: forwards;}</style>';
const path = '<path d="M46 9.2v27.5H4.1V9.2H46m2.4-2.4H1.6v32.3h46.7c.1 0 .1-32.3.1-32.3zM11.9 43.2h26.3c.6 0 1.1-.4 1.1-1v-.3c0-.6-.4-1.1-1-1.1H11.9c-.6 0-1.1.4-1.1 1v.3a1.11 1.11 0 0 0 1.1 1.1z"/>';
const gradient = '<linearGradient id="A" gradientUnits="userSpaceOnUse" x1="5.401" y1="34.714" x2="43.817" y2="11.74"><stop offset="0" stop-color="#64acb7"/><stop offset="1" stop-color="#7fdbe9"/></linearGradient>';
if (entity.state === 'off' && boolean === 'off') { return `<svg viewBox="0 0 50 50"> ${style} ${gradient} <path class="animate_off" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
if (entity.state === 'on' && boolean === 'off') { return `<svg viewBox="0 0 50 50"> ${style} ${gradient} <path d="M2.9,8h44.3v29.9H2.9V8z" fill="#20262890"/><path class="animate_on" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
if (entity.state === 'on' && boolean === 'on') { return `<svg viewBox="0 0 50 50"> ${gradient} <path d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
else if (entity.state === 'off' && boolean === 'on') { return `<svg viewBox="0 0 50 50"> ${path} </svg>`; } ]]]
styles: &icon_tv_styles
custom_fields:
icon_tv:
[fill: "[[[ return entity.state === 'on' ? '#616161' : '#9da0a2'; ]]]",
top: 7%, left: 10.7%, width: 3.5vw, position: absolute]
template: ['base', 'loader']
No I don’t, I’ve removed all references to it, as will be running this on a Windows tablet, so can’t run kiosk mode unfortunately. (At least not yet).
It should just work as on and off. The input boolean just checks to see if the TV is on or off and updates the icon as appropriate.
You just need to change
entity: switch.hub_tv_kijken
to your TV entity.
Otherwise can remove the entity state checks, but you will only be left with the TV icon that is either on or off and it won’t change.
Thanks that sorted it.
Awesome adaptation 
. Can you please share the sources?
That won’t work. The switch.hub_tv_kijken is my entity.
I can’t figure out what i have to change to get the icon_tv to work. I only have a on/off switch.
When i use the original code from Mattias and change the entity i get a error. When i delete the triggers_update, tap_action and hold_action and the boolean part of the icon i get a error.
There is something i’m missing.
custom_fields:
icon_tv: >
[[[
const state = entity.state === 'on' ? 'animate_on' : 'animate_off';
const fill = entity.state === 'on' ? '#20262890' : 'none';
return `
<svg viewBox="0 0 50 50">
<style>
@keyframes animate_on {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
.animate_on {
animation: animate_on 1s;
transform-origin: -100% 46%;
animation-fill-mode: forwards;
}
@keyframes animate_off {
from {
transform: scaleY(1);
}
to {
transform: scaleY(0);
}
}
.animate_off {
animation: animate_off 1s;
transform-origin: -100% 46%;
animation-fill-mode: forwards;
}
</style>
<linearGradient id="A" gradientUnits="userSpaceOnUse" x1="5.401" y1="34.714" x2="43.817" y2="11.74">
<stop offset="0" stop-color="#64acb7"/>
<stop offset="1" stop-color="#7fdbe9"/>
</linearGradient>
<path d="M2.9,8h44.3v29.9H2.9V8z" fill="${fill}"/>
<path class="${state}" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/>
<path d="M46 9.2v27.5H4.1V9.2H46m2.4-2.4H1.6v32.3h46.7c.1 0 .1-32.3.1-32.3zM11.9 43.2h26.3c.6 0 1.1-.4 1.1-1v-.3c0-.6-.4-1.1-1-1.1H11.9c-.6 0-1.1.4-1.1 1v.3a1.11 1.11 0 0 0 1.1 1.1z"/>
</svg>
`;
]]]