Hello, I really like the look and ability to customize the look of t

Thank you for referring me to the <a href="https://github.com/ofekashery/vertical-stac

FR: Multiple Entities about uptime-card HOT 3 CLOSED

dylandoamaral commented on May 29, 2024

FR: Multiple Entities

from uptime-card.

Comments (3)

mathmaniac43 commented on May 29, 2024 1

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;
        }

from uptime-card.

snoopy0815 commented on May 29, 2024 1

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

from uptime-card.

dylandoamaral commented on May 29, 2024

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.

from uptime-card.

FR: Multiple Entities about uptime-card HOT 3 CLOSED

Comments (3)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent