Alarm Panel Card state colors are broken since frontend 20221213.0

monpelaud commented 1 year ago

Checklist

[X] I have updated to the latest available Home Assistant version.
[X] I have cleared the cache of my browser.
[X] I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

Hi, Since frontend 20221213.0, Alarm Panel Card does not correctly handle colors depending on the state. Best regard Alarm_Panel_Card_Apres

Describe the behavior you expected

Alarm_Panel_Card_Avant

Steps to reproduce the issue

1. 2. 3. ...

What version of Home Assistant Core has the issue?

2022.12.6

What was the last working version of Home Assistant Core?

2022.12.3

In which browser are you experiencing the issue with?

Firefox, Microsoft Edge, Chrome

Which operating system are you using to run this browser?

Windows 11

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

HazardousRat commented 1 year ago

Yes, I'm having the same issue. Hope this gets fixed soon.

Mavieny commented 1 year ago

Yes, here the same

Electronlibre2012 commented 1 year ago

hello,

related to this big huge enormous discussion : https://community.home-assistant.io/t/2022-12-color-states-are-broken-unusable/499890/581

piitaya commented 1 year ago

Hello 🙂 We changed the colors scheme to add consistency with the lock, alarm and others entities.

grey for inactive (off light, off switch, disarmed alarm, etc...)
green for safe (armed alarm, locked lock)
red for unsafe (triggered alarm, unlocked lock)

HazardousRat commented 1 year ago

That doesn't make much sense at least in regards to the alarm panel. The color scheme made much better sense prior which confirms the color scheme of my existing alarm panel. Green = Ok/Disarmed Amber = Stay Home & Red = Away. Would it possible to give people an option without much coding or any at all to revert back to the previous color scheme while keeping the current version?

For several days after the update that changed all of this, I initially thought I had an issue with my alarm integration which I've had for a few years now. Why "fix" something that obviously isn't broken? I've read through the comments from the post above and it appears that many people feel this change was unnecessary. I hope in a future update that it gets changed back.

monpelaud commented 1 year ago

Now the triggered state in light gray and we don't see the icon!

Alarm_Panel_Triggered

piitaya commented 1 year ago

@monpelaud It's a bug, thanks for reporting the issue. Here's the fix : https://github.com/home-assistant/frontend/pull/14840

horvathgergo commented 1 year ago

This issue still persists. I tried to revert the colors back so I added to my themes 'rgb-state-alarm-armed-color: ' but it turned white instead of color set.

franlmc commented 1 year ago

That doesn't make much sense at least in regards to the alarm panel. The color scheme made much better sense prior which confirms the color scheme of my existing alarm panel. Green = Ok/Disarmed Amber = Stay Home & Red = Away. Would it possible to give people an option without much coding or any at all to revert back to the previous color scheme while keeping the current version?

For several days after the update that changed all of this, I initially thought I had an issue with my alarm integration which I've had for a few years now. Why "fix" something that obviously isn't broken? I've read through the comments from the post above and it appears that many people feel this change was unnecessary. I hope in a future update that it gets changed back.

totally agree with you. In any alarm system, the intuitive thing to do is green for disarmed and red for armed/ready. I also hope they return to the previous colors

huuscript commented 1 year ago

Grey = is unavailable or broken, been like this since inception. So odd, why all the force change? It great that now we able to customize all the colors, but why force the color change on everyone, why not let them change it for themselves?

ukrolelo commented 1 year ago

Does somebody know how can i revert the color change as they were previously? Me and my wife are confused... :(

horvathgergo commented 1 year ago

Does somebody know how can i revert the color change as they were previously? Me and my wife are confused... :(

You can set color of this css element like the way I did: state-alarm-armed-color: ""

Electronlibre2012 commented 1 year ago

hi @horvathgergo can you provide the complete code and where we have to put this please?

huuscript commented 1 year ago

hi @horvathgergo can you provide the complete code and where we have to put this please?

You can have a look at this thread, although alarm and locks disarm color are still not able to change. personally i just revert back to old ver until a bit more polish.

https://community.home-assistant.io/t/2022-12-color-states-are-broken-unusable/499890/165

ukrolelo commented 1 year ago

hi @horvathgergo can you provide the complete code and where we have to put this please?

You can have a look at this thread, although alarm and locks disarm color are still not able to change. personally i just revert back to old ver until a bit more polish.

https://community.home-assistant.io/t/2022-12-color-states-are-broken-unusable/499890/165

I went for new theme.yaml and added this line, working correcltly with disarmed green

Classic: state-alarm-armed-color: '#F44336' # Red state-alarm-arming-color: '#FF9800' # Orange state-alarm-disarmed-color: '#4CAF50' # Green state-alarm-pending-color: '#FF9800' # Orange state-alarm-triggered-color: '#F44336' # Red state-alert-color: '#F44336' # Red

franlmc commented 1 year ago

Hi,

I have also added those lines to my current theme in the .yaml file and my panel works correctly now.

Thanks for the tip

Electronlibre2012 commented 1 year ago

thanks @huuscript ! work great!

huuscript commented 1 year ago

hi @horvathgergo can you provide the complete code and where we have to put this please?

You can have a look at this thread, although alarm and locks disarm color are still not able to change. personally i just revert back to old ver until a bit more polish. https://community.home-assistant.io/t/2022-12-color-states-are-broken-unusable/499890/165

I went for new theme.yaml and added this line, working correcltly with disarmed green

Classic: state-alarm-armed-color: '#F44336' # Red state-alarm-arming-color: '#FF9800' # Orange state-alarm-disarmed-color: '#4CAF50' # Green state-alarm-pending-color: '#FF9800' # Orange state-alarm-triggered-color: '#F44336' # Red state-alert-color: '#F44336' # Red

Thanks for letting me know, last time i try the disarmed color always grey.

franlmc commented 1 year ago

After install new 2023.2.0 colour back to grey again 😭

piitaya commented 1 year ago

Official theme variables for state color support has been added : https://www.home-assistant.io/integrations/frontend/#supported-theme-variables. It's linked in the release notes.

We unified all the variables to have the same pattern for all domains.

Electronlibre2012 commented 1 year ago

hello,

i read the doc but i dont understand how to make it work now with alarm_panel.

Could you give an exemple please?

franlmc commented 1 year ago

Official theme variables for state color support has been added : https://www.home-assistant.io/integrations/frontend/#supported-theme-variables. It's linked in the release notes.

We unified all the variables to have the same pattern for all domains.

Thanks a lot!!!! working again after rename the domain

franlmc commented 1 year ago

hello,

i read the doc but i dont understand how to make it work now with alarm_panel.

Could you give an exemple please?

Hi,

just rename the old domain "alarm" in the .yaml (theme) with "alarm_control_panel".

take a look this example.

  # Alarm
  state-alarm_control_panel-armed_home-color: '#F44336' # Red
  state-alarm_control_panel-armed_away-color: '#F44336' # Red
  state-alarm_control_panel-arming-color: '#FF9800' # Orange
  state-alarm_control_panel-disarmed-color: '#4CAF50' # Green
  state-alarm_control_panel-pending-color: '#FF9800' # Orange
  state-alarm_control_panel-triggered-color: '#F44336' # Red
  state-alert-color: '#F44336' # Red

I have noticed that the "armed" status is not valid so that it can take the correct color, it is necessary to define if it is armed_home. armed_away.....

piitaya commented 1 year ago

Yes we now use the domain alarm_control_panel name instead of alarm for consistency.

state-alarm_control_panel-armed_away-color: "#F44336" # Red
state-alarm_control_panel-armed_custom_bypass-color: "#F44336" # Red
state-alarm_control_panel-armed_home-color: "#F44336" # Red
state-alarm_control_panel-armed_night-color: "#F44336" # Red
state-alarm_control_panel-armed_vacation-color: "#F44336" # Red

There is now one color per state. That means that you must define a color for each armed type.

franlmc commented 1 year ago

Yes we used the domain alarm_control_panel name instead of alarm for consistency.
state-alarm_control_panel-armed_away-color: "#F44336" # Red
state-alarm_control_panel-armed_custom_bypass-color: "#F44336" # Red
state-alarm_control_panel-armed_home-color: "#F44336" # Red
state-alarm_control_panel-armed_night-color: "#F44336" # Red
state-alarm_control_panel-armed_vacation-color: "#F44336" # Red
There is now one color per state. That means that you must define a color for each armed type.

I was editing my comment....thanks a lot

Electronlibre2012 commented 1 year ago

thanks!

Le jeu. 2 févr. 2023, 11:32, franlmc @.***> a écrit :

hello,

i read the doc but i dont understand how to make it work now with alarm_panel.

Could you give an exemple please?

Hi,

just rename the old domain "alarm" in the .yaml (theme) with "alarm_control_panel".

take a look this example.

Alarm

state-alarm_control_panel-armed-color: '#F44336' # Red state-alarm_control_panel-arming-color: '#FF9800' # Orange state-alarm_control_panel-disarmed-color: '#4CAF50' # Green state-alarm_control_panel-pending-color: '#FF9800' # Orange state-alarm_control_panel-triggered-color: '#F44336' # Red state-alert-color: '#F44336' # Red

— Reply to this email directly, view it on GitHub https://github.com/home-assistant/frontend/issues/14802#issuecomment-1413272296, or unsubscribe https://github.com/notifications/unsubscribe-auth/AL4SIWOQ6N6W5UV6XK4HUQTWVNPI3ANCNFSM6AAAAAATAAS4KA . You are receiving this because you commented.Message ID: @.***>

sg1888 commented 1 year ago

This color change should be reverted. I understand that a common theme is being used for HA, but there are several issues with changing the color for alarm panels:

1) Alarms RARELY will be in a triggered state (few seconds to a minute or two). If the alarm is triggered, somebody has entered the house and will likely turn it off soon (unless there's a break in - but how often has your house been broken in?). If you use RED for a triggered state, it will likely never be seen by the user.

2) ALL other alarm apps use RED as the color when the alarm is ARMED, and Green/Blue when it's DISARMED. Don't believe me? Check out the screenshots for Alarm.com (https://apps.apple.com/us/app/alarm-com/id315010649) or ADT (https://apps.apple.com/us/app/adt-pulse/id355736423).

3) Grey for Disarmed is just plain confusing. It seems as though the panel is disabled, not connected, or malfunctioning.

For staying consistent with other, well established alarm apps such as ADT, Alarm.com, Ring, etc. , please REVERT these changes to stay consistent and to improve the overall user experience on HomeAssistant. I think we can all agree the goal is to improve the overall user experience on HomeAssistant and not force consistency for consistency's sake.

Electronlibre2012 commented 1 year ago

i agreed, green must be the idle state. But you can set this in your themes.yaml with

state-alarm_control_panel-armed-color: "#F44336" state-alarm_control_panel-disarmed-color: #4CAF50" ....

piitaya commented 1 year ago

Many alarm apps use red for armed and green for disarm, I totally agree. But they also use red for unlock and green for lock (the opposite of what we use today for lock entities too).

Thanks @sg1888 for sharing these examples.😊

github-actions[bot] commented 1 year ago

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

home-assistant / frontend