Just setup a Zooz Zen16 relay to replace MyQ and got a pair of ZSE43 Tilt/Shock sensors to show if the doors are open or closed.
I’ve got them all added to HA and operational but am finding that the old Entities Card that I had previously used with MyQ might not cut it as it can seemingly only control actioning the relays but cannot show the open/closed state based of the tilt sensor.
Any direction here would be appreciated!
Mushroom Cover Card especially combined with the Mushroom Template card is pretty customizable.
Forgive my ignorance… How does one combine a card with a template card?
I would suggest layout-card. If you can give me an idea of what you want the card to look like, I can be more specific.
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 40% 20% 40%
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-template-card
icon: mdi:garage
icon_color: green
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mushroom-template-card
icon: mdi:arrow-up-bold
icon_color: yellow
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mushroom-template-card
icon: mdi:arrow-down-bold
icon_color: yellow
card_mod:
style: |
ha-card {
border: none;
}
I ended up using a button card (also ported to a Mushroom chip for a different dashboard, but same general idea). The inclusion of error states was helpful when I was using the Zooz tilt sensors since occasionally they’d get in a weird state. Ultimately I moved to hardwired reed sensors (Tane 66) and have been much happier.
Doors Closed
Door Open
A tap on either door opens a confirmation dialog, and ultimately triggers the relay.
- type: horizontal-stack
cards:
- type: custom:button-card
entity: binary_sensor.garage_door_relay_sensor_state_door_1
show_name: false
state:
- value: 'off'
color: rgb(92,184,92)
icon: mdi:garage
- value: 'on'
color: rgb(255,193,7)
icon: mdi:garage-open
- value: unknown
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
- value: unavailable
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
tap_action:
action: call-service
service: switch.toggle
data:
entity_id: switch.garage_door_relay_1
confirmation:
text: Are you sure?
hold_action:
action: more-info
- type: custom:button-card
entity: binary_sensor.garage_door_relay_sensor_state_door_2
show_name: false
state:
- value: 'off'
color: rgb(92,184,92)
icon: mdi:garage
- value: 'on'
color: rgb(255,193,7)
icon: mdi:garage-open
- value: unknown
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
- value: unavailable
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
tap_action:
action: call-service
service: switch.toggle
data:
entity_id: switch.garage_door_relay_2
confirmation:
text: Are you sure?
hold_action:
action: more-info
Is this for 2 doors? I have 2 and would ideally like to have them both uniquely identified on the same card if possible. Would love to have some sort of status with the icon that can show if the door is in motion (opening/closing) if possible but not sure how that might be configured.
Basically the goal is to have a single card that lists both main and 3rd stall garage doors. The icon would change colors green for closed and red for open based on the sensor state. Clicking on the garage door icon would trigger the Zooz relay for the respective door and open or close it. Bonus points for the icon being able to show the door is opening or closing as well in some fashion.
Edited my original post to give you the code for two button cards nested in a horizontal stack.
Obviously, you’re going to have to change the entity names for both the button card state and the target of the service call. So change
entity: binary_sensor.garage_door_relay_sensor_state_door_1
to whatever you’ve named your ZSE43 entity
and
entity_id: switch.garage_door_relay_1
to whatever you’ve named your ZEN16’s relay(s)
Change the ‘on’ state color to something like rgb(217,83,79) if you want red for door open.
This should get you what you want, minus showing the door in motion which you might be able to do leveraging the tamper/shock entity the ZSE43 creates, but that always seemed like more trouble than it was worth when I was using the devices.
Thank you for this! When I paste this into the yaml editor with my sensors and relay entities it simply says configuration errors detected no type provided and won’t let me save. I’ve tried doing this starting with a Horizontal Stack Card from Add Card and also from Manual mode.
Code below. Please let me know what I might be missing. Thanks!
- type: horizontal-stack
cards:
- type: custom:button-card
entity: binary_sensor.main_garage_sensor
show_name: false
state:
- value: 'off'
color: rgb(92,184,92)
icon: mdi:garage
- value: 'on'
color: rgb(255,193,7)
icon: mdi:garage-open
- value: unknown
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
- value: unavailable
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
tap_action:
action: call-service
service: switch.toggle
data:
entity_id: switch.main_garage_door
confirmation:
text: Are you sure?
hold_action:
action: more-info
- type: custom:button-card
entity: binary_sensor.3rd_stall_garage_door_sensor
show_name: false
state:
- value: 'off'
color: rgb(92,184,92)
icon: mdi:garage
- value: 'on'
color: rgb(217,193,7)
icon: mdi:garage-open
- value: unknown
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
- value: unavailable
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
tap_action:
action: call-service
service: switch.toggle
data:
entity_id: switch.3rd_stall_garage_door
confirmation:
text: Are you sure?
hold_action:
action: more-info
type: horizontal-stack
cards:
- type: custom:button-card
entity: binary_sensor.main_garage_sensor
show_name: false
state:
- value: 'off'
color: rgb(92,184,92)
icon: mdi:garage
- value: 'on'
color: rgb(255,193,7)
icon: mdi:garage-open
- value: unknown
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
- value: unavailable
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
tap_action:
action: call-service
service: switch.toggle
data:
entity_id: switch.main_garage_door
confirmation:
text: Are you sure?
hold_action:
action: more-info
- type: custom:button-card
entity: binary_sensor.3rd_stall_garage_door_sensor
show_name: false
state:
- value: 'off'
color: rgb(92,184,92)
icon: mdi:garage
- value: 'on'
color: rgb(217,193,7)
icon: mdi:garage-open
- value: unknown
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
- value: unavailable
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
tap_action:
action: call-service
service: switch.toggle
data:
entity_id: switch.3rd_stall_garage_door
confirmation:
text: Are you sure?
hold_action:
action: more-info
paste it like this
Its working!!! Greatly appreciate the help… Seems that I had a bit of a formatting issue however not exactly sure what it was but its working now.
Follow up question to tune this in a bit. How would I go about making the icons a bit smaller or similar look and feel to the standard HA mdi icon size and fonts?
Attached image of my old (myq) garage door card and the new one below. The up and down arrows aren’t so important to me but trying to keep things looking similar across the dash cards for now.
Add size: 3em and adjust to your liking
type: horizontal-stack
cards:
- type: custom:button-card
entity: binary_sensor.main_garage_sensor
size: 3em
show_name: false
state:
- value: 'off'
color: rgb(92,184,92)
icon: mdi:garage
- value: 'on'
color: rgb(255,193,7)
icon: mdi:garage-open
- value: unknown
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
- value: unavailable
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
tap_action:
action: call-service
service: switch.toggle
data:
entity_id: switch.main_garage_door
confirmation:
text: Are you sure?
hold_action:
action: more-info
- type: custom:button-card
entity: binary_sensor.3rd_stall_garage_door_sensor
size: 3em
show_name: false
state:
- value: 'off'
color: rgb(92,184,92)
icon: mdi:garage
- value: 'on'
color: rgb(217,193,7)
icon: mdi:garage-open
- value: unknown
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
- value: unavailable
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
tap_action:
action: call-service
service: switch.toggle
data:
entity_id: switch.3rd_stall_garage_door
confirmation:
text: Are you sure?
hold_action:
action: more-info
Perfect! One more since we are on a roll here 
How would I include the open/closed state below the door icon?
type: horizontal-stack
cards:
- type: custom:button-card
entity: binary_sensor.main_garage_sensor
size: 3em
show_name: false
show_state: true
state:
- value: 'off'
color: rgb(92,184,92)
icon: mdi:garage
- value: 'on'
color: rgb(255,193,7)
icon: mdi:garage-open
- value: unknown
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
- value: unavailable
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
tap_action:
action: call-service
service: switch.toggle
data:
entity_id: switch.main_garage_door
confirmation:
text: Are you sure?
hold_action:
action: more-info
- type: custom:button-card
entity: binary_sensor.3rd_stall_garage_door_sensor
size: 3em
show_name: false
show_state: true
state:
- value: 'off'
color: rgb(92,184,92)
icon: mdi:garage
- value: 'on'
color: rgb(217,193,7)
icon: mdi:garage-open
- value: unknown
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
- value: unavailable
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
tap_action:
action: call-service
service: switch.toggle
data:
entity_id: switch.3rd_stall_garage_door
confirmation:
text: Are you sure?
hold_action:
action: more-info
use show_state: true
Much appreciated. Is there a good place to validate/correct yaml inputs for HA?
I’ve tried a few yaml linters but never seem to get a perfect copy paste to work.
Not directly that I know of. I use Notepad+ for alignment on larger cards. The copy and paste can be an issue espicially with ‘tab’ spaced entries
Copy! That did the trick. Can the font size be changed independently from the icon?
If I wanted the state “open/closed” to be a smaller font than “garage door”. I know I’m starting to get picky. Curious what the boundaries are here
Definitely can be different, Can you post what it looks like now?
type: horizontal-stack
cards:
- type: custom:button-card
entity: binary_sensor.main_garage_sensor
size: 3em
show_name: null
show_state: true
name: Main Garage Door
state:
- value: 'off'
color: rgb(92,184,92)
icon: mdi:garage-variant
- value: 'on'
color: rgb(255,193,7)
icon: mdi:garage-open
- value: unknown
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
- value: unavailable
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
tap_action:
action: call-service
service: switch.toggle
data:
entity_id: switch.main_garage_door
confirmation:
text: Are you sure?
hold_action:
action: more-info
- type: custom:button-card
entity: binary_sensor.3rd_stall_garage_door_sensor
size: 3em
show_name: null
show_state: true
name: 3rd Stall Garage Door
state:
- value: 'off'
color: rgb(92,184,92)
icon: mdi:garage
- value: 'on'
color: rgb(217,193,7)
icon: mdi:garage-open
- value: unknown
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
- value: unavailable
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
tap_action:
action: call-service
service: switch.toggle
data:
entity_id: switch.3rd_stall_garage_door
confirmation:
text: Are you sure?
hold_action:
action: more-info
You can make your adjustments here. I added it to the bottom of each button card.
styles:
name:
- font-size: 15px
state:
- font-size: 10px
Full card code
cards:
- type: custom:button-card
entity: binary_sensor.main_garage_sensor
size: 3em
show_name: true
show_state: true
name: Main Garage Door
state:
- value: 'off'
color: rgb(92,184,92)
icon: mdi:garage
- value: 'on'
color: rgb(255,193,7)
icon: mdi:garage-open
- value: unknown
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
- value: unavailable
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
tap_action:
action: call-service
service: switch.toggle
data:
entity_id: switch.main_garage_door
confirmation:
text: Are you sure?
hold_action:
action: more-info
styles:
name:
- font-size: 15px
state:
- font-size: 10px
- type: custom:button-card
entity: binary_sensor.3rd_stall_garage_door_sensor
size: 3em
show_name: true
name: 3rd Stall Garage Door
show_state: true
state:
- value: 'off'
color: rgb(92,184,92)
icon: mdi:garage
- value: 'on'
color: rgb(217,193,7)
icon: mdi:garage-open
- value: unknown
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
- value: unavailable
color: rgb(217,83,79)
icon: mdi:garage-alert
styles:
card:
- animation: blink 2s ease infinite
tap_action:
action: call-service
service: switch.toggle
data:
entity_id: switch.3rd_stall_garage_door
confirmation:
text: Are you sure?
hold_action:
action: more-info
styles:
name:
- font-size: 15px
state:
- font-size: 10px