Just started out with Home Assistant and this UI would look sick on my tablet. I tried to copy all the files in the repository to my HA installation folder but nothing happens. Guessing it’s not that simple…?
I understand I have to replace the entities with my own but I just want the interface to be up and running 
I mean the key name: and js template
name: >
[[[...
Check if you can get this service call working using browser_mod (media_player)
- service: media_player.play_media
data:
entity_id: media_player.tablet
media_content_id: /local/sound/on.m4a
media_content_type: music
That’s what I’m doing with button-card
tap_action:
ui_sound: |
[[[ if (entity.state === 'off' && states['switch.fullykiosk_screensaver'].state === 'off') {
hass.callService('media_player', 'play_media', {entity_id: 'media_player.tablet', media_content_id: '/local/sound/on.m4a', media_content_type: 'music'}); }
else if (entity.state === 'on' && states['switch.fullykiosk_screensaver'].state === 'off') {
hass.callService('media_player', 'play_media', {entity_id: 'media_player.tablet', media_content_id: '/local/sound/off.m4a', media_content_type: 'music'}); } ]]]
thank YOu mattias. It works know.
Hi Mattias,
First of all, congratulations for your work and for sharing it with the community. I love the interface and I would like to integrate it at home but I don’t know how to do it.
I copied the project to my root and I try to use my minimal configuration to make it work but it gives me failures.
In configuration.yaml I removed everything except resources and logger but when I started index.html it gave me errors.
Could you provide a guide to set a clean configuration?
I’m sorry for my clumsiness.
Thanks in advance
I’ve been asked to do a guide multiple times but I have no interest in making one since there’s simply too much to cover. The documentation is there for a reason too.
Cloning my whole configuration is just a bad idea. Copy the parts that you like, one at a time and go from there.
An old post, but how can we add the white border radius also added in the non-rgb buttons? Mine are slightly smaller than the rgb version currently. I am searching for the right placement of the CSS but can’t get it correct
The white border on the rgb made the button slightly larger so play around/remove the the last line --size: 4.4em !important;
Thanks.
We can’t add the hue bulb to the custom_icons.js file I think, because of the large setup? I tried but won’t get it to work. I want to re-use it in other cards also (so not only/actualy not at all with button card)
tx!
Note: The large icons are not designed to be viewed at small sizes as explained here.
https://material.io/design/iconography/system-icons.html#design-principles
Copy icon from button-card
[[[ const state = entity.state === 'on' ? 'animate' : null;
return `<svg viewBox="0 0 50 50"><style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
<path fill="#9da0a2" d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"/>
<path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"/></svg>`; ]]]
Remove everything that’s not svg and change viewBox to 24x24
<svg viewBox="0 0 24 24">
<path
d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"
/>
<path
d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"
/>
</svg>
Pretty sure the icon needs to be only one path so follow these steps
https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162…
# custom_icons.js
'hue':
'M13.4 22.9c0 .4-.2.4-.3.4h-2.3c-.1 0-.3-.1-.3-.4s.3-.4.3-.4h2.3c0 0 .3 0 .3.4zm1.2-3.2H9.3s-.4 0-.4.4.3.4.4.4h5.4c.1 0 .4 0 .4-.4-.1-.4-.5-.4-.5-.4zm0 1.4H9.3s-.4 0-.4.4.3.4.4.4h5.4c.1 0 .4 0 .4-.4-.1-.4-.5-.4-.5-.4zm0-2.7H9.3s-.4 0-.4.4.3.4.4.4h5.4c.1 0 .4 0 .4-.4s-.5-.4-.5-.4zM18.5 3C18.4.9 14.5.6 12.8.6h-1.6C9.5.7 5.5.9 5.5 3c0 .2 0 1.2 1 3.9 0 .1.1.4.3.5v.3c.2.4 1.6 3.4 1.5 8.9v.8s0 .3.5.3H15c.5 0 .5-.2.5-.3v-.8c0-5.5 1.3-8.5 1.5-8.9v-.3c.2-.2.3-.4.4-.5 1.2-2.7 1.1-3.6 1.1-3.9z',
In configuration.yaml append random number to resources and restart HA
url: '/local/custom_icons.js?v=25052001'
You’re amazing! thank you
And what if we need more than 1 path?
You don’t. The hue icon is technically 6 paths compounded into one.
thank youa gain.
I have another strange issue.
When I popup my light card, it won’t show the color picker (if i press the rgb icon). If i however click on the bulb, then go back to the popup… it does show:
(1: i press the rainbow, 2 i dont see the colorpicker, 3 i press on the lamp icon in the popup card, 4 i see the popup card in its original state, 5, i see the rgb picker…
Update Light Entity Card in HACS…
That’s up2date of course!
Uh yeah, it is fixed but you may have to wait for HA 0.116 later today (I’m on beta)
Does 0.116 break anything else?
There’s mention of a breaking change for Custom Lovelace Cards.
No, everything works but there’s this issue with custom-header. maykar posted a workaround but he’s archiving the project for 0.117.
sorry if I ask stupid 
but I am trying to use the buttom-card with your light template, but I am getting found undefined alias ‘icon_spot’ in what do I do wrong or forget??
