Raspberry - Controler le GPIO avec un navigateur
Comment controler le GPIO du Raspberry avec un navigateur ?
Je vous propose de gérer l'allumage et l'extinction d'une ampoule 220v avec une interface Web.
Nous avons besoin
- d'un Raspberry
- d'un relais
- d'une ampoule
- un peu de cablage
Montage
Le relais est alimenté en 12v
Le relais commande l'allumage d'une ampoule
La commande du relais est reliée au GPIO04 - Broche 7 du Raspberry
L'ampoule est reliée au 220v. Faites attention à vos doigts
Nous utiliserons une interface Web avec deux boutons
- Bouton ON pour allumer l'ampoule
- Bouton OFF pour éteindre l'ampoule
Serveur Web
Pour utiliser une interface Web afin afficher les boutons On/Off, nous avons besoin d’un serveur Web sur notre Raspberry
On peut utiliser le Raspbian Desktop ou Lite
Mettre à jour Raspbian
- sudo apt-get update
- sudo apt-get upgrade
Installation d'Apache et Php
Nous utiliserons le logiciel Apache et le Php
- sudo apt-get install apache2
- sudo apt-get install php libapache2-mod-php
Principe de fonctionnement
Dans le navigateur, on saisie l’adresse IP du Raspberry
Le navigateur recherche le fichier index.php et affiche son contenu
Dans le fichier index.php on définie la fonction «executer» des boutons et on affiche les boutons avec la mise en forme définie dans le fichier stylesheet.css
Lorsque l’on clique sur un bouton le fichier script.php est exécuté
Le fichier script.php définie la fonction «executer» et ré-affiche le fichier index.php après chaque exécution de la fonction «executer»
Nous avons donc besoin de 3 fichiers
- index.php
- stylesheet.css
- script.php
Création de la page Web
On se déplace dans le répertoire /var/www/html
- cd /var/www/html
On sauvegarde le fichier index.html # Si besoin retour arrière
- sudo cp index.html index.html.backup
On supprime le fichier index.html
- sudo rm -rf index.html
Création du fichier index.php
On crée le fichier index.php
- sudo nano index.php
Contenu du fichier index.php
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8"> # police de caractères utf-8
<title>Contrôle GPIO</title> # titre dans le navigateur
<link rel="stylesheet" type="text/css" href="stylesheet.css"> # utilisation du fichier stylesheet.css
</head>
<body>
<form action="script.php" method="post">
<input type="submit" name="executer" value="ON" class="button" id="ON"> # bouton ON
<br/>
<input type="submit" name="executer" value="OFF" class="button" id="OFF"> # bouton OFF
</form>
</body>
</html>
[Ctrl]+o puis [Enter] pour sauvegarder
[Ctrl]+x pour quitter
Création du fichier stylesheet.css
On crée le fichier stylesheet.css
- sudo nano stylesheet.css
Contenu du fichier stylesheet.css
html, body
{
margin: 0; # la marge
}
.button
{
border: none; # bordure des boutons yes/none
color: white; # couleur du texte
text-align: center; # alignement du texte
font-size: 10em; # taille du texte
padding: 25px 25px;
cursor: pointer; # forme du curseur
width: 100%; # largeur des boutons
height: 50vh; # hauteur des boutons
}
#ON
{
background-color: green; # couleur bouton ON
}
#OFF
{
background-color: red; # couleur bouton OFF
}
[Ctrl]+o puis [Enter] pour sauvegarder
[Ctrl]+x pour quitter
Création du fichier script.php
On crée le fichier script.php
- sudo nano script.php
Contenu du fichier script.php
<?php
system("gpio -g mode 4 out"); # GPIO04 – broche 7 en OUT
if($_POST['executer'] == 'ON') # test à ON - si pas ON c’est forcement OFF
{
system("gpio -g write 4 1"); # GPIO04 – broche 7 mise à 1
}
else
{
system("gpio -g write 4 0"); # GPIO04 – broche 7 mise à 0
}
header('Location: index.php'); # après chaque clic, afficher la page index.php
?>
[Ctrl]+o puis [Enter] pour sauvegarder
[Ctrl]+x pour quitter
Allumage et extinction de l'ampoule
Dans un navigateur (Ordinateur ou smartphone), saisir l’adresse IP du Raspberry.
L'ampoule doit s'éteindre et s'allumer lorsque l'on clique sur les boutons ON/OFF