Easy-Layout-Card: Duplicate cards for multiple entities

Share your Projects! Dashboards & Frontend
1

I have recently tried to set up a dynamic docker dashboard:

image
image2190Ă—750 84.5 KB

I have struggled quite a lot to get it automatically populate and look the way I want it. The biggest struggle for me was nesting the layout cards and figuring out how to properly configure which part the card is going to duplicate, because in combination with the auto-entities card, the configuration for the created card actually needs to be added as option parameter.

For me personally it makes the most sense to just replicate the cards section for each entity and allow to use a placeholder for the entity. Of course this has the drawback of not being as flexible, as you are not able to add special behavior for each entity anymore.

Since I really like the layout-card by Thomas Loven, I have based it on his work(https://community.home-assistant.io/t/layout-card-take-control-of-where-your-cards-end-up) and thought maybe someone else can benefit from it as well.

It is currently not available in HACS, but you can deploy it as a custom repository. NOTE: You will need the original layout-card installed!

This is the github repo:

If you have any questions, please let me know, I have currently only tested it for my own usecases!

Sample configuration:

image
image1248Ă—1051 58.8 KB

5 Likes
2

Cool!

This inspired me to finally get around to trying something I’ve been wanting to check if it was possible for a while…

type: custom:auto-entities
card:
  type: custom:layout-card
  layout_type: masonry
  layout: {}
  cards: []
  view_layout: {}
filter:
  exclude: []
  include:
    - domain: light
      options:
        type: custom:auto-entities
        card:
          type: custom:layout-card
        filter:
          template: |
            {{ [
              {
                "type": "entities",
                "title": state_attr(config.entity, "friendly_name"),
                "entities": [config.entity]
              },
              {
                "type": "button",
                "entity": config.entity
              }
            ] }}

image
image1148Ă—714 33.8 KB

… and after going through the work of getting that right… I whole-heartedly recommend using your card instead!

3 Likes
3

@kamtschatka Thank you for the work on this card. Should make it much easier!

Would you mind posting the yaml and other requirements to create the dashboard in the picture you posted? I am in the process of creating a statistics view and this would provide inspiration.

Thanks!

4

Gladly(see below)

I am using:

  • auto-entities
  • layout-card
  • easy-layout card
  • config-template card
  • fold-entity-row
  • multiple-entity-row
  • mini-graph-card

To explain it a bit and make it a bit easier to understand:

  • I am using the auto-entities card to select all on/off switches for docker containers. Very important to use the switches, because the template card will rerender whenever a value changes, so if you for example use the cpu values of the docker containers, this will mean a huge CPU load.
  • I am then using the config-template-card to replace the name of the docker container switch to the sensors and add the “_cpu”, “_memory”, … to the fold-entity-row.
  • The easy-layout-card is used to configure the folded down row + every element you see(I have tried to get it to work with the standard layout-card and it has 60 lines more, less reusable code and it required me a very long time to set it up)

Some additional things to mention:

So now here is the actual code:

type: custom:auto-entities
card:
  type: custom:easy-layout-card
  cards:
    type: custom:config-template-card
    variables:
      getEntityId: |
        entityid => {
          return entityid.replace("switch", "sensor");
        }
    entities:
      - this.entity_id
    card:
      type: entities
      entities:
        - type: custom:fold-entity-row
          head:
            entity: this.entity_id
            type: custom:multiple-entity-row
            show_state: false
            image: >-
              "${'/local/logos/' +
              states['this.entity_id'].attributes.friendly_name + '-icon.png'}"
            entities:
              - entity: this.entity_id
                name: Off / On
                toggle: true
              - entity: ${getEntityId('this.entity_id') + '_status'}
                name: Uptime
                styles:
                  width: 200px
                  align: center
              - icon: mdi:memory
              - entity: ${getEntityId('this.entity_id') + '_cpu'}
                name: CPU
                styles:
                  width: 90px
                  text-align: left
              - icon: mdi:memory
              - entity: ${getEntityId('this.entity_id') + '_memory'}
                name: Memory
                styles:
                  width: 90px
                  text-align: left
              - icon: mdi:upload
              - entity: ${getEntityId('this.entity_id') + '_network_speed_up'}
                name: Up
                default: '-'
                styles:
                  width: 90px
                  text-align: left
              - icon: mdi:download
              - entity: ${getEntityId('this.entity_id') + '_network_speed_down'}
                name: Down
                default: '-'
                styles:
                  width: 90px
                  text-align: left
              - icon: mdi:upload
              - entity: ${getEntityId('this.entity_id') + '_network_total_up'}
                name: Total Up
                default: '-'
                styles:
                  width: 90px
                  text-align: left
              - icon: mdi:download
              - entity: ${getEntityId('this.entity_id') + '_network_total_down'}
                name: Total Down
                default: '-'
                styles:
                  width: 90px
                  text-align: left
          entities:
            - entities:
                - entity: ${getEntityId('this.entity_id') + '_cpu'}
                - entity: ${getEntityId('this.entity_id') + '_memory'}
                - entity: ${getEntityId('this.entity_id') + '_network_speed_up'}
                - entity: ${getEntityId('this.entity_id') + '_network_speed_down'}
              type: custom:easy-layout-card
              layout_type: custom:horizontal-layout
              placeholder: this.entity_id1
              layout:
                width: 300
                max_width: 450
                max_cols: 4
              cards:
                entities:
                  - entity: this.entity_id1
                lower_bound: 0
                hours_to_show: 24
                points_per_hour: 60
                line_width: 1
                line_color: lightgreen
                type: custom:mini-graph-card
                show:
                  average: true
                  extrema: true
                  labels: true
                style: |
                  ha-card {
                   border-radius: 10px; 
                   background-color: rgba(0, 0, 0, 0.0);
                  }
  layout_type: vertical
  layout_options:
    width: 1400
filter:
  include:
    - entity_id: switch.docker_*
sort:
  method: friendly_name
show_empty: true
unique: true
```

Let me know if you have any questions.
3 Likes
5

Any way you could provide the logos? :smiley:

6

I have uploaded them for you: logos.zip - Google Drive
Those are the ones I have/had docker containers for.

1 Like