Pourquoi personnaliser Lovelace dans Home Assistant ?
Si vous utilisez Home Assistant depuis un moment, vous avez sûrement déjà jeté un œil à l’interface Lovelace. C’est la couche de présentation de votre domotique : la vitrine de votre maison connectée. Et soyons honnêtes, l’interface par défaut fonctionne… mais elle manque sérieusement de charme et d’efficacité quand vous commencez à empiler les entités, les automatisations et les capteurs.
Heureusement, Lovelace est hautement personnalisable. Avec un peu d’huile de coude et quelques bons outils, vous pouvez transformer votre tableau de bord en véritable cockpit domotique : clair, organisé, beau à regarder… et surtout pensé pour votre quotidien.
Dans cet article, je vous montre comment personnaliser votre interface Lovelace sans perdre votre dimanche ni vous tirer les cheveux sur une syntaxe obscure. Objectifs : lisibilité, accessibilité et plaisir d’usage au quotidien.
Préparer le terrain : mode YAML ou interface graphique ?
Avant de démarrer, une décision importante : voulez-vous gérer votre interface en mode YAML (codé à la main) ou via l’éditeur graphique intégré dans Home Assistant ?
- L’éditeur graphique est parfait pour commencer rapidement, tester des idées, modifier des cartes à la volée…
- Le mode YAML est plus adapté si vous voulez une personnalisation poussée, des modèles conditionnels ou une configuration versionnée.
Personnellement, j’utilise un mix des deux : l’éditeur graphique pour les tests rapides, et YAML pour les configurations plus poussées (surtout quand je veux dupliquer ou versionner via Git).
Bien organiser ses vues et ses cartes
La première étape pour personnaliser Lovelace est de structurer vos vues. Essayez de ne pas tout entasser sur une seule vue, vous allez vite perdre le fil. Pensez vos vues par pièce, usage ou type d’objet.
- Vue par pièce : Salon, Cuisine, Garage, etc.
- Vue par usage : Énergie, Sécurité, Climat, Scènes, etc.
- Vue geekerie : pour tester des cartes, scripts, automations en cours de création.
Ensuite, dans chaque vue, choisissez des cartes pertinentes. Inutile de multiplier les tableaux ou historiques si vous ne les consultez jamais. Moins c’est parfois mieux, surtout pour les membres de la famille pas geeks.
Un exemple de combo efficace : pour la pièce « Salon », j’utilise une carte « Masonry » avec :
- Une carte météo simplifiée
- Le contrôle des lumières (via carte bouton ou entités groupées)
- Informations de présence + température + TV (ON/OFF via IR)
Astuce : n’hésitez pas à exploiter les badges en haut de la vue pour des infos clés (température, alarme, notifications).
Les cartes indispensables pour une UI aux petits oignons
Lovelace fonctionne grâce à des « cartes » – des modules que vous organisez pour afficher vos informations ou interagir. Certaines sont natives, d’autres viennent de la communauté via HACS (Home Assistant Community Store). Voici mes préférées :
- button-card (custom via HACS) : ultra personnalisable, permet de créer des boutons animés, avec icônes dynamiques, états conditionnels, etc.
- mini-graph-card : pour des graphiques esthétiques qui ne prennent pas tout l’écran
- weather-card ou meteo-france-card : pour les infos météo claires, avec icônes sympas
- auto-entities : pour générer dynamiquement des listes en fonction de conditions
- slider-entity-row : pour des sliders visuellement intégrés avec les entités (lumières, etc.)
Pour utiliser ces cartes, il faut souvent passer par HACS. Si vous ne l’avez pas encore installé, je vous conseille de le faire sans tarder. Une vraie boîte à outils pour tout domoticien qui se respecte.
Personnalisation fine : couleurs, icônes et états conditionnels
C’est ici que Lovelace prend toute sa puissance. Vous pouvez adapter chaque carte ou bouton selon l’état de vos entités. Une lumière est allumée ? Passez l’icône en jaune. Une porte est ouverte ? Faites-la clignoter avec une animation CSS.
Voici un exemple simple avec la button-card :
type: custom:button-cardentity: light.salonname: Lumière Salonicon: mdi:lightbulbshow_state: truestate: - value: 'on' color: yellow icon: mdi:lightbulb-on styles: icon: - animation: blink 1s ease infinite
Oui, vous pouvez jouer avec le CSS ! Idéal pour signaler un dysfonctionnement (capteur offline, batterie faible, etc.) sans lire 15 lignes de log.
Et puis niveau WAF, avoir des icônes claires et colorées, ça fait toute la différence pour madame ou monsieur qui n’est pas à fond domotique.
Utiliser des vues dynamiques pour plus de lisibilité
Une autre façon de dynamiser votre dashboard Lovelace, c’est d’utiliser les options de visibilité conditionnelle. Par exemple, vous pouvez faire apparaître une carte uniquement si quelqu’un est à la maison, ou masquer le bouton de l’alarme si elle est en mode « absent ».
Exemple pratique avec la gestion de l’alarme :
type: conditionalconditions: - entity: alarm_control_panel.maison state: disarmedcard: type: button name: Activer l’alarme tap_action: action: call-service service: alarm_control_panel.alarm_arm_away service_data: entity_id: alarm_control_panel.maison
Avec ce type de logique, votre interface devient intelligente : elle adapte l’affichage aux contextes, ce qui évite de surcharger inutilement.
Un peu de logique : templates et sensors personnalisés
Parfois, les entités classiques ne suffisent pas à répondre à vos besoins. Là, on peut utiliser des sensors template, qui permettent de créer des entités personnalisées à partir de conditions ou de plusieurs capteurs.
Exemple concret chez moi : j’ai un sensor nommé sensor.temp_maison_max qui me renvoie la pièce la plus chaude dans la maison. Il se base sur toutes les températures ambiantes et est utile pour piloter la VMC ou faire des alertes canicule maison.
sensor: - platform: template sensors: temp_maison_max: friendly_name: "Température max" unit_of_measurement: "°C" value_template: > {{ states.sensor | selectattr('entity_id', 'match', 'sensor.temp_.*') | map(attribute='state') | map('float') | max }}
Ce genre de capteur personnalisé peut ensuite être intégré à vos cartes, vos graphiques ou vos automatisations Lovelace.
Optimiser pour téléphone, tablette et PC
Un dashboard sur PC, c’est bien. Mais dans la vraie vie, on le consulte surtout sur tablette dans l’entrée ou sur son smartphone. Pensez donc à adapter votre interface selon les écrans.
- Groupement des cartes « sensibles » (lumières, alarme, portail) dans une vue mobile-friendly
- Tuiles plus grandes sur tablette murale (éviter les liens trop petits pour les doigts)
- Utilisez les « vertical-stack » ou « horizontal-stack » pour un affichage fluide
Si vous voulez aller plus loin, vous pouvez même utiliser des dashboards spécifiques par appareil (tablette vs PC), voire gérer un thème sombre/clair selon l’heure ou l’utilisateur.
Retour d’expérience : ce qui a vraiment changé le quotidien
Avant de personnaliser Lovelace, ma famille passait plus de temps à chercher comment allumer la lumière qu’à profiter de la domotique. Depuis le passage à une interface pensée pour l’usage réel, tout a changé :
- Plus besoin d’expliquer : l’interface est intuitive
- Réduction des erreurs (aucune fausse alerte sur l’alarme depuis 3 mois 🙌)
- Temps de réponse à une alerte (fenêtre ouverte + pluie) divisé par deux
Mon tableau de bord est devenu un réflexe, comme vérifier l’heure ou la météo. Et pour moi, amateur de bidouille technico-pratique, c’est aussi une vraie source de satisfaction quotidienne.
Pistes pour aller encore plus loin
Une fois que vous avez une interface Lovelace solide, vous pouvez explorer :
- Les thèmes personnalisés : pour un style harmonisé ou un mode nuit
- Le mode kiosk : parfait pour les tablettes en mode mural (suppression de la barre latérale)
- Les intégrations media player : pour commander Spotify ou la radio depuis Lovelace
- Le mode multi-utilisateur avec dashboards par profils (parents/enfants)
La personnalisation de Lovelace n’est pas qu’un caprice esthétique. C’est une vraie démarche fonctionnelle qui vous permet d’exploiter le plein potentiel de votre installation Home Assistant.
Vous avez des dashboards dont vous êtes fiers ? Un écran mural avec interface tactile ? Des boutons animés sortis tout droit de Star Trek ? N’hésitez pas à partager vos créations sur le Discord ou dans les commentaires du blog – je suis toujours preneur d’idées geek !
