[Mon Dashboard] @Guizmos_Mushroom

[Guizmos]

Bonjour à tous.

Je voulais vous partager mon nouveau Dashboard.
Il est essentiellement basé sur du Mushroom (que j’apprécie beaucoup et qui évolue très bien)
Je voulais avant toute chose qu’il soit épuré visuellement.
Il intègre pas mal de petites choses sympa.
J’ai créé un dépôt GitHub pour les curieux

---

---

Menu principal

Je détail ici les principales cartes et leurs fonctions

• Carte Alarme : Popup pour activer/désactiver l’alarme

  Image

  

• Carte Caméra: tap_action qui mène à toutes les caméras. Si une détection est présente, l’image de la caméra remplace la carte et l’icône caméra du menu en haut passe au rouge avec une animation.

  Image

  

• Carte Feed: popup avec les derniers feed lumières, portes et fenêtres

  Image

  

• Carte Portes: popup auto-entities qui filtre uniquement les portes ouvertes. L’icône passe au rouge avec une animation. Le status affiche le nombre de portes ouvertes

  Image

  

• Carte Fenêtres: même principe que la carte précedente

  Image

  

• Carte plan: popup avec le plan de ma maison

  Image

  

• Carte Météo: affiche une carte tabbed-card avec 3 onglets (prévision météo, carte du vent, pollens)

  Images

  

  
  

  

  
  

  

• Carte température: popup qui affiche les température de la maison. L’icône change de couleur en fonction de la température

• Carte humidité: même principe que la carte précédente

---

---

La barre de navigation - Top bar

Le gros du travail se trouve dans la barre de menu en haut.

• Plusieurs pages disponible
• Couleur de fond dynamique en fonction du media en cours de lecture (si aucun media, le fond est opaque)
• Icônes animées
• Couleur des icônes dynamique en fonction des états
• Effets de bordure (shadow) lorsque la souris passe sur une icône
• Si aucun média en cours de lecture, le bouton recherche (Search) est présent sur toute la largeur
• Si un média est en cours de lecture alors le bouton recherche (Search) se reduit et laisse place à une carte ‹ média ›

---

---

Bouton Search

• Présent dans la barre de menu en haut, un tap_action ouvre un popup ChatGPT

Intégration ChatGPT

---

---

Barre du bas - Bottom-bar
En cours de développement.
Possibilité d’afficher une barre de menu en bas.
Elle se positionne en bas du Dashboard et reste fixe

J’ai repris le principe de la barre du haut en adaptant pour qu’elle reste fixe en bas et en modifiant légèrement le design.

---

---

Barre de notification

Cette barre me permet d’afficher:

• Ouverture de la boite au lettre (tap_action fait disparaitre la carte)
• Évènements dans le calendrier
• Mes ordinateurs si ceux-ci sont allumés (tap_action me montre la page de tout mes devices)
• Les devices avec moins de 20% de batterie (tap_action pour voir quel devices)
• Les mises à jour HA + add-ons (tap_action pour voir quelle mise à jour)
• Les mises à jour HACS (tap_action pour voir quelle mise à jour)
• Les mises à jour Unifi (tap_action pour voir quelle mise à jour)

*

---

---

Lumières

• Affiche toutes les lumières et prises connectés de la maison
• Petite fonction supplémentaire pour la seule lumière RGB dont je dispose, la carte change de couleur en fonction de la lumière

• L’icône de la barre de menu en haut change de couleur + animation si une lumière est allumée et un badge affiche le nombre de lumière

Multimédia

• Si aucun média est en cours de lecture alors la carte principale affiche les poster des derniers films, séries ainsi que les prochaines sorties

• Si un média est en cours de lecture :
  L’icône de la barre de menu s’adapte en fonction du média (music, films ou séries) + animation
  La carte principale va changer pour afficher quel appareil joue le média

---

---

Appareils

Dans cette vue je regroupe une partie de mes appareils (PC, TV, téléphones…)

• PC: Permet d’allumer et d’éteindre mes ordinateurs à distance et d’afficher une image de l’écran

  Eteint

  

  Allumé

  

  tap_action

  

• TV - Shield: Permet d’allumer et d’éteindre ma TV ou ma Nvidia Shield à distance et d’afficher une image de l’écran

  Eteint

  

• Téléphones: Permet de visualiser l’état de mes téléphones (Réseau WIFI ou 4G, batterie, en charge ou non, localisation). Si une lecture est en cours, la carte switch pour afficher le poster et les infos de lecture

  Eteint

  

  En lecture

  

• Tablette: Même principe que pour les téléphones

• Machines réseau: Permet de visualiser l’état de mes machines résaux (NAS, UDM-Pro, imprimante…) La couleur de la carte change en fonction de l’état (rouge si hors ligne et vert si en ligne). Ce module est en cours de dev la partie tap_action/popup notamment

  Image

  

  imprimante tap_action

  

  serveur HA tap_action

  

  NAS tap_action

  

  UPS tap_action

  

---

---

Serveur

Monitoring de mon UDM-Pro (Ubiquiti) et autres options lié au réseau

• ADGuard: Permet d’activer/désactiver le serveur ADGuard en cas de problème

  Image

  

• Certificats: Possibilité de générer un nouveau certificat.

  Image

  

• Zigbee: Divers infos concernant mes périphériques Zigbee

  Image

  

  • Batterie: Liste de tous mes périphériques avec batterie, classés par % et icône dynamique

    Image

    

  • LQI: Liste de tous mes périphériques Zigbee avec leur niveau de signal LQI

    Image

    

  • RSSI: Liste de tous mes périphériques Zigbee avec leur niveau de signal RSSI

    Image

    

• Speedtest: Possibilité de lancer un speedtest + swipe-card ‹ Download › ‹ Upload › ‹ Ping › et une image du speedtest

  Image

  

• Redémarrage: Possibilité de redémarrer HA, host ou juste les intégrations

  Image

  

En complément, vous pouvez jeter un coup d’oeil à ce post sur les cartes media_player stylisé mushroom :

Mushroom - Media Player Card

Bonjour, Je voulais partager une card media_player que je trouve plutôt jolie. J’utilise le thème Mushroom. Pour la partie card lovelace : [mushroom - media] Verson large avec affichage du media en cours + image en fond

Code

type: custom:mushroom-template-card primary: Plex secondary: '{{ states(''sensor.plex_tv_playing'')}}' entity: media_player.plex_tv name: Plex layout: vertical secondary_info: none icon: mdi:multimedia card_mod: style: | ha-card { {% …

Lien GitHub:

GitHub - Guizmos123/Mushroom: Home Assistant DashBoard

[Marleo]

Salut
je vais te piquer des idées je suis parti sur le même esprit pour la nspanel
J’avais pas pensé à la swipe card pour le menu du haut, je te pique l’idée

[Guizmos]

Salut

C’est fait pour ça
C’est comme ça que je conçois mes Dashboard, en prenant des idées à gauche et à droite

[crampes2]

Bonjour,

C’est vraiment un travail magnifique @Guizmos, bravo
Peux-tu détailler un peu plus comment tu gères les pièces par exemple. Je vois dans ton menu principal l’icône de Température à 22.8°C mais c’est une carte te permettant d’aller sur toutes les températures de ta maison ou simplement d’une pièce ?

[Guizmos]

Merci pour ton message.
Alors personnellement je n’ai pas de gestion par pièces. Je range plutot par type (lumières, caméras, devices…)

Pour la carte températures, c’est un popup avec toutes mes sondes par pièce qui s’ouvre quand je clic dessus:

-

Un second clic m’ouvre un autre popup plus détaillé

Pareil pour l’humidité

-

PS: je vais peut-être retravailler ces popup en cartes histoire d’harmoniser

[le_varan]

Super boulot,

Très inspirant, cela me donne des idées !
Merci

[crampes2]

Très intéressant en effet comme approche.
Et comment tu fais pour ouvrir des fenêtre en popup ? En regardant le code, je vois une

tap_action:
action: fire-dom-event

Est-ce cela pour les popup ? j’ai cherché rapidement mais pas compris grand chose sur cette notion

[Guizmos]

Alors pour ouvrir un popup, il faut quelque chose comme ça :

    tap_action:
      action: fire-dom-event
      haptic: heavy
      browser_mod:
        service: browser_mod.popup
        data:
          style: |-
            --popup-background-color: transparant;
            --popup-border-radius: 15px;
            --popup-border-color: transparent;
            --popup-padding-x: 5px;
          size: normal
          content:
            type: la_carte_que_tu_veux_faire_apparaitre_en_popup

Tu n’es pas obligé de mettre les lignes de style

    tap_action:
      action: fire-dom-event
      haptic: heavy
      browser_mod:
        service: browser_mod.popup
        data:
          size: normal
          content:
            type: custom:vertical-stack-in-card

Il te faudra installer si ce n’est pas le cas l’intégration Browser_mod. Je te laisse regarder par toi-même la documentation.

GitHub - thomasloven/hass-browser_mod: 🔹 A Home Assistant integration to turn...

Pour naviguer et faire apparaitre les cartes que je veux, je passe par ce code :

    tap_action:
      action: fire-dom-event
      local_conditional_card:
        action: set
        ids:
          - home: hide
          - light: hide
          - portail: hide
          - camera: toggle
          - media: hide
          - divers: hide
          - monitoring: hide
          - device: hide
          - serveur: hide
          - net: hide
          - plan: hide

Donc en gros j’utilise l’intégration local-conditional-card et ensuite je défini quelle carte je cache (hide) et laquelle je fais apparaitre (toggle).

[crampes2]

Je vais regarder cela immédiatement, merci pour l’astuce

[crampes2]

Comment fais-tu pour flouter l’arrière plan lors de l’affichage de la popup ?

[Guizmos]

il te suffit d’ajouter ce code à ton thème :

    # POPUP
    dialog-backdrop-filter: blur(15px)
    iron-overlay-backdrop-opacity: 1
    iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)
    card-mod-more-info-yaml: |
      .: |
        ha-dialog {
          --vertical-align-dialog: center !important;
        }

[lyazide_yaz]

Bonjour Guizmos, super projet. Je vais essayer de basculer de HKI vers ce type d’interface. J’essais de paramétrer mais mes connaissances sont limitées. J’essais de faire fonctionner les popups pour les portes et fenetres mais rien ne s’affiche. J’ai édité le fichier source et déclaré la porte de la cuisine par exemple dans toutes les section mais la carte popup reste vide. Y’a t’il quelque chose d’autre de spécial à faire?

[Guizmos]

Pour la partie portes/fenêtre je passe par auto-entities et je filtre mon groupe de portes/fenêtres.
Donc au préalable j’ai créé des groupes:

####################################
########## GROUPE CAPTEUR ##########
####################################
group:
  fenetre:
    name: Capteur Fenêtre
    entities:
      - binary_sensor.fenetre_buanderie
      - binary_sensor.fenetre_cuisine
      - binary_sensor.fenetre_garage
      - binary_sensor.fenetre_chambre_louis
      - binary_sensor.fenetre_chambre_samuel
      - binary_sensor.fenetre_chambre_parentale
      - binary_sensor.fenetre_sdb

Exemple du groupe de fenêtre. A ajouter dans groups.yaml ou configuration.yaml si tes fichiers ne sont pas splittés

Et ensuite auto-entites qui vient filtrer tout ça :

          - type: custom:auto-entities
            card:
              type: entities
            filter:
              include:
                - group: group.fenetre
              exclude:
                - state: 'off'
                - state: unavailable
            sort:
              method: state

Donc il faudra que tu modifies le nom de ton groupe s’il est différent de group.fenetre

[lyazide_yaz]

@Guizmos

####################################
########## GROUPE CAPTEUR ##########
####################################
group:
  fenetre:
    name: Capteur Fenêtre
    entities:
      - binary_sensor.fenetre_buanderie
      - binary_sensor.fenetre_cuisine
      - binary_sensor.fenetre_garage
      - binary_sensor.fenetre_chambre_louis
      - binary_sensor.fenetre_chambre_samuel
      - binary_sensor.fenetre_chambre_parentale
      - binary_sensor.fenetre_sdb

Une image est toujours plus parlante :

Le groupe et auto-entity fonctionne mais je n’ai rien quand je clique sur « portes » par exemple : je pensais avoir le statu de chaque porte.

[Guizmos]

Alors avec ce code, tu as des exclusions. Les status ‹ off › et ‹ unavailable › seront non affichés.

Regarde en retirant les exclusions :

          - type: custom:auto-entities
            card:
              type: entities
            filter:
              include:
                - group: group.fenetre
            sort:
              method: state

ou tu peux aussi faire avec ce code:

                      - type: custom:auto-entities
                        card:
                          square: false
                          type: grid
                          columns: 1
                        card_param: cards
                        filter:
                          include:
                            - entity_id: group.fenetre
                              options:
                                type: custom:mushroom-entity-card
                          exclude:
                            - entity_id: group.fenetre
                              state: 'unavailable'
                        sort:
                          method: friendly_name
                          ignore_case: true

[Guizmos]

Et regarde un peu plus haut si jamais tu veux que ton popup soit centré et l’arrière plan flouté

[lyazide_yaz]

Même en supprimant les exclusion j’ai la même chose.

                            - type: custom:auto-entities
                              card:
                                type: entities
                              filter:
                                include:
                                  - group: group.fenetre
                              sort:
                                method: state

[Guizmos]

Si tu va dans les outils de développement et que tu regarde l’état de ton groupe, tu as quoi? Fais moi un screen

[lyazide_yaz]

Ci dessous la copie de l’état du groupe:

[Guizmos]

Regarde dans le menu à gauche « Outil de développement » puis « Etat »

tu devrais avoir quelque chose comme ça :