close
Unix, Linux & Tips

Les tribulations d'un admin sys

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 :

  • 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 (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 :

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) :

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.

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.

Description : Ce module permet d’afficher les notifications lorsqu’une mise à jour du mirroir 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Review overview

Mise en oeuvre 5
Connaissances nécessaires 7
Optimisation 7

Summary

6.3 Compliqué 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.

Tags : magicmagic mirrormagiquemiroirmiroir magiquemirrorRaspberry pi
Emmanuel V.

The author Emmanuel V.

140 commentaires

  1. Merci pour ta réponse je viens de recevoir aujourd’hui le pi et la carte je vais mettre ça en chantier ce week-end, je te tiens informé, merci pour ton aide
    Cordialement
    Manu

  2. bonsoir j’ai reçu et installé la bête, mais j’ai un soucis le MM ne démarre pas automatiquement quand je fais un reboot! une idée, merci pour ton aide je pense avoir fait comme il faut, mais bon…

    1. Bonjour,

      Oui, c’est tout simple, exécute la commande suivante juste avant :

      pi@raspberrypi:~/MagicMirror $ git reset --hard HEAD
      pi@raspberrypi:~/MagicMirror $ git pull

      Et le tour est joué 🙂

  3. Bonjour
    Super boulot !! très Bien expliqué et agréable à lire
    J’ai une petite question j’ai paramétré le module compliment
    il affiche correctement la même chose que ton réglage par contre il ne semble pas configuré selon les heures
    Les phrases défilent en boucle donc je peux avoir “bonne soirée” à 14 h
    y a t il un moyen d’y remédier ?
    Merci

  4. Bonjour

    je vous remercie pour le tuto , je me suis lancé dans le projet
    j’ai réussi je pense a créer une clé API sur google, mais je n’arrive pas à faire fonctionner le module
    (rien ne s’affiche à l’écran )
    pouvez vous faire une procédure pour développer cette partie ?

    merci d’avance

    Valentin

    1. Bonjour, je suis également en train de progrésser sur le MagicMirror, et ci dessous, les lignes de mon “config.js” pour la météo et les prévisions météo.
      bien sûr il faut modifier la ville et le code API.
      On trouve les villes sur le lien cité dans le module.
      Si ça peut aider, le mien marche bien.

      De mon côté, je cherche à augmenter la taille des chiffres de l’horloge, en vain !
      Aussi des renseignements concernant le module par défaut “alert”, comment le faire apparaître et le configurer ?

      @+, Ferbie

      // meteo
      {
      //disabled: true,
      module: “currentweather”,
      header: “La m&eacutet&eacuteo de “,
      position: “top_right”,
      config:
      {
      location: “trifoully”,
      locationID: “1234567”, //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
      appid: “a97213565fgbyt535824846512e01e3fe006cdb”,
      //showIndoorTemperature : true,
      //showIndoorHumidity: true
      }
      },

      // prévision météo
      {
      //disabled: true,
      module: “weatherforecast”,
      header: “Pr&eacutevision m&eacutet&eacuteo”,
      position: “top_right”,
      config:
      {
      location: “trifoully”,
      locationID: “2981492”, //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
      appid: “a972840648qs824qsdf65446512e01e3fe006cdb”,
      maxNumberOfDays: 3,
      fade:false
      }
      },

  5. Bonjour,
    Super tutos à suivre à la lettre ! Mon miroir fonctionne bien. Une question cependant sur le calendrier : avec un calendrier google ou un fichier ICS local, pas de soucis. J’ai un calendrier sur un nas synology ‘calendar’, et là, pas moyen de le synchroniser. L’adresse de ce genre de calendrier (CalDav) est dans le style:https://chezmoi.myds.me:5650/caldav/Agenda/home/. Donc pas de ICS !
    Y a t-il une solution ?
    Encore félicitations et vivement la suite !
    FerBie

  6. Bonjour,
    J’ai déjà commenté ce formidable tuto ! mais j’ai une question parmi d’autres !!! A quoi sert le module par défault : ALERT ? Comment le configurer, affiche t-il les alertes du calendrier par exemple ?
    Merci de votre soutien.

    1. Bonjour,

      Merci pour votre retour. Je ne suis plus trop actif sur le miroir en ce moment, car j’ai la tête à d’autres projets (notamment liés à l’impression 3D). Mais pour répondre à votre question, le module ALERT est un module par défaut du miroir qui permet d’avoir les remontées d’alertes des autres modules.

      Plus d’informations sont disponibles ici : ici

      1. Merci pour la réponse N°2 , mais une question cependant sur le calendrier : avec un calendrier google ou un fichier ICS local, pas de soucis. J’ai un calendrier sur un nas synology ‘calendar’, et là, pas moyen de le synchroniser. L’adresse de ce genre de calendrier (CalDav) est dans le style:https://chezmoi.myds.me:5650/caldav/Agenda/home/. Donc pas de ICS !
        Y a t-il une solution ?
        Encore félicitations et pourquoi pas la suite !
        Je suis moi-même justement en train de faire une l’impression 3D !
        cordialement,

  7. Bonjour/Bonsoir
    je viens d’intaller MagicMirror sur Ubuntu, juste pour essayer avant l’acquisition d’un Raspberry Pi. Je cale au niveau de la configuration. Je ne trouve pas le fichier de cinfiguration.
    Votre aide me serait tres utile.Merci.

  8. Bonjour,
    Merci pour tout ce travail que vous avez partagé.
    Grace à vous le MM fonctionne .
    Maintenant je vais le personnaliser un peu plus.
    J’ai été obligé de m’y reprendre à plusieurs fois pour le redémarrage automatique, mais j’y suis arrivé ce qui veut dire qu’il n’y a pas d’erreur dans votre tuto et c’est plutôt une belle performance avec un sujet aussi complexe.

  9. Bonjour, j’arrive vraiment a rien avec les mises a jours.
    Je fais bien les commandes : git reset –hard HEAD et git pull
    mais j’ai toujours les memes fichiers qui me bloque je dois pas etre le seul c’est pas possible !
    Je les supprimes avec winscp mais ca reviens toujours et j’ai donc toujours message de mise a jour a faire.
    Merci de l’aide

    1. Bonjour,

      Pouvez-vous partager un résultat des commandes? Il faudrait que je puisse savoir quels sont les fichiers qui sont bloquants; en effet, certains fichiers sont bloqués par le soft et peuvent être modifiés alors que certains autres qui ont été modifiés par vous peuvent vous faire perdre certaines modifications.

  10. Bonjour, merci de la reponse, voici ce que j’ai apres le git reset et git pull :

    Modifications non indexées après reset :
    package-lock.json
    package.json
    vendor/package-lock.json

    pi@magicmirror:~/MagicMirror $ git pull
    Mise à jour 500147e..447c0bf
    error: Vos modifications locales aux fichiers suivants seraient écrasées par la fusion :
    package-lock.json
    package.json
    vendor/package-lock.json

    Veuillez valider ou remiser vos modifications avant la fusion.
    Abandon

    Ensuite je lance npm install et ca me donne toujours la 2.09.

      1. Bonjour, merci de la réponse, a force de chercher… c’est passé mais j’ai encore des erreurs et même si je fais des commandes comme il demande git pull fix –force il y a toujours des trucs pas a jour mais je pense que le principal est fait, j’ai eu un retour pour le téléchargement de la 2.11. Merci

Leave a Response

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