Ce didacticiel est un guide étape par étape qui explique comment créer un serveur Web autonome ESP32 ou ESP8266 NodeMCU qui contrôle n’importe quel module de relais. Nous allons créer un serveur Web ESP32/ESP8266 adapté aux mobiles et accessible avec n’importe quel appareil doté d’un navigateur sur votre réseau local.
Présentation des relais
Un relais est un interrupteur à commande électrique et comme tout autre interrupteur, il peut être activé ou désactivé, laissant passer le courant ou non. Il peut être contrôlé avec des tensions basses, comme les 3,3 V fournis par les GPIO ESP et nous permet de contrôler des tensions élevées comme le 12 V, le 24 V ou la tension secteur (230 V en Europe et 120 V aux États-Unis).
Il existe différents modules de relais avec un nombre différent de canaux. Vous pouvez trouver des modules de relais avec un, deux, quatre, huit et même seize canaux. Le nombre de canaux détermine le nombre de sorties que vous pouvez contrôler.
Obtenir un module relais:
Pour un guide détaillé sur le fonctionnement d’un module de relais, lisez :
Contrôlez les modules de relais avec plusieurs canaux à l’aide d’un serveur Web ESP32/ESP8266
Avec ce code de serveur Web, vous pouvez contrôler autant de relais que vous le souhaitez via le serveur Web, qu’ils soient configurés comme normalement ouverts ou comme normalement fermés. Il vous suffit de modifier quelques lignes de code pour définir le nombre de relais que vous souhaitez contrôler et l’affectation des broches.
Pour construire ce serveur Web, installez le module complémentaire de carte ESP32/ESP8266 et les bibliothèques suivantes dans votre IDE Arduino.
Installation des bibliothèques ESPAsyncWebServer, AsyncTCP et ESPAsyncTCP
- Cliquez ici pour télécharger la librairie ESPAsyncWebServer
- Cliquez ici pour télécharger la bibliothèque AsyncTCP (ESP32)
- Cliquez ici pour télécharger la librairie ESPAsyncTCP (ESP8266 NodeMCU)
Dans votre IDE Arduino, pour installer les bibliothèques, accédez à Esquisser > Inclure la bibliothèque > Ajouter une bibliothèque .ZIP… et sélectionnez la bibliothèque que vous venez de télécharger.
Après avoir installé les bibliothèques requises, copiez le code suivant dans votre IDE Arduino.
/*********
Rui Santos
Complete project details at https://Raspberryme.com/esp8266-relay-module-ac-web-server/
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
*********/
// Import required libraries
#include "ESP8266WiFi.h"
#include "ESPAsyncWebServer.h"
// Set to true to define Relay as Normally Open (NO)
#define RELAY_NO true
// Set number of relays
#define NUM_RELAYS 5
// Assign each GPIO to a relay
int relayGPIOs[NUM_RELAYS] = {5, 4, 14, 12, 13};
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
const char* PARAM_INPUT_1 = "relay";
const char* PARAM_INPUT_2 = "state";
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
h2 {font-size: 3.0rem;}
p {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: #ccc; 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: #2196F3}
input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}
</style>
</head>
<body>
<h2>ESP Web Server</h2>
%BUTTONPLACEHOLDER%
<script>function toggleCheckbox(element) {
var xhr = new XMLHttpRequest();
if(element.checked){ xhr.open("GET", "/update?relay="+element.id+"&state=1", true); }
else { xhr.open("GET", "/update?relay="+element.id+"&state=0", true); }
xhr.send();
}</script>
</body>
</html>
)rawliteral";
// Replaces placeholder with button section in your web page
String processor(const String& var){
//Serial.println(var);
if(var == "BUTTONPLACEHOLDER"){
String buttons ="";
for(int i=1; i<=NUM_RELAYS; i++){
String relayStateValue = relayState(i);
buttons+= "<h4>Relay #" + String(i) + " - GPIO " + relayGPIOs[i-1] + "</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"" + String(i) + "\" "+ relayStateValue +"><span class=\"slider\"></span></label>";
}
return buttons;
}
return String();
}
String relayState(int numRelay){
if(RELAY_NO){
if(digitalRead(relayGPIOs[numRelay-1])){
return "";
}
else {
return "checked";
}
}
else {
if(digitalRead(relayGPIOs[numRelay-1])){
return "checked";
}
else {
return "";
}
}
return "";
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
// Set all relays to off when the program starts - if set to Normally Open (NO), the relay is off when you set the relay to HIGH
for(int i=1; i<=NUM_RELAYS; i++){
pinMode(relayGPIOs[i-1], OUTPUT);
if(RELAY_NO){
digitalWrite(relayGPIOs[i-1], HIGH);
}
else{
digitalWrite(relayGPIOs[i-1], LOW);
}
}
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP8266 Local IP Address
Serial.println(WiFi.localIP());
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
// Send a GET request to <ESP_IP>/update?relay=<inputMessage>&state=<inputMessage2>
server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) {
String inputMessage;
String inputParam;
String inputMessage2;
String inputParam2;
// GET input1 value on <ESP_IP>/update?relay=<inputMessage>
if (request->hasParam(PARAM_INPUT_1) & request->hasParam(PARAM_INPUT_2)) {
inputMessage = request->getParam(PARAM_INPUT_1)->value();
inputParam = PARAM_INPUT_1;
inputMessage2 = request->getParam(PARAM_INPUT_2)->value();
inputParam2 = PARAM_INPUT_2;
if(RELAY_NO){
Serial.print("NO ");
digitalWrite(relayGPIOs[inputMessage.toInt()-1], !inputMessage2.toInt());
}
else{
Serial.print("NC ");
digitalWrite(relayGPIOs[inputMessage.toInt()-1], inputMessage2.toInt());
}
}
else {
inputMessage = "No message sent";
inputParam = "none";
}
Serial.println(inputMessage + inputMessage2);
request->send(200, "text/plain", "OK");
});
// Start server
server.begin();
}
void loop() {
}
Définir la configuration du relais
Modifiez la variable suivante pour indiquer si vous utilisez vos relais en configuration normalement ouverte (NO) ou normalement fermée (NC). Met le RELAY_NO variable à vrai pour un système d’exploitation normalement ouvert défini sur faux pour normalement fermé.
#define RELAY_NO trueDéfinir le nombre de relais (canaux)
Vous pouvez définir le nombre de relais que vous souhaitez contrôler sur le NUM_RELAIS variable. À des fins de démonstration, nous le réglons sur 5.
#define NUM_RELAYS 5Définir l’affectation des broches des relais
Dans la variable de tableau suivante, vous pouvez définir les GPIO ESP qui contrôleront les relais.
int relayGPIOs[NUM_RELAYS] = {5, 4, 14, 12, 13};Le nombre de relais réglés sur le NUM_RELAIS la variable doit correspondre au nombre de GPIO attribués dans le relaisGPIO déployer.
Informations d’identification réseau
Insérez vos informations d’identification réseau dans les variables suivantes.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";Câblage d’un module de relais à une carte ESP
À des fins de démonstration, nous contrôlons 5 canaux de relais. Câblez les cartes ESP au module de relais comme indiqué dans les schémas suivants.
Câblage ESP32
Câblage ESP8266 NodeMCU
Avertissement: la plupart des projets de relais traitent de la tension secteur. Une mauvaise utilisation peut entraîner des blessures graves. Si vous n’êtes pas familier avec la tension secteur, demandez à quelqu’un de vous aider. Lors de la programmation de l’ESP ou du câblage de votre circuit, assurez-vous que tout est déconnecté de la tension secteur. Alternativement, vous pouvez utiliser une source d’alimentation 12V pour contrôler les appareils 12V.
Manifestation
Après avoir effectué les modifications nécessaires, téléchargez le code sur votre ESP. Ouvrez le moniteur série à un débit en bauds de 115200 et appuyez sur le bouton ESP RST pour obtenir son adresse IP (assurez-vous que votre circuit est débranché de la tension secteur).
Ouvrez un navigateur sur votre réseau local et saisissez l’adresse IP ESP pour accéder au serveur Web. Vous devriez obtenir quelque chose comme suit avec autant de boutons que le nombre de relais que vous avez défini dans votre code.
Désormais, vous pouvez utiliser les boutons pour contrôler vos relais à distance à l’aide de votre smartphone.
Enceinte pour la sécurité
Pour un projet final, assurez-vous de placer votre module de relais et votre ESP à l’intérieur d’un boîtier pour éviter que les broches AC ne soient exposées.
Voir la vidéo
Regardez la vidéo suivante pour un tutoriel complet et une démonstration en direct.
Conclusion
L’utilisation de relais avec l’ESP est un excellent moyen de contrôler à distance les appareils électroménagers AC. Vous pouvez également consulter nos guides complets pour en savoir plus sur les modules relais :
En savoir plus sur les cartes ESP avec nos ressources :
Merci d’avoir lu.