#Button card for door sensor state

1 messages · Page 1 of 1 (latest)

serene cedar
#

I have seen the attached picture online. I want exactly such buttons that show the state of my door and window sensors. Unfortunately, the person who posted this did not provide any code. Could someone help me recreate this? I would use mushroom cards and card-mod if necessary.

xq3hc5fhajya1.png
serene cedar
#

Button card for door sensor state

zinc thunder
#

If you want to use the Mushroom card, the icons have their own background so the size is a bit off. (I'm not sure how to change the size of the icon inside the space for the icon). But, here's three options for you: Mushroom template card, stock Button card, and custom:button-card.
EDIT: Added --icon-symbol-size: 0.9em !important; which makes the first icon a bit more to the size of the other two.

20241223-1810.gif
#

Mushroom template card yaml type: custom:mushroom-template-card entity: input_boolean.tester primary: Garage Door layout: vertical icon: mdi:garage icon_color: white card_mod: style: | :host { --mush-icon-size: 60px; --icon-symbol-size: 0.9em !important; {% if is_state(config.entity, 'off') %} --card-mod-icon: mdi:garage-open; --card-background-color: rgb(240,128,127); {% else %} --card-mod-icon: mdi:garage; --card-background-color: rgb(80, 174, 88); {% endif %} } ha-card { border: none; box-shadow: none; } mushroom-shape-icon { --shape-color: none !important; --shape-color-disabled: none !important;} }

#

Button card with card_mod yaml type: button entity: input_boolean.tester name: Garage Door card_mod: style: | ha-card { height: 100px !important; border: none; box-shadow: none; } :host { --card-mod-icon-color: white; {% if is_state(config.entity, 'off') %} --card-mod-icon: mdi:garage-open; --card-background-color: rgb(240,128,127); {% else %} --card-mod-icon: mdi:garage; --card-background-color: rgb(80, 174, 88); {% endif %} }

#

custom:button-card ```yaml
type: custom:button-card
entity: input_boolean.tester
name: Garage Door
styles:
card:
- height: 100px
icon:
- color: white
state:

  • value: 'on'
    icon: mdi:garage
    styles:
    card:
    - background-color: rgb(80, 174, 88)
  • value: 'off'
    icon: mdi:garage-open
    styles:
    card:
    - background-color: rgb(240,128,127)```
serene cedar
#

Thank you very much, that works!

zinc thunder
#

Updated the Mushroom code to make the icon a little bit bigger to match the other two examples.
--icon-symbol-size: 0.9em !important;

lyric sinew
#

@zinc thunder possible using card-mod to get lock state AND lock battery in one card?

zinc thunder
#

It really depends on how you want to see the battery state. For all three cards, maybe something setting the border color could be used (green good, yellow okay, red replace). The Mushroom template card and custom:button-card support secondary lines so you could have a line for the battery state using an appropriate template. The custom:button-card supports custom_fields so you could have it actually "overlay" the information on top of the card.
Now, if you're just wanting card_mod to handle colors that could be done too. (Green locked & battery good, orange unlocked & battery good, etc) but then you'd have a bunch of different colors for different options.
You could, perhaps, make the card blink if the battery is too low.
How would you like to see the battery state?

lyric sinew