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.
1 Like
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.
1 Like
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
1 Like
Again for the win! Very much appreciate the help here.
Is there an easy place to soak up how to do all of this? Trying to not be the guy that constantly posts the easy questions. I’ve read a great deal of documentation and I come from an IT Engineering background. I want to learn the how and why as much as possible. The community here is nothing short of incredible.
I am curious how the basic entities card I was using with MyQ was able to show the door in an “opening” state briefly while transitioning from open to closed or vise versa. Outside of that, I think my garage door card is complete thanks to you all!
For button card the GitHub is very informative to understand it’s capabilities.
I always start with Github to understand HACs modules.
For card-mod start here. It’s an extensive guide.
MyQ had 4 states, Open, Closed, opening, closing. You are down to 2 with On and Off.
Another good link
Thank you so much! Glad I’m not the only one chomping away at this late on a weekend.
1 Like
I’ve reused the code you pasted here to setup my garage door control but when I add it to my dashboard the card is blank. It looks like it is rejecting my YAML as when I reopen the card it hasnt saved the code. I have only one door so I don’t need to stack them.
type: custom:button-card
entity: binary_sensor.front_gate_input_0_input
show_name: false
state:
- value: 'on'
color: rgb(92,184,92)
icon: mdi:garage
- value:'off'
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_roller_door_switch_0
confirmation:
text: Are you sure?
hold_action:
action: more-info
Sorted it out. The indenting was incorrect.