Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

State based icon colors #335

Open
CubeyGlyph opened this issue Apr 16, 2022 · 12 comments
Open

State based icon colors #335

CubeyGlyph opened this issue Apr 16, 2022 · 12 comments

Comments

@CubeyGlyph
Copy link

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
Copy link

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
Copy link
Author

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
Copy link

steve28 commented Apr 16, 2022

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
Copy link
Contributor

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
Copy link
Owner

piitaya commented Apr 17, 2022

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

@danch99
Copy link

danch99 commented Apr 17, 2022

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
Copy link

steve28 commented Apr 17, 2022

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
Copy link

sotima commented Apr 18, 2022

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
Copy link

Spookster commented Apr 26, 2022

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
Copy link
Owner

piitaya commented Apr 26, 2022

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
Copy link

cybertza commented Oct 13, 2023

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
Copy link

+1
For adding templating to icon color and icon choosing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants