A different take on designing a Lovelace UI

[http_edo13]

@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?

[Mattias_Persson]

@http_edo13

I want to ask, the responsive problem has been solved?

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

[Martin_Pejstrup (mpejstrup)]

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!

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
Something like this one.
skylight|225x225

[LocoLoco]

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

[Martin_Pejstrup (mpejstrup)]

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

[spudje]

Check here: Custom UI: Buienradar rain forecast graph

[bran2000 (Sam)]

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

[bran2000 (Sam)]

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

[elyisum]

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 !

[celeritas0725]

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!

[Martin_Pejstrup (mpejstrup)]

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

[elyisum]

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

[elyisum]

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 ?

[elyisum]

Do you have a span wrapping the sensor ?

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

[johansvensson911 (Johan Svensson)]

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?

[basziee]

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%">'; } ]]]

[bran2000 (Sam)]

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

[Mattias_Persson]

@celeritas0725

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

@Martin_Pejstrup

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.

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

@Mattias_Persson

Animation

After effects (gifs) is the old way but I switched over to svg’s and there is unfortunately no comparable software for pure css animation. You have to do it by hand which is actually quite hard to get right/smooth. To help with easing animations I used easings.net for cubic-beziers. Another resource to see how to do different animations is Animatopy. I’ve also installed simonsiefke.svg-preview extension in VS Code to get a live preview when coding an animation.

[Mattias_Persson]

A different take on designing a Lovelace UI

you missed class: sidebar and use custom:hui-markdown-card - type: custom:hui-markdown-card class: sidebar style: {top: 9%, left: 11.1%} content: > <span>{{ states('sensor.time') }}</span> ... card-mod class in themes.yaml .sidebar { font-size: 1.5vw; font-weight: 300; opacity: 0.75; width: 15.5vw; height: 1px; } the clock is styled card-mod-card-yaml: ... ha-markdown-element>p>span { font-family: SF Text; font-size: 5vw; font-weight: 200; margin-left: -0…

A different take on designing a Lovelace UI

What exactly do you mean by this? Is your themes.yaml actually included in configuration.yaml and have you selected the theme in the ha UI?

[Mattias_Persson]

@johansvensson911

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?

With templates, with a conditional card and automations, it is