Home Assistant Community

Custom UI: Tiles

#449

Follow the principles in my post above and you can duplicate it exactly.

Personally, that was just an experiment to see if I could do it. Tiles still works perfectly and Lovelace is a work in progress so I’m waiting till it’s more mature before doing anything much else.

1 Like

#450

Unfortunately it can’t be duplicated “exactly” if you’re not using pictures. Hopefully Lovelace adds a way to make tiles that can change in size and colors.

1 Like

#451

Check https://sharethelove.io/picture-elements-cards/kodiremote-card out. You can follow a similar approach.

3 Likes

#452

That’s EXACTLY why I suggested it :slight_smile:

0 Likes

#453

Tks @Bobby_Nobble, @arsaboo and @Jer78. I’d like to not use images, but we’ll expect support for this soon.

0 Likes

#454

Slowly progress is being made @kuuji just released a custom button card for lovelace

my first setup:

4 Likes

#455

@simbesh Would you mind to share ur configuration of this view?

1 Like

#456

Finally, what I’ve been hoping for. Thanks smart people.

0 Likes

#457

continuing from Custom-ui Tiles template not working,

HI,

Been discussing with @vladosam, who helped me turn the paradigm in my templates.

I am trying to get my Tiles to follow the state of my device_tracker Life360 and have it show images depending on the zones it is in. The thing is these Life360 zones are capitalized combinations of words without _ as in ‘Multiple Words’ while my images cant be like that and need to be m_multiple_words.png.

So, ive tried this but it doesnt work:

background-image: url(\"/local/tiles/family/m_' + state|lower|replace(" ", "_") + '.png\")';

this background-image: url(\"/local/tiles/family/m_' + state + '.png\")';
works beautifully for m_home and m_not_home, so I know its down to the filter to get it right.

I don’t mind if it had to be like m_multiplewords.png and not use the underscore, but even then the filter needs to be something like state|lower|replace(" ", "").

What could I change and try, please have a look with me?

0 Likes

#458

on Multiple conditions in Tiles Javascript:

answering myself here, because I’ve finally found a way, and it might be of use to anyone on this thread, never read a real answer to it. If it is too obvious, sorry.

this works fine now!

        style_template: >
          if (state === 'home' || state === 'not_home') return 'background-image: url(\"/local/tiles/family/m_' + state + '.png\")';
          return 'background-color: #643aac;background-image: url(\"/local/tiles/family/m_' + 'zoning' + '.png\")';

@vladosam please see this, it makes the other templates we’re checking somewhat easier too!

0 Likes

#459

Nice. I’ll test it in my test env. Is else return 'background... required on zoning or you can just use return 'background... ?

0 Likes

#460

indeed, I never use 'else'
suppose the && operator would work too :wink:

0 Likes

#461

You nailed it with

if (state === 'home' || state === 'not_home')

:slight_smile:

0 Likes

#462

I was not liking the results using other cards to simulate tiles, so I started to migrate tiles to lovelace. I never created lovelace cards so I’m having some difficulties but I’m liking the initial results.

5 Likes

#463

Oh yes! You’re the best :muscle::ok_hand::+1:

1 Like

#464

Can you share your code with us? Even in alpha state it seems to be usable :wink: And there are also lots of talented people here who can help you!

0 Likes

#465

Ok, I will organize the code and share it.

2 Likes

#466

Any updates? :slight_smile: (sorry for being impatient)

0 Likes

#467

Yes, I just sent github a version that is working for me. In readme there are instructions about how to configure using your current tiles settings, test to check if it works for you. (Sorry my bad english).

7 Likes

Lovelace: Button card
Lovelace: Button card
Lovelace: Button card
#468

@rodrigodf Great work!

1 Like