Après quelques mois d’arrêt dans la publication d’articles, je me décide (enfin!) à re-publier du contenu et notamment sur la configuration du Miroir Magique. Lors de cet article, nous allons nous intéresser à quelques éléments de customisation. En effet, si nous avons vu comment installer et configurer notre miroir; nous allons maintenant nous intéresser aux différentes manipulations à effectuer pour qu’il puisse fonctionner sans notre intervention et surtout, sans nous en préoccuper le moins du monde.
Rappel : Cet article fait partie d’une série en plusieurs parties, dont vous trouverez les éléments ci-dessous :
- Réflexion autour d’un appareil connecté (Allons-y!)
- Installation du Magic Mirror – Partie 1 (Allons-y!)
- Installation du Magic Mirror – Partie 2 (Allons-y!)
- Installation du Magic Mirror – Partie 3 (Allons-y!)
- Installation du Magic Mirror – Partie 4 (Allons-y!)
- Installation du Magic Mirror – Partie 5 (vous y êtes!)
Modification de la résolution
Lors de l’installation, nous avons laissé les paramètres par défaut de l’affichage sur notre Raspberry Pi. Or, lorsque nous lançons la miroir, de larges bandes noires apparaissent sur les bords; ce qui n’est pas des plus esthétique, en plus de nous faire perde pas mal d’affichage. Pour modifier cet affichage, nous allons éditer le fichier de configuration.
Dans la fenêtre de terminal taper la commande suivante, et appuyer sur Entrée pour modifier le fichier de configuration :
|
1 |
pi@MagicMirror:~$ sudo vi /boot/config.txt |
Ajouter dans ce fichier les lignes suivantes, toutefois, sachez que même si la position dans le fichier importe peu, nous allons essayer de regrouper les options entre-elles. Sauvegardez les modifications :wq!
|
1 2 3 4 |
# Uncomment if you get no picture on HDMI for a default "safe" mode #hdmi_safe=1 hdmi_group=2 hdmi_mode=85 |
Le paramètre hdmi_group définit si la sortie HDMI doit être utilisé soit en CEA (Consumer Electronics Association, le standard utilisé par les télévisions) ou DMT (Display Monitor Timings, le standard utilisé pour les moniteurs d’ordinateurs).
Le paramètre hdmi_mode, utilisé avec hdmi_group sert à définir le format de sortie HDMI. Dans notre exemple, la valeur 85 correspond à une résolution de 1280×720 pixels.
Remarque :
Vous pouvez modifier la résolution de votre écran en fonction du moniteur que vous avez en votre possession. Plus d’informations sont disponibles : ici.
Démarrage automatique du Miroir
Maintenant que notre logiciel est fonctionnel, nous allons voir comment faire pour que les processus soient démarrés automatiquement au démarrage du système. En effet, par défaut, vous avez du vous rendre compte que celui-ci affiche le bureau de la distribution. Pour se faire, nous allons utiliser PM2 qui est un gestionnaire de processus pour les applications Node.js et qui inclus un répartiteur de charge. Il permet notamment de laisser les applications en fonctionnement, de les recharger sans interruption et de faciliter les différentes tâches d’administration.
Dans la fenêtre de terminal taper la commande suivante, et appuyer sur Entrée pour installer le logiciel :
|
1 |
pi@MagicMirror:~$ sudo npm install -g pm2 |
Pour s’assurer que PM2 peut effectuer correctement les actions qui lui sont demandées suite à un redémarrage, il doit être démarré au lancement du Raspberry Pi. Pour se faire, taper la commande suivante, et appuyer sur Entrée pour afficher les commandes nécessaires :
|
1 |
pi@MagicMirror:~$ pm2 startup |
Remarque :
PM2 vous donne les commandes à exécuter ensuite.
Nous allons maintenant réaliser un petit script qui sera lancé au démarrage. De préférence, positionner celui-ci dans la home utilisateur et non dans le dossier MagicMirror (ceci pour éviter les effets de bords des différentes mises à jour).
Dans la fenêtre de terminal taper la commande suivante, et appuyer sur Entrée pour éditer le script :
|
1 |
pi@MagicMirror:~$ vi mm.sh |
Ajouter dans ce fichier les lignes suivantes :
|
1 2 |
cd ~/MagicMirror DISPLAY=:0 npm start |
Sauvegardez les modifications :wq!. Il faut ensuite rendre le script exécutable, et s’assurer que celui-ci sera lancé automatiquement, via les commandes suivantes :
|
1 2 3 |
pi@MagicMirror:~$ chmod +x mm.sh pi@MagicMirror:~$ pm2 start mm.sh pi@MagicMirror:~$ pm2 save |
Remarque :
Je ne vous détaille pas à quoi servent les 2 dernières commandes, si vous avez des questions, n’hésitez pas à me poser des questions. De plus, je vous invite à lire l’article original écrit par le créateur du Miroir Magique : ici
Suppression du pointeur de la souris
Rien de plus agaçant, une fois notre miroir lancé, que d’avoir le curseur de la souris présent et qui refuse de disparaître! Pour nous permettre d’avoir un affichage propre, nous allons installer un module qui permet d’enlever la souris : Unclutter.
Dans la fenêtre de terminal taper la commande suivante, et appuyer sur Entrée pour installer le logiciel :
|
1 |
pi@MagicMirror:~$ sudo apt-get install unclutter |
Maintenant que le logiciel est installé, nous allons le configurer pour qu’il se lance au démarrage et face rende notre pointeur invisible au bout de quelques secondes :
|
1 |
pi@MagicMirror:~$ sudo vi /etc/xdg/lxsession/LXDE-PI/autostart |
Ajouter la ligne suivante en fin de fichier :
|
1 |
@unclutter -display :0 -idle 3 -root -noevents |
Remarque :
Cette option de configuration alloue un délai de 3 secondes avant la disparition du pointeur sur l’écran.
Allumage / Extinction automatique de l’écran
Avoir un miroir magique, c’est bien, mais cela ne présente aucun intérêt qu’il soit allumé tout le temps notamment si nous ne sommes pas présents pour le regarder. Je vous propose donc, un petit script qui va vous permettre d’arrêter l’écran tout en laissant notre Raspberry Pi en fonctionnement. Ceci présente plusieurs avantages, principalement, celui de ne pas avoir à redémarrer le système régulièrement pour avoir accès aux informations.
Remarque :
Vous avez déjà été nombreux à me demander s’il était possible que le miroir s’allume et s’éteigne automatiquement avec une reconnaissance faciale. Sachez que je n’ai pas mis en place cette solution actuellement (il me manque du temps et le matériel pour le faire), mais qu’elle existe et pour cela, il faut utiliser le module de reconnaissance qui est developpé pour Raspberry.
Dans la fenêtre de terminal taper la commande suivante, et appuyer sur Entrée pour éditer le script :
|
1 2 3 |
pi@MagicMirror:~$ touch rpi-hdmi.sh pi@MagicMirror:~$ chmod +x rpi-hdmi.sh pi@MagicMirror:~$ vi rpi-hdmi.sh |
Ajouter dans ce fichier le bloc de code suivant :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
#!/bin/sh # Enable and disable HDMI output on the Raspberry Pi is_off () { tvservice -s | grep "TV is off" >/dev/null } case $1 in off) tvservice -o ;; on) if is_off then tvservice -p curr_vt=`fgconsole` if [ "$curr_vt" = "1" ] then chvt 2 chvt 1 else chvt 1 chvt "$curr_vt" fi fi ;; status) if is_off then echo off else echo on fi ;; *) echo "Usage: $0 on|off|status" >&2 exit 2 ;; esac exit 0 |
Les commandes à utiliser sont les suivantes, elles permettent d’allumer, éteindre, et voir le status de notre écran :
|
1 2 3 |
pi@MagicMirror:~$ ./rpi-hdmi.sh on pi@MagicMirror:~$ ./rpi-hdmi.sh off pi@MagicMirror:~$ ./rpi-hdmi.sh status |
Remarque :
Pour ma part, j’ai simplement décidé d’implémenter ce script via une crontab qui va allumer et éteindre l’écran à heures fixes. Dans mon cas, le cycle de vie de l’écran est le suivant :
- En Semaine :
- De 07h30 à 09h45 – Allumé
- De 10h00 à 19h00 – Eteint
- De 19h00 à 23h59 – Allumé
- Le Week-end :
- De 07h30 à 23h59 – Allumé
Pour éditer la crontab, saisissez la commande :
|
1 |
pi@MagicMirror:~$ crontab -e |
Ajouter les valeurs suivantes pour définir les heures d’arrêt et d’allumage de l’écran :
|
1 2 3 4 |
30 7 * * 1-7 /home/pi/rpi-hdmi.sh on 45 9 * * 1-5 /home/pi/rpi-hdmi.sh off 00 19 * * 1-5 /home/pi/rpi-hdmi.sh on 59 23 * * 1-7 /home/pi/rpi-hdmi.sh off |
Personnalisation de l’affichage
L’affichage par défaut, est très sobre (écriture blanche sur fond noir). Il est intéressant de modifier certains éléments d’affichage pour permettre l’ajout d’un peu de couleur à l’ensemble. Pour se faire, il suffit d’éditer le fichier de configuration custom.css, et de définir de nouvelles couleurs.
Pour éditer le fichier, saisissez les commandes suivantes :
|
1 2 |
pi@MagicMirror:~$ cd MagicMirror/css pi@MagicMirror:~$ vi custom.css |
Ajouter les valeurs suivantes pour définir le nouveau code couleur :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 |
/***************************************************** * Magic Mirror * * Custom CSS * * * * By Michael Teeuw http://michaelteeuw.nl * * MIT Licensed. * * * * Add any custom CSS below. * * Changes to this files will be ignored by GIT. * *****************************************************/ body { } /* * CALENDAR SPECIFIC */ .fa.fa-male { color: #2B60DE; /* Dodger Blue */ } .fa.fa-female { color: #F660AB; /* Hot Pink */ } .fa.fa-trash-o { color: #FFFF00; /* Yellow */ } .fa.fa-calendar { color: #00FF00; /* Green */ } .fa.fa-birthday-cake { color: #ff0000; /* Red */ } div.CALEXT .tableStyle .eventTime { display:block; } /* * WUFORECAST SPECIFIC */ .wuforecast .max-temp { font-size: 15px; line-height: 15px; color: #f66; } .wuforecast .min-temp { font-size: 15px; line-height: 15px; color: #0ff; } .wuforecast .weather-icon { font-size: 15px; line-height: 15px; color: #f93; } .wuforecast .day { font-size: 15px; line-height: 15px; color: #6f6; } /* * FORECAST */ .brightb { color: #55acee; } .currentweather .wi-sunrise { color: #ffd700; } .currentweather .wi-sunset { color: #ffa500; } .currentweather .wi-day-sunny { color: #ffff00; } .currentweather .wi-night-showers { color: #55acee; } .currentweather .wi-degrees { color: #415; } .currentweather .wi-rain { color: #55acee; } .currentweather .wi-showers { color: #55acee; } .currentweather .wi-night-showers { color: #55acee; } .currentweather .wi-night-alt-cloudy-windy { color: #aaa; } .currentweather .wi-night-cloudy { color: #aaa; } .currentweather .wi-cloudy { color: #aaa; } .currentweather .wi-day-cloudy { color: #aaa; } .currentweather .wi-cloudy { color: #aaa; } .currentweather .wi-cloudy-windy { color: #aaa; } .currentweather .wi-showers { color: #55acee; } .currentweather .wi-thunderstorm { color: #ff00ff; } .currentweather .wi-snow { color: #fff; } .currentweather .wi-fog { color: #999; } .currentweather .wi-night-clear { color: #fff; } .currentweather .wi-night-rain { color: #55acee; } .currentweather .wi-night-thunderstorm { color: #ff00ff; } .currentweather .wi-night-snow { color: #fff; } .weatherforecast .wi-sunrise { color: #ffd700; } .weatherforecast .wi-sunset { color: #ffa500; } .weatherforecast .wi-day-sunny { color: #ffff00; } .weatherforecast .wi-night-showers { color: #55acee; } .weatherforecast .wi-degrees { color: #415; } .weatherforecast .wi-rain { color: #55acee; } .weatherforecast .wi-showers { color: #55acee; } .weatherforecast .wi-night-showers { color: #55acee; } .weatherforecast .wi-night-alt-cloudy-windy { color: #aaa; } .weatherforecast .wi-night-cloudy { color: #aaa; } .weatherforecast .wi-cloudy { color: #aaa; } .weatherforecast .wi-day-cloudy { color: #aaa; } .weatherforecast .wi-cloudy { color: #aaa; } .weatherforecast .wi-cloudy-windy { color: #aaa; } .weatherforecast .wi-showers { color: #55acee; } .weatherforecast .wi-thunderstorm { color: #ff00ff; } .weatherforecast .wi-snow { color: #fff; } .weatherforecast .wi-fog { color: #999; } .weatherforecast .wi-night-clear { color: #fff; } .weatherforecast .wi-night-rain { color: #55acee; } .weatherforecast .wi-night-thunderstorm { color: #ff00ff; } .currentweather .wi-night-snow { color: #fff; } |
Remarque :
Dans mon exemple, je n’ai modifié l’affichage que certains modules (Calendar, Forecast, Weather Forecast). Libre à vous de choisir quels modules vous pouvez modifier et personnaliser.
Au cours de cet article, nous avons vu comment personnaliser notre affichage et surtout avoir un miroir qui peut agir de manière autonome sans notre intervention. Si vous avez des remarques, n’hésitez pas à me laisser des commentaires et j’essaierai dans la mesure du possible d’y répondre. Lors de prochains articles, nous essaierons de parler de la construction du cadre et de sa mise en place.