Praxisnahe Tutorials, auf die du zählen kannst.
Einsteiger Guide für Home Assistant

Warum Home Assistant Thermostat Karten nicht gut sind

Wenn du auf der Suche nach schicken Karten für Thermostaten in Home Assistant bist, solltest du die Standard-Karten meiden. In diesem Video schauen wir uns an, warum die Dashboard-Karten nicht wirklich gut sind und welche Alternativen es gibt.

Bringe deine Thermostat-Karte auf das nächste Level 🙌

Voraussetzungen

  1. Home Assistant Installation auf Raspberry Pi
  2. HACS Installation in Home Assistant
  1. swipe-card
  2. simple-thermostat
  3. vertical-stack-in-card
  4. mini-graph-card

Code für die Karte

cards:
  - cards:
      - cards:
          - entity: climate.1e89f334
            name: Klimaanlage
            type: custom:simple-thermostat
          - entity: climate.heizung_wohnbereich_int0000001
            name: Heizung Wohnzimmer
            type: custom:simple-thermostat
          - entity: climate.heizung_schlafzimmer_int0000003
            name: Heizung Schlafzimmer
            type: custom:simple-thermostat
          - entity: climate.heizung_bad_int0000002
            name: Heizung Bad
            type: custom:simple-thermostat
        type: custom:swipe-card
    type: horizontal-stack
  - cards:
      - align_state: center
        entities:
          - color: '#DAF7A6'
            entity: sensor.temperatur_wohnbereich_mittelwert
            index: 0
            name: Wohnzimmer
          - color: '#A7C7E7'
            entity: sensor.heizung_bad_actual_temperature
            index: 1
            name: Bad
          - color: '#FFC300'
            entity: sensor.heizung_schlafzimmer_actual_temperature
            index: 2
            name: Schlafzimmer
        type: custom:mini-graph-card
    type: horizontal-stack
type: custom:vertical-stack-in-card

Alternative 1: Code für die Karte

Hier kann man auch durch die Temperatur-Kurven swipen

cards:
  - cards:
      - cards:
          - entity: climate.heizung_wohnbereich_int0000001
            name: Heizung Wohnzimmer
            control:
              - hvac
            type: custom:simple-thermostat
          - entity: climate.heizung_schlafzimmer_int0000003
            name: Heizung Schlafzimmer
            type: custom:simple-thermostat
            control:
              - hvac
          - entity: climate.heizung_bad_int0000002
            name: Heizung Bad
            type: custom:simple-thermostat
            control:
              - hvac
          - entity: climate.1e89f334
            name: Klimaanlage
            type: custom:simple-thermostat
            control:
              - hvac
        type: custom:swipe-card
    type: horizontal-stack
  - cards:
      - cards:
        - align_state: center
          entities:
            - color: '#DAF7A6'
              entity: sensor.temperatur_wohnbereich_mittelwert
              index: 0
              name: Wohnzimmer
          type: custom:mini-graph-card
        - align_state: center
          entities:
            - color: '#A7C7E7'
              entity: sensor.heizung_bad_actual_temperature
              index: 1
              name: Bad
          type: custom:mini-graph-card
        - align_state: center
          entities:
            - color: '#FFC300'
              entity: sensor.heizung_schlafzimmer_actual_temperature
              index: 2
              name: Schlafzimmer
          type: custom:mini-graph-card
        type: custom:swipe-card
    type: horizontal-stack
type: custom:vertical-stack-in-card

Alternative 2: Code für die Karte

Hier kann man zusammenhängend durch die Temperatur-Kurven sowie Heizungen swipen

cards:
  - cards:
      - cards:
        - type: vertical-stack
          cards:
            - entity: climate.heizung_wohnbereich_int0000001
              name: Heizung Wohnzimmer
              control:
                - hvac
              type: custom:simple-thermostat
            - align_state: center
              type: custom:mini-graph-card
              entities:
                - color: '#DAF7A6'
                  entity: sensor.temperatur_wohnbereich_mittelwert
                  index: 0
                  name: Wohnzimmer
        - type: vertical-stack
          cards:
            - entity: climate.heizung_bad_int0000002
              name: Heizung Bad
              control:
                - hvac
              type: custom:simple-thermostat
            - align_state: center
              type: custom:mini-graph-card
              entities:
                - color: '#DAF7A6'
                  entity: sensor.heizung_bad_actual_temperature
                  index: 0
                  name: Bad
        - type: vertical-stack
          cards:
            - entity: climate.heizung_schlafzimmer_int0000003
              name: Heizung Schlafzimmer
              control:
                - hvac
              type: custom:simple-thermostat
            - align_state: center
              type: custom:mini-graph-card
              entities:
                - color: '#DAF7A6'
                  entity: sensor.heizung_schlafzimmer_actual_temperature
                  index: 0
                  name: Schlafzimmer
        type: custom:swipe-card
    type: horizontal-stack
type: custom:vertical-stack-in-card

Fehlerbehebung

Was kannst du tun, wenn z.B. die Fehlermeldung Custom element not found: vertical-stack-in-card erscheint?

Mehr von simon42  Smarte Heizungssteuerung - Welche ist die beste?

Hierbei handelt es sich zu 99 % um ein Caching-Problem, wenn du alle Schritte aus dem Video befolgt hast und somit unter HACS → Frontend die Vertical Stack In Card erscheint.

Die korrekte Installation kannst du auch verifizieren, wenn sich die Ressourcen unter Einstellungen → Dashboards → 3-Punkte oben rechts → Ressourcen eingetragen haben. (Sollte mit /hacsfiles anfangen und dann mini-graph-card-irgendwas.js und vertickal-stack-in-card.js?irgendwas heißen)

Wenn das nicht der Fall ist, wurden die Frontend-Karten von HACS nicht korrekt installiert und du solltest sie erneut installieren.

Folgendes kannst du versuchen, wenn die Karten korrekt installiert sind (wie oben angegeben):

  • Starte deinen Home Assistant Host einmal komplett neu
  • Lösche deinen Browser Cache komplett. Hier eine Anleitung für Chrome.
    Die Historie, Favoriten, Kennwörter usw. müssen nicht gelöscht werden

HVAC Geräte für HA

Steuerung der Thermostate

Hardware für Home Assistant

Dein Home Assistant ist langsam, reagiert unzuverlässig oder stürzt ab? Du hast noch gar keinen am Laufen?

Mehr von simon42  Home Assistant Backup & Restore - Alles was du wissen musst

Im Beitrag unten findest du empfehlenswerten Hardware & Tipps, damit dein Home Assistant so richtig gut läuft und dein Smarthome schnell wie der Blitz wird 🚀

Fazit

Die Standard-Thermostatkarten im Home Assistant sind ein wenig glanzlos, aber mit ein paar einfachen Änderungen können wir sie so aussehen lassen, als würden sie in Tony Starks Haus gehören.

Abonniere den Newsletter oder den YouTube-Kanal und bleib dran für das nächste Video, in dem wir uns wieder spannende Themen zu Home Assistant ansehen!

HomeKit Geräte Übersicht

smarte News

Erfahre als Erster, wenn wir neue Artikel zu Smart Home oder anderen interessanten Themen veröffentlichen!

Wir senden keinen Spam und verkaufen keine Daten! Erfahre mehr in unserer Datenschutzerklärung.

Transparenz: In diesem Artikel sind Partnerlinks enthalten. Durch einen Klick darauf ge­lan­gt ihr direkt zum Anbieter. Solltet ihr euch dort für einen Kauf entscheiden, erhalte ich ei­ne kleine Provision. Für euch ändert sich am Preis nichts & Partnerlinks haben keinerlei Einfluss auf meine Berichterstattung. Vielen Dank für deine Unterstützung!

Gründer von simon42. Schreibt hier ehrlich und leidenschaftlich über Smart Home und Technik Themen, denn das Zuhause wurde bereits von Sprachassistenten übernommen und die Kontrolle abgegeben 😁

Beginnen die Diskussion unter community.simon42.com

27 Gedanken zu „Warum Home Assistant Thermostat Karten nicht gut sind“

  1. Hallo Simon,
    auch von mir vielen, vielen Dank für diese MEGA Anleitung.
    Generell sind deine Anleitungen für newbees wie mich sehr hilfreich.

    Ich habe mich für die “Alternative 2” entschieden und sie Funktioniert bei mir mit diversen Anpassungen super.

    Allerdings habe ich das Problem, dass, wenn ich mein Dashboard am Handy oder PC erstmalig öffne, die “Karte” nicht angezeigt wird.
    Erst wenn ich auf ein anderes Dashboard navigiere und wieder zurück erscheint die “Thermostatkarte” mit all ihren Funktionen.

    Für einen Tipp, in welche Richtung ich eine mögliche Ursache suchen soll, wäre ich sehr dankbar.

    Antworten
  2. Hallo an dieser Stelle,

    ich finde diese Kombi-Card-Lösung klasse und habe dies auch für meine Thermostate adaptiert.
    Nun habe ich auch ein netatmo Wettersystem mit diversen Sensoren. Ich würde mir gerne eine Kombi-Card bauen, die oben die Innensensoren als einfache entities (Entity-Karte) zeigt und unten sollen die unterschiedlichen Außenmodule (Windsensor, Regensensor, Temperatur/Luftfeuchtigkeitssensor) swipend mit einer Mini-Graph-Card aufgeführt werden.
    Ich bin YAML-Anfänger und komme hier nicht voran. Für die Entity-Card erhalte ich den Fehlerhinweis, dass diese Karte nicht definiert sei. Funktioniert das Setup nicht mit einfachen Entity-Cards?

    Nachfolgend ein Beispiel

    cards:
    – entity: sensor.netatmo_aussen_battery_percent
    name: Batterie Aussensensor
    type: entities

    Antworten
  3. Hallo Simon,
    supertolle Videos von dir. Respekt.
    Ich suche seit Tagen vergeblich nach der Lösung für folgendes Problem:
    mit HACS installierte customs funktionieren aufm Handy in Chrome und Firefox
    einwandfrei, aber in der Android HA-App erscheint immer z.B. der Fehler:
    “Custom element doesn’t exit: button-card”
    Andere customs verursachen den gleichen Fehler (z.B. multi-entity-row)
    Cache für die App zu löschen hat nix gebracht; seltsamerweise wird das
    Icon für HACS in der Leiste links auch nicht angezeigt.
    Bin ratlos. Einzige Lösung wäre noch, alles über die Standardkarten zusammen-
    zubauen, wenn ich customs weiter nicht zum Laufen bekomme.
    Weißt du vielleicht, warum das nicht geht? Warum gehts z. B. im Handybrowser?
    Besten Dank und viele Grüße von Harald

    Antworten
  4. Hallo Simon, leider bekomme ich nur ui.card.climate.preset_mode angezeigt und nicht nicht das Wort Voreinstellung. Hast du eine Idee?

    Antworten
    • Man kann es ändern mit:
      control:
      preset:
      _name: Modus #(statt Modus kannst du auch alles andere eingeben)

    • Hallo, wurde die lösung schon gefunden? bei mir wird auch nur obriger text angezeigt, die lösung darunter funktioniert auch nicht, ich bekomme den text einfach nicht geändert oder weg

    • @Florian:
      die Lösung ist richtig, man muss aber die richtigen Leerzeichen setzen:

      type: custom:simple-thermostat
      control:
      preset:
      _name: Modus

      Also “control” direkt unter “type”, “preset:” zwei Leerzeichen einrücken, “_name:” ein weiteres Leerzeichen einrücken.

      Ich habe allerdings das Problem, dass bei meinem Thermostat dann nur noch der Modus (eco/comfort) angezeigt wird aber nicht mehr der Schaltzustand (off/heat), der vorher mit dem Titel “ui.card.climate.operation” angezeigt wurde.

      @Simon hast du hierzu einen Tipp?

    • Ok, ich hatte nicht bedacht, dass die Formatierung im Kommentar verloren geht.
      Ich hoffe, dass das jetzt funktioniert:


      type: custom:simple-thermostat
      control:
      preset:
      _name: Modus

      Das Problem mit dem Schaltzustand konnte ich durch try and error inzwischen auch lösen.
      VG Andreas

    • Hey Andreas,

      wie hast du es mit “Das Problem mit dem Schaltzustand konnte ich durch try and error inzwischen auch lösen.” gelöst?!

      lg

  5. Hallo,
    ganz tolle Anleitung!
    Wie kann ich denn mehrere Thermostate eines Raumes auf einmal setzen?
    Mit einer Gruppe habe ich es probiert, scheint aber nicht zu funktionieren

    Antworten
  6. Hallo Simon,
    danke für das umfassende Video.
    Es hat bei mir recht gut geklappt.
    Habe nun aber zwei Fragen:
    1. Bei mir werden die Informationen teilweise in englisch angezeigt
    ist das eine Einstellung von Simple-Thermostat?
    2. ich habe über Raspberrymatic ein Wandthermostat hinzugefügt
    Bekomme aber “ui.card.climate.preset_mode” angezeigt, bei Dir steht “Voreinstellung”
    Sind das Einstellungen in Deiner Config oder bei “Climate”?

    Hallo Simon,
    danke für das umfassende Video.
    Es hat bei mir recht gut geklappt.
    Habe nun aber zwei Fragen:
    1. Bei mir werden die Informationen teilweise in englisch angezeigt
    ist das eine Einstellung von Simple-Thermostat?
    2. ich habe über Raspberrymatic ein Wandthermostat hinzugefügt
    Bekomme aber “ui.card.climate.preset_mode” angezeigt, bei Dir steht “Voreinstellung”
    Sind das Einstellungen in Deiner Config oder bei “Climate”?

    hier mal der Yaml-Code nur für das Büro:
    cards:
    – cards:
    – cards:
    – cards:
    – type: vertical-stack
    cards:
    – type: custom:simple-thermostat
    entity: climate.buero_wandthermostat
    header:
    name: Heizung Buero
    – align_state: center
    type: custom:mini-graph-card
    entities:
    – color: ‘#DAF7A6’
    entity: sensor.buero_wandthermostat_temperatur
    index: 0
    name: Büro
    type: custom:swipe-card
    type: horizontal-stack
    type: custom:vertical-stack-in-card

    Viele Grüße
    Rüdiger

    Antworten
  7. Noch als Ergänzung: Ich fand/finde die grah-card etwas kombig in der Darstellung und habe das mit Apex-Charts umgesetzt:
    
    type: custom:apexcharts-card
    header:
      show: true
      title: Temperaturhistorie
      show_states: false
    series:
      - entity: climate.heizung_arbeitszimmer_thermostat
        attribute: current_temperature
        name: Aktuell
      - entity: climate.heizung_arbeitszimmer_thermostat
        attribute: temperature
        name: Soll
    graph_span: 12h
    all_series_config:
      stroke_width: 2
      unit: °C
      group_by:
        func: last
        duration: 5min
    apex_config:
      chart:
        height: 220px
    color_list:
      - var(--state-climate-cool-color)
      - var(--state-climate-heat-color)
      - blue
    
    Antworten
  8. Hallo Simon,

    vielen Dank für die hervorragende Anleitung. Ich konnte damit mir ebenfalls eine deutlich attraktivere Steuerung der Heizung erstellen. Eine Kleinigkeit musste ich anpassen: Das Simple Thermostat-Element scheint für den Anzeigenamen nicht mehr name zu verwenden. Ich musste header und da drunter name definieren, sodass bei mir die Karten den passenden Anzeigenamen verwendeten. Nachfolgend dein angepasstes Beispiel:

    cards:
      - cards:
          - cards:
              - entity: climate.1e89f334
                  header:
                    name: Klimaanlage
                  type: custom:simple-thermostat
                - entity: climate.heizung_wohnbereich_int0000001
                  header:
                    name: Heizung Wohnzimmer
                  type: custom:simple-thermostat
                - entity: climate.heizung_schlafzimmer_int0000003
                  header:
                    name: Heizung Schlafzimmer
                  type: custom:simple-thermostat
                - entity: climate.heizung_bad_int0000002
                  header:
                    name: Heizung Bad
                type: custom:simple-thermostat
            type: custom:swipe-card
        type: horizontal-stack
      - cards:
          - align_state: center
            entities:
              - color: '#DAF7A6'
                entity: sensor.temperatur_wohnbereich_mittelwert
                index: 0
                name: Wohnzimmer
              - color: '#A7C7E7'
                entity: sensor.heizung_bad_actual_temperature
                index: 1
                name: Bad
              - color: '#FFC300'
                entity: sensor.heizung_schlafzimmer_actual_temperature
                index: 2
                name: Schlafzimmer
            type: custom:mini-graph-card
        type: horizontal-stack
    type: custom:vertical-stack-in-card
    
    Antworten
  9. Danke für die tollen Erläuterungen,damit war es easy die Karte nachzubauen. Ist eine hübsche Karte (Bitte mehr davon :-))
    Und auch wieder einiges dazugelernt. -Danke-

    Peter

    Antworten
  10. Hallo,
    super Video. Ich habe zwei Fragen:
    1) Zu den Temperaturauswahlbuttons: Bei mir sehe ich sowohl und “Aktion” wie auch unter “Voreistellung” jeweils nur zwei Möglichkeiten (siehe Screenshot). Muss ich die anderen unter Simple Thermostat erstellen? Wenn ja, wie mache ich das?
    2) Super wäre noch die Anzeige, ob und wo ein Fenster geöffnet ist. Hast du eine Idee, wie man so etwas integriert??

    VG Stefan

    Antworten
  11. Hi Simon, hab mir ebenfalls diese Karte speziell für die Ansicht auf’m iPhone erstellt – geil!
    Was mir noch extrem weiterhelfen würde:
    Hab für die Heizungen eine Automation erstellt, die ich aber gerne temporär ausschalten würde, sobald über die Karte manuell eine Temperatur gesetzt wird. Dafür hab ich ein Script, die einen Input-Boolean an und später wieder ausschaltet und somit die Automation stoppt und wieder startet.
    Leider hab ich keine Ahnung, wie ich das Script elegant triggern kann ohne einen extra Button. Irgendwie stell ich mir sowas vor wie: Sobald über die Karte was geändert wird -> call-service script.xxx
    Oder sowas wie einen unsichtbaren Button der über der Thermostat-Karte liegt auf den ich tap_action anwenden kann.
    Hast du vielleicht eine Idee oder stößt da HA tatsächlich an seine Grenzen?

    Antworten
    • Das ist ja genial, da wollte ich heute Abend ran xD.
      Ich wollte aber schauen, ob ich es irgendwie herausbekomme, ob am Thermostat gedreht wurde und dann die Automation sperren.

      Aber mir geht es aktuell wie dir, bin mir nicht sicher, ob ich das herausfinden kann ^^

    • Danke für die superschnelle Reaktion!!!
      Die Abfrage über das physische Thermostat wäre natürlich das i-Tüpfelchen, wobei ich im Moment lieber noch die Kindersicherung drin hab 😉
      Bin gespannt!

  12. Moin Simon,
    Es ist das erste Mal, dass ich mich an Hacs und yaml wage, dank deines Videos traue ich mich. Danke dafür!
    Eine Rückfrage zu dem Code: Im unteren Teil schreibst du nicht mehr climate. sondern sensor. gefolgt von _actual_temperature.
    Muss man diesen Sensor zunächst irgendwo anlegen? Denn bei mir findet die Karte diesen Sensor nicht. Der obere Teil funktioniert, die richtige Geräte ID habe ich also.
    Danke vorab für deine Hilfe.
    Gruß Malte

    Antworten
    • Hi Malte,
      genau, die Sensoren sind bei mir tatsächliche extra-Geräte (Temperatur und Feuchtigkeitssensoren), die halt dann diese Entität bereitstellen. Aber im Bad beispielsweise wird vom Thermostat einfach nur ein “extra-Sensor” als Entität erstellt, den ich dann hier im Graphen anzeigen lasse (sonst geht das ja nicht).
      Zum Erstellen dieser Sensoren aus Attributen (falls deine Thermostate das nicht machen sollten) hatte ich dieses Video gemacht.

    • Hallo Simon, das Video hat sehr geholfen. Danke nochmal. Kurzes Feedback: In dem Video übergehst du den Schritt wie man den FileEditor installiert und das du die configuration.yaml geöffnet hast, daher verliert man zwischendurch den Anschluss. Aber sich selber helfen zu lernen ist definitiv auch Teil des Projektes “eigenes Home Assistant” 🙂
      Willst du noch ein Video zu Zeitplänen zB. für die Soll-Temperatur der Thermostate machen? Ich frage mich was da der geschickteste Weg ist. Vermutlich über den Helfer “Zeitplan” und dann über Automatisierungen diesen Helfer mit dem climate.. verbinden?

    • Das ist ja witzig, genau an dem Thema bastele ich grade herum 😀

      Zum File Editor: Ja, der wird von mir inzwischen häufiger übersprungen, da der quasi zur “Grundausstattung” gehört. Aber ein guter Hinweis sollte man vielleicht immer erwähnen 🙂

    • Hallo Simon
      Merci für deine Videos. Echt toll! Helfen wirklich weiter!
      Das habe ich auch bereits eingerichtet. Bin gespannt auf deine Lösung für dieses neue Thema. 🙂
      Grüsse aus der Schweiz

Schreibe einen Kommentar

Send this to a friend