Dashboard & UI

## Überblick: Das Dashboard in Home Assistant

1# Entities Card mit verschiedenen Typen
2type: entities
3title: "Wohnzimmer"
4show_header_toggle: true
5entities:
6  - entity: light.wohnzimmer
7name: Deckenlampe
8  - entity: light.stehlampe
9name: Stehlampe
10  - type: divider
11  - entity: sensor.wohnzimmer_temperatur
12name: Temperatur
13icon: mdi:thermometer
14  - entity: sensor.wohnzimmer_luftfeuchtigkeit
15name: Luftfeuchtigkeit
16  - type: divider
17  - entity: media_player.sonos_wohnzimmer
18name: Sonos
19  - type: button
20name: "Alles aus"
21icon: mdi:power
22action_name: Ausschalten
23tap_action:
24  action: call-service
25  service: homeassistant.turn_off
26  target:
27    area_id: wohnzimmer

1# Gauge Card mit Farbzonen
2type: gauge
3entity: sensor.cpu_temperatur
4name: "Server CPU"
5min: 20
6max: 100
7needle: true
8severity:
9  green: 20
10  yellow: 60
11  red: 80
12
13# Oder als Segment-Gauge:
14type: gauge
15entity: sensor.luftqualitaet
16name: "CO2 Wohnzimmer"
17unit: "ppm"
18min: 400
19max: 2000
20segments:
21  - from: 400
22color: "#43A047"
23label: "Gut"
24  - from: 800
25color: "#FFC107"
26label: "Maessig"
27  - from: 1200
28color: "#FF5722"
29label: "Schlecht"
30  - from: 1600
31color: "#D32F2F"
32label: "Lueften!"

1# Conditional Card: Nur bei Bedarf anzeigen
2# Zeige nur wenn die Haustuer offen ist:
3type: conditional
4conditions:
5  - condition: state
6entity: binary_sensor.haustuer
7state: "on"
8card:
9  type: markdown
10  content: >
11## Die Haustuer ist offen!
12Seit {{ relative_time(states.binary_sensor.haustuer.last_changed) }}.
13
14# Zeige nur bei Regen:
15type: conditional
16conditions:
17  - condition: state
18entity: weather.home
19state: "rainy"
20card:
21  type: entity
22  entity: weather.home
23  name: "Es regnet!"

1# Grid Card für kompakte Übersicht
2type: grid
3columns: 3
4square: false
5cards:
6  - type: button
7entity: light.wohnzimmer
8name: Wohnzimmer
9show_state: true
10tap_action:
11  action: toggle
12  - type: button
13entity: light.kueche
14name: Küche
15show_state: true
16tap_action:
17  action: toggle
18  - type: button
19entity: light.schlafzimmer
20name: Schlafzimmer
21show_state: true
22tap_action:
23  action: toggle
24  - type: button
25entity: cover.rolladen_wz
26name: Rollladen
27icon: mdi:blinds
28  - type: button
29entity: lock.haustuer
30name: Haustuer
31  - type: button
32entity: vacuum.roborock
33name: Staubsauger

1# Mushroom Light Card
2type: custom:mushroom-light-card
3entity: light.wohnzimmer
4name: Wohnzimmer Licht
5show_brightness_control: true
6show_color_control: true
7use_light_color: true
8layout: horizontal

1# Mushroom Chips Card — Kompakte Status-Leiste
2type: custom:mushroom-chips-card
3chips:
4  - type: weather
5entity: weather.home
6show_temperature: true
7  - type: entity
8entity: sensor.wohnzimmer_temperatur
9icon: mdi:thermometer
10  - type: entity
11entity: sensor.stromverbrauch
12icon: mdi:flash
13  - type: conditional
14conditions:
15  - entity: binary_sensor.haustuer
16    state: "on"
17chip:
18  type: entity
19  entity: binary_sensor.haustuer
20  icon: mdi:door-open
21  icon_color: red
22  - type: alarm-control-panel
23entity: alarm_control_panel.alarm

1# Mushroom Template Card — Dynamischer Inhalt
2type: custom:mushroom-template-card
3primary: >
4  {% set hour = now().hour %}
5  {% if hour < 12 %}Guten Morgen{% elif hour < 18 %}Hallo{% else %}Guten Abend{% endif %}, {{ user }}!
6secondary: >
7  {{ states('sensor.wohnzimmer_temperatur') }} Grad 
8  {{ states('sensor.luftfeuchtigkeit') }}% Luftfeuchtigkeit
9  {% if is_state('binary_sensor.regen', 'on') %}(Regen){% else %}(Trocken){% endif %}
10icon: mdi:home-heart
11icon_color: >
12  {% if is_state('alarm_control_panel.alarm', 'armed_away') %}red
13  {% else %}green{% endif %}
14tap_action:
15  action: navigate
16  navigation_path: /lovelace/übersicht

1# Mushroom Person Card — Anwesenheit
2type: custom:mushroom-person-card
3entity: person.max
4layout: horizontal
5primary_info: name
6secondary_info: state
7icon_type: entity-picture

1# Mini Graph Card mit mehreren Linien
2type: custom:mini-graph-card
3entities:
4  - entity: sensor.aussentemperatur
5name: Aussen
6color: "#03A9F4"
7  - entity: sensor.wohnzimmer_temperatur
8name: Innen
9color: "#FF9800"
10hours_to_show: 48
11line_width: 2
12points_per_hour: 2
13show:
14  labels: true
15  points: false
16  legend: true
17  average: true
18  extrema: true
19color_thresholds:
20  - value: 0
21color: "#1565C0"
22  - value: 15
23color: "#43A047"
24  - value: 25
25color: "#FF6F00"
26  - value: 35
27color: "#D32F2F"

1# ApexCharts: Energieverbrauch als Balkendiagramm
2type: custom:apexcharts-card
3header:
4  title: Stromverbrauch diese Woche
5  show: true
6graph_span: 7d
7span:
8  end: day
9series:
10  - entity: sensor.strom_taeglich
11type: column
12name: Verbrauch (kWh)
13color: "#E53935"
14group_by:
15  func: max
16  duration: 1d
17  - entity: sensor.solar_taeglich
18type: column
19name: Solar (kWh)
20color: "#FFC107"
21group_by:
22  func: max
23  duration: 1d
24apex_config:
25  chart:
26stacked: false
27  plotOptions:
28bar:
29  borderRadius: 4

1# Picture Elements: Grundriss mit interaktiven Elementen
2type: picture-elements
3image: /local/images/grundriss.png
4elements:
5  - type: state-icon
6entity: light.wohnzimmer
7style:
8  top: 45%
9  left: 30%
10tap_action:
11  action: toggle
12  - type: state-label
13entity: sensor.wohnzimmer_temperatur
14suffix: " Grad"
15style:
16  top: 50%
17  left: 30%
18  font-size: 12px
19  color: white
20  background: "rgba(0,0,0,0.5)"
21  padding: 2px 6px
22  border-radius: 4px
23  - type: state-icon
24entity: binary_sensor.haustuer
25style:
26  top: 85%
27  left: 50%
28  - type: icon
29icon: mdi:cctv
30entity: camera.flur
31style:
32  top: 10%
33  left: 80%
34tap_action:
35  action: more-info

1# Eigenes Theme (themes.yaml)
2# In configuration.yaml: frontend: themes: !include themes.yaml
3
4mein_theme:
5  # Hauptfarben
6  primary-color: "#03A9F4"
7  accent-color: "#00BCD4"
8  
9  # Hintergrund
10  ha-card-background: "rgba(255,255,255,0.95)"
11  card-background-color: "rgba(255,255,255,0.95)"
12  primary-background-color: "#FAFAFA"
13  
14  # Karten
15  ha-card-border-radius: "16px"
16  ha-card-box-shadow: "0 2px 8px rgba(0,0,0,0.08)"
17  
18  # Dark Mode Variante
19mein_theme_dark:
20  primary-color: "#03A9F4"
21  accent-color: "#00BCD4"
22  ha-card-background: "rgba(30,30,30,0.95)"
23  card-background-color: "rgba(30,30,30,0.95)"
24  primary-background-color: "#121212"
25  ha-card-border-radius: "16px"
26  ha-card-box-shadow: "0 2px 12px rgba(0,0,0,0.3)"
27  text-primary-color: "#E0E0E0"

1# Komplettes Wohnzimmer-Dashboard
2# Vertical Stack mit allen Elementen
3type: vertical-stack
4cards:
5  # Status-Chips oben
6  - type: custom:mushroom-chips-card
7chips:
8  - type: weather
9    entity: weather.home
10  - type: entity
11    entity: sensor.wohnzimmer_temperatur
12  - type: entity
13    entity: sensor.wohnzimmer_luftfeuchtigkeit
14  
15  # Licht-Steuerung
16  - type: custom:mushroom-title-card
17title: Beleuchtung
18  - type: grid
19columns: 2
20square: false
21cards:
22  - type: custom:mushroom-light-card
23    entity: light.deckenlampe
24    show_brightness_control: true
25    use_light_color: true
26  - type: custom:mushroom-light-card
27    entity: light.stehlampe
28    show_brightness_control: true
29    use_light_color: true
30  
31  # Klima
32  - type: custom:mushroom-title-card
33title: Klima
34  - type: custom:mini-graph-card
35entities:
36  - sensor.wohnzimmer_temperatur
37hours_to_show: 24
38line_width: 2
39show:
40  labels: true
41  points: false
42  
43  # Media
44  - type: custom:mushroom-title-card
45title: Medien
46  - type: custom:mini-media-player
47entity: media_player.sonos_wohnzimmer
48artwork: cover
49hide:
50  power: false
51  volume: false

1# Eingangsbereich Quick-Status
2type: vertical-stack
3cards:
4  - type: custom:mushroom-template-card
5primary: >
6  {% if is_state('person.max', 'home') and is_state('person.anna', 'home') %}
7    Alle zuhause
8  {% elif is_state('person.max', 'home') %}
9    Max ist zuhause
10  {% elif is_state('person.anna', 'home') %}
11    Anna ist zuhause
12  {% else %}
13    Niemand zuhause
14  {% endif %}
15secondary: >
16  {{ states('sensor.haustuer_letzte_aktivitaet') }}
17icon: mdi:home-account
18
19  - type: conditional
20conditions:
21  - condition: state
22    entity: binary_sensor.haustuer
23    state: "on"
24card:
25  type: markdown
26  content: "## Haustuer ist OFFEN!"
27  
28  - type: grid
29columns: 3
30cards:
31  - type: button
32    entity: lock.haustuer
33    name: Schloss
34    tap_action:
35      action: toggle
36  - type: button
37    entity: light.flur
38    name: Flur
39  - type: button
40    entity: cover.garage
41    name: Garage

1# Ansicht: Nur auf Mobile sichtbar
2# In der Ansicht-Konfiguration:
3title: Mobile
4icon: mdi:cellphone
5visible:
6  - user: alle_benutzer
7# Oder: Panel-Modus für Vollbild-Karte
8panel: true

1# Kiosk-Modus für Wandtablet
2# Nach Installation von kiosk-mode über HACS:
3kiosk_mode:
4  hide_header: true
5  hide_sidebar: true
6  # Nur für bestimmte Benutzer:
7  entity_settings:
8- entity:
9    user: tablet_user
10  hide_header: true
11  hide_sidebar: true