Lovelace Dashboard 2022 Neu – so visualisiere ich Home Assistant

Inhaltsverzeichnis

Home Assistant Dashboard

Um Home Assistant einfacher zu Bedienen, ist ein Dashboard auf jeden Fall von Vorteil. Über das Lovelace User Interface (Lovelace-UI) kann man ein Dashboard relativ einfach und individuell einrichten und gestalten. Je nach Ansprüche ist es möglich, über den Home Assistant Community Stor (HACS) , Karten, Integrationen und Themen zu Intallieren. Ich zeige dir in mehreren Teilen, welches Dashboard ich wo einsetze und in einer Schritt für Schritt Anleitung wie du dir dein eigenes Dashboard erstellen kannst.

Teil 1 – Grundlagen

Im ersten Teil geht es um die Dashboard Grundlagen und die ersten Karten welche ich verwendet habe.
Zuerst muss man wissen, dass bei einer jeden Home Assistant Installation automatisch ein Dashboard als Übersicht angelegt wird. Auf diesem sind wiederum automatisch alle Geräte bzw. Entitäten angeführt. Allerdings ist die Aufteilung, sobald man eine gewisse Anzahl an Geräten hat, etwas unübersichtlich. Aus diesem Grund erstellt man sich am besten ein eigenes Dashboard und gestalltet das nach seinen individuellen Vorstellungen.

Dashboard Übersicht
Standard Übersicht

Neues Dashboard anlegen

Um in Home Assistant ein neues Lovelace Dashboard anzulegen, klicke auf

dann auf

und wähle rechts unten

Hier öffnet sich nun ein Fenster in dem der Titel und die URL einzutragen sind

Wenn die nötigen Daten eingetragen sind, klicke auf

Nun erscheint der ausgewählte Name des eben angelegten Dashboards in der Seitenleiste. Diesen wähle aus und sofort öffnet sich eine Standard-Übersicht. Um diese Ansicht nach eigenen Vorstellungen zu gestalten, musst du die Kontrolle über das Dashboard übernehmen.

Dazu wähle rechts oben die 3 Punkte
und

Im erscheinenden Fenster setze den Schalter, um mit einem leeren Dashboard zu beginnen

und wähle

Somit ist das Dashboard angelegt

Einstellungen ändern

Um die Einstellungen des Dasboards bzw. dessen Seiten zu ändern, drückt man lediglich auf den gelben Stift in der Titelleiste

Im erscheinenden Fenster kann man dann den Titel, die URL, das Thema und optional ein Tiltelleisten-Symbol auswählen, sowie entscheiden ob die Ansichtsart des Dashboards „Raster“, „Seitenleiste“ oder „Panel“ sein soll. Auch ein Einfügen von Plaketten und die Einstellung der Sichtbarkeit des Dashboards ist in diesem Menü möglich.

Theme Installieren

Ein Theme ist zur Verschönerung des Dashboards eine tolle Sache. Es gibt sie in den verschiedensten Optiken und von den verschiedensten Anbietern.

In meinem Fall benutze ich für meine Dashboards lediglich

  1. iOS Themes – Dark Mode and Light Mode – LINK ZUM REPOSITORY
  2. Caule Themes Pack 1 – LINK ZUM REPOSITORY

Um diese Themes zu installieren, gehe auf
dann auf

und wähle

Nun suche nach „IOS Theme“ bzw. „Caule Theme“ und installiere diese Repositories.

Für den Fall das dies die ersten Themes sind welche installiert wurden, kontrolliere in deiner „config“ Datei on der Ordner „themes“ angelegt wurde.

Danach gehe über den Editor bzw. Studio Code Server auf deine „configuration.yaml“ Datei und trage folgende Zeilen ein, damit Home Assistant für das Frontend auf den Ordner Themes bzw. die installierten Themes zugreifen kann:

# Eintrag in configuration.yaml

frontend:
  themes: !include_dir_merge_named themes

Danach Home Assistant NEU starten und evtl. den Browser Cache leern.

Nach diesen Schritten kann bei den Dashboard Einstellungen unter „Aussehen“ das installierte Theme ausgewählt werden.

Teil 2 – Animierter Hintergrund

Um einen statusabhängigen animierten Hintergrund dem Dashboard zuzufügen, gehe auf
dann auf

,wähle rechts oben die 3 Punkte

und hier wähle

Nun trage folgende URL bei Repository ein, wähle bei der Kategorie „Lovelace“ und klicke auf

# Da die vorherigen Versionen bzw. deren Ersteller dieses Repository nicht mehr pflegen, habe ich es auf meine GitHub-Seite übertragen und bemühe mich, es bestmöglich auf dem neuesten Stand zu halten.

https://github.com/MaxxKra/lovelace-animated-background.git

Nach dem Hinzufügen wähle das neu erschienene Repository aus

und gehe auf

Nach der Installation, wechsle auf dein Dashboard und öffne den
Raw-Konfigurationseditor über die drei Punkte
, dann

, nocheinmal die 3 Punkte

und dann

Nun füge die folgenden Zeilen ganz oben in deine Konfiguration ein.

#########################################################################################
#---------------------------------------------------------------------------------------#
##-----------------------------  Animierter Hintergrund -------------------------------##
#---------------------------------------------------------------------------------------#
#########################################################################################

# Installiere Villhellm / lovelace-animated-background in HACS
# und füge diese Zeilen in deinem Raw-Konfigurationseditor ein.

# Als Status für den Hintergrund kann jede Entität herangezogen werden

animated_background:
  default_url: https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4
  groups:
    - name: weather
      config:
        entity: sensor.openweathermap_condition
        state_url:
          sunny:
            - https://cdn.flixel.com/flixel/hlhff0h8md4ev0kju5be.hd.mp4
            - https://cdn.flixel.com/flixel/zjqsoc6ecqhntpl5vacs.hd.mp4
            - https://cdn.flixel.com/flixel/jvw1avupguhfbo11betq.hd.mp4
            - https://cdn.flixel.com/flixel/8cmeusxf3pkanai43djs.hd.mp4
            - https://cdn.flixel.com/flixel/guwb10mfddctfvwioaex.hd.mp4
          partlycloudy:
            - https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4
            - https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4
            - https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4
            - https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4
            - https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4
            - https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4
          cloudy:
            - https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4
            - https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4
            - https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4
            - https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4
            - https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4
            - https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4
          mostlycloudy:
            - https://cdn.flixel.com/flixel/e95h5cqyvhnrk4ytqt4q.hd.mp4
            - https://cdn.flixel.com/flixel/l2bjw34wnusyf5q2qq3p.hd.mp4
            - https://cdn.flixel.com/flixel/rrgta099ulami3zb9fd2.hd.mp4
          clear-night:
            - https://cdn.flixel.com/flixel/x9dr8caygivq5secll7i.hd.mp4
            - https://cdn.flixel.com/flixel/v26zyfd6yf0r33s46vpe.hd.mp4
            - https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4
            - https://cdn.flixel.com/flixel/rosz2gi676xhkiw1ut6i.hd.mp4
          fog:
            - https://cdn.flixel.com/flixel/vwqzlk4turo2449be9uf.hd.mp4
            - https://cdn.flixel.com/flixel/5363uhabodwwrzgnq6vx.hd.mp4
          rainy:
            - https://cdn.flixel.com/flixel/qti3s5st0srowd9krhcw.hd.mp4
            - https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4
          pouring:
            - https://cdn.flixel.com/flixel/qti3s5st0srowd9krhcw.hd.mp4
            - https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4
          lightning-rainy:
            - https://cdn.flixel.com/flixel/sbk5sc03j7vay52r3e4o.hd.mp4
            - https://cdn.flixel.com/flixel/chrgj6raf5q3s6y2so7z.hd.mp4
            
# Auf jeder Seite dieses Dashboards muss folgende Zeile der Konfiguration zugefügt werden:

views:
  - theme: ios-dark-mode-dark-green
# Das Thema für die Karten und für den Hintergrund wenn der animierte Hintergrund nicht genutz wird
    title: Medien
    path: medien
    animated_background: weather 
# Wenn der annimierte Hintergrund genutzt werden soll "weather" ansonsten "none"
    panel: true
    type: panel
    badges: []
    cards:

Für den Fall, dass die YAML Konfiguration mit einem externen Programm wie z.B. Notepad++ oder VS Code bearbeitet und gespeichert wird, kann man diese Datei auch mit Texten übersichtlicher und optisch ansprechender gestalten. Wie? Sieh dir dazu Vorlagen und ein Alphabeth an.

Teil 3 – Kiosk Modus

Um das Dashboard in Vollbild, also ohne Seitenleiste und Titelleiste anzuzeigen, benötigt man den Kiosk Modus (Kiosk Mode). Damit ist es möglich diese Leisten, durch den Status einer Entität auszublenden.

Um diesen Kiosk Modus zu installieren, wechsle auf

dann auf

und wähle

Nun gib bei der Suche „Kiosk Mode“ ein,

wähle Kiosk Mode aus und installiere es.

##    ## ####  #######   ######  ##    ##      ##     ##  #######  ########  ##     ##  ######  
##   ##   ##  ##     ## ##    ## ##   ##       ###   ### ##     ## ##     ## ##     ## ##    ## 
##  ##    ##  ##     ## ##       ##  ##        #### #### ##     ## ##     ## ##     ## ##       
#####     ##  ##     ##  ######  #####         ## ### ## ##     ## ##     ## ##     ##  ######  
##  ##    ##  ##     ##       ## ##  ##        ##     ## ##     ## ##     ## ##     ##       ## 
##   ##   ##  ##     ## ##    ## ##   ##       ##     ## ##     ## ##     ## ##     ## ##    ## 
##    ## ####  #######   ######  ##    ##      ##     ##  #######  ########   #######   ######  

# Für den Kiosk Modus gehe nach 
# HACS - Frontend - Durchsuchen und Herunterladen von Repositories
# und suche nach Kiosk Mode

# Installiere dieses Repositiory

# Danach gehe zu deinem Dashboard und
# füge diese Zeilen in deinen 
# Raw-Konfigurationseditor ganz oben ein

kiosk_mode:
  entity_settings:
    - entity:
        switch.<aus deinen Helfern>: 'on'
      hide_sidebar: true
      hide_header: true

Teil 4 – Glance Card und meine Buttons

Glance Card

Die Glance Card ist eine Karte zur Statusanzeige auf dem Dashboard.
Allerdings lässt sie sich mit ein bisschen YAML Code zu einer Schaltfläche umwandeln.

Erweitere im Code-Editor der Karte den bestehenden Code um diese Zeilen:

type: glance
entities:
  - entity: switch.youtube_test_lampe
    name: YT Lampe
    tap_action:
      action: toggle
  - entity: switch.youtube_test_luefter
    name: YT Lüfter
    tap_action:
      action: toggle
  - entity: switch.youtube_test_taster
    name: YT Taster
    tap_action:
      action: toggle

Eigene Icons für das Dashboard

Um auf meinem Dashboard einen individuellen Touch zu bekommen, habe ich Buttons und Icons selber gestaltet. Dies ist, wenn man sich eine Zeitlang damit beschäftigt, relativ einfach. Dazu benötigt man lediglich ein Grafikprogramm und Icon Vorlagen.

Folgende Programme und Webseiten habe ich dafür verwendet:

Grafikprogramm: https://www.designer.io/de/download/
Zum Download von Icons: https://www.flaticon.com/

Hier stelle ich gerne meine Buttons und auch die Vorlage aus dem Grafikprogram zum Download zur Verfügung.

Allgemeine runde Buttons

Allgemeine quadratische Buttons

Räume Gruppen Buttons

Allgemeine Buttons ohne Rahmen

Streaming Dienste Buttons

Animierte GIF Buttons und Bilder

Diese GIF´s machen das Dashboard noch „lebendiger“ und geben mir einen Überblick z.B. welcher Streamingdienst gerade ausgewählt ist.
Erstellt habe ich diese GIF Dateien in Photoshop. Auch diese Vorlagen sind zum Download verfügbar.

Teil 5 – Custom Button Card

Eine der powervollsten Karten in Home Assistant ist die „Custom-Button-Card“

Um diese einzurichten, gehe auf

dann auf

und unter suche nach „Button Card“

Installiere diese Karte und wenn dies erledigt ist, kannst du sie auf deinem Dashboard mit einer Vielzahl an Möglichkeiten einrichten.

Eine genaue Beschreibung auf Englisch findest du hier.

Standard Custom Button Schaltfläche

type: custom:button-card
entity: switch.youtube_test_lampe
name: YT Lampe
size: 100%

Schaltfläche mit Rahmen und geänderter Schriftart

type: custom:button-card
entity: switch.youtube_test_lampe
name: YT Lampe
size: 100%
styles:
  card:
    - font: 18px Cooper
    - border: 8px double var(--button-card-light-color)

Schaltfläche mit Symbol und Rahmen in Entitäts-Farbe

type: custom:button-card
entity: light.youtube_test_led
name: YT LED
size: 100%
state:
  - value: 'on'
    styles:
      icon:
        - color: var(--button-card-light-color)
styles:
  card:
    - font: 18px Cooper
    - border: 8px double var(--button-card-light-color)
tap_action:
  action: toggle
hold_action:
  action: more-info

Schaltfläche mit rotierendem MDI Icon

type: custom:button-card
entity: switch.youtube_test_luefter
name: YT Lüfter
size: 100%
state:
  - value: 'on'
    styles:
      icon:
        - color: var(--button-card-light-color)
        - animation:
            - rotating 1s linear infinite
styles:
  card:
    - font: 18px Cooper
    - border: 8px double var(--button-card-light-color)
tap_action:
  action: toggle
hold_action:
  action: more-info

Schaltfläche mit eigenem Icon

type: custom:button-card
entity: switch.youtube_test_lampe
name: YT Lampe
show_entity_picture: true
size: 100%
state:
  - value: 'on'
    entity_picture: /local/lovelace/icon/button_schreibtisch_on.png
  - value: 'off'
    entity_picture: /local/lovelace/icon/button_schreibtisch_off.png
styles:
  card:
    - font: 18px Cooper
    - border: 8px double var(--button-card-light-color)
tap_action:
  action: toggle

Tastfläche mit eigenem Icon und Animation

type: custom:button-card
entity: switch.youtube_test_taster
name: Zu Hause
show_entity_picture: true
size: 100%
state:
  - value: 'on'
    entity_picture: /local/lovelace/icon/re_button_like.png
    styles:
      icon:
        - animation:
            - springen .5s linear infinite
  - value: 'off'
    entity_picture: /local/lovelace/icon/re_button_zuhause_on.png
extra_styles: |
  @keyframes springen {
            0% {transform: rotatez(0deg); top: 10px}
            25% {transform: rotatez(0deg)}
            50% { top: -15px}
            75% {transform: rotatez(0deg)}
            100% {transform: rotatez(0deg); top: 10px}
            }
styles:
  card:
    - font: 18px Cooper
    - border: 8px double var(--button-card-light-color)
tap_action:
  action: toggle

Teil 6 – card-mod und Alarm-Kontroll-Panel

Card Mod installieren

Um auch andere Karten auf dem Dashboard individuell anzupassen ist „card-mod“ eine super Möglichkeit. Dadurch können verschiedenste Karten mittels CSS optisch aufgewertet werden.

Zur Installation gehe auf
dort auf

und dann auf

Hier suche nach „card-mod“

Wähle es aus und gehe auf

Nach der Installation muss nur noch der Browser-Cache geleert werden und man kann mit der Bearbeitung von den diversesten Karten am Lovelace Dashboard beginnen.

Karten mit card-mod bearbeiten

Hier zeige ich ein paar Beispiele mit den Codes welche ich auf meinen Dashboards benutze. Um den Code der Karte hinzuzufügen, wähle im Visuellen Editor „CODE-EDITOR ANZEIGEN“ und füge die Zeilen ganz unten der YAML Programmierung bei.

Markdown Card mit card-mod

Doppelter Rahmen und Farbe von aktiver Entität

type: markdown
content: '# <center> Alarmanlage'
card_mod:
  style: |
    ha-card {
      border: 8px double var(--primary-color);
      color: var(--paper-item-icon-active-color)
      }

Entity Card mit card-mod

Einfacher Rahmen und Farbe von aktiver Entität

type: entity
entity: alarm_control_panel.youtube_alarm
name: 'Zuhause Alarm ist '
state_color: false
card_mod:
  style: |
    ha-card {
      border: 4px solid var(--primary-color);
      color: var(--paper-item-icon-active-color);
      }

Alarm Dashboard

Für dieses Dashboard habe ich die Buttons ohne Rahmen verwendet. Diese könnt ihr weiter oben in diesem Beitrag zu eurer Verwendung downloaden.

Statusanzeige Alarmanlage Einzel-Button

Alarm „DISARMED“

type: custom:button-card
entity: alarm_control_panel.youtube_alarm
show_name: true
name: disarmed
show_entity_picture: true
entity_picture: /local/lovelace/icon/trans/re_button_leer.png
size: 100%
state:
  - value: disarmed
    entity_picture: /local/lovelace/icon/trans/re_alarm_unscharf.png
    styles:
      card:
        - border: 8px double var(--paper-item-icon-active-color)
styles:
  card:
    - font: 10px Arial
    - border: 8px double var(--paper-item-icon-color)
tap_action:
  action: none
hold_action:
  action: none

Alarm „ARMING“

type: custom:button-card
entity: alarm_control_panel.youtube_alarm
show_name: true
name: arming
show_entity_picture: true
entity_picture: /local/lovelace/icon/trans/re_button_leer.png
size: 100%
state:
  - value: arming
    entity_picture: /local/lovelace/icon/trans/re_alarm_armed.png
    styles:
      icon:
        - animation:
            - blink 2s ease infinite
      card:
        - border: 8px double var(--paper-item-icon-active-color)
        - animation:
            - blink 2s ease infinite
styles:
  card:
    - font: 10px Arial
    - border: 8px double var(--paper-item-icon-color)
tap_action:
  action: none
hold_action:
  action: none

Alarm „ARMED_AWAY“

type: custom:button-card
entity: alarm_control_panel.youtube_alarm
show_name: true
name: armed_away
show_entity_picture: true
entity_picture: /local/lovelace/icon/trans/re_button_leer.png
size: 100%
state:
  - value: armed_away
    entity_picture: /local/lovelace/icon/trans/re_alarm_scharf.png
    styles:
      card:
        - border: 8px double var(--paper-item-icon-active-color)
styles:
  card:
    - font: 10px Arial
    - border: 8px double var(--paper-item-icon-color)
tap_action:
  action: none
hold_action:
  action: none

Alarm „PENDING“

type: custom:button-card
entity: alarm_control_panel.youtube_alarm
show_name: true
name: pending
show_entity_picture: true
entity_picture: /local/lovelace/icon/trans/re_button_leer.png
size: 100%
state:
  - value: pending
    entity_picture: /local/lovelace/icon/trans/re_alarm_pending.png
    styles:
      icon:
        - animation:
            - blink 2s ease infinite
      card:
        - border: 8px double red
        - animation: blink 2s ease infinite
styles:
  card:
    - font: 10px Arial
    - border: 8px double var(--paper-item-icon-color)
tap_action:
  action: none
hold_action:
  action: none

Alarm „TRIGGERED“

type: custom:button-card
entity: alarm_control_panel.youtube_alarm
show_name: true
name: triggered
show_entity_picture: true
entity_picture: /local/lovelace/icon/trans/re_button_leer.png
size: 100%
state:
  - value: triggered
    entity_picture: /local/lovelace/icon/trans/re_alarm_triggered.png
    styles:
      icon:
        - animation:
            - blink 1s ease infinite
      card:
        - border: 8px double red
        - animation: blink 1s ease infinite
styles:
  card:
    - font: 10px Arial
    - border: 8px double var(--paper-item-icon-color)
tap_action:
  action: none
hold_action:
  action: none

Statusanzeige Alarmanlage Gesamt-Button

Hier ist die Variante der Alarm-Status-Anzeige in einem Button. Natürlich können die Entität, die Bilder sowie die Styles und Animationen individuell angepasst werden.

Alarm Status in einem Button

type: custom:button-card
show_name: false
show_entity_picture: true
size: 100%
entity: alarm_control_panel.youtube_alarm
state:
  - value: disarmed
    entity_picture: /local/lovelace/icon/trans/re_alarm_unscharf.png
  - value: arming
    entity_picture: /local/lovelace/icon/trans/re_alarm_armed.png
    styles:
      icon:
        - animation:
            - blink 2s ease infinite
            - border: 8px double var(--paper-item-icon-active-color)
      card:
        - animation: blink 2s ease infinite
        - border: 8px double var(--paper-item-icon-active-color)
  - value: pending
    entity_picture: /local/lovelace/icon/trans/re_alarm_pending.png
    styles:
      icon:
        - animation:
            - blink 2s ease infinite
      card:
        - border: 8px double red
        - animation: blink 2s ease infinite
  - value: triggered
    entity_picture: /local/lovelace/icon/trans/re_alarm_triggered.png
    styles:
      icon:
        - animation:
            - blink 1s ease infinite
      card:
        - border: 8px double red
        - animation: blink 1s ease infinite
  - value: armed_away
    entity_picture: /local/lovelace/icon/trans/re_alarm_scharf.png
    styles:
      card:
        - border: 8px double var(--paper-item-icon-active-color)
styles:
  card:
    - border: 8px double var(--paper-item-icon-color)
tap_action:
  action: none
hold_action:
  action: none

Dieser Beitrag hat 29 Kommentare

  1. Sami

    Guten Tag
    Bin relativ neu mit Smartassistant unterwegs und habe schon „länger“ im WWW gesucht ob es eine Möglichkeit gibt, in einer Dashboardansicht verschachtelte Karten zu erstellen.
    Was will ich machen ? In einer Ansicht die Etagen meines Hauses listen, mit Garage, Garten und Einfahrt. Dies möglichst mit Icons. Wenn man nun auf eines der Icons klickt/tippt sollte eine Unteransicht/Karte der Etage/Bereichs angezeigt werden wo ich die Räume und Bereiche in einzelnen Karten habe. Geht das und wo kann ich hierzu Infos finden ?

  2. Andreas

    Hallo Maxx,
    erstmals möchte ich sagen, das deine Arbeiten wirklich super sind. Ich als HA Anfänger finde da viel Input bei deinen Videos,…
    Jetzt habe ich das Problem, das ich in der aktuellen HA Version (2023.12.4) keine Glance Card zum einfügen finde.
    Weiters habe ich z.B. die „entity: switch.youtube_test_lampe“ bei mir nicht hinterlegt. Muss man diese erst anlegen??

  3. axl

    Hi Maxx, ja bei mir das gleiche,es läuft immer nur das Default. warum denn? Gruss Axl

  4. Urs

    Guten Tag Maxx

    Vielen Dank für deine wunderbare Webseite. Deine Arbeit hier ist unbezahlbar und hat mir schon viel geholfen.
    Ich suche mich aber im Netz dumm und dämmlich nach einer Möglichkeit, eine Grafik HA auf einer Webseite zu veröffentlichen. Schon viel gelesen aber noch nichts gefunden. Dazu kommt das mein Englisch eher schlecht ist.
    Kennst du evtl. eine Möglichkeit oder hast einen gescheiten Link zu einer Anleitung?

    Liebe Grüsse

    Urs

  5. Matthias

    hi Max, danke für die Videos.

    bei dem animierten Hintergrund habe ich das problem, dass nur der „default“ in endlosschleife läuft.

    hast du da eventuell einen tipp für mich?

    gruß

    1. Andreas Pussack

      Hallo,
      du schreibst zu Card Mod Folgendes:
      „Um den Code der Karte hinzuzufügen, wähle im Visuellen Editor „CODE-EDITOR ANZEIGEN“
      Wo finde ich diesen Visuellen Editor?
      Danke und Gruß
      Andreas

  6. wobeco

    Hi, Maxx, sehr gute und vor allem gut nachvollziehbare Tipps & Tricks – DANKE dafür.
    Dennoch die Frage, welche der vorgestellten (außer ‚animierte Hintergrund‘) Individualisierungen auch heute noch (Home Assistant 2023.9.2) so funktionieren oder es sich eine Übernahme nicht mehr lohnt, weil ersetzt oder nicht mehr funktionsfähig?

  7. Karl-Heinz Knoll

    Moin.
    Ja, im das mit dem Garagentor. Ich habe schon einiges als blutiger Anfänger mit meinem Tor in HA gemacht.
    Bin auf meine ersten Automationen stolz, die auch funktionieren.
    Da ich am Tor auch eine Lichtschranke habe und bei der Eintaster-Bedienung (also Tor-Start, Tor Stopp, und Tor in die Gegenrichtung), weiß man ja nie, wenn die Lichtschranke ausgelöst hat, wohin das Tor beim nächsten Betätigen hinfährt. Aber, das habe ich mit einer Automation gelöst. Bestimmt sehr umständlich, aber es geht.
    Was ich aber gerne machen würde, ich weiß aber nicht wie, wäre einen Button auf meinem Home-Dashboard, der einmal ein Icon anzeigt, Tor geschlossen in grün, Tor geöffnet in rot und Tor 1/3 geöffnet in gelb.
    Wenn ich dann z.B. das Icon Tor geschlossen angezeigt bekomme, also der Sensor hat Tor geschlossen gemeldet und ich dann auf den Button drücke, dann möchte ich 2 neue Button angezeigt bekommen, wo ich einmal dann das Tor ganz auffahren kann und einmal das Tor nur 1/3 auffahren kann. Also mit diesen 2 Buttons, kann ich immer nur die vom Hauptbutton anderen Tor-Positionen anfahren.
    Hautbutton: Tor geschlossen dann die 2 neu angezeigten Buttons: Tor ganz öffnen, oder 1/3 öffnen.
    Hautbutton: Tor ganz offen, dann die 2 neu angezeigten Buttons: Tor ganz schließen, oder 1/3 öffnen.
    Hautbutton: Tor 1/3 geöffnet dann die 2 neu angezeigten Buttons: Tor ganz öffnen, oder Tor schließen .

    Hmmmm…..kann mich jemand verstehen?

    Gruß
    Kalle

    1. Joerg

      Hallo Karl-Heinz,
      schaue Dir dazu mal die template-cards an. Es sollte eine Mushroom und eine normale Variante davon geben. Eventuell benötigst Du dazu aber noch ein paar Türkontaktsensoren oder dgl.
      Ich schalte bei meinem Garagentor den Öffner über ein Shelly-Relais und lasse über einen Türkontaktsensor feststellen, ob das Tor offen oder geschlossen ist. Falls Du davon noch einen z. B. auf halber Strecke setzt, kannst Du auch einen Zwischenstand feststellen.
      Je nach Status des Türsensors lasse ich den Button auf dem Dashboard unterschiedlich anzeigen (andere Icons + Farben).
      Mit entsprechender Automation und Helfern kannst Du es vielleicht auch ohne weitere Hardware realiseren. Vermutlich musst du dazu aber ein paar zeitbasierte Helfer definieren, die nach einer bestimmten „Laufzeit“ des Tors, den Öffnungsstand zur Verfügung stellen.
      Auch gefallen dürften Dir die conditional cards, mit denen Du ganze Cards basierend auf dem Status von Entitäten anzeigen oder verbergen kannst.

  8. Bernhard

    Hallo Maxx, vielen Dank für deine Videos, haben mir sehr bei meinem Dashbord geholfen. Ich habe allerdings einen Schönheitsfehler. Bei meinem Garagentor habe ich einen Taster der das Tor öffnet aber einen anderen Sensor der weiß ob das Tor offen oder geschlossen ist. Kann man das in der Buttoncard eingeben das wenn ich auf das Icon drücke die Entität Tor „switch“ betätige und das Bild Tor auf und zu auf einer anderen Entität „Sensor“ wechselt? Hoffe ich habe das verständlich erklärt 🙂
    Danke Bernhard

    1. Maxx

      Hallo Bernhard. Genau dieses Szenario habe ich auch bei meinem Garagentor. Wenn du möchtest, kannst du per Mail mit mir Kontakt aufnehmen und ich sende dir den Code welchen ich benutzt habe zu.
      Mailadresse: youtube@smarthomebastler.at
      Beste Grüße, Maxx

  9. Ludwig Müller

    Hallo,
    vielen Dank, dass du so gute Buttons zur Verfügung stellt. Allerding mache ich etwas falsch, weil mir der Download nicht gelingt.

  10. Enrico21

    Hallo Maxx,
    vielen Dank, ich habe endlich so ein benutzerdefiniertes Repository gefunden und installiert, jetzt funktioniert alles so wie es soll!
    Wünsche noch einen schönen Sonntag!

    Grüße Enrico

  11. Enrico21

    Hallo Maxx,
    entschuldige bitte, aber wo finde ich denn so ein benutzerdefiniertes Repository ?
    Ich lande immer nur auf der Github wo zwar darauf hingewiesen wird, dass man etwas ändern muss, allerdings bin ich zu doof um dahinter zu steigen was ich ändern muss (bin noch sehr neu in der HA-Szene)!
    Kannst Du mir vielleicht einen Tipp/Link geben?
    Sorry nochmal und vielen Dank!

    Grüße Enrico

  12. Enrico21

    Hallo Maxx,
    vielen Dank für Deine schnelle Antwort!
    Ohhh….dann war ich wohl zu schnell mit meiner Frage, wer lesen kann ist klar im Vorteil!
    Ok danke, das werde ich später gleich mal ausprobieren.

    Grüße Enrico

  13. Enrico21

    Hallo Maxx,
    hast Du vielleicht eine Idee warum ich den Animated Background nicht zum Laufen bekomme, bzw. was ich falsch mache?
    Solltest Du noch Informationen brauchen dann sage mir bitte was!
    Hier meine Rar-Konfig:

    animated_background:
    default_url: https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4
    groups:
    – name: weather
    config:
    entity: sensor.openweathermap_condition
    state_url:
    sunny:
    https://cdn.flixel.com/flixel/hlhff0h8md4ev0kju5be.hd.mp4
    https://cdn.flixel.com/flixel/zjqsoc6ecqhntpl5vacs.hd.mp4
    https://cdn.flixel.com/flixel/jvw1avupguhfbo11betq.hd.mp4
    https://cdn.flixel.com/flixel/8cmeusxf3pkanai43djs.hd.mp4
    https://cdn.flixel.com/flixel/guwb10mfddctfvwioaex.hd.mp4
    partlycloudy:
    https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4
    https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4
    https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4
    https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4
    https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4
    https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4
    cloudy:
    https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4
    https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4
    https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4
    https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4
    https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4
    https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4
    mostlycloudy:
    https://cdn.flixel.com/flixel/e95h5cqyvhnrk4ytqt4q.hd.mp4
    https://cdn.flixel.com/flixel/l2bjw34wnusyf5q2qq3p.hd.mp4
    https://cdn.flixel.com/flixel/rrgta099ulami3zb9fd2.hd.mp4
    clear-night:
    https://cdn.flixel.com/flixel/x9dr8caygivq5secll7i.hd.mp4
    https://cdn.flixel.com/flixel/v26zyfd6yf0r33s46vpe.hd.mp4
    https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4
    https://cdn.flixel.com/flixel/rosz2gi676xhkiw1ut6i.hd.mp4
    fog:
    https://cdn.flixel.com/flixel/vwqzlk4turo2449be9uf.hd.mp4
    https://cdn.flixel.com/flixel/5363uhabodwwrzgnq6vx.hd.mp4
    rainy:
    https://cdn.flixel.com/flixel/qti3s5st0srowd9krhcw.hd.mp4
    https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4
    pouring:
    https://cdn.flixel.com/flixel/qti3s5st0srowd9krhcw.hd.mp4
    https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4
    lightning-rainy:
    https://cdn.flixel.com/flixel/sbk5sc03j7vay52r3e4o.hd.mp4
    https://cdn.flixel.com/flixel/chrgj6raf5q3s6y2so7z.hd.mp4
    views:
    – theme: Backend-selected
    title: Home
    path: test-home
    animated_background: weather
    panel: true
    type: panel
    badges: []
    cards: []
    title: Test

    Grüße Enrico

    1. Maxx

      Hallo Enrico,
      seit dem Update von HA auf Version 2023.4x funktioniert der ursprüngliche animierte Hintergrund nicht mehr.
      Es gibt aber „reparierte“ Repositories welche anstatt dem ursprünglichen installiert werden künnen.
      Dazu zuerst in HACS/Frontend den „animated Background“ entfernen, HA neu starten und dann wie im Beitrag beschrieben ein benutzerdefiniertes Repository installieren.
      Somit sollte es wieder funktionieren.
      Viel Erfolg und Grüße, Maxx

  14. Stefan

    Hallo,
    also ich muss dir mein Lob und Anerkennung aussprechen selten so etwas benutzerfreundliches gesehen.
    Da kann sich so selbst ernannter HA Spezialist eine Scheibe abschneiden von dir.
    Ich habe auch ein Anliegen. Bin gerade dabei mit jumomind einen Müllkalender zu machen und visualisieren ich suche immer noch eine Karte wo ich den Text den mir die Entität heraus gibt(Müll in 3 Tagen) mit einem eigenen Mülltonnen PNG Datei zu kombinieren.
    Bin um jeden Rat dankbar. Momentan habe ich Horizontaler Stapel und 4 mal die custom button card und darunter nochmal Horizontaler Stapel und 4 mal die Button Kart ohne Symbol.

  15. Enrico21

    Hallo Maxx,
    danke für deine tolle Seite und deine Erklärungen!
    Ich versuche mich an die von dir vorgeschlagenen Themes, beim Versuch diese in HACS/Frontend herunterzuladen, wird der nicht mehr fertig mit dem Download, der lädt und lädt und lädt und passiert nix. Wenn ich abbreche, wird zwar im File Editor der Ordner „Themes“ angelegt aber ich kann die Caule Theme beim erstellen vom Dashboard nicht auswählen bzw. beim Ios Theme sind zwar Themen vorhanden aber die Farben stimmen nicht.
    Auch beschert mir der Eintrag in die configuration.yaml beim Prüfen der Konfiguration in Entwicklerwerkzeuge eine Fehlermeldung, sodass ich diese nicht neu starten kann, entferne ich den Eintrag, funktioniert auch er Neustart wieder.
    Hast du eine Idee was ich falsch mache?
    Vielen Dank und liege Grüße
    Enrico (nicht der der weiter oben steht)

    1. Enrico21

      Hallo Maxx,
      das mit der Fehlermeldung habe ich beheben können, ich hatte nicht diesen Satz „# Eintrag in configuration.yaml“ eingefügt.

      Grüße Enrico

  16. HOME-Assistent

    Leider funktioniert deine Anleitung zum Teil 2. Nicht! Es kommt die Fehlermeldung: YAML kann nicht geparsed werden duplicated mapping Key

    1. Maxx

      Hallo!
      Ich würde dich bitten mich per Mail zu kontaktieren.
      youtube@smarthomebastler.at
      Auf diesem Weg können wir gemeinsam dein Problem behandeln.

      Grüße, Maxx

  17. Enrico

    Hallo Maxx,

    vielen Dank für die Mühe so eine Seite hier zu erstellen.
    Ich bin zwar nicht ganz untalentiert, hab dann aber auch immer meine liebe Mühe und Not mir autodidaktisch die Dinge beizubringen.
    Von daher kann man gar nicht genug Beispiele haben, an denen man sich entlanghangeln kann.
    Was ich im Moment suche: eine größere Card (wahrscheinlich custom button), die unter einer Überschrift verschiedene Schaltflächen und/oder Sensoren hat.
    Ich mag halt die verschiedenen, thematischen Bereiche des Dashboards gern abgrenzen.
    Kannst du mir da helfen, vllt. den Weg irgendwo hin weisen, wo ich fündig werde?
    Gruß
    Enrico

  18. Marco

    Hallo SmarthomeBastler,
    Ich bin noch sehr frisch in dem ganzen und habe mir erst nur testweise die virtuelle Box für Windows heruntergeladen bevor ich an Eingemachte gehe und mir einen PI zulege.
    Ich muss sagen ich kenne keine Videos die so super erklärt werden 👍
    Dennoch habe ich ein Problem ,bei mir lädt der Animierte Hintergrund einfach nicht herunter . Alles andere wie den Kiosk Browser usw funktioniert.
    An was könnte das liegen?
    Lg Marco aus den Bayrischen Wald

    1. Maxx

      Hallo Marco!
      Ich würde dich bitten mich per Mail zu kontaktieren.
      youtube@smarthomebastler.at
      Auf diesem Weg können wir gemeinsam dein Problem behandeln.

      Grüße, Maxx

  19. Matze

    Hallo SmartHomeBastler,

    bin ein Fan von Deinen Videos und diese haben mir echt schon sehr viel geholfen. Daher an dieser Stelle schon einmal ein großes Dankeschön.
    Evtl. kannst Du mir auch bei meinem aktuellen Problem helfen. Wir haben seit ca. 5 Monaten eine Photovoltaikanlage welche ich auch in HomeAssistant integriert habe. Jetzt geht es mir darum meinen Stromverbrauch besser zu analysieren bzw. auch grafisch darzustellen. Einzeln bekomme ich das natürlich wunderbar hin. Allerdings würde ich es auch gerne in einer grafischen Darstellung (gestapelt) sehen.
    Also ganz oben mein Hausverbrauch und darunter die einzelnen Verbraucher welche ich messe. Natürlich z.B. im 5min Intervall dargestellt. Hierzu habe ich zumindest keine Hacs Frontend Integration gefunden mit der ich so was darstellen kann. Aktuell exportiere ich mir die Daten aus meiner PostgressDB und stelle diese dann in Excel dar 🙁
    Aber irgendwie geht das doch sicher sinnvoller direkt in HA, oder?

  20. Lutz Sailler

    Hallo,
    bin auf deine Seite gestoßen, die mir sehr gut gefällt, dafür vielen Dank erstmal
    Zu deinem Dashboard habe ich eine Frage:
    die Icons mit zwei Symbolen (zb. Garagentor und Licht) wo bekommt man diese her
    Würde mich freuen wenn Du mir einen Tipp geben würdest.
    Ich freue mich schon auf deine nächsten Videos.
    Vielen Dank und viele Grüße
    Lutz

    PS die animierten GIF Buttons lassen sich, zumindest mal bei mir nicht runterladen

    1. Maxx

      Hallo Lutz!
      Danke für deinen Kommentar und deine Fragen.
      Die Icons für die Garage sind zum Download bei den allgemeinen quadratischen Buttons.
      Wie man sich diese selber erstellt, behandle ich in einenm kurzen Video das ich gerade schneide. Es sollte, wenn ich es schaffe, heute online gehen.

      Bei den GIF Buttons war die Datenmenge aufgrund der Photoshop Dateien zu groß. Das habe ich korrigiert und sie sind jetzt wieder zum Download verfügbar.

      Ich freue mich wenn dir meine Videos und die Webseite bei deinen Projekten helfen können und ich bemühe mich alle Erfahrungen welche ich in den letzten Jahren sammeln konnte zu teilen.

      Liebe Grüße

      Maxx

    2. bozo

      Super gemacht, habe es erst jetzt gesehen und denke darueber nach alles noch mal zu machen:)

Kommentare sind geschlossen.