Me toooo 
I can’t find any guide how to install this thing. 
Hi Mattias, I have to congratulate you for the excellent work, it’s really beautiful. There is a way to install your configuration and after change the dashboard from the gui?
Hi Mattias,
entity_id is being deprecated as of 115. I have a lot of sensors and configs from your set-up. How did you resolve this issue or will you keep it as is for now?
Remove entity_id if it’s mentioned in the log like template sensors. Since 0.117 you don’t have to edit the templates either since now() works anyway. My sensor.yaml is up to date if you want to compare.
THANK YOU THANK YOU THANK YOU!
You don’t have “buy me coffee” button anywhere!
Any Idea how i can show a Picture (SVG) instead of the name of an light/switch that is in state “on”? I use this to show what light is on at the moment, and it works, but i want to show a picture (or a button card) and not the name of the light.
lights_active:
value_template: >-
{% set lights = [states.light.treppe, states.light.hue_outdoor_wall_1, states.light.terrasse_led, states.light.wohnzimmer, states.light.kuche, states.light.tradfri_esszimmer, states.light.wc, states.light.tadfri_tom, states.light.elly, states.light.schlafzimmer, states.light.bad, states.light.pc, states.light.tadfri_terrasse, states.light.flur_ug, states.light.flur_og, states.light.flur_eg, states.light.bar, states.light.garten,] %}
{% set lights_on = lights | selectattr('state','eq','on') | list %}
{% set lights_name = lights | selectattr('state','eq','on') | map(attribute='name') | join(', ') %}
{% if (lights_on | length == 0) and (switches_on | length > 0) %}
{{ switches_name | regex_replace(',([^,]*)$',' und\\1') }}
{% elif (lights_on | length == 1) and (switches_on | length == 0) %}
{{ lights_name }}
{% elif (lights_on | length == 1) and (switches_on | length == 1) %}
{{ lights_name }} och {{switches_name }}
{% elif (lights_on | length > 1) %}
{{ lights_name | regex_replace(',([^,]*)$',' und\\1')}}
{% else %}
<font color='#6a7377'></font>
{% endif %}
you can probably loop through your list
{% set lights = [states.light.treppe, states.light.hue_outdoor_wall_1, states.light.terrasse_led, states.light.wohnzimmer, states.light.kuche, states.light.tradfri_esszimmer, states.light.wc, states.light.tadfri_tom, states.light.elly, states.light.schlafzimmer, states.light.bad, states.light.pc, states.light.tadfri_terrasse, states.light.flur_ug, states.light.flur_og, states.light.flur_eg, states.light.bar, states.light.garten] %}
{% set lights_name = lights | selectattr('state','eq','on') | map(attribute='name') | list %}
{% for img in lights_name %}
<img src="/local/{{ img }}.svg">
{%- endfor %}
1 Like
So easy? (when known what to do
Thank you so much. Must make better svg, and it will look like i want.
1 Like
My take on adapting this great UI design for mobile. Still not finished but that’s the direction.
A few things I added:
- Presenting the rooms by horizontal swipe
- Changed the colour of the AC fan to Red if ‘heating’ and grey if ‘Fan Only’
- I created a few input booleans that stop the “turning off” animations (on the Fan for example) from displaying long after the device is already off
- I added a “magic wand” icon to some buttons, that can be turned on and off and control the automations of the specific subject,
for example: to the bed occupancy sensor or the AC auto mode.
- A few more custom icons according to my elements.
- I also kept all the work inside the visual UI Editor instead of the Lovelace-UI.yaml file. because I didn’t want to commit to YAML only. So I made everything inside the Button Cards visual editor.
Still need to add and fix more things, but that’s the general direction.
@Mattias_Persson, what do you think? 
11 Likes
hi, its really nice, and exactly what i wanted for my phone.
Could you share the lovelace code ?
Thx a lot, cheers again !
Hey, thanks!
I’m not sure how to share it, I didn’t work with lovelace-ui.yaml,
instead of this,
I used button-cards, inside horizontal and vertical stacks, and the rooms inside swipe-cards, and copied some of @Mattias_Persson code into them. It is a lot messier, but I was too scared to completely leave the visual editor and go 100% code, as for the UI.
I don’t even know where I can find the file that contains this code (visual editor code), do you know?
if you want to see something specific I can copy paste it here. Most of it is already in Mattias files, just copied to Button cards.
thanks for the explanation, i will start from that and tell you if i need some of your code
You could open the raw editor from the right top menu when you’re in edit mode and copy that code, thats close to what you get in lovelace-ui.yaml except you cant add comments there nor include other files to clean it up.
Hey all, did someone maybe create animated icon for alarm (home security), moving robot vacuum or the fork icons animation that you @Mattias_Persson made but not as svg but the old gif way? I would love to use those but even with great steps it’s hard to generate/create it
Thank you so much for your work, @Mattias_Persson. Probably I do not have enough details but why are you always setting up input_boolean.turn_on for your televisions, although you are calling service to turn them off?
Hi, what is that magic wand icon on the tiles? Does that show based on state of an entity? Can you share the code of one of the cards ?
It’s for the loading animation
1 Like
Hello,
I am new to HASS and but all setup for next level and that UI is beauty.
I still ldont understand from where to start ?
Where should i install the github files to have begining of something that looks same ?
1 Like