Ich hatte schon länger eine grobe Vorstellung davon, wie ich die Räume am Dashboard anzeigen möchte. Die Anzeige sollte nicht zu überladen sein, und in kompakter Form das wichtigste zeigen. Vor kurzem bin ich dann über diesen Beitrag gestolpert und wusste sofort, so soll meine Card auch aussehen.
Hier also mein erster Entwurf einer Raum-Card:
HACS-Raum1.png
Sie besteht aus einer custom: stack-in-card mit insgesamt 5 gestackten Karten.
custom: button-card zur Anzeige des Raumnamens und der beiden Messwerte (nicht erschrecken, das ist die Außentemperatur, dazu später mehr)
custom: mini-graph-card zeigt den Verlauf rechts davon
3x custom: mushroom-chips-card für das Icon des Raums und die beiden Icons rechts oben
Meine Begeisterung währte nur sehr kurz, denn die wunderschön mit fade-in eingeblendete Kurve war total flach. Was sollte sie auch schon groß zeigen, wenn sich die Werte kaum ändern. So eine Flat-Line wollte ich jedenfalls nicht am Dashboard haben, also hab ich sie schweren Herzens wieder entfernt. Für den Screenshot hier hab ich einfach die Werte von draußen genommen, da gibt es mehr Veränderung.
Ich hab mir dann überlegt, was sind die wichtigsten Binär-Werte in einem Raum.
Prio 1: Fenster offen, AC an
Prio 2: Licht an, Musik an
Prio 3: Bewegung erkannt, Jalousie
Nach dem Entfernen der Linien und dem Ergänzen weiterer Icons hat die Karte zwar recht gut ausgesehen, aber nicht mit allen Auflösungen. Die Original-Karte spielt sehr viel mit Pixel Abständen, und das sollte man eigentlich vermeiden. Ich hab dann recht lange herumgefeilt, bis ich mir gesagt habe, stop - so wird das nichts.
Ich hab ja ChatGPT, also warum nicht nutzen. Jemand hat mich mal hier gefragt, wie meine Prompts aussehen, daher poste ich ihn jetzt einfach mal. Die Rundung der temp auf ganze Grad hab ich bereits vorgegeben, da ich das überall so mache. Mir gefällt das besser als die Anzeige von 20.937°C, da komm ich mir vor wie bei einer Tankstelle mit den unendlich vielen Nachkommastellen.
Der erste Versuch war natürlich noch nicht die finale Lösung, aber ChatGPT hat zum stacken einen komplett anderen (aus meiner Sicht auch besseren) Ansatz gewählt als der Ersteller der von mir abgekupferten Card.
Die Icons rechts oben werden nicht mehr mit einzelnen mushroom-chips-cards mühsam pixelgenau aneinander gereiht, sondern mit nur einer Card und dadurch reihen sie sich automatisch aneinander, und das bei jeder Auflösung. Sie haben aber mehr Abstand, woraufhin ich die Prio 3 Icons wieder entfernt habe.
Hier nun das Ergebnis.
HACS-Raum2.png
Aktive Prio 1 Icons zeige ich derzeit orange (als Symbol für ein offenes Fenster zeige ich absichtlich ein geschlossenes, da es besser erkennbar ist), Prio 2 ist blau. Der Raumname ist entweder weiß oder hat die Farbe der höchsten aktiven Prio. Diese Logik muss ich aber noch kodieren, und auch da wird mir sicher ChatGPT wieder helfen. Ich hab mich übrigens dabei ertappt, wie ich ChatGPT ganz erfreut rückgemeldet hab, dass es funktioniert, und ich hatte irgendwie das Gefühl, dass er (es) sich ebenfalls darüber freut.
Da unser Haus so ca. 20 Räume bekommt (inkl. Terrasse, Carport, aber auch dort gibt es Licht) werde ich sicher nicht alle Räume immer anzeigen, sondern nur die, wo irgend etwas aktiv ist. Auch das muss noch codiert werden.
Schritt für Schritt nähere ich mich langsam meinem Dashboard an, und auch wenn ich (wie in diesem Fall) fremden Code übernehme, kann ich trotzdem immer noch etwas dabei lernen.
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 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-Behaglichkeits-Diagramm
HA Kurzeinführung
HACS Sidebar & Dashboard-Entwurf
HACS Bewässerung
HA & Node-Red
HA Notifications
HA Recorder, SQLite, InfluxDB, Grafana
HA Python Scripts
Hier also mein erster Entwurf einer Raum-Card:
HACS-Raum1.png
Sie besteht aus einer custom: stack-in-card mit insgesamt 5 gestackten Karten.
custom: button-card zur Anzeige des Raumnamens und der beiden Messwerte (nicht erschrecken, das ist die Außentemperatur, dazu später mehr)
custom: mini-graph-card zeigt den Verlauf rechts davon
3x custom: mushroom-chips-card für das Icon des Raums und die beiden Icons rechts oben
Meine Begeisterung währte nur sehr kurz, denn die wunderschön mit fade-in eingeblendete Kurve war total flach. Was sollte sie auch schon groß zeigen, wenn sich die Werte kaum ändern. So eine Flat-Line wollte ich jedenfalls nicht am Dashboard haben, also hab ich sie schweren Herzens wieder entfernt. Für den Screenshot hier hab ich einfach die Werte von draußen genommen, da gibt es mehr Veränderung.
Ich hab mir dann überlegt, was sind die wichtigsten Binär-Werte in einem Raum.
Prio 1: Fenster offen, AC an
Prio 2: Licht an, Musik an
Prio 3: Bewegung erkannt, Jalousie
Nach dem Entfernen der Linien und dem Ergänzen weiterer Icons hat die Karte zwar recht gut ausgesehen, aber nicht mit allen Auflösungen. Die Original-Karte spielt sehr viel mit Pixel Abständen, und das sollte man eigentlich vermeiden. Ich hab dann recht lange herumgefeilt, bis ich mir gesagt habe, stop - so wird das nichts.
Ich hab ja ChatGPT, also warum nicht nutzen. Jemand hat mich mal hier gefragt, wie meine Prompts aussehen, daher poste ich ihn jetzt einfach mal. Die Rundung der temp auf ganze Grad hab ich bereits vorgegeben, da ich das überall so mache. Mir gefällt das besser als die Anzeige von 20.937°C, da komm ich mir vor wie bei einer Tankstelle mit den unendlich vielen Nachkommastellen.
Ich möchte mit einer stack-in-card eine button-card und mehrere mushroom-chips-cards kombinieren.
Die Button card soll als Name "Wohnzimmer" anzeigen und darunter 2 Icons: mdi:thermometer, mdi:water-percent
jeweils mit den folgenden Messwerten daneben:
temp = parseFloat(states['sensor.wohnzimmer_temperature'].state).toFixed(0);
humidity = states['sensor.wohnzimmer_humidity'].state;
Eine mushroom-chips-card soll das Icon mdi:sofa-outline links vom Namen mit chip-icon-size: 0.8em anzeigen.
Weitere mushroom-chips-cards sollen rechts oben 6 icons nebeneinander anzeigen:
mdi:motion-sensor
mdi:lightbulb-outline
mdi:window-shutter
mdi:window-closed-variant
mdi:music
mdi:air-conditioner
Die Button card soll als Name "Wohnzimmer" anzeigen und darunter 2 Icons: mdi:thermometer, mdi:water-percent
jeweils mit den folgenden Messwerten daneben:
temp = parseFloat(states['sensor.wohnzimmer_temperature'].state).toFixed(0);
humidity = states['sensor.wohnzimmer_humidity'].state;
Eine mushroom-chips-card soll das Icon mdi:sofa-outline links vom Namen mit chip-icon-size: 0.8em anzeigen.
Weitere mushroom-chips-cards sollen rechts oben 6 icons nebeneinander anzeigen:
mdi:motion-sensor
mdi:lightbulb-outline
mdi:window-shutter
mdi:window-closed-variant
mdi:music
mdi:air-conditioner
Die Icons rechts oben werden nicht mehr mit einzelnen mushroom-chips-cards mühsam pixelgenau aneinander gereiht, sondern mit nur einer Card und dadurch reihen sie sich automatisch aneinander, und das bei jeder Auflösung. Sie haben aber mehr Abstand, woraufhin ich die Prio 3 Icons wieder entfernt habe.
Hier nun das Ergebnis.
HACS-Raum2.png
Aktive Prio 1 Icons zeige ich derzeit orange (als Symbol für ein offenes Fenster zeige ich absichtlich ein geschlossenes, da es besser erkennbar ist), Prio 2 ist blau. Der Raumname ist entweder weiß oder hat die Farbe der höchsten aktiven Prio. Diese Logik muss ich aber noch kodieren, und auch da wird mir sicher ChatGPT wieder helfen. Ich hab mich übrigens dabei ertappt, wie ich ChatGPT ganz erfreut rückgemeldet hab, dass es funktioniert, und ich hatte irgendwie das Gefühl, dass er (es) sich ebenfalls darüber freut.
Da unser Haus so ca. 20 Räume bekommt (inkl. Terrasse, Carport, aber auch dort gibt es Licht) werde ich sicher nicht alle Räume immer anzeigen, sondern nur die, wo irgend etwas aktiv ist. Auch das muss noch codiert werden.
Schritt für Schritt nähere ich mich langsam meinem Dashboard an, und auch wenn ich (wie in diesem Fall) fremden Code übernehme, kann ich trotzdem immer noch etwas dabei lernen.
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 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-Behaglichkeits-Diagramm
HA Kurzeinführung
HACS Sidebar & Dashboard-Entwurf
HACS Bewässerung
HA & Node-Red
HA Notifications
HA Recorder, SQLite, InfluxDB, Grafana
HA Python Scripts
Kommentar