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.


Hier geht's zum nächsten Beitrag:

HACS Sidebar & Dashboard-Entwurf

hier zur HA Kurzeinführung
und hier zur Liste aller Beiträge dieser Serie

[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...

[scw2wi]

Mein Behaglichkeits-Diagramm hat jetzt auch noch eine Anzeige des Taupunktes bekommen.

Einfach eine weitere Button-Card hinzufügen

  - type: custom:button-card
    entity: sensor.taupunkt
    name: Taupunkt
    show_state: true
    show_name: false
    show_icon: true
    style:
      left: 50.0%
      top: 82.5%
      width: 30%
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  
​

den Text "Trocken um 10% nach oben schieben,

einen Template-Sensor zur Berechnung:

# template:
- sensor:
    - name: "Taupunkt"
      default_entity_id: sensor.taupunkt
      unique_id: 0f60d783-e01c-4e44-a2e3-400d929a33c0
      icon: mdi:water-thermometer-outline
      unit_of_measurement: "°C"
      state_class: measurement
      availability: "{{ has_value('sensor.temperatur') and has_value('sensor.humidity') }}"
      state: >
        {% set temp = states('sensor.temperatur') | float %}
        {% set humid = states('sensor.humidity') | float %}
        {% from 'macros.jinja' import dew_point %}
        {% set taupunkt = dew_point(temp,humid) %}
        {{ taupunkt | round(0) }}
      attributes:
        description: "Taupunkt aus temperatur und humidity"
        temp: >
          {{ states('sensor.temperatur') | float }}
        humid: >
          {{ states('sensor.humidity') | float }}
​

und einem Makro mit der Magnus-Formel

{%- macro dew_point(temp, humidity) -%}
  {%- set t = temp | float(none) -%}
  {%- set rh = humidity | float(none) -%}
  {%- if t is not none and rh is not none and rh > 0 -%}
    {%- set a = 17.625 -%}
    {%- set b = 243.04 -%}
    {%- set alpha = ((a * t) / (b + t)) + log(rh / 100.0) -%}
    {{- ((b * alpha) / (a - alpha)) | round(1) -}}
  {%- else -%}
    {{- none -}}
  {%- endif -%}
{%- endmacro -%}
​

Fertig

Ich hab mal irgendwo geschrieben, dass mich die Leerzeichen stören, die bei meinen Macros immer dazugefügt wurden.

Die Minus-Zeichen sind die Lösung dazu:
also einfach
{%- code -%} {#- kommentar -#}
statt
{% code %} {# kommentar #}

Bei den Return Values werden die Minus-Zeichen eigentlich nicht benötigt, sie schaden aber offensichtlich auch nicht.
Der Macro Code steht bei mir in custom_templates/macros.jinja, wer das woanders hat, muss den import anpassen.