Ankündigung

Einklappen
Keine Ankündigung bisher.

HA-Behaglichkeits-Diagramm

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    HA-Behaglichkeits-Diagramm

    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

    HTML-Code:
    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​​
    Angehängte Dateien
    Zuletzt geändert von scw2wi; 24.03.2025, 20:38.

    #2
    Vielen Dank!

    Für die Verwendung in der declutter-card muss es dann so aussehen, oder?
    Code:
              {% set temperature_float = states('[[temperature]]') | float %}
              {% set humidity_float = states('[humidity]]') | float %}
    ​Und Aufruf mit


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

    Gruß,
    Hendrik

    Kommentar


      #3
      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.

      Kommentar


        #4
        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

        Kommentar


          #5
          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.
          Angehängte Dateien

          Kommentar


            #6
            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

            Kommentar


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

              Kommentar


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

                Kommentar

                Lädt...
                X