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.

Please accept statistik, Marketing cookies to watch this video.

---

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.