Liebe Community,
ich möchte euch hier mein Dashboard zeigen. Ich weiß, es gibt bereits ziemlich viele veröffentlichte Dashboards. Hier sind MEINE Schwerpunkte bei der Entwicklung:
- Ich wollte auf der ersten Dashboardseite einen gesamten Überblick bekommen.
- Ich bediene unseren HA in der Regel per Handy. Dabei sind die großzügigen Standardkarten sehr lästig, weil sie zu viel Platz einnehmen. Ich wollte aber auch nicht auf den Komfort dieser Karten verzichten.
- Auf jedem Dashboard gibt es extrem viele Karten, die sich außer verschiedener Entitäten oder Texte/Icons nicht unterscheiden.
- Ich möchte, dass auch Personen, die sich mit der Erstellung von Dashboards etc. nicht auskennen, unseren HA anpassen können.
Herausgekommen ist ein kompaktes Dashboard, dessen Elemente mittels der declutterung-card definiert sind. Dabei sind Aussehen und Funktionalität für jeden Elementtyp in Templates abgelegt und in den Karten wird das dann etwa so angewendet:
type: custom:vertical-stack-in-card
cards:
- type: custom:decluttering-card
template: title_template
variables:
- title: Erdgeschoß
- type: custom:decluttering-card
template: subtitle_template
variables:
- subtitle: Wohnzimmer
- icon: mdi:sofa
- feuchtigkeitssensor: sensor.heizung_wohnzimmer_int0000007_luftfeuchtigkeit
- temperatursensor: sensor.heizung_wohnzimmer_int0000007_temperatur
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr
grid-template-rows: 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:decluttering-card
template: licht_template
variables:
- name: Ambientlicht
- icon: mdi:lamps
- entity: switch.wohnzimmer_ambientlicht
- type: custom:decluttering-card
template: licht_template
variables:
- name: Lichterkette
- icon: mdi:string-lights
- entity: switch.steckdose_7
- type: custom:decluttering-card
template: rollladen_template
variables:
- name: Rollladen
- entity: cover.wohnzimmer_rollladen
- type: custom:decluttering-card
template: climate_template
variables:
- name: Thermostat
- entity: climate.heizung_wohnzimmer_int0000007
card_mod:
style: |
:host {
--grid-card-gap: 4px !important;
}
Durch die Templates habe ich hunderte von Codezeilen gespart, die sonst immer wider per cut and paste vervielfältigt wurden. Außerden habe ich eine einzige Stelle - im Template - um alle Instanzen zu verändern.
Und das sieht bei mir so aus:
Auf dem Handy sind die 4 Spalten untereinander und auf dem Tablet sind je 2 nebeneinander.
Für Titel (“Erdgeschoß”), Untertitel (“Wohnzimmer”) und Entitäten gibt es jeweils Templates.
Für alle Entitäten habe ich die mushroom-template-card genutzt. Sie erhält als Parameter nur: Namen, Icon, Entität. Das dynamische Verhalten ist komplett in den Templates enthalten!
Ich bin davon ausgegangen, dass die meisten Entitäten in der Regel wie Toggles benutzt werden (an/aus, auf/zu etc.).
tap_action:
action: toggle
hold_action:
action: more-info
Über die hold_action kann ich die Entität dann komfortabel komplett bedienen.
Im zweiten Dashboard können Szenarien aktiviert werden:
Das dritte Dashboard hat 3 Bereichsseiten und erlaubt die Einzelbedienung von Entitäten (auch aus Gruppen) sowie die Erstellung von Zeitplänen mittels scheduler-card - alles per UI!
Das vierte Dashboard dient der Überwachung der wesentlichen Aktivitäten:
Und zuletzt noch das Dashboard der Wärmepumpe:
So, das war’s 
. Evtl. kann sich ja jemand Ideen davon abgreifen. Auf jeden Fall hatte ich hier im Forum, aber auch in anderen, tolle Hilfe bekommen, wenn es mal klemmte.
Auf Wunsch kann ich gerne die YAML-Definition incl. Templates zur Verfügung stellen.
