How to combine climate sensor states into a grid?

[tom7 (Tom)]

I have several climate sensors that report humidity and temperature.

Right now I have cards that use the auto-entities frontend integration with a regex to filter on any of my devices that basically a label. That way I don’t have to constantly update the dashboard everytime I buy a new sensor.

type: custom:auto-entities
card:
  type: entities
filter:
  include:
    - entity_id: /sensor\..*(climate|quality).*temp/
sort:
  method: friendly_name

However, I have the temperature and humidity as two separate cards which takes up a lot of space and is redundant. (The humidity one replaces temp with humidity

I’d like to have a grid where each row is a sensor, and there are three columns: sensor name, temperature, humidity.

The closest I found was the multiple-entity-row card. And I love this layout:

However, I couldn’t find a way to set automatic filters or cards in that.

Anyone know how to dynamically populate a grid the way I’m describing?

[CO_4X4 (Colorado Four Wheeler)]

On the auto entities card you can use type of custom:multiple-entity-row and then further define the row as outlined in the documentation for multiple entity row. You use the options box in the auto entities to define the type, or edit it in YAML and define out the type, name, secondary, etc.

The problem is that because your temp and humidity are likely different sensors you may have to create template sensors with attributes that you define to include more information that the multiple entity row can use as secondary information.

[boheme61]

@tom7

Anyone know how to dynamically populate a grid the way I’m describing?

Not quite, but you can use 2 auto-entities in a grid, however your ( Naming-Strategy ) sucks, you should thinking about shorten your friendly-names ( and / or entities name )

I Have ( Had to ) create my own, as i as you have been ( Toggling Around ) trying different styles.

However it’s cumbersome , and i don’t know how your looong sensor-names will fit into my ( Card ) , as it’s a combination of A-lot
Custom:Grid-layout, vertical-stack, multi-entity-row , mushroom-template-card, and ofcause Card_Mod

So given the sources above, there is alot to play with
Unfortunately mushroom seems lately to have it own rules in a view/layout, which have caused the template-card loading weird ( the humid values ) … maybe i should look for another ( template-entity ) which only show the state

Upps, the code ( try to play with the grid width, and margins for the humid-values, for your loooong names )

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: 66% 34%
  grid-template-rows: auto
  grid-template-areas: |
    "temp humid"
subview: false
badges: []
cards:
  - type: vertical-stack
    cards:
      - type: entities
        entities:
          - entity: sensor.dummy
            type: custom:multiple-entity-row
            name: Area
            color: '#87bf50'
            icon: none
            entities:
              - entity: sensor.dummy
                name: []
                icon: mdi:coolant-temperature
                styles:
                  '--paper-item-icon-color': '#FFBF00'
            show_state: false
            card_mod:
              style: |
                hui-generic-entity-row {
                  height: 18px;
                  margin: 0px 10px -30px 0px;
                }
                :host {
                  color: #87bf50;
                }
      - type: custom:auto-entities
        card:
          type: entities
        state_color: true
        show_empty: true
        filter:
          include:
            - entity_id: sensor.*temp_*
              options:
                format: precision1
                icon: []
                card_mod:
                  style: |
                    hui-generic-entity-row {
                      height: 15px;
                      padding 0px !important;
                      font-size: 14px;
                      font-weight: lighter;
                    }
        sort:
          method: name
          reverse: false
    view_layout:
      grid-area: temp
  - type: vertical-stack
    cards:
      - type: entities
        entities:
          - entity: sensor.dummy
            type: custom:multiple-entity-row
            name: []
            icon: mdi:water-percent
            show_state: false
            card_mod:
              style: |
                hui-generic-entity-row {
                  --mdc-icon-size: 28px;
                  height: 24px;
                  margin: 0px 10px -30px 0px;
                }
                :host {
                    --paper-item-icon-color: #6495ED;
                }
      - type: custom:auto-entities
        card:
          type: entities
        state_color: true
        show_empty: true
        filter:
          include:
            - entity_id: sensor.*humid_*
              options:
                type: custom:mushroom-template-card
                primary: '{{ states(''this.entity_id'') | round(1) }} %'
                secondary: ''
                icon: ''
                card_mod:
                  style: |
                    ha-card {
                      height: 15px !important;
                      padding: 0px !important;
                    }
                    :host {
                      --mush-card-primary-font-size: 14px;
                      --mush-card-primary-font-weight: lighter;
                    }
        sort:
          method: name
          reverse: false
    view_layout:
      grid-area: humid