A different take on designing a Lovelace UI

Thanks. Works like a charm, but you are right. I have to consider if it take too much of the artwork space.

Have a nice day

Hi! May I know where can I get an animated* svg files of the following: led strip, socket, powerstrip and aircon?

*Animated when turned on/off

Thank you in advance!

@Mattias_Persson
Hi, your interface is very very beautiful!
I want to ask, the responsive problem has been solved? I don’t have homekit application and I would like it to be seen well on the phone. How can it be done?

There’s nothing to be solved. If you want a responsive layout don’t use picture elements.

Hi Matt

Just to let you know I finally cracked this one. Using you new setup with button_card_templates I created a template for a cover.
I also dropped using a switch and just used the entity itself. Now it works perfectly!
2020-12-30_20h33_05

Have you created any new custom animated icons or do you know of anyone how are able to help. I simply do not have the skills to make them. I would really like an animated roof window on these buttons :slight_smile:
Something like this one.
skylight|225x225

Thank you Mattias, it is working.
Just learned a little bit more. :ok_hand:

Hi @Mattias_Persson

Happy New Year

How can I style this hui-element in order to remove some of the horizontal spacing between the rows?

Also, can you see why the first row is a little to the right compared to the others?

Would you know of somewhere I can learn about the hui-elements styling? I also want to fix the size of the hui element so it fits the one on the left.

Nevermind, found this website: https://www.w3schools.com/css/default.asp

Check here: Custom UI: Buienradar rain forecast graph

Hi it’s great can you please share your code for the media player instead the plex card ?
Thanks

Hi Great Job let me know when you’ll finish and share your work ? Thanks

Hello
I started to work on the integration of my elements with this beautiful dashboard.
I have a problem with the information window. I can’t find how to correct the error “Button-card template ‘name_action’ is missing!”
Can someone tell me why I don’t have the cross to close the modal?
Thank you… and HAppy new year !

hi! i’m searching this topic but I haven’t find the answer to my questions. May I know how will I change the font size of the time (make it bigger) and how to make the box pointed by the arrow slightly darker with the transparent to differentiate it with the background?TIA!

Have you made the button_card_templates.yaml? In there is the config for name_action

Thank you !
I had the file but the inclusion was indented with 2 spaces

1 Like

Me again
I’m trying to integrate my TV but I have this error

Can someone help me ? I don’t understand this part of code. How can I debug it ?

Do you have a span wrapping the sensor ?

<span>{{ states('sensor.time') }}</span>

Another year, another question… How do you achieve the “what’s playing” part in the appe TV card like this. And how do you manage that the Apple TV comes in the first, big card? Or is it no longer possible due to the ATV integration?

Thanks for your work! looks amazing.
I have a problem with my TV and the loading animation. It won’t stop. Is there a way to set a countdown? I was trying this but I’m no expert

loader:
  custom_fields:
    loader: >
      [[[ if (states[entity.entity_id.replace(entity.entity_id.split('.')[0], 'input_boolean')].state === 'on') || (seconds == 10) {clearInterval(countdownTimer)} {
      return '<img src="/local/loader.svg" width="100%">'; } ]]]

Hi, any chance you can explain how create views as you have done ?
Thanks

@celeritas0725 @Martin_Pejstrup
Keywords: css animation and svg. Once you’ve got it working just paste it into your button card

1 Like