FR: Multiple Entities

[mathmaniac43]

Hello,

I really like the look and ability to customize the look of this card, so thank you for your efforts with it!

I would like to display multiple entities using this card. Currently I am using a separate card for each device, which looks OK but takes up more space than it needs to. Since I am using identical settings but for multiple devices, it would be tidier to have multiple device names or nicknames to the left, then the graphs to the right. Then you could have a single footer at the bottom that indicates all of the graphs.

Here is an example of what I attempted to do using a Grid card with some Markdown cards for labels. I think that there would be much better spacing and alignment if a single card were configured to handle all of this natively.

I do understand that this may not be a typical use case for people and may not be high priority, but I wonder if there would be any potential overlap with some efforts in #8. Thank you for your consideration.

[dylandoamaral]

Hi, first of all thank you for your support. I don't think that I will allow multiple entities into one card, for one reason, you can have the same effect using other libraries. According to your issue I can recommend you two of them:

• You want to display several entities without the separation between them: https://github.com/ofekashery/vertical-stack-in-card
• You want to repeat the "template" of a card in several places: https://github.com/custom-cards/decluttering-card

Feel free to reopen the issue if these libraries don't answer to the problem.

[mathmaniac43]

Thank you for referring me to the vertical-stack-in-card repository. Between that and the lovelace-card-mod which allowed me to modify the CSS of the cards on-the-fly, I was able to achieve the layout I wanted (with a bit of room for tweaks in the future, but overall I am much happier.

Here is what I ended up with, in case anybody else comes along and wants to mimic something similar:

type: custom:vertical-stack-in-card
title: Machine Pings
cards:
  - type: custom:uptime-card
    entity: binary_sensor.ping_router
    name: router
    hours_to_show: 48
    show:
      header: true
      title: true
      icon: false
      status: false
      timeline: true
      footer: false
      average: false
    alias: {}
    color: {}
    tooltip:
      hour24: true
      animation: false
    bar:
      height: 20
      amount: 48
    alignment:
      icon_first: false
      header: spaced
      status: spaced
    blink: {}
    tap_action:
      action: more-info
  - type: custom:uptime-card
    hours_to_show: 48
    show:
      header: true
      title: true
      icon: false
      status: false
      timeline: true
      footer: false
      average: false
    alias: {}
    color: {}
    tooltip:
      hour24: true
      animation: false
    bar:
      height: 20
      amount: 48
    entity: binary_sensor.ping_flash
    name: flash
  - type: custom:uptime-card
    hours_to_show: 48
    show:
      header: true
      title: true
      icon: false
      status: false
      timeline: true
      footer: false
      average: false
    alias: {}
    color: {}
    tooltip:
      hour24: true
      animation: false
    bar:
      height: 20
      amount: 48
    entity: binary_sensor.ping_ap_basement
    name: ap basement
  - type: custom:uptime-card
    hours_to_show: 48
    show:
      header: true
      title: true
      icon: false
      status: false
      timeline: true
      footer: false
      average: false
    alias: {}
    color: {}
    tooltip:
      hour24: true
      animation: false
    bar:
      height: 20
      amount: 48
    name: ap gazebo
    entity: binary_sensor.ping_ap_gazebo
  - type: custom:uptime-card
    hours_to_show: 48
    show:
      header: true
      title: true
      icon: false
      status: false
      timeline: true
      footer: false
      average: false
    alias: {}
    color: {}
    tooltip:
      hour24: true
      animation: false
    bar:
      height: 20
      amount: 48
    entity: binary_sensor.ping_ap_garage
    name: ap garage
  - type: custom:uptime-card
    hours_to_show: 48
    show:
      header: true
      title: true
      icon: false
      status: false
      timeline: true
      footer: false
      average: false
    alias: {}
    color: {}
    tooltip:
      hour24: true
      animation: false
    bar:
      height: 20
      amount: 48
    entity: binary_sensor.ping_batman
    name: batman
    card_mod:
      style: |
        ha-card.flex {
          padding-top: 0px;
          padding-bottom: 0px;
        }
        ha-card div.timeline {
          padding-top: 0px;
          padding-bottom: 0px;
        }
  - type: custom:uptime-card
    hours_to_show: 48
    show:
      header: true
      title: true
      icon: false
      status: false
      timeline: true
      footer: false
      average: false
    alias: {}
    color: {}
    tooltip:
      hour24: true
      animation: false
    bar:
      height: 20
      amount: 48
    entity: binary_sensor.ping_printer
    name: printer
    card_mod:
      style: ''
  - type: custom:uptime-card
    hours_to_show: 48
    show:
      header: true
      title: true
      icon: false
      status: false
      timeline: true
      footer: true
      average: false
    alias: {}
    color: {}
    tooltip:
      hour24: true
      animation: false
    bar:
      height: 20
      amount: 48
    entity: binary_sensor.ping_ddns
    name: ddns
card_mod:
  style:
    h1.card-header: |
      * {
        padding-bottom: 0px;
      }
    div uptime-card:
      $: |
        ha-card.flex {
          padding-top: 0px;
          padding-bottom: 0px;
          line-height: 1; # font size
          # Put names on same lines https://www.w3docs.com/snippets/css/how-to-align-divs-side-by-side.html
          content: "";
          display: table;
          clear: both;
        }
        ha-card div.information {
          float: left;
          padding-right: 0px;
          width: 25%;
        }
        ha-card div.timeline {
          float: left;
          padding-top: 2px;
          padding-bottom: 2px;
          padding-left: 0px;
          width: 67%;
        }
        ha-card div.footer {
          float: right;
          width: 67%;
          padding-bottom: 16px;
        }

[snoopy0815]

works like a charm - Thank you so much for sharing! cheers!