En bref — Un dashboard Home Assistant taillé pour l’iPhone : 5 badges compacts, une seule section avec 20 indicateurs conditionnels, et 6 popups modaux pour tout contrôler en une main. Le tout construit en une soirée avec Bubble Card, des séparateurs-lanceurs et beaucoup de YAML.
Le problème : un dashboard pensé pour tout sauf pour l’iPhone
Mon dashboard principal Home Assistant tourne sur une tablette murale au salon. Grand écran, sections larges, grilles de cartes en colonnes : ça fonctionne très bien. Mais quand j’ouvre la même interface sur mon iPhone, c’est une autre histoire. Les cartes débordent, il faut scroller pendant trois écrans pour atteindre les volets, et la moitié des informations affichées ne servent à rien quand tu es debout dans le couloir.
J’ai longtemps repoussé le problème en me disant que l’app Compagnon suffisait. Et puis un soir, j’ai décidé de m’y coller sérieusement. Objectif : un dashboard dédié, mobile-first, où tout est accessible en une main et en un tap.
Ce soir-là, j’ai tout construit d’une traite. Et voilà ce que j’en ai tiré.
L’approche : header + 1 section + popups
Sur mobile, chaque pixel compte. J’ai posé trois principes avant d’écrire la moindre ligne de YAML :
Glanceabilité. En ouvrant l’app, je veux voir l’essentiel sans scroller : météo, conso électrique, production solaire. Pas besoin de cards tiles qui prennent chacune une demi-ligne. La solution : des badges natifs en haut de la vue. Cinq pastilles compactes, toujours visibles : la météo (Éclaircies), la température extérieure (20,9 °C), la puissance Linky instantanée (820 VA), la conso du jour (6,94 kWh), et la production PV. Avant, j’avais une section « Monitoring » avec 8 tiles qui bouffaient 30% de l’écran d’ouverture. En passant aux badges, j’ai récupéré tout cet espace pour ce qui compte vraiment.
Une seule section visible. Pas de navigation entre vues, pas d’onglets. Une vue unique type: sections avec max_columns: 1. La section « Maison » affiche en header les températures intérieure et extérieure plus la météo via des sub_buttons sur le séparateur. Juste en dessous, le statut de la serrure Nuki et du garage côte à côte avec les boutons ouvrir/fermer. Puis un séparateur « En cours » regroupe les indicateurs conditionnels, suivi du slider luminosité « Pièces de vie » et des 6 séparateurs-lanceurs vers les popups.
Des popups pour le reste. Tout ce qui relève du contrôle détaillé (volets, chauffage, lumières, alarme, Hue Sync, Sonos) est accessible via des popups modaux Bubble Card. Six séparateurs alignés en bas de la section, chacun avec un ou deux sub_buttons d’état (Allumé, Désactivé, icone soleil…) et un engrenage ⚙️ qui ouvre le popup dédié. Un tap sur l’engrenage pour ouvrir, un swipe vers le bas pour fermer.
Les 20 indicateurs conditionnels : le dashboard qui se tait
C’est probablement la partie que je préfère. Sous le séparateur « En cours », j’ai 20 cartes qui ne s’affichent que si elles ont quelque chose à dire. Quand tout va bien, la zone est vide. Quand quelque chose mérite ton attention, l’indicateur apparait avec un fond coloré qui attire l’oeil : jaune pour l’automatisation Soleil active, rouge/rose pour une alerte serrure, orange pour les lumières allumées.
Quelques exemples : l’automatisation Soleil est active (fond beige avec icone soleil), la serrure est bloquée alors qu’elle ne devrait pas (fond rose, alerte visuelle immédiate), les pièces de vie sont allumées avec leur slider de luminosité intégré. D’autres indicateurs apparaissent selon le contexte : machine à laver en cours, poubelles à sortir demain, volet resté ouvert sous la pluie.
Le principe est simple : chaque carte est enveloppée dans un conditional ou utilise la propriété visibility de Bubble Card. Pas de code complexe, juste des conditions sur l’état des entités. Mais l’effet est radical. Au lieu d’un mur de cartes dont 80% sont dans un état « normal » sans intérêt, tu ne vois que ce qui compte. C’est la philosophie « notification passive » : le dashboard te parle uniquement quand il a quelque chose à dire.
Les séparateurs-lanceurs : ouvrir un popup d’un tap
Bubble Card propose un type separator avec des sub_button. Mon pattern : un séparateur avec le nom du domaine (Volets, Chauffage, Lumières…), des sub_buttons qui affichent l’état résumé (icone soleil actif sur Volets, badge « Allumé » sur Lumières, « Désactivé » sur Hue Sync et Alarme), et un dernier sub_button engrenage ⚙️ qui ouvre le popup.
type: custom:bubble-card
card_type: separator
name: Lumières
icon: mdi:lightbulb-group
sub_button:
- entity: light.piece_de_vie
show_state: true
- entity: light.piece_de_vie
icon: mdi:power
tap_action:
action: toggle
- icon: mdi:cog
tap_action:
action: navigate
navigation_path: "#lumieres"Le popup correspondant est déclaré plus bas dans la même vue, avec card_type: pop-up et le hash #lumieres. Tu tapes sur l’engrenage, le popup s’ouvre par-dessus la vue. Un swipe vers le bas et il se referme. C’est fluide et natif. Et les sub_buttons d’état (toggle power, badge Allumé) restent accessibles directement depuis la section principale sans ouvrir le popup.
La saga du bouton cliquable pleine largeur
Si tu utilises Bubble Card, tu as probablement déjà pesté sur les boutons. Moi, c’était le premier soir et j’ai quand même réussi à y passer un bon moment.
Le besoin : un bouton qui couvre toute la largeur de la carte et qui réagit au tap n’importe où sur sa surface. Pas juste l’icone. Toute la carte.
Premier essai : button_type: name. Résultat : seule l’icone est cliquable. Le reste de la carte est décoratif.
Deuxième essai : chercher button_type: icon dans la doc. Ça n’existe tout simplement pas dans Bubble Card, même si ça semble logique.
La solution qui marche :
type: custom:bubble-card
card_type: button
button_type: switch
entity: script.volets_ouvrir_salon_cuisine
card_layout: large
show_name: false
show_state: false
styles: |
.bubble-switch{display:none!important}La clé : button_type: switch avec un entity et card_layout: large. Ça rend toute la surface cliquable. Le toggle switch qui apparait, tu le masques avec une ligne de CSS. C’est contre-intuitif, mais ça fonctionne. Bienvenue dans Bubble Card.
Si ton bouton déclenche un script (pas un switch), pense à utiliser tap_action: toggle plutôt que l’action par défaut. Un script s’exécute au toggle, pas au tap classique. Et pour les volets, utilise toujours les entités _low_speed si ton installation Somfy le permet : c’est plus silencieux et ça préserve les moteurs.
Les popups en détail
Volets
Le popup #volets est le plus dense. En haut, les scripts rapides : Tout ouvrir, Tout fermer, Welcome (ouvre salon + cuisine), Départ (ferme les baies, laisse les panoramiques). En dessous, les positions soleil conditionnelles (les mêmes automatisations soleil que sur le dashboard principal) : SUD 50% ne s’affiche que si le soleil est au-dessus de 15° d’élévation après 11h, OUEST 70% après 13h, OUEST 30% après 17h. Puis les 3 groupes (Salon Sud, Salon Ouest, Chambres+SDB) et enfin les 12 volets individuels.
Le tout en boutons pleine largeur avec le pattern switch + display:none sur le toggle.
Chauffage
Modes jour en haut (Semaine, Télétravail, Weekend), un bouton Pause, cinq thermostats avec sliders, et un « Éteindre tout » pour les départs. En bas, trois history-graph sur 24h pour Salon, Chambre et Chambre Simon. Sur iPhone, les graphs sont compacts mais lisibles, et ils donnent immédiatement une idée de la tendance.
Lumières
C’est ici que j’ai réutilisé le pattern des accordéons Hue que j’avais déjà sur mon dashboard bureau. Le principe : un input_boolean.accordeon_ par pièce, un chevron qui toggle le boolean, et un bloc conditional qui affiche les scènes quand l’accordéon est ouvert.
type: conditional
conditions:
- entity: input_boolean.accordeon_piece_de_vie
state: "on"
card:
type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
entity: scene.pdv_detente
name: Détente
- type: custom:bubble-card
card_type: button
entity: scene.pdv_chaleureux
name: Chaleureux
- type: custom:bubble-card
card_type: button
entity: scene.pdv_lumineux
name: LumineuxQuatre accordéons (Pièce de vie, Salon, Chambre, Bureau), scènes en lignes de 3, le tout reste compact. Quand tout est fermé, le popup Lumières tient en un écran. Quand tu ouvres un accordéon, les scènes se déplient. 54 scènes Hue accessibles sans scroller dans un tunnel infini.
Hue Sync
Première version : Hue Sync était dans le popup Lumières. Mauvaise idée. Conceptuellement, la Hue Sync Box c’est du contenu TV (entrées HDMI, synchronisation vidéo), pas de l’éclairage. Et en pratique, ça ajoutait trop de scroll dans un popup déjà chargé.
Popup dédié #huesync : alimentation et synchro de la box, sélection du mode (vidéo, jeu, musique), intensité, luminosité en slider, les 4 entrées HDMI, la télécommande Apple TV via Firemote, et les prises Salon (contacteur général + meuble TV). Tout ce qui est lié au setup TV est regroupé ici.
Alarme
Six modes (Absence, Maison, Nuit, Vacances, Bypass, Désactiver) en boutons pleine largeur avec des couleurs distinctes. Un bouton d’urgence en rouge en bas. Simple, direct, pas de fioriture.
Sonos
Le popup Sonos a une particularité : il est conditionnel à ma présence. Un bloc visibility sur le lanceur vérifie que person.maxime est à home. Quand je ne suis pas chez moi, le bouton disparait complètement de la section Maison. Pas besoin de contrôler les enceintes à distance, j’ai l’app Sonos pour ça. Le popup affiche la sonos-card avec les 3 enceintes (Salon, Bureau, Chambre).
Ce que j’ai choisi de ne PAS mettre
Aussi important que ce qui est sur le dashboard : ce qui n’y est pas.
Pas de popup caméras. J’ai l’app UniFi Protect sur l’iPhone, avec les notifications push, le timeline, et le live view en qualité native. Dupliquer ça dans Home Assistant n’apporterait rien, en moins bien.
Pas de popup mouvements ni doorbell. Même logique : UniFi Protect gère ça nativement avec des notifications riches.
Pas de QR code WiFi. Un classique des dashboards HA, souvent montré dans les tutos. En pratique, je n’ai jamais eu à le sortir sur mon téléphone. Les invités se connectent via le réseau guest avec un mot de passe simple.
Pas de popup Spotify. SpotifyPlus est intégré dans mon HA, mais le contrôle depuis l’app Spotify native est bien meilleur. Le widget iOS fait le job.
La philosophie derrière ces choix : ne pas dupliquer ce que d’autres apps font mieux. Le dashboard HA doit offrir de la valeur au-delà de l’accès natif. Chaque élément présent sur ce dashboard y est parce qu’il n’existe pas de meilleure alternative sur iPhone.
Ce que j’en retiens
Construire un dashboard iPhone dédié en une soirée, c’est faisable. Et le résultat est incomparable avec un dashboard desktop redimensionné de force sur un écran 6 pouces. Si tu veux voir le reste de mon setup homelab, il y a de quoi creuser.
Les trois patterns qui font la différence : les badges pour l’info permanente sans gaspiller d’espace, les indicateurs conditionnels pour un dashboard qui se tait quand tout va bien, et les popups Bubble Card pour garder un accès complet sans sacrifier la compacité.
Si tu pars de zéro, commence par les badges et la section conditionnelle. C’est ce qui change le plus l’expérience au quotidien. Les popups, tu les ajouteras au fur et à mesure selon tes besoins.
Et si tu galères avec les boutons Bubble Card : button_type: switch, card_layout: large, .bubble-switch{display:none!important}. De rien.
FAQ
Bubble Card est-il obligatoire pour ce type de dashboard ?
Non, mais il simplifie énormément la création de popups modaux et de boutons stylisés. Sans Bubble Card, tu peux utiliser des browser_mod popups ou des more-info dialogs, mais le rendu sera moins intégré.
Combien d’input_boolean faut-il créer pour les accordéons ?
Un par pièce que tu veux rendre dépliable. Dans mon cas, 4 pour le dashboard iPhone (Pièce de vie, Salon, Chambre, Bureau). J’en ai 24 au total dans ma maison pour les autres dashboards.
Le dashboard fonctionne-t-il sur Android ?
Oui, l’approche est identique. La vue sections avec max_columns: 1 s’adapte à n’importe quel écran mobile. Les popups Bubble Card fonctionnent de la même manière sur Android.
Pourquoi ne pas utiliser une vue « Panel » au lieu de « Sections » ?
Le type sections avec max_columns: 1 offre plus de flexibilité pour organiser les cartes en grille tout en restant sur une colonne. Le type panel impose une seule carte racine, ce qui complique la structure.
Comment gérer les performances avec 20 indicateurs conditionnels ?
Les cartes conditionnelles ne sont rendues que lorsque leur condition est vraie. Quand tout va bien, la majorité ne sont pas dans le DOM. L’impact sur les performances est négligeable.
