🌡⇐ Warum ich die Temperaturanzeige modernisieren wollte
Auf meinem Home Assistant-Dashboard zeige ich die Temperaturen direkt auf der Ebene des Hauses an.
Das ist praktisch: Ich sehe sofort die Temperatur in jedem Raum, ohne eine andere Seite öffnen zu müssen.
Bisher habe ich Elemente verwendet. state-badge. Das Ergebnis war gut lesbar, mit einer Temperatur, die im Großen und Ganzen in einem runden Abzeichen angezeigt wurde.
Aber ich wollte etwas, das optisch leichter ist, sich besser in die Ebene einfügt und auch Feuchtigkeit anzeigt.
Es ging nicht darum, meine Sensoren zu wechseln oder mein gesamtes Dashboard neu zu erstellen. Ich wollte die gleichen Informationen einfach anders präsentieren.
🔘 Mein altes Display mit State-Badge
Meine Ausgangskonfiguration war ziemlich einfach: ein Element pro Sensor, positioniert auf der Ebene mit den Eigenschaften top und left.
Beachten Sie, dass diese Karten in einer Karte von enthalten sind Typ: picture-elements allgemein
Hier ist zum Beispiel der Code, den ich für meinen Salon verwendet habe:
- type: state-badge entity: sensor.temperature_salon_temperature style: top: 98% left: 22% font-size: 40px text-align: center font-weight: bold color: transparent
Diese Anzeige machte die Arbeit. Die Temperatur war sichtbar und jedes Abzeichen hatte seinen Platz auf dem Plan.
Das Abzeichen nahm jedoch einen wichtigen visuellen Platz ein, mit seinem dunklen Hintergrund und der Einheit, die in einer separaten Einlage angezeigt wurde.

🧩 Die Karten, die ich ausgewählt habe
Für diese neue Anzeige habe ich das Projekt verwendet. Haushaltsgeräte-Appliance Cards von Skyrotter oder (nicolas59 auf HACF).
Der Name erinnert vor allem an Waschmaschinen, Kühlschränke und andere Geräte im Haus. Aber in meinem Fall interessiert mich die Atmosphärenkarte eines Raumes: custom:appliance-room-climate-card.
Für die neuen Messgeräte stelle ich Ihnen auch den Link zur Nachricht im HACF-Forum zur Verfügung:
Die HACF-Diskussion rund um Karten und neue Messgeräte.
Ich werde einen kleinen Teil der Möglichkeiten des Formats nutzen gauge :

Bei mir geht es darum, nur die für den Plan nützlichen Informationen – Temperatur und Luftfeuchtigkeit – aufzubewahren, ohne eine große vollständige Karte pro Raum hinzuzufügen.
📦 Installation im Home Assistant
🛒 Installation mit HACS
Um die Karten zu installieren, ist es am einfachsten, über HACS zu gehen.
Suchen Sie in HACS Animated Appliance & Energy Cards, Laden Sie das Projekt herunter (Version größer als v1.52.0)

Nachdem der Download abgeschlossen ist, laden Sie die Home Assistant-Seite neu. Auf einem Computer können Sie Strg + F5 um das erneute Laden des Browsers zu erzwingen.
Wenn das Projekt nicht in der Suche angezeigt wird, können Sie es manuell hinzufügen:
- Öffnen Sie HACS.
- Öffnen Sie das Menü mit den drei Punkten.
- Gehen Sie zu benutzerdefinierten Repositories.
- Fügen Sie unten die Adresse der Einreichung hinzu.
- Wählen Sie die Kategorie der Dashboard-Karten, genannt
Dashboardin der Projektdokumentation. - Dann suchen Sie das Projekt in HACS und laden Sie es herunter.
https://github.com/skyrotter/ha-appliance-electromenager-cards
Denken Sie daran, Ihren Browser nach der Installation neu zu laden.
🛠⇐ Die Alternative ohne HACS
Das Projekt bietet auch eine manuelle Installation an.
In diesem Fall müssen Sie die Datei wiederherstellen ha-appliance-electromenager-cards.js in der Akte dist aus dem Projektarchiv und kopieren Sie es dann in den Ordner /config/www/ von Home Assistant.
Anschließend muss in den Dashboard-Einstellungen eine Ressource hinzugefügt werden:
- Anschrift:
/local/ha-appliance-electromenager-cards.js - Typ: JavaScript-Modul
Dies ist eine Alternative zu HACS. Beide Anlagen sind nicht erforderlich.
🎨 Meine neue Anzeige: ein Kreis und ein Messgerät
Um das Messgerät in meinen Plan zu integrieren, habe ich zwei überlappende Elemente verwendet:
- Ein kreisförmiges Bild im Hintergrund.
- Die Temperatur- und Feuchtigkeitskarte oben.
Der Kreis ermöglicht es, die Anzeige leicht vom Dekor zu lösen, ohne den Raum vollständig zu verdecken.
Das Messgerät zeigt dann die Werte und farbigen Bögen an.
Bei meinem neuen Fang erscheint die Temperatur in der Mitte und die Luftfeuchtigkeit direkt darunter. Das Ergebnis ist leichter als mein altes Abzeichen und gibt gleichzeitig zusätzliche Informationen.

⚪ Der Kreis im Hintergrund
Zunächst füge ich das Bild hinzu, das als Hintergrund dient:
- type: image image: /local/haus/cerclebleu.png style: top: 60% left: 42% width: 120px transform: translate(-50%, -50%) opacity: 0.5
In diesem Beispiel heißt meine Datei circlebleu.png.
Hier ist meine Datei, aber jeder kann anpassen. Es gibt drei weitere Farben.
![]() |
![]() |
![]() |
![]() |
Es wird in den Ordner gelegt /config/www/haus/, was der Anschrift entspricht /local/haus/cerclebleu.png Wird im Dashboard verwendet.
Bei dieser Datei handelt es sich um ein Bild, das von Ihrer Seite zu erwarten ist: Es handelt sich nicht um ein Element, das automatisch von der Karte bereitgestellt wird. Sie können Ihren eigenen kreisförmigen Hintergrund verwenden, indem Sie den Pfad anpassen.
Ich habe eine Breite von 120px und eine Undurchsichtigkeit von 0.5. Ich wollte einen sichtbaren Hintergrund, aber keine undurchsichtige Scheibe, die den Plan verbirgt.
🌡⇐ Die Temperatur- und Feuchtigkeitskarte
Anschließend fügte ich die Karte an derselben Stelle hinzu:
- type: custom:appliance-room-climate-card icon: '' entity_temperature: sensor.temperature_salon_temperature entity_humidity: sensor.temperature_salon_humidity temperature_unit: C language: fr show_status: false show_outdoor: false show_dew_point: false show_advice: false show_graph: false Animationen: false transparent: true name: " " variant: gauge show_trend: false style: top: 60% left: 42% width: 130px illustration_size: 120
Diesmal bezieht sich das Beispiel auf die Messe. Die Einheiten unterscheiden sich daher von den beiden am Anfang des Artikels gezeigten Außentemperaturen.
Ich nutze die beiden folgenden Einrichtungen:
sensor.temperature_salon_temperaturefür die Temperatur.sensor.temperature_salon_humidityfür Feuchtigkeit.
⚙⇐ Die Einstellungen, die ich gewählt habe
🧭 Die DMS-Präsentation
Diese Präsentation wird mit folgendem Parameter ausgewählt:
Variante: gauge
Diese Einstellung verwende ich, um die Anzeige mit den Bögen um die Werte herum zu erhalten.
🪟 Eine bewusst erleichterte Anzeige
In Bezug auf das Haus benötige ich nicht alle Informationen, die eine vollständige Karte bieten kann.
Daher habe ich mehrere Elemente deaktiviert:
show_status: false show_outdoor: false show_dew_point: false show_advice: false show_graph: false show_trend: false
Damit behalte ich das Wesentliche für diese Sicht: Temperatur und Luftfeuchtigkeit schnell lesen.
Ich verwende auch diese Einstellungen:
transparent: true name: " " icon: '' Animationen: false
In meinem Setup möchte ich keinen Raumnamen oder zusätzliche Symbole, und ich schalte Animationen aus.
Die Lage des Messgeräts auf der Ebene gibt bereits den Kontext vor. Ich brauche „Salon“ an dieser Stelle nicht zu wiederholen.
📐 Die Positionierung auf dem Plan
Der Kreis und die Karte verwenden genau die gleichen Koordinaten:
top: 60% left: 42%
Dadurch können sie an einem Ort platziert werden. Ich habe ein bisschen auf width gespielt, aber jeder muss sich an seinen bildschirm anpassen.
Diese Abmessungen entsprechen meinem Grundriss und meiner Anzeige. Sie sind entsprechend dem verfügbaren Platz auf Ihrem Dashboard anzupassen.
Beide Blöcke sind in die Liste einzufügen Elemente: von meiner Karte picture-elements, Anstelle der alten Zugangsausweise.
Es handelt sich somit nicht um zwei unabhängige Karten, die an anderer Stelle im Dashboard hinzugefügt werden sollen.
🧾 Der vollständige Code meines neuen Displays
Um beide Elemente in der Konfiguration an einem Ort zu haben, ist hier der vollständige Block, den ich für das Wohnzimmer verwende.
Das Bild wird zuerst deklariert, dann das Messgerät:
- type: image image: /local/haus/cerclebleu.png style: top: 60% left: 42% width: 120px transform: translate(-50%, -50%) opacity: 0.5 - Typ: custom:appliance-room-climate-card icon: '' entity_temperature: sensor.temperature_salon_temperature entity_humidity: sensor.temperature_salon_humidity temperature_unit: C language: fr show_status: false show_outdoor: false show_dew_point: false show_advice: false show_graph: false Animationen: false transparent: true name: " " variant: gauge show_trend: false style: top: 60% left: 42% width: 130px illustration_size: 120
Um diese Anzeige in einem anderen Raum zu reproduzieren, greife ich beide Elemente auf, indem ich die Entitäten und Koordinaten ändere.
Ich achte nur darauf, die gleichen Werte von top und left für den Boden und das Messgerät ein und desselben Teils.
🎁 Bonus: Ich verwende decluttering_templates
An diesem Punkt funktioniert meine neue Anzeige mit zwei Elementen: dem Hintergrundkreis und dem Messgerät.
Für ein einzelnes Stück ist es nicht ärgerlich, beide Blöcke direkt im Dashboard aufzubewahren.
Aber um diese Anzeige in mehreren Räumen zu reproduzieren, muss ich jedes Mal einen guten Teil des Codes kopieren.
Und an dem Tag, an dem ich die Präsentation ändern möchte, muss jeder Block wieder aufgenommen werden, mit dem Risiko, einen zu vergessen.
Daher habe ich diese Anzeige in einem wiederverwendbaren Template mit decluttering-card.
🧩 Wozu dient decluttering_templates?
Das Prinzip ist einfach: Ich definiere die Struktur meiner Anzeige nur einmal und verwende sie dann wieder, indem ich ihr einige Variablen übergebe.
In meinem Fall bleibt die Struktur immer gleich:
- Ein Kreis im Hintergrund.
- Ein Temperatur- und Feuchtigkeitsmessgerät darüber.
- Die gleichen Optionen, um ein leichtes Display zu erhalten.
Was sich von einem Raum zum anderen ändert, sind die Sensoren, die Position auf der Ebene und möglicherweise die Größe, Farbe oder Deckkraft des Kreises.
Ich separiere daher die im Template definierte Präsentation von den raumspezifischen Informationen, die zum Zeitpunkt der Aufforderung eingegeben wurden.
📦 Die Voraussetzung: decluttering-card
Dieser Teil geht davon aus, dass die benutzerdefinierte Karte decluttering-card ist bereits im Home Assistant installiert.
Achten Sie darauf, die beiden Namen nicht zu verwechseln:
decluttering_templates:ist die Rubrik, in der ich meine Modelle deklariere.Typ: custom:decluttering-cardist das Element, das eine dieser Vorlagen in meinem Dashboard aufruft.
Das Template ersetzt nicht die Temperaturkarte. Er verwende einfach seine Konfiguration und verknüpfe sie mit meinem Hintergrundbild.
💡 Mein Tipp zum Gruppieren von zwei Elementen in einem Template
Und hier ist der kleine Trick, den ich Ihnen für diese Montage teile.
Normalerweise beschreibt ein decluttering Template eine einzelne Karte mit Card:, oder ein einzelnes Planelement mit Element:.
Dies bedeutet nicht, dass es unmöglich ist, mehrere Elemente zu gruppieren, aber es muss eine Struktur durchlaufen werden, die sie enthält.
In meinem Fall benötige ich gerade zwei Elemente: das Kreisbild und die Temperaturkarte.
Ich kann also nicht einfach zwei Blöcke direkt unter Element:. Ich brauche ein Element, das beides aufnehmen kann.
Hier verwende ich eine kleine Veruntreuung von Typ: bedingt.
🎁 Eine Konditionalität... bedingungslos!
In der Regel ein Element bedingt Wird nur verwendet, um Elemente anzuzeigen, wenn bestimmte Bedingungen erfüllt sind.
Aber es hat vor allem etwas sehr Praktisches für meine Bedürfnisse: eine Liste Elemente:, in dem ich mehrere Elemente platzieren kann.
Das Prinzip der Bündelung in vereinfachter Form lautet wie folgt:
element: Typ: conditional Bedingungen: [] elements: - Typ: Bild # Mein Hintergrundkreis - Typ: custom:appliance-room-climate-card # Mein Temperatur- und Feuchtigkeitsmessgerät
Mit Bedingungen: [], ich lege keine Bedingungen fest, die erfüllt werden müssen: In meiner Montage bleibt die Gruppe angezeigt.
Die bedingt Es dient mir also nicht dazu, mit einer Bedingung umzugehen. Es dient mir als Container, um meine beiden Elemente zusammenzubringen.
Das ist der ganze Trick: nur einer Element: für decluttering, aber zwei Elemente im Inneren!
Zum Zeitpunkt der Nutzung wird nur eine Aufforderung zur Einreichung von Vorschlägen custom:decluttering-card Dann reicht es aus, den Kreis und das Messgerät zusammen anzuzeigen.
🗂⇐ Wo ich das Template platziere
Ich platziere die Rubrik decluttering_templates: an der Wurzel der YAML-Dashboard-Konfiguration auf der gleichen Ebene wie Views:.
Sie sollte daher nicht in die Liste aufgenommen werden. Elemente: des Plans.
Wenn Sie bereits eine Rubrik haben decluttering_templates:, fügen Sie einfach die Vorlage hinzu metuge_temperature: drinnen, neben Ihren anderen Templates.
Um diese Änderung vorzunehmen, gehe ich auf Rohkonfigurationseditor.

🧾 Das komplette Template meines Messgeräts
Hier ist der vollständige Code, den ich verwende:
decluttering_templates: metuge_temperature: default: - Breite: 120 - opacite_fond: 0.5 - Farbe_Kreis: blau Element: Typ: Conditional Bedingungen: [] Stil: Position: absolute top: '[[top]]' left: '[[left]]' width: calc([[Breite]]px + 10px) height: calc([[Breite]]px + 10px) transform: translate(-50%, -50%) elements: - type: image image: '/lokal/Haus/Kreis[[Farbe_Kreis]].png' Stil: Position: absolute top: 50% left: 50% width: '[[Breite]]px' opacity: '[[opacite_fond]]' transform: translate(-50%, -50%) z-index: 0 - Typ: custom:appliance-room-climate-card icon: '' entity_temperature: '[[temperature]]' entity_humidity: '[[humidite]]' temperature_unit: C language: fr show_status: false show_outdoor: false show_dew_point: false show_advice: false show_graph: false Animationen: false transparent: true name: " " variant: gauge show_trend: false illustration_size: '[[Breite]]' Stil: Position: absolute top: 50% left: 50% width: calc([[Breite]]px + 10px) transform: translate(-50%, -50%) z-index: 1
📐 Ich positioniere die Gruppe und überlagere dann die Elemente
Die Position auf dem Plan wird auf dem Container mit den Koordinaten festgelegt, die an das Template übermittelt werden:
top: '[[top]]' left: '[[left]]'
Diese Koordinaten verschieben das Ganze: Der Kreis und das Messgerät bleiben verbunden.
Innerhalb der Gruppe fokussiere ich beide Elemente mit denselben Eigenschaften:
position: absolute top: 50% left: 50% transform: translate(-50%, -50%)
Dadurch können sie überlagert werden.
Ich betone dies, weil ich bei meinen Versuchen auf das Problem gestoßen bin: Ohne diese interne Positionierung wurden der Kreis und die Karte übereinander angezeigt, anstatt übereinander gelegt zu werden.
Schließlich definiere ich z-index: 0 auf dem Kreis und z-index: 1 auf dem Messgerät, um den Boden hinter den Informationen zu halten.
📏 Eine einzige Variable zum Verwalten der Größe
Ich habe mich dafür entschieden, nur eine Größenvariable beizubehalten: breite.
Sein Wert ist eine Zahl ohne Einheit, z. B.:
- Breite: 120
Dies ist wichtig, da der Parameter illustration_size der Karte wartet hier auf einen Wert wie 120, und nicht 120px :
Abbildung_size: '[[Breite]]'
Für CSS-Eigenschaften füge ich daher die Einheit direkt in das Template ein:
width: '[[Breite]]px'
Und für die Karte und ihren Behälter behalte ich eine größere Breite von 10 Pixeln:
width: calc([[Breite]]px + 10px)
Mit einem Wert von 120, mein Hintergrund misst also 120px breit und die Karte 130px.
Ich brauche nicht mehr zwei Breiten getrennt anzugeben.
Seien Sie vorsichtig, bei Aufrufen des Templates müssen Sie also schreiben Breite: 120, ohne Zusatz px.
🎨 Ich wähle die Farbe des Kreises
Um die Hintergrundfarbe zu ändern, habe ich die Variable Farbe_Kreis.
Der Pfad des Bildes ist mit diesem Wert aufgebaut:
Bild: '/lokal/Haus/Kreis[[Farbe_Kreis]].png'
Mit Farbe_Kreis: blau, verwendet das Template:
/local/haus/cerclebleu.png
Mit Farbe_Kreis: orange, verwendet er:
/lokal/haus/cercleorange.png
So kann ich aus den vier oben genannten Fonds wählen:
blaubeigegrünorange
Natürlich müssen Sie die entsprechenden Dateien im Ordner platziert haben /config/www/haus/, wobei diese Namen beibehalten werden.
Diese Variable ändert nur das Hintergrundbild. Es ändert nicht die Farben der Bögen des Messgeräts.
🔧 Die Standardwerte
Der Block default: legt die Werte fest, die verwendet werden, wenn ich sie in der Aufforderung nicht anführe:
default: - Breite: 120 - opacite_fond: 0.5 - Farbe_Kreis: blau
Wenn ich nichts Besonderes verlange, erhalte ich daher einen blauen Kreis von 120px breit, mit einer Opazität von 0.5.
Ich kann diese Werte für ein bestimmtes Teil ersetzen, ohne das gemeinsame Modell zu ändern.
Temperatur- und Feuchtigkeitseinheiten sowie Koordinaten top und left müssen bei jedem Aufruf in diesem Template ausgefüllt werden.
📍 Der Aufruf zu meinem Wohnzimmer
In der Liste Elemente: von meiner Karte picture-elements, Ich ersetze nun die beiden alten Blöcke durch diesen einzigen Aufruf:
- type: custom:decluttering-card template: jauge_temperature variable: - temperature: sensor.temperature_salon_temperature - humidite: sensor.temperature_salon_humidity - top: 60% - left: 47% - Breite: 120 - Farbe_Kreis: blau
Da ich jedoch die Standardwerte verwende, kann ich Folgendes vereinfachen:
- type: custom:decluttering-card template: jauge_temperature variable: - temperature: sensor.temperature_salon_temperature - humidite: sensor.temperature_salon_humidity - top: 60% - left: 47%
Hier benutze ich die Sensoren des Salons, ich stelle die Gruppe auf 60% von oben und 47% von links, und ich wähle den orangefarbenen Hintergrund.
Die Breite bleibt bei 120. Ich habe es im Beispiel gelassen, um zu zeigen, wo ich es ändern kann, aber ich könnte diese Zeile löschen, da dies bereits der Standardwert ist.
Gleiches gilt für die Undurchsichtigkeit: Da sie in diesem Aufruf nicht erscheint, behält das Template 0.5.

🏠 Ich verwende die Anzeige wieder in anderen Räumen
Um ein weiteres Messgerät hinzuzufügen, dupliziere ich nur diesen kleinen Anrufblock.
Ich ersetze beide Entitäten und Koordinaten und passe dann gegebenenfalls Breite, Farbe oder Deckkraft an.
Wenn ich beispielsweise eine kleinere Anzeige möchte, kann ich Folgendes verwenden:
- Breite: 80
Und wenn ich den Hintergrund diskreter gestalten möchte:
- opacite_fond: 0.3
Diese Zeilen sind in der Liste einzutragen. Variablen: der betreffenden Aufforderung zur Einreichung von Vorschlägen.
Ich muss nicht mehr die gesamte Konfiguration der Karte oder des Bildes kopieren.
Und wenn ich eine Option ändern möchte, die allen meinen Messgeräten gemeinsam ist, mache ich dies in der Vorlage und nicht in jedem Raum.
Dies ist vor allem das, wonach ich gesucht habe: eine Konfiguration, die einfacher zu pflegen ist, ohne die Möglichkeit zu verlieren, jede Anzeige anzupassen.
✅ Was ich mit dieser Änderung gewonnen habe
Letztendlich bleibe ich bei der Arbeit, die ich bereits geliebt habe: Die Temperaturen bleiben auf der Ebene des Hauses direkt sichtbar.
Aber jetzt habe ich eine leichtere Präsentation mit Feuchtigkeit an einem Ort.
Und dank des Templates kann ich diese Anzeige in mehreren Räumen reproduzieren, ohne die identischen Konfigurationsblöcke zu multiplizieren.
Die kleine Abzweigung des bedingt ermöglicht es mir, den Kreis und das Messgerät zusammenzuhalten, mit nur einem Anruf für jedes Stück.
🎯 Schlussfolgerung
Ich habe weder meine Sensoren noch mein Dashboard-Prinzip geändert.
Ich habe einfach meine alten Abzeichen durch Messgeräte ersetzt, einen diskreten Hintergrund hinzugefügt und alles in einem wiederverwendbaren Modell zusammengefasst.
Das Ergebnis passt mir optisch besser und die Konfiguration lässt sich noch einfacher skalieren.
Für mich ist dies ein guter Weg, um ein bestehendes Dashboard zu modernisieren: die Präsentation zu verbessern, ohne von vorne zu beginnen.


































