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.

159 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,

      Vous devriez essayer cette commande, qui je pense devrais résoudre votre problème :
      git reset --hard HEAD && git checkout master && git pull

      Tenez-moi au courant 🙂

      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

  11. Bonjour,
    J’ai du recommencer mon Miroir, mise à jour défectueuse ! Tant pis, pas grave !
    Avant sur les modules météo actuelle et prévision, j’avais réussi à avoir des icones en multicolor. Je ne sais plus comment j’avais fait et où j’avais trouver l’astuce, j’aurais dû noter !!
    Si vous avez une idée ?
    Merci pour le soutien.
    Ferbie

      1. Merci pour la réponse. Panne internet depuis dimanche ! En fait, j’ai retrouvé les icônes animées pour la météo. Voir ci-dessous ça peut servir !
        Un lien sur le forum : https://forum.magicmirror.builders/topic/7227/changing-icons-of-the-modules-current-weather-and-weather-forecast/41
        Il y a d’autres exemples bien sûr.

        « ICONES COULEUR ANIMÉES pour météo
         https://www.amcharts.com/free-animated-svg-weather-icons/
        toutes les icônes dans un répertoire appelé «icon» (/ home / pi / MagicMirror / css / icon) dans le répertoire css et configure: custom.css (/home/pi/MagicMirror/css/custom.css)

        exemple : .currentweather .weathericon {
        position: absolute;
        z-index: 0;
        height: 180px;
        right: 160px;
        margin-top: -65px;
        } »

        En revanche, j’ai, depuis la réinstall, un souci d’horaire avec les agendas google : l’heure sur google agenda (par exemple 9:00 h) affiche sur le miroir 7:00h, donc 2 heures avant, c’est un évènement répétitif. Pour les événement unique, l’heure est exacte, ainsi que l’affichage du module « Clock » bien sûr. J’ai cherché, modifier des fuseau horaire, sans succès ! Une solution ?? Ou c’est le lien entre google agenda et le miroir qui fait défaut pour les événements récurrents ! ou un bug dans le module « calendar » !
        Merci
        Dommage qu’il n’y ai pas plus de blog français sur le sujet.

        1. Pas de soucis, tant que je peux aider, j’en suis ravi !

          J’avais pensé à mettre aussi les icônes animés sur le mirroir, mais il est écrit dans le commentaire suivant à ton lien qu’une fois cette manipulation faite, cela génère une utilisation processeur assez folle (quasiment 100% tout le temps) et surtout, cela risque de faire chauffer énormément le Raspberry Pi (qui pour ma part, n’est pas équipé de refroidissement passif en plus).

          Pour ce qui est du décalage horaire, cela s’est également produit chez moi récemment, mais après un redémarrage automatique (il redémarre tous les week-ends) le problème ne s’est pas reproduit…

          Je reste à ta disposition si tu as encore des questions.

          Bon courage

          1. L’anomalie des horaires est réglée. Apparemment une histoire de temps UTC qui prenait le pas sur le fuseau horaire, ce que j’ai compris. Une mise à jour a été faite sur le MM. Merci pour les réponses. Je suis débutant moyen ! Et plus très jeune de surcroit ! Dommage qu’il soit difficile de trouver des renseignements français, si vous avez des adresses, des sites, je suis preneur. Dans mon secteur (Moselle) je n’en connais pas qui utilise le MagicMirror !

          2. Ravi que votre problème soit résolu. Et pour répondre à votre question, vous ne trouverez personne qui vous fera une démo du Miroir, c’est un produit totalement « Do it Yourself », surtout qu’avec l’émergence des assistants connectés type Google Home ou Alexa, l’intérêt se perd petit à petit sur certaines fonctionnalités.

  12. bonjour, y’a t il moyen de mettre la metéo en français ? et pareil pour le jour (date ) ? je ne trouve nul par si cela est possible.

    grace a vos tuto j’ai reussi a me mettre tous les modules que je voulais !!! merci a vous

    1. Bonjour,

      Pour que votre miroir soit en français, il suffit juste de rajouter l’option suivante dans le fichier de configuration :
      language: "fr",

      J’espère que ça fonctionnera pour vous.

  13. Bonsoir
    le placement d’un module a t-il un importance dans le placement du config.js ?
    pour le module compliment pour l avoir en Français comme dans votre exemple
    faut il aller dans le fichier config/config.js .
    Cordialement

    1. Bonjour,

      Les modules utilisent la langue par défaut définie dans le fichier config.js. Toutefois, le module compliment ne change pas la langue, si vous voulez avoir des compliments en français, il vous fait les saisir directement dans le fichier de configuration comme cela est indiqué dans l’exemple.

      Bon courage

  14. Bonjour
    pourriez vous m aider pour le module compliments pour moi l avoir en Français comme votre exemple
    je suis allé sur le GitHub sur le module compliments je ne comprend pas quand il indique
    Pour utiliser ce module, ajoutez-le au tableau des modules dans le config/config.jsfichier:
    merci pour votre aide

    1. Bonjour,

      Désolé du retard dans ma réponse, mais pour que le module ajoute des commentaires en français, vous devez modifier le fichier de configuration directement et ainsi ajouter vos compliments, et cela fonctionnera.

      Bon courage

  15. Bonsoir EMMANUEL
    Est il possible de modifier la taille de l ‘horloge , j’ai crée un fichier custom.css j ai ajouté l intitulé du module
    puis width avec le pourcentage voulu mais rien se passe cela fonctionne pour mon module Photo ,
    auriez vous la solution .

    Merci pour votre aide
    Cordialement
    Patrick

  16. Bonjour,
    Excellent les modules
    Je suis novice, a quoi correspond le calendar en local? J’aimerai implémenter le calendar des sortie du tri et poubelle.

    Bonne journée Merci

    1. Bonjour,

      Pour le calendrier en local, il doit à la base me servir pour la même chose que vous, à savoir implémenter les jours de sorties des poubelles.
      Comme ça, plus d’erreurs pour savoir quand on doit sortir la poubelle de recyclage 🙂

      Bon courage dans votre création.

  17. Super Tuto.
    Merci pour ce travail. Mon miroir est en cours de réalisation grâce à vous.
    Merci encore pour ce beau travail et ce partage.
    Une question Mapbox prend-il toujours le trajet le plus court. Pouvons nous par exemple éviter les péages.??
    Une deuxième question faut ‘il 2 tokens différents pour 2 itinéraires. Apparement oui, lorsque je mets un deuxième module MMM-traffic cela me met invalid API.

    Merci beaucoup

    1. Bonjour,

      Malheureusement, je ne maîtrise pas du tout MapBox. Pour tout avouer, je ne suis pas fan de cette nouvelle version pour les trajets, je les trouve bien moins bien optimisés que les trajets Google Maps.

      Concernant les tokens, je vais jeter un œil à l’occasion, je ne saurais le dire pour le moment.

      Bon courage.

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.