Von: Simon

Home Assistant Dashboards erstellen & warum Themes nicht funktionieren

In diesem Video zeige ich dir, wie du eigene Home Assistant Dashboards erstellst und erkläre, warum Vorlagen/Templates/Themes nicht funktionieren.

Home Assistant ist ein großartiges Tool, aber das Standard-Dashboard 📉 ist oft nicht ausreichend oder zu unübersichtlich. In diesem Video zeige ich dir, wo du Ideen und Code-Beispiele findest, um ein Dashboard zu erstellen, was wirklich deinen Anforderungen und Bedürfnissen entspricht und was du zu Themes unbedingt wissen solltest 📖

Voraussetzungen

  1. Home Assistant Installation auf Raspberry Pi
  2. HACS (Teilweise)

Dashboard-Karten (Code-Snippets)

Die Karten liste ich dir hier in der Reihenfolge auf, wie sie im Video besprochen oder genannt wurden 🙂

Einfügen der Code-Snippets

Zum Einfügen der Code-Snippets:

Home Assistant Dashboard Manuelle Karte hinzufügen für YAML Code
  1. Bearbeite dein Dashboard
  2. Lege dir eine “Manuelle” Karte an 👆
  3. Hier kannst du den Code einfügen, die Namen der Entitäten anpassen

Und schon bist du fertig 🙂

Personen

Personen-Karte
Entitäten kommen von der iCloud-Integration (HA-Core)
Code
type: vertical-stack
cards:
  - cards:
      - image: /api/image/serve/b1982a9dbb82b887d18cc2cdbb2e1bab/512x512
        elements:
          - style:
              color: white
              top: 93%
              left: 30%
            type: state-label
            entity: person.simon_muller
          - style:
              color: white
              top: 93%
              left: 75%
            type: state-label
            entity: sensor.iphone_battery_state
        type: picture-elements
      - image: /local/custom/Arabella-1.png
        elements:
          - style:
              color: white
              top: 93%
              left: 30%
            type: state-label
            entity: person.arabella_oberstedt
          - style:
              color: white
              top: 93%
              left: 75%
            type: state-label
            entity: sensor.iphone_von_arabella_battery_state
        type: picture-elements
    type: horizontal-stack

Wetter

Wetter-Karte
Standard Wetter-Karte der Lovelace-UI
Code
show_current: true
show_forecast: true
type: weather-forecast
entity: weather.openweathermap
name: Wetter

Lichter

Licht-karte
Code
show_name: true
show_icon: true
show_state: false
type: glance
entities:
  - entity: light.licht_spiegelschrank_state
    name: Spiegel
    tap_action:
      action: toggle
    hold_action:
      action: more-info
  - entity: light.licht_flur_state
    name: Flur
    tap_action:
      action: toggle
    hold_action:
      action: more-info
  - entity: light.funk_dimmaktor_dose_flur
    name: Flur
    tap_action:
      action: toggle
    hold_action:
      action: more-info
  - entity: light.licht_kuche
    name: Küche
    tap_action:
      action: toggle
    hold_action:
      action: more-info
  - entity: light.licht_tisch
    name: Tisch
    tap_action:
      action: toggle
    hold_action:
      action: more-info
  - entity: light.licht_wohnzimmer_state
    name: Wohnzimmer
    tap_action:
      action: toggle
    hold_action:
      action: more-info
  - entity: light.deckenlampe_schlafzimmer
    name: Schlafzimmer
    tap_action:
      action: toggle
    hold_action:
      action: more-info
  - entity: light.shapes_e22c
    name: Shapes
    tap_action:
      action: toggle
    hold_action:
      action: more-info
  - entity: light.pyramide
    name: Pyramide
    tap_action:
      action: toggle
    hold_action:
      action: more-info
state_color: true
columns: 5
title: Licht

Haustür

Haustür-Karte
Link zum Beitrag: Türöffner smart machen mit WLAN, App-Steuerung, Siri & Alexa
Code
type: entities
entities:
  - entity: lock.hausturoffner
  - entity: sensor.shelly_button_haustur_battery
title: Haustür
show_header_toggle: false

Geschätzte Helligkeit

Geschätze Helligkeit
Repository für HACS: ha-illuminance
Code
hours_to_show: 48
graph: line
type: sensor
entity: sensor.estimated_illuminance
detail: 1
name: Geschätzte Helligkeit
icon: mdi:brightness-auto
unit: lux

HVAC-Custom Karte

HVAC-Karte
Code

Hier: Warum Home Assistant Thermostat Karten nicht gut sind

Bild mit Rollläden und Hilfsvariablen

Bild-Karte
Unten in der Mitte wird der aktuelle Gesamtverbrauch in Watt angezeigt. (Mitte August 2022 erscheint zu “Stromzähler in Home Assistant auslesen” ein Video.)
Code
type: vertical-stack
cards:
  - cards:
      - style:
          border-radius: 20px
          box-shadow: 3px 3px rgba(0,0,0,0.4)
          border: solid 1px rgba(100,100,100,0.3)
          overflow: hidden
        image: /local/custom/2022-05-12_19-49-50.png
        elements:
          - style:
              color: white
              top: 85%
              left: 10%
            type: state-icon
            entity: input_boolean.chac_is_enabled
          - style:
              color: white
              top: 93%
              left: 50%
            type: state-badge
            title: test
            entity: sensor.strom_eg_aktuell
          - style:
              color: white
              top: 85%
              left: 90%
            type: state-icon
            entity: input_boolean.cover_manage_cover_with_sun
          - style:
              color: white
              top: 15%
              left: 92%
            type: state-icon
            entity: cover.rollo_badezimmer
          - style:
              color: white
              top: 14%
              left: 77%
            type: state-icon
            entity: cover.rollo_kuche
          - style:
              color: white
              top: 13%
              left: 56%
            type: state-icon
            entity: cover.rollo_wohnzimmer
          - style:
              color: white
              top: 12%
              left: 24%
            type: state-icon
            entity: cover.rollo_schlafzimmer
        type: picture-elements
    type: horizontal-stack

Sicherheit

Sicherheits-Karte
Standard Glance-Karte der Lovelace-UI
Code
show_name: true
show_icon: true
show_state: true
type: glance
entities:
  - entity: binary_sensor.bewegungsmelder_wohnzimmer_motion
    name: Wohnzimmer
  - entity: sensor.bewegungsmelder_wohnzimmer_brightness
    name: Wohnzimmer
  - entity: binary_sensor.bewegungsmelder_bad_motion
    name: Bad
  - entity: sensor.bewegungsmelder_bad_brightness
    name: Bad
  - entity: binary_sensor.turkontakt_abstellraum_state
    name: Abstellraum
  - entity: binary_sensor.fenster_wohnzimmer_state
    name: Wohnzimmer
  - entity: binary_sensor.fenster_bad_state
    name: Bad
  - entity: binary_sensor.fenster_schlafzimmer_state
    name: Schlafzimmer
columns: 4
title: Sicherheit

Klima-Karte Schlafzimmer

Luftklima-Karte
custom:vertical-stack-in-card, kombiniert mit einer horizontal-stack, entity-cards und custom:mini-graph-card
Code
cards:
  - cards:
      - entity: fan.levoit_core300s
        type: entities
        entities:
          - fan.levoit_core300s
        title: Klima SZ
      - entity: sensor.schlafzimmer_luftqualitaet
        type: entity
        name: Luftqualität
        state_color: false
        icon: mdi:leaf
    type: horizontal-stack
  - cards:
      - align_state: left
        icon: mdi:chart-areaspline
        entities:
          - color: '#99ccff'
            entity: sensor.schlafzimmer_luftqualitaet_in_pm25
            index: 0
            points_per_hour: 6
            name: Schlafzimmer Luftqualität Verlauf
        type: custom:mini-graph-card
    type: horizontal-stack
type: custom:vertical-stack-in-card

Geräte für HA

Mehr Geräte für Home Assistant, HACS oder auch Alexa, Google Home, HomeKit sowie Homebridge findest du in unserem Smart Home Gerätefinder!

Fazit

Schlussabsatz: Dashboards sind ein wichtiger Teil des Home Assistant. Sie geben dir einen schnellen Überblick darüber, was in deinem Zuhause passiert und ermöglichen es dir, deine Geräte schnell und einfach zu steuern.

Wenn du dein eigenes Dashboard erstellst, kannst du sicherstellen, dass es die Informationen enthält, die für dich am wichtigsten sind. Das Video zeigt, wie du Codebeispiele für Dashboards findest und wie du sie selbst erstellen kannst. Ich hoffe, du fandest das hilfreich und kannst jetzt auch deine eigenen Dashboard-Karten erstellen!

close
HomeKit Geräte Übersicht

smarte News

Erfahre als Erster, wenn wir neue Artikel zu Smart Home oder anderen interessanten Themen veröffentlichen!

Wir senden keinen Spam und verkaufen keine Daten! Erfahre mehr in unserer Datenschutzerklärung.

Gründer von simon42. Schreibt hier ehrlich und leidenschaftlich über Smart Home und Technik Themen, denn das Zuhause wurde bereits von Sprachassistenten übernommen und die Kontrolle abgegeben 😁 Kaffeespende

2 Gedanken zu „Home Assistant Dashboards erstellen & warum Themes nicht funktionieren“

  1. Hi Simon,

    deine YT Videos und Erklärungen helfen mir ernorm beim Umstieg von Homebridge auf HomeAssistant. Vielen Dank dafür!

    Ich versuche grade deine Anwesenheitskarte nachzubauen.
    Ich habe allerdings ein Problem mit der Bildgröße.

    Bei dir im Code steht bei deinem Bild “512×512”
    Allerdings scheint dein Bild auch nicht vom “lcocal” Ordner eingebunden zu sein. sondern über eine API. Das Bild deiner Freundin hingegen schon. Allerdings fehlt dort die Größenangabe.

    Weißt du ob es für gespeicherte Bilde auch die Möglichkeit gibt die Größe des Bildes in der Kachel zu definieren?
    Oder muss ich das bevor ich es in HomeAssistant lade auf die richtige Größe bringen?

    Besten Dank und viele Grüße
    Chris

    Antworten
    • Hi Chris,
      die Größe ist relativ egal, solange das Bild quadratisch ist, wird es dann in der Picture Elements Karte richtig angezeigt. Zumindest so lange, wie man 2 davon in einem horizontalen Stapel hat 🙌

Schreibe einen Kommentar