Aujourd’hui je vais vous présenter comment créer un home center sur un Raspberry équipé d’un écran tactile. L’avantage d’utiliser un Raspberry est que l’on va pouvoir communiquer avec des APIs (interface de programmation) pour avoir des informations sur notre environnement en temps réel mais aussi contrôler un appareil connecté, ici l’ampoule connectée Xiaomi !

[lwptoc]

Nous allons voir ensemble comment installer une interface graphique React ainsi qu’un serveur Python sur une carte Raspberry équipée d’un écran compris entre 3.5’’ et 7’’.

L’interface graphique ainsi que le serveur de contrôle sont déjà développés. Vous n’avez pas besoin d’avoir de compétences en développement particulières pour installer les fonctionnalités primaires de l’article, mais des connaissances en Linux Shell sont un plus.

Le code est open-source ! Si vous souhaitez le modifier ou apporter de nouvelles fonctionnalités qui vous correspondent plus, vous pouvez le faire directement en proposant une pull-request sur le gestionnaire de repositories GitHub (lien fourni plus bas)☺

Dans la première partie, vous retrouverez les choix d’utilisation du matériel et des technologies utilisées, ainsi qu’une explication concise de leur intégration dans le projet.

Dans les chapitres 2 et 3, je fais un tour rapide de l’ergonomie des différents écrans et je donne un aperçu des prochaines évolutions possibles de l’application.

Dans les chapitres 4 à 7, j’indique d’abord comment préparer son Raspberry puis comment installer précisément l’interface et le serveur.

Pour finir dans le chapitre 8, je donne la marche à suivre pour mettre le projet en auto-start afin que le navigateur du Raspberry démarre directement en tant que home center même en cas d’interruption inopinée.

Présentation technique

Choix du matériel

J’ai choisi d’utiliser une carte Raspberry PI car elle dispose d’un système d’exploitation Linux complet qui permet d’installer n’importe quelle librairie. De plus le modèle 3 dispose nativement d’une connexion wifi et Bluetooth, ainsi que 4 ports USB ; ce qui est parfaitement adapté pour faire de la domotique et prévoir toute évolution.

L’écran qui a été choisi pour afficher les interfaces du Raspberry est un écran tactile de 3.5’’.
Ce petit format permet de bénéficier d’une surface tactile à moindre coût mais en contrepartie rend l’utilisation des applications tierces moins intuitives : elles n’ont pas été pensées pour cette taille d’écran. J’ai donc construit des interfaces spécifiques pour ce modèle.

Pour contrôler la lumière ambiante de l’environnement, j’ai choisi d’utiliser l’ampoule Xiaomi Yeelight. Celle-ci a l’avantage d’être abordable, contrôlable par wifi et surtout une API lui est dédiée en Python. Cela signifie que l’on va pouvoir communiquer avec celle-ci facilement en quelques lignes de code seulement. L’utilisation de Python est de plus très adaptée au projet puisque le langage est portable sur tous les systèmes d’exploitation. Il fonctionnera aussi bien sur un appareil IOT que sur un windows dès lors que la librairie Python 3 est installée. Pratique pour les tests !

Je me suis aussi servi de Flask sur Python pour développer la partie serveur. J’ai simplement eu besoin d’exécuter la commande « pip install Flask » pour avoir accès aux fonctionnalités d’un serveur web. Couplé à la librairie yeelight, cela me permet de déclencher des actions sur l’ampoule à distance ou depuis le client front du Raspberry.

Choix des technologies Front

Des interfaces ergonomiques avec Bootstrap

J’ai choisi de développer un projet web puisque cela à l’avantage de pouvoir fonctionner avec n’importe quel appareil dès lors qu’il possède un navigateur. Cela fonctionne donc parfaitement avec le navigateur installé sur le Raspberry « Chromium ». Le développement web permet de produire rapidement des interfaces ergonomiques et responsives. Pour rendre mon application adaptative, j’ai utilisé la bibliothèque Bootstrap qui permet de déterminer, à partir de classes qu’on saisit dans le code html, la taille souhaitée définit en colonnes (de col-1 à col-12). Les classes que j’ai utilisé vont pouvoir couvrir les tailles d’écran mobiles (x-min), l’écran d’une tablette (md) ou l’écran d’un ordinateur (lg).

J’ai aussi profité des avantages qu’offre Bootstrap dans la création du design grâce aux éléments CSS et JavaScript qui sont inclus dans la bibliothèque. Je vous invite à jeter un oeil au site officiel de Bootstrap pour voir la liste exhaustive des fonctionnalités disponibles sur la lien suivant https://getbootstrap.com/ ☺

Une architecture découpée en composants avec React

Le second besoin était de pouvoir personnaliser le home center avec une suite d’applications. Je voulais comme dans un magasin d’applications tel que le Playstore de Google ou l’Appstore d’Apple ajouter, dupliquer ou supprimer des fonctionnalités du Dashboard facilement.

Avec React, bibliothèque libre JavaScript développée par Facebook, il est possible de créer des applications web monopage tout en ayant la possibilité de développer des composants dépendants pour chaque état.

Actuellement, le projet contient trois composants : « Ratp.js », « Weather.js », et « Bulb.js ». Ils contiennent le code métier et l’interface propre à leur comportement.

Les trois composants sont disposés sur le Dashboard les uns à la suite des autres de manière unique lorsqu’ils sont affichés sur un petit écran (bootstrap-xs) mais disposés sur la même page quand l’écran est de plus grande taille (bootstrap-lg). Ce type d’approche appelé aussi micro-frontends permet d’isoler le comportement du code html et métier du code des autres composants. Cela facilite grandement le développement des composants quand il est développé dans les entreprises puisque cela permet à chaque équipe d’avoir la maîtrise de son propre composant.

J’ai renseigné les paramètres des composants dans le fichier « config.json ». C’est lui qui détient toute la configuration métier (station de RER, ville pour la météo…).

Ainsi pour afficher la météo de plusieurs villes, il suffit de référencer le composant « Weather.js » plusieurs fois sur la page Dashboard.js avec une simple ligne :

<div><Weather city={city}/><p className="legend">{city} Weather</p></div>

Tous les composants sont enregistrés dans le répertoire « Components ».

J’ai choisi d’utiliser React avec les nouvelles normes de développement dictées depuis ECMASCRIPT 6 ou ES 6. Cette nouvelle norme apporte beaucoup de nouveautés qui permettent à nous, développeurs, de construire plus rapidement et efficacement nos application grâce notamment à :

• Une nouvelle façon de déclarer les variables avec let et const
• Un moyen plus rapide de définir des fonction avec le raccourci “=>”
• Une nouvelle syntaxe pour les objets …

L’ensembles des spécifications de ECMA 6 est décrite ici sur la documentation officielle de ECMA mais je vous invite à découvrir les fonctionnalités par vous même progressivement au fur et à mesure du développement de votre application ou au travers des tutoriels d’utilisation car la documentation officielle fait presque 600 pages !!

L’inconvénient d’ES6 est qu’il n’est pas encore interprétable nativement tous les navigateurs, surtout les plus anciens puisqu’il est sorti fin 2015.

Schéma 1 : Navigateurs compatibles avec ES6

J’ai donc transpilé le code. Ce procédé de downgrade permet de traduire le code écrit avec la norme ECMA à un niveau ECMA Script 5 de JavaScript, version comprise par tous les navigateurs depuis 2009.

Pour permettre cette transformation, j’ai utilisé le task runner Webpack couplée au compilateur Babel. J’ai renseigné toutes les règles de conversion dans le fichier « webpack.config.common.json ». Dès que l’on souhaite convertir le code pour l’utiliser sur un navigateur, il faudra exécuter la commande suivante :

./node_modules/.bin/webpack --config webpack.config.production.js

Cette commande permet de passer le code en production tout en surchargeant les paramètres de transformation du fichier webpack.config.common.json.

Gestion des dépendances et des différents modes d’initialisation

Afin de pouvoir gérer toutes les dépendances du projet telles que les libraires et leur version, mais également de pouvoir renseigner les scripts qui aideront dans l’exécution, le débug et la compilation de l’application, j’ai utilisé le gestionnaire de paquets npm.

Le fichier « package.json » renseigne les librairies à installer pour faire fonctionner le projet mais aussi comment lancer le projet.

Vous pouvez ainsi construire le projet avec npm run build, lancer l’ensemble du projet avec la commande npm run startWithServer ou lancer juste le front avec npm run start

Lancement alternatif avec Docker

Un fichier de description Docker « dockerfile » est présent dans le projet afin que vous puissiez lancer le projet en deux commandes sans vous soucier des dépendances. Il nécessite au préalable d’avoir Docker d’installé. Ainsi, si vous le souhaitez, vous pouvez exécuter le projet simplement avec les commandes suivantes :

docker image build -t . dashboard_pi
docker container run -d -p 5000:5000 dashboard_pi

Choix du serveur de contrôle

Afin de pouvoir communiquer avec des éléments présents dans la pièce, il fallait avoir un serveur qui allait se charger de la communication avec l’ampoule notamment.

Ergonomie

La navigation entre les interfaces se fait en effectuant un glissé d’une page de gauche à droite.

L’interface Ratp permet d’afficher les horaires de la RATP, afficher l’état du trafic et d’indiquer par un code couleur (vert ou orange) si vous êtes dans les temps :

L’interface météo apporte les conditions météorologiques de votre ville (12 villes supportées) :

L’interface Ampoule permet d’interagir avec une ampoule connectée Xiaomi Yeelight (2 fonctions supportées pour le moment, allumer et éteindre) :

Amélioration et perspectives d’évolutions

L’installation des composants se fait pour le moment avec un éditeur de texte. Il nécessite de devoir ajouter une ligne de code dans le fichier Dashboard.js. L’évolution envisageable serait d’ajouter les composants directement depuis le fichier « config.json » ou même depuis de le terminal en clonant simplement extension d’un dépôt hébergé sur GitHub.

Le composant Yeelight ne gère qu’une couleur actuellement alors que l’API permet d’en configurer autant que l’on souhaite. Un choix des couleurs sera ainsi bientôt disponible depuis l’interface.

Xiaomi propose un nouvel appareil domotique : le « Xiaomi plant Flower » qui permet d’avoir des informations sur l’état de sa plante avec une communication Bluetooth. Je proposerai bientôt le support de cet appareil.

Facebook, Twitter et plusieurs chats de messagerie proposent une API pour utiliser facilement leurs fonctionnalités. Une évolution pour afficher les notifications est donc envisageable.

Un composant pour avoir des informations sur l’actualité, des évènements sportifs ou des sorties cinéma peut également être ajoutés facilement. Les seules limites sont ici vos centres d’intérêt ☺

Préparation du home center

Il est important de vous présenter le matériel indispensable pour créer ce home center. Il vous faudra :

• Un Raspberry PI modèle 2 ou 3
• Un Écran Raspberry tactile entre 3.5’’ et 7’’
• Un câble Ethernet ou un dongle wifi si le modèle du Raspberry est antérieur au troisième modèle
• Une alimentation Raspberry 5V 3A
• Une carte micro SD avec Raspbian installé. Tutoriel officiel en suivant ce lien ou en suivant le lien fourni avec l’écran (pilote écran préinstallé)
• Une ampoule Xiaomi Yeelight en mode développeur (voir comment activer ici)

Configuration du Raspberry Pi

Commencez par assembler l’écran et le boitier de votre Raspberry en suivant les indications écrites dans le manuel d’installation fourni avec l’écran.

Une fois que vous avez tout le matériel nécessaire, que le Raspberry est en marche et que vous êtes connecté en SSH, copier le script install_dashboard.sh et éxécutez-le avec votre pseudo et mail en parametres (pour git ):

chmod +x install_dashboard.sh

sudo ./install_dashboard.sh pseudo pseudo@mail.fr

Le script va se charger pour vous de récupérer les sources du projet, d’installer toutes les dépendances, de compiler le Front, et d’installer le serveur en tant que service. A la fin de la procédure, le raspberry va redémarrer pour que vous puissiez apprécier le résultat.

Si vous souhaitez que l’interface du home center ne s’affiche pas par défaut sur au démarrage du Raspberry, éditer le fichier : /home/pi/.config/lxsession/LXDE-pi/autostart et supprimer la ligne :

@chromium-browser --kiosk --disable-session-crashed-bubble --disable-infobars http://127.0.0.1:5000

La ligne ci-dessus démarre le navigateur chrome sur la page d’accueil du dashboard_pi.

Personnalisation avec vos données

Afin de personnaliser les données de météo et de transport avec les vôtres, j’ai mis à disposition le fichier config.json qui regroupe toutes les données propres à la configuration de votre home center.

Rendez-vous dans le répertoire Front du projet et effectuez un nano sur le fichier config.json pour remplacer par vos données :

nano config.json

Puis générez à nouveau le projet sur le Raspberry :

npm run build:production

Redémarrez le Raspberry pour voir le résultat.

Mot de la fin

J’espère que vous avez apprécié cet article ☺

Le projet est toujours en phase de développement et c’est votre curiosité qui va vous permettre de faire évoluer le code et les fonctionnalités.

N’hésitez pas à forker , soumettre des questions ou proposer une pull-request si le projet vous intéresse, toute proposition sera consciencieusement étudiée pour être intégrée au projet.   

Sofiane Aziri

Lien Github du projet : https://github.com/stormsa/dashboard_pi

En savoir plus sur Raspberry :

https://raspbian-france.fr/installer-raspbian-premier-demarrage-configuration/

En savoir plus sur les Api utilisées :

Ratp Api : https://api-ratp.pierre-grimaud.fr/v3

En savoir plus sur Python et les librairies utilisées:

Flask : http://flask.pocoo.org/docs/1.0/installation/
Yeelight Api : https://yeelight.readthedocs.io/en/latest/

En savoir plus sur React :

https://www.grafikart.fr/tutoriels/ecmascript-2015-757
https://medium.com/the-andela-way/a-beginners-guide-to-react-with-es6-a2ed0b5c977e
https://micro-frontends.org/