HACS Thermostat-Cards

[scw2wi]

Die Standard Thermostat Card erfüllt (zumindest für die Bedienung) eigentlich alle meine Wünsche, da muss ich gar nicht lange suchen, es gibt (für mich) nichts besseres. Trotzdem wünsche ich mir für die Übersicht eine kleinere Karte, die nur die wesentliche Info kompakt anzeigt. Also sehe ich mir verschiedene Karten im Detail an.

HACS Thermostat-Cards.png
Links oben ist die Standard Tile Card mit 3 zusätzlich eingeblendeten Features.

features:
  - type: target-temperature
  - type: climate-hvac-modes
    style: icons
  - type: climate-preset-modes
    style: icons​

Sie ist vom Look&Feel gleich zur Standard Thermostat Card darunter, die mich bezüglich Bedienung überzeugen kann.
Beide können im UI Editor bearbeitet werden.

Ich finde es logischer, die aktuelle IST-Temp groß anzuzeigen, den die SOLL-Temp kenne ich ja.
Es gibt noch einige Features, die man sich mit features: im style: dropdown oder icons anzeigen lassen kann.

• climate-hvac_modes: auto, heat_cool, (heat), cool, dry, fan_only, off
• climate-preset_modes: (boost, activity, comfort,) home, eco, (sleep), away

Im Screenshot nicht dargestellte hab ich hier in Klammer geschrieben.
Bei den Presets kann scheinbar nur home, eco, away angezeigt werden, nicht jedoch boost, activity, comfort, sleep.

Es gibt 3 dummy Entitäten, die sehr einfache climate.heatpump, die deutlich erweiterte climate.hvac und die climate.ecobee, die ich verwendet habe.
Unter Entwicklerwerkzeuge / Zustände kann man vergleichen, welche Unterschiede es unter verschiedenen Entitäten gibt.

Kommen wir zu weiteren Karten, die ich im HACS finden konnte, zu sehen in Spalte 2.

Die Simple Thermostat Card ist von der Größe her mit der Tile Card vergleichbar, den Namen oben kann man auch noch ausblenden.
Vom Look&Feel ist die Karte schon etwas älter. Da sie auch keine Pflege mehr erhält, kommt sie für mich auch nicht in Frage.

Die thermostat-dark-card wird ebenfalls nicht mehr gepflegt, damit ist sie für einen Einsatz nicht wirklich qualifiziert.

Weiter gehts mit Spalte 3.

Die climate-mode-entity-row ist keine eigene Card sondern ein Card-Modifier für die Entities Card.

Im Screenshot sind 3 Reihen gezeigt.
Die oberste Reihe zeigt die nicht modifizierte Entities-Card,
darunter ist eine Ansicht mit Icons der hvac_modes,
die dritte Zeile zeigt die Icons der preset_modes (hier sogar 6 der 7 möglichen, so viel wird wohl niemand verwenden).

Man kann die Icons der verschiedenen Modes auch in einer Zeile anordnen, das wirkt für mich aber sehr unübersichtlich.
Ich würde generell die Icons bei dieser Card nur als Anzeige des jeweils aktiven Modes gestalten und die Bedienung komplett in einen Dialog auslagern.
Dann hätte diese Form der Darstellung für mich den meisten Vorteil. Eine einfache Möglichkeit hab ich dafür aber nicht gefunden, da ist dann wohl mehr Config-Aufwand notwendig.

Darunter ist die mini-climate Card.

Die Config-Möglichkeiten dieser Card sind nahezu unendlich.
Sie kann beliebige Messwerte einblenden, Buttons, Anzeigen, was man möchte.
Dieser Vorteil ist aber gleichzeitig auch der Nachteil, ohne umfangreiche Konfiguration sieht sie einfach sehr bescheiden aus.
Ich wollte mir diesen Aufwand nicht antun und zeige den Screenshot in der Standard-Konfiguration, die eigentlich für Klimaanlagen ausgelegt ist.

Die mushroom-climate-card zeigt das bekannte mushroom Look&Feel, das recht gut dem Standard entspricht. Sie kann zwar auch die HVAC-Modes (auto, heat_cool, cool, dry, fan_only, off) anzeigen wie die Standard Card, aus Platzgründen hab ich mich hier auf nur 5 davon beschränkt. Zur Anzeige der preset_modes konnte ich sie leider nicht überreden.

Der Button rechts fungiert als Umschaltung zwischen der Betriebsart-Wahl und der Temp-Wahl,wenn man diese mit show_temperature_control: true aktiviert.
Die zweite Zeile zeigt die Ansicht nach der Umschaltung, im Dashboard belegt die Karte daher nur eine Zeile.
Der dritte Screenshot zeigt die Karte in der doppelten Höhe, leider trotzdem ohne die direkte Anzeige der Stati.

Das, was ich mir eigentlich gewünscht hätte, zeigt der letzte Screenshot ganz unten.
Eine kompakte 2-zeilige Karte, die auf einen Blick alle Modi anzeigt.
In der oberen Zeile sieht man die aktuelle Temp, rechts davon den HVAC-Mode (Aus, Kühlen, Heizen, Auto, ...) und den Preset-Mode (Away, Sleep, Home, ...).
Darunter sind die min / max Temp für heizen und kühlen und der Button für die Auswahl des Modes.

Da es so eine Karte in dieser Form nicht fertig gibt, hab ich sie aus mehreren Cards zusammengebaut. Dadurch verliert man aber die Möglichkeit, sie im UI Editor zu bearbeiten.

Die Basis bildet die mushroom-climate-card
Die Anzeige der aktuellen Temp hab ich damit aber nicht so gut hinbekommen, da bin ich auf die markdown Card ausgewichen.
Die Anzeige der beiden Stati rechts oben übernimmt die mushroom-chips-card mit type: template

Diese template Funktion ist echt der Hammer. Man kann damit all das frei konfigurieren was sonst nur schwer bis gar nicht möglich ist.
Content, Icon, Icon-Color geht über ein beliebig auswählbares Template, das auch gar nichts mit der aktuellen entity zu tun haben muss.
Um den Code der Karte so kompakt wie möglich zu gestalten habe ich große Teile des Codes in einen Template-Sensor ausgelagert.
Den gesamten Code für diese Card habe ich unten attached.

Ich hab in den letzten Wochen bereits ein wenig Übung bekommen und bin daher nicht mehr für jede Funktion auf ChatGPT angewiesen.
Wenn ich einmal etwas nicht lösen kann, dann steigt meist auch mein Sparring-Partner aus und halluziniert mir nicht funktionieren Code, da er nicht zugeben kann, es auch nicht zu wissen.
Ich bin auch an ein paar anderen Themen dran (Scheduler, Reminder, Bewässerung, ...), diese Serie wird also nicht so rasch enden.


Hier geht's zum nächsten Beitrag:

HACS Entity Cards (inkl. stacking Beispiele mit der custom:button-card)

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

[scw2wi]

Hier noch als kleine Ergänzung die Bubble-Card, oben in der Standard-Breite mit 12 columns, unten mit 18.

HACS-BubbleCard-Climate.pngHACS-BubbleCard-Climate-Lang.png

type: custom:bubble-card
card_type: climate
entity: climate.ecobee
show_state: true
show_attribute: true
attribute: preset_mode
card_layout: large-2-rows
sub_button:
  - name: HVAC modes menu
    select_attribute: hvac_modes
    state_background: false
    show_arrow: true
  - entity: climate.ecobee
    select_attribute: preset_modes
    state_background: false
    show_arrow: true
grid_options:
  columns: 18
  rows: 1
​

Noch kompakter geht wohl nicht mehr, und mit ein wenig Card_Mod bekommt man das sicher noch schöner hin.
Trotzdem sind die Bubble-Cards noch nicht meine erste Wahl, da ich die Mushroom-Cards rascher an meine Wünsche angepasst bekomme.
Der Vorteil dieser Card ist, dass die beiden Modes hier gleich direkt ausgewählt werden können.

[scw2wi]

Ich hab hier eine Card gefunden, die wollte ich unbedingt für mein Dashboard haben. Zum Glück war der Code dabei, sonst hätte ich das vermutlich nicht geschafft.

HACS Thermostat-Card V2.png

Die Original-Card hat getrennte Heizungs-Regler für Upstairs, Downstairs & Garage, ich hab von der Demo Integration die climate.ecobee Entität verwendet.

current_temperature: 23° wird in der Farbe der Horizontal Gauge angezeigt, allerdings nicht verlaufend sondern mit hartem Übergang.

target_temp_low: 20 und target_temp_high: 26 verwendet die Farben der Standard Thermostat Card.

Der Regelbereich min_temp: 8 bis max_temp: 31 ist oft außerhalb des Anzeigebereichs und kann dann nicht dargestellt werden.

Für die Anzeige des HVAC-Mode und Preset-Mode hab ich noch Template-Sensoren gebaut, sonst hätte ich den Code für das dynamische Icon und die jeweils passende Icon-Farbe auch noch reinstopfen müssen. Icons und Farbe hab ich wieder von der Standard Thermostat Card übernommen.

Die Button-Card erlaubt auch die Verwendung von Variablen, damit ist es bei meiner Kopie wesentlich einfacher Parameter anzupassen als bei der Original-Card.

type: custom:button-card
entity: climate.ecobee
variables:
  temp_start: 5
  temp_end: 35
  tick_start: |
    [[[ return (Math.ceil(variables.temp_start / 5) * 5) + 5 ]]]
  tick_end: |
    [[[ return (Math.floor(variables.temp_end / 5) * 5) - 5 ]]]
  padding: 5
  calc_temp_pos: |
    [[[
      return (temp) => {
        return ((temp - variables.temp_start)
          / (variables.temp_end - variables.temp_start)
          * (100 - 2 * variables.padding) + variables.padding)
      }
    ]]]
  calc_tick_pos: |
    [[[
      return (temp) => {
        return ((temp - variables.temp_start)
          / (variables.temp_end - variables.temp_start)
          * 100)
      }
    ]]]

Es können sogar Formeln als Variable hinterlegt werden. Die Verwendung so einer Formel sieht dann so aus:

const temp = Math.round(entity.attributes.current_temperature);
const left = variables.calc_temp_pos(temp);

Wer temp_start oder temp_end verändert, der muss jedoch manuell die Farben der Gauge anpassen, da das wie in der Original-Card noch hardcoded ist. Beim Ändern von padding zieht die Card aber alles mit, da das vollständig in Formeln abgebildet ist.

Die Bedeutung des custom_fields bar hab ich nicht verstanden, das ist ein transparenter Hintergrund zur Gauge gradient und wird nie sichtbar. Ich hab den Code trotzdem drinnen gelassen, falls es jemand benötigt oder die Bedeutung erkennt.

Bei den 3 Markern gibt es jeweils Sprungbefehle die ich zwar nicht verwende aber trotzdem belassen habe. Wer sie nicht benötigt sollte diese Zeilen (vorsichtig) rauslöschen, ohne aber ein Hochkomma oder die spitze Klammer zu verlieren.

          cursor: pointer;
          pointer-events: auto;"
​            onclick="event.stopPropagation(); location.hash='#tcur'"
            ontouchstart="event.stopPropagation(); location.hash='#tcur'">
​

Das hier muss also stehen bleiben:

          "
​​            >
​

Wieder einmal kann ich sagen, dass ich durch das kopieren und verstehen lernen des Codes einiges dazu gelernt hab.

Update: Auf der gleichen Codebasis gibt es jetzt auch eine Gauge Card im Horizontal- und Vertical-Format.