Bar-card raus aus HACS

hain · 25. Juni 2025 um 12:19

Leider ist die bar-card aus HACS geflogen, da sie seit einiger Zeit nicht weiter entwickelt wird. Es gibt halt Dinge, die irgendwie fertig sind .
Ich verwende die bar-card, da man mit ihr sehr kompakt Informationen auf ein kleines Dashboard bekommt. Z. B. in der folgenden Form:

Bei meiner Suche nach Ersatz habe ich leider nichts gefunden.
Hat jemand eine Idee für mich?

anon76678013 · 25. Juni 2025 um 15:15

Wenn sie bei dir anstandslos funktioniert, kannst du sie doch einfach manuell installieren.

MelleD · 25. Juni 2025 um 15:22

Ich lasse sie auch drin, funktioniert bisher bei mir ohne Probleme

hain · 25. Juni 2025 um 17:28

Danke für Eure Einschätzung. Genau das habe ich auch schon gedacht.
Neulich hatte ich nach einem HA Update etwas “Probleme” mit den CSS, doch das kann man zum Glück für die bar-card mit card_mod anpassen .

anon76678013 · 26. Juni 2025 um 08:21

Gerade gesehen:

Bacardi · 26. Juni 2025 um 09:07

Was nicht so schön aussehen würde aber gehen, wäre eine Markdown-Karte mit einer HTML Tabelle (border=0). Man könnte jedes 0,1 Grad mit einem “|” definieren und dann in jeder Zelle per Schleife die Anzahl der | darstellen lassen. Hätte ich nicht gerade soviel zu tun, würde ich das gerne mal testen.

Schlumperdix · 26. Juni 2025 um 18:11

Ich hatte dasselbe Gesucht.

@anon76678013 sieht auch sehr interssant aus.

hain · 26. Juni 2025 um 21:41

Hier gibt es einen Fork:

Ulfinator · 21. August 2025 um 22:32

Dankeschön für den Link, das hat mir sehr geholfen.

netrene · 16. Februar 2026 um 08:31

Ich war auch auf der Suche nach einer guten Bar card.Da es nichts mehr gab, habe ich mir selbst aus custom button cards etwas gebaut.

Hier der YAML code:

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Homeassistant
        secondary: null
        icon: mdi:server
        color: disabled
        tap_action:
          action: none
        features_position: bottom
        card_mod:
          style: |
            ha-card {
              background: transparent !important;
              box-shadow: none !important;
              border: none !important;
              padding: 0 !important;
            }
  - type: vertical-stack
    cards:
      - type: custom:button-card
        entity: sensor.processor_use
        show_icon: false
        show_name: false
        show_state: false
        tap_action:
          action: more-info
        custom_fields:
          bar: |
            [[[
              const v = parseFloat(entity.state) || 0;
              const p = Math.min(100, Math.max(0, v));

              const fill =
                (p > 85) ? 'rgba(244,67,54,0.45)' :
                (p > 65) ? 'rgba(255,152,0,0.45)' :
                           'rgba(3,169,244,0.35)';

              return `<div style="
                position:absolute;left:0;top:0;bottom:0;
                width:${p}%;
                background:${fill};
                border-radius:6px;
              "></div>`;
            ]]]
          left: CPU
          right: "[[[ return `${Math.round(parseFloat(entity.state)||0)} %`; ]]]"
        styles:
          card:
            - height: 22px
            - font-size: 10px
            - padding: 0 8px
            - border-radius: 6px
            - overflow: hidden
            - position: relative
            - background: rgba(125,125,125,0.18)
            - box-shadow: none
          grid:
            - grid-template-areas: "\"left right\""
            - grid-template-columns: 1fr auto
            - align-items: center
          custom_fields:
            bar:
              - position: absolute
              - inset: 0
              - z-index: 0
            left:
              - z-index: 1
              - justify-self: start
              - font-weight: 500
              - padding: 2px 10px
              - border-radius: 999px
              - color: var(--primary-text-color)
              - text-shadow: 0 1px 1px rgba(0,0,0,0.75)
            right:
              - z-index: 1
              - justify-self: end
              - font-weight: 500
              - padding: 2px 10px
              - border-radius: 999px
              - color: var(--primary-text-color)
              - text-shadow: 0 1px 1px rgba(0,0,0,0.75)
      - type: custom:button-card
        entity: sensor.memory_use_percent
        show_icon: false
        show_name: false
        show_state: false
        tap_action:
          action: more-info
        custom_fields:
          bar: |
            [[[
              const v = parseFloat(entity.state) || 0;
              const p = Math.min(100, Math.max(0, v));

              const fill =
                (p > 85) ? 'rgba(244,67,54,0.45)' :
                (p > 65) ? 'rgba(255,152,0,0.45)' :
                           'rgba(156,39,176,0.35)';

              return `<div style="
                position:absolute;left:0;top:0;bottom:0;
                width:${p}%;
                background:${fill};
                border-radius:6px;
              "></div>`;
            ]]]
          left: RAM
          right: "[[[ return `${Math.round(parseFloat(entity.state)||0)} %`; ]]]"
        styles:
          card:
            - height: 22px
            - font-size: 10px
            - padding: 0 8px
            - border-radius: 6px
            - overflow: hidden
            - position: relative
            - background: rgba(125,125,125,0.18)
            - box-shadow: none
          grid:
            - grid-template-areas: "\"left right\""
            - grid-template-columns: 1fr auto
            - align-items: center
          custom_fields:
            bar:
              - position: absolute
              - inset: 0
              - z-index: 0
            left:
              - z-index: 1
              - justify-self: start
              - font-weight: 500
              - padding: 2px 10px
              - border-radius: 999px
              - color: var(--primary-text-color)
              - text-shadow: 0 1px 1px rgba(0,0,0,0.75)
            right:
              - z-index: 1
              - justify-self: end
              - font-weight: 500
              - padding: 2px 10px
              - border-radius: 999px
              - color: var(--primary-text-color)
              - text-shadow: 0 1px 1px rgba(0,0,0,0.75)
      - type: custom:button-card
        entity: sensor.disk_use_percent_home
        show_icon: false
        show_name: false
        show_state: false
        tap_action:
          action: more-info
        custom_fields:
          bar: |
            [[[
              const v = parseFloat(entity.state) || 0;
              const p = Math.min(100, Math.max(0, v));

              const fill =
                (p > 90) ? 'rgba(244,67,54,0.45)' :
                (p > 75) ? 'rgba(255,152,0,0.45)' :
                           'rgba(76,175,80,0.35)';

              return `<div style="
                position:absolute;left:0;top:0;bottom:0;
                width:${p}%;
                background:${fill};
                border-radius:6px;
              "></div>`;
            ]]]
          left: Disk
          right: "[[[ return `${Math.round(parseFloat(entity.state)||0)} %`; ]]]"
        styles:
          card:
            - height: 22px
            - font-size: 10px
            - padding: 0 8px
            - border-radius: 6px
            - overflow: hidden
            - position: relative
            - background: rgba(125,125,125,0.18)
            - box-shadow: none
          grid:
            - grid-template-areas: "\"left right\""
            - grid-template-columns: 1fr auto
            - align-items: center
          custom_fields:
            bar:
              - position: absolute
              - inset: 0
              - z-index: 0
            left:
              - z-index: 1
              - justify-self: start
              - font-weight: 500
              - padding: 2px 10px
              - border-radius: 999px
              - color: var(--primary-text-color)
              - text-shadow: 0 1px 1px rgba(0,0,0,0.75)
            right:
              - z-index: 1
              - justify-self: end
              - font-weight: 500
              - padding: 2px 10px
              - border-radius: 999px
              - color: var(--primary-text-color)
              - text-shadow: 0 1px 1px rgba(0,0,0,0.75)
card_mod:
  style: |
    ha-card {
      {% set cpu  = states('sensor.processor_use') | float(0) %}
      {% set ram  = states('sensor.memory_use_percent') | float(0) %}
      {% set disk = states('sensor.disk_use_percent_home') | float(0) %}

      {% set warn = cpu > 65 or ram > 65 or disk > 75 %}
      {% set crit = cpu > 85 or ram > 85 or disk > 90 %}

      padding: 10px !important;

      {% if crit %}
        background: rgba(var(--rgb-error-color), 0.14) !important;
        border: 1px solid rgba(var(--rgb-error-color), 0.6) !important;
      {% elif warn %}
        background: rgba(var(--rgb-warning-color), 0.14) !important;
        border: 1px solid rgba(var(--rgb-warning-color), 0.5) !important;
      {% else %}
        background: var(--ha-card-background, var(--card-background-color)) !important;
        border: 1px solid rgba(255,255,255,0.06) !important;
      {% endif %}

      border-radius: 18px !important;
    }
    #root { gap: 10px; }

Thema		Antworten	Aufrufe
Hilfe bei Custom:Bar-card Dashboard/Cards/Frontend	7	239	28. Februar 2026
Anzeige von Akku Ladeständen Dashboard/Cards/Frontend	1	225	26. Juni 2025
Gibt es die Analoganzeige-Karte auch als geraden Balken? Dashboard/Cards/Frontend	4	1703	15. September 2025
"flex-horseshoe-card" ersetzen durch "Modern Circular Gauge" Add-ons	130	3713	26. Januar 2026
Suche: Balkendiagramm mit schöne Verlauf Allgemein	16	257	30. November 2025

Bar-card raus aus HACS

Verwandte Themen