Publié le 21 octobre 2018 - par

Magic Mirror avec le Raspberry Pi

Petit article pour parler d’un projet qui a échappé au blog jusqu’ici : Le Magic Mirror. Le Magic Mirror (miroir magique) est un projet Raspberry Pi très populaire, qui permet de concevoir un miroir intelligent modulaire.

Petite vidéo pour vous faire une idée d’implémentation, ici le projet est couplé avec l’assistant Kalliopé, déjà couvert dans ce blog.

Le projet est modulaire, vous pouvez donc afficher toutes sortes d’informations comme :

  • la date et l’heure
  • la météo
  • vôtre agenda
  • des news
  • des citations
  • l’horaire de bus/train et autres moyens de transport
  • une TODO list
  • le trafic routier
  • des informations provenant de modules connectés au Raspberry (température, humidité, pression atmosphérique, etc..)
  • l’Informations liées à vos éléments domotiques 

Certain module sont natif et disponible immédiatement après installation, les autres sont communautaire et à installer manuellement.

La liste des modules natifs est là. Et la liste des modules communautaire est disponible ici.

Il est bien sur possible de créer son propre module. Le projet est codé en javascript et basé sur nodejs. La documentation pour vous aider dans ce sens est ici.

Préparation du raspberry

Installation d’un gestionnaire graphique de bureau

Cette partie de l’installation est nécessaire si vous avez installé un Raspbian Lite, c’est à dire dépourvu d’interface graphique. 

Installation d’un serveur graphique :

On configure le Raspberry pour qu’il utilise le gestionnaire graphique de bureau au démarrage :

Rendez vous dans “Boot Options” et passez l’option sur  “Desktop Autologin”

On installe d’autres paquets et librairies nécessaire à l’installation :

Pulseaudio s’est installé en même temps que le gestionnaire de bureau. Sa suppression est recommandée afin de laisser le programme par défaut Alsa gérer le son si vous pensez coupler le système à un assistant vocal :

On redémarre une première fois pour appliquer les changements :

Vous devriez cette fois démarrer sur un environnent de bureau.

Désactiver le curseur de la souris

On ajoute un petit programme qui va se charger de cacher le curseur de la souris automatiquement :

Incliner l’écran

Si vous voulez incliner l’écran, éditez le fichier /boot/config.txt en ajoutant le flag display_rotate selon la syntaxe suivante :

Ou le numéro de config est :

  • display_rotate=0 Normal
  • display_rotate=1 90 degrés
  • display_rotate=2 180 degrés

Par exemple :

Full screen

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

Timezone

Vous allez forcément utiliser le module qui permet d’afficher l’heure sur vôtre miroir. Ce module se base sur l’heure du système, il est donc préférable que ce dernier soit réglé sur une heure française.

Lancez le gestionnaire de configuration Raspbian :

Rendez vous dans l’onglet “Timezone”, puis sélectionner “Europe”, puis “Paris” pour basculer sur l’heure Française :

Par ailleurs, être à la bonne heure est aussi plutôt appréciable.

Pour cela on utilise le protocole NTP (Network Time Protocol). C’est un protocole qui permet à un ordinateur de synchroniser son horloge sur un autre ordinateur avec une précision plus élevée via internet.

Installation du paquet qui va bien :

Lancement du deamon : 

On édite le fichier /etc/ntp.conf et on modifie les lignes « server » pour se synchroniser sûr les serveurs français :

On redémarre le service pour prendre en compte les changements :

Vérifiez que l’heure est correcte avec la commande suivante :

Désactiver l’écran de veille

On souhaite voir uniquement l’affichage du Magic Mirror sans interruption. Par défaut Raspbian possède un écran de veille qui se lance automatiquement après une période d’inactivité.

Éditez /etc/xdg/lxsession/LXDE/autostart et .config/lxsession/LXDE/autostart, supprimer ou commentez la ligne suivante :

Et ajouter la ligne suivante en fin de fichier

Enfin, éditez le fichier /etc/lightdm/lightdm.conf et ajouter la ligne suivante dans la section [Seat:*] :

Il faut redémarrer le Rpi pour prendre en compte ces changements.

Magic Mirror

Installation

L’installation est très facile, depuis un Raspbian fraîchement installé :

Vous avez à présent un dossier MagicMirror dans le “home” de l’utilisateur “pi”. Placez vous dans ce dossier et lancer l’installation des modules javascript. Normalement c’est une étape qui a déjà été effectuée pendant le processus d’installation mais cela ne coûte pas grand chose de vérifier que tout est bien là :

On va activer la configuration par défaut, pour cela on copie juste le fichier :

Maintenant vous pouvez lancer le Magic Mirror

Si vous être en direct sur le Rpi, utilisez cette commande :

Si vous êtes en SSH, utilisez cette commande :

Normalement vous devriez avoir un résultat comme celui-ci à l’écran :

Faite un ctl-C pour stopper le programme.

Démarrage automatique

On va faire en sorte que le projet se lance automatiquement après chaque reboot du Rpi.

Installez le packet PM2 qui est un gestionnaire de processus node :

On lance le gestionnaire depuis le dossier MagicMirror :

Cette commande va vous retourner une commande à exécuter qui devrait ressembler à ceci :

Exécutez la commande comme demandé. Magic Mirror est à présent lancé automatiquement à chaque démarrage.

Pour relancer Magic Miror vous pouvez à présent faire :

Configuration

Vous l’avez compris, la configuration se passe dans le fichier config/config.js. Je vous recommande d’éditer ce dernier avec un IDE comme VScode afin de détecter vos erreurs de syntaxe. Le fichier est écrit en javascript.

Le bon workflow pour travailler avec ce type de projet est :

  • copier le fichier avec WinSCP (via SSH) sur votre station de travail Windows
  • Editer avec VScode le fichier
  • Envoyer à nouveau le fichier sur le Rpi avec WinSCP
  • Relancer le service Magic Mirror pour prendre en compte les changements

Dans le fichier config.js, vous pouvez commencer par mettre la langue du miroir en français :

Les modules

Dans ce fichier, vous aurez à jouer principalement avec la variable “modules” qui contient la liste des modules chargés sur votre miroir et leurs configurations.

Un module c’est quoi ? C’est un plugin qui va effectuer une tache et dans la plus part des cas afficher une information sur le miroir.

Une déclaration de module s’effectue avec la syntaxe suivante :

Par exemple :

Voici la liste des principaux éléments que compose un module :

Option Description
module Nom du module. Par example clockcalendar ,mymodule.
position

La position du module sur le miroir. Les valeurs possible 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. 

Vous pouvez trouver la liste complète sur la documentation officielle ici.

Au niveau des “positions”, cette image pourra vous aider :

top_bar et bottom_bar en gris
top_left et bottom_left en rouge
top_center et bottom_center are bleu
top_right et bottom_right are vert
upper_third en jaune
middle_center en cyan
lower_third en magenta

Utilisation d’un module natif

Les modules natifs sont les modules déjà présent après installation du Magic Mirror. Vous pouvez trouver la liste complète ici.

Pour les utiliser, vous devez juste les déclarer et les configurer dans vôtre fichier config.js.

Par exemple, je souhaite afficher un simple texte à l’écran, je vais utiliser le module “HelloWorld”. Si je regarde sa documentation, je peux voir que seule la clé “text” est nécessaire dans sa configuration. Je peux donc écrire :

Le résultat sera le suivant :

Un exemple avec le module “newsfeed”, qui n’est autre q’un lecteur de flux RSS. Ici je le configure pour lire le flux du site “Le Monde” :

Et maintenant ma page ressemble à ceci :

Installation d’un module communautaire

La force du projet réside dans sa communauté. Vous trouverez sur cette page une liste de module que vous pouvez installer sur votre miroir.

Pour installer un module c’est très simple, il suffit de :

  • le télécharger et de le placer dans le dossier “modules” qui se trouve à la racine du dossier MagicMirror.
  • Installer les librairies associées au module
  • Ajouter la déclaration du module à vôtre config.js

Généralement, les modules sont hébergés sur Github. Le plus simple est donc d’installer Git :

On va maintenant pour l’exemple, installer un module communautaire: Trello Ce dernier permet d’afficher une liste de taches.

On se place dans le dossier “modules” :

On clone les sources, on se place dans le module et on installe les librairies associées :

Voila à quoi ressemble maintenant le répertoire “modules” :

  • default contient les modules par défauts du projet Magic Mirror
  • MMM-Trello est notre nouveau module fraîchement installé
  • node_modules est le répertoire qui va héberger les librairies nécessaires au fonctionnement de vos modules

Voila, le module est prêt a être utilisé. Pour l’afficher il faut mettre à jour notre fichier de configuration config.js. La documentation du module permet de savoir comment le configurer.

On y apprend qu’il faut :

Je vais avoir une configuration qui ressemble à ceci :

Et voila le résultat :

Conception du miroir

La partie conception est totalement libre. Je ne peux que vous recommander de fouiller le forum pour y trouver des idées. Il y a également pleins de vidéo sur Youtube.

Certain travail avec le cadre avec du bois et d’autres avec du plastique via de l’impression 3D.

Au niveau matériel vous avez obligatoirement besoin :

  • D’un Raspberry
  • Un écran
  • Un miroir sans tain (en anglais un Two Way Mirror)

Pour le miroir, vous pouvez passer par un miroitier dans vôtre région ou trouver sur internet des miroir moins chère en acrylique. La encore le forum vous sera d’une grande aide.

Bonus : relier Magic Mirror à Kalliopé

Il est possible de relier votre Magic Mirror à plusieurs modules de reconnaissance vocale. La liste complète se trouve ici. Parmi eux, vous trouverez Alexa et Google Home pour les assistants commerciaux les plus connus.

Dans cette partie je vous explique comment relier vôtre Magic Mirror à Kalliopé.

Je pars du principe que Kalliopé est déjà installée sur vôtre Raspberry. Si ce n’est pas le cas je vous invite à regarder cet article dédié.

Du coté de MM: Installation du module

Du coté du Magic Mirror, on se place dans le dossier module, on clone et on installe le module Kalliope.

On ajoute le module à nôtre config.js

Voila. Le module est prêt à recevoir les phrases prononcées par Kalliopé.

Du coté de Kalliopé: Installation du neurone

On se place dans nôtre dossier kalliope (votre starter kit) et on installe le neuron :

On va créer un synapse dans notre brain.yml qui se charge d’envoyer les phrases prononcées par Kalliopé au Magic Mirror. Les phrase seront capturées par le module, qui les affichera à l’écran :

Ici, l’adresse mm_url est en 127.0.0.1 car Kalliopé est installée sur le même Rapsberry que Magic Mirror. Si vous avez l’installation sur deux Rapsberry différents vous devez mettre à jour cette partie. Par exemple http://192.168.0.10:8080/kalliope.

A chaque fois que kalliope parle, elle place la phrase qu’elle a prononcé dans une variable nommée “kalliope_last_tts_message”. Cette variable est placée dans la mémoire de Kalliopé, accessible via “kalliope_memory”. L’article dédié sur kalliope explique plus en détail cette partie.

Le synaspe est prêt. La dernière étape consiste à relier ce synapse au “hook” “on_start_speaking” qui va se charger le lancer le synapse “mm-say” à chaque fois que Kalliope parlera.

On édite nôtre settings.yml, dans la partie hook :

C’est terminé. Apres un redémarrage du MM et de Kalliope vous devriez à présent voir afficher tout ce que cette dernière vous dit.

Vous êtes prêt à vous lancer dans votre projet de Magic Miroir ! 
N’hésitez pas à laisser vos commentaires, vos questions et vos retours qui permettront d’aider à améliorer l’article.

 

 

Share Button

13 réflexions au sujet de « Magic Mirror avec le Raspberry Pi »

    1. Nicolas Marcq Auteur de l’article

      L’écran est uniquement là pour afficher de l’information.
      Si vous voulez avoir une interaction il vous faut ajouter un module de voix comme Alexa, Google Home, Kalliope ou autre comme décris dans l’article.

      Répondre
  1. Onitsuo

    J’en ai fait une magic table avec un 3 B+ et le rendu est génial 😉
    simple et rapide à faire en plus.
    Pour accéder au tactile il vous faut un touch frame.

    Répondre
  2. axel

    Bonjour,
    j’ai l’erreur suivante sur la partie concernant NTP :

    pi@raspberrypi:~ $ apt-get install ntp
    E: Could not open lock file /var/lib/dpkg/lock – open (13: Permission denied)
    E: Unable to lock the administration directory (/var/lib/dpkg/), are you root?

    Que faire?
    Merci d’avance.
    Axel

    Répondre
  3. axel

    merci.
    J’ai réussi à tout faire jusqu’au bonus pour relier magic mirror et Kalliope !
    Sur l’écran, j ai : Magic Mirror2 Please create a config file …

    j’avais rajouté comme demandé ceci au config.js :
    {
    module: “MMM-kalliope”,
    position: “upper_third”,
    config: {
    title: “Kalliope”
    }
    }

    Pourriez-vous me dépanner svp?
    pouvez-vous également préciser les chemins des fichiers pour éviter les erreurs?
    merci
    Axel

    Répondre
  4. axel

    finalement, j’ai trouvé l’erreur, il manquait une virgule à la fin .

    Par contre, MM et Kalliope fonctionnent bien mais je vois pas les réponses de kalliope s afficher sur l’écran (du miroir). Une idée?

    cdt

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Complétez ce captcha SVP * Time limit is exhausted. Please reload CAPTCHA.

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