Système de notifications : Sensor "todo" + JSON et Card "autoentities" pour afficher les notifications + Popup "bubblecard"

Entraide Home Assistant
1

Bonjour,

Comme signalé sur d’autres posts, je suis en train de réaliser mon dashboard.
Suivant également un groupe facebook, quelqu’un a partagé son dashboard ainsi que l’entièreté de son code sur GitHub. Ne sachant pas si on peut citer des sources externes comme celles-ci, je n’en dirai pas plus mais si j’ai le feu vert, je mettrai bien entendu les liens.

Dans sa présentation, il explique avoir mi en place un système de notifications que j’aimerais reproduire, voici à quoi il ressemble :

image
image692×817 64.1 KB

On y voit deux choses : le badge qui stipule le nombre de notifications et le pop up qui expose les fameuses notifications avec possibilités de les supprimer.

Je souhaiterais le reproduire mais n’ai aucune connaissance en la matière. Est-ce que cela parle à quelqu’un et pourrait me l’expliquer de façon claire et précise pour un débutant ?

Il explique dans la présentation de son dashboard que son système de notifications maison est le suivant :

  • Sensor « todo » + JSON

  • Card « autoentities » pour afficher les notifications

  • Popup « bubblecard »

Il utilise un sensor de type « To-do list » afin de stocker ses notifications à afficher sur la tablette. Vu qu’il a des notifications « simples » (uniquement du texte) et des notifications « images » (pour les captures frigate), il stocke les infos dans un « json » dans chaque item de son sensor « to-do ».

Il utilise le titre de l’item pour le titre de la notification, dans description il met ses données JSON et dans « date d’échéance » il met la date de survenue de la notification.

Ensuite il utilise une carte « auto-entities » afin d’afficher les notifications sur son dashboard.
Il a ajouté l’icône « poubelle » pour supprimer l’item de sa « to-do » liste afin à l’aide du service « todo.remove_item ».

Est-ce que cela parle à quelqu’un ?

Sait-on jamais si tu es égajement sur ce forum Joffrey (personne qui a posté ce dashboard) fais signe :slight_smile:

Déjà merci pour l’aide :crossed_fingers:

2

Bonjour,
aucun problème pour mettre le lien GitHub.

3

Bonjour,

Voici le lien github si cela peut aider :

4

Ah ouai !
c’est le fichier complet du dashboard :sweat_smile:
Va falloir chercher le code dans les 2500 lignes.

le badge todo

       type: custom:mushroom-template-badge
        content: '{{states(''todo.notifications_tablette'')}}'
        icon: mdi:bell
        color: ''
        label: ''
        tap_action:
          action: navigate
          navigation_path: '#notifications-details'
        visibility:
          - condition: state
            entity: binary_sensor.has_notifications
            state: 'on'

le popup todo

            type: vertical-stack
            cards:
              - type: custom:bubble-card
                card_type: pop-up
                hash: '#notifications-details'
                name: Notifications
                icon: mdi:bell
              - type: custom:auto-entities
                card_param: cards
                card:
                  square: false
                  type: grid
                  columns: 1
                filter:
                  template: >-
                    {%- set tasks =
                    states.sensor.notifications_tablette.attributes.tasks |
                    sort(attribute='due', reverse=true) | list -%} {%- for item
                    in tasks -%}    {%- set data = item.description | from_json
                    -%} {%- set icon = data.icon -%}  {%- set triggered = "il y
                    a "+relative_time(as_datetime(item.due))  -%}
                      {%- if data.image -%}
                      {{
                        {
                          "type": "custom:stack-in-card",
                          "cards": [
                            {
                              "type": "custom:mushroom-template-card",
                              "primary": item.summary,
                              "secondary": triggered,
                              "icon": icon,
                              "tap_action": {
                                "action": "perform-action",
                                "perform_action": "todo.remove_item",
                                "target": {
                                  "entity_id": "todo.notifications_tablette"
                                },
                                "data": {
                                  "item": item.summary
                                }
                            },
                              "card_mod": {
                                "style": "ha-card::after {\n  content: url('https://api.iconify.design/mdi/trash.svg?color=grey&width=26');\n  position: absolute;\n  right: 20px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--primary-color);\n  font-size: 24px; cursor: pointer; pointer-events: none;}\n"
                              }
                            },
                            {
                              "type": "custom:layout-card",
                              "layout_type": "masonry",
                              "layout": {
                                "max_cols": 1,
                                "height": "auto",
                                "padding": "0px",
                                "card_margin": "var(--masonry-view-card-margin, 0px 8px 14px)"
                              },
                              "cards": [
                                {
                                  "type": "picture",
                                  "image": data.image
                                }
                              ]
                            }
                          ]
                        }
                      }},
                      {%- else -%}
                      {{
                        {
                          "type": "custom:mushroom-template-card",
                          "primary": item.summary,
                          "secondary": triggered,
                          "icon": icon,
                          "tap_action": {
                              "action": "perform-action",
                              "perform_action": "todo.remove_item",
                              "target": {
                                "entity_id": "todo.notifications_tablette"
                              },
                              "data": {
                                "item": item.summary
                              }
                            },
                          "card_mod": {
                            "style": "ha-card::after {\n  content: url('https://api.iconify.design/mdi/trash.svg?color=grey&width=26');\n  position: absolute;\n  right: 20px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--primary-color);\n  font-size: 24px;\n cursor: pointer; pointer-events: none;}\n"
                          }
                        }
                      }},
                      {%- endif -%} 
                    {%- endfor -%}
1 « J'aime »
5

Le badge j’avais réussi à le retrouver avec une recherche sur base de ce que je voyais sur la capture d’écran.

Merci pour le pop up !

Après il faut arriver à programmer/configurer le fameux fichier JSON et le sensor to-do et to-do_remove_item et à mon avis c’est la que ça se complique car aucune info

6

Personne n’a une explication ou tuto deja présent sur internet pour ce genre de système de notifications ? Perso j’ai beau chercher sur internet en français ou anglais mais je ne trouve rien.

Mais bon ne sachant pas programmer je ne cherche peut être pas bien :confused: