*tank-card* Visualisierung für Heizöltank, Gastank, Pellet-Lager etc

[Jinx_22]

Tank Card – Tankfüllstands-Visualisierung

Version: 0.3.0 - visuellen Editor hinzugefügt uvm.

---

Download:

Release tank-card.js v.0.3.0 · jinx-22/tank-card

Beschreibung:

Eine Home-Assistant-Custom-Card zur Visualisierung von Tankfüllständen, Gesamtkapazität und Verbrauch.

Es können sowohl Verbrauchssensoren als auch Füllstandssensoren (absolut oder prozentual) verwendet werden.

Geeignet für Heizöl, Wasser, Diesel, Gas, Pellets, Hackschnitzel und andere Flüssigkeiten oder Schüttgüter.

Hinweis:
Die Füllstandsberechnung erfolgt abhängig vom gewählten Sensormodus:

• Verbrauchssensor: initial_fill - consumption

• Füllstandssensor (L / kg / m³): absoluter Wert

• Füllstandssensor (%): Prozentwert bezogen auf initial_fill

Einheit und Anzeigeverhalten sind vollständig konfigurierbar.

---

---

Was macht diese Karte?

Abhängig von der Konfiguration zeigt diese Custom Card:

• Einen oder mehrere Tanks mit individuellen Namen

• Aktuellen Füllstand pro Tank

• Gesamtsystem-Füllstand absolut und in Prozent

• Gesamtkapazität und berechneten Verbrauch

• Unterstützung für Flüssigkeiten und Schüttgüter (z. B. Pellets, Hackschnitzel)

• Farb- und musterbasierte Füllstandsdarstellung je Material

• Responsives Layout für Desktop- und Mobile-Dashboards

---

Tank-Visualisierung

• Grafische Darstellung eines oder mehrerer Tanks

• Füllstand pro Tank

• Materialabhängige Farben und Muster

Unterstützte Materialien

• Heizöl

• Wasser

• Diesel

• Gas

• Pellets

• Hackschnitzel

• Benutzerdefinierte Farben

Einheiten

• Liter (L)

• Kilogramm (kg)

• Kubikmeter (m³)

Sensor-Unterstützung

• Verbrauchssensor

• Füllstandssensor (absoluter Wert)

• Füllstandssensor (Prozent)

• Sensormodus wählbar über visuellen Editor oder YAML

Visueller Editor

• Integrierter Home-Assistant-Editor (ha-form)

• Dynamisches Schema abhängig vom Sensormodus

Layout- & Anzeigeoptionen

• Verschiedene Tankformen (Rechteck, Kapsel, Pool)

• Anzeige von Werten pro Tank ein-/ausblendbar

• Konfigurierbarer Hintergrund und Styling

• Responsives Layout

---

Installation (manuell)

1. tank-card.js nach /config/www/ kopieren

2. In Home Assistant:

   • Einstellungen

   • Dashboards

   • Drei-Punkte-Menü

   • Ressourcen

   • Ressource hinzufügen

   • URL: /local/tank-card.js
     Typ: JavaScript-Modul

3. Browser neu laden (STRG + F5)

Die Karte ist nun im Karten-Picker verfügbar.

Scrennshot:

[merka0815]

Hallo, wie bekommt man den Füllstand wie in deinem Screenshot angezeigt?? Ich habe bei 68% Füllstand ein ausgefülltes Kästchen →

[Jinx_22]

Stell mal die karte etwas höher ein