Piotras Value Bar

Piotras · 12. April 2026 um 20:10

Saubere und moderne Sensorwert-Balken mit Farbverläufen, Skalenbeschriftungen und Alarm-Indikatoren.
Entwickelt für Lesbarkeit und Flexibilität — unterstützt 3 Balkenausrichtungen und 3 Name/Wert-Layoutmodi.
Ab Version 1.2.0 akzeptiert das Feld max auch eine Home Assistant Entitäts-ID — ideal für Energiemonitoring.

Funktionen

3 Balkenausrichtungen (layout):

Horizontal gestuft — scharfe Farbzonen, ideal für Batteriestand und Prozentwerte
Horizontal weich — sanfter Farbübergang, ideal für Temperatur und kontinuierliche Messwerte
Vertikal — nebeneinanderstehende Säulen mit gemeinsamer Skala, perfekt zum Vergleichen mehrerer Sensoren auf einen Blick

3 Name/Wert-Positionierungsmodi (card_layout):

Klassische Zeile — Gerätename links, Balken in der Mitte, Wert rechts
Name + Wert über dem Balken — kompaktes Layout, ideal für schmale Spalten
Wert im Balken — Wert wird direkt auf dem Balken angezeigt, funktioniert am besten mit einem höheren Balken

Weitere Funktionen:

Vollständig anpassbarer Farbverlauf — bis zu 13 Farben pro Balken, gestuft oder weich
Unabhängiger Min/Max-Bereich pro Gerät — Einheiten frei mischen (%, °C, W, kWh)
Dynamisches max — feste Zahl oder live HA-Entität als obere Skalengrenze
Skalenbeschriftungen unter jedem Balken (horizontal) oder in einer gemeinsamen linken Spalte (vertikal)
Alarm-Indikatoren — animierte Pfeile erscheinen wenn ein Wert alarm_min oder alarm_max überschreitet
Weißer Pin-Marker zeigt die aktuelle Wertposition, oder Umschalten auf Fortschritts-Füllmodus
Klick auf eine Zeile öffnet das Entitäts-Detail in Home Assistant
Responsiv — passt sich automatisch der Kartenbreite an
Horizontales Scrollen bei Layout 3 mit vielen Geräten
Visueller Editor — Geräte hinzufügen, Farbverläufe festlegen, Schriften und Layout anpassen ohne YAML zu berühren

Installation

Methode 1: Über HACS (Empfohlen)

Klicke auf die Schaltfläche unten um das Repository automatisch zu HACS hinzuzufügen:

Klicke auf Hinzufügen im Pop-up-Fenster
Sobald die Repository-Seite geöffnet ist, klicke auf Herunterladen
Nach dem Herunterladen einen Hard Reload des Browsers durchführen (Strg+Umschalt+R)

Methode 2: Manuelle Installation

Repository als ZIP-Datei herunterladen und entpacken
Im Home Assistant config/www/ Verzeichnis einen neuen Ordner piotras-value-bar erstellen
Die kompilierten Dateien (aus dem dist/ Ordner) nach config/www/piotras-value-bar/ kopieren
Zu Einstellungen → Dashboards → Ressourcen gehen
Ressource hinzufügen klicken und eingeben:

/local/piotras-value-bar/piotras-value-bar-loader.js?v=1.2.0

Ressourcentyp: JavaScript-Modul

Browser Hard Reload (Strg+Umschalt+R)

Layout-Übersicht

Layout 1 — Horizontal gestuft

Horizontale Balken mit scharfen Farbsegmenten. Die Anzahl der Farben im Feld colors bestimmt die Anzahl der Segmente. Ideal für Batteriestand, Prozentwerte oder Metriken bei denen deutliche Farbzonen wichtig sind.

type: custom:piotras-value-bar
header: "MEINE GERÄTE"
layout: 1
card_layout: 1
bar_height: 12
spacing: 8
name_width: 110
value_width: 70
show_indicator: true
show_label: true
label_font_size: 9
label_mode: 3
devices:
  - entity: sensor.battery_level
    name: "Batterie"
    min: 0
    max: 100
    unit: "%"
    colors: "1,2,3,4,5,5"

Layout 2 — Horizontal weich

Identisch mit Layout 1, jedoch mit sanfter Farbinterpolation zwischen den Palettenfarben. Ideal für Temperatursensoren, Signalstärke oder andere kontinuierliche Metriken.

show_indicator Modi:

true — Voller Farbverlauf-Balken mit weißem Pin-Marker an der aktuellen Wertposition
false — Fortschritts-Füllmodus: Balken füllt sich von links bis zum aktuellen Wert, Rest ist abgedunkelt

type: custom:piotras-value-bar
header: "MEINE GERÄTE"
layout: 2
card_layout: 1
bar_height: 12
show_indicator: true
show_label: true
label_font_size: 9
devices:
  - entity: sensor.temperature
    name: "Temperatur"
    min: 0
    max: 40
    unit: "°C"
    colors: "6,1,3,4,5"

Layout 3 — Vertikal

Alle Geräte als vertikale Balken nebeneinander mit gemeinsamer Basislinie. Eine Skalen-Spalte links zeigt Referenzwerte mit horizontalen gestrichelten Rasterlinien. Balken füllen sich von unten nach oben — perfekt zum Vergleichen mehrerer Sensoren auf einen Blick.

Bei vielen Geräten unterstützt Layout 3 horizontales Scrollen — die Skala links bleibt dabei immer sichtbar, der Rest scrollt als eine Einheit.

type: custom:piotras-value-bar
header: "MEINE GERÄTE"
layout: 3
bar_height: 20
height_bar: 150
bars_3_gap: 15
show_indicator: true
show_label: true
label_font_size: 9
label_mode: 3
devices:
  - entity: sensor.battery_level
    name: "Batterie"
    min: 0
    max: 100
    unit: "%"
    colors: "5,5,4,3,2,1"
  - entity: sensor.temperature
    name: "Temp"
    min: 0
    max: 40
    unit: "°C"
    colors: "6,1,3,4,5"

Alarm-Indikatoren

Alarme mit alarm_on: true auf Kartenebene aktivieren, dann alarm_min und/oder alarm_max pro Gerät festlegen. Wenn ein Wert einen Schwellenwert überschreitet, erscheint der entsprechende Pfeil und animiert.

Horizontale Balken: Pfeil ▼ links bei Unterschreitung, Pfeil ▲ rechts bei Überschreitung
Vertikale Balken: Pfeil links für Min, Pfeil rechts für Max

Dynamisches `max` — Entität als Skalenreferenz

Das Feld max akzeptiert entweder eine feste Zahl oder eine live Home Assistant Entitäts-ID. Wenn eine Entitäts-ID angegeben wird, wird ihr aktueller Zustand als obere Skalengrenze verwendet — automatisch aktualisiert bei jeder Änderung.

Syntax

devices:
  # Feste Zahl — klassische Verwendung
  - entity: sensor.battery_level
    name: "Batterie"
    min: 0
    max: 100
    unit: "%"

  # Entitäts-ID — dynamisches max aus HA-Zustand
  - entity: sensor.power_office
    name: "PC Büro"
    min: 0
    max: sensor.power_total   # liest den Zustand dieser Entität als max
    unit: "W"

Wann dynamisches `max` verwenden

Anwendungsfall	`max` Wert	Effekt
Fester Bereich (Batterie, %)	`100`	Klassischer Balken, stabile Skala
Anteil am Gesamtverbrauch	`sensor.power_total`	Jedes Gerät zeigt seinen Anteil
Tagesenergie vs. gestern	`sensor.energy_yesterday`	Balken relativ zum Vortag
Monatsbudget	`sensor.energy_budget_month`	Visueller Fortschritt zum Limit

Wenn die Entität nicht existiert oder keinen gültigen Zahlenwert liefert, wird max automatisch auf 100 zurückgesetzt.

Energiemonitoring — W, A und kWh

Piotras Value Bar eignet sich hervorragend als Energiemonitoring-Dashboard. Die Kombination aus dynamischem max, Farbverläufen und dem show_indicator-Pin liefert sofortiges visuelles Feedback zum Stromverbrauch.

Watt (W) — Echtzeit-Leistung

max auf die Gesamt-Verbrauchsentität setzen — jeder Gerätebalken zeigt seinen Anteil an der aktuellen Last. Der Pin-Marker zeigt auf einen Blick ob ein Gerät leicht oder stark belastet ist.

type: custom:piotras-value-bar
header: "LEISTUNG — ECHTZEIT"
layout: 2
card_layout: 1
bar_height: 14
show_indicator: true
show_label: true
label_font_size: 9
devices:
  - entity: sensor.power_total
    name: "Gesamt"
    min: 0
    max: 5500
    unit: "W"
    colors: "1,2,3,4,5,5"
  - entity: sensor.power_office
    name: "PC Büro"
    min: 0
    max: sensor.power_total
    unit: "W"
    colors: "1,2,3,4,5,5"
  - entity: sensor.power_fridge
    name: "Kühlschrank"
    min: 0
    max: sensor.power_total
    unit: "W"
    colors: "1,2,3,4,5,5"
  - entity: sensor.power_boiler
    name: "Boiler"
    min: 0
    max: sensor.power_total
    unit: "W"
    colors: "1,2,3,4,5,5"

Ampere (A) — Stromaufnahme

Funktioniert identisch wie Watt. Nützlich wenn Steckdosen oder Energiemessgeräte den Strom in Ampere statt Watt ausgeben. max auf den Sicherungsautomaten-Grenzwert setzen.

type: custom:piotras-value-bar
header: "STROMAUFNAHME"
layout: 1
card_layout: 1
bar_height: 12
show_indicator: true
alarm_on: true
devices:
  - entity: sensor.current_total
    name: "Gesamt"
    min: 0
    max: 16
    unit: "A"
    colors: "1,2,3,4,5,5"
    alarm_max: 14
  - entity: sensor.current_office
    name: "Büro"
    min: 0
    max: sensor.current_total
    unit: "A"
    colors: "1,2,3,4,5,5"
  - entity: sensor.current_boiler
    name: "Boiler"
    min: 0
    max: sensor.current_total
    unit: "A"
    colors: "1,2,3,4,5,5"

kWh — Tages- & Monatsenergie

Energiezähler (kWh) funktionieren am besten mit rücksetzenden Zählern — täglich oder monatlich. max auf den Wert des Vorzeitraums (gestern / letzter Monat) setzen gibt sofort Kontext — der Pin zeigt ob man heute schneller oder langsamer verbraucht als gewöhnlich.

type: custom:piotras-value-bar
header: "ENERGIE — HEUTE vs. GESTERN"
layout: 2
card_layout: 1
bar_height: 14
show_indicator: true
show_label: true
label_font_size: 9
devices:
  - entity: sensor.energy_total_today
    name: "Gesamt"
    min: 0
    max: sensor.energy_total_yesterday
    unit: "kWh"
    precision: 2
    colors: "1,2,3,4,5,5"
  - entity: sensor.energy_office_today
    name: "PC Büro"
    min: 0
    max: sensor.energy_office_yesterday
    unit: "kWh"
    precision: 2
    colors: "1,2,3,4,5,5"
  - entity: sensor.energy_fridge_today
    name: "Kühlschrank"
    min: 0
    max: sensor.energy_fridge_yesterday
    unit: "kWh"
    precision: 2
    colors: "1,2,3,4,5,5"

Monatsbudget-Beispiel:

  - entity: sensor.energy_total_this_month
    name: "Dieser Monat"
    min: 0
    max: 300          # festes Monatsbudget in kWh
    unit: "kWh"
    precision: 1
    colors: "1,2,3,4,5,5"
    alarm_max: 270    # Warnung bei 90% des Budgets

Erstellt von Piotras.

Thema		Antworten	Aufrufe
Piotras Energy Donut – Die interaktive Energie-Karte für dein Dashboard Showroom dashboard , cards , frontend	0	53	15. April 2026
Piotras Smart Button - Eine vielseitige Lovelace Karte Showroom dashboard , cards , frontend	0	68	31. März 2026
Hilfe bei Custom:Bar-card Dashboard/Cards/Frontend	7	186	28. Februar 2026
Bar-card raus aus HACS Dashboard/Cards/Frontend	9	2958	16. Februar 2026
Darstellung als Balkendiagramm für Anfänger? Dashboard/Cards/Frontend heizung	4	211	24. November 2025

Piotras Value Bar - Saubere und moderne Sensorwert-Balken mit Farbverläufen