Yet another smart mirror

A force de découvertes dans l’univers de l’internet of things, je suis tombé sur instructables.com, une mine d’or sur le sujet. J’ai entre autres fait la découverte de plusieurs tutoriels sur la réalisation d’un smart mirror, aussi appelé magic mirror. J’ai alors décidé de me lancer dans ce petit projet de miroir intelligent que je partage ici, largement inspiré de l’instructable Magic Mirror du projet MagicMirror de Michael Teueuw, et alimenté par un Raspberry Pi B (rev2) généreusement offert par un ami.

J’ai fait le choix de mon côté de ne pas réutiliser les méthodes proposées dans les deux projets cités en introduction, dans le sens où mon raspberry pi étant un senior, je souhaitais le laisser un maximum tranquille. De fait, laisser un serveur node et des utilitaires en arrière plan tourner dessus 24h/24 ne me paraissait pas une bonne idée.
Donc j’ai déporté l’intelligence sur mon serveur NAS (un synology), le raspberry se contente d’avoir une page web qui s’ouvre au démarrage.
Attention : Ce qui va suivre est valable uniquement pour un Pi 1 B sous Rasbian Wheezy. Pas Jessie. Malheureusement, seul Chromium arrivait à animer les icônes de météo (et c’est trop classe pour faire l’impasse sur cette animation), or la petite manipulation pour installer Chromium sur Jessie ne fonctionne que sur les Pi 2 & 3. Donc avec mon Pi 1, et pour utiliser Chromium, c’était forcément Wheezy.
Disclaimer : Mon objectif en écrivant ce billet n’est pas de rédiger un instructable clef en main pour faire un miroir intelligent, mais plutôt d’essayer de synthétiser et de partager ce que j’ai pu apprendre sur le sujet des smart mirrors : Solutions existantes, problèmes rencontrés, solutions trouvées… En clair, il s’agit plus d’une série de propositions de guidelines que de recette stricte.
 

Le principe

Le principe est en fait assez simple quand on y pense… Il s’agit d’un écran devant lequel on va mettre un miroir double face. Une glace sans tain. Enfin bref, appelons-le comme on veut, l’idée est là. L’écran va afficher une page we noire avec du texte blanc. De fait, seul le blanc ressortira du mirroir !
On a donc juste besoin d’un écran, d’un ordinateur et d’un miroir sans tain. Bien sûr, aussi d’une boite pour isoler l’arrière du miroir de la lumière, mais aussi pour que ça fasse jolis. Oui, parce que quand même, le but c’est pas de le cacher dans un placard…
 

Matériel

Pour les budgets, je vais parler en dollars canadiens, le pourquoi du comment ici. L’équivalent en euros c’est environ x0.55 à peu de choses près.
Question prix donc, normalement on ne dépasse pas les 150-200$ pour un miroir intelligent. De mon côté j’ai eu la chance de pouvoir faire de la récup un peu partout et je m’en suis tiré avec un budget d’environ 50$, le plus cher ayant été les quelques outils.
Si vous ne pouvez pas faire de récup, voici le budget à prévoir :

• Ecran 17 ou 19 pouces, peut être plus grand : 50-60$ d’occasion. L’idéal c’est un écran LED, ça chauffe beaucoup moins et c’est plus léger. Pour ma part j’ai récupéré un vieil LCD au bureau avant qu’il parte au rebut.
• Raspberry pi avec carte SD, dongle wifi et boitier : 60$ (notez que si vous avez un Pi 3 pas besoin de dongle wifi). Là, j’ai profité d’un cadeau, j’ai eu la chance de ne devoir acheter que la carte SD de 8Go 🙂
• Miroir sans tain : J’ai opté pour la plaque en plexiglas (récupérée également) avec un film miroir sans tain à 10$ à appliquer dessus, mais le résultat fait franchement cheap. Le mieux c’est encore de passer par TapPlastic, ils ont une excellente réputation et le miroir revient à environ 50$
• Un mini câble VGA à 3$ car mon moniteur n’a qu’une entrée VGA (mini pour des questions de rangement dans le boitier)
• Un adaptateur HDMI to VGA à 6$ (inutile si le moniteur que vous avez a une entrée HDMI)

Le reste, c’est un peu de bois, de la pâte à bois, de la colle, de la peinture, une scie, quelques vis et des câbles vidéo ou ethernet : environ 30$, mais comptez seulement 15-20$ maxi si vous avez déjà du matériel. Il faut aussi avoir un serveur NAS ou n’importe quel moyen d’héberger une application Node.
 

Le montage du miroir intelligent

C’était tout une aventure… Ne voulant pas faire de frais sur une expérimentation de miroir intelligent et n’ayant pas amené mes outils au Canada lors de mon déménagement, je n’ai pas investi sur du matériel de bricolage. Aussi le résultat n’est pas parfait mais ira très bien pour mon prototype !
 

Film miroir double face

Pas très compliqué, mais relativement délicat… C’est le même principe que sur cette vidéo youtube. Un conseil : faites ça sur une grande surface nettoyée au produit vitre avec un chiffon qui ne laisse pas de fibre, dans une pièce fermée sans poussières qui volent…
On commence par asperger au spray la vitre d’un mélange d’eau et de liquide vaisselle. Puis, on asperge aussi le film au fur et à mesure qu’on décolle la partie protectrice, et on râcle à la spatule en silicone tout du long. N’hésitez pas à y aller généreusement sur le savon, ça séchera de toutes façons et ça fait glisser ! Si possible, équipez-vous d’une raclette comme sur la vidéo pour évacuer les bulles… Après ça, poser un film sur un smartphone paraîtra être un jeu d’enfant !
 

La boite

 

Concernant les dimension et le plan de montage

Inutile d’être rigoureux, d’autant que celles-ci dépendent grandement des dimensions de l’écran une fois sa coque retirée. L’essentiel et de faire une simple boite avec un cadre à l’avant.
Trois points importants :

1. Penser à prendre en compte les épaisseurs des planches lors des découpes (oui… oui oui…)
2. Prévoir un trou en dessous pour passer les câbles (aussi, oui…)
3. Prévoir des trous au dessus pour l’évacuation de l’air chaud (peuvent être remplacés par des mini ventilateurs, mais ça va faire du bruit)

 

 

 

 

La boite est terminée, plus qu’à ranger un peu tout ca le plus proprement possible.

Attention à la chaleur… Au début j’avais tout mis un peu comme je pouvais, mais le jour où je me suis brûlé un doigt en essayant d’attraper le pi je me suis rendu compte qu’il encaissait pas mal…
Alors oui, il sait encaisser justement de grosses températures, mais ce n’est pas une raison pour lui infliger ça gratuitement ! D’autant que vous ne voudriez pas qu’il grille bêtement… Peut-être un boitier avec un ventilateur pourrait être une bonne chose, ou alors poser un ventilateur directement dans la boite pour refroidir l’ensemble… J’avoue que c’est un morceau auquel je n’ai pas eu envie de m’attaquer pour le moment mais il faudrait…
Donc, un petit morceau de liège pour le « protéger » un minimum de l’écran qui chauffe (rappel : beaucoup moins de chaleur avec un écran LED), et minimum d’organisation et tadaa, un miroir intelligent tout beau tout bien rangé ! A partir de là, plus aucune excuse pour retarder la partie software… A l’attaque !
 

Software

Ici, je ne vais pas rentrer en détail dans la facon de développer une application Node. J’ai fait le choix de le faire au lieu d’utiliser une des nombreuses solutions existantes pour des raisons personnelles (apprendre ce langage et être plus autonome pour changer des choses).

Cela dit, si vous ne voulez pas tout développer vous-même vous pouvez aller vers des solutions existantes d’applications pour miroirs intelligents. Elles sont à mon sens de deux types : La version PHP et la version Node.
 

Version PHP

La version PHP a pour avantage sa simplicité, sachant que c’est LE langage répandu il sera plus simple de l’adapter. C’est ce qu’a utilisé Elicom dans son Instructable de miroir intelligent. Le code peut se retrouver sur son Github.

Je n’aime pas beaucoup cette version car l’actualisation des informations se fait par un refresh automatique de la page toute les 30 minutes. Ça veut dire que toutes les 30 minutes, votre miroir devient tout blanc quelques secondes. C’est comme ça que je faisais avant de vouloir aller plus loin sur l’application Node, et franchement c’est pas terrible…
L’idée derrière cette version est d’installer un serveur Apache sur le raspberry, puis de configurer le Pi pour lancer le navigateur au démarrage sur la page http://localhost en mode kiosque.
Nous verrons plus tard le coup du navigateur, car peu importe la solutions qu’on choisit (PHP / Node, NAS ou pas NAS, etc.) la manipulation sera exactement la même.
Pour installer le serveur Apache, rien de plus simple. Commençons par mettre à jour tous nos paquets (ca peut prendre un moment) :

sudo apt-get update && apt-get upgrade -y

Puis installons Apache :

sudo apt-get install apache2 apache2-doc apache2-utils
sudo apt-get install libapache2-mod-php5 php5 php-pear php5-xcache

Et voilà. Plus qu’à récupérer le code de la madame, à le modifier à votre convenance puis à le déposer sur votre Pi à l’emplacement /var/www/html/MagicMirror. Pour transférer vos fichiers, utilisez WinSCP ou Filezilla en mode SFTP, si vous avez activé les connexions SSH sur votre pi ca devrait fonctionner. Sinon, et bien vous avez un écran, alors par clef USB devrait aussi aller 🙂
 

Version Node, sur le Pi

C’est ma version préférée 🙂 La raison est simple : C’est rapide, élégant et fluide. En utilisant des websockets (que j’ai découverts en faisant cette mini-application) nous pouvons demander au serveur de continuellement se mettre à jour, mais de ne « déranger » le navigateur que lorsqu’il y a quelque chose à mettre à jour, et en plus sans s’embêter à rafraîchir le navigateur.
Si vous ne voulez pas vous embêter et « keep it simple », vous pouvez vous rendre sur le gituhb de Michael Teeuw (MichMich pour les intimes). Il a réalisé l’application MagicMirror² qui est une pure merveille avec des modules indépendants et une configuration aisée. Si vous n’optez pas pour cette solution toute prête, sautez ce paragraphe.
Il propose un script d’installation automatique qui fera tout le job, à éxecuter sur le Pi :

curl -sL https://raw.githubusercontent.com/MichMich/MagicMirror/master/installers/raspberry.sh | bash

Puis suivez les instructions de « MichMich » pour :

• Configurer le Pi
• Créer un court script de démarrage automatique 
• Configurer l’application

 

Lancer l’application web sur le NAS en mode autostart

Comme je le disais, j’ai pour ma part choisi d’héberger l’application node du miroir intelligent sur mon NAS. Rien d’extraordinaire à savoir, si ce n’est comment lancer une application node et la laisser tourner en background. Ceci mis à part, mon code est un peu crado je pense :

• Par manque de temps (et un peu de courage), j’ai été un fervent adepte du « Callback Hell ». En principe j’aurais du adopter les Promises.
• Je connais cette stack depuis quelques mois seulement.
• Je n’ai pas vraiment mis en place de tests quelconques, c’est le résultat de tâtonnements successifs.

Aussi, je préfère ne pas le partager ici simplement pour ne pas apporter plus de problèmes que de solutions à la personne qui choisirait de s’en servir… Si vous êtes développeur, vous trouverez l’exercice trivial : Il s’agit d’une page web mise à jour avec des websockets. Si vous ne l’êtes pas, je vous encourage à opter pour la solution du paragraphe précédent (Version Node, sur le Pi).
Quoi qu’il en soit, si comme moi vous préférez une installation manuelle pour faire tourner l’application sur un serveur NAS plutôt que sur un Pi, vous devrez y déposer les sources de l’application dans le répertoire du serveur web, puis lancer la commande npm install && npm start.
Cela dit, comme vous allez probablement le faire en SSH vous allez voir qu’en fermant la fenêtre du terminal le processus « node » va s’arrêter. Forcément. En plus, les applications node générées avec Express devraient plutôt être lancées par la commande npm start, plutôt que node monapp.js.
Pour y remédier à ces deux problèmes, deux choses à faire :
1- Modifier le package.json avec :

  "scripts": {
    "start": "nodemon ./bin/www"
  },

2- Installer PM2, pour pouvoir lancer l’appli node en background avec la commande

 pm2 start app.js

Et ça y est, l’application tourne en arrière plan, vos pouvez fermer le terminal !

Préparation du raspberry

Pour commencer, on va vouloir installer l’OS sur le raspberry. Pour cela, oubliez les instructions et commandes à taper dans le terminal… Les formats de fichier et tout ca, c’est un cauchemar pour moi. Sur Mac par exemple, optez pour ApplePi Baker, à télécharger ici. Simple à utiliser : Sélectionnez la carte SD, l’image de l’OS téléchargée sur raspberry.org.

Maintenant que nous avons un Pi prêt à l’emploi, on va s’empresser de le connecter à notre réseau par un câble ethernet, puis on va commencer à le préparer pour de vrai. Vous aurez besoin d’un clavier/souris pour le premier boot, puis que vous allez arriver sur u écran de configuration :

Tour à tour il faut :

• Étendre le système de fichier
• Vérifier dans les « Boot options » que le « Desktop autologin » est activé
• Modifier votre timezone

Maintenant que c’est fait, vous bootez, récupérez votre adresse IP locale et vous pourrez ranger le clavier et la souris : SSH power baby ! Pour ça, soit vous utilisez putty sur windows, soit vous êtes sur Mac et vous utilisez le terminal. Vous devez vous logger en tant que « pi ». Et le mot de passe par défaut est « raspberry ». Je sais, original…
 

Rotation de l’écran

L’écran est en mode portrait, vous voyez oà je veux en venir? Pour tourner l’écran de 90 degrés, éditer le fichier de config :

cd /boot
sudo nano config.txt

Puis rajoutez display_rotate=1 à la fin. Si vous voulez tourner l’écran dans l’autre sens pour des raisons de positions de ports USB de l’écran, mettez 3 comme valeur.
Si comme moi vous utilisez un Raspberry Pi model B, alors cherchez la ligne hdmi_force_hotplug=1 et dé-commentez la. Ensuite, sauvegardez les modifications.
 

Conclusion

Normalement, à ce stade vous devriez avoir votre miroir intelligent « up and running ». Partagez vos problèmes si vous en avez rencontré, ou vos succès si tout a fonctionné pour vous !
Pour ma part, cette première étape a été le point de départ d’une obsession pour l’internet of things… Je posterais bientôt des tutoriels comment piloter les lumières de son appartement avec son smartphone ou par la voix, pour un budget de moins de 30$ !

Update (30/08/2019)

Démarrer chromium au démarrage

Pour démarrer chromium au démarrage en mode kiosk, en ayant désactivé l’écran de veille et le curseur, installer unclutter puis éditer autostart. J’ai suivi en fait les instruction de MichMich (https://github.com/MichMich/MagicMirror/wiki/configuring-the-raspberry-pi) en rajoutant le lancement de Chromium.

sudo nano /etc/xdg/lxsession/LXDE-pi/autostart

Puis ajouter les lignes suivantes :

@lxpanel –profile LXDE-pi
@pcmanfm –desktop –profile LXDE-pi
@xscreensaver -no-splash
point-rpi
@xrandr –output HDMI-1 –rotate right
@unclutter -display :0 -idle 3 -root -noevents
@xset s noblank
@xset s off
@xset -dpms
@chromium-browser –kiosk http://localhost:1337

Lancer l’application nodejs au démarrage

J’ai créé, toujours en suivant le guide de MichMich, un script à la racine que j’ai appelé « MyMirror ». Voici son contenu :

cd ~/MyMirror
DISPLAY=:0 npm start

Puis, après avoir installé PM2 j’éxecute le script :

pm2 start MyMirror.sh

Puis je le sauvegarde pour qu’il se lance à chaque démarrage :

pm2 save