HA-Animated-cards ist eine Sammlung von sofort einsetzbaren Karten (67 Modelle zum Zeitpunkt des Schreibens dieser Zeilen) zur „Animation“ eines Home Assistant Dashboards, insbesondere wenn Sie bereits Mushroom verwenden. Die Idee ist nicht, überall Glitzer zu kleben: Die Animationen sind eher dezent, sauber und werden aktiviert, wenn es Sinn macht. Eine Waschmaschine „dreht“, wenn sie Strom verbraucht, ein Ventilator fängt an zu laufen, wenn er tatsächlich eingeschaltet ist, eine Steckdose „leuchtet“ nur, wenn sie Strom zieht usw.
Der erfreuliche Punkt: Es handelt sich nicht um eine „riesige“ benutzerdefinierte Karte, die eine Menge JavaScript hinzufügt. Das Projekt basiert vor allem auf Mushroom als Grundlage und verwendet card-mod, um das Styling (CSS) und die Animationen zu injizieren. Ergebnis: Es ist leicht und integriert sich sehr gut in ein bereits bestehendes Dashboard.
Warum es im Home Assistant interessant ist
Ein Dashboard schaut man sich schnell mal an, mehrmals am Tag. Und im echten Leben ist es manchmal besser, den Zustand auf einen Blick zu „sehen“, als einen Wert zu „lesen“. HA-Animated-cards bieten genau diese sofortige Lesbarkeit.
Betrachten wir drei sehr konkrete Situationen.
Die Waschmaschine ist „An“, ja… aber läuft sie wirklich? Mit einer Animation, die bei der Leistung (W) ausgelöst wird, sehen Sie sofort, ob der Zyklus läuft oder ob die Maschine nur im Standby-Modus ist.
Ein Akku bei 23 %: Sie sehen es. Aber wenn er lädt, möchten Sie es auch ohne ins Detail zu gehen verstehen. Die „battery/progress“ Modelle können ein anderes Verhalten anzeigen, wenn ein „Ladegerät“-Sensor aktiv ist (typischerweise für ein Smartphone).
Temperatur / Luftfeuchtigkeit: Die „environment“ Karten können visuell je nach Grenzwerten reagieren und sogar ein interaktives Diagramm über die Zeit anzeigen, um einen Trend zu verstehen (Luftfeuchtigkeit, die nach dem Duschen ansteigt, Temperatur, die nachts fällt usw.).
Zusammenfassend lässt sich sagen, dass wir an Lesbarkeit gewinnen und uns überraschen lassen, das Dashboard mit mehr Freude zu nutzen (ja, das ist ein echtes Argument… ein Dashboard, das man gerne ansieht, bleibt aktuell!).
Voraussetzungen
Die von dem Autor empfohlene Basis ist einfach: HACS, Mushroom (Karten und Thema) und card-mod (installierbar über HACS in 2 Klicks).
Je nach Modell können Sie auch mushroom-legacy-template-card verwenden (oft als praktische Abhängigkeit erwähnt), und für einige Varianten „mit Diagramm“ Ergänzungskarten wie mini-graph-card und vertical-stack-in-card.
Ein Detail, das hilft, sich nicht die Haare zu raufen: Es wird empfohlen, ein Dashboard-Layout im Abschnitts- oder Masonry-Modus zu verwenden, und wenn Ihre Animationen nicht zu starten scheinen, kann das Ändern des Ansichtsmodus das Problem lösen.
Installation: die (einfache) Logik von HA-Animated-cards
HA-Animated-cards werden nicht wie eine klassische Home Assistant-Integration installiert. Das Prinzip ist eher „copy-paste“: Sie erstellen eine Mushroom-Karte (oder eine manuelle Karte je nach Modell), konfigurieren sie normalerweise (Entität, Name, Icon…), und fügen dann den von dem Projekt bereitgestellten Stil-/Animationsblock im Abschnitt card_mod ein.
Es ist wichtig: Suchen Sie nicht nach „Hinzufügen des Repositories in HACS“, als wäre es ein zu installierendes Plugin. Hier holen Sie sich Stücke von YAML + Stil, die Sie in Ihre Karten einfügen.
Schritt-für-Schritt-Einrichtung
In der Praxis ist die Einrichtung also sehr einfach:
Sie öffnen Ihr Dashboard und wenden dann das Mushroom-Thema auf der Ansicht an, in der Sie die Karten platzieren möchten (das wird ausdrücklich empfohlen).
Sie fügen die Grundkarte hinzu, oft eine Mushroom Entity Card (oder eine Mushroom Light Card für Lampen).
Sie passen die Standardfelder an (Entität, Name, Icon, Informationen…), dann wechseln Sie in den Code-Editor und fügen den Stil aus dem Abschnitt card_mod, der von HA-Animated-cards bereitgestellt wird, ein.
Sie ersetzen die geforderten Entitäten im kopierten Code. Bei einigen Modellen ist es „an zwei Stellen“ (typisches Beispiel: Umgebungskarten + Diagramm).
Und Sie passen die Grenzwerte (Temperaturen, Watt, Prozentsätze) an, um zu Ihrem HAUS zu passen. Denn nicht alle Waschmaschinen, Lüftungsanlagen oder Heizkörper haben die gleiche Verbrauchskennlinie, und genau dort werden diese Karten „intelligent“.
Beispiel 1: „smarte Steckdose“-Karte, die durch Leistung gesteuert wird
Ein sehr anschaulicher Anwendungsfall: eine Steckdose, die an einer Waschmaschine, einem Wäschetrockner, einem 3D-Drucker oder sogar einem Server angeschlossen ist.
Sie erstellen eine Mushroom Entity Card für die Steckdose (switch). Anschließend fügen Sie die entsprechende Animation ein und machen sie „intelligent“: Die Animation hängt nicht mehr nur vom On/Off-Zustand ab, sondern von einem Leistungssensor (W). Wenn die Leistung einen Grenzwert überschreitet (oft reicht 0 W), startet die Animation. Sie können auch den Vergleichsoperator nach Ihren Bedürfnissen anpassen.
Kleines, aber wichtiges Detail: Damit card-mod die Farbe richtig erkennt, empfiehlt der Autor, eine echte Farbe für das Icon zu wählen und die Optionen „primary“ oder „accent“ zu vermeiden.
Beispiel 2: Umweltkarten (Temperatur / Luftfeuchtigkeit) mit interaktivem Diagramm
Das ist die Art von Karte, bei der man in 2 Sekunden sagen kann: „Okay, das sieht cool aus“.
Die gezeigte Methode ist sehr direkt: Sie fügen eine manuelle Karte im Dashboard hinzu, kopieren das YAML des Modells und ersetzen dann die Entität des Sensors an den angegebenen Stellen (typischerweise einmal für die Hauptanzeige und einmal für das Diagramm). Anschließend passen Sie die Min-/Max-Werte oder die verwendeten Grenzwerte an, damit die Skala zu Ihrem Raum passt (ein feuchter Keller wird nicht wie ein Schlafzimmer eingestellt…).
Um Platz zu sparen, besteht der Trick darin, zwei Karten nebeneinander über eine Grid Card (2 Spalten) zu kombinieren und dann die Höhe der Karten und die Breite des Diagramms so anzupassen, dass alles kompakt bleibt.
Beispiel 3: Batterie-/Prozentkarten (Smartphone, Sensor, Download…)
Diese Modelle gelten für alles, was einen Prozentsatz anzeigt: Handy-Akku, Zigbee-Sensor-Akku, 3D-Druck-Fortschritt, Download-Fortschritt…
Die Demo schlägt vor, von einer Mushroom Entity Card für den Akku-Sensor auszugehen, ohne ein benutzerdefiniertes Icon zu erzwingen und mit einer eher weißen / hellgrauen Farbe. Danach fügen Sie den card_mod Teil des gewählten Modells ein.
Für ein Telefon gibt es einen netten Bonus: Sie können einen „Ladegerät“-Sensor (angeschlossen / aufgeladen) hinzufügen, um eine spezifische Animation anzuzeigen, wenn es lädt.
Und in Bezug auf die Anpassung bleibt es konkret: Variablen für die Größe der Texte (primär/sekundär), Icon-Größe und sogar eine Zeile zum Kommentieren/Löschen, wenn Ihnen die Position „in einer Ecke“ nicht gefällt.
Tipps und klassische Fallen
Wenn eine Animation „nicht funktioniert“, beginnen Sie mit der Überprüfung von zwei sehr einfachen Punkten: der Dashboard-Ansicht (einige Personen stellen fest, dass das Wechseln der Ansicht die Situation löst) und der Verwendung des Mushroom-Themen in der Ansicht.
Wenn eine Karte von der Farbe abhängt (Lichter, Icons, die den Farbton „übernehmen“ müssen), achten Sie auf die Konfigurationsanweisungen: Bei bestimmten Typen gibt man keine Icon-Farbe an, bei anderen hingegen ist eine echte Farbe erforderlich (nicht primary/accent).
Wenn Sie eine Animation auf einen numerischen Wert (Watt, Temperatur, Luftfeuchtigkeit) steuern, nehmen Sie sich 2 Minuten Zeit, um einen Grenzwert auszuwählen, der zu Ihrem Gerät passt. Diese Einstellung verwandelt eine „Gadget“-Animation in einen wirklich nützlichen Indikator.
Wo Sie die Modelle finden und wie Sie weiterkommen
Das Projekt ist zentralisiert auf GitHub, und die Philosophie ist einfach: Sie wählen eine Karte aus, kopieren das YAML / den Stil, ersetzen die Entitäten und passen dann an.
Und wenn Sie das Videoformat mögen, veröffentlicht der Autor sehr „ Schritt für Schritt“-Demos, regelmäßig mit neuen Modellen (Karten, die von der Community gefordert werden, kompaktere Varianten, Versionen mit Diagrammen usw.).
