Combined Lock & Door Status in single Entity for Glance Card?

[ziptbm]

Has anyone figured out a way to combine door open/close status with the lock status for entities in a Glance Card?

It seems so duplicative to require two icons for each door. Both are important data points, but they’re related and it seems like there should be a way to combine them and save precious screen real-estate. For example, there are only four statuses:

• Door is open and lock is unlocked → door open status is the most important detail since it can be assumed that the lock is unlocked if door is open. Show only that Door is Open if lock is unlocked.
• Door is closed and lock is unlocked → lock status is the most important detail since it can be assumed that the door is closed if showing unlocked. Show only that lock is unlocked if door is closed.
• Door is closed and lock is locked → lock status is the most important details since it can be assumed that the door is lcosed if showing locked. Show only that lock is locked if door is closed.
• Door is open and lock is locked → the issue is the most important detail here since the door cannot be closed if door is locked and therefore will require unlock the lock AND physically close the door (assuming it’s not an automatic or controllable door). Show an error icon of some sort to indicate that attention is needed to resolve.

This seems like something that might be possible through a template sensor, but I’m still learning how to build those with logic like this. So, I’ve been looking for other examples to see if others have solved this or done something similar.

[Mr_Flibble]

I have been looking for this exact solution myself, it should be possible with something like this:

Template Lock

More details here:

Combined Lock Entity?

I’m very new to yaml, so bear with me…Is it possible to create a sensor/entity that’s a combination of a sensor and a lock status. I have a yale YRD 256 lock. One of the entitys (lock.lock_front_door) will report if the door is locked or unlocked…and another sensor (binary_sensor.lock_front_door_access_control_locked_jammed) will report if the lock is jammed or not. It’s a combination of a door lock and door open sensor. My goal is to create a sensor that I can view on my lovelace dashboard tha…

So it seems like it is possible. I have not yet figured out how though.

Another good discussion here:

Combined Sensor/Lock Template

I’m trying to create a template that’s kind of a combination of a sensor and a lock (or switch). It’s a combination of a door lock and door open sensor. I can create a template sensor easy enough: “Open” when door sensor is open “Locked” when door sensor is closed and door lock is locked “Unlocked” otherwise What I’d like to do is combine this in a single template entity with a lock/switch to control the door lock. If the door is “Open”, no control allowed If the door sensor is closed, the…

[Mr_Flibble]

So, update, I still can’t get this working. I am having issues with the templates. I have tried using ‘helpers’ as well as building the templates out in my dedicated ‘sensor.yaml’ file, and in either case, the sensor comes back as ‘unknown’. I have tried so many different permutations of the following I have lost count:

{% if ( (state_attr('lock.front_door', 'Unlocked')) or not (state_attr('binary_sensor.door_front_entry_window_door_is_open', 'Closed'))) %}
  Unlocked
{% elif ( (state_attr('lock.front_door', 'Locked')) or not (state_attr('binary_sensor.door_front_entry_window_door_is_open', 'Open'))) %}
  Open
{% elif ( (state_attr('lock.front_door', 'Locked')) or not (state_attr('binary_sensor.door_front_entry_window_door_is_open', 'Closed'))) %}
  Unlocked
{% else %}
  Unknown
{% endif %}

Tried re-arranging where the terms are, tried fewer parenthesis, tried more, tried using not, tried non not using not. Tried AND. Tried using is_state instead of state_attr.

Same results every time. I am clearly missing something in the templates.

[Mr_Flibble]

Another good discussion here:

Create template sensor to combine multiple entities

{% if is_state('binary_sensor.wyzesense_frontdoor', 'on') and not is_state('lock.frontdoor', 'locked') %} Open {% elif is_state('lock.frontdoor', 'locked') %} Locked Sorry cant test but it would be like this… You should be able to figure it all out from this.

[ziptbm]

Great discussion here.

With that said, it seems like this went down the path of building custom sensors that still only show one of the two statuses that I was looking to capture in a single entity icon from the original post.

Here’s one of the cards in my dashboard.

• 2 icons for Front… - the first is door status and the second is lock status
• 2 icons for Mudr… - the first is door status and second is lock status
• 2 icons for Outsi… - the first is door status and the second is lock status

The source of these sensors is an August Lock with Door Sense. So it’s providing status for both lock and door, but as two separate sensors. The original intent of this post was to see if I could somehow merge those into a single glance entity icon that could show me both aspects together and take up less space. One thing I realize from the conversation is that I could use a condition to hide door status when it’s closed and the lock is locked, but it’s still not as obvious to the user as the native August Lock icon/control (see below).

This is able to quickly convey the status of open/closed and locked/unlocked, so my goal was to combine the two icons in the glance card into one somehow.

[Mr_Flibble]

I like that.!

I am going to have to combine that with the status template sensor. Basically, it now works that for each door I have:

• Locked
• Unlocked
• Open
• Locked and Open
• Unknown

I should be able to turn that into single icons like you did.

I got the combined logic working by resurrecting an old thread here:

Create template sensor to combine multiple entities

GOT IT! Thanks @mobile.andrew.jones You got me down the right path. Here is the code: {% if ( (is_state('lock.front_door','unlocked')) and (is_state('binary_sensor.door_front_entry_window_door_is_open','off')) ) %} Unlocked {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','on')) and (is_state('lock.front_door','locked')) ) %} Locked Open {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','off')) and (is_state('lock.front_door','locked')) ) %} …

[ziptbm]

Interesting. So what does the icon look like in each state? Is it truly one entity in a glance card? And does it change color with state?

[Mr_Flibble]

I haven’t yet figured out a single icon card with colours - I will be working on that. Right now, I am using a conditional card such that it is hidden in the GUI until the conditions are met. So the card only appears when all the doors are closed and locked:

type: conditional
conditions:
  - condition: state
    entity: sensor.all_doors_status
    state: All Doors Locked
card:
  type: entity
  entity: sensor.all_doors_status

I got part way there with some custom cards:

The logic in this thread looks very promising, I think it is the full solution as I already have the states working as helpers. However, because icons are needed, I think I need to do this in full YAML, and have the sensor defined with the logic, then the mdi icons defined with the logic again as below:

Step by step guide: Change icon based on state

Ran into this and use some of the code for my purpose (a door that can be open / closed or locked). Thank you! In my case a binary sensor does not work since that can only have 2 states, not 3, so I build a “normal” sensor that you can use in Lovelace. Code below, works for me. @thompy93 perhaps you can try this. Please do make sure that you add the sensor under the correct part of the config. I see in your initial post that you start with “template”, instead of binary sensor: and than templat…

[Mr_Flibble]

Ok, I have working code for the icon state and the door. This stanza is only for the front door, I have a stanza for each door, and one specifically to combine all the doors into a single entity. What I am missing now is the ability to colour the icons based on the state, but having seen other posts that do just that, I should be able to figure that out.

Here is the logic for the front door as a single icon showing the state and icons:

  - platform: template
    sensors:
      front_door_status_test:
        friendly_name: "Front Door Status Test"
        value_template: >-
          {% if ( (is_state('lock.front_door','unlocked')) and (is_state('binary_sensor.door_front_entry_window_door_is_open','off')) ) %}
            Unlocked
          {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','on')) and (is_state('lock.front_door','locked')) ) %}
            Locked Open
          {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','off')) and (is_state('lock.front_door','locked')) ) %}
            Locked
          {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','on')) and (is_state('lock.front_door','unlocked')) ) %}
            Open
          {% else %}
            Unknown
          {% endif %}
        icon_template: >-
          {% if ( (is_state('lock.front_door','unlocked')) and (is_state('binary_sensor.door_front_entry_window_door_is_open','off')) ) %}
            mdi:lock-open
          {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','on')) and (is_state('lock.front_door','locked')) ) %}
            mdi:door-closed-cancel
          {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','off')) and (is_state('lock.front_door','locked')) ) %}
            mdi:lock
          {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','on')) and (is_state('lock.front_door','unlocked')) ) %}
            mdi:door-open
          {% else %}
            mdi:lock-question
          {% endif %}

The icon changes based on the states, but I still have not figured out how to set the colour properly. This will probably need card-mod I am guessing.

Ok, really close now. First, I have a test sensor that changes the icon and state as per above.

Next, I have an entity card:

type: entities
entities:
  - entity: sensor.front_door_status_sc_2
card_mod:
  style: |
    ha-card {
        {% if states('sensor.front_door_status_sc_2') == 'Locked' %}
        color: green;
        {% elif states('sensor.front_door_status_sc_2') == 'Unlocked' %}
        color: red;
        {% elif states('sensor.front_door_status_sc_2') == 'Open' %}
        color: blue;
        {% elif states('sensor.front_door_status_sc_2') == 'Closed' %}
        color: yellow;
        {% else %}
        color: orange;
        {% endif %}
             } 

This does NOT change the colour of the icon yet, but it does change the colour of the text!

---

GOT IT:

type: entities
entities:
  - entity: sensor.front_door_status_sc_2
card_mod:
  style: |
    ha-card {
        {% if states('sensor.front_door_status_sc_2') == 'Locked' %}
        --card-mod-icon-color: green;
        {% elif states('sensor.front_door_status_sc_2') == 'Unlocked' %}
        --card-mod-icon-color: red;
        {% elif states('sensor.front_door_status_sc_2') == 'Open' %}
        --card-mod-icon-color: blue;
        {% elif states('sensor.front_door_status_sc_2') == 'Closed' %}
        --card-mod-icon-color: yellow;
        {% else %}
        --card-mod-icon-color: orange;
        {% endif %}
             } 

This changes the colour of the icon based on the state of the sensor, and gives you a single icon for all states of the lock and the door combined.

Will do a few more card edits to see if I can make something cleaner.

This is going to take me some work later, but here is an idea of how it looks:

Still in testing, so kind of ugly, and not perfected, But I think that “All Doors” one will work. Hopefully, with “tap action” I will also be able to lock or unlock the indivdual doors.

Here is the code that powers the “All Doors” display (Its a mess, not for production):

entities:
  - card_type: horizontal-stack
    cards:
      - entity: sensor.all_doors_status
        icon: mdi:lock
        template: menu_button
        type: custom:button-card
      - entity: sensor.front_door_status_sc_2
        card_mod:
          style: |
            ha-card {
              {% if states('sensor.front_door_status_sc_2') == 'Locked' %}
                --card-mod-icon-color: green;
              {% elif states('sensor.front_door_status_sc_2') == 'Unlocked' %}
                --card-mod-icon-color: red;
              {% elif states('sensor.front_door_status_sc_2') == 'Open' %}
                --card-mod-icon-color: blue;
              {% elif states('sensor.front_door_status_sc_2') == 'Closed' %}
                --card-mod-icon-color: yellow;
              {% else %}
                --card-mod-icon-color: orange;
              {% endif %}
                 } 
        tap_action:
          service: lock.breezeway
        template: menu_button
        type: custom:button-card
      - entity: sensor.porch_door_status_sc
        card_mod:
          style: |
            ha-card {
                {% if states('sensor.porch_door_status_sc') == 'Locked' %}
                --card-mod-icon-color: green;
                {% elif states('sensor.porch_door_status_sc') == 'Unlocked' %}
                --card-mod-icon-color: red;
                {% elif states('sensor.porch_door_status_sc') == 'Open' %}
                --card-mod-icon-color: blue;
                {% elif states('sensor.porch_door_status_sc') == 'Closed' %}
                --card-mod-icon-color: yellow;
                {% else %}
                --card-mod-icon-color: orange;
                {% endif %}
                     }
        tap_action:
          service: lock.porch
        template: menu_button
        type: custom:button-card
      - entity: lock.breezeway
        icon: mdi:lock
        name: Breezeway
        tap_action:
          service: sensor.front_door_status
        template: menu_button
        type: custom:button-card
      - entity: lock.basement
        icon: mdi:lock
        name: Basement
        tap_action:
          service: script.samsung_upstairs_tv_input_kodi
        template: menu_button
        type: custom:button-card
    type: custom:hui-element
show_header_toggle: false
title: All Doors
type: entities

When I have more time, I will try to clean this up. In a nutshell, there are two components. One is creating the sensor that shows the combined state and the mdi icon, the other is setting the colour of the icon in the GUI.

[Mr_Flibble]

Ok, here is the solution (so far) that does not (yet) use the toggle function. The plan I have is to allow the button to also lock/unlock the door - IF the door is closed.

First, you need the following for each of your doors to build the combined sensor:

  - platform: template
    sensors:
      front_door_status_sc:
        friendly_name: "Front Door Status Test"
        unique_id: front-door-status-9ff7b07a-9d76-48aa-99f8-931126715014
        value_template: >-
          {% if ( (is_state('lock.front_door','unlocked')) and (is_state('binary_sensor.door_front_entry_window_door_is_open','off')) ) %}
            Unlocked
          {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','on')) and (is_state('lock.front_door','locked')) ) %}
            Locked Open
          {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','off')) and (is_state('lock.front_door','locked')) ) %}
            Locked
          {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','on')) and (is_state('lock.front_door','unlocked')) ) %}
            Open
          {% else %}
            Unknown
          {% endif %}
        icon_template: >-
          {% if ( (is_state('lock.front_door','unlocked')) and (is_state('binary_sensor.door_front_entry_window_door_is_open','off')) ) %}
            mdi:lock-open
          {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','on')) and (is_state('lock.front_door','locked')) ) %}
            mdi:door-closed-cancel
          {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','off')) and (is_state('lock.front_door','locked')) ) %}
            mdi:lock
          {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','on')) and (is_state('lock.front_door','unlocked')) ) %}
            mdi:door-open
          {% else %}
            mdi:lock-question
          {% endif %}

Then you need an entities card in the GUI (I am using the css mod from above):

entities:
  - card_type: horizontal-stack
    cards:
      - entity: sensor.front_door_status_sc_2
        card_mod:
          style: |
            ha-card {
              {% if states('sensor.front_door_status_sc_2') == 'Locked' %}
                --card-mod-icon-color: green;
              {% elif states('sensor.front_door_status_sc_2') == 'Unlocked' %}
                --card-mod-icon-color: red;
              {% elif states('sensor.front_door_status_sc_2') == 'Open' %}
                --card-mod-icon-color: blue;
              {% elif states('sensor.front_door_status_sc_2') == 'Closed' %}
                --card-mod-icon-color: yellow;
              {% else %}
                --card-mod-icon-color: orange;
              {% endif %}
                 } 
        tap_action:
          service: lock.front_door
        name: Front
        template: menu_button
        type: custom:button-card

If you do all your doors like this, you should see:

And each door shows the corresponding state and colours!

Next up… the toggle.

---

TOGGLE WORKING:
Here is the code for the GUI - no change to the sensor.

IMPORTANT PREREQUISITES
HACS: Add Ons Needed:

• button-card
• hui-element
• card-mod

You also need to build the Multi-States for your sensors (see above).

With this, you can click on the front door icon and lock, or unlock it with a press. The only drawback is that you can lock it while the door is open - the advantage is that you can actually see that state in the icons, so you can see you messed up:

entities:
  - card_type: horizontal-stack
    cards:
      - entity: sensor.front_door_status_sc_2
        card_mod:
          style: |
            ha-card {
              {% if states('sensor.front_door_status_sc_2') == 'Locked' %}
                --card-mod-icon-color: green;
              {% elif states('sensor.front_door_status_sc_2') == 'Unlocked' %}
                --card-mod-icon-color: red;
              {% elif states('sensor.front_door_status_sc_2') == 'Open' %}
                --card-mod-icon-color: blue;
              {% elif states('sensor.front_door_status_sc_2') == 'Closed' %}
                --card-mod-icon-color: yellow;
              {% else %}
                --card-mod-icon-color: orange;
              {% endif %}
                 } 
        tap_action:
          action: call-service
          service: |
            [[[
              return (entity.state === 'Locked') ? 'lock.unlock' : 'lock.lock';
            ]]]
          service_data:
            entity_id: lock.front_door
        name: Front
        template: menu_button
        type: custom:button-card
      - entity: sensor.porch_door_status_sc
        card_mod:
          style: |
            ha-card {
                {% if states('sensor.porch_door_status_sc') == 'Locked' %}
                --card-mod-icon-color: green;
                {% elif states('sensor.porch_door_status_sc') == 'Unlocked' %}
                --card-mod-icon-color: red;
                {% elif states('sensor.porch_door_status_sc') == 'Open' %}
                --card-mod-icon-color: blue;
                {% elif states('sensor.porch_door_status_sc') == 'Closed' %}
                --card-mod-icon-color: yellow;
                {% else %}
                --card-mod-icon-color: orange;
                {% endif %}
                     }
        tap_action:
          action: call-service
          service: |
            [[[
              return (entity.state === 'Locked') ? 'lock.unlock' : 'lock.lock';
            ]]]
          service_data:
            entity_id: lock.deck
        name: Porch
        template: menu_button
        type: custom:button-card
      - entity: sensor.breezeway_door_status_sc
        card_mod:
          style: |
            ha-card {
                {% if states('sensor.breezeway_door_status_sc') == 'Locked' %}
                --card-mod-icon-color: green;
                {% elif states('sensor.breezeway_door_status_sc') == 'Unlocked' %}
                --card-mod-icon-color: red;
                {% elif states('sensor.breezeway_door_status_sc') == 'Open' %}
                --card-mod-icon-color: blue;
                {% elif states('sensor.breezeway_door_status_sc') == 'Closed' %}
                --card-mod-icon-color: yellow;
                {% else %}
                --card-mod-icon-color: orange;
                {% endif %}
                     }
        name: Breezeway
        tap_action:
          action: call-service
          service: |
            [[[
              return (entity.state === 'Locked') ? 'lock.unlock' : 'lock.lock';
            ]]]
          service_data:
            entity_id: lock.breezeway
        template: menu_button
        type: custom:button-card
      - entity: sensor.basement_door_status_sc
        card_mod:
          style: |
            ha-card {
                {% if states('sensor.basement_door_status_sc') == 'Locked' %}
                --card-mod-icon-color: green;
                {% elif states('sensor.basement_door_status_sc') == 'Unlocked' %}
                --card-mod-icon-color: red;
                {% elif states('sensor.basement_door_status_sc') == 'Open' %}
                --card-mod-icon-color: blue;
                {% elif states('sensor.basement_door_status_sc') == 'Closed' %}
                --card-mod-icon-color: yellow;
                {% else %}
                --card-mod-icon-color: orange;
                {% endif %}
                     }
        name: Basement
        tap_action:
          action: call-service
          service: |
            [[[
              return (entity.state === 'Locked') ? 'lock.unlock' : 'lock.lock';
            ]]]
          service_data:
            entity_id: lock.basement
        template: menu_button
        type: custom:button-card
      - entity: sensor.garage_door_status_sc
        card_mod:
          style: |
            ha-card {
                {% if states('sensor.garage_door_status_sc') == 'Locked' %}
                --card-mod-icon-color: green;
                {% elif states('sensor.garage_door_status_sc') == 'Unlocked' %}
                --card-mod-icon-color: red;
                {% elif states('sensor.garage_door_status_sc') == 'Open' %}
                --card-mod-icon-color: blue;
                {% elif states('sensor.garage_door_status_sc') == 'Closed' %}
                --card-mod-icon-color: yellow;
                {% else %}
                --card-mod-icon-color: orange;
                {% endif %}
                     }
        tap_action:
          action: call-service
          service: |
            [[[
              return (entity.state === 'Locked') ? 'lock.unlock' : 'lock.lock';
            ]]]
          service_data:
            entity_id: lock.garage
        template: menu_button
        name: Garage
        type: custom:button-card
    type: custom:hui-element
show_header_toggle: false
title: All Doors
type: entities

I was working on some zwave configs, and because of that, I was also able to verify the “unknown” state for these icons while the zwave was down:

---

Ok, I think I have what can be considered the solution. First, here is what the card looks like, I have it stacked with two rows. Also, each button will toggle and lock/unlock locks or open/close garages. The color and icon of each will change according to the state:

Here is the GUI side code to make that work:

entities:
  - card_type: horizontal-stack
    cards:
      - entity: sensor.front_door_status_sc_2
        card_mod:
          style: |
            ha-card {
              {% if states('sensor.front_door_status_sc_2') == 'Locked' %}
                --card-mod-icon-color: green;
              {% elif states('sensor.front_door_status_sc_2') == 'Unlocked' %}
                --card-mod-icon-color: red;
              {% elif states('sensor.front_door_status_sc_2') == 'Open' %}
                --card-mod-icon-color: blue;
              {% elif states('sensor.front_door_status_sc_2') == 'Closed' %}
                --card-mod-icon-color: yellow;
              {% else %}
                --card-mod-icon-color: orange;
              {% endif %}
                 } 
        tap_action:
          action: call-service
          service: |
            [[[
              return (entity.state === 'Locked') ? 'lock.unlock' : 'lock.lock';
            ]]]
          service_data:
            entity_id: lock.front_door
        name: Front
        template: menu_button
        type: custom:button-card
      - entity: sensor.porch_door_status_sc
        card_mod:
          style: |
            ha-card {
                {% if states('sensor.porch_door_status_sc') == 'Locked' %}
                --card-mod-icon-color: green;
                {% elif states('sensor.porch_door_status_sc') == 'Unlocked' %}
                --card-mod-icon-color: red;
                {% elif states('sensor.porch_door_status_sc') == 'Open' %}
                --card-mod-icon-color: blue;
                {% elif states('sensor.porch_door_status_sc') == 'Closed' %}
                --card-mod-icon-color: yellow;
                {% else %}
                --card-mod-icon-color: orange;
                {% endif %}
                     }
        tap_action:
          action: call-service
          service: |
            [[[
              return (entity.state === 'Locked') ? 'lock.unlock' : 'lock.lock';
            ]]]
          service_data:
            entity_id: lock.deck
        name: Porch
        template: menu_button
        type: custom:button-card
      - entity: sensor.breezeway_door_status_sc
        card_mod:
          style: |
            ha-card {
                {% if states('sensor.breezeway_door_status_sc') == 'Locked' %}
                --card-mod-icon-color: green;
                {% elif states('sensor.breezeway_door_status_sc') == 'Unlocked' %}
                --card-mod-icon-color: red;
                {% elif states('sensor.breezeway_door_status_sc') == 'Open' %}
                --card-mod-icon-color: blue;
                {% elif states('sensor.breezeway_door_status_sc') == 'Closed' %}
                --card-mod-icon-color: yellow;
                {% else %}
                --card-mod-icon-color: orange;
                {% endif %}
                     }
        tap_action:
          action: call-service
          service: |
            [[[
              return (entity.state === 'Locked') ? 'lock.unlock' : 'lock.lock';
            ]]]
          service_data:
            entity_id: lock.breezeway
        name: Breezeway
        template: menu_button
        type: custom:button-card
      - entity: sensor.basement_door_status_sc
        card_mod:
          style: |
            ha-card {
                {% if states('sensor.basement_door_status_sc') == 'Locked' %}
                --card-mod-icon-color: green;
                {% elif states('sensor.basement_door_status_sc') == 'Unlocked' %}
                --card-mod-icon-color: red;
                {% elif states('sensor.basement_door_status_sc') == 'Open' %}
                --card-mod-icon-color: blue;
                {% elif states('sensor.basement_door_status_sc') == 'Closed' %}
                --card-mod-icon-color: yellow;
                {% else %}
                --card-mod-icon-color: orange;
                {% endif %}
                     }
        name: Basement
        tap_action:
          action: call-service
          service: |
            [[[
              return (entity.state === 'Locked') ? 'lock.unlock' : 'lock.lock';
            ]]]
          service_data:
            entity_id: lock.basement
        template: menu_button
        type: custom:button-card
    type: custom:hui-element
  - card_type: horizontal-stack
    cards:
      - entity: sensor.garage_door_status_sc
        card_mod:
          style: |
            ha-card {
                {% if states('sensor.garage_door_status_sc') == 'Locked' %}
                --card-mod-icon-color: green;
                {% elif states('sensor.garage_door_status_sc') == 'Unlocked' %}
                --card-mod-icon-color: red;
                {% elif states('sensor.garage_door_status_sc') == 'Open' %}
                --card-mod-icon-color: blue;
                {% elif states('sensor.garage_door_status_sc') == 'Closed' %}
                --card-mod-icon-color: yellow;
                {% else %}
                --card-mod-icon-color: orange;
                {% endif %}
                     }
        tap_action:
          action: call-service
          service: |
            [[[
              return (entity.state === 'Locked') ? 'lock.unlock' : 'lock.lock';
            ]]]
          service_data:
            entity_id: lock.garage
        template: menu_button
        name: Garage
        type: custom:button-card
      - entity: sensor.garage_east_door_status_sc
        card_mod:
          style: |
            ha-card {
              {% if states('cover.garage_door_2') == 'open' %}
                --card-mod-icon-color: red;
              {% elif states('cover.garage_door_2') == 'closed' %}
                --card-mod-icon-color: green;
              {% else %}
                --card-mod-icon-color: orange;
              {% endif %}
                 } 
        tap_action:
          action: call-service
          service: cover.toggle
          target:
            entity_id: cover.garage_door_2
        name: East
        template: menu_button
        type: custom:button-card
      - entity: sensor.garage_west_door_status_sc
        card_mod:
          style: |
            ha-card {
              {% if states('cover.garage_door') == 'open' %}
                --card-mod-icon-color: red;
              {% elif states('cover.garage_door') == 'closed' %}
                --card-mod-icon-color: green;
              {% else %}
                --card-mod-icon-color: orange;
              {% endif %}
                 } 
        tap_action:
          action: call-service
          service: cover.toggle
          target:
            entity_id: cover.garage_door
        name: East
        template: menu_button
        type: custom:button-card
      - entity: sensor.garage_shop_door_status_sc
        card_mod:
          style: |
            ha-card {
              {% if states('cover.sgarage') == 'open' %}
                --card-mod-icon-color: red;
              {% elif states('cover.sgarage') == 'closed' %}
                --card-mod-icon-color: green;
              {% else %}
                --card-mod-icon-color: orange;
              {% endif %}
                 } 
        tap_action:
          action: call-service
          service: cover.toggle
          target:
            entity_id: cover.sgarage
        name: Shop
        template: menu_button
        type: custom:button-card
    type: custom:hui-element
show_header_toggle: false
title: All Doors
type: entities 

Within my sensor.yaml I have created some entities that change to power the GUI component:

###############################################
# TEMPLATES For Door States and Garage States #
###############################################

  - platform: template
    sensors:
      front_door_status_sc:
        friendly_name: "Front Door Status"
        unique_id: front-door-status-9ff7b07a-9d76-48aa-99f8-931126715014
        value_template: >-
          {% if ( (is_state('lock.front_door','unlocked')) and (is_state('binary_sensor.door_front_entry_window_door_is_open','off')) ) %}
            Unlocked
          {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','on')) and (is_state('lock.front_door','locked')) ) %}
            Locked Open
          {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','off')) and (is_state('lock.front_door','locked')) ) %}
            Locked
          {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','on')) and (is_state('lock.front_door','unlocked')) ) %}
            Open
          {% else %}
            Unknown
          {% endif %}
        icon_template: >-
          {% if ( (is_state('lock.front_door','unlocked')) and (is_state('binary_sensor.door_front_entry_window_door_is_open','off')) ) %}
            mdi:lock-open
          {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','on')) and (is_state('lock.front_door','locked')) ) %}
            mdi:door-closed-cancel
          {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','off')) and (is_state('lock.front_door','locked')) ) %}
            mdi:lock
          {% elif ( (is_state('binary_sensor.door_front_entry_window_door_is_open','on')) and (is_state('lock.front_door','unlocked')) ) %}
            mdi:door-open
          {% else %}
            mdi:lock-question
          {% endif %}

  - platform: template
    sensors:
      porch_door_status_sc:
        friendly_name: "Porch Door Status"
        unique_id: porch-door-status-8ac9a06a-2d77-48aa-99f8-941226715014
        value_template: >-
          {% if ( (is_state('lock.deck','unlocked')) and (is_state('binary_sensor.door_porch_window_door_is_open','off')) ) %}
            Unlocked
          {% elif ( (is_state('binary_sensor.door_porch_window_door_is_open','on')) and (is_state('lock.deck','locked')) ) %}
            Locked Open
          {% elif ( (is_state('binary_sensor.door_porch_window_door_is_open','off')) and (is_state('lock.deck','locked')) ) %}
            Locked
          {% elif ( (is_state('binary_sensor.door_porch_window_door_is_open','on')) and (is_state('lock.deck','unlocked')) ) %}
            Open
          {% else %}
            Unknown
          {% endif %}
        icon_template: >-
          {% if ( (is_state('lock.deck','unlocked')) and (is_state('binary_sensor.door_porch_window_door_is_open','off')) ) %}
            mdi:lock-open
          {% elif ( (is_state('binary_sensor.door_porch_window_door_is_open','on')) and (is_state('lock.deck','locked')) ) %}
            mdi:door-closed-cancel
          {% elif ( (is_state('binary_sensor.door_porch_window_door_is_open','off')) and (is_state('lock.deck','locked')) ) %}
            mdi:lock
          {% elif ( (is_state('binary_sensor.door_porch_window_door_is_open','on')) and (is_state('lock.deck','unlocked')) ) %}
            mdi:door-open
          {% else %}
            mdi:lock-question
          {% endif %}

  - platform: template
    sensors:
      breezeway_door_status_sc:
        friendly_name: "Breezeway Door Status"
        unique_id: breezeway-door-status-2ad4a16a-3d68-48bb-11f8-491226726111
        value_template: >-
          {% if ( (is_state('lock.breezeway','unlocked')) and (is_state('binary_sensor.door_breezeway_window_door_is_open','off')) ) %}
            Unlocked
          {% elif ( (is_state('binary_sensor.door_breezeway_window_door_is_open','on')) and (is_state('lock.breezeway','locked')) ) %}
            Locked Open
          {% elif ( (is_state('binary_sensor.door_breezeway_window_door_is_open','off')) and (is_state('lock.breezeway','locked')) ) %}
            Locked
          {% elif ( (is_state('binary_sensor.door_breezeway_window_door_is_open','on')) and (is_state('lock.breezeway','unlocked')) ) %}
            Open
          {% else %}
            Unknown
          {% endif %}
        icon_template: >-
          {% if ( (is_state('lock.breezeway','unlocked')) and (is_state('binary_sensor.door_breezeway_window_door_is_open','off')) ) %}
            mdi:lock-open
          {% elif ( (is_state('binary_sensor.door_breezeway_window_door_is_open','on')) and (is_state('lock.breezeway','locked')) ) %}
            mdi:door-closed-cancel
          {% elif ( (is_state('binary_sensor.door_breezeway_window_door_is_open','off')) and (is_state('lock.breezeway','locked')) ) %}
            mdi:lock
          {% elif ( (is_state('binary_sensor.door_breezeway_window_door_is_open','on')) and (is_state('lock.breezeway','unlocked')) ) %}
            mdi:door-open
          {% else %}
            mdi:lock-question
          {% endif %}

  - platform: template
    sensors:
      basement_door_status_sc:
        friendly_name: "Basement Door Status"
        unique_id: breezeway-door-status-2bb6c26a-3a72-44bc-42f5-495256726115
        value_template: >-
          {% if ( (is_state('lock.basement','unlocked')) and (is_state('binary_sensor.door_basement_window_door_is_open','off')) ) %}
            Unlocked
          {% elif ( (is_state('binary_sensor.door_basement_window_door_is_open','on')) and (is_state('lock.basement','locked')) ) %}
            Locked Open
          {% elif ( (is_state('binary_sensor.door_basement_window_door_is_open','off')) and (is_state('lock.basement','locked')) ) %}
            Locked
          {% elif ( (is_state('binary_sensor.door_basement_window_door_is_open','on')) and (is_state('lock.basement','unlocked')) ) %}
            Open
          {% else %}
            Unknown
          {% endif %}
        icon_template: >-
          {% if ( (is_state('lock.basement','unlocked')) and (is_state('binary_sensor.door_basement_window_door_is_open','off')) ) %}
            mdi:lock-open
          {% elif ( (is_state('binary_sensor.door_basement_window_door_is_open','on')) and (is_state('lock.basement','locked')) ) %}
            mdi:door-closed-cancel
          {% elif ( (is_state('binary_sensor.door_basement_window_door_is_open','off')) and (is_state('lock.basement','locked')) ) %}
            mdi:lock
          {% elif ( (is_state('binary_sensor.door_basement_window_door_is_open','on')) and (is_state('lock.basement','unlocked')) ) %}
            mdi:door-open
          {% else %}
            mdi:lock-question
          {% endif %}

  - platform: template
    sensors:
      garage_door_status_sc:
        friendly_name: "Garage Door Status"
        unique_id: garage-door-status-1bbbc85a-2cf2-444f-42f6-405056726105
        value_template: >-
          {% if ( (is_state('lock.garage','unlocked')) and (is_state('binary_sensor.door_garage_window_door_is_open','off')) ) %}
            Unlocked
          {% elif ( (is_state('binary_sensor.door_garage_window_door_is_open','on')) and (is_state('lock.garage','locked')) ) %}
            Locked Open
          {% elif ( (is_state('binary_sensor.door_garage_window_door_is_open','off')) and (is_state('lock.garage','locked')) ) %}
            Locked
          {% elif ( (is_state('binary_sensor.door_garage_window_door_is_open','on')) and (is_state('lock.garage','unlocked')) ) %}
            Open
          {% else %}
            Unknown
          {% endif %}
        icon_template: >-
          {% if ( (is_state('lock.garage','unlocked')) and (is_state('binary_sensor.door_garage_window_door_is_open','off')) ) %}
            mdi:lock-open
          {% elif ( (is_state('binary_sensor.door_garage_window_door_is_open','on')) and (is_state('lock.garage','locked')) ) %}
            mdi:door-closed-cancel
          {% elif ( (is_state('binary_sensor.door_garage_window_door_is_open','off')) and (is_state('lock.garage','locked')) ) %}
            mdi:lock
          {% elif ( (is_state('binary_sensor.door_garage_window_door_is_open','on')) and (is_state('lock.garage','unlocked')) ) %}
            mdi:door-open
          {% else %}
            mdi:lock-question
          {% endif %}

  - platform: template
    sensors:
      garage_east_door_status_sc:
        friendly_name: "Garage Door East Status"
        unique_id: garage-door-east-status-1ffac45a-2bf2-d44e-32f6-411156726102
        value_template: >-
          {% if ( (is_state('cover.garage_door_2','open')) ) %}
            Open
          {% elif ( (is_state('cover.garage_door_2','closed')) ) %}
            Closed
          {% elif ( (is_state('cover.garage_door_2','closing')) ) %}
            Closing
          {% elif ( (is_state('cover.garage_door_2','opening')) ) %}
            Opening
          {% else %}
            Unknown
          {% endif %}
        icon_template: >-
          {% if ( (is_state('cover.garage_door_2','open')) ) %}
            mdi:garage-open-variant
          {% elif ( (is_state('cover.garage_door_2','closed')) ) %}
            mdi:garage-variant
          {% elif ( (is_state('cover.garage_door_2','closing')) ) %}
            mdi:arrow-down-box
          {% elif ( (is_state('cover.garage_door_2','opening')) ) %}
            mdi:arrow-up-box
          {% else %}
            mdi:garage-alert-variant
          {% endif %}

  - platform: template
    sensors:
      garage_west_door_status_sc:
        friendly_name: "Garage Door West Status"
        unique_id: garage-door-west-status-2baac34a-5aa3-d44b-3bf7-400151726002
        value_template: >-
          {% if ( (is_state('cover.garage_door','open')) ) %}
            Open
          {% elif ( (is_state('cover.garage_door','closed')) ) %}
            Closed
          {% else %}
            Unknown
          {% endif %}
        icon_template: >-
          {% if ( (is_state('cover.garage_door','open')) ) %}
            mdi:garage-open-variant
          {% elif ( (is_state('cover.garage_door','closed')) ) %}
            mdi:garage-variant
          {% elif ( (is_state('cover.garage_door','closing')) ) %}
            mdi:arrow-down-box
          {% elif ( (is_state('cover.garage_door','opening')) ) %}
            mdi:arrow-up-box
          {% else %}
            mdi:garage-alert-variant
          {% endif %}

  - platform: template
    sensors:
      garage_shop_door_status_sc:
        friendly_name: "Garage Door Shop Status"
        unique_id: garage-door-shop-status-3abbd45b-6bc5-b37a-2bf7-400151726002
        value_template: >-
          {% if ( (is_state('cover.sgarage','open')) ) %}
            Open
          {% elif ( (is_state('cover.sgarage','closed')) ) %}
            Closed
          {% else %}
            Unknown
          {% endif %}
        icon_template: >-
          {% if ( (is_state('cover.sgarage','open')) ) %}
            mdi:garage-open-variant
          {% elif ( (is_state('cover.sgarage','closed')) ) %}
            mdi:garage-variant
          {% elif ( (is_state('cover.sgarage','closing')) ) %}
            mdi:arrow-down-box
          {% elif ( (is_state('cover.sgarage','opening')) ) %}
            mdi:arrow-up-box
          {% else %}
            mdi:garage-alert-variant
          {% endif %}

You need both of these components for it to function. As I mentioned above:
HACS: Add Ons Needed:

• button-card
• hui-element
• card-mod

Some things that I have not done, but you could do:

• add in a hold-action to do something like lock all doors
• add logic to not lock a door if it is open
• maybe fix the closed status in my templates that never gets called