Home Assistant Teil 8: Dashboards mit (Lovelace)

Aug. 30, 2025

—

von

Dein Smart Home steht – jetzt soll es sich auch intuitiv bedienen und klar visualisieren lassen. In diesem Teil bauen wir Lovelace-Dashboards: von der Struktur (Views, Tabs, Layouts) über Standard-Karten bis zu HACS-Erweiterungen, mobiloptimierten Oberflächen und Design/Themes. Dazu gibt’s konkrete YAML-Beispiele, die du 1:1 übernehmen kannst.

Planung: Struktur vor Optik

Bevor du klickst, kläre drei Dinge:

Zielgruppen: „Alle“ vs. „Admin“. (Familien-Dashboard simpel, Admin-Dashboard detailliert)
Kontext: Wand-Tablet, Handy, Desktop → andere Dichte/Layout
Informationshierarchie: oben wichtige Aktionen (Szenen, Licht), darunter Status (Fenster, Klima), dann Details (Verbrauch, Logik)

Empfehlung: ein Start-Dashboard („Übersicht“) + raumbezogene Views (Wohnzimmer, Küche, Schlafen) + Themen-Views (Klima, Energie, Sicherheit).

Views (Tabs) und Layouts

UI-Weg: Übersicht → ⋮ → Dashboard bearbeiten → + Ansicht hinzufügen
YAML (Beispiel):

title: Zuhause
views:
  - title: Übersicht
    path: uebersicht
    icon: mdi:home
    cards: []
  - title: Wohnzimmer
    path: wohnzimmer
    icon: mdi:sofa
    cards: []

Layout-Tipps

„Panel (eine Karte füllt die Ansicht)“ für Grundriss/Planungs-View
„Masonry“ (Standard) für Kartenfluss
Mit Grid-Karten Raster exakt steuern (siehe unten).

Kernkarten, die du wirklich brauchst

Entities & Buttons

type: entities
title: Schnellzugriffe
entities:
  - entity: light.wohnzimmer_decke
  - entity: switch.kaffeemaschine
  - entity: climate.wohnzimmer

type: button
entity: scene.guten_morgen
name: Guten Morgen
icon: mdi:white-balance-sunny
tap_action: { action: call-service, service: scene.turn_on, target: { entity_id: scene.guten_morgen } }

Tile-Karten (modern, kompakt)

type: tile
entity: light.wohnzimmer_decke
features:
  - type: light-brightness
  - type: light-color-temp

Gauge / Statistics / History

type: gauge
entity: sensor.wohnzimmer_temp
min: 10
max: 30
name: Temperatur
severity:
  green: 18
  yellow: 24
  red: 27

type: history-graph
entities:
  - sensor.wohnzimmer_temp
hours_to_show: 24

Conditional (nur zeigen, wenn sinnvoll)

type: conditional
conditions:
  - entity: binary_sensor.haustuer
    state: 'on'
card:
  type: alert
  title: Haustür offen!
  severity: warning

Grid: Ordnung statt Karten-Chaos

type: grid
columns: 3
square: false
cards:
  - type: tile
    entity: light.wohnzimmer_decke
  - type: tile
    entity: switch.kamin
  - type: gauge
    entity: sensor.strom_gesamt

Tipp: Für Tablets 3–4 Spalten, Handy 1–2. Du kannst mehrere Grids pro View mischen (z. B. „Schnellzugriffe“ oben, „Status“ darunter).

Helfer (Helpers) & „sprechende“ Entitäten

Unter Einstellungen → Geräte & Dienste → Hilfsmittel:

Eingabe-Boolean (input_boolean.gastmodus) als Modus-Schalter
Eingabe-Zahl/Text für Schwellen/Parameter
Timer & Szenen

Benennung: raum_funktion_detail (z. B. light.wohnzimmer_decke). Das macht YAML lesbar.

HACS-Highlights fürs Frontend

Du nutzt Home Assistant im Docker-Modus? HACS ist bereits in Teil 6 eingerichtet.

Mini Graph Card (kompakte Kurven)

type: custom:mini-graph-card
name: Klima Wohnzimmer
entities:
  - sensor.wohnzimmer_temp
  - sensor.wohnzimmer_humidity
hours_to_show: 48
points_per_hour: 2
show:
  extrema: true

Mushroom-Cards (schön & einheitlich)

Nach Installation über HACS „Mushroom“:

type: custom:mushroom-light-card
entity: light.wohnzimmer_decke
name: Deckenlicht
use_light_color: true
fill_container: true

Kiosk Mode (Tablet ohne Menüleisten)

HACS: kiosk-mode – blendet Seitenleiste/Toolbar auf Wand-Tablets aus.

Mobiloptimierte Dashboards

Eigenes „Mobil“-Dashboard: große Tiles, wenig Text, 1–2 Spalten
Kritische Aktionen oben (Alarm, Garagentor, Szene „Alles aus“)
Karten mit „tap_action“ und „hold_action“ belegen (Tippen = Toggle, Halten = Details):

type: tile
entity: lock.haustuer
tap_action: { action: toggle }
hold_action: { action: more-info }

Themen (Themes) & Dark-Mode

HACS → Themes (z. B. „Minimalist“, „Slate“).
Profil → Erscheinungsbild: Theme auswählen, „System folgen“ für Auto-Dark.
Optional per Frontend-YAML Standard-Theme setzen:

frontend:
  themes: !include_dir_merge_named themes

Grundriss / Floorplan (optional, beliebt für Tablets)

Karte: Picture Elements (offiziell) oder HACS-„Floorplan“
Hintergrund: Grundriss-PNG/SVG
Sensoren/Lichter als klickbare Elemente platzieren:

type: picture-elements
image: /local/grundriss_eg.png
elements:
  - type: state-icon
    entity: light.wohnzimmer_decke
    style: { top: 62%, left: 44% }
  - type: state-label
    entity: sensor.wohnzimmer_temp
    style: { top: 65%, left: 44% }

Templating & „intelligente“ Anzeigen

Template-Sensor (ein Wert, hübsch zusammengefasst)

template:
  - sensor:
      - name: "Innenklima Wohnzimmer"
        state: "{{ states('sensor.wohnzimmer_temp') }} °C / {{ states('sensor.wohnzimmer_humidity') }} %"

Conditional-Icons (Ampel)

Mit Mushroom:

type: custom:mushroom-entity-card
entity: sensor.luftqualitaet
icon_color: >
  {{ 'red' if states('sensor.luftqualitaet') | int > 150 else
     'yellow' if states('sensor.luftqualitaet') | int > 80 else 'green' }}

Performance & Wartung

Recorder begrenzen (History groß = UI langsam):

recorder:
  purge_keep_days: 10
  include:
    entities:
      - sensor.wohnzimmer_temp
      - sensor.wohnzimmer_humidity

Weniger ist mehr: Auf dem Start-Dashboard nur das Nötigste, Details in Unter-Views
Polling-starke Karten (Kameras, viele Graphen) sparsam auf Mobil-Dashboards

Sicherheit & Privatsphäre

Keine kritischen Admin-Karten auf frei zugänglichen Tablets
Mehr-Faktor-Anmeldung aktivieren (Profil → Sicherheitsoptionen)
Für Gäste eigenes Dashboard mit begrenzten Entitäten

Beispiel: Wohnzimmer-View komplett

title: Wohnzimmer
path: wohnzimmer
icon: mdi:sofa
cards:
  - type: grid
    columns: 3
    square: false
    cards:
      - type: custom:mushroom-light-card
        entity: light.wohnzimmer_decke
        name: Decke
        use_light_color: true
      - type: custom:mushroom-light-card
        entity: light.wohnzimmer_stehlampe
        name: Stehlampe
      - type: button
        name: Szene: Film
        icon: mdi:movie
        tap_action:
          action: call-service
          service: scene.turn_on
          target: { entity_id: scene.wohnzimmer_film }
  - type: custom:mini-graph-card
    name: Klima (48h)
    entities:
      - sensor.wohnzimmer_temp
      - sensor.wohnzimmer_humidity
    hours_to_show: 48
    points_per_hour: 2
  - type: conditional
    conditions:
      - entity: binary_sensor.fenster_wohnzimmer
        state: 'on'
    card:
      type: alert
      title: Fenster ist offen
      severity: warning