Pilotez 2 relais à l’aide d’une carte de développement à double relais ESP32 et d’une interface Web
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);
