Teddy Payet

20 ans de blogging technique : ce que j'ai appris

Teddy Payet — 2025-08-16T12:29:48Z

Depuis 2009, ce blog m'accompagne comme un carnet de route technique. De SPIP aux lignes de commande, des astuces de développement aux projets domotiques, j'y ai consigné mes découvertes, mes erreurs et mes progrès. Quinze ans plus tard, je prends un peu de recul pour partager ce que cette aventure d'écriture m'a appris : documenter pour soi, transmettre aux autres et laisser une trace vivante d'un parcours de développeur qui évolue.

Un chemin commencé en 2009

Mon tout premier article de la rubrique Blog, publié en décembre 2009, portait sur un filtre graphique dans SPIP : un petit bout de code, rien de plus. À ce moment-là, je n'avais pas de plan éditorial ni d'ambition particulière. J'écrivais pour ne pas oublier, pour garder une trace de mes expérimentations. Avec le temps, ces notes éparses sont devenues un journal technique à part entière, un espace vivant où se mêlent astuces rapides, réflexions plus construites et découvertes au fil de mes projets.
En revenant sur quinze années de publications, je réalise que ce blog a suivi le même rythme que ma propre évolution. Il a connu des périodes d'intense activité, des creux inévitables, mais toujours cette constance : revenir écrire quand une idée, un problème ou une solution méritaient d'être partagés.

Les grandes périodes de mon blog

2009–2013 : Les fondations techniques
Lorsque j'ai ouvert la rubrique Blog, je ne pensais pas vraiment à construire une ligne éditoriale. J'écrivais surtout pour moi, afin de conserver quelque part les petits bouts de code et les astuces que je découvrais. SPIP occupait une place centrale dans mes expérimentations. J'y testais les filtres, les boucles, les façons d'améliorer l'affichage ou d'optimiser mes squelettes. Beaucoup de mes articles de cette période sont courts, précis, et volontairement très pratiques. Ils reflètent un quotidien de développeur-intégrateur en construction, avide de solutions concrètes.

Ce foisonnement technique a constitué une véritable fondation. Non seulement il m'a permis d'apprendre plus vite en formalisant mes découvertes, mais il m'a aussi donné un sentiment d'appartenance à une communauté plus large. Chaque billet publié devenait une petite pierre ajoutée à l'édifice collectif du web libre.

2014–2018 : Moins de volume, plus de spécialisation
Après cette période d'intense production, le rythme s'est ralenti. Les années 2014 à 2018 ne comptent qu'une poignée d'articles, mais ceux-ci sont plus ciblés. Je n'avais plus besoin de consigner chaque manipulation, chaque filtre ou chaque commande. Mon blog a pris une autre fonction : celle de mémoire technique. J'y revenais surtout quand une solution méritait vraiment d'être fixée, ou lorsqu'un sujet demandait un peu plus de recul.

On y voit apparaître de nouveaux thèmes, notamment l'industrialisation du développement avec l'arrivée de Git, mais aussi des réflexions plus transverses sur l'organisation de mes projets. Cette période marque un passage de l'accumulation de notes à une sélection plus rigoureuse de ce que je jugeais utile de partager. Il m'arrivait parfois de rassembler un ensemble de références, d'articles, de tuto dans un seul et même article sur mon blog. En effet, quand on rencontre une difficulté dans un développement, on regarde les solutions sur Stack Overflow, ou toute autre source. La solution n'était pas systématiquement dans la même source mais au sein de plusieurs. Au lieu de m'arracher les cheveux plus tard à refaire ce parcours, je mettais tout ça dans un article.

L'article "Petits réglages pour symfony sous Mac OSX" est un exemple concret de cela. Lors de ma formation en tant que développeur multimédia, j'apprenais le développement avec Symfony (pfiuuuu la v2 !) et on devait faire un réglage particulier. 5 ans après sa mise en ligne, je recevais encore des remerciements de personnes qui avaient rencontré le même problème !

2019–2021 : Relances ponctuelles
Le blog connaît ensuite une phase plus irrégulière. Quelques articles apparaissent, souvent liés à mes outils du quotidien. J'écris sur VSCode, sur Git, sur des pratiques de développement qui se sont imposées au fil des années. Le blog devient alors une sorte de miroir de mon environnement de travail. Je ne publie pas souvent, mais chaque article porte une trace claire de ce que j'utilise réellement. Je ne cherche pas à faire comme les autres : des articles à la mode. Certes, le blog ici présent est professionnel, ce n'est pas un journal personnel mais on y ressent toutefois mon évolution.

C'est une période où je ne cherche pas à maintenir un rythme de publication. Je laisse venir les sujets. Je préfère la qualité à la quantité, quitte à publier rarement. Ces articles isolés marquent pourtant des jalons importants de mon évolution professionnelle, puisqu'ils correspondent à une transition dans mes outils et mes méthodes. Cette période a été pour tout le monde incertaine... à cause du COVID. Étant confiné, nous avions du temps, j'avais du temps. Je me suis mis à la domotique et j'ai jeté sur le papier (numérique) mes pas à pas pour la mise en place de ma domotique avec MagicMirror2. Mais cela a été, comme pour beaucoup, une période de remise en question...

2022–2025 : Renaissance et diversification
À partir de 2022, et plus encore en 2024, une nouvelle dynamique s'installe. Le blog reprend vie avec des sujets qui dépassent le seul cadre du développement web. La domotique devient un fil rouge, avec Home Assistant et MagicMirror comme terrains d'exploration privilégiés. J'y raconte mes scénarios, mes tableaux de bord, mes expériences d'automatisation. Ces articles sont souvent plus narratifs, plus proches de mon quotidien, tout en restant très techniques.

Cette renaissance ne signifie pas un abandon de SPIP. Au contraire, SPIP reste présent comme une base solide, mais il cohabite désormais avec d'autres univers. Le blog devient le lieu où je croise mes compétences de développeur web avec mes envies d'expérimenter dans la maison connectée. On y sent une maturité nouvelle : je n'écris plus seulement pour garder une trace, mais aussi pour transmettre une vision, pour relier mes savoir-faire à des usages concrets qui parlent à d'autres.

Ce que j'ai appris en 15 ans de blogging technique

Au début, j'écrivais sans autre intention que de me créer une mémoire technique. Une astuce notée, un filtre documenté, et je savais que je pourrais y revenir sans perdre du temps.

Puis j'ai découvert que ces articles servaient aussi à d'autres.

Avec le temps, j'ai vu mes thématiques évoluer. D'abord centrées sur SPIP, elles se sont élargies vers le PHP, les outils de développement, puis la domotique et Home Assistant. Ce mouvement naturel a fait du blog un miroir de mes pratiques réelles. Il illustre le fait qu'un blog n'est pas figé : il vit, se transforme, et accompagne son auteur dans ses propres changements. Cette liberté d'évolution est ce qui l'a maintenu pertinent pour moi comme pour mes lecteurs.

L'écriture elle-même a été une école. Pour publier un article, même court, il faut organiser ses idées, clarifier un raisonnement, trouver des mots justes. Ce travail m'a appris à mieux expliquer, à vulgariser, à rendre mes pratiques compréhensibles. Cette compétence, acquise peu à peu, dépasse largement le cadre du blog et rejaillit sur ma manière de collaborer.

Il m'a aussi fallu apprivoiser l'irrégularité. Certaines années foisonnent d'articles, d'autres sont plus creuses. J'ai longtemps perçu ces silences comme des manques, avant de comprendre qu'ils faisaient partie du rythme. Un blog ne se mesure pas à la fréquence hebdomadaire ou mensuelle, mais à la continuité sur le long terme. Chaque retour d'écriture enrichit le fil, même après une pause.

Enfin, il y a l'impact professionnel. Le blog m'a donné une visibilité dans la communauté SPIP, renforcé mon image de développeur partageur, et laissé des traces concrètes de mon évolution. Mais le bénéfice le plus profond reste personnel : voir s'accumuler ces fragments de mémoire, année après année, et sentir que j'ai bâti une archive vivante de mon propre chemin.

Les défis rencontrés

Le premier défi a été la régularité. Publier sur un blog demande une constance qui se heurte très vite aux contraintes de la vie professionnelle et personnelle. J'ai connu des années de forte activité, où j'enchaînais les articles presque naturellement, porté par mes découvertes et mon enthousiasme. Mais j'ai aussi traversé des périodes beaucoup plus silencieuses, où l'envie d'écrire ne trouvait pas sa place dans un quotidien chargé. Le défi n'était pas seulement de trouver le temps, mais surtout de garder la flamme. À chaque pause, je me suis demandé si je reviendrais. Et chaque fois, j'ai fini par rouvrir l'éditeur et recommencer, preuve que l'écriture était devenue pour moi une habitude de fond, une discipline ancrée au-delà des aléas.

Un autre défi important a été l'adaptation aux évolutions techniques. Entre 2009 et 2025, les outils ont radicalement changé. J'ai commencé à écrire dans un contexte dominé par SPIP, le PHP artisanal et des feuilles de style construites à la main. Puis il a fallu intégrer Git, comprendre les frameworks, apprivoiser les environnements modernes, et plus récemment m'ouvrir à la domotique. Chaque saut technologique m'a obligé à réinventer mes sujets, à revoir ma façon de présenter les choses. Ce n'était pas seulement une mise à jour technique, mais aussi un effort d'écriture : comment expliquer autrement, avec des mots simples, des réalités devenues plus complexes.

Le blog a aussi rencontré ses limites en termes de visibilité. À une époque où les réseaux sociaux ont pris une place énorme, il peut sembler plus simple de poster une solution sur Twitter, Mastodon ou un forum que de rédiger un article complet. Tenir un blog suppose de résister à cette tendance, de garder l'ambition d'un espace autonome, qui ne se dilue pas dans le flux éphémère.

Un autre défi a été l'équilibre entre notes personnelles et contenu utile aux autres. Écrire pour soi est simple, mais écrire pour être lu impose un effort supplémentaire.

Il y a aussi le défi de la motivation, parfois émoussée après des années de publication.

Enfin, il y a le doute, toujours présent : est-ce que ce que j'écris est pertinent ?

Ce que je referais différemment

Avec le recul, il y a des choix que j'aurais pu affiner dès le départ. Par exemple, poser une ligne éditoriale plus claire entre mes notes brutes et mes articles construits.

J'aurais aussi aimé organiser plus rigoureusement les mots-clés et les catégories. Cela m'aurait permis d'exploiter pleinement l'indexation et de faciliter la navigation pour mes lecteurs. De petites décisions prises tôt peuvent avoir un grand impact sur la structure d'un blog.

Un autre point concerne la diversité des sujets. La domotique, par exemple, m'a séduit bien avant 2020 grâce aux contenus DIY et aux chaînes Youtube que je suivais. Pourtant, je n'ai trouvé un cadre concret pour l'appliquer qu'à partir de cette date, dans mon quotidien à la maison. J'aurais pu en parler plus tôt, ne serait-ce que sous forme de veille ou de découvertes, même si ce domaine reste pour moi personnel et en dehors de toute sphère professionnelle.

Il y a également la question du ton. J'aurais pu oser davantage un style personnel, en assumant la part de récit qui rend certains billets plus vivants. La technique pure est utile, mais les anecdotes et le contexte donnent souvent une valeur supplémentaire.

Enfin, si c'était à refaire, je travaillerais davantage sur la mise en valeur visuelle de mes articles. Non pas pour rechercher l'effet esthétique, mais pour accompagner la lecture, donner des points d'appui, et rendre mes contenus plus accessibles dans la durée.

Conclusion : pourquoi continuer en 2025

Écrire reste nécessaire.

Un billet, même simple, peut encore trouver son utilité. Un blog vieillit bien mieux que les réseaux sociaux. Et il conserve une force que l'instantané ne peut pas offrir.

Continuer en 2025, c'est d'abord prolonger une habitude. Mais c'est aussi réaffirmer un choix : celui d'un espace indépendant, où je décide du rythme, des sujets, du ton. Je ne cherche pas la course à l'audience, mais la cohérence d'un journal technique qui suit son auteur sur la durée. Un blog n'a pas besoin d'être bruyant pour être utile.

Chaque article publié est une brique ajoutée à un édifice qui se construit lentement. Certains articles restent des notes rapides, d'autres deviennent des repères durables. Et parfois, un billet écrit presque pour moi se révèle précieux pour d'autres, plusieurs années après. C'est ce décalage temporel qui fait la richesse du blogging. La valeur d'un article ne se mesure pas au nombre de vues le lendemain de sa parution, mais à sa capacité à rester utile dans le temps.

En 2025, j'ai envie de continuer pour plusieurs raisons. Parce que j'apprends toujours en écrivant. Parce que j'éprouve du plaisir à relire mes propres archives et à y voir mon chemin. Parce que je sais que ce blog n'est pas seulement mon aide-mémoire, mais aussi un pont tendu vers ceux qui passent par les mêmes questions techniques. Parce qu'il m'offre un espace de liberté, loin des formats contraints des plateformes. Parce que la régularité imparfaite de mes publications n'a jamais été un frein, mais plutôt la preuve qu'il accompagne ma vie, telle qu'elle est. Parce que la transmission fait partie de ma façon de travailler et de partager. Parce qu'un billet bien construit vit longtemps et continue de voyager tout seul. Parce que dans ce blog, je retrouve à la fois un miroir, une trace et un terrain d'expérimentation. Et parce que, tout simplement, je ne pourrais pas vraiment arrêter d'écrire, tant c'est devenu une habitude ancrée.

Je suis aussi une personne cérébrale. J'aurais mille sujets personnels à explorer, sur ma vision de la vie ou sur le développement personnel, sans prétendre donner de leçons, simplement pour exprimer ce que je suis. Mais j'ai choisi de garder ce site et sa rubrique blog dans une dimension technique et professionnelle. Peut-être qu'un jour, j'ouvrirai un autre espace, dédié au développement personnel. Ici n'est pas le lieu que j'ai retenu pour cela.

Écrire, encore et encore, même sans obligation, même sans calendrier fixe, reste une manière de relier mon présent à mon passé et d'ouvrir la porte à l'avenir.

Au plaisir de découvrir vos retours, vos histoires et d'échanger autour de ces parcours partagés.

Photo de Nick Morrison sur Unsplash

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)

Home Assistant : Routine le matin avant l'école

Teddy Payet — 2021-04-26T06:00:00Z

Grâce à l'utilisation des événements créés, je pouvais diffuser des messages le matin pour rythmer l'activité de mes enfants pour ne pas être en retard pour l'école. Nous nous réveillons à la même heure, prenons notre petit déjeuner ensemble. Parfois, on pouvait laisser le temps s'écouler tranquillement et ainsi être en retard. De ce fait, cette routine était la bienvenue.

Avant Home Assistant

Comme indiqué dans le second article de la série « Home Assistant, ma domotique open source », j'utilisais les événements dans un calendrier Google Agenda pour lancer des messages. J'utilisais le même principe pour la routine des enfants le matin pour leur autonomie. Ils aiment se préparer sans avoir leurs parents sur le dos. 😊 Je ne les blâmerais pas sur le sujet. Ils ont appris à être autonome très rapidement.

Configuration

Pour la configuration, là encore, tout est expliqué dans mon second article. Nous utilisons :

Google Agenda
Les Google Home Mini
Google Translate TTS
Les automations HA
Les scripts HA

Disclaimer

Pour des raisons de « vie privée », je donnerai un exemple de planning commun à un ensemble de parents et d'enfants. Le but n'est pas dire si oui ou non mes enfants ou les enfants en général ont CE programme. L'exemple pourrait très bien être un programme pour un adulte. Ce n'est qu'un scénario de mise en place d'automatisation.

Le principe de fonctionnement

En période scolaire, nos enfants se réveillent à 7h. Puis vont prendre leur petit-déjeuner.
À 7h30, ils doivent aller se préparer dans la salle de bain.
À 7h45, un petit rappel est lancé au cas où ce matin on aurait du mal.
À 8h00, c'est bientôt l'heure d'aller à l'école. Donc, on doit avoir fait les dernières tâches de la matinée.
À 8h10, il est temps de mettre ses chaussures.
À 8h15, on prend son sac à dos et on part à l'école.

Le déroulé est très simple comme vous pouvez le voir. Nous avons le principe suivant :

Nous sommes un jour d'école primaire
Nous ne sommes pas en période de vacances
Nous sommes à une heure précise de la matinée.

Nous avons tous nos critères pour exécuter la routine.

Les capteurs (sensors)

Nous allons créer à minima 2 capteurs :

Période scolaire : déterminer si nous sommes en vacances ou pas ;
Jour d'école primaire : dans notre académie, les enfants ont écoles le lundi, mardi, jeudi et vendredi.

Capteurs « Période scolaire »

Pour ce capteur, nous utiliserons 2 calendriers :

Jours fériés en France. Cf. https://www.data.gouv.fr/fr/datasets/jours-feries-en-france/
Vacances scolaires de la zone C. Cf. https://www.data.gouv.fr/fr/datasets/le-calendrier-scolaire-2019-2020-et-2020-2021-format-ical/
Vacances complémentaires, compléments. Ce calendrier est créé manuellement et permet d'indiquer des jours qui ne sont pas « officiels » dans l'un des 2 calendriers précédents. Exemple : un pont, une journée enfant malade, etc.

Vous pouvez ajouter très facilement des calendriers au format ics dans Google Agenda. Ce qui permettra à notre intégration HA de les retrouver. Cf. https://www.home-assistant.io/integrations/calendar.google/
Le calendrier des jours fériés en France sera nommé dans le présent article calendar.jours_feries_en_france. Et le calendrier des vacances scolaires calendar.calendrier_scolaire_zone_c.
Pour le calendrier de « vacances scolaires complémentaires », il suffira de créer au besoin un événement sur une journée entière (donc sans horaire) pour indication.

Dans notre fichier configuration.yaml, je dois indiquer où trouver mes sensors. Je choisis, comme pour les automatisations d'avoir tous mes sensors dans un répertoire :

sensor: !include_dir_list sensors/

Cela fait, je crée un fichier periode_scolaire.yaml dans le répertoire sensors/

platform: template sensors: periode_scolaire: friendly_name: 'Période scolaire' unique_id: sensor_periode_scolaire value_template: >- {%- if is_state('calendar.jours_feries_en_france', 'off') and is_state('calendar.vacances_scolaires_complements', 'off') and is_state('calendar.calendrier_scolaire_zone_c', 'off') -%} on {%- else -%} off {%- endif -%}

Ce capteur vérifie si les 2 calendriers ont la valeur off pour savoir à quelle période je me trouve. La valeur off pour ces calendriers signifient qu'il n'y a pas d'événements dans la journée. Donc, pas de vacances, pas de jours fériés, pas de pont du weekend, etc.
Nous serons bien en période scolaire.

Capteurs « jours d'école primaire »

Pour ce capteur ci, nous allons simplement indiquer que nous sommes l'un de ces jours :

Lundi
Mardi
Jeudi
Vendredi

Le mercredi, l'école primaire n'a pas classe le mercredi dans notre région.
Pour les enfants au collège, on pourrait tout simplement utiliser l'intégration de « workday ». https://www.home-assistant.io/integrations/workday/

Même principe que précédemment, nous créons un fichier jour_ecole_primaire.yaml dans le répertoire sensors/ :

platform: template sensors: jour_ecole_primaire: friendly_name: 'Jours école primaire' unique_id: sensor_jour_ecole_primaire value_template: >- {%- if (now().weekday() == 0) or (now().weekday() == 1) or (now().weekday() == 3) or (now().weekday() == 4) -%} on {%- else -%} off {%- endif -%}

Nous utilisons les fonctions now() et weekeday() qui retourneront, combinées, un chiffre correspondant au numéro de la semaine (Lundi -> 0, mardi -> 1, mercredi -> 2, jeudi -> 3, vendredi -> 4, samedi -> 5 et dimanche -> 6).
On pourrait écrire ce template de façon plus condensée. Mais j'ai voulu privilégier la lisibilité dans le présent article.

L'automatisation

Nous pourrions créer une automatisation par heure de déclenchement… Ça se fait… Mais plus nous avons d'heure de déclenchement, plus nous auront de fichiers à créer et à maintenir.
Nous allons donc créer un fichier d'automatisation et utiliser la méthode choose de HA. https://www.home-assistant.io/docs/scripts/#choose-a-group-of-actions

Voici le code que j'ai utilisé :

id: automation_ecole_routines alias: Routines en période scolaire. trigger: platform: time_pattern hours: '*' minutes: '*' condition: - condition: and conditions: - condition: state entity_id: sensor.periode_scolaire state: 'on' action: - choose: ############################## ############################## ## 07:05 - conditions: - condition: and conditions: - condition: template value_template: "{{ (now().timestamp() | timestamp_custom('%H:%M')) == '07:05' }}" - condition: state entity_id: sensor.jour_ecole_primaire state: 'on' sequence: - service: rest_command.mm_showalert data_template: titre: 'Attention
' texte: 'Il est l'heure de se réveiller les enfants. Il faut se réveiller.' duree: "120000" - service: script.media_player_notify_all data_template: message: > {{ [ "Il est l'heure de se réveiller les enfants. Il faut se réveiller.", "Il est l'or! L'or de se réveiller! Il est l'or", "Bonjour mes amours, il est temps de se lever.", "Bien grandir, ça commence dès le matin !" ] | random }} volume: 0.6 ############################## ############################## ## 07:35 - conditions: - condition: and conditions: - condition: template value_template: "{{ (now().timestamp() | timestamp_custom('%H:%M')) == '07:35' }}" - condition: state entity_id: sensor.jour_ecole_primaire state: 'on' sequence: - service: rest_command.mm_showalert data_template: titre: 'Attention
' texte: 'Les enfants, il faut aller se préparer maintenant, brossage de dents et des cheveux.' duree: "120000" - service: script.media_player_notify_all data_template: message: > {{ [ "Les enfants, il faut aller se préparer maintenant, brossage de dents et des cheveux.", "L'heure de se pouponner est arrivée.", "Il est temps de se revêtir de son plus bel apparat!", "Le soin à son hygiène et son apparence sont très importants! Direction la salle de bain." ] | random }} volume: 0.6 ############################## ############################## ## 07:45 - conditions: - condition: and conditions: - condition: template value_template: "{{ (now().timestamp() | timestamp_custom('%H:%M')) == '07:45' }}" - condition: state entity_id: sensor.jour_ecole_primaire state: 'on' sequence: - service: rest_command.mm_showalert data_template: titre: 'Attention
' texte: '1er rappel, les enfants, il faut aller se préparer maintenant, brossage de dents et des cheveux.' duree: "120000" - service: script.media_player_notify_all data_template: message: > {{ [ "1er rappel, les enfants, il faut aller se préparer maintenant, brossage de dents et des cheveux.", "1er rappel, l'heure de se pouponner est arrivée.", "1er rappel, il est temps de se revêtir de son plus bel apparat!", "1er rappel, le soin à son hygiène et son apparence sont très importants! Direction la salle de bain." ] | random }} volume: 0.6 ############################## ############################## ## 08:00 - conditions: - condition: and conditions: - condition: template value_template: "{{ (now().timestamp() | timestamp_custom('%H:%M')) == '08:00' }}" - condition: state entity_id: sensor.jour_ecole_primaire state: 'on' sequence: - service: rest_command.mm_showalert data_template: titre: 'Attention
' texte: "Dernière ligne droite avant l'école, donc tâches ménagères, bisous et câlins." duree: "120000" - service: script.media_player_notify_all data_template: message: > {{ [ "Dernière ligne droite avant l'école, donc tâches ménagères, bisous et câlins.", "Bientôt le départ pour l'école, attenons-nous à nos dernières tâches.", "Le sourire aux lèvres, tenons-nous prêt pour le départ à l'école.", "La vie a la couleur que tu lui donnes! Choisie bien la couleur pour que chaque jour soit un kif." ] | random }} volume: 0.6 ############################## ############################## ## 08:10 - conditions: - condition: and conditions: - condition: template value_template: "{{ (now().timestamp() | timestamp_custom('%H:%M')) == '08:10' }}" - condition: state entity_id: sensor.jour_ecole_primaire state: 'on' sequence: - service: rest_command.mm_showalert data_template: titre: 'Attention
' texte: 'Il est 8h10, on met les chaussures. Hop hop hop. Dans la joie et la bonne humeur!' duree: "120000" - service: script.media_player_notify_all data_template: message: > {{ [ "Il est 8h10, on met les chaussures. Hop hop hop. Dans la joie et la bonne humeur!", "Dernière ligne droite avant le départ pour ce lieu de savoir!", "Mettons nos derniers accessoires, C'est bientôt l'heure du départ." ] | random }} volume: 0.6 ############################## ############################## ## 08:15 - conditions: - condition: and conditions: - condition: template value_template: "{{ (now().timestamp() | timestamp_custom('%H:%M')) == '08:15' }}" - condition: state entity_id: sensor.jour_ecole_primaire state: 'on' sequence: - service: rest_command.mm_showalert data_template: titre: 'Attention
' texte: 'Il est 8h15, on prend son sac à dos et on commence sa journée!' duree: "120000" - service: script.media_player_notify_all data_template: message: > {{ [ "Il est 8h15, on prend son sac à dos et on commence sa journée!", "C'est l'heure du départ des troupes pour l'école! Soyons fort!", "Ce n'est pas parce que nous nous quittons maintenant, que nous ne nous retrouverons pas mieux ce soir." ] | random }} volume: 0.6

Je n'explique pas plus ce code car tout a été dit auparavant. Sauf un petit point, un bonus : le service rest_command. Vous avez pu voir que j'ai un Magic Mirror à la maison. Je l'utilise pour afficher un message selon l'alerte.

RESTful command

Il n'y a rien de complexe ici. J'utilise l'intégration HA des rest_command. Cf. https://www.home-assistant.io/integrations/rest_command/

Voici mon code inséré dans configuration.yaml :

rest_command: mm_showalert: url: http://192.168.0.217:8080/api/module/alert/showalert method: POST headers: accept: 'application/json, text/html' user-agent: 'Mozilla/5.0 {{ useragent }}' payload: '{"title": "{{titre}}", "message": "{{texte}}","timer": {{ duree }} }' content_type: 'application/json; charset=utf-8'

J'ai installé sur le MagicMirror le module « MMM Remote Control » pour bénéficier de l'API https://github.com/Jopyth/MMM-Remote-Control/blob/master/API/README.md#basic-examples-for-showing-an-alert-on-the-screen

Je n'offre pas de SAV sur le sujet ☺️ C'est juste un bonus pour cette automatisation.

Pour aller plus loin

On pourrait aller beaucoup plus loin en prenant en compte par exemple des capteurs :

Est-ce que l'humidité a augmenté dans la salle de bain ? Si oui, c'est qu'elle est en cours d'utilisation, donc, pas la peine de lancer le rappel.
Est-ce que le capteur de mouvement a perçu une présence dans la salle à manger ou la cuisine ?
Est-ce qu'il y a encore des personnes à la maison ? Détection d'un téléphone portable sur le réseau ? Non, alors tout le monde est parti.

La seule limite à ces automatisations est notre imagination. Les capteurs sont accessibles financièrement et facilement intégrable à HA. Il faut juste prendre le temps nécessaire pour l'acquérir et l'intégrer. 😁

Voilà. Comme d'habitude, je suis preneur de vos points d'améliorations, de votre vision des choses.

Dans la même série

Présentation

#1 Messages envoyés sur les GHM
- #1.1 Routine le matin avant l'école
- #1.2 Routine du soir
- #1.3 L'école à la maison
#2 Éteindre les lumières
#3 Baisser le volume des GHM
#4 Tâches ménagères
#5 Habit Tracker

Photo by Deleece Cook on Unsplash

Teddy Payet

20 ans de blogging technique : ce que j'ai appris

Un chemin commencé en 2009

Les grandes périodes de mon blog

Ce que j'ai appris en 15 ans de blogging technique

Les défis rencontrés

Ce que je referais différemment

Conclusion : pourquoi continuer en 2025

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 ?

Home Assistant : Routine le matin avant l'école

Avant Home Assistant

Configuration

Disclaimer

Le principe de fonctionnement

Les capteurs (sensors)

Capteurs « Période scolaire »

Capteurs « jours d'école primaire »

L'automatisation

Attention

Attention

Attention

Attention

Attention

Attention

RESTful command

Pour aller plus loin

Dans la même série

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

Méthode retenue : automation + `navigate` service