Teddy Payet

Magic Mirror avec Home Assistant, pour aller plus loin…

Teddy Payet — 2025-06-14T06:30:00Z

Cette série d'articles vous a permis de suivre étape par étape la création de mon Magic Mirror domotique, piloté par Home Assistant : un tableau de bord mural affichant l'heure, la météo, les calendriers, la présence des membres de la famille, les températures de la maison, ou encore la phase lunaire.

Mais le projet ne s'arrête pas là. Le véritable pouvoir de Home Assistant réside dans sa capacité à s'adapter. Voici donc quelques idées concrètes pour améliorer, étendre ou personnaliser encore plus votre Magic Mirror.

🕰️ 1. Affichage contextuel selon l'heure de la journée

Au lieu d'une simple rotation fixe entre les pages, vous pouvez afficher des vues différentes en fonction du moment de la journée :

Le matin (6h–10h) : calendriers et météo
L'après-midi : températures et phase lunaire
Le soir : rappel de la routine / compliments

Cela se fait via une automatisation Home Assistant combinant browser_mod.navigate et une condition horaire :

condition: "{{ now().hour < 10 }}"

🧍‍♂️ 2. Affichage basé sur la présence

Pourquoi ne pas adapter l'affichage selon qui est à la maison ?

Exemples :

Si seul l'un des enfants est présent, afficher uniquement son agenda.
Si la maison est vide, afficher une animation ou un écran de veille.
Si un invité est détecté (mode invité), désactiver la rotation.

Tout cela est possible via les entités person.*, ou les capteurs de présence (Bluetooth, Wi-Fi, etc.).

💬 3. Affichage de messages personnalisés

L'entité input_text.compliments utilisée pour les compliments peut être détournée pour afficher :

des messages contextuels ("Bonne journée Salomé !", "Rendez-vous médical à 14h"),
des alertes météo ou pollution,
des rappels d'organisation familiale.

Automatisations possibles :

- alias: Message anniversaire trigger: - platform: time at: "07:30:00" condition: - condition: template value_template: "{{ now().date() == states('sensor.birthday_today') }}" action: - service: input_text.set_value data: entity_id: input_text.compliments value: "Joyeux anniversaire, Johan ! 🎉"

🌐 4. Flux d'actualités ou d'informations publiques

Si vous souhaitez enrichir votre affichage avec des contenus extérieurs :

Flux RSS d'actualité locale ou nationale (via rss_feed)
Affichage du trafic routier (via Waze ou Google Maps)
Infos sur les jours de grève ou alertes publiques

Ces contenus peuvent être affichés sous forme de markdown, custom:text-element, ou même via une iframe dédiée.

J'avoue que je n'ai pas trouvé un affichage qui me plaise esthétiquement pour le RSS feed. Les solutions que je trouvais étaient pour l'affichage d'un tableau alors que je veux un surtitre (le nom de la source et la date relative de la news), le titre de l'article de news. Un à la fois, pas tout en bloc. Épuré…

🌡️ 5. Capteurs personnalisés via MQTT

Si vous êtes équipé de capteurs maison (ESPHome, Tasmota…), vous pouvez :

Ajouter des données météo ultra-locales
Suivre l'humidité du salon
Afficher la qualité de l'air intérieur

Home Assistant est pleinement compatible avec MQTT, ce qui permet d'exploiter toutes vos données dans le Magic Mirror.

🔐 6. Mode veille et sécurité

Un écran allumé en permanence peut être une gêne ou une perte d'énergie. Voici quelques idées :

Éteindre l'écran la nuit ou en absence prolongée (xrandr, vcgencmd, ou via une prise connectée)
Verrouiller l'accès à certaines pages
Ajouter un mode veille doux (horloge simple, fond noir)

🧪 Et au-delà…

Le Magic Mirror peut aussi servir de :

Tableau d'affichage dans une entrée d'immeuble
Tableau de bord d'atelier ou d'entreprise
Écran d'accueil pour une salle d'attente
Support pédagogique dans une école

La seule limite ? L'imagination. Et la RAM du Raspberry Pi 😄

Merci pour votre lecture !

Cette série est née d'un simple partage d'écran sur un groupe Home Assistant, et vous êtes quelques uns à avoir manifesté votre curiosité. J'espère qu'elle vous aura inspiré à créer, personnaliser et faire vivre vos propres interfaces. Je me suis aidé aussi d'une IA générative pour créer rapidement cette série d'articles. J'ai modifié des éléments pour rester conformes à mon idée et mon écriture.

Si vous avez des questions ou souhaitez partager vos créations, n'hésitez pas à me contacter via mon site.

À très bientôt, et bonne domotique à vous 🚀

Magic Mirror avec Home Assistant

Pourquoi j'ai intégré Home Assistant dans mon MagicMirror (9 juin)
Installer et configurer HACS pour enrichir Home Assistant (9 juin)
Construire les pages Lovelace du Magic Mirror (9 juin)
Calendriers, routines et organisation familiale (Page 2) (10 juin)
Suivi de l'environnement et bien-être (Page 3) (11 juin)
Automatiser la rotation des pages du Magic Mirror (12 juin)
Personnalisation et astuces d'affichage avec card_mod (13 juin)
Magic Mirror avec Home Assistant, pour aller plus loin… (14 juin)

Personnalisation et astuces d'affichage avec card_mod

Teddy Payet — 2025-06-13T07:00:00Z

Une fois le contenu en place et la rotation automatique entre les pages configurée, il est temps de passer à la touche finale : la présentation visuelle. Car un tableau de bord mural n'est pas qu'un assemblage de cartes, c'est aussi une interface conçue pour être lue à distance, agréable à l'œil et cohérente.

Dans cet article, je te montre comment j'ai utilisé `card_mod, un outil incontournable pour transformer visuellement mes vues Lovelace, et je partage plusieurs astuces pour créer un affichage propre, lisible, et harmonieux.

Pourquoi card_mod est indispensable

card_mod permet de modifier le style CSS de n'importe quelle carte dans Home Assistant Lovelace. Cela inclut :

la taille et le style des polices,
la gestion des marges et espacements,
la suppression des bordures ou des arrière-plans,
l'alignement du texte,
l'opacité et la hiérarchie visuelle.

C'est la couche de vernis qui fait passer un dashboard de "fonctionnel" à "fluide et élégant".

Quelques principes visuels appliqués à mon Magic Mirror

✅ 1. Suppression des bordures

Par défaut, les cartes Lovelace ont une bordure et un fond légèrement gris. Sur un écran mural sombre, cela crée un effet de "boîte empilée" peu harmonieux. J'ai donc systématiquement supprimé bordures et fonds :

card_mod: style: | ha-card { border: none !important; background: transparent !important; box-shadow: none !important; }

✅ 2. Taille des polices adaptée à la distance

Un miroir connecté est lu à 1 à 2 mètres, voire plus. J'ai donc augmenté les polices selon l'importance :

5rem pour l'heure ou la température du jour,
2rem à 2.5rem pour les titres ou les éléments secondaires,
1.4rem minimum pour tous les textes (événements, entités, légendes).

Exemple :

card_mod: style: | * { font-size: 1.43rem; } .name { font-size: 1.75rem; opacity: 0.6; }

✅ 3. Mise en page verticale et alignements

Sur certaines cartes comme la météo, j'ai réorganisé les éléments horizontalement ou verticalement selon leur nature, à l'aide de flexbox ou grid :

.info { flex-direction: column !important; align-items: flex-start !important; } .name-state, .temp-attribute { width: 100%; text-align: left; }

Cela permet d'éviter des coupures de texte ou des espacements incohérents.

✅ 4. Hiérarchie visuelle par opacité

Quand tout est en gras et blanc, rien n'émerge. Pour faire ressortir les informations importantes tout en gardant les autres lisibles, j'utilise l'opacité CSS :

#moment-0 { opacity: 1 !important; } #moment-2 { opacity: 0.5 !important; }

J'applique souvent :

opacity: 1 → élément principal (heure, jour)
opacity: 0.6 → données complémentaires
opacity: 0.3 → légendes ou secondes

Astuce bonus : structurer une `vertical-stack` comme une section

Tu peux utiliser card_mod pour espacer les cartes, ajouter des titres, ou simuler des "blocs" sans bordure :

type: vertical-stack cards: - type: markdown content: | ## Températures intérieures card_mod: style: | ha-card { background: transparent; border: none; font-size: 2.2rem; font-weight: bold; padding-left: 0.5rem; } - type: entities ...

Résultat : un affichage élégant et reposant

En combinant ces personnalisations :

toutes les pages de mon tableau de bord ont un aspect unifié,
la lisibilité est optimale,
l'interface semble "faite pour être affichée", pas simplement fonctionnelle.

L'esthétique contribue à rendre l'objet présent dans la maison, presque décoratif, tout en restant utile.

À suivre…

Dans le dernier article de la série, je vous proposerai quelques idées pour aller plus loin : affichage dynamique selon l'heure ou la présence, nouvelles cartes à tester, intégrations avec d'autres outils comme MQTT, etc.

Et si vous souhaitez personnaliser votre propre Magic Mirror, card_mod sera clairement votre meilleur allié.

Magic Mirror avec Home Assistant

Pourquoi j'ai intégré Home Assistant dans mon MagicMirror (9 juin)
Installer et configurer HACS pour enrichir Home Assistant (9 juin)
Construire les pages Lovelace du Magic Mirror (9 juin)
Calendriers, routines et organisation familiale (Page 2) (10 juin)
Suivi de l'environnement et bien-être (Page 3) (11 juin)
Automatiser la rotation des pages du Magic Mirror (12 juin)
Personnalisation et astuces d'affichage avec card_mod (13 juin)
Magic Mirror avec Home Assistant, pour aller plus loin… (14 juin)

Automatiser la rotation des pages du Magic Mirror

Teddy Payet — 2025-06-12T06:30:00Z

Après avoir conçu mes trois vues dans Home Assistant (horloge/météo, organisation familiale, suivi bien-être), il me manquait une pièce maîtresse pour rendre l'expérience fluide et immersive : la rotation automatique entre les pages.

L'objectif : ne jamais toucher l'écran. Le tableau de bord change seul, à intervalles réguliers, comme un carrousel d'informations, adapté à un usage mural, passif, mais toujours pertinent.

Dans cet article, je vous explique comment j'ai mis en place cette rotation automatique — sans module tiers ni JavaScript complexe, uniquement avec les outils de base de Home Assistant.

Préambule

L'article ici présent met en place une version simplifiée de la rotation que j'ai réellement mis en place sur mon Magic Mirror. En effet, sur mon Raspberry Pi d'affichage, j'utilise des services Linux pour faire tourner les onglets Chromium sur l'écran sans intervention humaine. J'ai voulu écrire un article un peu plus accessible pour les personnes n'ayant pas l'habitude des lignes de commandes…

Pourquoi automatiser la rotation ?

Le Magic Mirror n'est pas un écran interactif tactile : c'est un support d'affichage passif. Il doit :

afficher un contenu pertinent à tout moment de la journée,
changer de vue sans intervention humaine,
revenir à une page par défaut au besoin.

Cette logique de "carrousel" permet :

de diffuser plus d'informations sans surcharger une seule vue,
d'adapter l'information au moment (par exemple, l'agenda le matin, les températures l'après-midi),
de renforcer la sensation de fluidité et d'élégance.

Méthode retenue : automation + `navigate` service

1. Pré-requis

Avoir un tableau de bord dédié dans Home Assistant (ex : magicmirror).
Avoir défini chaque vue (page) avec un chemin (path) clair :
- page-1 pour l'heure/météo
- page-2 pour les calendriers
- page-3 pour le confort ambiant

2. Utilisation du service navigate

Home Assistant permet de naviguer vers une autre vue via le service :

service: browser_mod.navigate data: path: /lovelace/magicmirror/page-2 browser_id: magic_mirror_kiosk

🔸 Le browser_id est essentiel. Il identifie l'écran concerné (le Raspberry Pi du Magic Mirror). Il est fourni par l'intégration browser_mod.

3. Créer une automatisation de rotation

Voici une automatisation complète qui fait tourner les vues toutes les 30 secondes :

alias: Rotation Magic Mirror trigger: - platform: time_pattern seconds: "/30" variables: pages: - /lovelace/magicmirror/page-1 - /lovelace/magicmirror/page-2 - /lovelace/magicmirror/page-3 current_page: > {{ state_attr('sensor.magicmirror_current_page', 'path') or '/lovelace/magicmirror/page-1' }} next_index: > {% set index = pages.index(current_page) %} {% if index + 1 >= pages | length %} 0 {% else %} index + 1 {% endif %} next_page: > {{ pages[next_index] }} action: - service: browser_mod.navigate data: path: "{{ next_page }}" browser_id: magic_mirror_kiosk mode: single

Cette version :

détecte la page actuelle (avec un sensor personnalisé ou une intégration comme kiosk-mode),
calcule l'index suivant,
utilise le service browser_mod.navigate pour changer de vue.

🛠️ Astuce : tu peux aussi créer plusieurs automatisations distinctes (une par page) si tu préfères une logique plus simple et séquencée.

Et côté Raspberry Pi ?

Ton Raspberry Pi (afficheur Magic Mirror) doit lancer Home Assistant en plein écran dans Chromium, avec un identifiant reconnu par browser_mod.

Exemple de lancement via chromium-kiosk.service :

chromium-browser --kiosk --noerrdialogs --disable-infobars --start-fullscreen http://homeassistant.local:8123/lovelace/magicmirror/page-1

Et dans la configuration browser_mod (configuration.yaml) :

browser_mod: devices: magic_mirror_kiosk: name: Magic Mirror

Résultat : un Magic Mirror vraiment magique

Grâce à cette rotation automatisée :

les vues s'enchaînent sans interruption,
l'écran est toujours à jour,
les enfants n'ont rien à manipuler.

On passe ainsi d'un affichage figé à un dashboard vivant, contextuel et toujours utile.

En bonus : rotation intelligente

Tu peux aller plus loin :

afficher une page selon l'heure (matin = agenda, soir = températures),
afficher une page selon la présence ou l'ouverture d'une porte,
suspendre la rotation si un mode "invité" est activé.

Mais ça… on en reparlera potentiellement dans un article bonus 😏

Magic Mirror avec Home Assistant

Pourquoi j'ai intégré Home Assistant dans mon MagicMirror (9 juin)
Installer et configurer HACS pour enrichir Home Assistant (9 juin)
Construire les pages Lovelace du Magic Mirror (9 juin)
Calendriers, routines et organisation familiale (Page 2) (10 juin)
Suivi de l'environnement et bien-être (Page 3) (11 juin)
Automatiser la rotation des pages du Magic Mirror (12 juin)
Personnalisation et astuces d'affichage avec card_mod (13 juin)
Magic Mirror avec Home Assistant, pour aller plus loin… (14 juin)

Suivi de l'environnement et bien-être (Page 3)

Teddy Payet — 2025-06-11T07:00:00Z

Les deux premières pages de mon tableau de bord Magic Mirror affichaient des informations pratiques et de planification. Pour la troisième page, j'ai voulu explorer un aspect souvent négligé dans les interfaces domotiques : le confort ambiant, le rythme naturel… et l'état de santé de mon Raspberry Pi !

Cette vue, affichée en alternance avec les deux autres, regroupe des données techniques et sensibles pour suivre :

le fonctionnement du système,
le climat de la maison,
les cycles naturels comme les phases lunaires.

Un équilibre entre technique, confort et bien-être.

Objectif de cette page

Voici ce que j'ai voulu obtenir :

🧠 Suivre la santé matérielle du Raspberry Pi hébergeant le Magic Mirror (température, CPU, mémoire, stockage, uptime).
🌡️ Visualiser les températures dans toutes les pièces de la maison pour ajuster les conditions de confort.
🌕 Conserver un lien avec le temps naturel, à travers une visualisation des phases de la lune.
💬 Continuer à afficher un compliment, pour garder la tonalité positive du projet.

Structure et composants de la page

🖥️ 1. Surveillance du Raspberry Pi

Grâce à l'intégration Glances ou des sensor MQTT ou SSH, j'ai récupéré les données suivantes :

CPU : sensor.magic_mirror_pi_magicmirror_cpu
Disque : sensor.magic_mirror_pi_magicmirror_disk
Mémoire : sensor.magic_mirror_pi_magicmirror_memory
Température : sensor.magic_mirror_pi_magicmirror_temperature
Uptime : sensor.magicmirror_uptime

Ces entités sont affichées dans une carte entities avec des icônes claires (mdi:cpu-64-bit, mdi:memory, mdi:clock-outline...), stylisées via card_mod pour une police agrandie et un fond transparent.

- type: entities title: Magic Mirror entities: - entity: sensor.magic_mirror_pi_magicmirror_cpu name: CPU icon: mdi:cpu-64-bit - entity: sensor.magic_mirror_pi_magicmirror_disk name: Disque icon: mdi:harddisk - entity: sensor.magic_mirror_pi_magicmirror_memory name: Mémoire icon: mdi:memory - entity: sensor.magic_mirror_pi_magicmirror_temperature name: Température - entity: sensor.magicmirror_uptime name: Activité icon: mdi:clock-outline card_mod: style: | * { font-size: 1.43rem; } ha-card { border: none; background: transparent; }

🌡️ 2. Températures intérieures par pièce

J'ai intégré les capteurs de température MQTT (ou autres) dans une seconde carte entities, pour chaque pièce :

Balcon
Bureau
Cuisine
Chambre Salomé
Chambre garçons
Chambre parentale

Objectif : visualiser les zones chaudes/froides au fil de la journée. C'est aussi utile pour détecter une pièce mal chauffée ou mal isolée.

- type: entities entities: - entity: sensor.temperature_balcon_temperature name: Balcon - entity: sensor.temperature_bureau_temperature name: Bureau - entity: sensor.temperature_cuisine_temperature name: Cuisine - entity: sensor.temperature_chambre_salome_temperature name: Chambre Salomé - entity: sensor.temperature_chambre_garcons_temperature name: Chambre Garçons - entity: sensor.temperature_chambre_parentale_temperature name: Chambre parents card_mod: style: | * { font-size: 1.43rem; } ha-card { border: none; background: transparent; }

🌕 3. Phases lunaires

J'utilise la carte custom:lunar-phase-card, que j'ai configurée en mode compact, avec une vue discrète mais élégante de la lune actuelle.

Elle affiche :

la phase lunaire actuelle,
le visuel de la lune,
la localisation pour ajuster la phase au bon hémisphère.

- type: custom:lunar-phase-card entity: '' compact_view: true default_card: base selected_language: fr moon_position: left latitude: 48.96666 longitude: 2.04519 location: city: Andrésy country: France card_mod: style: | ha-card { border: none; background: transparent; }

Ce détail peut sembler anecdotique, mais il plaît beaucoup à mes enfants… et donne un rythme naturel aux jours qui passent.

💬 4. Compliment du jour

Comme dans les autres pages, j'ai inclus une carte button-card qui récupère dynamiquement la valeur de input_text.compliments.

Cela garde une touche humaine et bienveillante, quel que soit le contenu affiché.

- type: custom:button-card name: | [[[ return states['input_text.compliments'].state ]]] card_mod: style: | ha-card { border: none; background: transparent; } #name { width: 90%; font-weight: 100; font-size: 4.7rem; text-align: center; }

Résultat final

La page 3 du Magic Mirror complète parfaitement les deux premières :

Elle offre une vue d'ensemble technique (pour moi),
Une lecture de confort domestique (pour la famille),
Et une connexion au vivant (via la lune et le compliment).

Chaque élément est épuré, lisible, sans distraction, et parfaitement intégré dans la logique du miroir connecté.

Et ensuite ?

Dans le prochain article, je vous expliquerai comment j'ai automatisé la rotation entre les pages de mon tableau de bord, pour créer une boucle dynamique et continue.

Ainsi, le Magic Mirror affiche tour à tour l'heure, les calendriers, les températures, et bien plus encore — sans que personne n'ait besoin de toucher à l'écran.

Magic Mirror avec Home Assistant

Pourquoi j'ai intégré Home Assistant dans mon MagicMirror (9 juin)
Installer et configurer HACS pour enrichir Home Assistant (9 juin)
Construire les pages Lovelace du Magic Mirror (9 juin)
Calendriers, routines et organisation familiale (Page 2) (10 juin)
Suivi de l'environnement et bien-être (Page 3) (11 juin)
Automatiser la rotation des pages du Magic Mirror (12 juin)
Personnalisation et astuces d'affichage avec card_mod (13 juin)
Magic Mirror avec Home Assistant, pour aller plus loin… (14 juin)

Calendriers, routines et organisation familiale (Page 2)

Teddy Payet — 2025-06-10T06:00:00Z

Dans la première page de mon Magic Mirror sous Home Assistant, je me suis concentré sur l'affichage des données essentielles du quotidien : heure, météo, fuseaux horaires et présence des membres de la famille. Aujourd'hui, je vous présente la deuxième page, dédiée à l'organisation de la vie familiale.

Objectif : que chacun puisse savoir en un clin d'œil ce qu'il y a à faire aujourd'hui, ce qui est prévu cette semaine, et ne rater aucun anniversaire.

Un affichage tourné vers le quotidien

Cette seconde vue de mon Magic Mirror regroupe trois types d'informations :

Les petites routines familiales
Les événements à venir
Les anniversaires

Pour cela, j'ai utilisé la carte atomic-calendar-revive, disponible via HACS. Elle offre un affichage clair, compact et hautement personnalisable des événements d'un ou plusieurs calendriers.

Les cartes utilisées

🍽️ Mettre la table (routine quotidienne)

C'est une carte atomic-calendar-revive affichant uniquement le calendrier lié à la routine "Mettre la table" (Google Calendar + automatisation HA).
Cela permet aux enfants de visualiser facilement leur tour, directement à l'écran.

maxDaysToShow: 1
maxEventCount: 1
Icône personnalisée : mdi:food-fork-drink

📅 Agenda familial

Cette carte regroupe tous les calendriers Google synchronisés :

De chaque enfant
Papa
Famille
Vacances scolaires France
Calendrier Professionnel

Paramétrage :

maxDaysToShow: 7
showEventIcon: true
compactMode: false
sortBy: start
Icône par entité pour un affichage plus visuel

🎂 Anniversaires

Un calendrier spécifique aux anniversaires (créé dans Google Agenda), avec une icône mdi:cake-variant.
Cela permet aux enfants de repérer les anniversaires à venir dans la semaine, pour ne rien oublier.

Astuces d'affichage

Grâce à card_mod, j'ai adapté :

la taille de la police pour une lecture facile à distance,
l'opacité des éléments secondaires,
la suppression des bordures et arrière-plans,
une structure verticale claire, séparée par des titres en lettres capitales discrètes.

Chaque carte conserve une cohérence visuelle avec le reste du tableau de bord, tout en s'adaptant à son usage spécifique.

Et côté YAML ?

Voici un extrait représentatif :

- type: custom:atomic-calendar-revive name: LA TABLE entities: - entity: calendar.mettre_la_table icon: mdi:food-fork-drink maxDaysToShow: 1 maxEventCount: 1 showEventIcon: true showDatePerEvent: true hideFinishedEvents: true card_mod: style: | ha-card { border: none; background: transparent; }

Les deux autres cartes utilisent les mêmes paramètres, avec un nombre d'entités plus grand.

Résultat à l'écran

L'ensemble donne une interface sobre, lisible et utile. Chaque membre de la famille peut passer devant le Magic Mirror le matin, et voir en un coup d'œil :

Qui doit mettre la table ce soir
Ce qu'il a à faire cette semaine
Quels anniversaires approchent

C'est une vraie aide à l'organisation familiale, accessible à tous, sans ouvrir une seule application.

À suivre…

Dans le prochain article, je vous emmène sur la troisième page de mon Magic Mirror : celle dédiée à l'environnement et au bien-être. Surveillance du Raspberry Pi, températures dans chaque pièce, phases lunaires… Une page plus technique, mais toujours pensée pour améliorer la vie à la maison.

Magic Mirror avec Home Assistant

Pourquoi j'ai intégré Home Assistant dans mon MagicMirror (9 juin)
Installer et configurer HACS pour enrichir Home Assistant (9 juin)
Construire les pages Lovelace du Magic Mirror (9 juin)
Calendriers, routines et organisation familiale (Page 2) (10 juin)
Suivi de l'environnement et bien-être (Page 3) (11 juin)
Automatiser la rotation des pages du Magic Mirror (12 juin)
Personnalisation et astuces d'affichage avec card_mod (13 juin)
Magic Mirror avec Home Assistant, pour aller plus loin… (14 juin)

Pourquoi j'ai intégré Home Assistant dans mon MagicMirror

Teddy Payet — 2025-06-09T06:00:00Z

Cela fait plusieurs années que j'utilise MagicMirror²sur un Raspberry Pi pour afficher des informations utiles à la maison. C'est un projet open source fantastique, très modulaire, pensé pour l'affichage sur écran vertical (type miroir connecté), et parfait pour présenter de l'information en continu.
Mon installation était entièrement automatisée, utilisant Electron (intégré nativement à MagicMirror²) pour un lancement en mode kiosque sans intervention manuelle. Simple, stable, efficace. Mais avec le temps, certaines limites ont commencé à apparaître…

MagicMirror² : solide mais limité

MagicMirror² m'a permis de créer un affichage personnalisé avec des modules communautaires : météo, calendrier, compliments, horloge, etc. Mais certains points sont devenus bloquants :

la météo : les modules fonctionnels exigeaient désormais une API nécessitant une carte bancaire, parfois même pour un accès basique ;
la maintenance de certains modules tiers devenait aléatoire ;
les personnalisations CSS nécessitaient de toucher au code source directement ;
l'intégration avec les autres composants de la maison connectée était quasi inexistante.

Home Assistant : le cerveau central

Utilisant déjà Home Assistant pour piloter une grande partie de ma domotique, l'idée de m'appuyer sur son interface Lovelace pour créer un miroir intelligent s'est naturellement imposée.

Avec ses cartes personnalisables, sa compatibilité native avec de nombreuses sources de données, et ses puissantes automatisations, Home Assistant permet de construire un dashboard moderne, interactif et intégré.

J'utilise également un MQTT Broker sur mon Raspberry Pi qui permet à Home Assistant à détecter de nouveaux capteurs. Nous verrons cela un peu plus tard.

Un affichage conçu pour un écran mural

J'ai donc conçu une interface dédiée dans Home Assistant, baptisée "Magic Mirror", pensée pour être affichée sur un écran mural. Elle comprend :

un mode sombre lisible à distance ;
un affichage plein écran, sans menus ni distractions ;
une rotation automatique entre plusieurs vues ;
une interface adaptée à un usage familial quotidien : fuseaux horaires, météo, présence, calendriers, etc.

Le résultat ? Un miroir numérique fluide, esthétique, ultra-personnalisable — et surtout, sans dépendance à des API météo contraignantes.

Ce que je vais partager avec vous

Cette série d'articles a pour but de vous montrer pas à pas comment j'ai mis en place ce tableau de bord, de l'installation des cartes Lovelace jusqu'à la gestion des pages et de la rotation automatique.

Si vous utilisez déjà Home Assistant, ou que vous cherchez une alternative plus souple à MagicMirror², vous découvrirez une manière élégante de transformer un simple écran en un tableau de bord intelligent et vivant.

Rendez-vous dans le prochain article, où je vous expliquerai comment installer les cartes nécessaires via HACS. À très vite !

Magic Mirror avec Home Assistant

Pourquoi j'ai intégré Home Assistant dans mon MagicMirror (9 juin)
Installer et configurer HACS pour enrichir Home Assistant (9 juin)
Construire les pages Lovelace du Magic Mirror (9 juin)
Calendriers, routines et organisation familiale (Page 2) (10 juin)
Suivi de l'environnement et bien-être (Page 3) (11 juin)
Automatiser la rotation des pages du Magic Mirror (12 juin)
Personnalisation et astuces d'affichage avec card_mod (13 juin)
Magic Mirror avec Home Assistant, pour aller plus loin… (14 juin)

Installer et configurer HACS pour enrichir Home Assistant

Teddy Payet — 2025-06-09T06:00:00Z

Dans le premier article, je vous expliquais pourquoi j'ai choisi de migrer mon tableau de bord MagicMirror vers Home Assistant. Pour aller plus loin que les cartes par défaut et vraiment personnaliser l'interface, j'ai eu besoin d'installer des composants supplémentaires. C'est là qu'intervient HACS, le Home Assistant Community Store.

Qu'est-ce que HACS ?

HACS est une passerelle communautaire qui permet d'ajouter facilement des cartes personnalisées, des intégrations, des automations et même des thèmes à Home Assistant, directement depuis l'interface web. C'est devenu un indispensable pour toute configuration avancée.

Grâce à HACS, j'ai pu installer les cartes nécessaires à l'affichage de mon dashboard Magic Mirror, sans me soucier des dépôts GitHub ou des mises à jour manuelles.

Étapes pour installer HACS

Voici les étapes principales pour installer HACS (valables à partir de Home Assistant 2023.x) :

Activer le SSH sur votre Home Assistant (si ce n'est pas encore fait).
Connectez-vous en SSH et exécutez la commande suivante :
wget -O - https://get.hacs.xyz | bash -
Redémarrez Home Assistant.
Allez dans Paramètres > Modules complémentaires > HACS puis suivez l'assistant de configuration.
Une fois installé, vous verrez l'entrée HACS dans la barre latérale.

👉 Petit conseil : HACS propose une mise à jour automatique de vos composants installés. Pratique pour garder votre configuration à jour sans effort.

Les cartes que j'utilise avec mon Magic Mirror

Voici les principales cartes personnalisées que j'ai ajoutées via HACS pour créer mon interface Magic Mirror :

🕒 better-moment-card

Affiche l'heure, la date, les secondes, le numéro de semaine.
Gère les fuseaux horaires (Paris, Réunion, Guadeloupe).
Permet des mises en forme précises grâce au CSS.

🌦️ weather-chart-card

Affiche les prévisions météo avec des icônes visuelles.
Très adapté à un affichage public type tableau de bord.

📅 atomic-calendar-revive

Pour afficher les événements de plusieurs calendriers.
Affichage compact et lisible.
Très utile pour un usage familial.

🌙 lunar-phase-card

Carte simple et esthétique pour afficher les phases lunaires.
Ajoute une touche « bien-être » à l'interface.

🎨 button-card et card-mod

button-card : permet d'afficher un compliment du jour.
card-mod : outil puissant pour personnaliser l'apparence CSS de chaque carte (taille des polices, alignement, marges, etc.).

Et ensuite ?

Une fois ces cartes installées, je les ai intégrées à un tableau de bord dédié (layout-magicmirror.yaml). Chaque carte a été pensée pour s'afficher harmonieusement sur un écran mural.

Dans le prochain article, je vous montrerai comment j'ai structuré les pages de mon Magic Mirror, comment j'ai organisé les blocs d'information, et les astuces CSS que j'ai utilisées pour une lecture à distance agréable.

À bientôt pour la suite !

Magic Mirror avec Home Assistant

Pourquoi j'ai intégré Home Assistant dans mon MagicMirror (9 juin)
Installer et configurer HACS pour enrichir Home Assistant (9 juin)
Construire les pages Lovelace du Magic Mirror (9 juin)
Calendriers, routines et organisation familiale (Page 2) (10 juin)
Suivi de l'environnement et bien-être (Page 3) (11 juin)
Automatiser la rotation des pages du Magic Mirror (12 juin)
Personnalisation et astuces d'affichage avec card_mod (13 juin)
Magic Mirror avec Home Assistant, pour aller plus loin… (14 juin)

Construire les pages Lovelace du Magic Mirror

Teddy Payet — 2025-06-09T06:00:00Z

Une fois HACS installé et les cartes nécessaires ajoutées, l'étape suivante a été de concevoir l'interface du tableau de bord affiché sur mon écran mural. C'est dans ce troisième article que je vous présente la structure de mon dashboard, les vues que j'ai mises en place et les choix esthétiques pour une lisibilité optimale.

Une interface pensée pour un affichage vertical

Le tableau de bord que j'ai créé dans Home Assistant est nommé Magic Mirror. Il utilise un fichier Lovelace dédié (layout-magicmirror.yaml) avec l'intégration de la carte custom:masonry-layout afin de gérer précisément le placement et la largeur des éléments.

L'objectif : optimiser la lisibilité depuis une certaine distance, sur un écran vertical accroché au mur.

Chaque page ou « vue » affiche un type d'information bien spécifique. Pour éviter la surcharge, j'ai fait en sorte que chaque vue tourne automatiquement toutes les 30 secondes (on verra cela dans un prochain article).

Page 1 : heure, météo, fuseaux horaires et présence

La première vue est affichée le plus souvent dans la journée. Elle rassemble les informations de base du quotidien.

🕒 Heure, date et semaine : avec better-moment-card, dans un design sobre et épuré.
🌍 Fuseaux horaires : j'affiche également l'heure à La Réunion et en Guadeloupe, deux lieux qui me sont chers. Chacun a sa propre better-moment-card.
🌦️ Météo actuelle à Andrésy : carte weather-forecast, sans prévisions, juste l'info du jour avec une température affichée en grand.
👥 Présence des membres de la famille : une simple carte entities qui affiche si les enfants et moi sommes à la maison, en lien avec nos trackers.
💬 Compliment du jour : un button-card qui affiche dynamiquement le contenu d'un input_text.

Chaque élément utilise card-mod pour harmoniser les tailles de police, les alignements et supprimer tout encadrement visuel superflu. Résultat : une page lisible, aérée, élégante.

Structure de la page 1 (extrait YAML)

views: - title: '1' type: custom:masonry-layout layout: width: 700 max_cols: 1 path: page-1 theme: dark-mode cards: - type: horizontal-stack cards: - type: custom:better-moment-card parentStyle: | line-height:normal; padding-bottom:0em; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0px; grid-template-areas: 'date date' 'heure seconde' 'semaine semaine'; moment: - format: cccc, DD locale: fr timezone: Europe/Paris parentStyle: | font-size: 2rem; font-weight: 400; line-height: 1; margin:0; padding: 0; opacity: 0.5; grid-area: date; template: | {{moment}} - format: HH:mm timezone: Europe/Paris template: | {{moment}} parentStyle: | font-size: 5rem; font-weight: 300; line-height: 0.65; text-align: left; margin:0; margin-left: 0rem; padding: 0; grid-area: heure; - format: ss timezone: Europe/Paris template: | {{moment}} parentStyle: | font-size: 2.5rem; font-weight: 200; line-height: 0.65; text-align: left; margin:0; margin-left: -3rem; padding: 0; opacity: 0.5; grid-area: seconde; - format: W timezone: Europe/Paris parentStyle: | font-size: 2.15rem; font-weight: 400; line-height: 2; margin:0; padding: 0; opacity: 0.5; grid-area: semaine; template: | Semaine {{moment}} card_mod: style: | ha-card { border: none !important; background: transparent; border-width: 0; } #moment-0 { opacity: 1 !important; } #moment-2 { margin-left: 0.5rem !important; } - type: vertical-stack cards: - show_current: true show_forecast: false type: weather-forecast entity: weather.ma_ville forecast_type: daily forecast_slots: 5 card_mod: style: | ha-card { border: none !important; background: transparent; border-width: 0; } .temp-attribute .temp { font-size: 5rem !important; font-weight: 300 !important; text-align: right !important; line-height: 1 !important; } .info { flex-direction: column !important; align-items: flex-start; } .name-state, .temp-attribute { width: 100%; text-align: left; }

 - type: horizontal-stack cards: - type: vertical-stack cards: - type: custom:better-moment-card parentStyle: | line-height:normal; padding-bottom:0em; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0px; grid-template-areas: 'time region' 'time fuseaux'; moment: - format: HH:mm timezone: Indian/Reunion parentStyle: | text-align:left; line-height:1.25; padding-top:0.2em; font-size:5rem; font-weight: 200; grid-area: time; template: | {{moment}} - format: HH:mm timezone: Indian/Reunion parentStyle: | text-align:left; line-height:1; padding-top:0.75em; margin-bottom:0; font-size:2rem; font-weight: 300; grid-area: region; template: | Réunion - format: HH:mm timezone: Indian/Reunion parentStyle: | text-align:left; line-height:0.5; padding-top:0.2em; font-size:1.5rem; font-weight: 100; margin-bottom:0; grid-area: fuseaux; template: | +2:00 card_mod: style: | #moment-0 { font-size: 4rem !important; } - type: custom:better-moment-card parentStyle: | line-height:normal; padding-bottom:0em; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0px; grid-template-areas: 'time region' 'time fuseaux'; moment: - format: HH:mm timezone: America/Guadeloupe parentStyle: | text-align:left; line-height:1.25; padding-top:0.2em; font-size:5rem; font-weight: 200; grid-area: time; template: | {{moment}} - format: HH:mm timezone: America/Guadeloupe parentStyle: | text-align:left; line-height:1; padding-top:0.75em; margin-bottom:0; font-size:2rem; font-weight: 300; grid-area: region; template: | Guadeloupe - format: HH:mm timezone: America/Guadeloupe parentStyle: | text-align:left; line-height:0.5; padding-top:0.2em; font-size:1.5rem; font-weight: 100; margin-bottom:0; grid-area: fuseaux; template: | -6:00 card_mod: style: | ha-card { border: none !important; background: transparent; border-width: 0; } #moment-0 { font-size: 4rem !important; }

 - type: entities title: Présence entities: - entity: person.teddy - entity: person.alexandre ...

 - type: custom:button-card name: | [[[ return states['input_text.compliments'].state ]]] card_mod: style: | * { font-size: 1.43rem; } ha-card { border: none; background: transparent; } #name { width: 90%; font-weight: 100; font-size: 4.7rem !important; text-align: center; text-wrap: balance; overflow-wrap: break-word; } subview: false icon: '' badges: []

🧩 Le fichier complet sera détaillé en fin de série, une fois toutes les pages abordées.

Choix esthétiques

Voici les quelques règles que je me suis imposées :

Aucune bordure sur les cartes (card_mod avec border: none).
Polices larges : entre 2rem et 5rem selon le type d'information.
Opacité modulée : les éléments moins importants sont en gris clair.
Alignement à gauche pour l'heure et la météo, centré pour les compliments.

Et la suite ?

Dans le prochain article, je vous présenterai la deuxième vue de mon Magic Mirror, dédiée à l'organisation familiale : calendriers, routines, événements importants. L'objectif étant que chacun, en passant devant l'écran, sache ce qui est prévu aujourd'hui ou cette semaine.

À bientôt pour la suite de cette série domotique !

Magic Mirror avec Home Assistant

Pourquoi j'ai intégré Home Assistant dans mon MagicMirror (9 juin)
Installer et configurer HACS pour enrichir Home Assistant (9 juin)
Construire les pages Lovelace du Magic Mirror (9 juin)
Calendriers, routines et organisation familiale (Page 2) (10 juin)
Suivi de l'environnement et bien-être (Page 3) (11 juin)
Automatiser la rotation des pages du Magic Mirror (12 juin)
Personnalisation et astuces d'affichage avec card_mod (13 juin)
Magic Mirror avec Home Assistant, pour aller plus loin… (14 juin)

Association Didattica, millésime 2024

Teddy Payet — 2024-10-15T07:30:00Z

L'association Didattica se fait un petit lifting et se met au gout du jour en adoptant une interface responsive. Ce remaniement esthétique a été mis en ligne en octobre 2024.
La refonte graphique respecte l'aspect identitaire initiale du site. Nous avons rafraichi sa lecture sur l'ensemble des supports avec du responsive avec l'utilisation de Bootstrap 5 sur un SPIP 4.3. Toutes les pages ont été revues dans leur mise en forme et dans la structure des informations affichées grâce au (…)

- Développement / SPIP, HTML, CSS, MySQL, Associaiton Didattica, PHP, Freelance, Bootstrap (CSS et JS), Lead Developer, Git, VSCode

Socicon, le site internet

Teddy Payet — 2024-04-10T10:00:00Z

Projet de reprise et création du site Internet de la librairie Socicon

Depuis mars 2024, j'ai entrepris la reprise de la librairie Socicon, une ressource précieuse pour l'intégration d'icônes sociales dans les sites web, qui n'était plus activement maintenue. En collaboration avec l'auteur d'origine, coolseed, j'ai non seulement repris la maintenance de la librairie, mais j'ai également recréé un site internet de présentation dédié à Socicon. Je m'engage à respecter l'idée originale de l'auteur de la librairie Socicon, coolseed, et à lui accorder toujours le dernier mot sur sa réalisation et sa vision de la librairie.

Création du site internet avec SPIP

Le site internet de présentation de la librairie Socicon a été créé grâce à SPIP, un système de gestion de contenu (CMS) flexible et puissant. Cette plateforme nous a permis de concevoir un site autonome, capable de télécharger automatiquement la dernière version de la librairie depuis GitHub. Ainsi, les utilisateurs ont toujours accès à la version la plus récente de Socicon, garantissant une expérience optimale.
De plus, j'ai développé la galerie de présentation des icônes de la librairie en utilisant du JavaScript, en consultant le contenu du fichier JSON inclus dans la librairie Socicon. Cette galerie permet aux utilisateurs de visualiser facilement toutes les icônes disponibles, offrant ainsi une expérience immersive et pratique.

Intégration dynamique du CHANGELOG et du README

Une des fonctionnalités clés du site est l'intégration dynamique du CHANGELOG et du README directement depuis la dernière version de Socicon sur GitHub. Cela permet aux utilisateurs de consulter les dernières modifications apportées à la librairie et d'accéder aux instructions d'utilisation et aux informations importantes sans avoir à quitter le site.

Réactivation du générateur de PNG

En collaborant avec coolseed, l'auteur d'origine de Socicon, nous avons pu réactiver le générateur de PNG à partir de la webfont. Cette fonctionnalité permet aux utilisateurs de créer facilement des icônes sociales personnalisées au format PNG, adaptées à leurs besoins spécifiques. Cela ajoute une valeur supplémentaire à la librairie Socicon et renforce son utilité pour les développeurs web et les concepteurs.

Vision et objectifs futurs

Mon engagement envers la librairie Socicon ne s'arrête pas à sa reprise et à la création du site internet de présentation. Je suis déterminé à continuer à maintenir et à améliorer la librairie, en répondant aux besoins de la communauté des développeurs web et en garantissant sa compatibilité avec les dernières technologies. De plus, je m'efforcerai d'explorer de nouvelles fonctionnalités et d'optimiser l'expérience utilisateur sur le site internet de Socicon.

La reprise de la librairie Socicon et la création du site internet de présentation représentent un pas important vers la pérennité et l'amélioration continue de cette ressource essentielle pour les développeurs web. Grâce à la collaboration avec coolseed et à l'utilisation de technologies modernes telles que SPIP et GitHub, nous avons pu offrir une expérience utilisateur enrichie et garantir l'accès à la dernière version de Socicon. Je suis impatient de poursuivre ce projet et de contribuer activement au développement de la communauté des développeurs web.

Teddy Payet

Magic Mirror avec Home Assistant, pour aller plus loin…

🕰️ 1. Affichage contextuel selon l'heure de la journée

🧍‍♂️ 2. Affichage basé sur la présence

💬 3. Affichage de messages personnalisés

🌐 4. Flux d'actualités ou d'informations publiques

🌡️ 5. Capteurs personnalisés via MQTT

🔐 6. Mode veille et sécurité

🧪 Et au-delà…

Merci pour votre lecture !

Personnalisation et astuces d'affichage avec card_mod

Pourquoi card_mod est indispensable

Quelques principes visuels appliqués à mon Magic Mirror

Astuce bonus : structurer une vertical-stack comme une section

Résultat : un affichage élégant et reposant

À suivre…

Automatiser la rotation des pages du Magic Mirror

Préambule

Pourquoi automatiser la rotation ?

Méthode retenue : automation + navigate service

Et côté Raspberry Pi ?

Résultat : un Magic Mirror vraiment magique

En bonus : rotation intelligente

Suivi de l'environnement et bien-être (Page 3)

Objectif de cette page

Structure et composants de la page

Résultat final

Et ensuite ?

Calendriers, routines et organisation familiale (Page 2)

Un affichage tourné vers le quotidien

Les cartes utilisées

Astuces d'affichage

Et côté YAML ?

Résultat à l'écran

À suivre…

Pourquoi j'ai intégré Home Assistant dans mon MagicMirror

MagicMirror² : solide mais limité

Home Assistant : le cerveau central

Un affichage conçu pour un écran mural

Ce que je vais partager avec vous

Installer et configurer HACS pour enrichir Home Assistant

Qu'est-ce que HACS ?

Étapes pour installer HACS

Les cartes que j'utilise avec mon Magic Mirror

Et ensuite ?

Construire les pages Lovelace du Magic Mirror

Une interface pensée pour un affichage vertical

Page 1 : heure, météo, fuseaux horaires et présence

Structure de la page 1 (extrait YAML)

Choix esthétiques

Et la suite ?

Association Didattica, millésime 2024

Socicon, le site internet

Projet de reprise et création du site Internet de la librairie Socicon

Création du site internet avec SPIP

Intégration dynamique du CHANGELOG et du README

Réactivation du générateur de PNG

Vision et objectifs futurs

Astuce bonus : structurer une `vertical-stack` comme une section

Méthode retenue : automation + `navigate` service