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