Serveur Web ESP8266 avec IDE Arduino – Bien choisir son serveur d impression
Dans ce projet, vous allez créer un serveur Web autonome avec un ESP8266 qui peut basculer deux LED en utilisant Arduino IDE. Ce serveur Web ESP8266 est sensible aux mobiles et il est accessible avec n'importe quel appareil en tant que navigateur dans votre réseau local.
Pour un didacticiel plus approfondi sur la façon de créer un serveur Web et une explication du code, lisez cet article ESP8266 Web Server étape par étape
Si vous souhaitez en savoir plus sur le module ESP8266, lisez d'abord mon Guide de démarrage du module WiFi ESP8266.
Si vous aimez l'ESP et que vous voulez faire plus de projets, vous pouvez lire mon eBook Home Automation Using ESP8266.
Commençons!
Sommaire
Tout d'abord, regardez le didacticiel vidéo
Téléchargement du code ESP8266
Après avoir installé le module complémentaire ESP8266 pour l'IDE Arduino (Comment installer la carte ESP8266 dans l'IDE Arduino), accédez à Outils et sélectionnez "Module ESP8266 générique".
Copiez le croquis ci-dessous sur votre IDE Arduino. Remplacez le SSID et le mot de passe par vos propres informations d'identification réseau.
const char * ssid = "REPLACE_WITH_YOUR_SSID";
const char * password = "REPLACE_WITH_YOUR_PASSWORD";Après avoir modifié l'esquisse, téléchargez-la sur votre ESP8266 (si vous ne pouvez pas télécharger de code sur votre ESP8266, lisez ce guide de dépannage).
/ *********
Rui Santos
Détails complets du projet sur https://randomnerdtutorials.com
********* /
// Charger la bibliothèque Wi-Fi
#comprendre
// Remplacez par vos informations d'identification réseau
const char * ssid = "REPLACE_WITH_YOUR_SSID";
const char * password = "REPLACE_WITH_YOUR_PASSWORD";
// Définir le numéro de port du serveur Web sur 80
Serveur WiFiServer (80);
// Variable pour stocker la requête HTTP
En-tête de chaîne;
// Variables auxiliaires pour stocker l'état de sortie actuel
String output5State = "off";
String output4State = "off";
// Attribuer des variables de sortie aux broches GPIO
const int output5 = 5;
const int output4 = 4;
// Heure actuelle
unsigned long currentTime = millis ();
// Heure précédente
unsigned long previousTime = 0;
// Définissez le délai d'expiration en millisecondes (exemple: 2000 ms = 2 s)
const long timeoutTime = 2000;
void setup()
Serial.begin (115200);
// Initialise les variables de sortie comme sorties
pinMode (output5, OUTPUT);
pinMode (output4, OUTPUT);
// Définir les sorties sur LOW
digitalWrite (output5, LOW);
digitalWrite (output4, LOW);
// Connectez-vous au réseau Wi-Fi avec SSID et mot de passe
Serial.print ("Connexion à");
Serial.println (ssid);
WiFi.begin (ssid, mot de passe);
while (WiFi.status ()! = WL_CONNECTED)
retard (500);
Serial.print (".");
// Imprimer l'adresse IP locale et démarrer le serveur Web
Serial.println ("");
Serial.println ("WiFi connecté.");
Serial.println ("adresse IP:");
Serial.println (WiFi.localIP ());
server.begin ();
boucle vide () {
Client WiFiClient = server.available (); // Écoutez les clients entrants
if (client) {// Si un nouveau client se connecte,
Serial.println ("Nouveau client."); // imprime un message sur le port série
String currentLine = ""; // crée une chaîne pour contenir les données entrantes du client
currentTime = millis ();
previousTime = currentTime;
while (client.connected () && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
currentTime = millis();
if (client.available()) // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == 'n') // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0)
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// turns the GPIOs on and off
if (header.indexOf("GET /5/on") >= 0)
Serial.println ("GPIO 5 activé");
output5State = "on";
digitalWrite (output5, HIGH);
else if (header.indexOf ("GET / 5 / off")> = 0)
Serial.println ("GPIO 5 désactivé");
output5State = "off";
digitalWrite (output5, LOW);
else if (header.indexOf ("GET / 4 / on")> = 0)
Serial.println ("GPIO 4 activé");
output4State = "on";
digitalWrite (output4, HIGH);
else if (header.indexOf ("GET / 4 / off")> = 0)
Serial.println ("GPIO 4 désactivé");
output4State = "off";
digitalWrite (output4, LOW);
// Afficher la page Web HTML
client.println ("");
client.println ("");
client.println ("");
// CSS pour styliser les boutons on / off
// N'hésitez pas à modifier les attributs de couleur d'arrière-plan et de taille de police selon vos préférences
client.println ("");
// En-tête de page Web
client.println ("Serveur Web ESP8266
");
// Affiche l'état actuel et les boutons ON / OFF pour GPIO 5
client.println ("GPIO 5 - État "+ output5State +"
");
// Si le output5State est désactivé, il affiche le bouton ON
if (output5State == "off")
client.println ("");
autre
client.println ("");
// Affiche l'état actuel et les boutons ON / OFF pour GPIO 4
client.println ("GPIO 4 - État "+ output4State +"
");
// Si le output4State est désactivé, il affiche le bouton ON
if (output4State == "off")
client.println ("");
autre
client.println ("");
client.println ("");
// La réponse HTTP se termine par une autre ligne vierge
client.println ();
// Sortir de la boucle while
Pause;
else // si vous avez une nouvelle ligne, effacez currentLine
currentLine = "";
else if (c! = ' r') // si vous avez autre chose qu'un caractère retour chariot,
currentLine + = c; // l'ajouter à la fin de la ligne courante
}
// Efface la variable d'en-tête
header = "";
// Fermer la connexion
client.stop ();
Serial.println ("Client déconnecté.");
Serial.println ("");
}
}
Afficher le code brut
Télécharger le code sur ESP8266-01
Si vous utilisez un ESP8266-01, vous avez besoin d'un programmeur FTDI pour télécharger le code. Câblez l'ESP8266 au programmateur FTDI comme indiqué dans le schéma ci-dessous.
Adresse IP ESP8266
Ouvrez le moniteur série Arduino à un débit en bauds de 115200.
- Si vous utilisez ESP8266-01, connectez GPIO 0 à VCC et réinitialisez votre carte.
- Si vous utilisez ESP8266-12E, appuyez simplement sur le bouton RESET.
Après quelques secondes, l'adresse IP ESP8266 devrait apparaître.
Pièces nécessaires
Voici le matériel dont vous avez besoin pour mener à bien ce projet:
Si vous utilisez un ESP8266-01, vous avez besoin d'un programmeur FTDI pour télécharger le code.
Vous pouvez utiliser les liens précédents ou vous rendre directement sur MakerAdvisor.com/tools pour trouver toutes les pièces pour vos projets au meilleur prix!
Circuit final
Suivez le schéma suivant pour créer le circuit que vous contrôlerez. Une LED connectée à GPIO 4(D2) et un autre connecté à GPIO 5(D1).
Si vous utilisez l'ESP8266-01, utilisez le diagramme schématique suivant comme référence, mais vous devez modifier l'affectation des GPIO dans le code (en GPIO 2 et GPIO 0).
Manifestation
Pour la démonstration finale, ouvrez n'importe quel navigateur à partir d'un appareil connecté au même routeur que votre ESP8266. Tapez ensuite l'adresse IP ESP8266 et cliquez sur Entrée!
Maintenant, appuyez sur les boutons de votre serveur Web pour contrôler les GPIO ESP8266.
Emballer
Pour une explication détaillée sur le fonctionnement du code du serveur Web, veuillez consulter ce didacticiel: ESP8266 Web Server étape par étape
Si vous aimez l'ESP8266, vérifiez nos projets les plus populaires:
Merci d'avoir lu.
P.S. Si vous êtes coincé tout au long de ce didacticiel, assurez-vous de lire "Guide de dépannage ESP8266"
Commentaires
Laisser un commentaire