Do it yourself ! Construire son miroir connecté

Miroir-connecté

Miroir, miroir, dis-moi quel temps fait-il aujourd’hui ? Le miroir magique est bien plus qu’un conte, il est devenu une réalité ! L’IoT envahit les maisons et le digital s’installe confortablement dans votre salle de bain. Se doter d’un miroir intelligent permet de joindre l’utile à l’agréable : accédez à vos applications (météo, actualités, calendrier ou encore trafic routier) pendant vos trois minutes réglementaires de brossage de dents, ou définissez un service à la carte en programmant vous-même votre miroir connecté ! Suivez le guide, je vous explique comment y parvenir pas à pas.

 

LE MATÉRIEL NÉCESSAIRE :

  • Dalle LCD 17 pouces (d’un ancien portable HS)
  • Carte contrôleur vidéo et son câble LVDS
  • Raspberry PI 3
  • Carte mémoire Micro SD 16Go
  • Transformateur 220V /12V pour la carte vidéo et l’écran
  • Transformateur 12V /3V pour le Raspberry PI
  • Câble HDMI
  • Câble électrique
  • Cadre blanc 30×40 avec vitre
  • Film semi transparent
  • Plaque de polystyrène à découper de 5mm
  • Plaque de bois de 5mm
  • Scotch
  • Pistolet à colle

 

PARTIE 1 : UN PEU DE BRICOLAGE

Un trou est réalisé en bas au milieu du cadre afin de faire passer le câble d’alimentation secteur. La vitre est posée à plat pour y pulvériser de l’eau savonneuse (sans alcool) et posez le film semi. Étalez-le avec une carte rigide de type carte bancaire afin d’enlever au maximum les bulles d’air entre le film et la vitre. Essuyez bien et laissez sécher. La vitre est ensuite remise dans le cadre, film vers l’intérieur du cadre.

Miroir connecté 1 Miroir connecté 2

La dalle LCD est placée derrière la vitre, centrée et calée de chaque côté par des bandes de polystyrène. Elles sont fixées par du scotch qui permettra aussi d’isoler la partie électronique de l’écran. Le câble LVDS est connecté à l’écran et fixé avec du scotch afin de l’immobiliser.

Une plaque de polystyrène de la taille du cadre est ensuite positionnée pour protéger l’écran des vis utilisées pour fixer les différents composants. La plaque de polystyrène comporte une encoche afin de pouvoir faire passer le câble LVDS de la carte contrôleur vers l’écran.

Placez ensuite la plaque en bois qui comporte la même encoche, sur laquelle sont fixées les vis, le capteur infrarouge (inutilisé pour le moment), la carte contrôleur vidéo et le panel comportant les boutons de marche / arrêt, de volume et de configuration. Le câble LVDS est raccordé à la carte contrôleur vidéo.

Miroir connecté 3 Miroir connecté 4

Les deux transformateurs sont fixés en bas de la plaque de bois à l’aide du pistolet à colle. Le câble d’alimentation est passé à travers le trou réalisé dans le cadre et est raccordé à l’entrée du transformateur 220V / 12V. Un second câble est raccordé de la sortie du transformateur à l’alimentation de la carte vidéo, un troisième vers le transformateur 12V / 3V, puis un quatrième en sortie de ce transformateur vers une prise mini USB pour alimenter le Raspberry Pi. Le câble HDMI est connecté entre le Raspberry Pi et l’entrée HDMI de la carte vidéo.

Miroir connecté 5 Miroir connecté 6

 

PARTIE 2 : EN AVANT POUR LA PROGRAMMATION !

Téléchargez l’OS Raspbian et installez l’image Raspbian sur la carte micro SD avec le programme Etcher. Pour accéder au terminal Linux, nous utiliserons un clavier et une souris sans fil avec dongle USB. Le démarrage de l’OS prend un peu de temps la première fois, pas d’inquiétude ! Il faut ensuite configurer le langage, la localisation, le type de clavier, le mot de passe du compte administrateur et la configuration internet.

Une fois cette configuration effectuée, vérifiez les mises à jour avec les commandes :

sudo apt-get upgrade (–fix-missing)
sudo apt-get update (–fix-missing)
sudo apt-get dist-upgrade (–fix-missing)

Si des mises à jour ont eu lieu, lancez un reboot avec :

sudo reboot now

Nous sommes maintenant prêts pour installer l’application MagicMirror avec les commandes :

git clone https://github.com/MichMich/MagicMirror
cd MagicMirror
npm install
cp config/config.js.sample config/config.js

MagicMiror pourra ensuite être lancé par la commande npm start dans le répertoire MagicMirror. Il faut désormais configurer le programme et installer des modules additionnels pour afficher les différentes informations :

  • Affichage de la date
  • Affichage de la météo
  • Affichage du calendrier des vacances
  • Affichage des informations 20 minutes (via leur flux RSS)
  • Affichage des informations de trafic de certaines lignes de bus et de métro
  1. Affichage de la date :

Afin que la date soit affichée avec le format français, il faut mettre à jour dans le fichier config/config.js, les données :

    language: « fr »
timeFormat: 24
units: « metric »

  1. Affichage de la météo :

Afin de pouvoir afficher la météo, il faut tout d’abord installer le module additionnel openmapweather. Positionnez-vous dans le répertoire ~/MagicMirror/modules/ et clonez le repository Git :

git clone https://github.com/sathyarajv/MMM-OpenmapWeather.git

Ajoutez la configuration correspondante dans le fichier config/config.sj de MagicMirror :

{
                     module: "MMM-OpenmapWeather",
                     position: "top_left",
                     config: {
                                   location: "Saint-Denis,FR",
                                   locationID: "2980916",
                                   appid: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
                                   colorIcon: true
                     }
       },

Afin de pouvoir se connecter et récupérer les informations météo, inscrivez-vous gratuitement sur openweathermap et générez une clé appid à renseigner dans le bloc d’informations.

  1. Affichage du calendrier des vacances :

Mise à jour des informations dans le fichier config.js pour aller chercher les informations sur le site du gouvernement.

{
                    module: "calendar",
                    header: "Vacances",
                    position: "top_left",
                    config: {
                                  maximumEntries: 4,
                                  calendars: [
                                                {
                                                               symbol: "calendar-check-o",
                                                               url: "https://cache.media.education.gouv.fr/ics/Calendrier_Scolaire_Zone_C.ics"
                                                }
                                  ]
                    }
},

 

  1. Affichage des informations 20 minutes via leur flux RSS

Ajoutez dans le fichier config.js :

       {
                     module: "newsfeed",
                     position: "bottom_bar",
                     config: {
                                   feeds: [
                                                 {
                                                                title: "20 Minutes",
                                                                url: "http://www.20minutes.fr/rss/actu-france.xml"
                                                 }
                                   ],
                                   showSourceTitle: true,
                                   showPublishDate: true,
                                   broadcastNewsFeeds: true,
                                   broadcastNewsUpdates: true
                     }
       },

 

  1. Affichage des informations de trafic de certaines lignes de bus et de métro

Installez le module MMM-Paris-RATP-PG en clonant le repository dans le répertoire modules dans le répertoire d’installation de MagicMirror. Puis lancer la commande :

npm install
dans le répertoire ../modules/MMM-Paris-RATP-PG/.

Il reste à ajouter le module dans le fichier de configuration config.js de MagicMirror :

{
                     module: "MMM-Paris-RATP-PG",
                     position: "top_right",
                     header: "Connections",
                     config: {
                                   debug: false,
                                   lineDefault: {
                                     hideTraffic: [
                                     ],
                                     conversion: { "Trafic normal sur l'ensemble de la ligne." : "Traffic normal"},
                                     updateInterval: 1 * 2 * 60 * 1000,
                                   },
                                   lines: [
                                     {type: "buses", line: 175, stations: "Porte+De+Saint-Cloud", destination: "A", firstCellColor: "#0055c8"},
                                     {type: "metros", line: "13", stations: "Chatillon+Montrouge", destination: "A", label: "13", firstCellColor: "#6ECA97"},
                                   ],
                     },
       },

Miroir connecté 7 Miroir connecté 8

Miroir connecté 9

Pour finaliser l’installation, il ne reste plus qu’à arrêter l’économiseur d’écran.

La dernière étape consiste à configurer le lancement (ou à relancer en cas de plantage) automatique de MagicMirror. Pour se faire, nous allons installer PM2 qui est un gestionnaire de process pour Node.js. Installation avec la commande :

Sudo npm install -g pm2

Configurez ensuite PM2 pour qu’il se lance au démarrage du Raspberry, il faut déclencher la commande pm2 startup qui affichera une autre commande à exécuter pour tout configurer. Créez ensuite le script qui sera appelé par PM2 pour lancer MagicMirror. A la racine du compte, créez le script mm.sh qui contiendra :

cd ~/MagicMirror

DISPLAY= :0 npm start

Sauvegarder ce script et en modifier les droits avec chmod *x mm.sh.

Il est maintenant possible de lancer MagicMirror via PM2 avec :

pm2 start mm.sh

Sauvegardez l’état de pm2 avec :

pm2 save

Miroir connecté 10Désormais, MagicMirror sera automatiquement lancé au démarrage du Raspberry, ou redémarré en cas d’arrêt ou de plantage. Si vous avez besoin d’arrêter MagicMirror temporairement, exécutez la commande pm2 stop mm

Le SSH a été activé sur le Raspberry afin de pouvoir se connecter à distance depuis le PC via Putty et notamment faire les mises à jour des applications ou de l’OS Raspbian. À vous de jouer pour créer votre miroir 2.0 !

1 réponse
  1. Avatar
    Thubiere Maxime dit :

    On est pas loin de la démonstration de LVMH au salon #Vivatech 2019, de son miroir intelligent Artémis qui allie intelligence artificielle, réalité augmentée, commande vocale, reconnaissance d’objets et reconnaissance faciale dans une expérience immersive personnalisée.
    Bravo Nicolas!

    Répondre

votre commentaire

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

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

Inscription newsletter

Ne manquez plus nos derniers articles !