Clean Tile-Based Lovelace UI - only 2 cards needed!

Active Entities:
Requirements:

  • Header template (see top of page)
  • Popup Card (or Browser Mod, if you prefer)
  • Auto-Entities Card (+ Card Mod, if not installed)

First thing you need is a sensor to count the number of active devices (I’m using lights as an example):
Config.yaml:

  - platform: template
    sensors:
      active_lights:
        value_template: "{{ states.light|selectattr('state','equalto','on')|list|count }}"

This sensor won’t update automatically so you’ll need an automation to do this:
automation.yaml:

  - alias: Update Light Count
    initial_state: True
    trigger:
      platform: event
      event_type: state_changed
    condition:
      condition: template
      value_template: "{{ trigger.event.data.entity_id.startswith('light') }}"
    action:
      service: homeassistant.update_entity
      entity_id: sensor.active_lights

Then add your card to your view:

  - type: 'custom:button-card'
    entity: sensor.active_lights
    gridcol: 1/6
    gridrow: 2/6
    state:
      - name: All lights off.
        value: 0
      - name: 1 light on.
        value: 1
      - name: '[[[ return `${entity.state} lights on.` ]]]'
        operator: '>='
        value: 2
    template: header
    tap_action:
      action: more-info

Finally, define the popup card:

    popup_cards:
      sensor.active_lights:
        title: ' '
        card:
          type: 'custom:auto-entities'
          card:
            type: entities
            title: Active Lights
            show_header_toggle: true
          filter:
            include:
              - domain: light
                state: 'on'
          show_empty: true

Add this to your config as below:

title: My House
views:
  - path: home               #
    title: Home              #
    theme: Backend-selected  # Your view setup
    badges: []               #
    panel: true              #
    popup_cards:                              #
      sensor.active_lights:                   #
        title: ' '                            #
        card:                                 #
          type: 'custom:auto-entities'        #
          card:                               #
            type: entities                    # defining the popup
            title: Active Lights              # card
            show_header_toggle: true          #
          filter:                             #
            include:                          #
              - domain: light                 #
                state: 'on'                   #
          show_empty: true                    #
    cards:
      - type: 'custom:layout-card'    #
        column_width: 100%            # For setting up panel view
        layout: vertical              #
        cards:
          - type: 'custom:layout-card'                         #
            layout: grid                                       # Grid
            gridcols: 158px 158px 158px 158px 158px 158px      # setup
            gridrows: 158px 158px 158px 158px 158px 158px      #
            cards:
              - entity: sensor.active_lights       # the active lights card
                gridcol: 1/6
                gridrow: 2/6
                state:
                  - name: All lights off.
                    value: 0
                  - name: 1 light on.
                    value: 1
                  - name: '[[[ return `${entity.state} lights on.` ]]]'
                    operator: '>='
                    value: 2
                template: header
                tap_action:
                  action: more-info
                type: 'custom:button-card'
1 Like