Raspberry - Controler le GPIO avec un navigateur

ampoule


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


relais

Montage

montage-relay-ampoule

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 

on-off

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

apache


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

fichier-index


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>
</htm
l>


[Ctrl]+o puis [Enter] pour sauvegarder
[Ctrl]+x  pour quitter

Création du fichier stylesheet.css

fichier-stylesheet


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

fichier-script


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

navigateur


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






Le programme complet en zip

Télécharger le code complet


  • index.php
  • stylesheet.css
  • script.php

Dézipper le fichier code.zip