House status (windows, doors, lights, people) in lovelace dash

I set this up yesterday and am quite pleased with it: An at-a-glance component for Lovelace that shows you some key stats about the current state of the house:

This is the number of windows open, number of (exterior) doors open, number of lights on, and number of people home. These are clickable to bring up the standard state history for each item.

How it works:

  1. Start by ensuring that all the appropriate sensors have the right device_class
    And override it where necessary using Configuration > Customisations > [choose entity] > [edit device_class] > Save. Windows and doors are all contact sensors and by default it seemed were getting a mix of ‘opening’ and ‘door’ classes. I set them all to ‘window’ or ‘door’ as appropriate.

  2. Create template sensors for the counts
    Add the following to configuration.yaml:

    sensor:
      - platform: template
        sensors:
          windows_open_count:
            friendly_name: Number of windows open
            icon_template: mdi:window-open
            value_template: >-
              {{ states.binary_sensor 
              | selectattr('attributes.device_class', 'eq', 'window')
              | selectattr('state', 'eq', 'on')
              | list | length }}
          doors_open_count:
            friendly_name: Number of doors open
            icon_template: mdi:door-open
            value_template: >-
              {{ states.binary_sensor 
              | selectattr('attributes.device_class', 'eq', 'door')
              | selectattr('state', 'eq', 'on')
              | list | length }}
          lights_on_count:
            friendly_name: Number of lights on
            icon_template: mdi:lightbulb-on-outline
            value_template: >-
              {{ states.light | selectattr('state', 'eq', 'on') | list | length }}
          people_home_count:
            friendly_name: Number of people at home
            icon_template: mdi:account-multiple
            value_template: >-
              {{ states.person | selectattr('state', 'eq', 'home') | list | length }}
    
  3. Add lovelace cards
    I’m using the standard horizontal stack, with the custom button card, which can be installed via HACS. As an easy way to do this, choose ‘Edit dashboard’ from the Lovelace view that you want to add the card to, then click the ‘Add card’ button, choose ‘Manual’ (the bottom option), and then replace the default code in the editor with this:

    type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: sensor.windows_open_count
        size: 25px
        show_name: false
        show_state: true
        layout: icon_state
        aspect_ratio: 2/1
      - type: custom:button-card
        entity: sensor.doors_open_count
        size: 25px
        show_name: false
        show_state: true
        layout: icon_state
        aspect_ratio: 2/1
      - type: custom:button-card
        entity: sensor.lights_on_count
        size: 25px
        show_name: false
        show_state: true
        layout: icon_state
        aspect_ratio: 2/1
      - type: custom:button-card
        entity: sensor.people_home_count
        size: 25px
        show_name: false
        show_state: true
        layout: icon_state
        aspect_ratio: 2/1
    

What’s really nice about this vs other solutions I’ve seen discussed is:

  • It adapts as you add and remove sensors to your home, so you don’t need to maintain a manual list of entities.
  • It’s instantly updated - rather than requiring an automation to trigger to update a stored input_number
  • By using a standard Lovelace component it means that you get all the interactivity that comes with that, like the state history on click etc.

Things I would like to improve:

  • When you tap/click the buttons, rather than (or in addition to) telling me how the rolled-up value has changed over time, it would be useful to see a list of the entities that are in that count, eg I press the ‘people’ button and it tells me who is at home, as well as when the number of people at home changed.
12 Likes

That’s pretty sweet. Consider it copied.

I’ve since found out that using the browser mod and auto-entities extensions, you can make the tap action on these buttons more useful. In the version I posted above, tapping on the number of lights on tells you how the number of lights on has changed over time. Whereas I’d prefer to see a list of the lights that are on. This solves that:

          - type: custom:button-card
            entity: sensor.lights_on_count
            show_name: false
            show_state: true
            layout: icon_state
            aspect_ratio: 2/1
            styles:
              grid:
                - grid-template-areas: '"x1 s i x2"'
                - grid-template-columns: 1fr min-content 22px 1fr
                - grid-template-rows: 1fr
              state:
                - font-size: 1.2em
                - padding-right: 5px
              icon:
                - width: 100%
            tap_action:
              action: fire-dom-event
              browser_mod:
                command: popup
                deviceID: this
                title: Lights on
                card:
                  type: custom:auto-entities
                  card:
                    type: entities
                    show_header_toggle: false
                    state_color: false
                  filter:
                    template: |
                      {% for thing in states %}
                        {% if thing.state == "on" and thing.domain == "light" %}
                          {{ thing.entity_id}}
                        {% endif %}
                      {% endfor %}
                  sort:
                    method: friendly_name
                  show_empty: false
1 Like