[Article] Un beau dashboard, tout simplement - Interface / Lovelace / Thème / Custom Card - Home Assistant Communauté Francophone [Article] Un beau dashboard, tout simplement Home Assistant - Tutoriels & Partages Interface / Lovelace / Thème / Custom Card interface-dashboard, tableau-de-bord-dashboard, hacf-blog, interface-lovelace, articles BBE Novembre 15, 2024, 12:01 1 Bonjour à tous les passionnés de Home Assistant ! J’ai le plaisir de partager avec vous un nouvel article pour la communauté sur l'élaboration de votre tableau de bord. Dans cet article je vous accompagne pas à pas dans l'élaboration d'un dashboard simple et coloré, tout à fait simplement et sans avoir besoin d'utiliser le YAML... Pas uniquement destiné aux débutants, cet article sera aussi utile pour ceux qui voudraient découvrir les capacités offertes par les nouveaux dashboards automatiques, les sections, les cartes en-tête et les cartes tuiles... N'hésitez pas à faire part de vos commentaires, à poser des questions, à partager vos astuces, et à partager vos réalisations dans ce fil de discussion! En bonus : Quelques raccourcis vers des astuces intéressantes évoquées dans le fil de discussion ci dessous: Tester les exemples de mise en page avec tuiles et entête de l'article, directement dans le dashboard de démo de home assistant par @BBE : [Article] Un beau dashboard, tout simplement - #5 par BBE insérer un espace vide dans une section pour faciliter la mise en page par @jerome6994 : [Article] Un beau dashboard, tout simplement - #12 par jerome6994 Utiliser des sensor modèles (template) pour créer des pop ups personnalisés sans utiliser d'artifices par @herveaurel là: [Article] Un beau dashboard, tout simplement - #23 par herveaurel et la suite là: [Article] Un beau dashboard, tout simplement - #45 par herveaurel Utiliser une entité "vide" dans les cartes en-tête pour éviter de coller les icones en bord de carte (dans un stack-in) par @herveaurel là: [Article] Un beau dashboard, tout simplement - #55 par herveaurel Testez vos dashboard pour n'importe quel mobile ou tablette directement sur PC par @BBE là: [Article] Un beau dashboard, tout simplement - #59 par BBE Customiser les icones de ses cartes tuiles avec les device-class par @BBE: [Article] Un beau dashboard, tout simplement - #67 par BBE Utilisation de la carte tuile météo par @Marleo avec lui aussi des sensor modèles (templates) pour afficher les previsions avec la tuile météo et pas seulement la météo en cours: [Article] Un beau dashboard, tout simplement - #72 par Marleo Créer des cartes "dépliantes" par @Marleo avec un input-booléen, une carte entête et la gestion de la visibilité des cartes [Article] Un beau dashboard, tout simplement - #91 par Marleo Suivi d'un autre exemple par @BBE sur un dashboard "interactif" avec le même procédé: [Article] Un beau dashboard, tout simplement - #96 par BBE Toutes les possibilités d'une carte markdown par @WarC0zes ici: [Article] Un beau dashboard, tout simplement - #117 par WarC0zes Pour ceux qui veulent des tuiles aux coins carrés, c'est possible par @BBE ici: [Article] Un beau dashboard, tout simplement - #125 par BBE Pour ceux qui veulent partir d'un dashboard automatique et le modifier plutôt que de partir de zero, c'est moins facile qu'avant, mais toujours possible par @BBE ici: [Article] Un beau dashboard, tout simplement - #155 par BBE Petite nouveauté de la 2026.3, les pieds de pages, par @BBE ici: [Article] Un beau dashboard, tout simplement - #156 par BBE Dernière mise à jour suite aux nouveautés de la version 2026.7 [Actu] 2025.3 : Admirez ces en-têtes! Adaptation disposition entre PC, Téléphone et tablette [Article] Automatisation #1 : débuter en douceur! Déplacer carte de dashboard ESPectre 👻 Recherche graphiste dashboard Changer l' icône d une carte de type "home-summary" Disposition des blocs dans une carte Image de fond fixe propre à un dashboard [ConcoursDash] Une room card entièrement configurable (+ tutos pour tous sans YAML) Des volets électriques dans une entité Climate? Recherche graphiste dashboard Tochy Novembre 15, 2024, 12:49 3 Superbe boulot. Je n’ose pas imaginer le temps que tu y a passé. BBE Novembre 15, 2024, 12:53 4 Pas tant que ça… Après il y a déjà des trucs périmés… Les devs font tellement d’évolutions que désormais le dashboard par défaut est en train de migrer doucement vers des sections et des cartes tuiles… Mais c’est tant mieux! Je pense que d’ici une ou deux versions la première partie sera obsolète… [edit] l’article étant mis à jour dans la mesure du possible… aucune partie n’est donc si obsolète… BBE Novembre 15, 2024, 2:25 5 Au passage, pour ceux qui voudraient expérimenter ces différentes sections présentées dans l’article, pour jouer avec les mises en pages des cartes tuiles et en-tête et voir comment c’est fait: image419×971 30.7 KB Voici ci dessous le code complet d'une vue équivalente: Je vous l’ai refaite en mode « cuisine », et avec les entités du dashboard de démo pour que tout le monde puisse jouer même sans avoir les bonnes entités… Donc: Soit à copier coller chez vous dans une vue comme expliqué dans l’article, et à modifier avec vos entités: light, motion detector et cover. Soit ouvrir le dashboard de démo : https://demo.home-assistant.io/ et passer ce dashboard en mode edition puis copier coller le code de la vue dans une nouvelle vue pour jouer avec la cuisine du dashboard par défaut. (voir le GIF sous le code pour ceux qui n’ont pas suivi l’article ) image672×810 32 KB title: "Exemples de mise en page:" path: exemples-de-mise-en-page cards: [] type: sections sections: - type: grid cards: - type: heading heading: Utra compact heading_style: title - type: heading heading: Cuisine heading_style: title icon: mdi:countertop tap_action: action: navigate navigation_path: /lovelace/kitchen badges: - type: entity show_state: false show_icon: true entity: binary_sensor.kitchen_motion color: accent tap_action: action: more-info visibility: - condition: state entity: binary_sensor.kitchen_motion state: "on" - type: entity show_state: true show_icon: true color: state tap_action: action: toggle entity: light.kitchen_spotlights - type: entity show_state: true show_icon: true color: state tap_action: action: toggle entity: cover.kitchen_shutter - type: grid cards: - type: heading heading: Très compact heading_style: title - type: heading heading: Cuisine heading_style: title icon: mdi:countertop tap_action: action: navigate navigation_path: /lovelace/kitchen badges: - type: entity show_state: false show_icon: true entity: binary_sensor.kitchen_motion color: accent tap_action: action: more-info visibility: - condition: state entity: binary_sensor.kitchen_motion state: "on" - type: heading heading: Lumières heading_style: subtitle badges: - type: entity show_state: true show_icon: true color: accent entity: light.kitchen_spotlights icon: mdi:lightbulb tap_action: action: toggle icon: mdi:ceiling-light-multiple tap_action: action: navigate navigation_path: /lovelace/light - type: heading heading: Volets heading_style: subtitle tap_action: action: navigate navigation_path: /lovelace/covers icon: mdi:window-shutter badges: - type: entity show_state: false show_icon: true entity: cover.kitchen_shutter icon: mdi:arrow-up-bold tap_action: action: perform-action perform_action: cover.open_cover target: {} data: entity_id: cover.kitchen_shutter - type: entity show_state: false show_icon: true icon: mdi:stop tap_action: action: perform-action perform_action: cover.stop_cover target: entity_id: cover.kitchen_shutter data: entity_id: cover.kitchen_shutter entity: cover.kitchen_shutter - type: entity show_state: false show_icon: true icon: mdi:arrow-down-bold tap_action: action: perform-action perform_action: cover.close_cover target: entity_id: cover.kitchen_shutter data: entity_id: cover.kitchen_shutter entity: cover.kitchen_shutter - type: grid cards: - type: heading heading: Moins compact heading_style: title - type: heading heading: Pièces à vivre heading_style: title icon: "" - type: heading heading: Cuisine heading_style: subtitle icon: "" tap_action: action: navigate navigation_path: /lovelace/kitchen badges: - type: entity show_state: true show_icon: true entity: binary_sensor.kitchen_motion color: accent tap_action: action: more-info visibility: - condition: state entity: binary_sensor.kitchen_motion state: "on" - type: tile entity: light.kitchen_spotlights name: Lumière layout_options: grid_columns: 2 grid_rows: 1 - type: tile name: Volets entity: cover.kitchen_shutter - type: grid cards: - type: heading heading: Plus détaillé heading_style: title - type: heading heading: Cuisine heading_style: title icon: mdi:countertop tap_action: action: navigate navigation_path: /lovelace/kitchen badges: - type: entity show_state: true show_icon: true entity: binary_sensor.kitchen_motion color: accent tap_action: action: more-info visibility: - condition: state entity: binary_sensor.kitchen_motion state: "on" - features: - type: light-brightness type: tile entity: light.kitchen_spotlights name: Lumière vertical: false grid_options: columns: 6 rows: 2 - features: - type: cover-open-close type: tile entity: cover.kitchen_shutter name: Volets grid_options: columns: 6 rows: 2 vertical: false - type: grid cards: - type: heading heading: Très détaillé heading_style: title - type: heading heading: Cuisine heading_style: title icon: mdi:countertop tap_action: action: navigate navigation_path: /lovelace/kitchen badges: - type: entity show_state: true show_icon: true entity: binary_sensor.kitchen_motion color: accent tap_action: action: more-info visibility: - condition: state entity: binary_sensor.kitchen_motion state: "on" - features: - type: light-brightness - type: light-color-temp type: tile entity: light.kitchen_spotlights name: Lumière layout_options: grid_columns: 4 grid_rows: 2 - features: - type: cover-open-close - type: cover-position type: tile entity: cover.kitchen_shutter name: Volets layout_options: grid_columns: 4 grid_rows: 2 Les liens de navigation vers les sous vues ne seront pas fonctionnels, mais ça vous donne une bonne idée de ce qui est faisable et de comment c’est fait… Ces « simples » cartes « standard »: en-tête et tuiles sont déjà tellement polyvalentes… On se demande parfois ce qu’on va faire sur HACS… llaumgui Novembre 18, 2024, 8:37 6 On est d’accord, les « > » dans les header ne sont que visuel ? Ca ne déplie pas ? Tochy Novembre 18, 2024, 12:01 7 Salut Si tu as lu l’article il est indiqué : On a créé un titre, on naviguera vers la sous-vue comme précédemment (c’est matérialisé par le chevron >), et on a ajouté un petit badge avec le détecteur de mouvement de la pièce. Donc non ce n’est pas dépliable, ça indique que c’est cliquable et renvoi vers une autre page. Si on ne met pas de lien sur le titre alors pas de chevron. BBE Novembre 18, 2024, 5:39 8 Rien à ajouter à @Tochy … Il a tout dit. Il n’y a pas de dépliable pour l’instant dans ces cartes. Spl4sh Novembre 19, 2024, 1:28 9 Bonjour à tous ! En plein test de ces nouvelles fonctionnalités (très jolie au passage, on va finir par supprimer mushroom à ce rythme lol), est-il possible de faire une colonne avec 2 tuiles de 2 en hauteur, et une autre colonne avec une tuile de 1 en hauteur, puis 3 en hauteur pour celle du dessous ? Je n’arrive pas à faire en sorte qu’elle se colle à la plus petite… Une image est surement plus parlante : Capture d’écran 2024-11-19 à 14.23.17514×516 24.6 KB Merci d’avance pour votre aide ! Cedric_BOITTE Novembre 19, 2024, 1:54 10 Je pense que tu dois utiliser les cartes pile horizontale et cocher le paramètre remplir le container BBE Novembre 19, 2024, 5:45 11 Avec des cartes tuiles, en jouant avec l’onglet mise en page des différentes cart…