ESP32 Basic Starter Kit for dummys: Proyecto - 7 Web Server

En este proyecto, se creará un servidor web independiente con un ESP32 que controla dos salidas ( GPIO 26 y GPIO 27 cada una de ellas con un LED de color ). 

Al servidor web se puede acceder con el navegador o browser de cualquier dispositivo que esté conectado a la  misma red local (Típicamente Wi_fi).

A estas alturas el circuito no tiene ninguna complejidad

De nuevo el ejemplo no aparece en los ejemplos cargados en el Arduino IDE por lo que hay que buscarlo por la web (ESP32 Web Server – Arduino IDE), se copia, se modifican ls credenciales WiFi y se carga 

/*********
  Rui Santos
  Complete project details at https://randomnerdtutorials.com  
*********/

// Incluye modulo Wi-Fi
#include <WiFi.h>

// Deben remplazarse las credenciales de la red Wi-Fi
const char* ssid = "xxxxx";
const char* password = "xxxxxx";

// Puerto en el que escucha el Servidor Web del ESP32
WiFiServer server(80);

// Variable que almacena el mensaje  HTTP que se recibe del navegador
String header;

// Variables auxiliares para almacenar el estado de la salida
String output26State = "off";
String output27State = "off";

// Asignacion de las GPIO
const int output26 = 26;
const int output27 = 27;

// Variables para los Timeouts

// Obtención de la hora 
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0; 
// Definición del timeout en milisegundos 
const long timeoutTime = 2000;

void setup() {

    // Definicion de la velocidad para el monitor serie

    Serial.begin(115200);
    // Inicializa las variables GPIO como OUTPUT y LOW
    pinMode(output26, OUTPUT);
    pinMode(output27, OUTPUT);
    digitalWrite(output26, LOW);
    digitalWrite(output27, LOW);
    // Conexion al Wi-Fi
    Serial.print("Conectandose ... ");    

    Serial.println(ssid);
    WiFi.begin(ssid, password);
    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }

    // Escribe la IP que la red ha asignado a ESP32
    Serial.println("");
    Serial.println("WiFi conectada.");
    Serial.println("Direccion IP: ");
    Serial.println(WiFi.localIP());
    server.begin();
}

void loop(){

    WiFiClient client = server.available();   // Escucha conexiones de clientes

    if (client) {                             // Si se conecta un cliente (navegador)
        currentTime = millis();
        previousTime = currentTime;
        Serial.println("Conexión: cerrada"); 
        String currentLine = "";            // Crea una cadena o string con la entrada
        while (client.connected() && currentTime - previousTime <= timeoutTime) 

        {  

        // loop while the client's connected
        currentTime = millis();           // se lee el TIME para el Timeout
        if (client.available()) {         // Lee Bytes mientras haya
            char c = client.read();         
            Serial.write(c);                
            header += c;

    // newline y blankline  indican el fin del mensaje del cliente y envia confirmacion

            if (c == '\n') {   
                if (currentLine.length() == 0) {
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-type:text/html");
                    client.println("Conexión: cerrada");
                    client.println();
                    // turns the GPIOs on and off
                    if (header.indexOf("GET /26/on") >= 0) {
                      Serial.println("GPIO 26 on");
                      output26State = "on";
                      digitalWrite(output26, HIGH);
                    } 

                    else if (header.indexOf("GET /26/off") >= 0) {
                      Serial.println("GPIO 26 off");
                      output26State = "off";
                      digitalWrite(output26, LOW);
                    } 

                    else if (header.indexOf("GET /27/on") >= 0) {
                      Serial.println("GPIO 27 on");
                      output27State = "on";
                      digitalWrite(output27, HIGH);
                    } 

                    else if (header.indexOf("GET /27/off") >= 0) {
                      Serial.println("GPIO 27 off");
                      output27State = "off";
                      digitalWrite(output27, LOW);
                    }
            
// El servidor envia página WEB en formato HTML
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 to style the on/off buttons 
// Puede cambiarse color y fuente
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #555555;}</style></head>");
client.println("<body><h1>ESP32 Web Server</h1>");
client.println("<p>GPIO 26 - State " + output26State + "</p>");

if (output26State=="off") {
client.println("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/26/off\"><button class=\"button button2\">OFF</button></a></p>");
} 
client.println("<p>GPIO 27 - State " + output27State + "</p>");

if (output27State=="off") {
client.println("<p><a href=\"/27/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/27/off\"><button class=\"button button2\">OFF</button></a></p>");
}

client.println("</body></html>");

client.println();
break;
} else { 

currentLine = "";
}
} else if (c != '\r') {  

    currentLine += c;      

}}}

// Clear the header variable

header = "";

// Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }

}

Si todo va bien en el Monitor Serie aparecerán los siguientes mensajes

Connecting to MyWifi

......

WiFi connected.

IP address: 

192.168.1.33

Entonces desde un navegador podemos acceder a 

http://192.168.1.33/

Y el servidor nos devolverá la siguiente página

Ahora ya puede probar la aplicación

 

 

En el programa descubrirá varias novedades:

• La sentencia #include WiFi.h que lo que hace es incluir este programa en el nuestro, es una forma de modularizar el código para hacerlo más flexible y reutilizable. Cualquier programa que vaya a usar WiFi no tiene que reescribirlo basta con que incluya este módulo al principio.
• Las sentencias const char* ssid = "REPLACE_WITH_YOUR_SSID"; y const char* password = "REPLACE_WITH_YOUR_PASSWORD"; que debe configurarlas para la red que vaya a usar
• El servidor web del ESP32 se define para que escuche en el puerto 80, que es al que por defecto se conectan los navegadores WiFiServer server(80);
• Debe diferenciar el HTTP que es el protocolo de comunicaciones entre el cliente y el servidor y el HTML que es el lenguaje de etiquetas que es interpretado por el navegador para recrear la pantalla. para profundizar consulte las referencias

Referencias

• Lenguaje HTML
• Protocolo HTTP

Continúa en:  Proyecto - 8 RGB LED Web Server

Prohibida la reproducción parcial o total de este artículo sin permiso previo del autor