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.
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
- iOS Themes – Dark Mode and Light Mode – LINK ZUM REPOSITORY
- 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
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 ?
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??
Hi Maxx, ja bei mir das gleiche,es läuft immer nur das Default. warum denn? Gruss Axl
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
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ß
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
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?
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
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.
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
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
Hallo,
vielen Dank, dass du so gute Buttons zur Verfügung stellt. Allerding mache ich etwas falsch, weil mir der Download nicht gelingt.
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
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
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
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
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
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.
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)
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
Leider funktioniert deine Anleitung zum Teil 2. Nicht! Es kommt die Fehlermeldung: YAML kann nicht geparsed werden duplicated mapping Key
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
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
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
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
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?
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
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
Super gemacht, habe es erst jetzt gesehen und denke darueber nach alles noch mal zu machen:)
Kommentare sind geschlossen.