Comme pour les précédents articles qui ont été initialement publiés sur mon blog personnel (ici) en Janvier 2018, je continue la publication d’un sujet toujours d’actualité, très commenté et surtout en plein essor avec l’arrivée de plus en plus d’assistants connectés. Je trouve donc, à nouveau, intéressant de partager ce contenu avec notre communauté. Attention toutefois, les conseils listés dans cet article ne sont pas forcément exhaustifs en 2020, notamment car la solution a pas mal évoluée entre-temps, toutefois, ils montrent néanmoins un aperçu intéressant des différentes solutions proposées et la manière d’appréhender le sujet
Si les précédents articles expliquaient comment installer le logiciel, nous n’avons pas encore vu comment personnaliser notre miroir. Vous avez été nombreux à réagir sur le précédent article (ici) et à me demander d’expliquer comment personnaliser celui-ci. Lors de cet article, je présenterais donc, les différents fichiers de configuration et ainsi que les modifications à apporter pour créer un affichage plus personnalisé et qui répondra à vos attentes. Vous pouvez retrouver la liste complète des modules proposés via le lien suivant : Modules.
Rappel : Cet article fait partie d’une série en plusieurs parties, dont vous trouverez les éléments ci-dessous :
- Créer 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 (vous y êtes!)
- Installation du Magic Mirror – Partie 5 (Allons-y!)
Etape 1
Si vous êtes ici, c’est que l’installation de votre Miroir est complète, et que vous avez un écran affichant, par défaut, des informations barbares dans une langue qui n’est pas la vôtre.

Je vais maintenant expliquer quels sont les modules installés par défaut, et comment ils sont affichés à l’écran. Pour se faire, je vais utiliser le fichier de configuration généré par défaut et nommé : config.js.
Mais avant tout, à quoi ressemble-t-il? Voici la réponse :
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 |
/* Magic Mirror Config Sample * * By Michael Teeuw http://michaelteeuw.nl * MIT Licensed. */ var config = { port: 8080, ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses. language: "en", timeFormat: 24, units: "metric", modules: [ { module: "alert", }, { module: "updatenotification", position: "top_bar" }, { module: "clock", position: "top_left" }, { module: "calendar", header: "US Holidays", position: "top_left", config: { calendars: [ { symbol: "calendar-check-o ", url: "webcal://www.calendarlabs.com/templates/ical/US-Holidays.ics" } ] } }, { module: "compliments", position: "lower_third" }, { module: "currentweather", position: "top_right", config: { location: "New York", locationID: "", //ID from http://www.openweathermap.org/help/city_list.txt appid: "YOUR_OPENWEATHER_API_KEY" } }, { module: "weatherforecast", position: "top_right", header: "Weather Forecast", config: { location: "New York", locationID: "5128581", //ID from http://www.openweathermap.org/help/city_list.txt appid: "YOUR_OPENWEATHER_API_KEY" } }, { module: "newsfeed", position: "bottom_bar", config: { feeds: [ { title: "New York Times", url: "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml" } ], showSourceTitle: true, showPublishDate: true } }, ] }; /*************** DO NOT EDIT THE LINE BELOW ***************/ if (typeof module !== "undefined") {module.exports = config;} |
Etape 2
Maintenant que nous connaissons le fichier de configuration et que nous avons vu l’affichage qui en résultait, je vais maintenant détailler à quoi correspondent tous les éléments présents, tant au niveau des informations globales que des différents modules présents par défaut.
Informations globales
Commençons par le début du fichier (qui ne correspond à aucun élément affiché sur le miroir) :
1 2 3 4 5 6 7 |
var config = { port: 8080, ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], language: "en", timeFormat: 24, units: "metric", |
Description : Il s’agit ici d’informations globales sur l’affichage du miroir. Notamment les plages d’IP qui seront autorisées à se connecter et sur quel port. La langue utilisée (par défaut, de l’anglais), ainsi que le système de mesure utilisé (par défaut, le système métrique). Si vous choisissiez de définir une adresse IP autorisée, vous pourriez afficher le contenu du miroir directement dans votre navigateur; cela peut s’avérer pratique lorsque l’on souhaite réaliser des tests.
Module Alert
Le premier module de la liste est donc le module Alert.
1 2 3 4 |
modules: [ { module: "alert", }, |
Description : Ce module permet d’afficher les notifications des autres modules sur le mirroir. Vous pouvez retrouver la page github de ce module : ici
Module UpdateNotification
Le module suivant de la liste est donc le module UpdateNotification.
1 2 3 4 |
{ module: "updatenotification", position: "top_bar" }, |
Description : Ce module permet d’afficher les notifications lorsqu’une mise à jour du miroir est disponible notamment (avec le nombre de commits sur la branche, ainsi que le nom de la branche active). Ce module n’est pas configurable.
Module Clock
Le module suivant de la liste est le module Clock.
1 2 3 4 |
{ module: "clock", position: "top_left" }, |
Description : Ce module permet d’afficher l’heure ainsi que la date du jour sur le miroir. Nous constatons que, par défaut, ce module doit s’afficher en haut à gauche de l’écran et que les informations sont affichées en temps réel. Vous pouvez retrouver la page github de ce module : ici
Module Calendar
Le module suivant de la liste est le module Calendar.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ module: "calendar", header: "US Holidays", position: "top_left", config: { calendars: [ { symbol: "calendar-check-o ", url: "webcal://www.calendarlabs.com/templates/ical/US-Holidays.ics" } ] } }, |
Description : Ce module permet d’afficher un ou plusieurs calendriers en fonction des paramètres définit par l’utilisateur. Par défaut, les informations affichées sont le nom du calendrier (ici: “US Holidays”) et les éléments présents sur ce calendrier. Nous constatons également que, par défaut, ce module doit s’afficher en haut à gauche de l’écran. De plus, un seul calendrier est affiché ici, avec un symbole associé.
Remarque : Un élément étant déjà présent en haut à gauche (le module précédent Calendar), celui-ci s’affichera donc juste en dessous.
Module Compliments
Le module suivant de la liste est le module Compliments.
1 2 3 4 |
{ module: "compliments", position: "lower_third" }, |
Description : Ce module permet d’afficher un ou plusieurs compliments (en anglais par défaut). Sympathique quand on regarde le miroir, d’avoir un peit mot doux qui réchauffe le coeur. Ce module est paramètrable (en français), mais il faut pour cela définir tous les créneaux de la journée pour lesquels on souhaite avoir une phrase (sinon, le module affichera un joli message “undefined“).
Module Currentweather
Le module suivant de la liste est le module Currentweather.
1 2 3 4 5 6 7 8 9 |
{ module: "currentweather", position: "top_right", config: { location: "New York", locationID: "", //ID from http://www.openweathermap.org/help/city_list.txt appid: "YOUR_OPENWEATHER_API_KEY" } }, |
Description : Ce module permet d’afficher le temps qu’il fait actuellement à l’endroit définit à l’aide du site suivant : https://openweathermap.org/. Une clé est nécessaire pour que le module soit opérationnel. Pour se faire, il suffit d’avoir un compte sur le site internet et d’insérer la clé fournie gratuitement.
Module Weatherforecast
Le module suivant de la liste est le module Weatherforecast.
1 2 3 4 5 6 7 8 9 10 |
{ module: "weatherforecast", position: "top_right", header: "Weather Forecast", config: { location: "New York", locationID: "5128581", //ID from http://www.openweathermap.org/help/city_list.txt appid: "YOUR_OPENWEATHER_API_KEY" } }, |
Description : Ce module permet d’afficher les prévisions météo sur les prochains jours à l’endroit définit à l’aide du site suivant : https://openweathermap.org/. Tout comme le modulé précédent, une clé est nécessaire pour que le module soit opérationnel. Pour se faire, il suffit d’avoir un compte sur le site internet et d’insérer la clé fournie gratuitement.
Module Newsfeed
Le module suivant de la liste est le module Newsfeed.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ module: "newsfeed", position: "bottom_bar", config: { feeds: [ { title: "New York Times", url: "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml" } ], showSourceTitle: true, showPublishDate: true } }, |
Description : Ce module permet d’afficher les différents fluw RSS qui lui sont passés en paramètres pour afficher ceux-ci sur le miroir. Cela permet d’avoir un flux d’information sur celui-ci.
Etape 3
Nous savons maintenant à quoi ressemble le fichier de configuration et quels sont les différents modules par défaut qui composent notre miroir. Dans la suite de l’article, je vais vous présenter comment j’ai modifié les modules par défaut pour afficher plus d’informations pertinentes à mon goût et les éventuels modules que j’ai rajouté.
Remarque : Je ne vais pas détailler ici, l’ensemble des modules qui existent pour cette solution. Je ne détaillerais que ceux sur lesquels j’ai travaillé. Toutefois, mon miroir est encore en test car je suis en train de tester un autre module calendrier qui correspond plus à ma vision. Quand mon miroir sera finalisé, je ne manquerais pas d’écrire un article avec la configuration que j’utilise.
Module Calendar
Voici la configuration que j’ai effectué sur le module Calendar.
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 |
{ module: "calendar", header: "Famille", position: "top_left", config: { calendars: [ { symbol: "male", url: "https://calendar.google.com/calendar/ical/.../basic.ics" }, { symbol: "female", url: "https://calendar.google.com/calendar/ical/.../basic.ics" } ] } }, { module: "calendar", header: "Important", position: "top_left", config: { maximumEntries: 5, calendars: [ { symbol: "calendar-check-o ", url: "http://www.education.gouv.fr/.../Calendrier_Scolaire_Zone_C.ics" }, { symbol: "trash", url: "webcal://localhost:8080/modules/Poubelles/poubelles.ics", maximumEntries: 5, }, ] } }, |
On constate ici, que j’ai choisi de dupliquer le module pour qu’il s’affiche deux fois. Une première configuration que j’ai sobrement intitulée “Famille” et qui contient les calendriers de ma compagne et le mien (qui sont partagés via Google). Rien de bien compliqué sur cette configuration, les valeurs par défaut me convenant parfaitement.
La deuxième configuration intutilée “Important“, regroupe plusieurs calendriers de types différents :
- Le calendrier des vacances scolaires pour la gestion de nos enfants.
- Un calendrier local que j’ai crée moi-même, qui nous indique la date de sortie des poubelles (un vrai calvaire chez nous en fonction des semaines…).
Remarque : Chaque calendrier de la deuxième configuration ne doit pas afficher plus de cinq éléments.
Module Compliments
Voici la configuration que j’ai effectué sur le module Compliments.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ module: "compliments", position: "lower_third", config: { compliments: { anytime: [ "Bonjour!" ], morning: [ "Bien dormi?", "Bonne journée!", "Bonjour!" ], evening: [ "Bonne soirée!", "Repose toi bien!", "Bonne nuit..." ] } } }, |
Pour ce module, j’ai choisi de définir certains moments de la journée uniquement, mais comme cela est expliqué sur la page de configuration du module (ici), ce module peut être couplé avec le temps actuel pour faire correspondre ces compliments.
Remarque : Si “anytime” n’est pas définit, il se pourrait que votre miroir affiche Undefined si le moment de la journée n’est pas disponible dans le tableau de configuration. Toutefois, je n’ai pas investigué pour savoir s’il s’agit d’un bug du module, des traductions ou si une mauvaise configuration avait été réalisée de ma part.
Module Currentweather & Weatherforecast
Voici la configuration que j’ai effectué sur les modules Currentweather & Weatherforecast.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ module: "currentweather", position: "top_right", config: { location: "Toulouse", locationID: "", //ID from http://www.openweathermap.org/help/city_list.txt appid: "xxx" } }, { module: "weatherforecast", position: "top_right", // header: "Weather Forecast", config: { location: "Toulouse", locationID: "", //ID from http://www.openweathermap.org/help/city_list.txt appid: "xxx", // colored: 'true', } }, |
Dans ces deux configurations, je n’ai pas changé beaucoup de choses. J’ai simplement définit quelle ville je souhaitais avoir dans mes prévisions météo. J’ai également désactivé le header, car je ne souhaitais pas afficher les informations de celui-ci, les couleurs seront gérées dans le fichier custom.css dont je parlerais dans un autre article.
Module Traffic
Voici la configuration que j’ai effectué sur le module Traffic.
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 |
{ module: 'MMM-Traffic', position: 'bottom_left', classes: 'bright medium', //optional, default is 'bright medium', only applies to commute info not route_name config: { api_key: 'XXX', mode: 'driving', origin: 'XXX', destination: 'XXX', route_name: 'Travail', changeColor: true, showGreen: false, limitYellow: 5, //Greater than 5% of journey time due to traffic limitRed: 20, //Greater than 20% of journey time due to traffic traffic_model: 'best_guess', interval: 120000, //2 minutes showWeekend: false, allTime: false, startHr: 8, endHr: 10, hideOffHours: true, loadingText: "Chargement...", prependText: "Monsieur :", } }, { module: 'MMM-Traffic', position: 'bottom_center', classes: 'bright medium', //optional, default is 'bright medium', only applies to commute info not route_name config: { api_key: 'XXX', mode: 'driving', origin: 'XXX', destination: 'XXX', route_name: 'Travail', changeColor: true, showGreen: false, limitYellow: 5, //Greater than 5% of journey time due to traffic limitRed: 20, //Greater than 20% of journey time due to traffic traffic_model: 'best_guess', interval: 120000, //2 minutes showWeekend: false, allTime: false, startHr: 8, endHr: 10, hideOffHours: true, loadingText: "Chargement...", prependText: "Madame :", } }, { module: 'MMM-Traffic', position: 'bottom_right', classes: 'bright medium', //optional, default is 'bright medium', only applies to commute info not route_name config: { api_key: 'XXX', mode: 'driving', origin: 'XXX', destination: 'XXX', route_name: 'Nounou', changeColor: true, showGreen: false, limitYellow: 5, //Greater than 5% of journey time due to traffic limitRed: 20, //Greater than 20% of journey time due to traffic traffic_model: 'best_guess', interval: 120000, //2 minutes showWeekend: false, allTime: false, startHr: 8, endHr: 10, hideOffHours: true, loadingText: "Chargement...", prependText: "Nounou :", } }, |
Dans cette configuration, vous pouvez remarquer que j’ai ajouté plusieurs fois le module qui permet de calculer le temps de trajet nécessaire entre deux points. Cela nous permet, de savoir en temps réel, le temps qu’il nous faut pour rejoindre nos travails respectifs et ainsi de prévoir nos déplacements en conséquence. Pour plus d’informations sur ce module, rendez-vous à la page suivante : ici
Remarque : Petite précision, je ne souhaitais pas polluer mon miroir avec ces informations inutiles le week-end ou le soir quand nous n’avons pas besoin de nous déplacer, c’est pour cette raison, que ce module n’est pas affiché tout le temps (comme cela est détaillé dans les configurations).
Module Newsfeed
Voici la configuration que j’ai effectué sur le module Newsfeed.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ module: "newsfeed", position: "bottom_bar", config: { feeds: [ { title: "France 24", url: "http://www.france24.com/fr/france/rss" } ], showSourceTitle: true, showPublishDate: true } }, |
Dans cette configuration, rien de bien compliqué, j’ai ajouté le flux RSS dont je souhaitais avoir les informations (ici : France24). J’ai toutefois préparé le terrain en cas d’ajout de sources supplémentaires, avec la présence du titre du flux affiché, ainsi que sa date de parution.
Conclusion
Suite à toutes ces présentations, vous trouverez ci-après le fichier complet tel qu’il est actuellement présent dans mon miroir. Notez qu’il ne s’agit pour le moment que d’une première version, et que je suis en train de tester une nouvelle configuration se basant sur d’autres modules, mais je ne manquerais pas de vous tenir informé de l’avancée de celle-ci, et je vous la présenterais une fois terminée.
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 |
/* Magic Mirror Config Sample * * By Michael Teeuw http://michaelteeuw.nl * MIT Licensed. */ var config = { port: 8080, ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses. language: "fr", timeFormat: 24, units: "metric", modules: [ { module: "alert", }, { module: "updatenotification", position: "top_bar" }, { module: "clock", position: "top_left" }, { module: "calendar", header: "Famille", position: "top_left", config: { calendars: [ { symbol: "male", url: "https://calendar.google.com/calendar/ical/.../basic.ics" }, { symbol: "female", url: "https://calendar.google.com/calendar/ical/.../basic.ics" } ] } }, { module: "calendar", header: "Important", position: "top_left", config: { maximumEntries: 5, calendars: [ { symbol: "calendar-check-o ", url: "http://www.education.gouv.fr/.../Calendrier_Scolaire_Zone_C.ics" }, { symbol: "trash", url: "webcal://localhost:8080/modules/Poubelles/poubelles.ics", maximumEntries: 5, }, ] } }, { module: "compliments", position: "lower_third", config: { compliments: { anytime: [ "Bonjour!" ], morning: [ "Bien dormi?", "Bonne journée!", "Bonjour!" ], evening: [ "Bonne soirée!", "Repose toi bien!", "Bonne nuit..." ] } } }, { module: "currentweather", position: "top_right", config: { location: "Toulouse", locationID: "", //ID from http://www.openweathermap.org/help/city_list.txt appid: "xxx" } }, { module: "weatherforecast", position: "top_right", // header: "Weather Forecast", config: { location: "Toulouse", locationID: "", //ID from http://www.openweathermap.org/help/city_list.txt appid: "xxx", // colored: 'true', } }, { module: 'MMM-Traffic', position: 'bottom_left', classes: 'bright medium', //optional, default is 'bright medium', only applies to commute info not route_name config: { api_key: 'XXX', mode: 'driving', origin: 'XXX', destination: 'XXX', route_name: 'Travail', changeColor: true, showGreen: false, limitYellow: 5, //Greater than 5% of journey time due to traffic limitRed: 20, //Greater than 20% of journey time due to traffic traffic_model: 'best_guess', interval: 120000, //2 minutes showWeekend: false, allTime: false, startHr: 8, endHr: 10, hideOffHours: true, loadingText: "Chargement...", prependText: "Monsieur :", } }, { module: 'MMM-Traffic', position: 'bottom_center', classes: 'bright medium', //optional, default is 'bright medium', only applies to commute info not route_name config: { api_key: 'XXX', mode: 'driving', origin: 'XXX', destination: 'XXX', route_name: 'Travail', changeColor: true, showGreen: false, limitYellow: 5, //Greater than 5% of journey time due to traffic limitRed: 20, //Greater than 20% of journey time due to traffic traffic_model: 'best_guess', interval: 120000, //2 minutes showWeekend: false, allTime: false, startHr: 8, endHr: 10, hideOffHours: true, loadingText: "Chargement...", prependText: "Madame :", } }, { module: 'MMM-Traffic', position: 'bottom_right', classes: 'bright medium', //optional, default is 'bright medium', only applies to commute info not route_name config: { api_key: 'XXX', mode: 'driving', origin: 'XXX', destination: 'XXX', route_name: 'Nounou', changeColor: true, showGreen: false, limitYellow: 5, //Greater than 5% of journey time due to traffic limitRed: 20, //Greater than 20% of journey time due to traffic traffic_model: 'best_guess', interval: 120000, //2 minutes showWeekend: false, allTime: false, startHr: 8, endHr: 10, hideOffHours: true, loadingText: "Chargement...", prependText: "Nounou :", } }, { module: "newsfeed", position: "bottom_bar", config: { feeds: [ { title: "France 24", url: "http://www.france24.com/fr/france/rss" } ], showSourceTitle: true, showPublishDate: true } }, ] }; /*************** DO NOT EDIT THE LINE BELOW ***************/ if (typeof module !== "undefined") {module.exports = config;} |
Suite à cet article, nous avons vu comment paramétrer le fichier de configuration pour obtenir un miroir un peu plus agréable à regarder. Toutefois, ce fichier n’est pas le seul qui peut être utilisé pour modifier l’affichage, en effet, si vous désirez changer les couleurs utilisées par exemple, il faudra pour se faire, modifier le fichier custom.css, mais ces autres modifications feront l’objet d’un autre article.
Summary
6.3 Lors de cette étape, la principale difficulté réside dans la configuration des différents modules. Si en soit, cela ne présente pas de problème, la multiplication des modules et des différentes dépendances peut s'avérer compliquée. Plus un module va nécessiter de configuration avancée, plus cela va demander de l'attention et la patience de votre part.