Custom UI: Tiles

Please could you share this again as the link has expired. I have an older version which doesnt seem to be working properly.
It would be greatly appreciated, many thanks!

No problem. Here you go.
https://we.tl/PPbZWChSJU

1 Like

Many thanks, you rock:)

Iā€™m having a crack at recreating my dynamic tablet tile interface on lovelace. The look of the ā€˜glanceā€™ cards arenā€™t quite doing it for me though. Can I set a custom background (tile) colour without using a picture file? I would need this to follow the state of the entity.

1 Like

Yes you can. Use style_template.

style_template: "if (entities['input_boolean.name'].state === 'on') return 'background-color: #53b55c'; else return 'background-color: #202020';"

2 Likes

Is it possible to do this type of layout in lovelace?

I tried, but it was not very good.
image

Is it possible to color the background of an entity glance?

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

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

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

3 Likes

Thatā€™s EXACTLY why I suggested it :slight_smile:

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

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

my first setup:

4 Likes

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

1 Like

Finally, what Iā€™ve been hoping for. Thanks smart people.

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?

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!

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

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

You nailed it with

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

:slight_smile:

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.

hassio

6 Likes