Arduino

ESP8266 Webserver

Laatst bijgewerkt: 11/08/2020

In dit project maak je een zelfstandige webserver met een ESP8266 die twee LED's kan schakelen. Deze ESP8266 webserver is toegankelijk voor elk apparaat dat als browser in uw lokale netwerk wordt gebruikt.

Na de installatie van het ESP8266 board selecteer je de juiste Nodemcu, ga naarHulpmiddelen en selecteer het door u gebruikte board. In dit voorbeeld Nodemcu 0.9(ESP-12 Module).

Kopieer de onderstaande schets naar je Arduino IDE. Vervang de SSID en het wachtwoord door uw eigen netwerkreferenties.

const char* ssid = "uw SSID hier invullen"
const char* password = "uw paswoord hier invullen"

Na het wijzigen van de schets upload deze naar uw .

#include <ESP8266WiFi.h>  // Laad WiFi bibliotheek
// Vervang door uw netwerk referenties
const char* ssid = "uw SSID hier invullen"
const char* password = "uw paswoord hier invullen"
WiFiServer server(80);  // Stel server poortnummer in op 80
String header;  // Variabele om het HTTP verzoek op te slaan
// Hulpvariabelen om de huidige uitvoerstatus op te slaan
String output5State = "off";
String output4State = "off";
// Wijs uitgangsvariabelen toe aan GPIO pinnen
const int output5 = 5;
const int output4 = 4;
void setup() {
 Serial.begin(115200);
 // Initialiseer de uitvoervariabelen als outputs
 pinMode(output5,  OUTPUT);
 pinMode(output4,  OUTPUT);
 // Stel uitgangen in op LOW
 digitalWrite(output5, LOW);
 digitalWrite(output4, LOW);
 // Maak verbinding met wifi netwerk met SSID en wachtwoord
 Serial.print("Connecting to ");
 Serial.println(ssid);
 WiFi.begin(ssid,password);
 while(WiFi.status()!= WL_CONNECTED) {
   delay(500);
   Serial.print(".");
 }
 // Druk lokaal IP adres af en start de webserver  
 Serial.println("");
 Serial.println("WiFi connected.");
 Serial.println("IP address: ");
 Serial.println(WiFi.localIP());
 server.begin();
}
void loop(){  
 WiFiClient client = server.available();       // Luister voor binnenkomende client
 if (client) {                                 // Als een nieuwe client verbinding maakt, 
   Serial.println("Nieuwe Client.");           // print een bericht in de seriële poort
   String currentLine  = "";                   // maak een string om inkomende gegevens van de client te bewaren
   while  (client.connected()) {               // lus terwijl de client is verbonden
    if  (client.available()) {                 // als er bytes zijn om van de client te lezen,
      char c =  client.read();                 // lees dan een byte
      Serial.write(c);                         // print het uit op de seriële monitor
      header += c;
      if (c == '\n')  {                        // als de byte een newline teken is
        // als de huidige regel leeg is, heb je twee nieuwe lijntekens op een rij.
        // dat is het einde van het HTTP verzoek van de client, dus stuur een antwoord
        if (currentLine.length() == 0) { 
          // HTTP headers beginnen altijd met een respons code (bijvoorbeeld HTTP / 1.1 200 OK)
          // en een inhoudstype zodat de klant weet wat er gaat komen, dan een lege regel
          client.println("HTTP/1.1 200 OK");
          client.println("Content-type:text/html");
          client.println("Connection: close");
          client.println();
         // zet de GPIO's aan en uit
         if (header.indexOf("GET /5/on") >= 0) {
           Serial.println("GPIO 5 on");
           output5State = "on";
           digitalWrite(output5,  HIGH);
         } else if (header.indexOf("GET /5/off") >= 0) {
           Serial.println("GPIO 5 off");
           output5State = "off";
           digitalWrite(output5, LOW);
         } else if (header.indexOf("GET /4/on") >= 0) {
           Serial.println("GPIO 4 on");
           output4State = "on";
           digitalWrite(output4, HIGH);
         } else if  (header.indexOf("GET /4/off") >= 0) {
           Serial.println("GPIO 4 off");
           output4State  = "off";
           digitalWrite(output4, LOW);
         }
   	     // Toon de HTML web pagina
         client.println("<!DOCTYPE html><html>");
         client.println("<head><meta name=\"viewport\"  content=\"width=device-width, initial-scale=1\">");
         client.println("<link rel=\"icon\"  href=\"data:,\">");
         // CSS om de aan / uit-knoppen te stylen
         // U kunt de kenmerken van de achtergrondkleur en lettertype aanpassen aan uw voorkeuren
         client.println("<style>html { font-family: Helvetica;  display: inline-block; margin: 0px auto; text-align: center;}");
         client.println(".button { background-color: #195B6A; border: none;  color: white; padding: 16px 40px;");
         client.println("text-decoration: none; font-size: 30px; margin:  2px; cursor: pointer;}");
         client.println(".button2 {background-color:  #77878A;}</style></head>");
         client.println("<body><h1>ESP8266  Web Server</h1>");  // Hoofding van de web pagina
         // Geef de huidige status weer, en de AAN / UIT-knoppen voor GPIO 5  
         client.println("<p>GPIO 5 - State " + output5State +  "</p>");
         // Als de output5State uit is, wordt de knop AAN weergegeven
         if (output5State=="off") {
           client.println("<p><a  href=\"/5/on\"><button  class=\"button\">ON</button></a></p>");
         } else {
           client.println("<p><a  href=\"/5/off\"><button class=\"button button2\">OFF</button></a></p>");
         } 
         // Geef de huidige status weer, en de AAN / UIT-knoppen voor GPIO 4 
         client.println("<p>GPIO 4 - State " + output4State +  "</p>");
         // Als de output4State uit is, wordt de knop AAN weergegeven
         if (output4State=="off") {
           client.println("<p><a  href=\"/4/on\"><button  class=\"button\">ON</button></a></p>");
         } else {
           client.println("<p><a  href=\"/4/off\"><button class=\"button  button2\">OFF</button></a></p>");
         }
         client.println("</body></html>");
         client.println();  // De HTTP reactie eindigt met een andere lege regel
         break;  // Breek uit de while lus
       } else { //  als je een nieuwe regel hebt, wis dan de huidige regel
         currentLine = "";
       }
     } else if (c  != '\r') { // als je iets anders hebt dan een carriage return karakter,
       currentLine  += c; // add it to the end of the  currentLine
     }
   }
 }
 header =  "";  // Wis de header variabele
 client.stop();  // Sluit de verbinding
 Serial.println("Client disconnected.");
 Serial.println("");
 }
}

Upload code naar ESP8266-01

Als u een ESP8266-01 gebruikt, hebt u een FTDI programmeur nodigom de code te uploaden. Sluit de ESP8266 aan op de FTDI programmeereenheid zoals weergegeven in het volgende schema.

ESP8266 IP-adres

Open de Arduino seriële monitor met een baudrate van 115200.

Na enkele seconden verschijnt het IP-adres van de ESP8266.

Benodigde onderdelen

Dit zijn de hardware die je nodig hebt om dit project te voltooien:

Als u een ESP8266-01 gebruikt, hebt u een FTDI programmeur nodigom code te uploaden.

Aansluitschema

Volg het volgende schema om het circuit te bouwen dat u bestuurt. Eén LED aangesloten op GPIO 4(D2) en een andere aangesloten op GPIO 5(D1).

Als u de ESP8266-01 gebruikt, gebruik dan het volgende schematische diagram als referentie, maar u moet de toewijzing van de GPIO's in de code wijzigen naar GPIO 2 en GPIO 0.

Demonstratie

Voor de laatste demonstratie opent u de browser van een apparaat dat is verbonden met dezelfde router als uw ESP8266. Typ vervolgens het IP adres van de ESP8266 en klik op Enter!

Druk nu op de knoppen in uw webserver om de ESP8266 GPIO's te bedienen.