piitaya / lovelace-mushroom

Build a beautiful Home Assistant dashboard easily
Apache License 2.0
3.64k stars 333 forks source link

State based icon colors #335

Open CubeyGlyph opened 2 years ago

CubeyGlyph commented 2 years ago

It’s great that we can set the default color of the icons, but I would like to be able to set the color depending on state. A door lock will remain gray until toggled to lock in which case tot adopts the default color, but a garage door will show gray when closed and the default color when opened. This tends to cause a disconnected experience and you can’t use a color for “closed” vs “open” due to the nature of the device. If we could set the color for each state, that would give us a lot of flexibility.

PrettyHeatToast commented 2 years ago

I think what you're trying to do is already possible, I use some simple jinja templating to change the icon color of some template cards to orange when someone is there. image

Hope this helps!

CubeyGlyph commented 2 years ago

I think what you're trying to do is already possible, I use some simple jinja templating to change the icon color of some template cards to orange when someone is there. image

Hope this helps!

I will have to do some reading on jinja but if possible that would be great.

steve28 commented 2 years ago

Even though one can make their own "lock" card via the template card, I do feel that the current gray/color state of the lock card is inconsistent with the other cards. That is, I would like it to be more visible when the lock is unlocked, just like I would like it to be more visible when a door is open.

At the very least, could there be a toggle to invert the gray/color based on state for the lock card?

bramstroker commented 2 years ago

I have made a similar request for the cover card icons #227. An option to flip gray/color state would be a nice solution for lock, cover and entity card as this is quite a common use case and won't pollute the config GUI that much.

To accomodate a seperate icon or icon color per state the template card would suffice as you can just use jinja templates there.

piitaya commented 2 years ago

Would green for closed and red for open suit you for the lock card?

danch99 commented 2 years ago

I think red and green by default would be great for the majority of users (me included). Customizable colours for the peaky ones will be close to perfect ! ;) Thanks a lot

steve28 commented 2 years ago

Would green for closed and red for open suit you for the lock card?

Not for my use case. Right now door open = color, door closed = gray. But Lock open = gray, lock closed = color. It is inconsistent. And by the way, this is the way it works in Lovelace. Lock open = yellow, closed = blue (same color as anything else that is closed/off). Attention is drawn to things that are in an "unnatural" state (open/on/unlocked).

IMO, the easiest thing to do is just invert what it currently is. If you want to make make almost everyone happy, a toggle to invert the color/gray with state would work. And the extra-credit would be to make gray a color in the dropdown and allow selecting the color for each state separately (but to be consistent, that would need to be done across all entity types)

sotima commented 2 years ago

In my opinion, if you set the state colors to fixed values in the predefined cards like lock-card, cover card and so on, it will always interfere with the template cards where the user is able to use some jinja to determine the color for it states. So the more universal solution might be, to have two color options in the pre-defined cards: one for an active color and one for the inactive color. Thus a user can have the same color scheme between template and fixed cards.

E.g. I have all template cards on my first level dashboard, where I do not want to use a cover card, but only show the states of a hole group of covers just at a glance. There I want to use amber for open covers and light-blue for closed covers (the more secure state) - When I click on the template card it brings me to the next view where I use your cover cards for each individual cover, where I can control the covers. But those cards do now have a different color scheme, because I can only change one of the colors.

In other words: If I do have just one color to choose in the fixed cards, this would mean that I have always to choose the predetermined "grey" color in my template cards for the inactive state if I want to have it consistent. Thus making the templating option of the color somehow obsolete.

I know it is very hard to make it right for everyone. I really appreciate the great work you put into those cards. Thank you very much for all this work!!!

Spookster commented 2 years ago

In some ways it would be nice to see it in the UI rather than code (with user selected colors), which is what I think the suggestion is Eg currently: image

To something like this: image

I can imagine thats not always easily achieved however with differing states :)

piitaya commented 2 years ago

Yep that something I'm thinking about for entity card and entity card. I have an issue with the disabled color. It's not easy to add them on the color picker because of dark theme 😅

cybertza commented 1 year ago

I think what you're trying to do is already possible, I use some simple jinja templating to change the icon color of some template cards to orange when someone is there. image

Hope this helps!

{% if is_state('input_boolean.bedroom_presence', 'on') %} orange {%else%} grey {% endif %}

peikelias commented 11 months ago

+1 For adding templating to icon color and icon choosing