Best way to create a tile card for a push button garage door (Shelly Plus Uni + reed switch)?

Configuration Frontend
1

I’m using a Shelly Plus Uni to control my garage door:

  • OUT1 is connected to the garage controller’s push button input (configured with auto-off = 0.5s)
  • IN1 is connected to a reed switch to detect whether the door is fully open(i have it mounted when the door in the open position)

I’d like to create a Tile card (or custom card) in Home Assistant that displays the door status(closed, open, in-motion maybe), triggers the push button input to start moving the door and optionally shows a loading indicator or icon while the door is in motion(since the reed switch only updates after the door fully opens, no problem when it starts to close).

What i came up with, and wondering if anyone has a better solution:

  • Created an input boolean helper called “garage_door_loading”
  • Created 3 automations:
    • one that changes the helper to “on” when the shelly switch changes to “on”
    • one that sets the helper to “off” when the shelly IN1 sensor changes(to either off or on)
    • one as a backup, to set the helper to “off” after a 10 second timeout after it was changed to on

And then i created a card with card-mod like so:

type: tile
entity: switch.garage_door_trigger
tap_action:
  action: toggle
name: Garage Door
card_mod:
  style: |
    ha-card {
      {% if is_state('binary_sensor.garage_door_sensor', 'off') %}
        --tile-color: green !important;
        --card-mod-icon: mdi:garage !important;
      {% else %}
        --tile-color: orange !important;
        --card-mod-icon: mdi:garage-open !important;
      {% endif %}
    }

    ha-card:after {
      content: "";
      position:absolute;
      display: none;
      right: 10px;
      top: 50%;
      width: 10px;
      height: 10px;
      background: lightblue;
      margin-top: -5px;
      animation: infinite 1s spinner;

      {% if is_state('input_boolean.garage_door_loading', 'on') %}
        display:block;
      {% endif %}
    }

    ha-tile-info:after {
      {% if is_state('input_boolean.garage_door_loading', 'on') %}
        content: "In motion";
      {% elif is_state('binary_sensor.garage_door_sensor', 'off') %}
        content: "Closed";
      {% else %}
        content: "Open";
      {% endif %}
      position: absolute;
      width: 100%;
      font-size: 12px;
      bottom: -2px;
      background: #fff;
    }

And this gave me a nice looking tile:

image
image960×600 43.6 KB

So it has a custom green / orange icon based on the sensor, a custom state text and a loading indicator when the door is in motion(in theory).

What do you think about this solution? I’m a beginner, so there might be a way simpler solution i’m not aware of.

Thanks

2

V2, i was able to clean up the styles and make a better looking loading indicator

image
image504×142 6.92 KB

type: tile
entity: switch.garage_door_right_trigger
features_position: bottom
vertical: false
tap_action:
  action: toggle
name: Garage Door
card_mod:
  style:
    .: |
      ha-card {
        --tile-color: orange !important;
        --card-mod-icon: mdi:garage-open;

        {% if is_state('binary_sensor.garage_door_right_sensor', 'off') %}
          --tile-color: green !important;
          --card-mod-icon: mdi:garage;
        {% endif %}
      }
    ha-tile-icon$: |
      .container:after {
        inset: 0;
        position: absolute;
        content: "";
        border-width: 2px;
        border-style: solid;
        border-color: var(--tile-color) var(--tile-color) var(--tile-color) transparent;
        border-radius: 50%;
        display: none;
        animation: infinite linear 1s spinner;
        
        {% if is_state('input_boolean.garage_door_right_loading', 'on') %}
          display:block;
        {% endif %}

      }

      @keyframes spinner {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      }
    ha-tile-info$: |
      .secondary {
        visibility: hidden;
      }

      .secondary:before {
        visibility: visible;
        {% if is_state('input_boolean.garage_door_right_loading', 'on') %}
          content: "In motion...";
        {% elif is_state('binary_sensor.garage_door_right_sensor', 'off') %}
          content: "Closed";
        {% else %}
          content: "Open";
        {% endif %}
      }