Interface web simple pour le Raspberry Pi

29 août 2019 Titi Le Raspberry Pi, Programmation autour du Raspberry 0

Ce tutoriel est un condensé de l’article sur le site Framboise314.

L’idée est de vous montrer comment contrôler des LED avec votre Raspberry Pi.
Tout d’abord directement à partir du Raspberry Pi lui-même,
puis à partir de n’importe quel appareil disponible chez vous, votre Smartphone ou votre tablette à partir d’une interface web…

Sommaire Afficher

L’électronique :

La partie électronique n’a rien de spécial, elle ne comporte que 8 LED avec leur résistance de protection…
La seule partie délicate est de bien relier chaque LED à la bonne broche sur le GPIO du Raspberry Pi.

On utilisera une bibliothèque appelée WiringPi crée par Gordon Henderson.
Attention : Les numéros de broches utilisés par cette bibliothèque ne sont pas les mêmes que ceux qui figurent sur le Raspberry Pi.

Vous verrez sur cette page pour la correspondance, car il faudra faire très attention à la version de Raspberry Pi que vous utilisez, le brochage n’est pas exactement le même en fonction de la révision du circuit…).

On va utiliser ici les broches de 0 à 7.

On utilisera des résistances entre 270 Ω  à 560 Ω, plus on est vers les 560 Ω plus la luminosité des leds sera plus faible.

Installation et utilisation de la bibliothèque WiringPi

WiringPi est une bibliothèque qui simplifie beaucoup l’accès au GPIO du Raspberry Pi .
Cela signifie également que vous pouvez l’utiliser dans n’importe lequel de vos codes C.
Ici nous n’allons pas compiler et utiliser un programme en C mais l’utilitaire GPIO.

C’est un logiciel écrit par Gordon, qui fonctionne avec la bibliothèque.
Il vous permet de contrôler les E/S GPIO depuis un script bash ou directement en ligne de commande.
Cet utilitaire est cependant beaucoup plus lent qu’un programme écrit en C.

Installation de WiringPi

Gordon explique très bien la procédure sur son site Internet : http://wiringpi.com/download-and-install/.
Il faut juste télécharger le programme à partir de GIT, puis le construire en utilisant la commande ./build.

Ensuite, vous devriez être en mesure d’utiliser l’utilitaire GPIO.

Pour tester, il suffit de saisir la commande :

gpio mode 0 out

Si rien ne se passe, tout va bien.
Sinon, si vous lisez “command not found error” ou quelque chose d’approchant, vérifiez que vous avez correctement suivi le guide d’installation et de construction de la bibliothèque.

Bon, allons maintenant allumer et éteindre la première LED (broche 0).
Vous devez d’abord définir la broche en question comme étant une sortie.

Utilisez pour cela la commande :

gpio mode 0 out

“0” est le numéro de la broche et “out” signifie simplement qu’on la configure en sortie.

Maintenant, on va allumez la LED avec la commande :

gpio write 0 1

“0” représente à nouveau le numéro de la broche et “1” est son état (1 pour ON/ALLUMÉE et 0 pour OFF/ÉTEINTE ).
Si tout va bien, vous devriez voir briller la LED.

Pour l’éteindre, il suffit d’utiliser la commande :

gpio write 0 0

Attention : si vous souhaitez utiliser le numéro de broche réel (GPIO-17) à la place de celui de WiringPi (0 correspondant à GPIO-17), utiliser le drapeau -g dans votre commande.

Exemple :

gpio -g write 17 1

au lieu de

gpio write 0 1

Il existe aussi “gpio read” qui vous permet de lire l’état de la broche.
Ça peut sembler inutile lorsque la broche a été définie comme étant une sortie, mais cette commande vous permet d’être sûr de l’état de la broche lorsque la LED ne s’allume pas…

Son utilisation est aussi simple que précédemment, il suffit de taper :

gpio read 0

Avec “0” indiquant le numéro de la broche.
La commande retourne l’état de la broche (soit 1 pour ON et 0 pour OFF).

La bibliothèque WiringPi autorise beaucoup d’autres commandes/fonctions
Si vous êtes plus curieux visitez la page http://wiringpi.com/reference/ (descriptif des fonctions de la bibliothèque) et https://projects.drogon.net/raspberry-pi/wiringpi/the-gpio-utility/ ou exécutez la commande “man gpio“.

Maintenant que vous savez mettre en œuvre cet utilitaire, Jouons un peu avec lui.
Vous pouvez d’abord, si ce ne est pas déjà le cas, contrôler votre Raspberry Pi à distance avec SSH.
Vous pouvez utiliser Putty sous Windows ou ServerAuditor pour votre Smartphone.

Alors amusez-vous avec les scripts bash comme celui-ci qui allume les 8 LED, attend 2 secondes, puis les éteint à nouveau :

#!/bin/bash
#set mode to output
for i in 0 1 2 3 4 5 6 7;
do gpio mode $i out;
done;
#turn on LEDs 0 to 7
for i in 0 1 2 3 4 5 6 7;
do gpio write $i 1;
done;
#wait 2 seconds
sleep 2;
#turn LEDs off
for i in 0 1 2 3 4 5 6 7;
do gpio write $i 0;
done;

Installation d’un serveur web et mise en place du site web

Contrôler des LED à distance avec SSH est plutôt cool mais l’interface (la console) n’est pas très conviviale et taper les commandes à chaque fois se révèle long et ennuyeux.
C’est pourquoi nous avons besoin d’une interface graphique pour notre projet.

Programmer une application pour chaque système d’exploitation (IOS, Android, Windows Phone, Mac, Linux, Windows, …) serait trop long et exigerait de connaître quantité de langages différents pour produire… presque rien.
Il faudrait aussi programmer une application qui s’exécuterait sur le Raspberry Pi.
Procéder ainsi serait exagéré et se traduirait par un gaspillage de temps.

C’est pourquoi un site ou une page web se révèle être la meilleure solution car  il est compatible avec tous les périphériques et vous avez “seulement” besoin de connaître quatre langues :

  • Le HTML (pour le squelette de la page),
  • Le CSS (le style de la page),
  • Le PHP (pour gérer les interactions avec le serveur)
  • Et le JavaScript (pour gérer les interactions avec l’utilisateur).

Nous avons en effet besoin d’installer un serveur Web sur le Raspberry Pi.
Dans notre cas, nous n’avons pas besoin d’une base de données MySQL, juste d’un serveur HTTP et de son extension PHP.

Après la mise à jour de votre Raspberry Pi avec l’habituelle commande “sudo apt-get update && sudo apt-get upgrade“,
tapez :

sudo apt-get install apache2 php5 libapache2-mod-php5

La commande ci-dessus installe le serveur HTTP Apache et l’extension PHP5.
Vous pouvez maintenant tester si votre serveur fonctionne en tapant l’adresse IP de votre Raspberry Pi dans votre navigateur.
Vous devriez maintenant voir une page indiquant “It works !” ainsi que deux autres lignes.
Si vous n’obtenez pas ça, alors vérifiez l’adresse IP de votre carte, essayez de réinstaller Apache ou redémarrer votre Raspberry Pi.

Cette page affiche que votre serveur Apache fonctionne correctement mais ne donne pas d’information sur son extension PHP.
Pour vérifier cette dernière, accédez à votre répertoire “/var/www/” en utilisant la commande :

cd /var/www/

Si vous utilisez maintenant la commande “ls“, vous devriez avoir un seul fichier nommé “index.html“.
Ce fichier correspond à la page qui affiche “It works !“.
Vous pouvez maintenant le supprimer (“sudo rm index.html“) et en créer un autre appelé “index.php” avec :

sudo nano index.php

Ensuite, tapez le texte suivant:

<?php
phpinfo ();
?>

Après l’enregistrement à l’aide de ^ o (Ctrl + o), sortez de l’éditeur nano avec ^ x (Ctrl + x).
Maintenant, si vous actualisez votre navigateur, vous devriez voir une page très longue, avec beaucoup d’informations sur votre serveur et sur PHP.
Si vous ne la voyez pas, vérifiez votre fichier index.php, essayez de réinstaller PHP ou essayez de comprendre l’erreur affichée à la place de la page attendue (effectuez une recherche sur Google si nécessaire).

Si les deux pages s’affichent correctement, vous avez maintenant un serveur Apache/PHP entièrement fonctionnel mais créer des pages en utilisant à chaque fois nano est ennuyeux et pas très confortable.
Nous aurons en effet besoin de transférer des fichiers de votre ordinateur à votre Raspberry Pi.
Vous pensez peut-être installer un serveur FTP, mais ce n’est pas nécessaire, vous pouvez transférer des fichiers en utilisant le protocole SFTP.
Tout ce dont vous avez besoin est un client SFTP sur votre ordinateur.
Personnellement j’utilise WinSCP pour Windows mais il y a Cyberduck pour Mac et Filezilla pour Linux.
Si vous essayez transférer des fichiers avant de lire ce qui suit, vous aurez probablement des problèmes comme “accès refusé” ou “écriture interdite”.

C’est dû au fait que l’utilisateur propriétaire du répertoire www n’est pas pi.
En effet, si vous essayez la commande “ls -l /var/www“, vous verrez que seul root (le super-utilisateur) est propriétaire le répertoire www.

Vous pouvez (comme moi) utiliser la commande :

sudo chown -R pi /var/www

Cette commande modifie les droits ou créer un groupe nommé www-data dans lequel vous placerez l’utilisateur pi.

Utilisez ensuite la commande :

sudo chown -R www-data /var/www

Le drapeau -R indique que la commande est récursive.
Ce qui signifie que l’utilisateur/groupe ne possède pas que le répertoire lui-même, mais aussi tout ce qu’il y a à l’intérieur (index.php par exemple).

Votre serveur est prêt à travailler et à recevoir des pages Web.
Amusez-vous avec lui si vous connaissez HTML, CSS et PHP.

Contrôler les LED en PHP

Maintenant que nous avons un serveur Web et une bibliothèque, mettons tout ça ensemble.
PHP signifie “PHP: Hypertext Preprocessor”, c’est un langage de script côté serveur.
Cela signifie que le code PHP est exécuté par le serveur (à chaque fois que la page est demandée) et qu’il n’est pas visible par le client.

Exécuter des applications avec un code PHP peut être fait avec deux fonctions différentes : exec (pour exécution) et le system. Commençons par la fonction system : elle prend deux paramètres: “system (string $command, int $return_var)“,
le premier paramètre est la commande à exécuter et le second est le résultat renvoyé par la commande exécutée.
Le second paramètre n’est pas obligatoire. Vous pouvez utiliser cette fonction si vous n’attendez pas de réponse de la commande exécutée.

Ainsi, vous pouvez l’utiliser si vous devez exécuter les commandes “gpio mode 0 out” ou “gpio write 0 1“.

Par exemple :

<?php
system ( "gpio mode 0 out" );
system ( "gpio write 0 1" );
?>

Ensuite, la fonction “exec“. Cette fonction fait exactement la même chose que “system“, mais elle lit et stocke ce que la commande affiche. Elle prend trois paramètres : exec (string $command, array $output, int $return_var ), $command et $return_var sont les mêmes paramètres et la seule différence est le tableau $output.
Comme son nom l’indique il va stocker la sortie de la commande dans un tableau.
Ainsi, vous pouvez utiliser cette fonction si vous avez besoin de ce qu’affiche une commande comme avec le “gpio read 0”.

Par exemple :

<?php
exec ( "gpio read 0", $status );
print_r ( $status );
?>

Vous pouvez maintenant exécuter à peu près toutes les commandes que vous voulez, mais nous allons prendre un petit exemple pratique en PHP : Nous allons allumer les voyants 0 à 7, attendre deux secondes, puis les éteindre.
C’est exactement ce que nous avions fait avec le script bash.

Editez le fichier index.php et insérez y le code suivant :

<?php
$status = array ( 0 );
//set pins mode to output
for ($i = 0; $i <= 7; $i ) {
system ( "gpio mode ".$i." out" );
}
//turns on the LEDs
for ($i = 0; $i <= 7; $i ) {
system ( "gpio write ".$i." 1" );
}
//reads and prints the LEDs status
for ($i = 0; $i <= 7; $i ) {
exec ( "gpio read ".$i, $status );
echo ( $status[0] );
}
//waits 2 seconds
sleep ( 2 );
//turns off the LEDs
for ($i = 0; $i <= 7; $i ) {
system ( "gpio write ".$i." 0" );
}
?>

L’interface web

Nous pouvons maintenant contrôler notre Raspberry Pi avec des scripts PHP simples mais il n’y a aucune interaction avec l’utilisateur et de ce fait nous ne pouvons pas choisir la LED à allumer/éteindre.

Fabriquons l’interface !

Elle est composée de photos que je ai trouvé sur Google images (recherche sur “on/off button”). L’un était vert et l’autre rouge, j’ai juste ajouté le numéro en utilisant The Gimp.
Chaque image d’une touche correspondant à une LED, donc si vous cliquez sur une de celles-ci, la LED correspondante sera allumée/éteinte et l’image sera modifiée, passant de vert à rouge.
Le squelette de la page est fait en HTML, les interactions avec le serveur et la génération de page en PHP et JavaScript gère finalement les interactions avec l’utilisateur et l’animation de la page.
Au cas où vous l’ignoreriez, JavaScript est un langage côté client et contrairement à PHP, il est exécuté non pas une fois, mais de façon continue par votre navigateur.
C’est pourquoi vous pouvez changer le look de la page sans avoir à la recharger ou à accéder à une autre page. Si vous vous demandez pourquoi j’ai parlé de CSS avant, c’est juste parce que nous en avons besoin pour certains styles et mise en page comme le fond noir.
Je n’ai pas créé un fichier CSS complet parce qu’il n’était pas nécessaire de le faire ici.
Nous avons d’abord besoin d’un fichier “index.php” (l’extension est .php est et non .html car nous allons utiliser du code PHP, elle permet au serveur de savoir qu’il y a du code PHP à exécuter avant d’envoyer la page générée.
Cette page est la page principale contenant les 8 boutons.
Ces boutons sont d’abord générés avec un “exec ( “gpio read “.$i, $output );” dans une boucle.
Ensuite, nous devons détecter le moment où l’utilisateur clique sur un de ces boutons.
C’est là que le JavaScript est utile, je l’ai mis dans un fichier séparé appelé “script.js” mais il est toujours inclus dans index.php.
Le script ajoute simplement un “écouteur d’événement” à chacun des huit boutons et chaque fois que l’un d’eux est pressé, il utilise une fonction qui appelle gpio.php, reçoit sa réponse, puis la renvoie.
Enfin, en fonction de cela, le JavaScript change le bouton rouge (pour OFF) en vert (pour ON).
Maintenant, la dernière page : gpio.php.
Elle contient le code PHP pour allumer/éteindre les LED en fonction de ce que la fonction JavaScript a envoyé.
L’utilisateur ne doit normalement pas appeler cette page directement, mais il y a une règle d’or lors de la création des sites Web et vous devez toujours vous rappeler ceci : “Ne faites jamais confiance l’utilisateur“.
En d’autres termes, ne pensez jamais que l’utilisateur va toujours faire ce que vous pensez qu’il va faire.
J’ai donc ajouté quelques sécurités au début du code PHP pour m’assurer que l’utilisateur passe une valeur correcte et pas une lettre par exemple.
J’ai fait un petit diagramme pour résumer tout ce texte.
Vous pouvez télécharger l’ensemble du projet sur [download id= »12179″] (747.42 KB)

Conclusion et des idées d’améliorations

Ce petit projet était amusant à expliquer en détail et j’ai beaucoup appris en le réalisant.

J’espère qu’il en sera de même pour vous. Toutefois, le contrôle de LED n’est pas très utile.
C’est pourquoi ce que nous avons fait est plutôt un outil qu’un véritable projet.
C’est bientôt Noël (dans environ un mois et demi de ce jour où j’écris le tutoriel) alors pourquoi ne pas remplacer les LED par des relais et contrôler les lumières autour de votre maison.

Il y a quelques très bonnes cartes relais pour le Raspberry Pi sur Ebay et plus généralement sur Internet.

Sinon, et si vous n’avez pas peur de travailler sur votre maison, vous pouvez même contrôler les lumières de la maison, les portes de garage, machine à café, système de chauffage, volets roulants…

La seule limite est votre imagination.

Il y a aussi beaucoup d’améliorations possibles comme modifier l’interface, ajouter plusieurs voyants via un registre à décalage, en utilisant la reconnaissance vocale,…
En outre, avec PHP, vous n’êtes pas limité à écrire ou lire le GPIO.
Vous pouvez utiliser plus complètement l’utilitaire GPIO et donc interagir avec d’autres appareils équipés d’un UART ou de tout autre protocole.
Vous pouvez également utiliser le PWM (Pulse Width Modification) pour contrôler des servos, …
La rédaction de ce tutoriel vise à partager mon peu de connaissance.
Ce fut un grand plaisir pour moi et j’espère que c’était agréable pour vous de le lire.
J’ai essayé de garder les choses simples mais en même temps de vous apprendre le plus possible.
Je ne voulais pas faire une simple description étape par étape, mais muette : “télécharger ce code, exécutez-le, vous avez terminé”.
Je pense qu’il est inutile d’apprendre quelque chose si vous comprenez comment cela fonctionne ou pourquoi vous faites ceci et pas cela.

Soyez le premier à commenter

Poster un Commentaire

Votre adresse de messagerie ne sera pas publiée.


*