Custom:bar-card convert to custom:entity-progress-card

HAndy · 21. August 2025 um 19:47

Dazu gibt es ein Ticket in GiHub

https://github.com/francois-le-ko4la/lovelace-entity-progress-card/issues/94

HAndy · 22. August 2025 um 10:01

Der Entwickler der Progress-Karte hat mir vorgeschlagen, das ganze Konstrukt noch mal in eine custom:mod-card zu packen - ich wusste gar nicht, dass es die gibt.
Damit wird der Code wieder einfacher und die Linien sind verschwunden.

type: custom:mod-card
card:
  type: custom:vertical-stack-in-card
  cards:
    - type: custom:entity-progress-card
      entity: sensor.qingping_air_monitor_lite_co2_carbon_dioxide
      name: CO2
      icon: mdi:molecule-co2
      min_value: 0
      max_value: 3000
      custom_theme:
        - min: 0
          max: 600
          color: cornsilk
          bar_color: green
        - min: 600
          max: 1000
          color: cornsilk
          bar_color: amber
        - min: 1000
          max: 1100
          color: cornsilk
          bar_color: orange
        - min: 1100
          max: 2000
          color: red
          bar_color: red
      decimal: 0
      unit: ppm
      bar_size: large
      layout: horizontal
    - type: custom:entity-progress-card
      entity: sensor.qingping_air_monitor_lite_pm2_5_density
      name: Feinstaub PM 2.5
      icon: mdi:molecule
      min_value: 0
      max_value: 100
      custom_theme:
        - min: 0
          max: 10
          color: cornsilk
          bar_color: green
        - min: 10
          max: 20
          color: cornsilk
          bar_color: orange
        - min: 20
          max: 3000
          color: red
          bar_color: red
      decimal: 0
      unit: µg/m³
      bar_size: large
    - type: custom:entity-progress-card
      entity: sensor.qingping_air_monitor_lite_pm10_density
      name: Feinstaub PM 10
      icon: mdi:molecule
      min_value: 0
      max_value: 100
      custom_theme:
        - min: 0
          max: 10
          color: cornsilk
          bar_color: green
        - min: 10
          max: 20
          color: cornsilk
          bar_color: orange
        - min: 20
          max: 3000
          color: red
          bar_color: red
      decimal: 0
      unit: µg/m³
      bar_size: large
card_mod:
  style: |
    ha-card {
      border: 1px solid gray;  
      box-shadow: 0 0 5px 1px rgba(0, 255, 255, 0.5) !important;   
      border-radius: 12px;
    }
grid_options:
  columns: 6
  rows: auto

Das Ganze behebt nebenbei auch gleich noch ein weiteres Problem mit der custom:vertical-stack-in-card.
Wenn man in Verbindung mit dieser Karte noch die visibility- und grid-optionion verwendet, verschwinden diese Einträge jedes Mal, wenn man die Karte zum Bearbeiten aufruft. Mit der mod-card passiert das nicht mehr.

Update:
Und schon ist Version 1.5.1 verfügbar und die Linien bleiben auch ohne custom:mod-card verschwunden.

Nicknol · 23. August 2025 um 08:31

Der/die Entwickler der progress card sind wirklich fix und offen für Hinweise

jayjojayson · 23. August 2025 um 08:43

Ja, gestern kam ein Update für die Border, Margins usw. Finde ich auch super, dass die so schnell handeln.

Stefan_HA · 27. Februar 2026 um 11:43

Moin zusammen, hat jemand eine Idee wie ich negative Werte in rot und positive Werte in grün darstellen kann. Aktuell habe ich mit dem “theme: optimal when high” gearbeitet. Das gefällt mir nicht so gut, hätte lieber rein rot/grün.

type: custom:entity-progress-card
layout: horizontal
theme: optimal_when_high
bar_size: large
unit: W
decimal: 2
min_value: -5000
max_value: 3300
center_zero: true
entity: sensor.pylontech_leistung_watt
name: Pylontech Leistung
hide:
  - icon
disable_unit: false
grid_options:
  columns: 24
  rows: auto

jayjojayson · 27. Februar 2026 um 12:04

Hi, am besten über ein Template mit Card_Mod einfärben. Sieht dann so aus:

Den Sensor musst du noch wieder an deinen anpassen.

type: custom:entity-progress-card
entity: sensor.total_power
name: Pylontech Leistung
layout: horizontal
theme: optimal_when_high
bar_size: large
unit: W
decimal: 2
min_value: -5000
max_value: 3300
center_zero: true
hide:
  - icon
disable_unit: false
grid_options:
  columns: 24
  rows: auto
card_mod:
  style: |
    .secondary-info-detail-combined {
      color: {{ 'green' if states('sensor.total_power') | float(0) >= 0 else 'red' }};
    }

Stefan_HA · 27. Februar 2026 um 12:21

Vielen Dank @jayjojayson

Die Werte zeigen schonmal rot/grün. Gibt es jetzt noch die Möglichkeit den Balken entsprechend einzufärben?

Nicknol · 28. Februar 2026 um 08:14

verwende doch die Option custom_theme der Karte:

Hier z.B. mit blau und rot:

type: custom:entity-progress-card
name: Gefrierschrank
custom_theme:
  - min: -20
    max: 0
    color: blue
  - min: 0
    max: 40
    color: red
entity: sensor.klima_18z_temperature
min_value: -20
max_value: 50
center_zero: true
grid_options:
  columns: full
  rows: 1



type: custom:entity-progress-card
name: Gefrierschrank
custom_theme:
  - min: -20
    max: 0
    color: blue
  - min: 0
    max: 40
    color: red
entity: sensor.klima_18z_temperature
min_value: -20
max_value: 40
center_zero: true
grid_options:
  columns: full
  rows: 1

Stefan_HA · 28. Februar 2026 um 08:29

Moin,

das sieht gut aus mit dem Custom Theme. Vielen Dank

jayjojayson · 28. Februar 2026 um 08:40

Moin, sorry hatte gestern keine Zeit mehr. Die Balken kannst du natürlich auch entsprechend einfärben. Habe Card_Mod etwas erweitert für progress-bar-positive-inner und progress-bar-negative-inner.

type: custom:entity-progress-card
entity: sensor.growatt_outpowerwatt
name: Pylontech Leistung
layout: horizontal
theme: optimal_when_high
bar_size: large
unit: W
decimal: 2
min_value: -5000
max_value: 3300
center_zero: true
hide:
  - icon
disable_unit: false
grid_options:
  columns: 24
  rows: auto
card_mod:
  style: |
    .secondary-info-detail-combined {
      color: {{ 'green' if states('sensor.total_power') | float(0) >= 0 else 'red' }};
    }
    .progress-bar-positive-inner {
    background: green !important;
    }
    .progress-bar-negative-inner {
    background: red !important;
    }

Nicknol · 28. Februar 2026 um 08:45

jayjojayson - Meister, nein Guru, des card-mod

jayjojayson · 28. Februar 2026 um 08:55

Card_mod mochte ich von Anfang an, damit kann man echt so gut wie alles machen.

Francois-le-ko4la · 10. März 2026 um 12:36

Hallo,

ich bin zufällig auf diese Diskussion zum Projekt „entity-progress-card“ gestoßen.

Ich sehe, dass hier Tipps und Ratschläge zu diesem Projekt geteilt werden. Vielen Dank an alle, die zur Community beitragen!

Ich entwickle dieses Projekt dank der Beiträge aus den Foren und GitHub-Issues. Schickt eure Wünsche gerne direkt an die Community.

Eine neue Version mit vielen neuen Funktionen wurde gerade veröffentlicht. Probiert sie unbedingt aus! ^^ Eine weitere Version mit vielen zusätzlichen Funktionen ist bereits in Entwicklung.

Ich möchte diese Gelegenheit auch nutzen, um euch zu bitten, mich auf etwaige Übersetzungsfehler hinzuweisen, damit ich sie korrigieren kann.

Ich entschuldige mich für mein etwas holpriges Deutsch.

Alles Gute!

Francois-le-ko4la · 17. März 2026 um 07:12

Hallo,

Mir ist aufgefallen, dass in dieser Diskussion häufig card_mod-Direktiven verwendet werden. Ich habe das CSS aktualisiert und festgestellt, dass einige Variablen, selbst komplexe, von card_mod verändert wurden. Daher habe ich eine umfassende Bereinigung vorgenommen. Die neue Version beinhaltet:

interne Variablen
externe Variablen (Vertrag)

Einige Variablen werden sich ändern … und ja … es wird wahrscheinlich Inkompatibilitäten geben. Diese Änderung soll jedoch die zukünftige Verwendung vereinfachen und die Anpassung der Karte an Ihre Themes erleichtern.

Für manche ermöglicht dies endlich, Einstellungen zu fixieren und die Verwendung von card_mod zu vermeiden.

Der größte Vorteil besteht darin, einen Vertrag zwischen Entwicklern und Nutzern zu etablieren, um größtmögliche Konsistenz zu gewährleisten, unabhängig von der internen Struktur, die sich weiterentwickeln kann … und diesen Vertrag zu dokumentieren.

Unten finden Sie ein Beispiel aus meiner Testumgebung sowie die Liste der bereits vorhandenen Variablen. Ich bin für alle Anregungen offen.

| ------------------------------------- | ------------ | --------------------------------------------------- | ----------- |