Ankündigung

Einklappen
Keine Ankündigung bisher.

HACS Reminder (trash-card, atomic-calendar-revive)

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    HACS Reminder (trash-card, atomic-calendar-revive)

    Der Reminder besteht bei mir aus 3 Bereichen.

    HACS Reminder.png

    Links oben die Trash-Card für die Müll-Termine (aktuell nur mit Dummy-Daten befüllt).
    Rechts davon die atomic-calendar-revive Card für Geburtstage und darunter die gleiche Card für andere Termine.

    Teil 1: Müll-Erinnerung

    Es gibt verschiedene Lösungen, um an die Termine zu kommen.

    A.) Die Gemeinde bietet eine Website mit API, über die man die Termine abfragen kann.
    Oft gibt es dann auch eine passende Handy-App mit Anzeige der Termine.
    Nachteil: Wenn sich die API ändert, dann muss man auch die Abfrage entsprechend anpassen.

    B.) Die Gemeinde-Website bietet einen Kalender (iCal/WebCal im ICS-Format)
    Diesen Kalender kann man herunterladen oder auch online darauf zugreifen.

    C.) Meist sind die Termine ohnehin regelmäßig, dann kann man sie auch berechnen, ähnlich wie einen Serien-Termin im Kalender.
    Nachteil: Bei Feiertagen könnte es Ausnahmen geben.

    Es gibt eine Integration, die einem die meiste Arbeit für die Varianten A, B und C abnehmen kann.
    Im Fall von C bietet Waste Collection Schedule auch für Ausnahmen eine gute Lösung an.
    VT: sehr mächtige Integration mit umfangreichen Möglichkeiten
    NT: Konfiguration erfordert gewissen Aufwand

    Die Variante B ist in diesem Beispiel recht gut beschrieben.

    Auch Torben hat ein 30 min Video zu dieser Intergration erstellt.

    D.) Manche lesen die Daten auch mittels Scrape von einer Website, das wäre mir aber zu viel Bastelei.

    E.) Man kann auch einfach Serien-Termine im HA-Kalender eintragen.
    Für diese Variante gibt es ebenfalls Unterstützung in Form der Trash-Card.
    VT: sehr einfach einzurichten
    NT: Aussehen nicht frei konfigurierbar

    Auch für diese Variante gibt es eine Beschreibung in diesem Blog.

    Ich habe mich für die Variante E entschieden, und möchte diese hier kurz vorstellen. Der Vorteile dieser Variante ist aus meiner Sicht die Einfachheit.
    Ich komme in ein Alter wo mir Dinge von Jahr zu Jahr schwerer fallen, aber einen Serientermin in einem Kalender anzulegen werde ich hoffentlich auch mit 80 noch schaffen.

    Schritt 1 - Erstellung eines neuen Kalenders

    Man kann (und sollte auch) in der Standard Kalender Integration für bestimmte Themen eigene Kalender erstellen.
    Es gibt viele Klagen darüber, dass man die Farben der Kaleder nicht selbst vergeben kann, und sich mit jedem neuen Kalender die Farben der alphabetisch nachfolgenden verschieben. Ich habe daher einen Trick angewendet, der das verhindert. Meine Kalender sind durchnummeriert, da verschiebt sich also nix, wenn ich einen weiteren hinten dranhänge. Den Default-Kalender hab ich 01-Kalender genannt, danach kommen 02-Geburtstage, 03-Abholungen.

    Die Abhol-Termine lege ich als ganztägige Termine an, da mir das einfacher erscheint.

    Schritt 2 - Trash-Card am Dashboard erstellen

    Man kann die Karte komplett im UI definieren. Das ist schön, trotzdem erkläre ich es hier im YAML-Mode.

    HTML-Code:
    type: custom:trash-card
    entities:
      - calendar.03_abholungen
    Hier wird auf den Kalender mit all den Abhol-Terminen verwiesen. Wie diese lauten müssen, sehen wir weiter unten.

    HTML-Code:
    alignment_style: center
    card_style: chip
    color_mode: icon
    day_style: counter
    items_per_row: 1
    Das kann jeder nach eigenem Geschmack gestalten.

    HTML-Code:
    drop_todayevents_from: "08:00:00"
    Ab 8 Uhr werden die (Ganztages-) Termine wieder ausgeblendet, da ist der Müll dann schon abgeholt.

    HTML-Code:
    next_days: 28
    event_grouping: true
    Laut Doku sollte grouping=true der Default-Wert sein, ist es aber nicht. Ich möchte je Müll-Art immer nur einen (den nächsten) Termin sehen, das aber für 4 Wochen im Voraus für selten abgeholten Müll.

    HTML-Code:
    filter_events: false
    Falls ich mich beim Eintragen im Kalender irre, und den Termin falsch benennen, dann wird er bei filter=false trotzdem ausgewertet und angezeigt.

    HTML-Code:
    refresh_rate: 60
    Alle 60 min wird der Kalender ausgewertet, das sollte man beachten, wenn man neue Termine einträgt.

    HTML-Code:
    pattern:
      - type: organic
        pattern: Bio
        label: Bio
        icon: mdi:trash-can-outline
        color: green
    Es können bis zu 6 Typen ausgewertet werden, diese Namen sind zwar fix, man kann sie aber für alles verwenden was man möchte. Ich habe sie so verwendet:
    organic für Bio, paper für Papier, recycle für Kunststoff, custom für Metall, waste für Restmüll, others um auch irrtümlich falsch benannte Termine angezeigt zu bekommen.
    Wer mehr als 6 Müll-Arten hat, der muss sich was anderes einfallen lassen.

    pattern: Hier muss ein eindeutiger Teil des Termin-Namens stehen, ab besten der volle Name
    label: So wird der Termin in der Karte dann angezeigt. Man kann das auch weglassen, dann wird er so angezeigt, wie er eingetragen ist.
    icon und color sollten klar sein. Man kann auch ein Bild anzeigen lassen, der Code in der Card lautet dann:
    picture: /local/images/trash_green.png

    Das Bild kommt z.B. in den Ordner www/images/trash_green.png
    Irgend woher muss man einfach wissen, dass sich der Ordner /local/ immer auf den Ordner /www/ bezieht. Vermutlich muss man Linux kennen, um das zu verstehen.

    Am Ende war es dann doch einfacher als gedacht, aber es gibt halt viele Möglichkeiten, und ich hab auch etwas Zeit benötigt, um für mich die beste Lösung zu finden.
    Es gibt dann auch noch die Möglichkeit, sich Reminder schicken zu lassen, aber das hebe ich mir für später auf. Aktuell wird der Termin bei mir nur angezeigt.

    Wer noch mehr dazu lesen möchte, der findet in diesem Community Thread viele weitere Beispiele vor allem zu anderen Lösungen.

    Teil 2 + 3: atomic-calendar-revive

    Diese Card ist wesentlich einfacher. Bei mir wird sie 2x eingesetzt,
    mit entity: calendar.02_geburtstage
    und mit entity: calendar.01_kalender für alle weiteren Termine.

    Die meisten Parameter sind selbsterklärend, daher hier nur ein kurzer Auszug, den gesamten Code hab ich wie immer unten verlinkt.

    HTML-Code:
    maxEventCount: 4
    softLimit: 1
    Es wird die definierte Anzahl von Events angezeigt und darunter der Hinweis, wie viele weitere Events ausgeblendet sind. Wenn es aber nur mehr 1 weiteren Event im angegebenen Zeitraum gibt, dann wird dieser statt dem Hinweis anzeigt. Ich finde das echt gut designed.

    Der Rest ist noch eine Menge an card_mod um die Felder etwas anders anzuordnen als es dem Standard entspricht.


    Weitere Beiträge dieser Serie:

    HACS Wetterkarte
    HACS Sonne & Mond (inkl. Tipps zur configuration.yaml)
    HACS Schieberegler (inkl. Möglichkeiten der Icon Farbanpassung & erste Vorstellung Farbschema)​
    HACS Gauges (Tachoanzeigen, inkl. senkrechte Balken-Cards)​
    HACS stack-in-card für Raum-Card
    HACS Graph-Cards
    HACS Thermostat-Cards
    ​​HACS Entity Cards (inkl. stacking Beispiele mit der custom:button-card)

    HACS Person- & Öffi-Card (inkl. Geschichte zu ChatGPT)
    HA-Behaglichkeits-Diagramm
    HA Kurzeinführung​​
    HACS Sidebar & Dashboard-Entwurf
    HACS Bewässerung​
    HA & Node-Red
    HA Notifications​​​​
    HA Recorder, SQLite, InfluxDB, Grafana
    HA Python Scripts​​
    Angehängte Dateien
    Zuletzt geändert von scw2wi; 17.03.2025, 18:34.

    #2
    Nach vielen Tagen Arbeit ist nun der Reminder V2 fertig geworden.
    Die V1 war ja recht einfach zu bauen, hatte aber einige Nachteile.

    custom:trash-card: Der größte Nachteil aus meiner Sicht war, dass ich den aktuellen Termin nicht orange hervorheben konnte. Die Formatierung war auch nicht so toll und Möglichkeit zur Änderung konnte ich auch mit card_mod keine finden.

    custom:atomic-calendar-revive: Diese Card hab ich sowohl für die Geburtstage als auch die restlichen Termine verwendet. Hier war es recht mühsam, die Formatierung überhaupt so hinzubekommen, aber ich wollte einfach mehr. Im Nachhinein war's dann doch ganz schön aufwendig aber für einen Einsteiger wie mich auch unglaublich lehrreich. Vielleicht hab ich auch einige Dinge umständlicher gelöst als notwendig, denn immer, wenn ich Code mehrfach duplizieren muss, stellt sich mir die Frage, wie kann man das eleganter lösen.

    Hier nun die neue Card.

    HACS - Reminder2.png

    Die Termine sind von unten nach oben gewandert, und man kann nun auswählen, ob die nächsten 1, 3 oder 5 Einträge angezeigt werden sollen. ​Je nachdem werden darunter 4, 2 oder 0 Einträge für Abholungen und Geburtstage angezeigt, damit sich das gesamte Layout nicht verschiebt. Die Lösung dazu ist die auto-entities card in Verbindung mit der conditional-card.

    Bei eintägigen Terminen wird nur das Start-Datum angezeigt, bei mehrtägigen auch das Ende-Datum, und die Uhrzeit nur dann, wenn es eine gibt. Da ich keine Möglichkeit gefunden habe, in HA das Datum auf deutsch auszugeben, hab ich ein Makro für die Umwandlung geschrieben. Auch viele andere mehrfach verwendete Funktionen gliedere ich immer häufiger in Makros aus. Die Karten selbst sind mit der Decluttering-Card (in Kombination mit der custom:button-card) erstellt, damit nicht so viel Code zu duplizieren ist.

    Beim Müll wird der Hinweis auf Morgen orange markiert, aber erst ab 12 Uhr, und am Abholtag wird der Eintrag um 8 Uhr aus der Liste entfernt. Das war mit der anderen Card nicht alles möglich.

    Bei den Geburtstagen wird ein Bild angezeigt, wenn es eines gibt, sonst eine Torte. Es wird auch anhand des Geburtsjahres ausgerechnet, der wievielte Jahrestag es ist. Für all das war eine Menge Code notwendig, und ich hab mich bemüht, den gesamten Code zusammenzustellen und zu attachen. Trotzdem wird es nicht einfach werden, das nachzubauen. Wenn es sich jemand antun will, werde ich unterstützen, Anfängern rate ich aber zu einfacheren Übungen.
    Angehängte Dateien
    Zuletzt geändert von scw2wi; 12.01.2025, 19:02.

    Kommentar


      #3
      Sehr guter Reminder muss man sich merken.
      Infos dazu: https://knx-user-forum.de/forum/proj...80#post2009980


      image.png
      www.smart-mf.de | KNX-Klingel | GardenControl | OpenKNX-Wiki

      Kommentar


        #4
        Die muss ich mir definitiv genauer anschauen, vor allem für die Termine (nicht Müll).
        Die eingebaute Calendar-Card mit der Termin-Übersicht ist für ein Wallpanel zum einen zu klein und lässt sich nur schwer Sinnvoll stylen.
        Am liebsten wäre mir getrennt den nächsten Geburtstag (wenn mehrere am gleichen Tag natürlich alle) und die heutigen Termine anzuzeigen.
        Möglicherweise kriege ich das so ja hin.
        Bzgl. Müll gibt es bei uns nur Biomüll und Restmüll, die verwalte ich aktuell über zwei getrennte Entities und zeige sie im Dashboard nur an, wenn die entsprechende Tonne auch Voll ist.

        Kommentar


          #5
          Es gibt hier bereits die erste Optimierung, die ich von einem Templating-Profi gelernt habe, und dessen Wissen ich hier gerne an Interessierte weitergebe.

          Aktuell verwende ich die conditional-card 3-fach, um je nach input_number.kalender_pos_anzahl die entsprechende Anzahl von Positionen (1, 3 oder 5) anzuzeigen.

          Wesentlich eleganter hätte ich das mit dieser kurzen Code-Sequenz machen können, denn die conditional-card kann auch template conditions auswerten.

          HTML-Code:
          {{ ( states.sensor |
               selectattr('entity_id','search','sensor.kalender_termin[1-9]') |
               map(attribute='entity_id') | list
             )[:states('input_number.kalender_pos_anzahl') | int(0)] }}
          ​
          Der erste Teil des Codes generiert einfach eine Liste der Kalender-Termine 1 bis 9 (oder halt weniger, wenn es nicht so viele gibt).
          Der zweite Teil des Codes schränkt die Auswahl dann auf so viele Einträge ein, wie der input_number entsprechen, und da diese per default eine Nachkommastelle liefert, wird die mit int(0) gekappt.

          Ich hab auch experimentiert, ob ich nicht direkt auf das Array zugreifen kann, und gar keine Template-Sensoren erstellen muss, aber weiter als bis zu dieser Code-Sequenz, die zwar funktioniert, für die ich aber keine passende Card finden konnte, bin ich leider nicht gekommen.

          HTML-Code:
          {% set anzahl = states('input_number.kalender_pos_anzahl') | int %}
          {% for i in range(anzahl) %}
            {{ state_attr('sensor.kalender_termine', 'scheduled_events')[i].start }}
            {{ state_attr('sensor.kalender_termine', 'scheduled_events')[i].end }}
            {{ state_attr('sensor.kalender_termine', 'scheduled_events')[i].summary }}
          {% endfor %}
          ​
          Ich mach noch ein paar weitere Optimierungen, die dauern aber noch etwas.
          Zuletzt geändert von scw2wi; 13.01.2025, 16:45.

          Kommentar


            #6
            Ich hab jetzt endlich die Lösung, wie neue oder geänderte Termine sofort angezeigt werden.

            Das Problem kommt von den Unterschieden zwischen Automation-Trigger und Template Trigger

            VT: Automation-Trigger:
            • reagiert direkt auf Ereignisse
            VT: Template Trigger:
            • kann Attribute und Zustände speichern
            ​Der Trick besteht nun darin, dass der Automation-Trigger dem Template-Trigger mitteilt, wenn sich etwas geändert hat.

            Inhalt von automations.yaml
            HTML-Code:
            - id: my_event_trigger
              alias: generiert aus einem event_template_reloaded einen my_event_template_reloaded
              description: workaround, da template-trigger nicht direkt auf event_template_reloaded reagieren
              trigger:
                - trigger: event
                  event_type: event_template_reloaded
              condition: []
              action:
                - delay: "00:00:01"
                - event: my_event_template_reloaded
                  event_data: {}
              mode: single
            ​
            Änderung in templates.yaml
            HTML-Code:
            - trigger:
                - trigger: event
                  event_type: my_event_template_reloaded​
                  id: "reload"
            Das war's, es funktioniert !
            Die Trigger-ID kann man auch weglassen, ich verwende sie zum testen, um mir eine Nachricht zu senden und zu melden, warum der Trigger gezündet hat.
            Zuletzt geändert von scw2wi; 24.01.2025, 21:13.

            Kommentar

            Lädt...
            X