Créer une interface web PHP pour contrôler votre Arduino Uno

Composants et fournitures

Composant	Quantité
Arduino UNO	1
Shield Ethernet Arduino 2	1
Capteur température/humidité DHT11 (4 broches)	1
Relais 2 voies	4
Mini platine d'essai	1
Capteur de flamme	1
Capteur de gaz MQ4	1
LDR (photorésistance)	1
Capteur hygrométrique (humidité sol)	3
Câble routeur ADSL	1
Prise (une voie)	7
Prise murale (une voie)	7
Pile 9V	1
Câble jack 9V	1

Outils et machines nécessaires

• Pistolet à colle chaude (générique)

Applications et services en ligne

• Serveur HTTP Apache
• Notepad++
• Arduino IDE

À propos de ce projet

Mise à jour

Comment utiliser TheAmplituhedron.com pour améliorer vos projets IoT ? est mon nouveau projet qui gère la programmation côté serveur. En utilisant TheAmplituhedron.com comme hôte, vous pouvez envoyer et recevoir des paquets de données aisément sur Internet.

Pour soutenir mes projets et articles, visitez mon site web :)

Description

L'objectif principal est de créer un site web professionnel pour contrôler mon aquarium et mon système d'irrigation domestique, et recevoir les informations de la maison pendant mon absence.

J'ai créé le projet Arduinautomotion qui inclut 4 pages HTML/PHP différentes sur mon serveur Apache local :

• Arduinautomotion.php (page principale)
• Arduinautomotioncontrol.php
• Arduinautomotionformvalue.php
• Arduinautomotioncommunication.php

Le shield Ethernet de l'Arduino héberge une autre page HTML (ArduinoSide.php) accessible via l'adresse IP choisie, pour communiquer avec le site Arduinautomotion.

L'idée m'est venue lors de 2 semaines de vacances où je ne pouvais pas ajuster mon aquarium : parfois couper le filtre interne pour éviter une sur-oxygénation, ou ouvrir le nourrisseur à distance. J'ai ajouté 6 options de contrôle pour l'aquarium et 1 pour l'irrigation.

De plus, on peut facilement récupérer les données de la maison (température/humidité DHT11, méthane MQ4) via le shield Ethernet.

Le site Arduinautomotion offre une interface simple pour envoyer et recevoir des données de l'Arduino. La connaissance de HTML, CSS, JavaScript, PHP, jQuery est nécessaire pour comprendre l'ensemble ; c'est une vitrine du projet, mais si vous connaissez ces langages, tout le code PHP est fourni ci-dessous.

J'ai utilisé Notepad++ pour programmer les pages web.

Comment envoyer et recevoir des données entre deux pages PHP

J'ai utilisé des formulaires HTML, les méthodes PHP GET/POST, et $_SESSION[] pour conserver les données entre pages. GET est plus simple pour communiquer avec le shield Ethernet (requête HTTP GET plus facile que POST), mais POST est plus sécurisé pour les communications inter-pages (sauf pour ArduinoSide). $_SESSION[] permet de conserver les données de façon persistante entre plus de deux pages.

• Formulaires PHP
• Sessions PHP

Comment installer le site sur Apache HTTP Server (Localhost)

Apache est efficace pour cet hébergement, mais XAMPP ou autre fonctionne aussi. Dans mon cas : AppServ >> www >> Arduinautomotion.php. J'utilise mon IP locale (192.168.1.20 = localhost) pour accéder aux pages (https://votreIP/Arduinautomotion.php).

Guide installation PHP/Apache Windows

Comment accéder à votre localhost depuis appareils Android

Windows diffère de Mac, mais ce lien aide pour Windows : Accès localhost depuis Android. Sur le même Wi-Fi, accédez à https://votreIP/Arduinautomotion.php.

Comment accéder à votre localhost via Wi-Fi (externe)

Fonctionne avec votre IP externe, mais assurez-vous que vous seul la connaissez (risque sécurité). Accès LAN externe. Il faut aussi configurer le port forwarding pour accéder à ArduinoSide.php via l'IP choisie dans le code Arduino. Port forwarding.

Arduinautomotion.php (page principale)

Page de communication avec le shield Ethernet : envoi commandes vers Arduino et récupération données maison.

• Menu Change : indique les changements, montre quel élément est capteur ou actionneur par code couleur.
• Cercles changeants : affichent valeurs capteurs et états actionneurs.

1) Section Room

Toutes les données de la pièce (via Arduinautomotioncommunication.php) s'affichent ici. Avant/Après :

2) Section Aquarium

Les combinaisons choisies via formulaires HTML sont envoyées à Arduinautomotionformvalue.php, puis retournées en sortie via Arduinautomotioncontrol.php vers Arduinautomotion.php.

3) Section Plant

Valeurs des 3 capteurs hygrométriques observées, activation irrigation possible. Même flux de données que section Aquarium.

4) Section Guide

Contient Arduinautomotionformvalue.php dans un iframe pour revoir les choix du formulaire, plus instructions du projet et schéma de communication.

5) Boîte d'alerte

Si une valeur capteur entre en zone de danger, une boîte d'alerte apparaît au rechargement de la page : vidéo Spider-man + audio « Spider-sense is tingling ».

Arduinautomotioncontrol.php

Inclus dans Arduinautomotion.php pour récupérer toutes les données via $_SESSION[] depuis Arduinautomotionformvalue.php et Arduinautomotioncommunication.php. Conserve les données de façon persistante entre pages PHP.

Arduinautomotionformvalue.php

Récupère les choix du formulaire depuis Arduinautomotion.php et les envoie vers ArduinoSide et Arduinautomotioncontrol.php. Intégré dans la section Guide mais accessible aussi dans un nouvel onglet.

Arduinautomotioncommunication.php

Sauvegarde les données venant de ArduinoSide et les transmet automatiquement à Arduinautomotioncontrol.php.

ArduinoSide

Hébergé par le shield Ethernet via DNS, accessible à l'IP choisie dans le code (ex: https://votreIPchoisie).

Connexions

Réalisez les connexions comme expliqué dans le code ArduinoSide et le schéma Fritzing ci-dessous. Connectez les prises/prises une voie aux relais 2 voies et fixez tous les composants sur un support (liège, etc.).

Arduino
 DHT11 Module         Pin 2
 2 Way Relay (1)      Pin 3, Pin 4
 2 Way Relay (2)      Pin 5, Pin 6
 2 Way Relay (3)      Pin 7, Pin 8
 2 Way Relay (4)      Pin 9
 Arduino Ethernet Shield  Pin 10,11,12,13
 LDR                  A0
 Flame Sensor         A1
 MQ4 Sensor           A2
 Hygrometer (1)       A3
 Hygrometer (2)       A4
 Hygrometer (3)       A5

Le code Arduino s'inspire de l'exemple WebServer de la bibliothèque Ethernet. J'ai ajouté la gestion des capteurs et l'exécution des commandes venant du site Arduinautomotion.

Connectez le câble ADSL du shield Ethernet au routeur.

Après exécution du code Arduino, le site Arduinautomotion envoie et reçoit des données de l'Arduino via LAN/Wi-Fi.

Vidéos de test

Projet testé connecté à mon aquarium et système d'irrigation (moteur à eau) : fonctionne parfaitement. :) Vidéo test (montée avec Filmora version essai, filigrane conservé par respect).

Ordinateur : [vidéo]
Android : [vidéo]

Code

Arduinautomotion.php PHP

<?php session_start(); ?>
<!DOCTYPE html>
<html>
<?php include 'Arduinautomotioncontrol.php'; ?>
<head>
<link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon">
<style>
html{ background-color:rgb(0,0,0); }
button{ cursor:pointer; user-select:none; }
form{ user-select:none; }
iframe{ user-select:none; }
p{ cursor:default; user-select:none; }
#guideText{ position:absolute; top:400px; font-size:20px; color:white; height:420px; width:1000px; overflow:auto; }
img.icon{ user-select:none; transition:opacity 2s; cursor:crosshair; }
.icon:hover{opacity:0.5}
div.home{ background-color:rgb(25,25,25); height:100px; width:1320px; position:sticky; top:530px; left:10px; border:10px solid; border-radius:20px; border-color:rgb(35,35,35); }
div.homeselector{ background-color:rgb(17,17,17); height:60px; width:220px; border:2px solid; border-radius:5px; border-color:rgb(35,35,35); transition:height width 0.5s; cursor:pointer; }
.homeselector:hover{height:70px;width:240px;}
div.infopanel{ background-color:rgb(25,25,25); position:absolute; top:680px; left:700px; height:300px; width:600px; border:10px solid; border-radius:20px; border-color:rgb(35,35,35); }
div.color{ position:absolute; height:50px; width:100px; transition:height width 0.5s; border:0.5px solid; border-radius:100px; border-color:transparent; cursor:pointer; }
.color:hover{height:60px;width:110px;}
section.menuselector{ background-color:rgb(99,99,99); height:150px; width:200px; padding:10px; border:10px solid; border-radius:20px; border-color:rgb(35,35,35); transition:border-color 0.5s,width 0.5s,height 0.5s; }
.menuselector:hover{border-color:red;height:160px;width:210px;}
svg.svg{ position:absolute; top:680px; left:10px; background-color:transparent; }
summary{ user-select:none; }
iframe.guide{ position:absolute; height:200px; width:250px; resize:both; overflow:auto; border:5px solid transparent; transition:border-color 2s,height width 2s; }
.guide:hover{height:220px;width:270px;border-color:red;}
footer{ position:absolute; top:2000px; left:20px; width:1300px; height:200px; border-width:5px; border-radius:10px; border-style:dashed; border-color:black; background-color:rgb(51,51,51); }
div.animationbox{ background-color:white; position:absolute; top:5px; left:10px; width:10px; height:10px; border:5px solid black; border-radius:50px; animation:move 10s infinite; }
@keyframes move{
  0% {top:5px;left:10px;background-color:white;border-color:black;}
  16% {top:5px;left:650px;background-color:black;border-color:white;}
  32% {top:5px;left:1275px;background-color:white;border-color:black;}
  48% {top:170px;left:1275px;background-color:black;border-color:white;}
  64% {top:170px;left:650px;background-color:white;border-color:black;}
  80% {top:170px;left:10px;background-color:black;border-color:white;}
}
a.openNewTab{ color:white; position:absolute; top:30px; left:500px; text-decoration:none; font-size:30px; transition:color 0.1s; }
.openNewTab:hover{color:green;}
select{ cursor:pointer; }
input.activateinput{ cursor:pointer; position:absolute; top:270px; left:410px; color:white; border-color:transparent; background-color:transparent; font-weight:bold; font-size:40px; transition:color 0.1s; }
.activateinput:hover{color:red;}
img.spidey{ position:absolute; top:400px; height:300px; width:350px; border:5px solid black; }
#refresh{ user-select:none; position:absolute; top:120px; left:600px; width:250px; height:250px; cursor:pointer; transition:border 0.5; }
#refresh:hover{border:5px solid green;}
#spideyVideo{ position:absolute; top:0px; left:5px; width:250px; height:250px; }
#BoxBackGround{ display:none; background-color:rgb(214,8,8); position:fixed; top:0px; left:0px; opacity:0.7; width:0px; height:0px; }
#Box{ display:none; position:fixed; top:10px; background:url("https://media.giphy.com/media/3o7qDNfxtNRtLVv8qs/giphy.gif"); background-color:black; background-repeat:no-repeat; background-size:600px 200px; width:600px; height:200px; border:5px solid black; border-radius:20px; }
#times{ position:absolute; color:white; top:0px; left:550px; font-weight:bold; font-size:40px; cursor:pointer; transition:color 0.5s; user-select:none; }
#times:hover{color:red;}
#BoxText{ position:absolute; top:150px; left:300px; color:white; font-size:25px; user-select:none; cursor:default; }
li.colorfulLi{ user-select:none; transition:color 0.1s; }
.colorfulLi:hover{color:green;}
a{ user-select:none; }
#StartInputText{ position:absolute; top:90px; left:30px; color:white; border-color:transparent; background-color:transparent; font-weight:bold; font-size:20px; }
#StopInputText{ position:absolute; top:90px; left:130px; color:white; border-color:transparent; background-color:transparent; font-weight:bold; font-size:20px; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
// ... (JavaScript pour interactions UI, alertes, mise à jour cercles SVG, etc.)
</script>
</head>
<body onpageshow="getDataFromArduino()">
<img class="icon" src="https://sites.psu.edu/gayborhood/files/2016/05/Black-and-White-City-at-Night-V.png" style="border:10px solid;border-radius:20px;border-color:rgb(35,35,35);height:500px;width:1320px;">
<!-- Contenu HTML complet avec sections Room, Aquarium, Plant, Guide, SVG cercles, formulaires, etc. -->
</body>
</html>

Arduinautomotioncontrol.php PHP

<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>Arduinautomotion</title>
<link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon">
<?php
$temperatureCelsiusValue = $_SESSION['TemperatureCelsius'];
$temperatureFahrenheitValue = $_SESSION['TemperatureFahrenheit'];
$humidityValue = $_SESSION['Humidity'];
$flamesensorValue = $_SESSION['Flame'];
$MQ4sensorValue = $_SESSION['MQ4Sensor'];
$LdrValue = $_SESSION['LDRSensor'];
$pumpValue = $_SESSION['Airpump'];
$lampValue = $_SESSION['Lamp'];
$feedingValue = $_SESSION['Feeding'];
$heaterValue = $_SESSION['Heater'];
$filterexValue = $_SESSION['Filterex'];
$filterinValue = $_SESSION['Filterin'];
$plant1Value = $_SESSION['Plant1H'];
$plant2Value = $_SESSION['Plant2H'];
$plant3Value = $_SESSION['Plant3H'];
$irrigationValue = $_SESSION['Irrigation'];
?>
</head>
</html>

Arduinautomotionformvalue.php PHP

<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>FormValue</title>
<link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon">
<?php
$_SESSION['Airpump'] = $_POST["pump"];
$_SESSION['Lamp'] = $_POST["lamp"];
$_SESSION['Feeding'] = $_POST["feed"];
$_SESSION['Heater'] = $_POST["heater"];
$_SESSION['Filterex'] = $_POST["filterexternal"];
$_SESSION['Filterin'] = $_POST["filterinternal"];
$_SESSION['Irrigation'] = $_POST["irrigationsystem"];
?>
<style>
html{ background-color:black; }
div.serverpage{ background-color:green; width:1300px; height:100px; text-align:center; }
p{ color:green; text-align:center; font-size:25px; }
input.subMit{ position:absolute; left:525px; border:5px solid green; width:300px; height:50px; font-size:20px; color:white; background-color:transparent; cursor:pointer; }
</style>
</head>
<body>
<div class="serverpage">
<h1 style="font-size:40px;color:black;">Server has received the data from Arduinautomotion.</h1>
</div>
<p>Airpump= <?php echo $_SESSION['Airpump'];?></p><br>
<p>Lamp=<?php echo $_SESSION['Lamp'];?></p><br>
<p>Feeding=<?php echo $_SESSION['Feeding'];?></p><br>
<p>Heater=<?php echo $_SESSION['Heater'];?></p><br>
<p>Filterex=<?php echo $_SESSION['Filterex'];?></p><br>
<p>Filterin=<?php echo $_SESSION['Filterin'];?></p><br>
<p>Irrigation=<?php echo $_SESSION['Irrigation'];?></p><br>
<form action="https://192.168.1.21/" method="get" target="_blank">
<input type="hidden" value="<?php echo $_SESSION['Airpump'];?>" name="airpump">
<input type="hidden" value="<?php echo $_SESSION['Lamp'];?>" name="lamp">
<input type="hidden" value="<?php echo $_SESSION['Feeding'];?>" name="feed">
<input type="hidden" value="<?php echo $_SESSION['Heater'];?>" name="heater">
<input type="hidden" value="<?php echo $_SESSION['Filterex'];?>" name="filterex">
<input type="hidden" value="<?php echo $_SESSION['Filterin'];?>" name="filterin">
<input type="hidden" value="<?php echo $_SESSION['Irrigation'];?>" name="irrigation">
<input type="submit" value="Send and Get Data" class="subMit">
</form>
</body>
</html>

Arduinautomotioncommunication.php PHP

<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>Communication</title>
<link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon">
<style> body{ background-image: url("https://i.ytimg.com/vi/kkVGBn-haDo/maxresdefault.jpg"); } </style>
<?php
$_SESSION['TemperatureCelsius'] = $_GET["temperatureCelsius"];
$_SESSION['TemperatureFahrenheit'] = $_GET["temperatureFahrenheit"];
$_SESSION['Humidity'] = $_GET["humidity"];
$_SESSION['Flame'] = $_GET["flame"];
$_SESSION['MQ4Sensor'] = $_GET["MQ4sensor"];
$_SESSION['LDRSensor'] = $_GET["LDRsensor"];
$_SESSION['Plant1H'] = $_GET["plant1H"];
$_SESSION['Plant2H'] = $_GET["plant2H"];
$_SESSION['Plant3H'] = $_GET["plant3H"];
?>
</head>
<body></body>
</html>

ArduinoSide_Code.ino Arduino

/////////////////////////////////////////////////////////////////
// -ARDUINAUTOMOTON-
// Création site web pro pour communiquer avec Arduino
// (Compatible Android)
// par Kutluhan Aktar.
/////////////////////////////////////////////////////////////////
#include <SPI.h>
#include <Ethernet.h>
#include "DHT.h"
DHT dht;

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 21);
EthernetServer server(80);

int pump = 3, lamp = 4, feed = 5, heater = 6, filterex = 7, filterin = 8, irrigation = 9;
String readString;

void setup() {
  Serial.begin(9600);
  pinMode(pump,OUTPUT); pinMode(lamp,OUTPUT); pinMode(feed,OUTPUT);
  pinMode(heater,OUTPUT); pinMode(filterex,OUTPUT); pinMode(filterin,OUTPUT); pinMode(irrigation,OUTPUT);
  digitalWrite(pump,HIGH); digitalWrite(lamp,HIGH); digitalWrite(feed,HIGH);
  digitalWrite(heater,HIGH); digitalWrite(filterex,HIGH); digitalWrite(filterin,HIGH); digitalWrite(irrigation,HIGH);
  dht.setup(2);
  Ethernet.begin(mac, ip);
  server.begin();
  Serial.print("server is at "); Serial.println(Ethernet.localIP());
}

void loop() {
  delay(dht.getMinimumSamplingPeriod());
  float humidity = dht.getHumidity();
  float temperature = dht.getTemperature();
  float fahrenheit = dht.toFahrenheit(temperature);
  int ldrValue = analogRead(A0);
  int flameValue = analogRead(A1);
  int MQ4Value = analogRead(A2);
  int HygValueA = analogRead(A3);
  int HygValueB = analogRead(A4);
  int HygValueC = analogRead(A5);

  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        if (readString.length() < 135) readString += c;
        Serial.println(readString);
        if (c == '\n') {
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type:text/html");
          client.println("Connection: close");
          client.println();
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("
");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("");
          client.println("
");
          break;
        }
      }
    }
    delay(1);
    client.stop();

    // Exécution commandes reçues
    if (readString.indexOf("?airpump=pumpIsOn") > 0) digitalWrite(pump, LOW);
    else if (readString.indexOf("?airpump=pumpIsOff") > 0) digitalWrite(pump, HIGH);
    if (readString.indexOf("&lamp=lampIsOn") > 0) digitalWrite(lamp, LOW);
    else if (readString.indexOf("&lamp=lampIsOff") > 0) digitalWrite(lamp, HIGH);
    if (readString.indexOf("&feed=feedIsOn") > 0) digitalWrite(feed, LOW);
    else if (readString.indexOf("&feed=feedIsOff") > 0) digitalWrite(feed, HIGH);
    if (readString.indexOf("&heater=heaterIsOn") > 0) digitalWrite(heater, LOW);
    else if (readString.indexOf("&heater=heaterIsOff") > 0) digitalWrite(heater, HIGH);
    if (readString.indexOf("&filterex=exIsOn") > 0) digitalWrite(filterex, LOW);
    else if (readString.indexOf("&filterex=exIsOff") > 0) digitalWrite(filterex, HIGH);
    if (readString.indexOf("&filterin=inIsOn") > 0) digitalWrite(filterin, LOW);
    else if (readString.indexOf("&filterin=inIsOff") > 0) digitalWrite(filterin, HIGH);
    if (readString.indexOf("&irrigation=start") > 0) digitalWrite(irrigation, LOW);
    else if (readString.indexOf("&irrigation=stop") > 0) digitalWrite(irrigation, HIGH);
    readString = "";
    Serial.println("client disconnected");
  }
}

Pièces personnalisées et boîtiers

• arduinautomotion_wNJ69zA666.ico
• spidersense_Ge3umcKzBw.mp4
• spidermanvoice_EqWLILohmW.mp3

Schémas