HA-Behaglichkeits-Diagramm

[scw2wi]

Ich hatte schon lange den Wunsch, ein Behaglichkeits-Diagramm darzustellen, aber bis jetzt keine Idee, wie ich das am besten umsetzen kann, bis mir dann diese Simple Air Comfort Card hier aufgefallen ist. Das war bereits so nah dran an meiner Idee, der Rest war dann rasch erstellt.

HA-BehaglichkeitsDiagramm.png

Als Hintergrundbild verwende ich ein SVG, das bei mir im Ordner www/images liegt.
Aufgerufen wird es im Code dann über

image: local/images/behaglichkeits_diagramm.svg

Temperatur und Feuchtigkeits-Sensor muss im Code an 2 Stellen eingefügt werden, einmal für die Werte-Anzeige und dann noch für den orangenen Punkt.
Die Berechnung der Position funktioniert überraschend genau (auch bei verschiedenen Auflösungen), aber leider nicht 100% exakt.
Ob das aber jetzt 54% oder 56% Luftfeuchtigkeit sind, ist für so ein Diagramm nicht wirklich relevant.

Wer das Ganze für mehrere Räume einsetzen möchte, der verwendet am besten die Decluttering-Card, das erspart eine Menge Code-Dubletten.
(Update: Code dazu siehe Post #5)

Wie diese Decluttering-Card funktioniert hab ich beim HACS Reminder schon mal kurz erklärt.

Die decluttering_templates werden im Raw-Konfigurationseditor vom Dashboard an oberster Stelle eingefügt, bei mir ist dort auch noch der Kiosk-Mode und die Sidebar.
Man muss dazu das Dashboard-Menü rechts oben mit den 3 Punkte aufrufen.
Beim ersten Mal war das für mich noch etwas ungewohnt, aber jetzt verwende ich es immer häufiger, wenn ich eine Card mit umfangreichem Code mehrfach verwende.

Das war's auch schon wieder, der kürzeste Beitrag meiner HA-Serie, aber hoffentlich für einige trotzdem interessant.

Weitere Beiträge dieser Serie:

HACS Wetterkarte
HACS Sonne & Mond (inkl. Tipps zur configuration.yaml)
HACS Schieberegler (inkl. Möglichkeiten der Icon Farbanpassung & erste Vorstellung Farbschema)
HACS Gauges (Tachoanzeigen, inkl. senkrechte Balken-Cards)
HACS stack-in-card für Raum-Card
HACS Graph-Cards
HACS Thermostat-Cards
HACS Entity Cards (inkl. stacking Beispiele mit der custom:button-card)
HACS Reminder (trash-card, atomic-calendar-revive)
HACS Person- & Öffi-Card (inkl. Geschichte zu ChatGPT)

HA Kurzeinführung
HACS Sidebar & Dashboard-Entwurf
HACS Bewässerung
HA & Node-Red
HA Notifications
HA Recorder, SQLite, InfluxDB, Grafana
HA Python Scripts

[henfri]

Vielen Dank!

Für die Verwendung in der declutter-card muss es dann so aussehen, oder?

          {% set temperature_float = states('[[temperature]]') | float %}
          {% set humidity_float = states('[humidity]]') | float %}

Und Aufruf mit

- type: custom:decluterring-card
  template: behaglichkeit
  variables:
    - temperature: sensor.temp
    - humidity: sensor.hum

Richtig?

Gruß,
Hendrik

[scw2wi]

Genau so hätte ich es auch probiert, wobei die humidity noch eine zweite [ benötigt.
Zusätzlich erstelle ich für alle Variablen auch noch einen Default-Eintrag, auch wenn dieser nicht zwingend benötigt wird, aber es ist eine gute Gelegenheit, alle Variablen zu deklarieren, um sie nicht jedes mal im Code suchen zu müssen.

[henfri]

Ups, ja.

Also das mit dem Declutter-Template geht nicht.
https://chatgpt.com/share/67defd49-4...3-971a8e6dc9c8

Wenn ich es manuell hinzufüge, dann fehlt das Bild. Hab ich es im richtigen Ordner?
image.png

Gruß,
Hendrik

[scw2wi]

Ich hab jetzt meine Card auf Decluttering umgestellt und den Code hier attached.

Du warst schon sehr nah dran, aber 2 Tippfehler waren der Card dann doch zu viel.
Sie fühlt sich einfach viel mehr angesprochen, wenn du ihren Namen mit Doppel-t, dafür aber nur einem r schreibst.

Noch ein Tipp. Ich baue so etwas immer schrittweise auf.
Zuerst nur eine Dummy-Card (also ein default picture-element) ohne viel drum herum.
Dann erst kommt der eigentliche Code Schritt für Schritt hinzu.
Wenn dann irgend etwas nicht funktioniert, dann kenne ich bereits die Stelle, wo ich suchen muss.

[henfri]

Oh je. Danke.

Prinzipiell wird das jetzt angezeigt (der Punkt im Diagramm), aber es fehlt noch das Hintergrundbild.

Hab ich das im richtigen Ordner gespeichert (siehe Screenshot)?

Gruß,
Hendrik

[scw2wi]

Es sieht in deinem Screenshot genauso aus wie bei mir.
Wenn ich auf die Datei draufklicke, dann sehe ich rechts den xml code der Datei.

[henfri]

Hm, bei mir wird sogar das Bild angezeigt, in vscode...