Custom UI: Tiles

Bobby_Nobble · August 13, 2018, 1:38pm

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

…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.

Jer78 · August 13, 2018, 3:13pm

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

arsaboo · August 13, 2018, 3:16pm

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

Jer78 · August 13, 2018, 3:47pm

Awesome!! That does the trick! Thanks

George_Stofberg · August 14, 2018, 7:11am

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!

vladosam · August 14, 2018, 7:35am

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

George_Stofberg · August 14, 2018, 9:29am

Many thanks, you rock:)

mynameisdaniel · August 17, 2018, 12:43am

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.

vladosam · August 19, 2018, 11:14am

Yes you can. Use style_template.

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

cleytonpira · August 19, 2018, 9:31pm

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

I tried, but it was not very good.

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

Bobby_Nobble · August 20, 2018, 2:31pm

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.

Jer78 · August 20, 2018, 5:09pm

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.

arsaboo · August 20, 2018, 6:52pm

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

Bobby_Nobble · August 20, 2018, 8:52pm

That’s EXACTLY why I suggested it

cleytonpira · August 21, 2018, 12:37am

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

simbesh · August 28, 2018, 2:50am

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

my first setup:

Wonkavator · September 3, 2018, 2:30pm

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

vansmak · September 27, 2018, 3:50pm

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

Mariusthvdb · September 28, 2018, 8:47am

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?

Mariusthvdb · September 28, 2018, 10:01am

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!