I started using Lovelace and made a glance card that shows the state of 4 person entities that are connected to a bluetooth tracker. The states show up OK as text.
What I would like to have is that an icon or the color of the icon changes based on the state of the person (only home or not home), so I won’t need the text. It surprises me this is not default behaviour like it is for switches and binary sensors, but anyway. I tried the following in customize.yaml:
This doesn’t work. I also tried rgb_color instead of icon_color and ‘red’ instead of ‘#63ff02’ (I know that’s green). I have custom_ui installed, and when I check the state of person.lemontree in the developer tools, it shows:
That last line changes depending on the actual state, so it seems the logic is working, it just doesn’t influence the actual color of the icon. The only thing I can think of next is to define template binary sensor for each person, but the whole thing becomes quite convoluted that way. I can’t believe it should be so complicated. Are there simpler options?
I don’t think CustomUI uses the same template syntax. It uses Javascript rather than Jinja2, so the original was probably correct. I don’t currently use CustomUI, so I can’t tell you anymore than that.
I was able to change the color of an entity-button using the theme option. All the theme did was change the button colors for active and inactive. Unfortunately, I don’t have an example because I’ve wiped my configs since then.
I don’t know if person actually goes into active/inactive states, but you could try something like that since a number of cards support the theme option.
Alright, so this possible with Lovelace and the great card-modder card, but it’s a bit tedious.
Here is my example using the demo platform device trackers, but it also works for person:
type: 'custom:card-modder'
card:
type: entities
entities:
- entity: device_tracker.demo_home_boy
show_header_toggle: false
style:
--home-color: green
--not_home-color: red
--paper-item-icon-color: var(--[[ device_tracker.demo_home_boy.state ]]-color)
And the end result:
Now, the tedious part is that you probably need to wrap each person separately, so you can’t just list them all in entities and be done. You also probably need to put colors for each zone otherwise the template won’t match to a color and it will fall back to the built-in default (not your theme’s default, if you’re using one).
As you mentioned, indeed this seems to define the style for the whole card. I added more entities to the list and they all get the same color based on the state of the first person. It seems you need a card per person. I haven’t tried this, as it is not what I want. I’ll try a theme, or maybe it’s time to give up
Depending on how you want it to look, you can put each of them plus their wrapper in a horizontal/vertical stack or some other layout/grouping card and make it look about the same as if they were in the entities card but still have them individually wrapped and styled.
I’m on mobile right now but if I find time I could probably give an example of that if you can’t figure out how to make it look like you want.
Just for reference, here is some Lovelace I came up with that essentially manages do it, but it’s not as simple and requires a handful of custom cards. It also only works in this card, so the popup when clicking on them doesn’t get colored. It also might not show in the same order every time. Might need to sort the keys first.
Too bad there’s still not a built-in way to handle stuff like this. This is something that has been requested constantly since pretty much the beginning.
