A different take on designing a Lovelace UI

[Connor_Furlong]

Hi @Mattias_Persson I have a basic Home Assistant setup and I have a tablet mounted to a wall myself and thats how I use HomeAssitant around the house. I really really love your take on Lovelace UI and very deep in the Apple Ecosystem and love the way that this looks…

BUT

Coding is not my strongest suite and I would love to know how I can actually get this myself, I know that the files are here but I havent a clue on how to actually bring this to life lol…

I would really really appreciate your help!

[Schlibib]

Didn’t work. Did you change any setting in his code?

[Diego_Santos]

Did not work.

And the configs:

[xADDRx (Ben)]

Hi

i change nothing more…the mardown settings are now in the themes.ymal, if I got that right.

here the post from mattias…

A different take on designing a Lovelace UI

No

[Dolores]

This config is gorgeous but also very complex. It relies heavily on nested custom button card templates (which I myself am struggling with). Start by looking at the custom button card documentation regarding templates, and then take a look at Mattias’ button_card_templates.yaml.

[Dolores]

This config is so wonderful but I am having massive issues with button card configuration templates. The configuration templates “work,” but it seems like the js templates within (such as entity.entity_id) are not getting passed through/rendered. I’ve tried multi-line syntax, the syntax that Mattias’ uses, and the syntax that Rob Coleman uses here. The only one that worked is the one that Rob posted…and only for a bit!

Has anyone had this issue/fixed it?

[Mattias_Persson]

@hicling

Hi I really like the design here, but i’m wondering if anyone can share a config for a mobile friendly view.

This is specifically for tablets, for mobile I’d consider skipping picture elements.

A different take on designing a Lovelace UI

Trying to make a mobile friendly version of @Mattias_Persson great design. [image]

[Mattias_Persson]

@Arthur_Morgan

I tried to add a custom:light-entity-card, and it doesn’t show any wheel at all.

Update light-entity-card and hass, it’s been fixed.

[Mattias_Persson]

@jacobeng

Could you kindly give some details about code.
where do i place this code and whats its purpose?
is this a sensor or automation or ?

It’s the lock domain. I only use it to have a lock in homekit (lock computer from dashboard shutdown)

[Mattias_Persson]

@Arthur_Morgan

When I change it from on to off, it’s really nice that it continues to move a little, but when I just open the page and it’s already off, there’s no reason for it to move.

Yes, it irks me as well. I guess in pseudocode, instead of

if on animate1 
else animate2

you’d have to

if from off to on animate1, 
if from on to off animate2 
else no_animation

or block it on page load or something, I don’t know

[Mattias_Persson]

@Connor_Furlong

Coding is not my strongest suite and I would love to know how I can actually get this myself, I know that the files are here but I havent a clue on how to actually bring this to life lol…

Picture elements, panel mode, button-card, card-mod. That’s basically it, or at least to get you started.

@Connor_Furlong @palhaca

[Mattias_Persson]

@Dolores

The configuration templates “work,” but it seems like the js templates within (such as entity.entity_id) are not getting passed through/rendered.

base is a simple switch. light, media, person etc is just built upon that. It can get confusing but you could try to skip the template and do it the “normal” way for a single card, if that works, it’ll work in templates.

Also read the entire button-card readme (I know )

[Arthur_Morgan (Arthur)]

Thanks! I succeeded to solve it by adding a boolean that is True only 5 seconds after turning the AC off.

if (entity.state === 'off' && states['input_boolean.ac_recent_off'].state === 'off')
   { return
     `${style} <g class="static">${path} 
     </g> </svg>`;
   }

also, first time ever for me on JavaScript! (not a programmer)

[Mattias_Persson]

Hmm, if I think about it for more than 5 seconds, what I said wouldn’t work. The animation always goes from off to on etc, so your solution with timing is probably the right way to do it. I’ll see if there’s another way instead of using an input boolean.

not a programmer either, just persistent

[Arthur_Morgan (Arthur)]

I used an input boolean + an automation that changes it to true when AC is off, and change it back to off after 5 seconds. It would probably be better to use a binary sensor yaml template though, instead of input (because there is no need to ever change it by the user).

I also want to make something like that for the turning ON, so it will be already in fast spinning animation, if the AC has been on for a while.

[vaionicle (vt)]

Hi,

I am trying to install/add it to my home assistant, but I can not find any guide or something to help me with.
Can you help me on that or point me to a guide to start looking ?

thanks
Vasilis

[TommyWelle (Tommy Welle Jacobsson)]

Hei, Kanskje du kunne hjulpet meg med dette oppsettet? Hadde satt stor pris på det

[xADDRx (Ben)]

hi guys

can anyone help me pls. iwanna change the icons like this:

anyone a idea?

[TommyWelle (Tommy Welle Jacobsson)]

Me toooo
I can’t find any guide how to install this thing.

[anon6632754]

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?