Color for lock UNLOCKED.

[danch99]

Hi,

I would like to make the lock state UNLOCKED more obvious in the UI. Right now when the lock is LOCKED we can define a color, but when it is UNLOCKED the icon is just grey.

In order to clearly see when a lock is UNLOCKED I would like to be able to define a color for the UNLOCKED state.

By default I imagine green when it is LOCKED and red when it's UNLOCKED.

Thanks a lot for your help and the great work ! Mushroom is really a game changer !

[piitaya]

There already is an issue about lock state color https://github.com/piitaya/lovelace-mushroom/issues/335. I agree that red/green can be better 😉

[danch99]

Great, I haven't seen it. Thanks

[FrankJaco]

Hi All, I see in the current release we do now have color added to Locks. I think that is great. But I am in disagreement with danch99 as to what color should represent locked vs unlocked. To me RED means stop, thus a locked door means you cannot go forward. Green means go. You can go through an unlocked door. I would prefer the colors swapped. I would like to go further to suggest this paradyne be carried forward to other cards. For example an open cover (like a Garage door) should show as Green as you can go through them, and Red when the door is closed as you are are stopped from going through the door as it is closed. An alarm card shows Red when it is alarmed (as you cannot go through the house), and Green with disarmed as you can freely go through the house. Having a consistent color interface would augment useability in my opinion.

If others disagree with my stop/go Red/Green concept, perhaps the ability to set whatever color you want for each state would be a secondary option.

In any case thanks to you and your growing number of helpers for making the Mushroom suite of cards. They are absolutely the best thing to come to Lovelace. A final question if you don't mind.... How did you come up with the name "Mushroom" ?

Thanks for all,

fj

[piitaya]

Hi 🙂 Thanks for your feedback. I don't have a lock so I don't known what is the best solution about colors 😅 But Mushroom allow theme support to fit most of usage 🙂

Your can customize the lock colors in your theme.yaml file

--mush-rgb-red: 244, 67, 54;
--mush-rgb-pink: 233, 30, 99;
--mush-rgb-purple: 156, 39, 176;
--mush-rgb-deep-purple: 103, 58, 183;
--mush-rgb-indigo: 63, 81, 181;
--mush-rgb-blue: 33, 150, 243;
--mush-rgb-light-blue: 3, 169, 244;
--mush-rgb-cyan: 0, 188, 212;
--mush-rgb-teal: 0, 150, 136;
--mush-rgb-green: 76, 175, 80;
--mush-rgb-light-green: 139, 195, 74;
--mush-rgb-lime: 205, 220, 57;
--mush-rgb-yellow: 255, 235, 59;
--mush-rgb-amber: 255, 193, 7;
--mush-rgb-orange: 255, 152, 0;
--mush-rgb-deep-orange: 255, 87, 34;
--mush-rgb-brown: 121, 85, 72;
--mush-rgb-grey: 158, 158, 158;
--mush-rgb-blue-grey: 96, 125, 139;
--mush-rgb-black: 0, 0, 0;
--mush-rgb-white: 255, 255, 255;

# customize the lock colors here
--mush-rgb-state-lock-locked: var(--mush-rgb-red);
--mush-rgb-state-lock-unlocked: var(--mush-rgb-green);
--mush-rgb-state-lock-pending: var(--mush-rgb-orange);

You can also theme the card using card mod (if you want to customize a card locally)

type: custom:mushroom-lock-card
entity: lock.door
card_mod:
  style: |
    :host {
          --rgb-state-lock-locked: var(--rgb-red);
          --rgb-state-lock-unlocked: var(--rgb-green);
          --rgb-state-lock-pending: var(--rgb-orange);
    }

[FrankJaco]

Thanks Paul.

A question on this...   If I wanted to add this to my theme yaml code where would it go?  I have multiple themes. My configuration.yaml file has this entry:

themes: !include_dir_merge_named themes

I have a /config/themes directory and that is where the Mushroom directory is (along with directories for my other themes).

Do I create a Themes.yaml file in the root of the themes directory and put your code below there?

Thanks,

fj

On 4/25/2022 1:31 PM, Paul Bottein wrote:

Hi 🙂 Thanks for your feedback. I don't have a lock so I don't known what is the best solution about colors 😅 Your can customize the lock colors in your |theme.yaml| file

--mush-rgb-red:244, 67, 54;

--mush-rgb-pink:233, 30, 99;

--mush-rgb-purple:156, 39, 176;

--mush-rgb-deep-purple:103, 58, 183;

--mush-rgb-indigo:63, 81, 181;

--mush-rgb-blue:33, 150, 243;

--mush-rgb-light-blue:3, 169, 244;

--mush-rgb-cyan:0, 188, 212;

--mush-rgb-teal:0, 150, 136;

--mush-rgb-green:76, 175, 80;

--mush-rgb-light-green:139, 195, 74;

--mush-rgb-lime:205, 220, 57;

--mush-rgb-yellow:255, 235, 59;

--mush-rgb-amber:255, 193, 7;

--mush-rgb-orange:255, 152, 0;

--mush-rgb-deep-orange:255, 87, 34;

--mush-rgb-brown:121, 85, 72;

--mush-rgb-grey:158, 158, 158;

--mush-rgb-blue-grey:96, 125, 139;

--mush-rgb-black:0, 0, 0;

--mush-rgb-white:255, 255, 255;

customize the lock colors here

--mush-rgb-state-lock-locked:var(--mush-rgb-red);

--mush-rgb-state-lock-unlocked:var(--mush-rgb-green);

--mush-rgb-state-lock-pending:var(--mush-rgb-orange);

You can also theme the card using card mod (if you want to customize a card locally)

|type: custom:mushroom-lock-card entity: lock.door card_mod: style: | :host { --rgb-state-lock-locked: var(--rgb-red); --rgb-state-lock-unlocked: var(--rgb-green); --rgb-state-lock-pending: var(--rgb-orange); } |

— Reply to this email directly, view it on GitHub https://github.com/piitaya/lovelace-mushroom/issues/351#issuecomment-1108848051, or unsubscribe https://github.com/notifications/unsubscribe-auth/AS5E4DRJOUW7C5AJQDJM7IDVG3JFNANCNFSM5TUC2S6Q. You are receiving this because you commented.Message ID: @.***>

[dayt47]

Hi 🙂 Thanks for your feedback. I don't have a lock so I don't known what is the best solution about colors 😅 But Mushroom allow theme support to fit most of usage 🙂

Your can customize the lock colors in your theme.yaml file

--mush-rgb-red: 244, 67, 54;
--mush-rgb-pink: 233, 30, 99;
--mush-rgb-purple: 156, 39, 176;
--mush-rgb-deep-purple: 103, 58, 183;
--mush-rgb-indigo: 63, 81, 181;
--mush-rgb-blue: 33, 150, 243;
--mush-rgb-light-blue: 3, 169, 244;
--mush-rgb-cyan: 0, 188, 212;
--mush-rgb-teal: 0, 150, 136;
--mush-rgb-green: 76, 175, 80;
--mush-rgb-light-green: 139, 195, 74;
--mush-rgb-lime: 205, 220, 57;
--mush-rgb-yellow: 255, 235, 59;
--mush-rgb-amber: 255, 193, 7;
--mush-rgb-orange: 255, 152, 0;
--mush-rgb-deep-orange: 255, 87, 34;
--mush-rgb-brown: 121, 85, 72;
--mush-rgb-grey: 158, 158, 158;
--mush-rgb-blue-grey: 96, 125, 139;
--mush-rgb-black: 0, 0, 0;
--mush-rgb-white: 255, 255, 255;

# customize the lock colors here
--mush-rgb-state-lock-locked: var(--mush-rgb-red);
--mush-rgb-state-lock-unlocked: var(--mush-rgb-green);
--mush-rgb-state-lock-pending: var(--mush-rgb-orange);

You can also theme the card using card mod (if you want to customize a card locally)

type: custom:mushroom-lock-card
entity: lock.door
card_mod:
  style: |
    :host {
          --rgb-state-lock-locked: var(--rgb-red);
          --rgb-state-lock-unlocked: var(--rgb-green);
          --rgb-state-lock-pending: var(--rgb-orange);
    }

This didn't work. I created a themes folder and inserted there a file "mushroom.yaml" then added Mushroom: at the top with the indented text you posted above so with the rgb colors. After a restart I cannot see the color changing of the door lock card. And card-mod did also not work. But with other card it works, for example in the alarm card i can change the text to red with card-mod. So how exactly this works? Can you please explain? :)

[amaciuc]

@dayt47

Here you can view an example with mushroom-alarm card where both color and icon are changing according to state.

type: custom:mushroom-alarm-control-panel-card
states:
  - armed_away
entity: alarm_control_panel.fake_alarm
show_keypad: true
card_mod:
  style: >
    ha-card {  
    --card-mod-icon: {{ 'mdi:shield-off-outline' if
    (states('alarm_control_panel.fake_alarm') == 'disarmed')else
    'mdi:shield-check-outline'}};  
    --rgb-state-alarm-armed: var(--rgb-green);
    --rgb-state-alarm-disarmed: var(--rgb-red);  
    }

Same strategy for mushroom-lock

type: custom:mushroom-lock-card
entity: lock.kitchen_climate_away_mode
card_mod:
  style: >  
    ha-card {
    --rgb-state-lock-locked: var(--rgb-yellow);
    --rgb-state-lock-unlocked: var(--rgb-blue);  
    }

Make sure to install card_mod

[dayt47]

thank you @amaciuc that works! The problem was the word "host" which should be replaced with "ha-card", like you did. And before ha-card there is no colon. So the code from @piitaya was wrong. But now everything works, thanks :)