Ce tutoriel montre comment créer un serveur Web avec un bouton qui agit comme un interrupteur momentané pour contrôler à distance les sorties ESP32 ou ESP8266. L’état de sortie est ÉLEVÉ tant que vous maintenez le bouton enfoncé dans votre page Web. Une fois que vous le relâchez, il passe à LOW. Par exemple, nous contrôlerons une LED, mais vous pouvez contrôler n’importe quelle autre sortie.
Les cartes ESP32/ESP8266 seront programmées à l’aide de l’IDE Arduino. Assurez-vous donc que ces cartes sont installées :
Aperçu du projet
Le diagramme suivant montre un aperçu simple du projet que nous allons construire.
- L’ESP32 ou l’ESP8266 héberge un serveur Web auquel vous pouvez accéder pour contrôler une sortie ;
- L’état par défaut de la sortie est BAS, mais vous pouvez le modifier en fonction de l’application de votre projet ;
- Il y a un bouton qui agit comme un interrupteur momentané :
- si vous appuyez sur le bouton, la sortie passe à l’état HIGH tant que vous maintenez le bouton enfoncé ;
- une fois le bouton relâché, l’état de la sortie repasse à LOW.
Installation de bibliothèques – Serveur Web asynchrone
Pour construire le serveur Web, vous devez installer les bibliothèques suivantes :
Ces bibliothèques ne peuvent pas être installées via le gestionnaire de bibliothèque Arduino, vous devez donc copier les fichiers de bibliothèque dans le dossier Bibliothèques d’installation Arduino. Alternativement, dans votre IDE Arduino, vous pouvez accéder à Esquisser > Inclure la bibliothèque > Ajouter une bibliothèque .zip et sélectionnez les bibliothèques que vous venez de télécharger.
Code
Copiez le code suivant dans votre IDE Arduino.
/*********
Rui Santos
Complete project details at https://Raspberryme.com/esp32-esp8266-web-server-outputs-momentary-switch/
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.
*********/
#ifdef ESP32
#include <WiFi.h>
#include <AsyncTCP.h>
#else
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#endif
#include <ESPAsyncWebServer.h>
// REPLACE WITH YOUR NETWORK CREDENTIALS
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
const int output = 2;
// HTML web page
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<title>ESP Pushbutton Web Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: Arial; text-align: center; margin:0px auto; padding-top: 30px;}
.button {
padding: 10px 20px;
font-size: 24px;
text-align: center;
outline: none;
color: #fff;
background-color: #2f4468;
border: none;
border-radius: 5px;
box-shadow: 0 6px #999;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.button:hover {background-color: #1f2e45}
.button:active {
background-color: #1f2e45;
box-shadow: 0 4px #666;
transform: translateY(2px);
}
</style>
</head>
<body>
<h1>ESP Pushbutton Web Server</h1>
<button class="button" onmousedown="toggleCheckbox('on');" ontouchstart="toggleCheckbox('on');" onmouseup="toggleCheckbox('off');" ontouchend="toggleCheckbox('off');">LED PUSHBUTTON</button>
<script>
function toggleCheckbox(x) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/" + x, true);
xhr.send();
}
</script>
</body>
</html>)rawliteral";
void notFound(AsyncWebServerRequest *request) {
request->send(404, "text/plain", "Not found");
}
AsyncWebServer server(80);
void setup() {
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
if (WiFi.waitForConnectResult() != WL_CONNECTED) {
Serial.println("WiFi Failed!");
return;
}
Serial.println();
Serial.print("ESP IP Address: http://");
Serial.println(WiFi.localIP());
pinMode(output, OUTPUT);
digitalWrite(output, LOW);
// Send web page to client
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html);
});
// Receive an HTTP GET request
server.on("/on", HTTP_GET, [] (AsyncWebServerRequest *request) {
digitalWrite(output, HIGH);
request->send(200, "text/plain", "ok");
});
// Receive an HTTP GET request
server.on("/off", HTTP_GET, [] (AsyncWebServerRequest *request) {
digitalWrite(output, LOW);
request->send(200, "text/plain", "ok");
});
server.onNotFound(notFound);
server.begin();
}
void loop() {
}
Il vous suffit d’entrer vos informations d’identification réseau (SSID et mot de passe) et le serveur Web fonctionnera immédiatement. Le code est compatible avec les deux ESP32 et ESP8266 embarque et contrôle la LED embarquée GPIO 2 – vous pouvez changer le code pour contrôler n’importe quel autre GPIO.
Comment fonctionne le code
Nous avons déjà expliqué en détail le fonctionnement des serveurs Web comme celui-ci dans les didacticiels précédents (DHT Temperature Web Server), nous allons donc simplement examiner les parties pertinentes pour ce projet.
Informations d’identification réseau
Comme dit précédemment, vous devez insérer vos identifiants réseau dans les lignes suivantes :
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";Bouton de commutation momentané (serveur Web)
La ligne suivante crée le bouton de commutation momentané.
<button class="button" onmousedown="toggleCheckbox('on');" ontouchstart="toggleCheckbox('on');" onmouseup="toggleCheckbox('off');" ontouchend="toggleCheckbox('off');">LED PUSHBUTTON</button>Décomposons cela en petites parties.
En HTML, pour créer un bouton, utilisez la
<button>LED PUSHBUTTON</button>Le bouton peut avoir plusieurs attributs. En HTML, les attributs fournissent des informations supplémentaires sur les éléments HTML, dans ce cas, sur le bouton.
Ici, nous avons les attributs suivants :
classer: fournit un nom de classe pour le bouton. De cette façon, il peut être utilisé par CSS ou JavaScript pour effectuer certaines tâches pour le bouton. Dans ce cas, il est utilisé pour formater le bouton à l’aide de CSS. L’attribut de classe porte le nom de « bouton », mais vous auriez pu l’appeler de n’importe quel autre nom.
<button class="button">LED PUSHBUTTON</button>onmousedown : ceci est un attribut d’événement. Il exécute une fonction JavaScript lorsque vous appuyez sur le bouton. Dans ce cas, il appelle toggleCheckbox(‘on’). Cette fonction fait une demande à l’ESP32/ESP8266 sur une URL spécifique, afin qu’il sache qu’il doit changer l’état de sortie en HIGH.
ontouchstart : il s’agit d’un attribut d’événement similaire au précédent, mais il fonctionne pour les appareils dotés d’un écran tactile comme un smartphone ou une table. Il appelle la même fonction JavaScript pour changer l’état de sortie en HIGH.
onmouseup : c’est un attribut d’événement qui exécute une fonction JavaScript lorsque vous relâchez la souris sur le bouton. Dans ce cas, il appelle toggleCheckbox(‘off’). Cette fonction fait une demande à l’ESP32/ESP8266 sur une URL spécifique, afin qu’il sache qu’il doit changer l’état de sortie en LOW.
ontouchend: similaire à l’attribut précédent mais pour les appareils avec écran tactile.
Donc, au final, notre bouton ressemble à ceci :
<button class="button" onmousedown="toggleCheckbox('on');" ontouchstart="toggleCheckbox('on');" onmouseup="toggleCheckbox('off');" ontouchend="toggleCheckbox('off');">LED PUSHBUTTON</button>Demande HTTP GET pour modifier l’état du bouton (JavaScript)
Nous avons vu précédemment que lorsque vous appuyez ou relâchez le bouton, le toggleCheckbox() fonction est appelée. Vous passez soit les arguments « on » ou « off », selon l’état que vous voulez.
Cette fonction fait une requête HTTP à l’ESP32 soit sur le /au ou /désactivé URL :
function toggleCheckbox(x) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/" + x, true);
xhr.send();
}Traiter les demandes
Ensuite, nous devons gérer ce qui se passe lorsque l’ESP32 ou l’ESP8266 reçoit des requêtes sur ces URL.
Lorsqu’une demande est reçue sur le /au URL, nous activons le GPIO (HIGH) comme indiqué ci-dessous :
server.on("/on", HTTP_GET, [] (AsyncWebServerRequest *request) {
digitalWrite(output, HIGH);
request->send(200, "text/plain", "ok");
});Lorsqu’une demande est reçue sur le /désactivé URL, nous désactivons le GPIO (LOW):
server.on("/off", HTTP_GET, [] (AsyncWebServerRequest *request) {
digitalWrite(output, LOW);
request->send(200, "text/plain", "ok");
});Manifestation
Téléchargez le code sur votre carte ESP32 ou ESP8266.
Ensuite, ouvrez le moniteur série à un débit en bauds de 115200. Appuyez sur le bouton EN/RST intégré pour obtenir son adresse IP.
Ouvrez un navigateur sur votre réseau local et saisissez l’adresse IP ESP. Vous devriez avoir accès au serveur Web comme indiqué ci-dessous.
La LED intégrée reste allumée tant que vous maintenez le bouton enfoncé sur la page Web.
Noter: cela fonctionne dans l’autre sens pour l’ESP8266 car la LED intégrée fonctionne avec une logique inversée.
Lorsque vous relâchez le bouton, la LED revient à son état par défaut (LOW).
Regardez la prochaine vidéo rapide pour une démonstration en direct :
Conclusion
Dans ce didacticiel, vous avez appris à ajouter des attributs d’événement aux boutons de votre serveur Web pour les faire agir comme des commutateurs momentanés. Cela vous permet de modifier l’état de sortie par défaut tant que vous appuyez sur le bouton.
D’autres projets qui pourraient vous plaire :
Apprenez-en plus sur l’ESP32 et l’ESP8266 avec nos ressources :
Merci d’avoir lu.
-
AZDelivery 3 x D1 Mini NodeMCU Lua avec ESP8266-12F Module WLAN CH340G Compatible avec Arduino incluant Un E-Book! -
AZDelivery D1 Mini NodeMCU Lua avec ESP8266-12F Module WLAN CH340G Compatible avec Arduino incluant Un E-Book!