Dans ce projet, vous apprendrez à contrôler vos GPIO ESP32 ou ESP8266 depuis n’importe où dans le monde. Cela peut être très utile pour piloter à distance un relais, un thermostat, ou tout autre appareil.
Mis à jour le 27 mars 2023
Ce projet est également très polyvalent. Grâce à votre tableau de bord cloud, vous pouvez facilement contrôler plus de sorties (sans télécharger de nouveau code sur votre carte) et vous pouvez même connecter plusieurs cartes à votre serveur.
Auparavant, nous stockions les relevés des capteurs dans une base de données et nous utilisions différentes méthodes pour afficher les relevés des capteurs sur :
Maintenant, j’ai créé ce nouveau projet où vous pouvez créer des boutons dans un tableau de bord et les attribuer à un numéro de carte et GPIO. Ensuite, vous pouvez utiliser les interrupteurs à bascule pour contrôler les sorties ESP32 ou ESP8266 de n’importe où.
Il existe de nombreuses façons de contrôler les sorties de n’importe où, et même s’il s’agit d’une solution de travail, il existe d’autres méthodes qui fournissent une communication bidirectionnelle avec vos appareils. Je vous recommande également d’aller plus loin dans ce projet et d’ajouter plus de fonctionnalités pour répondre à vos propres besoins.
Pour créer ce projet, vous utiliserez ces technologies :
- ESP32 ou ESP8266 programmé avec Arduino IDE
- Serveur d’hébergement et nom de domaine
- Scripts PHP pour stocker et récupérer les états de sortie stockés dans une base de données MySQL
Table des matières
Ce projet est divisé en les principales sections suivantes :
- Hébergement de votre application PHP et de votre base de données MySQL
- Préparation de votre base de données MySQL
- Création de vos fichiers de tableau de bord
- Script PHP – Mettre à jour et récupérer les états de sortie
- Script PHP pour les fonctions de base de données
- Script PHP – Boutons de contrôle
- Configuration de l’ESP32 ou de l’ESP8266
Regardez la démonstration vidéo
Pour voir comment fonctionne le projet, vous pouvez regarder la vidéo de démonstration suivante :
0. Télécharger le code source
Pour ce projet, vous aurez besoin de ces fichiers :
1. Hébergement de votre application PHP et de votre base de données MySQL
Le but de ce projet est d’avoir votre propre nom de domaine et compte d’hébergement qui vous permettent de contrôler vos GPIO ESP32 ou ESP8266 de n’importe où dans le monde.
Voici un aperçu de haut niveau du fonctionnement du projet :
- Vous avez une page Web exécutant un script PHP avec des boutons à bascule qui vous permettent d’activer et de désactiver les sorties ;
- Lorsque vous appuyez sur les boutons, il met à jour l’état de sortie et l’enregistre dans votre base de données ;
- Vous pouvez ajouter plus de boutons ou les supprimer de votre tableau de bord ;
- Ensuite, vous pouvez avoir un ESP32 ou ESP8266 ou même plusieurs cartes qui envoient des requêtes HTTP GET toutes les X secondes à votre serveur ;
- Enfin, selon le résultat de cette requête HTTP GET, la carte ESP met à jour ses GPIO en conséquence.
Services d’hébergement
Je recommande d’utiliser l’un des services d’hébergement suivants qui peuvent gérer toutes les exigences du projet :
- Bluehost (convivial avec cPanel) : nom de domaine gratuit lors de la souscription au plan de 3 ans. Je recommande de choisir l’option de sites Web illimités ;
- Digital Ocean : serveur Linux que vous gérez via une ligne de commande. Je n’ai recommandé cette option qu’aux utilisateurs avancés.
Ces deux services sont ceux que j’utilise et que je recommande personnellement, mais vous pouvez utiliser n’importe quel autre service d’hébergement. Tout service d’hébergement proposant PHP et MySQL fonctionnera avec ce didacticiel. Si vous n’avez pas de compte d’hébergement, je vous recommande de vous inscrire à Bluehost.
Obtenez un hébergement et un nom de domaine avec Bluehost »
Lors de l’achat d’un compte d’hébergement, vous devrez également acheter un nom de domaine. C’est ce qui fait l’intérêt de ce projet : vous allez pouvoir accéder à votre nom de domaine (http://example.com) et contrôler vos boards.
Si vous aimez nos projets, vous pourriez envisager de vous inscrire à l’un des services d’hébergement recommandés, car vous soutiendrez notre travail.
Remarque : vous pouvez également exécuter un serveur LAMP (Linux, Apache, MySQL, PHP) sur un Raspberry Pi pour contrôler vos cartes dans votre réseau local. Cependant, le but de ce tutoriel est de contrôler les sorties ESP avec votre propre nom de domaine auquel vous pouvez accéder de n’importe où dans le monde.
2. Préparation de votre base de données MySQL
Après avoir créé un compte d’hébergement et configuré un nom de domaine, vous pouvez vous connecter à votre cPanel ou à un tableau de bord similaire. Après cela, suivez les étapes suivantes pour créer votre base de données, votre nom d’utilisateur, votre mot de passe et votre table SQL.
Création d’une base de données et d’un utilisateur
Ouvrez l’onglet « Avancé »:
1. Tapez « base de données » dans la barre de recherche et sélectionnez « Assistant de base de données MySQL ».
2. Entrez le nom de votre base de données souhaitée. Dans mon cas, le nom de la base de données est esp_data. Ensuite, appuyez sur le bouton « Étape suivante » :
Remarque : plus tard, vous devrez utiliser le nom de la base de données avec le préfixe que votre hébergeur vous donne (mon préfixe de base de données dans la capture d’écran ci-dessus est flou). Je l’appellerai désormais example_esp_data.
3. Tapez votre nom d’utilisateur de base de données et définissez un mot de passe. Vous devez enregistrer tous ces détails, car vous en aurez besoin plus tard pour établir une connexion à la base de données avec votre code PHP.
C’est ça! Votre nouvelle base de données et votre nouvel utilisateur ont été créés avec succès. Maintenant, enregistrez toutes vos informations, car vous en aurez besoin plus tard :
- Nom de la base de données : example_esp_data
- Nom d’utilisateur : example_esp_board
- Mot de passe : votre mot de passe
Création d’un tableau SQL
Après avoir créé votre base de données et votre utilisateur, revenez au tableau de bord cPanel et recherchez « phpMyAdmin ».
Dans la barre latérale gauche, sélectionnez le nom de votre base de données example_esp_data et ouvrez l’onglet « SQL ».
Important : assurez-vous d’avoir ouvert la base de données example_esp_data. Ensuite, cliquez sur l’onglet SQL. Si vous ne suivez pas ces étapes exactes et n’exécutez pas la requête SQL, vous risquez de créer une table dans la mauvaise base de données.
Copiez la requête SQL dans l’extrait de code suivant :
CREATE TABLE Outputs (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(64),
board INT(6),
gpio INT(6),
state INT(6)
);
INSERT INTO `Outputs`(`name`, `board`, `gpio`, `state`) VALUES ("Built-in LED", 1, 2, 0);
CREATE TABLE Boards (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
board INT(6),
last_request TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
INSERT INTO `Boards`(`board`) VALUES (1);
Collez-le dans le champ de requête SQL (surligné d’un rectangle rouge) et appuyez sur le bouton « Go » pour créer votre table :
Après cela, vous devriez voir vos tables nouvellement créées appelées Boards and Outputs dans la base de données example_esp_data, comme indiqué dans la figure ci-dessous :
3. Création de vos fichiers de tableau de bord
Dans cette section, nous allons créer les fichiers responsables de la création de votre tableau de bord. Voici les fichiers :
Si vous utilisez un fournisseur d’hébergement avec cPanel, vous pouvez rechercher « Gestionnaire de fichiers » :
Ensuite, sélectionnez l’option public_html et appuyez sur le bouton « + Fichier » pour créer un nouveau fichier.
Remarque : si vous suivez ce tutoriel et que vous n’êtes pas familier avec PHP, je vous recommande de créer ces fichiers exacts.
Créez quatre nouveaux fichiers dans /public_html avec ces noms et extensions exacts :
- esp-database.php
- esp-outputs-action.php
- esp-sorties.php
- esp-style.css
4. Script PHP – Mettre à jour et récupérer les états de sortie
Dans cette section, nous allons créer un script PHP chargé de recevoir les requêtes entrantes et d’interagir avec votre base de données MySQL.
Modifiez le fichier nouvellement créé (esp-outputs-action.php) et copiez l’extrait suivant :
<?php
include_once('esp-database.php');
$action = $id = $name = $gpio = $state = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$action = test_input($_POST["action"]);
if ($action == "output_create") {
$name = test_input($_POST["name"]);
$board = test_input($_POST["board"]);
$gpio = test_input($_POST["gpio"]);
$state = test_input($_POST["state"]);
$result = createOutput($name, $board, $gpio, $state);
$result2 = getBoard($board);
if(!$result2->fetch_assoc()) {
createBoard($board);
}
echo $result;
}
else {
echo "No data posted with HTTP POST.";
}
}
if ($_SERVER["REQUEST_METHOD"] == "GET") {
$action = test_input($_GET["action"]);
if ($action == "outputs_state") {
$board = test_input($_GET["board"]);
$result = getAllOutputStates($board);
if ($result) {
while ($row = $result->fetch_assoc()) {
$rows[$row["gpio"]] = $row["state"];
}
}
echo json_encode($rows);
$result = getBoard($board);
if($result->fetch_assoc()) {
updateLastBoardTime($board);
}
}
else if ($action == "output_update") {
$id = test_input($_GET["id"]);
$state = test_input($_GET["state"]);
$result = updateOutput($id, $state);
echo $result;
}
else if ($action == "output_delete") {
$id = test_input($_GET["id"]);
$board = getOutputBoardById($id);
if ($row = $board->fetch_assoc()) {
$board_id = $row["board"];
}
$result = deleteOutput($id);
$result2 = getAllOutputStates($board_id);
if(!$result2->fetch_assoc()) {
deleteBoard($board_id);
}
echo $result;
}
else {
echo "Invalid HTTP request.";
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
5. Script PHP pour les fonctions de base de données
Modifiez votre fichier esp-database.php qui insère, supprime et récupère des données. Copiez le script PHP suivant :
<?php
$servername = "localhost";
// Your Database name
$dbname = "REPLACE_WITH_YOUR_DATABASE_NAME";
// Your Database user
$username = "REPLACE_WITH_YOUR_USERNAME";
// Your Database user password
$password = "REPLACE_WITH_YOUR_PASSWORD";
function createOutput($name, $board, $gpio, $state) {
global $servername, $username, $password, $dbname;
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "INSERT INTO Outputs (name, board, gpio, state)
VALUES ('" . $name . "', '" . $board . "', '" . $gpio . "', '" . $state . "')";
if ($conn->query($sql) === TRUE) {
return "New output created successfully";
}
else {
return "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
function deleteOutput($id) {
global $servername, $username, $password, $dbname;
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "DELETE FROM Outputs WHERE id='". $id . "'";
if ($conn->query($sql) === TRUE) {
return "Output deleted successfully";
}
else {
return "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
function updateOutput($id, $state) {
global $servername, $username, $password, $dbname;
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "UPDATE Outputs SET state="" . $state . "" WHERE id='". $id . "'";
if ($conn->query($sql) === TRUE) {
return "Output state updated successfully";
}
else {
return "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
function getAllOutputs() {
global $servername, $username, $password, $dbname;
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, name, board, gpio, state FROM Outputs ORDER BY board";
if ($result = $conn->query($sql)) {
return $result;
}
else {
return false;
}
$conn->close();
}
function getAllOutputStates($board) {
global $servername, $username, $password, $dbname;
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT gpio, state FROM Outputs WHERE board='" . $board . "'";
if ($result = $conn->query($sql)) {
return $result;
}
else {
return false;
}
$conn->close();
}
function getOutputBoardById($id) {
global $servername, $username, $password, $dbname;
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT board FROM Outputs WHERE id='" . $id . "'";
if ($result = $conn->query($sql)) {
return $result;
}
else {
return false;
}
$conn->close();
}
function updateLastBoardTime($board) {
global $servername, $username, $password, $dbname;
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "UPDATE Boards SET last_request=now() WHERE board='". $board . "'";
if ($conn->query($sql) === TRUE) {
return "Output state updated successfully";
}
else {
return "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
function getAllBoards() {
global $servername, $username, $password, $dbname;
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT board, last_request FROM Boards ORDER BY board";
if ($result = $conn->query($sql)) {
return $result;
}
else {
return false;
}
$conn->close();
}
function getBoard($board) {
global $servername, $username, $password, $dbname;
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT board, last_request FROM Boards WHERE board='" . $board . "'";
if ($result = $conn->query($sql)) {
return $result;
}
else {
return false;
}
$conn->close();
}
function createBoard($board) {
global $servername, $username, $password, $dbname;
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "INSERT INTO Boards (board) VALUES ('" . $board . "')";
if ($conn->query($sql) === TRUE) {
return "New board created successfully";
}
else {
return "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
function deleteBoard($board) {
global $servername, $username, $password, $dbname;
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "DELETE FROM Boards WHERE board='". $board . "'";
if ($conn->query($sql) === TRUE) {
return "Board deleted successfully";
}
else {
return "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
?>
Avant d’enregistrer le fichier, vous devez modifier les variables $dbname, $username et $password avec vos détails uniques :
// Your Database name
$dbname = "example_esp_data";
// Your Database user
$username = "example_esp_board";
// Your Database user password
$password = "YOUR_USER_PASSWORD";Après avoir ajouté le nom de la base de données, le nom d’utilisateur et le mot de passe, enregistrez le fichier et continuez avec ce didacticiel.
6. Script PHP – Boutons de contrôle
Vous devrez également ajouter un fichier CSS pour styliser votre tableau de bord (esp-style.css). Copiez ce CSS dans votre fichier et enregistrez-le :
/**
Rui Santos
Complete project details at https://Raspberryme.com/control-esp32-esp8266-gpios-from-anywhere/
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
**/
html {
font-family: Arial;
display: inline-block;
text-align: center;
}
h2 {
font-size: 3.0rem;
}
body {
max-width: 600px;
margin:0px auto;
padding-bottom: 25px;
}
.switch {
position: relative;
display: inline-block;
width: 120px;
height: 68px;
}
.switch input {
display: none
}
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #949494;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 52px;
width: 52px;
left: 8px; bottom: 8px;
background-color: #fff;
-webkit-transition: .4s;
transition: .4s;
border-radius: 68px;
}
input:checked+.slider {
background-color: #008B74;
}
input:checked+.slider:before {
-webkit-transform: translateX(52px);
-ms-transform: translateX(52px);
transform: translateX(52px);
}
input[type=text], input[type=number], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #008B74;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #005a4c;
}
div {
text-align: left;
border-radius: 4px;
background-color: #efefef;
padding: 20px;
}
Enfin, copiez le script PHP suivant dans vos fichiers esp-outputs.php qui afficheront vos boutons de contrôle et vous permettront de créer/supprimer des boutons :
<!--
Rui Santos
Complete project details at https://Raspberryme.com/control-esp32-esp8266-gpios-from-anywhere/
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
-->
<?php
include_once('esp-database.php');
$result = getAllOutputs();
$html_buttons = null;
if ($result) {
while ($row = $result->fetch_assoc()) {
if ($row["state"] == "1"){
$button_checked = "checked";
}
else {
$button_checked = "";
}
$html_buttons .= '<h3>' . $row["name"] . ' - Board '. $row["board"] . ' - GPIO ' . $row["gpio"] . ' (<i><a onclick="deleteOutput(this)" href="https://www.raspberryme.com/control-esp32-esp8266-gpios-from-anywhere/javascript:void(0);" id="' . $row["id"] . '">Delete</a></i>)</h3><label class="switch"><input type="checkbox" onchange="updateOutput(this)" id="' . $row["id"] . '" ' . $button_checked . '><span class="slider"></span></label>';
}
}
$result2 = getAllBoards();
$html_boards = null;
if ($result2) {
$html_boards .= '<h3>Boards</h3>';
while ($row = $result2->fetch_assoc()) {
$row_reading_time = $row["last_request"];
// Uncomment to set timezone to - 1 hour (you can change 1 to any number)
//$row_reading_time = date("Y-m-d H:i:s", strtotime("$row_reading_time - 1 hours"));
// Uncomment to set timezone to + 4 hours (you can change 4 to any number)
//$row_reading_time = date("Y-m-d H:i:s", strtotime("$row_reading_time + 7 hours"));
$html_boards .= '<p><strong>Board ' . $row["board"] . '</strong> - Last Request Time: '. $row_reading_time . '</p>';
}
}
?>
<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="esp-style.css">
<title>ESP Output Control</title>
</head>
<body>
<h2>ESP Output Control</h2>
<?php echo $html_buttons; ?>
<br><br>
<?php echo $html_boards; ?>
<br><br>
<div><form onsubmit="return createOutput();">
<h3>Create New Output</h3>
<label for="outputName">Name</label>
<input type="text" name="name" id="outputName"><br>
<label for="outputBoard">Board ID</label>
<input type="number" name="board" min="0" id="outputBoard">
<label for="outputGpio">GPIO Number</label>
<input type="number" name="gpio" min="0" id="outputGpio">
<label for="outputState">Initial GPIO State</label>
<select id="outputState" name="state">
<option value="0">0 = OFF</option>
<option value="1">1 = ON</option>
</select>
<input type="submit" value="Create Output">
<p><strong>Note:</strong> in some devices, you might need to refresh the page to see your newly created buttons or to remove deleted buttons.</p>
</form></div>
<script>
function updateOutput(element) {
var xhr = new XMLHttpRequest();
if(element.checked){
xhr.open("GET", "esp-outputs-action.php?action=output_update&id="+element.id+"&state=1", true);
}
else {
xhr.open("GET", "esp-outputs-action.php?action=output_update&id="+element.id+"&state=0", true);
}
xhr.send();
}
function deleteOutput(element) {
var result = confirm("Want to delete this output?");
if (result) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "esp-outputs-action.php?action=output_delete&id="+element.id, true);
xhr.send();
alert("Output deleted");
setTimeout(function(){ window.location.reload(); });
}
}
function createOutput(element) {
var xhr = new XMLHttpRequest();
xhr.open("POST", "esp-outputs-action.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
alert("Output created");
setTimeout(function(){ window.location.reload(); });
}
}
var outputName = document.getElementById("outputName").value;
var outputBoard = document.getElementById("outputBoard").value;
var outputGpio = document.getElementById("outputGpio").value;
var outputState = document.getElementById("outputState").value;
var httpRequestData = "action=output_create&name="+outputName+"&board="+outputBoard+"&gpio="+outputGpio+"&state="+outputState;
xhr.send(httpRequestData);
}
</script>
</body>
</html>
Si vous essayez d’accéder à votre nom de domaine dans le chemin d’URL suivant, vous verrez ce qui suit :
https://example.com/esp-outputs.php
C’est ça! Vous devriez voir cette page Web avec votre bouton par défaut. Le bouton par défaut est appelé LED intégrée, il est affecté à la carte 1 et contrôle le GPIO 2.
7. Configuration de l’ESP32 ou de l’ESP8266
Ce projet est compatible avec les cartes ESP32 et ESP8266. Il vous suffit d’assembler un circuit simple et de télécharger les croquis fournis.
Pièces requises
Pour tester ce projet, nous allons connecter des LED aux GPIO ESP32 et ESP8266. Voici une liste des pièces dont vous avez besoin pour construire le circuit pour ce projet :
Vous pouvez utiliser les liens précédents ou accéder directement à MakerAdvisor.com/tools pour trouver toutes les pièces pour vos projets au meilleur prix !
Schémas
Pour cet exemple, nous utiliserons une carte ESP32 avec 3 LED et une ESP8266 avec 2 LED. Au lieu de LED, vous pouvez connecter un module de relais ou tout autre appareil aux ESP GPIO.
Câblage des LED à ESP32 – Carte #1
Lecture recommandée : quels GPIO ESP32 devez-vous utiliser.
Câblage des LED à ESP8266 – Carte n ° 2
Lecture recommandée : quels GPIO ESP8266 devez-vous utiliser.
Code ESP32 – Carte n ° 1
Nous allons programmer l’ESP32/ESP8266 à l’aide de l’IDE Arduino, vous devez donc avoir le module complémentaire ESP installé dans votre IDE Arduino.
Suivez l’un des tutoriels suivants en fonction de la carte que vous utilisez :
Vous devez également installer le Bibliothèque Arduino_JSON. Vous pouvez installer cette bibliothèque dans le gestionnaire de bibliothèque Arduino IDE. Allez simplement dans Sketch > Inclure la bibliothèque > Gérer les bibliothèques… et recherchez le nom de la bibliothèque comme suit :
Après avoir installé les modules complémentaires et les bibliothèques de cartes nécessaires, copiez le code suivant dans votre IDE Arduino, mais ne le téléchargez pas encore. Vous devez apporter quelques modifications pour que cela fonctionne pour vous.
/*
Rui Santos
Complete project details at https://Raspberryme.com/control-esp32-esp8266-gpios-from-anywhere/
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
*/
#include <WiFi.h>
#include <HTTPClient.h>
#include <WiFiClientSecure.h>
#include <Arduino_JSON.h>
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
//Your IP address or domain name with URL path
const char* serverName = "https://example.com/esp-outputs-action.php?action=outputs_state&board=1";
// Update interval time set to 5 seconds
const long interval = 5000;
unsigned long previousMillis = 0;
String outputsState;
void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
Serial.println("Connecting");
while(WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to WiFi network with IP Address: ");
Serial.println(WiFi.localIP());
}
void loop() {
unsigned long currentMillis = millis();
if(currentMillis - previousMillis >= interval) {
// Check WiFi connection status
if(WiFi.status()== WL_CONNECTED ){
outputsState = httpGETRequest(serverName);
Serial.println(outputsState);
JSONVar myObject = JSON.parse(outputsState);
// JSON.typeof(jsonVar) can be used to get the type of the var
if (JSON.typeof(myObject) == "undefined") {
Serial.println("Parsing input failed!");
return;
}
Serial.print("JSON object = ");
Serial.println(myObject);
// myObject.keys() can be used to get an array of all the keys in the object
JSONVar keys = myObject.keys();
for (int i = 0; i < keys.length(); i++) {
JSONVar value = myObject[keys[i]];
Serial.print("GPIO: ");
Serial.print(keys[i]);
Serial.print(" - SET to: ");
Serial.println(value);
pinMode(atoi(keys[i]), OUTPUT);
digitalWrite(atoi(keys[i]), atoi(value));
}
// save the last HTTP GET Request
previousMillis = currentMillis;
}
else {
Serial.println("WiFi Disconnected");
}
}
}
String httpGETRequest(const char* serverName) {
WiFiClientSecure *client = new WiFiClientSecure;
// set secure client without certificate
client->setInsecure();
HTTPClient https;
// Your IP address with path or Domain name with URL path
https.begin(*client, serverName);
// Send HTTP POST request
int httpResponseCode = https.GET();
String payload = "{}";
if (httpResponseCode>0) {
Serial.print("HTTP Response code: ");
Serial.println(httpResponseCode);
payload = https.getString();
}
else {
Serial.print("Error code: ");
Serial.println(httpResponseCode);
}
// Free resources
https.end();
return payload;
}
Remarque : La plupart des serveurs nécessitent que vous fassiez des requêtes HTTPS. Le code ci-dessus rend les requêtes HTTPS conformes aux exigences de la plupart des serveurs cloud de nos jours.
Votre serveur ne supporte pas le HTTPS ? Utilisez plutôt ce code.
Définition de vos identifiants réseau
Vous devez modifier les lignes suivantes avec vos identifiants réseau : SSID et mot de passe. Le code est bien commenté sur l’endroit où vous devez apporter les modifications.
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";Définition de votre nom de serveur
Vous devez également saisir votre nom de domaine, afin que l’ESP envoie la requête HTTP GET à votre propre serveur.
const char* serverName = "https://example.com/esp-outputs-action.php?action=outputs_state&board=1";Notez que sur l’URL serverName nous avons un paramètre board=1. Cela indique l’ID de la carte. Si vous souhaitez ajouter d’autres cartes, vous devez modifier cet ID. Cela identifie le tableau que vous souhaitez contrôler.
Maintenant, vous pouvez télécharger le code sur votre tableau. Cela devrait fonctionner tout de suite.
Ce projet est déjà assez long, nous n’aborderons donc pas le fonctionnement du code. En résumé, votre ESP32 fait une requête HTTP GET à votre serveur toutes les X secondes pour mettre à jour les états des GPIO (par défaut, il est réglé sur 5 secondes).
const long interval = 5000;Ensuite, la carte mettra à jour ses sorties en fonction de la réponse à la demande.
Ouvrez votre Serial Monitor et vous devriez voir quelque chose de similaire :
La requête récupère un objet JSON qui contient le numéro GPIO et son état. Dans ce cas, il nous indique que GPIO 2 doit être LOW {“2″:”0”}.
Code ESP8266 – Carte n ° 2
Pour cet exemple, nous contrôlons les sorties de deux cartes simultanément. Vous pouvez utiliser le code suivant pour votre carte ESP8266 :
/*
Rui Santos
Complete project details at https://Raspberryme.com/control-esp32-esp8266-gpios-from-anywhere/
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
*/
#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <WiFiClientSecureBearSSL.h>
#include <Arduino_JSON.h>
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
//Your IP address or domain name with URL path
//const char* serverName = "https://example.com/esp-outputs-action.php?action=outputs_state&board=1";
// Update interval time set to 5 seconds
const long interval = 5000;
unsigned long previousMillis = 0;
String outputsState;
void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
Serial.println("Connecting");
while(WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to WiFi network with IP Address: ");
Serial.println(WiFi.localIP());
}
void loop() {
unsigned long currentMillis = millis();
if(currentMillis - previousMillis >= interval) {
// Check WiFi connection status
if(WiFi.status()== WL_CONNECTED ){
outputsState = httpGETRequest(serverName);
Serial.println(outputsState);
JSONVar myObject = JSON.parse(outputsState);
// JSON.typeof(jsonVar) can be used to get the type of the var
if (JSON.typeof(myObject) == "undefined") {
Serial.println("Parsing input failed!");
return;
}
Serial.print("JSON object = ");
Serial.println(myObject);
// myObject.keys() can be used to get an array of all the keys in the object
JSONVar keys = myObject.keys();
for (int i = 0; i < keys.length(); i++) {
JSONVar value = myObject[keys[i]];
Serial.print("GPIO: ");
Serial.print(keys[i]);
Serial.print(" - SET to: ");
Serial.println(value);
pinMode(atoi(keys[i]), OUTPUT);
digitalWrite(atoi(keys[i]), atoi(value));
}
// save the last HTTP GET Request
previousMillis = currentMillis;
}
else {
Serial.println("WiFi Disconnected");
}
}
}
String httpGETRequest(const char* serverName) {
std::unique_ptr<BearSSL::WiFiClientSecure>client(new BearSSL::WiFiClientSecure);
// Ignore SSL certificate validation
client->setInsecure();
HTTPClient https;
// Your IP address with path or Domain name with URL path
https.begin(*client, serverName);
// Send HTTP POST request
int httpResponseCode = https.GET();
String payload = "{}";
if (httpResponseCode>0) {
Serial.print("HTTP Response code: ");
Serial.println(httpResponseCode);
payload = https.getString();
}
else {
Serial.print("Error code: ");
Serial.println(httpResponseCode);
}
// Free resources
https.end();
return payload;
}
Pour préparer le code de votre ESP8266, entrez simplement le SSID, le mot de passe, le nom de domaine et l’ID de carte (dans ce cas, il s’agit de l’ID de carte numéro 2).
Remarque : La plupart des serveurs nécessitent que vous fassiez des requêtes HTTPS. Le code ci-dessus rend les requêtes HTTPS conformes aux exigences de la plupart des serveurs cloud de nos jours.
Votre serveur ne supporte pas le HTTPS ? Utilisez plutôt ce code.
Manifestation
Après avoir terminé toutes les étapes, alimentez vos deux cartes ESP.
Si vous ouvrez votre nom de domaine dans ce chemin URL :
https://example.com/esp-outputs.phpVous devriez voir le bouton par défaut dans votre tableau de bord :
Si vous appuyez sur ce bouton pour allumer et éteindre, vous devriez pouvoir contrôler GPIO 2 depuis votre ESP32 – Board #1.
Vous pouvez ajouter plus de boutons à votre projet, taper un nom (LED 2), régler l’id sur le numéro 1, puis taper le GPIO que vous souhaitez contrôler (33).
Créez un autre bouton pour la carte 1 pour contrôler le GPIO 32. Ensuite, ajoutez deux boutons pour la carte 2 (GPIO 2 et GPIO 4).
À tout moment, vous pouvez utiliser le lien de suppression pour supprimer des boutons de votre tableau de bord ou utiliser le formulaire en bas pour en créer d’autres.
Remarque : sur certains appareils, vous devrez peut-être actualiser la page pour voir vos boutons nouvellement créés ou pour supprimer les boutons supprimés.
Enfin, il y a une section qui montre la dernière fois qu’un tableau a fait une demande et mis à jour ses sorties.
Comme il ne s’agit pas d’une communication bidirectionnelle, lorsque vous appuyez sur les boutons pour contrôler vos sorties, votre carte ne met pas à jour les sorties instantanément. Il faudra quelques secondes à votre carte ESP pour faire une nouvelle requête HTTP GET et mettre à jour ses états de sortie. Avec la section Heure de la dernière demande, vous pouvez voir quand cela s’est produit. Actualisez simplement la page pour voir les valeurs mises à jour.
La page Web est également adaptée aux mobiles, vous pouvez donc utiliser n’importe quel appareil pour accéder à votre serveur.
Conclusion
Dans ce tutoriel, vous avez appris à contrôler vos sorties ESP32 et ESP8266 depuis n’importe où dans le monde. Cela nécessite que vous ayez votre propre serveur et nom de domaine (alternativement, vous pouvez utiliser un serveur Raspberry Pi LAMP pour un accès local).
Il existe de nombreuses autres fonctionnalités que vous pouvez ajouter à votre serveur, vous pouvez le fusionner avec nos projets précédents pour afficher les lectures des capteurs. N’hésitez pas à ajouter plus de cartes ESP pour fonctionner simultanément et définir d’autres sorties à contrôler.
Je vous encourage à modifier l’apparence de la page Web, à ajouter plus de fonctionnalités telles que les notifications par e-mail, à publier les données de différents capteurs, à utiliser plusieurs cartes ESP, et bien plus encore.
Vous aimerez peut-être aussi lire :
Apprenez-en plus sur l’ESP32 et l’ESP8266 avec nos ressources :
Merci pour la lecture.
Cette vidéo vous emmène dans l’histoire de Raspberry Pi :
