Um eine sprachgesteuerte Erinnerung als Pop-up am Home Assistant Dashboard anzuzeigen, sind ein paar Einstellungen sowie Integrationen und Geräte notwendig. In diesem Beitrag erfährst du, was du dafür benötigst und wie du Schritt für Schritt zu deiner eigenen Erinnerung am Dashboard kommst.
Dies benötigst du für deine Pop-up:
- Browser Mod installiert und aktiv (sieh hier)
- Home Assistant App am IPhone eingerichtet
- Custom Button Card in HACS installiert
- Card Mod in HACS installiert
Helfer anlegen
Zu Beginn habe ich drei Helfer angelegt. Einmal einen Text-Helfer dessen Text-Status mittels Sprachsteuerung geändert wird, einen Tasten-Helfer zum Öffnen der Pop-up Karte und einen Tasten-Helfer zum Schließen.
Pop-Up Karte erstellen
Nachdem die Helfer angelegt sind, ist es an der Zeit die Pop-up Karte einzurichten. Dazu bin ich auf das Dashboard meiner Wahl gegangen und habe eine neue Karte angelegt. Die benötigte Karte ist diese:
Die Grundeinstellungen sind nach den angelegten Helfern gerichtet. Wenn du also deine Helfer wie ich angelegt hast, sollte auch deine Erinnerung ohne Probleme funktionieren.
Um gleich im Vorfeld den Hintergund und den Rahmen der Karte auszublenden, füge unter CSS style folgenden Code (wie auf dem Bild zu sehen) ein.
# CSS style Einstellungen zum Ausblenden des Hintergrund und des Rahmens --popup-background-color: rgba(0,0,0,0); --popup-border-color: rgba(0,0,0,0);
Im nächsten Schritt habe ich auf Card gewechselt und dort mit „CANGE CARD TYPE“ eine Picture Elements Card eingefügt. Den Code für diese Karte mit dem „Gelesen“ Button kannst du dir hier kopieren. Auch das Postit-Bild ist hier zum Download bereitgestellt.
type: picture-elements image: /local/lovelace/icon/postit.png elements: - type: custom:button-card entity: input_text.popup show_name: false show_icon: false show_state: true style: top: 40% left: 50% width: 65% styles: state: - font-family: Ink Free - font-size: 1.6em - color: blue - text-overflow: unset - white-space: unset - word-break: break-word card: - background: transparent - type: custom:button-card name: Gelesen show_name: true show_icon: true show_state: false size: 10% entity: input_button.popup_gelesen style: top: 85% left: 50% width: 65% styles: name: - font-size: 1.5em - font-family: Arial Black - text-transform: uppercase card: - background: transparent - border: none tap_action: action: call-service service: input_button.press service_data: entity_id: input_button.popup_gelesen card_mod: style: | ha-card { background: transparent; border: none }
Kontrolliere ob der Bildpfad in dem dein Postit gespeichert ist, auch im Pfad der Programmierung korrekt eingetragen ist.
Pop-up Automatisierung
Um die Pop-up Karte zu öffnen müssen Automatisierungen angelegt werden. Dies kann entweder in den HA Automatisierungen oder NodeRed erfolgen. Ich zeige dir hier beide Varianten.
HA Automatisierungen
Als erstes die Automatisierung zum Öffnen des Erinnerungs-Fensters am jeweiligen Dashboard.
Um die Dienstdaten einzutragen, wechsle auf die Yaml-Ansicht bei den 3 Punkten.
Vergiss nicht, die browser_id auf deine zu ändern!
Die zweite Automatisierung ist jene zum Schließen des Pop-up und um die „Gelesen“ Meldung an das Smartphone zu senden. Auch hier ist es am Besten die Dienstdaten in der Yaml-Ansicht einzutragen.
Der Text (Message) und der Titel können natürlich frei gewählt werde.
NodeRed Automatisierungen
Für die NodeRed Automatisierung habe ich einen neuen Flow angelegt.
Zum Steuern der Erinnerung benötigst du zwei
und zwei Nodes.
Für die Benachrichtigung am Smartphone wird ebenfalls eine verwendet.
Die erste ist zur Statusüberwachung des Button-Helfers und gibt einen Zeitstempel aus wenn die Taste gedrückt wird.
Die vom Button angesteuerte Node öffnet das Pop-up am ausgewählten Dashboard.
Die Daten vom JSON-Editor kannst du dir hier kopieren
{ "browser_id": "<DEINE BROWSER ID>", "entity": "input_text.popup" }
Die zweite Node ist zur Überwachung des Gelesen-Buttons. Auch diese gibt einen Zeitstempel aus wenn die Taste gedrückt wird.
Die nächste Node ist zum Schließen des Fensters.
Die letzte Node, sendet eine Benachrichtigung an die ausgewählte Mobile-App.
Der Titel und die Massage können individuell gewählt werden.
Auch diese JSON-Daten kannst du dir hier kopieren:
{ "title": "POPUP NACHRICHT", "message": "Die Dashboardnachricht wurde gelesen", "data": { "subtitle": "Home Assistant" } }
iOS Kurzbefehl einrichten
Um den Shortcut einzurichten, habe ich die Kurzbefehle geöffnet und über das blaue + einen neuen Kurzbefehl erstellt.
Der erste Teil des Kurzbefehls betrifft den Erinnerungstext, welcher mittels diesem Befehl in den Text-Helfer geschrieben wird.
Der zweite Teil öffnet die Erinnerung am Daschboard in dem es den Popup Button betätigt.
Test Button
Um das Pop-up zu testen, habe ich am Dashboard einen Test-Button angelegt.
Einen einfachen Taster welcher mit einem input_button.press Befehl den Button-Helfer aktiviert.
Konfiguriert ist dieser Button als custom:button-card.
Hier kannst du dir den Code für diesen Button kopieren.
type: custom:button-card entity: input_button.popup name: PopUp Test icon: mdi:arrow-collapse-down tap_action: action: call-service service: input_button.press service_data: entity_id: input_button.popup
Wenn du fragen hast oder Unterstützung benötigst nimm einfach Kontakt mit mir auf:
https://linktr.ee/smarthomebastler
Die genaue Konfiguration sieh dir am besten im Video zum Beitrag an.
Dieser Artikel enthält Affiliate-Links zu Produkten auf Amazon.
Das bedeutet, wenn Sie über diese Links etwas kaufen, erhalten wir eine kleine Provision, ohne dass für Sie zusätzliche Kosten entstehen. Diese Provision hilft uns, diese Website zu betreiben und weiterhin nützliche Inhalte für Sie bereitzustellen. Wir empfehlen nur Produkte, von denen wir überzeugt sind und die einen Mehrwert bieten. Ihre Unterstützung durch den Kauf über diese Links ist für uns sehr wertvoll.
Vielen Dank!
Letzte Aktualisierung am 2024-12-12 / Affiliate Links / Bilder von der Amazon Product Advertising API
Diese Produktpräsentation wurde mit dem AAWP-Plugin erstellt.
Dieser Beitrag hat 3 Kommentare
Hall Max, gibt das auch für Android?
Danke für diese super Erklärung. Habe allerdings ein Problem bei meiner Umsetzung:
in deine Karte (picture-elements) möchte ich über ein Icon( state-icon) eine popup-card aufrufen.
Es funktioniert wenn ich die parametrierung im den Entwicklerwerkzeugen mache.
Auf dem Dasboard erscheint allerdings nur die moreinfo zum Icon?
Kannst Du helfen?
hier der Code in der Karte:
– type: state-icon
entity: input_boolean.kartewomo
icon: mdi:crosshairs-gps
style:
font-weight: bold
top: 5%
left: 50%
tap-action:
action: call-service
service: browser_mod.popup
data:
content:
type: map
entities:
– entity: device_tracker.elvis_van
hours_to_show: 48
dark_mode: false
Gruß
Jürgen
Hallo Jürgen, hast du das Popup auf dem Dashbord bei der „Picture-Elements-Card“ erstellt?
Vielleicht nimmst du persönlich mit mir Kontakt auf, dann kann ich dir besser helfen.
Mail Adresse: youtube@smarthomebastler.at
oder per Discord: https://discord.gg/Wt42rpwQye
Beste Grüße, Maxx
Kommentare sind geschlossen.