Magic Mirror sur Raspberry Pi : Guide d’Installation Complète

Construire un Magic Mirror est l’un des projets les plus populaires sur Raspberry Pi, mais pas nécessairement le mieux expliqué. Après l’avoir essayé moi-même, j’ai remarqué que la documentation officielle est un peu compliquée à suivre pour les débutants et les autres guides ne sont pas meilleurs. C’est pourquoi j’ai décidé d’écrire ce guide d’installation pour créer un Magic Mirror. Si vous êtes intéressé par ce projet et avez besoin de plus d’informations, continuez à lire, vous êtes au bon endroit.

Dans ce guide, je ferai une rapide introduction sur le projet Magic Mirror. Puis, je vous proposerai la meilleure méthode d’installation (il en existe plusieurs). Je prendrai le temps d’expliquer la configuration qui n’est pas spécialement intuitive (comme le réglage de certaines choses et l’ajout de nouveaux modules amusants). Je vous donnerai, enfin, quelques conseils pour optimiser votre configuration générale.

Vous pourrez utiliser ce guide à votre guise, et sauter des parties si vous les connaissez déjà ou si vous cherchez quelque chose de spécifique. Commençons !

Au passage, si vous vous sentez dépassé dès que Python est nécessaire pour un projet, je vous conseille de télécharger mon e-book « Maîtrisez Python on Raspberry Pi« . Il vous guidera pas à pas pour apprendre les concepts essentiels (et uniquement ceux-là) pour réaliser n’importe quel projet à l’avenir. Un Raspberry Pi sans Python, c’est comme une voiture sans moteur, vous ratez le plus intéressant ;-).
Profitez de 10 % de réduction en le téléchargeant dès aujourd’hui !

Introduction au projet Magic Mirror

Comme jouer à des jeux classiques sur Retropie ou regarder Netflix avec Kodi, construire un Magic Mirror fait partie de ces projets qui ont contribué à populariser le Raspberry Pi. C’est, à la fois, une belle réalisation, une fois terminée, et parallèlement, quelque chose d’encore méconnu. C’est pour cela qu’il a suscité l’intérêt de nombreux makers.

Michael Teeuw est le créateur d’origine du projet Magic Mirror. Vous pouvez trouver de nombreuses ressources à son sujet son site web. Comme nous le verrons plus tard, en construire un n’est pas aussi compliqué qu’on pourrait le penser, mais l’idée était vraiment innovante à l’époque.

Bref, en résumé, un « magic » mirror, c’est comme n’importe quel miroir, mais vous y ajouterez des données complémentaires, comme une horloge, votre calendrier ou la météo des prochains jours. C’est « magique » car c’est un mix entre un tableau de bord de télévision et un miroir. Il est connecté à de nombreuses API, ce qui vous permettra d’afficher tout ce qui vous intéresse. Rien à voir avec celui de Harry Potter 🙂

Je suis sûr que vous savez déjà à quoi il ressemble si vous lisez ces lignes, alors passons directement à la partie importante de cet article.

Installer le logiciel Magic Mirror sur un Raspberry Pi

Comment construire un cadre de Magic Mirror

Si vous envisagez de construire un Magic Mirror et de l’installer sur l’un de vos murs à la maison, la méthode classique consiste à construire un cadre personnalisé. Ensuite, il vous faudra placer une télévision et un Raspberry Pi derrière un miroir sans tain adapté.

Pour être clair, ce guide ne porte pas sur ce sujet. Mais je peux vous aider avec une superbe vidéo vous montrant toutes les étapes pour construire un Magic Mirror avec un cadre en bois :

Si, comme moi, vous n’êtes pas un grand bricoleur, vous pouvez toujours utiliser le logiciel Magic Mirror comme un « tableau de bord magique », sans le cadre et le miroir. Par exemple, cela pourrait être une excellente utilisation du RasPad 3 testé dans cet article. Vous obtiendrez le même résultat d’une manière beaucoup plus simple.

L’objectif principal de cet article est de vous donner toutes les astuces pour gagner du temps avec la partie « installation du logiciel », c’est ce que nous verrons plus en détail.

Configurer Magic Mirror sur votre Raspberry Pi

Plusieurs méthodes d’installer le Magic Mirror sur Raspberry Pi

Sur le guide d’installation officiel du Magic Mirror, vous trouverez plusieurs méthodes pour le configurer :

• Magic Mirror OS : Cela peut sembler la façon la plus simple de procéder (flasher, et c’est fait), mais ce n’est pas la méthode que je recommande.
• Docker image : Docker est souvent une excellente solution pour installer de nouveaux services, car il conserve tout dans un conteneur sûr, protégeant l’application et votre système. Encore une fois, ce n’est toujours pas ma méthode préférée pour le Magic Mirror.
• Scripts d’installation automatiques : Il s’agit généralement de méthodes « faciles » mais pour lesquelles vous n’avez aucun contrôle sur ce qui sera installé.

Ce sont toutes des méthodes qui peuvent sembler simples, cependant je trouve qu’une fois installé, la maintenance est plus compliquée. Si vous voulez juste faire une vérification rapide pour voir comment il fonctionne sur un modèle ou un écran spécifique de Raspberry Pi, allez-y, prenez l’image Magic Mirror OS et flashez-la sur votre carte SD. Cela fonctionnera directement.

Mais, si vous voulez une meilleure méthode globale sur le long terme, continuez à lire ce guide.

Installation de Magic Mirror

Dans l’ensemble, la méthode que je conseille pour installer Magic Mirror sur un Raspberry Pi est l’installation manuelle. Après avoir installé NodeJS, vous pouvez cloner le dépôt GitHub et installer l’application avec npm.

Voici les étapes nécessaires pour installer Magic Mirror sur votre Raspberry Pi :

• Installer Raspberry Pi OS (avec bureau). La version Lite ne suffira pas.
  Cela fonctionne sans doute de la même façon avec d’autres distributions, mais je n’ai pas testé.
  Lire mon tutorial d’installation de Raspberry Pi OS ici si besoin.
• Télécharger et installer NodeJS :
  curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs
  Chaque nouvelle version de MagicMirror peut avoir des prérequis différents, je vous conseille de vérifier pour savoir quelle version de NodeJS installer.
• Quand c’est fait, dupliquer le dépôt GitHub pour télécharger le code source du Magic Mirror sur votre appareil :
  git clone https://github.com/MichMich/MagicMirror
cd MagicMirror
• Enfin, installer l’application avec la ligne de commande :
  npm install
• Copier l’exemple de fichier de configuration :
  cp config/config.js.sample config/config.js
  Je vais expliquer tout ce qui concerne ce fichier dans la section suivante.
• Et démarrer l’application :
  npm run start

C’est tout. Vous devriez obtenir l’affichage par défaut du Magic Mirror sur votre écran (date, météo, actualités et un compliment aléatoire).

Vous êtes maintenant prêt à passer à la partie suivante. Nous pourrons y voir comment configurer et personnaliser cet écran (et réparer le widget météo).

Si les commandes Linux ce n’est pas trop votre truc, n’hésitez pas à jeter un œil à cet article qui vous explique les commandes qu’il faut absolument connaître. Je vous donne aussi une antisèche à télécharger pour les avoir toujours sous la main !

Guide de configuration de Magic Mirror

Comment quitter l’écran du Magic Mirror

Avant d’aller plus loin, il y a une chose que vous devez savoir : comment fermer l’application Magic Mirror 🙂
Par défaut, elle s’ouvre en plein écran, et vous n’avez aucun moyen de la quitter.

Par conséquent, pour quitter l’écran Magic Mirror, il vous faudra appuyer sur la touche « ALT » de votre clavier ce qui permettra au menu supérieur de s’afficher. Ensuite, allez dans File > Quit pour fermer l’application (ou utilisez CTRL+Q).

Si vous voulez configurer le Magic Mirror directement à partir du Raspberry Pi, vous devrez tout fermer avant d’aller plus loin.

Note : Le raccourci « ALT » ne semble pas exister sur Bookworm, il faudra donc utiliser la touche Windows pour fermer l’application.

Comment fonctionne la configuration du Magic Mirror

La configuration du Magic Mirror est celle que vous avez créée pendant l’installation. L’emplacement du fichier est sans doute quelque chose comme : « /home/$USER/MagicMirror/config/config.js ». Ouvrez-le avec votre éditeur préféré (nano par exemple), et jetez un coup d’œil au contenu du fichier.

La structure du fichier de configuration

La partie supérieure du fichier de configuration comprend les variables générales de votre installation : Adresse IP, port, langue et local, format de l’heure, etc. Ces paramètres seront utilisés par tous les widgets sur votre écran, alors prenez le temps de les modifier si nécessaire. Vous pourrez, notamment, régler le « timeformat » sur 12 si vous le souhaitez et changer la langue en « fr », « de » ou celle que vous préférez.

Ensuite, il y a un grand bloc avec tous les widgets listés. Ces widgets sont appelés « modules » dans la configuration du Magic Mirror :

La plupart de ces modules ont un nom et une position définis. Ainsi, sur cette capture d’écran, nous pouvons voir que, par défaut, un module « horloge » est configuré pour être affiché en haut à gauche de l’écran.

Certains modules inclus dans votre configuration n’ont que le paramètre position pour indiquer où les afficher à l’écran. Cependant, d’autres ont beaucoup plus d’options, comme le calendrier, qui pourra récupérer une URL pour synchroniser les dates de vos prochaines vacances.

Un exemple simple : modifier votre fil d’actualités

Prenons un exemple pour voir comment cela fonctionne. En bas de l’écran, vous avez un fil d’actualité, reprenant les derniers articles du New York Times, et vous montrant le titre et la date de publication. Mais, peut-être êtes-vous plus intéressé par l’actualité des Raspberry Pi. Pour modifier les options des modules et afficher les derniers tutoriels de votre site Web préféré vous devrez :

• Ouvrez le fichier de configuration, avec n’importe quel éditeur, entre autres :
  nano /home/$USER/MagicMirror/config/config.js
• Trouvez le module de flux d’informations :
• Changez le titre et l’URL du flux, avec quelque chose comme :
• Redémarrez votre Magic Mirror service:
  cd /home/$USER/MagicMirror
npm run start

C’est tout, vous aurez, dès lors, des nouvelles beaucoup plus intéressantes sur votre écran 🙂

J’espère que vous comprenez mieux maintenant comment vous pouvez, facilement, modifier le fichier de configuration par défaut et, ainsi, l’adapter à vos besoins et à vos préférences. Vous pourrez modifier les paramètres, supprimer les modules inutiles ou changer la position des modules, comme vous le souhaitez.

Créer régulièrement des copies du fichier de configuration comme sauvegarde pourra être une bonne idée, au cas où vous auriez modifié une information involontairement en effectuant ces changements.

Accès à distance au Magic Mirror

Comme pour la plupart des projets, je trouve plus simple d’effectuer les changements de ce fichier de configuration depuis mon ordinateur (via SSH). D’ailleurs, il existe un autre moyen de voir les résultats de vos changements, via votre navigateur au lieu de l’écran du Raspberry Pi. Si, comme moi, vous avez un double écran, vous pourrez éditer la configuration sur l’un et voir le résultat sur l’autre.

Si vous souhaitez faire la même chose, voici comment procéder :

• Ouvrir le fichier de configuration :
  nano /home/$USER/MagicMirror/config/config.js
• Modifier la ligne « address ». Vous pouvez soit mettre l’adresse IP actuelle de votre Raspberry Pi, soit « 0.0.0.0 » si vous voulez que cela fonctionne même si le Raspberry Pi passe à une autre IP sur votre réseau. Dans mon cas, je préfère la deuxième option, car je n’utilise pas d’adresse IP statique :
  address: "0.0.0.0"
• Le port par défaut est 8080. Vous n’aurez besoin de le modifier que si un service l’utilise déjà. Si votre installation Raspberry Pi est dédiée à ce projet, vous pouvez la conserver comme ceci.
• Ensuite, vous devez également modifier la ligne « ipWhitelist » pour autoriser votre ordinateur à accéder à distance. Même chose ici, si votre ordinateur a une IP statique, il suffit de l’ajouter à la liste. Sinon, autorisez toutes les adresses IP.
  Avec un IP statique : ipWhitelist: ["192.168.1.10", "127.0.0.1", "::ffff:127.0.0.1", "::1"]
  Tout autoriser : ipWhitelist: []

Cela devrait suffire pour l’instant. Vous pouvez activer HTTPS, si vous voulez, mais vous aurez besoin d’un certificat. Ce n’est pas nécessaire si c’est juste pour voir vos changements en temps réel.

Redémarrez l’application Magic Mirror, et vérifiez que vous pouvez y accéder depuis votre ordinateur, en ouvrant l’URL http://VOTRE_IP:8080 dans votre navigateur. Si vous ne savez pas comment trouver l’adresse IP du Raspberry Pi, cliquez sur ce lien pour lire mon tutoriel sur le sujet.

C’est plus pratique, et cela peut aussi aider à déboguer la plupart des problèmes, comme les erreurs JavaScript, en utilisant les outils de développement de votre navigateur.

Correction du widget météo sur votre Magic Mirror

Par défaut, un widget météo est activé en haut à droite de l’écran de votre Magic Mirror, mais il ne fonctionne pas. Le message « Loading… » s’affiche en permanence. Voici comment le réparer :

• Allez sur OpenWeatherMap et créer un compte.
• Quand vous êtes authentifié, cliquez sur « API keys » et générer une nouvelle clé API pour votre projet Magic Mirror.
• Vous obtiendrez une chaîne de caractères aléatoire. Copiez-la.
• Ouvrez le fichier de configuration et trouvez cette partie :
  
  Mettez votre clé API dans les deux emplacements. Le premier est pour le temps actuel, le second pour les prévisions météorologiques.
• Redémarrez votre application Magic Mirror pour appliquer les changements.

La météo de New York devrait maintenant s’afficher sur votre écran. Vous pourrez afficher la météo d’un autre lieu en modifiant les deux champs « location » et « locationID » pour les deux modules. Vous pouvez trouver les valeurs à définir en téléchargeant et en extrayant ce fichier.

Il s’agit d’un gros fichier contenant toutes les villes du monde, il est donc préférable d’effectuer cette opération dans un terminal ou via SSH :

• Téléchargez le fichier sur le Raspberry Pi :
  wget https://bulk.openweathermap.org/sample/city.list.json.gz
• Extrayez le fichier :
  gunzip city.list.json.gz
• Utilisez grep pour trouver rapidement l’ID correspondant, cela devrait fonctionner :
  grep "Paris" -B1 -A2 city.list.json
• Vous obtiendrez très probablement plusieurs résultats, c’est pourquoi, personnellement, je garde deux lignes sous le nom de la ville, pour obtenir le champ de l’état et du pays.
  Vous pouvez même l’augmenter si vous souhaitez obtenir la longitude et la latitude.

Choisissez l’ID correspondant à votre ville et modifiez la valeur dans le fichier de configuration. Après avoir redémarré le Magic Mirror, il devrait être mis à jour avec les prévisions météorologiques correctes.

Changez la position des widgets sur votre Magic Mirror

Comme vous l’avez vu, chaque module est configuré pour être affiché dans un emplacement spécifique. Néanmoins, il peut être compliqué de comprendre la logique derrière cela. Voici donc les emplacements possibles que vous pourrez utiliser :

• top_bar et bottom_bar : pleine largeur en haut et en bas.
• top_left, top_center et top_right : juste au-dessous du top bar, avec 3 colonnes.
• bottom_left, bottom_center et bottom_right: juste au-dessus du bottom bar, avec 3 colonnes.
• upper_third, middle_center et lower_third : ce sont les trois régions au milieu de l’écran

Si ce n’est pas assez clair, vous trouverez une excellente explication visuelle sur les forums du Magic Mirror (ici, en anglais).

Démarrage automatique de Magic Mirror

Si vous avez l’intention d’utiliser votre Magic Mirror comme un appareil autonome, en l’enfermant, notamment, dans un cadre en bois avec une vitre sans tain… Vous aurez probablement besoin de le configurer de façon à ce qu’il démarre automatiquement.

Pour ce faire, le moyen le plus simple que j’ai trouvé est d’utiliser pm2. PM2 est un gestionnaire de processus pour les applications NodeJS. C’est un peu comme les commandes systemd ou service auxquelles vous pouvez être habitué sous Linux, mais pour les processus NodeJS. Voici comment l’utiliser :

• Installez PM2 avec la commande :
  sudo npm install -g pm2
• Configurez PM2 pour qu’il démarre automatiquement au démarrage :
  pm2 startup
• Créez un script pour lancer l’application Magic Mirror :
  nano /home/$USER/mm.sh
• Collez ces lignes dans ce fichier :
  cd ./MagicMirror
DISPLAY=:0 npm start
• Enregistrez et quittez (CTRL+X)
• Ajoutez l’autorisation d’exécution :
  chmod+x mm.sh
• Lancez Magic Mirror avec PM2 :
  pm2 start mm.sh
• Une fois lancé, sauvegardez l’état actuel avec :
  pm2 save
En faisant cela, il se lancera automatiquement à chaque démarrage.

Une fois cela fait, vous utiliserez PM2 pour gérer l’application Magic Mirror. Vous pourrez ainsi :

• Redémarrer Magic Mirror (après tout changement de configuration) :
  pm2 restart mm
• Fermer l’application :
  pm2 stop mm
Il faudra ensuite écrire « start » pour le redémarrer :
  pm2 start mm.sh
• Afficher les journaux récents de Magic Mirror :
  pm2 logs mm
  Cela est très utile pour dépanner toute erreur ou si l’écran ne s’affiche plus après un changement de configuration.

Installation de nouveaux modules sur votre installation Magic Mirror

Tout cela est déjà très bien, vous disposez d’un tableau de bord soigné avec la date et l’heure, le calendrier, la météo et le flux d’informations. Mais ce n’est que le début.

Présentation des modules Magic Mirror

Le Magic Mirror est une application modulaire, où vous pouvez télécharger et installer de nouveaux widgets provenant de la communauté. La plupart d’entre eux sont répertoriés ici, mais vous pouvez également trouver des modules de développeurs aléatoires sur GitHub ici et là. Cela inclut des choses comme :

• L’affichage de blagues
• La valeur des crypto-monnaies et des actions en temps réel
• L’affichage de l’emploi du temps de votre fille
• La connexion à la plupart des API ouvertes comme les applications Google, les sociétés de transport ou les services météorologiques.

Tout ce dont vous pourriez avoir besoin est probablement déjà disponible sous forme de module pour votre tableau de bord. Si ce n’est pas le cas, vous pouvez créer vos propres modules en utilisant JavaScript.

Gestionnaire de modules Magic Mirror

Il est possible de télécharger et d’installer chaque module séparément, en accédant au projet GitHub de chacun d’eux. Vous devrez lire la documentation et suivre les étapes de configuration. Mais, je trouve cela un peu compliqué, et comme un gestionnaire de modules unique existe, je pense que c’est une bonne idée d’essayer de l’utiliser en premier.

Ce gestionnaire de modules est nommé « mmpm » et peut être installé sur votre Raspberry Pi en suivant ces étapes :

• Installez les prérequis, Nginx notamment :
  sudo apt install libffi-dev nginx-full -y
• Puis, le paquet lui-même :
  python3 -m pip install --upgrade --no-cache-dir mmpm
  Sur Bookworm, n’oubliez pas d’utiliser un environnement virtuel pour cela.
• Exécutez le programme d’installation :
  mmpm --guided-setup
Il vous posera plusieurs questions sur votre installation actuelle et sur la façon dont vous comptez utiliser le gestionnaire de modules. Il n’y a pas de mauvaise réponse, je vous laisse suivre l’assistant et répondre à tout (la plupart des questions sont répondues par « oui » ou « non »).
• Enfin, exécuter cette commande pour ajouter la commande « mmpm » à votre shell :
  echo 'export PATH="$PATH:$HOME/.local/bin"' >> ~/.bashrc
  Vous devrez redémarrer le terminal (ou reconnecter votre session SSH) pour utiliser les commandes qui vont suivre.

Une fois fait, vous pouvez utiliser cet outil avec les commandes suivantes. Il est proche d’apt donc vous ne devriez pas être perdu avec cela :

• mmpm search <string> : Un moteur de recherche pour trouver les modules correspondants (comme apt search).
  mmpm search calendar
• mmpm list : Il s’agit de la liste de tous les paquets. Des options sont disponibles pour filtrer cette liste, utilisez –help pour les voir.
  mmpm list -a #List all
mmpm list --help #Show the help
mmpm list -i #List installed modules
• mmpm install <name> : Pour installer un nouveau paquet
  mmpm install random_quotes
• mmpm -h : Pour obtenir plus d’informations sur cet outil
  

Comment installer un nouveau module Magic Mirror avec mmpm

Pour être sûr que tout est clair, prenons un exemple. Disons que vous voulez afficher une citation inspirante sur votre écran Magic Mirror. Voici les étapes faciles à suivre pour le faire :

• Cherchez le nom d’un module qui fait cela :
  mmpm search quotes
• Deux résultats sont disponibles, prenons le module random_quotes :
  mmpm install random_quotes
• Une fois fait, la seule chose à faire sera de modifier vos fichiers de configuration, et d’ajouter ces lignes dans la section « modules » :
  {
module : "random_quotes",
position : "bottom_bar"
},

• Redémarrez le Magic Mirror avec :
  pm2 restart mm

C’est tout, vous aurez maintenant une citation aléatoire au bas de votre écran.

La plupart des modules comportent des options supplémentaires que vous pouvez ajouter. Par exemple, avec celui-ci, vous pourrez définir le type de citations que vous souhaitez voir (succès, inspiration, motivation, etc.). Il vous faudra consulter la documentation du module pour connaître tous les détails.

Aller plus loin avec le Magic Mirror

Vous êtes maintenant prêt à installer le Magic Mirror de la bonne façon sur votre Raspberry Pi, y compris le gestionnaire de services et l’utilisation de mmpm qui vous permettra d’installer de nouveaux modules. Je pense que c’est un excellent projet pour aller plus loin avec un Raspberry Pi. Grâce à lui, vous pourrez découvrir NodeJS, git et une certaine utilisation des API populaires en cours de route.

Évidemment, ce guide n’est qu’une introduction, car les possibilités sont infinies. Faites-moi savoir si vous rencontrez des problèmes ou si vous avez besoin d’autres tutoriels sur des sujets spécifiques liés à cela (comme la création d’un nouveau module). Je pourrais essayer, de mon côté et partager, avec vous, mes conclusions dans mes prochains articles.

En tout cas, voici quelques articles liés qui pourraient vous intéresser pendant la construction de votre Magic Mirror :

• 5 méthodes de bureau à distance pour votre Raspberry Pi
• Comment Trouver l’Adresse IP du Raspberry Pi ? (3 Méthodes)
• Test du RasPad 3 : Mon avis après 1 mois d’utilisation
• Raspberry Pi: EVICIV 10.1″ Avis sur l’écran tactile (Avec images) (en anglais)
• 25 Idées de Projets Domotiques Incroyables sur Raspberry Pi

Ressources supplémentaires pour votre Raspberry Pi

Initiation au Raspberry Pi en vidéo
Si vous débutez et voulez passer rapidement à la vitesse supérieure, j’ai exactement ce qu’il vous faut.
Regardez ma formation vidéo qui vous aidera à démarrer du bon bien, choisir votre matériel, installer les meilleures applications et vous lancer directement dans vos premiers projets avec mon aide.
Regarder les vidéos dès maintenant

Maîtrisez votre Raspberry Pi en 30 jours
Vous avez besoin de plus ? Si vous êtes à la recherche des meilleures astuces pour devenir expert sur Raspberry Pi, ce livre est fait pour vous. Développez vos compétences sous Linux et pratiquez via de nombreux projets en suivant mes guides étape par étape. 10% de remise aujourd’hui !
Télécharger le livre au format PDF ici

Maîtrisez Python sur Raspberry Pi
Pas besoin d’être un génie pour coder quelques lignes pour votre Raspberry Pi.
Je vous apprends juste ce qu’il faut sur Python afin de réaliser n’importe quel projet. La seconde partie du livre est d’ailleurs consacrée à des exemples de projets où je vous guide pas à pas.
Ne perdez pas de temps, apprenez le strict nécessaire et économisez 10% avec ce lien :
Télécharger maintenant

Autres ressources pour profiter de votre Raspberry Pi
J’ai regroupé toutes mes recommandations de logiciels, sites utiles et de matériel sur cette page de ressources. Je vous invite à la consulter régulièrement pour faire les bons choix et rester à jour.
Visiter les pages ressources