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)

MagicMirror², configuration scriptée, 2ème partie

Teddy Payet — 2020-04-14T22:55:42Z

Comme vous le savez tous, nous sommes en confinement depuis mi-mars. Pour m'occuper un peu en chômage partiel, en plus de ma vie de famille, je me suis inscris à une groupe d'entraide sur le MagicMirror sur Facebook. J'ai eu l'agréable surprise de voir qu'un article de mon blog était cité. Merci de la confiance de ces utilisateurs !
Après quelques échanges, j'ai proposé d'expliquer plus en détail mon installation scriptée et notamment ce à quoi correspond mes différents principaux scripts.

Tout a été déposé sur github (vous pourrez trouver le lien en bas de l'article). Je reprends ici plus ou moins le contenu du fichier Readme.

Cet article est un exemple d'automatisation de la maintenance de mon installation de MagicMirror. Le dépôt github a pour but de montrer la possibilité d'automatiser la maintenance d'une installation d'un MagicMirror.

Introduction

Le dépôt s'appelle mm_config_automate. Son existence n'est que pédagogique. Il n'est en aucun cas un module de MagicMirror.

De plus, je ne suis pas responsable d'une altération de vos données. Il vous faudra tester et adapter chaque script pour correspondre à VOS attentes.

Liste des scripts

L'ensemble des scripts sont en bash. Ils restent simples à comprendre et à prendre en main avec un peu de patience et de lecture. Voici la liste des scripts :

first_install.sh
mm_reset.sh
mm_update.sh
update_files_config.sh
disk_usage.sh

first_install.sh

Ce script permet d'installer l'ensemble des éléments de base pour qu'un MagicMirror puisse fonctionner. Il est à lancer sur une installation toute belle, toute neuve d'un Raspberry Pi 3. Je n'ai pas testé sur un Raspberry Pi 4 pour le moment. Il prend en compte un Raspbian basé sur un Debian Buster (10) mis à disposition des utilisateurs en février 2020.

Il fera dans l'ordre :

sudo apt update -y : Récupère la liste des mises à jour disponibles
sudo apt upgrade -y : Installe quelques mises à jour, ne supprime pas les packages
sudo apt autoremove -y : Supprime tous les anciens paquets qui ne sont plus nécessaires
sudo apt clean -y : Cette commande de terminal libère de l'espace disque en nettoyant les fichiers .deb téléchargés du référentiel local.

Puis :

On active le son par le HDMI ;
Forcer le HDMI ;
Forcer l'affichage vertical de l'écran ;
Enlever des programmes inutiles ;
Installation de quelques packages ;
Installation de Nodejs et NPM selon la méthode indiquée ici : https://github.com/audstanley/NodeJs-Raspberry-Pi
Ajouter les binaires de node dans le PATH ;
Installation de PM2 ;
Enregistrer les variables d'environnement (le home de MagicMirror, ainsi que de PM2) ;
Création du fichier mm.sh dans /home/pi/ ;
Exécution du script d'installation du MagicMirror ;
Sauvegarder les réglages de pm2 et lancement des scripts au démarrage ;

Et enfin, on enregistre le contenu du fichier crontab.txt dans le crontab de l'utilisateur en cours.

mm_reset.sh

Ce script installe MagicMirror à partir du dépôt github dudit projet. Il s'appelle "mm_reset" au lieu de "mm_install" car il supprime le répertoire /home/pi/MagicMirror/ s'il existe. Donc, il faut faire attention à ce point si vous désirez garder une précédente installation.

A son tour, ce script va lancer une série de commandes :

Arrêt de MM grâce à pm2 stop mm ;
Effacer le répertoire de MagicMirror si existant ;
Récupération du dépôt de MagicMirror ;
Passer sur la branche develop de MagicMirror ;
Création des liens symboliques dans MM (custom.css et config.js) ;
Installation des dépendances de MM grâce à npm ;
Lancement du script d'update des modules de MM (cf. update_files_config.sh) ;
Relancer MM sur pm2.

Liens symboliques

Dans le script mm_reset.sh, il est présumé que le fichier "config.js" et le fichier de personnalisation de css vitaux à MagicMirror soient présents dans votre répertoire /home/pi/mm_config_automate/. Un lien symbolique dans /home/pi/MagicMirror/css/ et /home/pi/MagicMirror/config/ sera fait pointant vers votre répertoire mm_config_automate.

MagicMirror n'y verra que du feu !

mm_update.sh

Ce script est plus rapide. Dans ce dépôt d'exemple, il n'est pas utilisé dans le crontab. Il est à utiliser manuellement lorsque MM doit être mis à jour.

Il arrête MM par pm2, puis va dans le répertoire de MagicMirror. A partir de là, le dépôt git est mis à jour avec les derniers fichiers. Une installation et une mise à jour des packages npm sont lancées.

Cela fait, on relance MM sur pm2.

update_files_config.sh

Ce script bash est le nerf de la guerre. Crontab appellera dans notre exemple le fichier update_files_config.sh tous les jours à 00h15.

Ce script contient 2 fonctions clés :

import_module ;
delete_modules.

Après l'utilisation de ces fonctions, une boucle est lancée pour vérifier l'existence du module MMM-AlarmClock. Ce dernier peut utiliser des fichiers mp3 comme sonnerie d'alarme.

Si vous désirez ajouter des fichiers mp3 à votre convenance, il vous suffira de les copier dans le répertoire sounds de votre dépôt "mm_config_automate". Automatiquement, tous les soirs (selon le crontab mis en place), chaque fichier mp3 présent sera copié dans /home/pi/MagicMirror/modules/MMM-AlarmClock/sounds/. Vous n'aurez plus à vous soucier d'autres choses que sa bonne utilisation dans votre fichier config.js

update_files_config.sh : fonction import_module

Cette fonction bash attend un paramètre : l'url vers le dépôt git du module que vous désirez installer sur votre MagicMirror.

Par exemple, si vous désirez utiliser le module de pages de MM, vous devez indiquer dans le fichier update_files_config.sh la commande suivante :

import_module https://github.com/edward-shen/MMM-pages.git

Elle ira dans le répertoire /home/pi/MagicMirror/modules/, vérifiera si le module existe déjà (en gros l'existence du répertoire "MMM-pages") ou pas. S'il n'existe pas, elle clonera le répertoire. Puis :

Accéder au répertoire du module ;
Si un fichier package.json existe, l'installation des packages npm est lancée.

Il faudra utiliser cette fonction autant de fois que de modules désirés. Vous trouverez des exemples dans ledit fichier.
Cerise sur le gateau, si le module existe déjà, il le mettra à jour avec les derniers fichiers provenant du dépôt que vous avez indiqué en paramètre.

update_files_config.sh : fonction delete_modules

Cette fonction se lance après l'ensemble des appels à import_module. Elle a pour but de supprimer les modules présents dans /home/pi/MagicMirror/modules/ devenus obsolètes.

Comme vous le savez, pour utiliser un module dans MagicMirror, nous devons l'avoir téléchargé d'une part dans /home/pi/MagicMirror/modules/ mais d'autre part l'avoir indiqué dans notre fichier config.js.

Si le répertoire /home/pi/MagicMirror/modules/nom_repertoire/ n'est pas indiqué dans ce fichier, le répertoire sera considéré comme obsolète. Donc, qu'il peut être supprimé. La présente fonction vérifiera chaque répertoire dans modules/ à l'exclusion de :

default/
node_modules/

Cela préservera l'espace disque de votre Raspberry Pi et évitera des erreurs dans votre MagicMirror.

disk_usage.sh

Ce script permet de savoir le pourcentage d'utilisation d'espace disque. Dans le présent exemple, si le taux d'utilisation arrive à 90% de sa capacité, un email est envoyé (je vous laisse le soin de configurer le serveur d'envoi d'emails).

Il faut savoir que pm2 écrit beaucoup d'information dans les logs (cela dépend surtout des applications lancées sous pm2 mais c'est un autre sujet). En prenant cela en compte, si le taux d'utilisation excède les 90%, le script lance en premier lieu la commande pm2 flush pour vider l'ensemble des fichiers logs de pm2. Puis vérifie à nouveau le taux de remplissage. Si la commande n'a pas changé la donne, l'email est envoyé.

crontab.txt

Ce petit bout de fichier vous permet d'indiquer l'heure à laquelle vos routines doivent être mises en place.

Dans le présent exemple, voici les routines :

A 0h00 : On vérifie d'abord l'espace disque
A 0h05 : On met à jour les fichiers de mm_config_automate
A 0h10 : On importe le contenu du fichier crontab.txt dans le crontab à 00h10
A 0h15 : On peut maintenant lancer les scripts de routine (update_files_config.sh)
A 0h20 : On relance MagicMirror pour prendre en compte la configuration à jour.
Tous les mois, on redémarre le Raspberry Pi

Si vous êtes parents et/ou assujetti à des périodes de vacances et un planning différents durant ces périodes, il est possible de mettre en place un fichier de config dédié à cette période.

Dans notre exemple, le contenu de config.js et config_vac.js sont identiques. Le but est d'illustrer l'existence des fichiers selon la période. En ayant en tête les dates de vacances qui vous intéressent, vous pouvez ajouter une ligne dédiée dans crontab pour que le lien symbolique de /home/pi/MagicMirror/config/config.js pointe vers le fichier /home/pi/mm_config_automate/config_vac.js au lieu de /home/pi/mm_config_automate/config.js. Le jour où vous devez revenir au travail (donc la fin de votre période de vacances) à 00h30, il suffira de remettre le lien symbolique vers /home/pi/mm_config_automate/config.js

Exemple pour les vacances de l'Ascension de la zone C :

############### # Vacances Ascension : 20 mai 30 0 20 5 0 cd /home/pi/MagicMirror/config/; rm -rf config.js; ln -s /home/pi/mm_config_automate/config_vac.js config.js; pm2 restart mm # Rentrée : 25 mai 30 0 25 5 * cd /home/pi/MagicMirror/config/; rm -rf config.js; ln -s /home/pi/mm_config_automate/config.js config.js; pm2 restart mm

Voilà. A vous de prendre en main ce projet en le copiant dans un dépôt personnel privé et de le faire vivre.

Le projet sur github

Comme indiqué en début de cet article, les différents fichiers ont été déposé sur github. Ils ont pour but de vous aider à mettre en place votre automatisation :
https://github.com/Ybbet/mm_config_automate

Attention de ne pas mettre le projet en public si vous l'utiliser sur VOTRE installation. Préservez votre vie... privée.

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 ?

MagicMirror², configuration scriptée, 2ème partie

Introduction

Liste des scripts

first_install.sh

mm_reset.sh

mm_update.sh

update_files_config.sh

update_files_config.sh : fonction import_module

update_files_config.sh : fonction delete_modules

disk_usage.sh

crontab.txt

Le projet sur github

A lire aussi

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

Méthode retenue : automation + `navigate` service