Help with new Garage Door Card

Configuration Frontend
21

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!

22

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.

1 Like
23

MyQ had 4 states, Open, Closed, opening, closing. You are down to 2 with On and Off.

Another good link

24

Thank you so much! Glad I’m not the only one chomping away at this late on a weekend.

1 Like
25

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
26

Sorted it out. The indenting was incorrect.

27

are you able to post the correct code? looking for the same. :slight_smile:

28

Modified the code a little bit to be handle more states with ratgdo.

type: custom:button-card
entity: cover.ratgdov25i_door
show_name: false
show_state: true
state:
  - value: 'closed'
    icon: mdi:garage
  - value: 'closing'
    color: rgb(255,193,7)
    icon: mdi:garage-open
    styles:
      card:
        - animation: blink 1s infinite
  - value: 'open'
    color: rgb(92,184,92)
    icon: mdi:garage-open
  - value: 'opening'
    color: rgb(92,184,92)
    icon: mdi:garage-open
    styles:
      card:
        - animation: blink 1s infinite
  - 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: button.press
  data:
    entity_id: button.ratgdov25i_toggle_door
  confirmation:
    text: Are you sure ?
hold_action:
  action: more-info
29

I guess I’m replying to a very old thread, but was similarly frustrated to not find a visually appealing garage door card anywhere out there.

Took the plunge and made my own (w/claude). Love how it looks and works… i made horizontal and vertical formats. I know they’re not space-efficient… but i wanted something more visual than tiny.

image
image1092×1014 69.7 KB

The whole card is green when door is closed (safe), turns yellow when door is opening, and is red (unsafe) when door is open.

Still debating if i prefer the buttons along the bottom or along the right side.

4 Likes
30

Hey HA-josh! I really like your garage door tiles. Would mind sharing the yaml? Thanks in advance!

31

This kind of card is absolutely what I've been looking for! Please paste the code, if you don't mind.