Pilotez 2 relais à l’aide d’une carte de développement à double relais ESP32 et d’une interface Web
Description :
Projet permettant de piloter deux relais via une carte ESP32 à double relais à l’aide d’une interface Web, pour contrôler des dispositifs à distance depuis un navigateur.
L’ESP32 héberge un serveur Web qui affiche une page avec des boutons permettant d’activer ou de désactiver chaque relais indépendamment. Cette configuration est idéale pour des applications de domotique, éclairage à distance, ou tout système nécessitant un contrôle interactif et sans fil de relais électriques via Wi-Fi, sans nécessiter de connexion physique directe à l’Arduino ou au PC.
Prérequis :
- 1 x Carte de développement à double relais ESP32
- Fils de connexion
Autre :
- Tutoriel disponible pour téléverser sur la carte de développement à double relais ESP32 ICI
Version IDE :
- Arduino IDE 2.3.5
Bibliothèque :
- LittleFS.h (Tuto dispo)
- ESPAsyncWebServer.h (version: 3.7.10 par ESP32Async)
- AsyncTCP.h (version 3.4.7 par ESP32Async)
Vidéo de démonstration :
Schéma de câblage :
Code :
Code Arduino :
#include "LittleFS.h"
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <WiFi.h>
const char *ssid = "......"; // "Votre Nom_du_routeur"
const char *password = "......"; // "Votre Mot_de_passe_du_routeur"
AsyncWebServer server(80);
int Led = 23;
int Relay1 = 16;
int Relay2 = 17;
int Etatrelay1;
int Etatrelay2;
void setup() {
Serial.begin(115200);
pinMode(Led, OUTPUT);
pinMode(Relay1, OUTPUT);
pinMode(Relay2, OUTPUT);
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
// Imprimer l'adresse IP locale ESP
Serial.println(WiFi.localIP());
if (!LittleFS.begin()) {
Serial.println("An Error has occurred while mounting LittleFS");
return;
}
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(LittleFS, "/index.html", "text/html");
});
server.on("/script.js", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(LittleFS, "/script.js", "text/javascript");
});
server.on("/lire_Etatrelay1", HTTP_GET, [](AsyncWebServerRequest *request) {
String InfoEtatrelay1 = String(Etatrelay1);
request->send(200, "text/plain", InfoEtatrelay1);
});
server.on("/lire_Etatrelay2", HTTP_GET, [](AsyncWebServerRequest *request) {
String InfoEtatrelay2 = String(Etatrelay2);
request->send(200, "text/plain", InfoEtatrelay2);
});
server.on("/write_Etatrelay1", HTTP_POST, [](AsyncWebServerRequest *request) {
if (request->hasParam("Etatrelay1", true)) {
String message;
message = request->getParam("Etatrelay1", true)->value();
Etatrelay1 = message.toInt();
}
request->send(204);
});
server.on("/write_Etatrelay2", HTTP_POST, [](AsyncWebServerRequest *request) {
if (request->hasParam("Etatrelay2", true)) {
String message;
message = request->getParam("Etatrelay2", true)->value();
Etatrelay2 = message.toInt();
}
request->send(204);
});
server.begin();
}
void loop() {
if (WiFi.status() == WL_CONNECTED) {
digitalWrite(Led, HIGH);
} else {
digitalWrite(Led, LOW);
}
if (Etatrelay1 == 1) {
digitalWrite(Relay1, HIGH);
} else {
digitalWrite(Relay1, LOW);
}
if (Etatrelay2 == 1) {
digitalWrite(Relay2, HIGH);
} else {
digitalWrite(Relay2, LOW);
}
Serial.print("Etat relais 1 :");
Serial.println(Etatrelay1);
Serial.print("Etat relais 2 :");
Serial.println(Etatrelay2);
delay(500);
}
Code HTML :
( index.html )
<!DOCTYPE html>
<html lang="fr">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8" />
<script type="text/javascript" src="https://webapps1.chicago.gov/cdn/jQuery-3.4.1/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
.form-switch.form-switch-xl {
display: flex;
justify-content: center;
align-items: center;
}
.form-switch.form-switch-xl .form-check-input {
height: 2.5rem;
width: calc(5rem);
border-radius: 5rem;
}
</style>
<body>
<div class="container text-center">
<br>
<div>
<h4>Relais 1</h4>
</div>
<div class="form-check form-switch form-switch-xl">
<input class="form-check-input" type="checkbox" id="BtEtatrelay1">
</div>
<br>
<div>
<h4>Relais 2</h4>
</div>
<div class="form-check form-switch form-switch-xl">
<input class="form-check-input " type="checkbox" id="BtEtatrelay2">
</div>
</div>
</div>
</body>
</html>
Code Javascript :
( script.js )
$(document).ready(function () {
$("#BtEtatrelay1").change(function () {
var valeur = this.checked ? 1 : 0;
$.post("write_Etatrelay1", {
Etatrelay1: valeur
});
Etatrelay1();
});
});
$(document).ready(function () {
$("#BtEtatrelay2").change(function () {
var valeur = this.checked ? 1 : 0;
$.post("write_Etatrelay2", {
Etatrelay2: valeur
});
Etatrelay2();
});
});
function Etatrelay1() {
var xhttp = new XMLHttpRequest();
var ValeurEtatrelay1;
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
ValeurEtatrelay1 = this.responseText;
if (ValeurEtatrelay1 == 1) {
document.getElementById("BtEtatrelay1").checked = true;
} else {
document.getElementById("BtEtatrelay1").checked = false;
}
console.log(ValeurEtatrelay1);
return ValeurEtatrelay1;
}
};
xhttp.open("GET", "lire_Etatrelay1", true);
xhttp.send();
};
function Etatrelay2() {
var xhttp = new XMLHttpRequest();
var ValeurEtatrelay2;
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
ValeurEtatrelay2 = this.responseText;
if (ValeurEtatrelay2 == 1) {
document.getElementById("BtEtatrelay2").checked = true;
} else {
document.getElementById("BtEtatrelay2").checked = false;
}
console.log(ValeurEtatrelay2);
return ValeurEtatrelay2;
}
};
xhttp.open("GET", "lire_Etatrelay2", true);
xhttp.send();
};
Etatrelay1();
Etatrelay2();
function functioninterval() {
Etatrelay1();
Etatrelay2();
}
setInterval(functioninterval, 500);
