Custom UI: Tiles

I recreated my device tracker tiles as previously posted above in Lovelace…

25

…as you can see they are identical to those I posted previously and now use only one colour image as the state is handled by CSS now rather than image replacement, example of one tile below…

  - type: image
    entity: device_tracker.huawei_p10_lite
    tap_action: more-info
    image: /local/images/tracker/sam.png
    state_filter:
      'not_home': saturate(0.0) opacity(50%)
    style:
      top: 50%
      left: 86%
      width: 22%
      # padding: 50px 50px 100px 50px
      border-radius: 5%

I made a white background image to force the card to be the proportions I wanted.

5 Likes

I did spend the weekend experimenting with Lovelace and it’s true, pretty much everything can be replicated with one exception, there’s no current way of changing the background of a non-image based on the theme that’s being used. For instance If I’m using an icon on a background that changes color depending on the state, it turns grey or yellow. I can partially replicate the on/off state by making a two pictures, one totally transparent and the other a solid color of the on state, but that’s a workaround vs having something that changes with the themes.

There is also an issue with picture-elements and state-icon where the icon doesn’t actually reflect the different on/off state. I raised that issue on github.

https://github.com/home-assistant/ui-schema/issues/153

I am using customize to change the icon colors. See here.

2 Likes

Awesome!! That does the trick! Thanks

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!