MagicMirror² – Le miroir intelligent propulsé par une Raspberry Pi

Facebook Twitter Google Plus YouTube

MagicMirror² – Le miroir intelligent propulsé par une Raspberry Pi

Pour faire ce tutoriel de miroir magique [MagicMirror²], vous devez déjà connaître certains éléments, sachant que je ne vais pas utiliser “MagicMirrorOS“, mais une solution alternative, dans le cas où, cela viendrait s’ajouter à un projet existant. Il vous faut savoir :

Créer sa carte SD avec Raspberry PI OS
Ajouter les fichiers nécessaires afin d’activer le SSH (& la Wifi si vous ne souhaitez pas brancher en câble, ainsi que retrouver votre Raspberry Pi sur le réseau).
– Se connecter en SSH (Terminal) + VNC (Interface Graphique)
– Utiliser et Comprendre les bases des commandes Terminal sous “Debian”: sudo, cd, mv, ls -l, …

Je recommande l’utilisation de l’éditeur de fichiers (via terminal) “Nano”, pour une raison simple ; il est déjà préinstallé, et c’est aussi, celui que je vais utiliser. Je vais également utiliser “VNC” pour faire mes captures d’écran : Terminal + Interface de la RPi ; Si vous souhaitez l’utiliser, une note à ce sujet sera ajoutée avant la configuration de “MagicMirror”.

Je vais partir du fait que vous avez une Raspberry Pi, fraîchement installée avec l’environnement LXDE par défaut, de la connecter sur l’écran HDMI (ou, si vous avez opter pour un mini écran branché en GPIO, je vous apporterai des corrections avec les exemples que j’utilise personnellement sur ma RPi 3A+), d’ouvrir un terminal depuis un autre ordinateur et de vous y connecter :

ssh pi@ip_de_votre_raspberry_pi

Et de commencer par faire les mises à jour ; au cas où et redémarrez :

sudo apt-get update && sudo apt-get upgrade -y

sudo reboot now

######################################

Cacher automatiquement le curseur

Editez le fichier autostart :

sudo nano /etc/xdg/lxsession/LXDE-pi/autostart

@xscreensaver -no-splash

Faites “CTRL+O” pour sauvegarder. Ne fermez pas votre fichier autostart si vous avez besoin de l’étape suivante.

######################################

Désactiver l’économiseur d’écran

(Vous devez avoir le pack “x11-xserver-utils” d’installé, en résumé, vous devez avoir votre environnement bureau d’activé, et installé).

Vous allez éditer le fichier autostart :

sudo nano /etc/xdg/lxsession/LXDE-pi/autostart

@xset s noblank
@xset s off
@xset -dpms

Faites “CTRL+O” pour sauvegarder ; et “CTRL+X” pour fermer.

Puis éditez le fichier “lightdm.conf”:

sudo nano /etc/lightdm/lightdm.conf

Ajoutez la ligne suivante après [SeatDefaults] (Si celle-ci n’existe pas, ajoutez-la!)

xserver-command=X -s 0 -dpms

######################################

Inclinaison de l’écran

Vous pouvez totalement utiliser le MagicMirror de façon horizontale, mais pour ceux qui préfèrent de façon verticale, éditez le fichier config [Attention, si vous utilisez un écran sur GPIO, voici un exemple ici ]:

sudo nano /boot/config.txt

display_rotate=0
ou
display_rotate=1
ou
display_rotate=2
ou
display_rotate=3

Où 0 = Position initiale (Horizontale) ; 1 = 90° Rotation où : Gauche = Haut / Droite = Bas ; 2 = 180° Horizontale inversé ; 3 = 270° Rotation où : Droite = Haut / Gauche = Bas.

######################################

Plein écran

Si vous n’êtes pas en plein écran, il est possible de forcer en éditant le fichier config :

sudo nano /boot/config.txt

disable_overscan=1

######################################

Installer le paquet MagicMirror

Vous allez devoir installer la dernière version de “Node.js” :

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash –
sudo apt install -y nodejs

Ensuite, vous allez cloner le répertoire qui se trouve sur GitHub :

sudo git clone https://github.com/MichMich/MagicMirror

Puis entrez dans le répertoire et voir tous ce qui se trouve à l’intérieur :

cd MagicMirror

ls -l

Lancez le processus d’installation :

npm install

NOTE : Cette étape d’installation peut être (très) longue, la durée varie selon le type de Raspberry Pi utilisée.
– v2B : ~25 Minutes
– v3A+/B/B+ : ~10 Minutes
– v4B : ~10 Minutes
Veuillez ne pas stopper, interrompre, arrêter ou redémarrer la RPi, votre terminal car vous risqueriez de corrompre le système complet.

Une fois l’installation terminée avec succès, faites une copie du fichier de configuration situé dans “config” :

cp config/config.js.sample config/config.js

Avant d’aller plus loin, lancez une première fois, afin de vérifier si l’installation s’est déroulée correctement :

npm run start

Si c’est le cas, stoppez le processus avec “CTRL + C”, et c’est ici que s’achève cette partie.

N.B.: Installer, activer et configurer VNC

sudo raspi-config

Sélectionnez “Interfacing Options / VNC” et validez votre choix, et quittez le menu Raspi-Config.

######################################

Explications sur la configuration du MagicMirror :

* Détails et liste des modules principaux

{
module: “nom_du_module”,
position: “nom_de_la_position”,
header: “nom du texte précédent le module”,
config: {
variable_config1: “valeur 1”,
variable_config2: “valeur 2”,
}

option : Description

module : Nom du module. Par exemple : clock, calendar, mymodule.

position : La position du module sur le miroir. Les valeurs possibles sont :

  • top_bar, top_left, top_center, top_right
  • upper_third
  • middle_center
  • lower_third
  • bottom_left, bottom_center, bottom_right, bottom_bar
  • fullscreen_above, fullscreen_below.

header : Optionnel: Affiche un texte au dessus du module.

disabled : Optionnel: Mettre à true pour désactiver le module.

config : Optionnel: Objet contenant les propriétés de configuration du module. Il faut se référer à la documentation de chaque module pour connaitre les propriétés.

* Editez le fichier de configuration situé dans /home/pi/MagicMirror/config/

sudo nano config.js

Pensez à bien sauvegarder avec “CTRL” + “O”, et pour quitter Nano, faites “CTRL” + “X”.

Voici une copie d’écran de mon fichier de configuration, épuré des notes, et autres fonctions qui me sont pas utile pour ce projet là :

################################

# Ecran GPIO

Pour les écrans en GPIO, vous devrez ajouter une ligne au dessus des modules, afin que soit prise en charge la résolution (réduite) comme 480×320, dans le fichier /MagicMirror/config/config.js :

electronOptions: { fullscreen: true, width: 480, height: 320 },

Ensuite, dans le dossier “/MagicMirror/css”, créez un fichier “custom.css” ; afin d’avoir les modules qui ne se chevauchent pas, et adaptés à la résolution. Pour l’exemple, j’ai mis 65% ; à adapter selon la résolution et la taille de votre écran.

sudo nano custom.css

body {
zoom: 65%;
}

N’oubliez pas de bien sauvegarder chaque fichier séparément avec : “CTRL” + “O” et quitter nano “CTRL” + “X”.

# Ajuster la localité, unités de mesures et l’heure (24h)

Vous devrez modifier dans le menu de configuration /MagicMirror/config/config.js, quelques éléments afin de pouvoir profiter de votre MagicMirror en Français. Vous pouvez mettre “fr” si vous êtes Francophone, ou ajuster selon votre localité (co – Corse, eu – Basque, …), “timeFormat” avec 24h, au lieu des 12 AM/PM, et “units” afin d’avoir les T° en Celcius, les vitesses du vent en KM/H.

language: “fr”,

timeFormat: 24,

units: “metric”,

/!\ Pré-requis à la configuration du module Météo /!\

# Module Météo

Vous devrez vous inscrire (Gratuitement) sur le site OpenWeatherMap : https://home.openweathermap.org/users/sign_in.
Sur le site, après vous être inscrit, et valider le mail, vous devrez créer votre API, c’est très facile. Une fois authentifié, sur le Menu “API Key”, allez sur “Create Key” et “Generate”, vous obtiendrez une clé, alphanumérique de 32 caractères. Conservez la, vous en aurez besoin ultérieurement.
Télécharger également cette liste (afin de trouver le code de votre ville) http://bulk.openweathermap.org/sample/city.list.json.gz ; décompressez avec 7-zip (par exemple), et ouvrez le .json avec votre éditeur de texte. Faites une recherche dans le fichier avec “CTRL + F”, et notez son “ID”. Pour l’exemple, j’ai choisi “Brisbane“, ligne 534054, et son ID est : 2174003.

Après avoir récupérer vos informations météo, de localité, et l’API ; vous devrez les saisir dans les modules “currentweather” [Pour avoir la T° actuelle] et “weatherforecast” [Pour les prévisions]. Pour l’exemple, je saisi les informations concernant le code “location” de Brisbane (QLD, Australie), la “locationID”, et mon “appid”, dans “header” [Weather Forecast] vous pouvez le remplacer par [Prévisions] :

module: “currentweather”,
position: “top_right”,

location: “Brisbane”,
locationID: “2174003”,
appid: “Suite de 32 caractères alphanumériques”

module: “weatherforecast”,
position: “top_right”,
header: “Weather Forecast”,

location: “Brisbane”,
locationID: “2174003”,
appid: “Suite de 32 caractères alphanumériques”

######################################

# Module Calendrier

Par défaut, le MagicMirror affiche un flux générique des jours fériés Américains.

Pour ajouter un calendrier Google avec le calendrier des fêtes, vous devez obtenir l’URL de votre calendrier privé afin qu’il puisse apparaître.

La première chose est d’ouvrir votre calendrier Google à partir du navigateur Web, puis faites défiler la page jusqu’à la section “Mes agendas” et cliquez sur les trois points à côté de l’agenda que vous souhaitez ajouter.

Cliquez sur “Paramètres et partage”.
Trouvez votre «adresse secrète au format iCal» et notez-la.
Revenez à votre config.js et ajoutons une nouvelle entrée d’agenda.

Intégrez l’URL de “l’adresse secrète au format iCal” de Google que nous avons extraite des étapes précédentes.
Vous pouvez également attribuer une icône différente en utilisant le symbole afin que lorsque vos événements personnels se produisent, et ainsi, aisément distinguer ce qui vient de votre calendrier par opposition à un calendrier familial ou de vacances.

Ici, la limite de nombre de jours d’événements affichés est à 14 jours, en utilisant maximumNumberOfDays.

######################################

# Module Flux RSS

La plupart des gens aiment avoir un aperçu de nouvelles utiles avec des informations qui les concernent.

Notez que par défaut, vous avez le fil d’actualité du New York Times. Vous pouvez utiliser les flux RSS en remplaçant l’adresse RSS par celle de votre choix, vous devrez dupliquer le module entier si vous souhaitez ajouter un autre Flux RSS.

Afin de tester ces possibilités, je vais récupérer le flux RSS de mon site et l’ajouter à URL [https://www.Black-Lab.fr/feed/] et à Title, [Black-Lab].

module: “newsfeed”,
position: “bottom_bar”,
config: {
feeds: [
{
title: “Black-Lab”,
url: “https://black-lab.fr/feed/”
}
],
showSourceTitle: true,
showPublishDate: true,
broadcastNewsFeeds: true,
broadcastNewsUpdates: true

######################################

Créez un script de démarrage MagicMirror.

Installez le paquet PM2 sur votre Raspberry Pi afin de pouvoir vous faciliter l’usage du MagicMirror :

sudo apt-get install pm2

Maintenant que la base est posée, il faut qu’il puisse démarrer seul, pour y parvenir, vous allez créer un script de démarrage avec PM2.
Pour utiliser PM2 en combinaison de MagicMirror, vous devez créer un script shell simple. De préférence, vous mettrez ce script en dehors du dossier MagicMirror, à la racine par exemple, pour vous assurer qu’il ne vous posera aucun problème si vous voulez mettre à jour le miroir.

sudo nano mm.sh

cd ./MagicMirror
DISPLAY=:0 npm start

Enregistrez et fermez à l’aide des commandes CTRL-O et CTRL-X. Assurez-vous maintenant que le script shell est exécutable en exécutant la commande suivante:

sudo chmod +x mm.sh

Vous êtes maintenant prêt à utiliser MagicMirror en utilisant ce script en utilisant PM2. Afin de vérifier si tout est bon, vous aller faire un test en le lançant avec la commande suivante :

pm2 start mm.sh

Votre miroir devrait maintenant démarrer et apparaître sur votre écran après quelques secondes.

Activez le redémarrage du script MagicMirror.

Pour vous assurer que le MagicMirror redémarre après le redémarrage, vous devez enregistrer l’état actuel de tous les scripts exécutés via PM2. Pour ce faire, exécutez la commande :

pm2 save

Avec ceci, votre MagicMirror devrait maintenant, redémarrer tout seul en cas de problème.

Contrôler votre MagicMirror via PM2.

Avec votre MagicMirror fonctionnant via PM2, vous disposez de quelques outils pratiques:

Redémarrer votre MagicMirror

pm2 restart mm

Arrêter votre MagicMirror

pm2 stop mm

Voir les fichiers logs

pm2 logs mm

Voir les informations sur le processus MagicMirror

pm2 show mm

Leave a Reply

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.