Cómo crear un servidor web ESP32 usando Arduino IDE para controlar los LED

En este proyecto, va a crear su primera servidor web ESP32 utilizando el IDE de Arduino. Este simple servidor web ESP32 controla el estado de los LED externos conectados a los pines GPIO de ESP32. Se puede acceder a este servidor web ESP32 usando el navegador de cualquier dispositivo conectado a la red local.

A diferencia de Arduino UNO, la placa Esp32 viene con un módulo WiFi incorporado que se puede usar para conectar la placa a Internet. Por esta razón, ESP32 es una opción popular para aplicaciones IoT.

¿Qué es un servidor Web?

A Servidor web es simplemente una forma de almacenar y mostrar el contenido de una página web/sitio web. Este contenido se entrega a los clientes que lo solicitan y puede ser de cualquier forma, como texto, imágenes, video y datos de la aplicación.

Un>

Un ejemplo simple de esto es un sitio web/página web y navegador web. A sitio web está alojado en un servidor ubicado en algún lugar. Este servidor es en realidad una computadora que proporciona espacio de datos para el sitio web. Mientras que el programa navegador web es un cliente, que solicita datos del sitio web cuando un usuario hace clic en el enlace del sitio web o escribe la URL en la barra de búsqueda del navegador.

Nota: La comunicación entre el cliente y el servidor se realiza mediante Protocolo de Transferencia de Hipertexto(HTTP).

¿Qué es un servidor web ESP32?

En este tutorial, creará una página web HTML que muestre contenido como botones y texto para controlar el estado de los LED. Esta página web está alojada en ESP32. Por eso se llama un servidor web ESP32.

Servidor>

Cuando ingresa una URL única en un navegador web, envía una solicitud HTTP a ESP32 para manejar esta solicitud. Cuando ESP32 lee esta solicitud, sabe que tiene que mostrar el contenido de la página web (adjunto a la URL específica). Todo esto está programado en Arduino IDE, incluida esa página HTML.

Cómo crear tu primer servidor web ESP32

Objetivo: Cree un servidor web ESP32 para controlar el estado de los LED conectados en GPIO pin 15 y 5 respectivamente.

Para usar la función de conectividad wifi de ESP32, hay una biblioteca incorporada en el IDE de Arduino. Esta biblioteca se instala automáticamente después de instalar la placa esp32 en nuestro IDE de Arduino.

Materiales necesarios:

• Módulo ESP32
• IDE de Arduino
• Cable micro USB
• Cable pasa corriente
• 2 resistencias de 100 ohmios
• 2 LED

Diagrama de circuito para el servidor web ESP32:

En este proyecto, vamos a utilizar GPIO15 y GPIO5 para conectar nuestros LED a la placa ESP32 como se muestra en el diagrama de circuito que se muestra a continuación.

Diagrama>

Paso 1: Conecte el módulo ESP32 a la computadora a través de un cable micro-USB. El LED ROJO en el tablero se enciende una vez que se enciende el tablero.

Paso 2: Ir a Herramientas> Tablero del menú superior y haga clic en el botón “Arduino ESP32” opción. Ahora seleccione el tipo de placa ESP32 que está utilizando. he seleccionado el Módulo de desarrollo ESP32.

Paso 3: ahora ve a Herramientas>Puertoy seleccione el puerto al que está conectada la placa.

Etapa 4: Pegue/escriba el programa del servidor web ESP32 que se proporciona a continuación en el IDE de Arduino.

Programa de servidor web ESP32:

#include <WiFi.h> // Load Wi-Fi library

// Replace with your network credentials
const char ssid[] = «ARYAN»;
const char password[] = «********»;

// Set web server port number to 80 default HTTP port
WiFiServer server(80);

// Variable to store the HTTP request
String header;

//Variables to store the current output state of LED
String whiteLEDState = «off»;
String greenLEDState = «off»;

// Assign output variables to GPIO pins
const int whiteLED = 15;
const int greenLED = 5;

void setup() {
Serial.begin(115200);
// Initialize the output variables as outputs
pinMode(whiteLED, OUTPUT);
pinMode(greenLED, OUTPUT);
// Set outputs to LOW
digitalWrite(whiteLED, LOW);
digitalWrite(greenLED, LOW);

// Connect to Wi-Fi network with SSID and password
Serial.print(«Connecting to «);
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(«.»);
}
// Print local IP address and start web server
Serial.println(«»);
Serial.println(«WiFi connected.»);
Serial.println(«IP address: «);
Serial.println(WiFi.localIP());
server.begin();
}

void loop(){
WiFiClient client = server.available(); // Listen for incoming clients

if (client) { // If a new client connects,
Serial.println(«New Client.»); // print a message out in the serial port
String currentLine = «»; // make a String to hold incoming data from the client
while (client.connected()) { // loop while the client’s connected
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 /white/on») >= 0) {
Serial.println(«White LED is on»);
whiteLEDState = «on»;
digitalWrite(whiteLED, HIGH);
} else if (header.indexOf(«GET /white/off») >= 0) {
Serial.println(«White LED is off»);
whiteLEDState = «off»;
digitalWrite(whiteLED, LOW);
} else if (header.indexOf(«GET /green/on») >= 0) {
Serial.println(«Green LED is on»);
greenLEDState = «on»;
digitalWrite(greenLED, HIGH);
} else if (header.indexOf(«GET /green/off») >= 0) {
Serial.println(«Green LED is off»);
greenLEDState = «off»;
digitalWrite(greenLED, LOW);
}

// Display the HTML web page
client.println(«<!DOCTYPE html><html>»);
client.println(«<head><meta name=»viewport» content=»width=device-width, initial-scale=1″>»);
// CSS to style the on/off buttons
client.println(«<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}»);
client.println(«.button { background-color: #e62936; border: none; color: white; padding: 16px 40px;»);
client.println(«text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}»);
client.println(«.button2 {background-color: #2a09e6;}</style></head>»);

// Web Page Heading
client.println(«<body><h1>ESP32: Controlling External LED using Wi-Fi</h1>»);

// Display current state, and ON/OFF buttons for GPIO 15
client.println(«<p>White LED State » + whiteLEDState + «</p>»);
// If the whiteLEDState is off, it displays the ON button
if (whiteLEDState==»off») {
client.println(«<p><a href=»/white/on»><button class=»button»>ON</button></a></p>»);
} else {
client.println(«<p><a href=»/white/off»><button class=»button button2″>OFF</button></a></p>»);
}

// Display current state, and ON/OFF buttons for GPIO 5
client.println(«<p>Green LED State » + greenLEDState + «</p>»);
// If the greenLEDState is off, it displays the ON button
if (greenLEDState==»off») {
client.println(«<p><a href=»/green/on»><button class=»button»>ON</button></a></p>»);
} else {
client.println(«<p><a href=»/green/off»><button class=»button button2″>OFF</button></a></p>»);
}
client.println(«</body></html>»);

// The HTTP response ends with another blank line
client.println();
// Break out of the while loop
break;
} else { // if you got a newline, then clear currentLine
currentLine = «»;
}
} else if (c != ‘r’) { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
}
}
// Clear the header variable
header = «»;
// Close the connection
client.stop();
Serial.println(«Client disconnected.»);
Serial.println(«»);
}
}

Paso 5: Debe modificar el siguiente código con las credenciales de su red O punto de acceso (enrutador, teléfono inteligente), es decir, el SSID y la contraseña de la red.

const char ssid[] = «Write your network SSID»;
const char password[] = «Network Password»;

Paso 6: Haga clic en la opción de carga para cargar el código. No olvide mantener presionado el botón BOOT durante el proceso de carga.

Paso 7: Abra el monitor serie en el IDE de Arduino yendo a Herramienta>Monitor Serie o presionando Ctrl+Mayús+M.

Paso 8: Ahora presione el botón RESET en la placa ESP32.

Paso 9: Una vez correctos los detalles del SSID y la contraseña de la red, el monitor en serie muestra un mensaje de conectividad Wi-Fi exitosa e imprime una dirección IP.

Paso 10: Pegue la dirección IP en su navegador para acceder al servidor web ESP32.

Nota: El dispositivo (móvil o portátil) debe estar conectado a la misma red/router al que está conectada la placa ESP32.

• Al ingresar la IP correcta, el servidor web ESP32 muestra la página HTML que se muestra a continuación:

Página>

Controle el estado del LED presionando los botones respectivos.

Esta>

Explicación del código:

#include <WiFi.h>

• #include se usa para incluir bibliotecas externas en nuestro programa. Esto le da al usuario acceso a un gran grupo de bibliotecas C estándar (grupos de funciones prefabricadas), y también bibliotecas escritas especialmente para la placa ESP32.
• Aquí, hemos incluido el librería que nos permite utilizar funciones que nos ayudan a conectar la placa ESP32 a internet.

// Replace with your network credentials
const char ssid[] = «ARYAN»;
const char password[] = «*********»;

• Definición e inicialización de la matriz de caracteres para almacenar el SSID y la contraseña del punto de acceso Wi-Fi.

// Set web server port number to 80 default HTTP port
WiFiServer server(80);

• Establezca el puerto del servidor web en 80, ya que es el puerto HTTP predeterminado para la comunicación entre el servidor y el cliente.
• NOTA: ISi desea usar cualquier otro puerto, ingrese la dirección IP seguida del puerto que configuró: Dirección IP: PUERTO

String header;

• Declarar una variable de encabezado para almacenar la solicitud HTTP del encabezado

String whiteLEDState = «off»;
String greenLEDState = «off»;

• Declare una variable para almacenar el estado actual del LED.

const int whiteLED = 15;
const int greenLED = 5;

• Asigne la variable al número de pin GPIO.

Dentro de la función void setup():

Serial.begin(115200);

• La función Serial.begin() inicia la comunicación de datos en serie entre la placa Arduino y el IDE de Arduino.
• El argumento de la función Serial.begin() establece la velocidad de datos en bits por segundo (baudios) para la transmisión de datos en serie. Aquí estamos configurando la tasa de datos como 115200 bits por segundo.
• Tasas de baudios admitidas son 300, 600, 1200, 2400, 4800, 9600, 14400, 19200, 28800, 31250, 38400, 57600 y 115200.

pinMode(whiteLED, OUTPUT);
pinMode(greenLED, OUTPUT);

• Aquí, estamos inicializando el modo del pin GPIO de LED blanco y LED verde como SALIDA.

digitalWrite(whiteLED, LOW);
  digitalWrite(greenLED, LOW);

• La función digitalWrite() se usa para configurar el LED blanco y verde en el estado APAGADO.

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

• El fragmento de código anterior que utiliza el SSID y la contraseña proporcionados establece la conexión entre la placa ESP32 y el punto de acceso Wi-Fi

Serial.println(«»);
  Serial.println(«WiFi connected.»);
  Serial.println(«IP address: «);
  Serial.println(WiFi.localIP());

• Este código imprime el mensaje de éxito después de una conexión exitosa con el punto de acceso y también imprime la dirección IP que se usará para conectarse al servidor.

Server.begin()

• Esta función le dice al servidor que comience a escuchar las solicitudes HTTP externas.

Dentro de la función loop():

WiFiClient client = server.available();

• Esto establece el objeto del cliente como VERDADERO cada vez que un cliente está conectado al servidor y tiene datos disponibles para leer.

if (client) {                             // If a new client connects,
Serial.println(«New Client.»);          // print a message out in the serial port
String currentLine = «»;                // make a String to hold incoming data from the client
while (client.connected()) {            // loop while the client’s connected
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();

• Ahora, si el cliente está conectado y solicita la comunicación HTTP, las declaraciones anteriores comienzan a recibir datos del cliente y almacenan los datos en la cadena de encabezado.
• Y continuará recibiendo los datos hasta que no se encuentre ‘n’, lo que significa que el cliente está desconectado.

Si declaración para verificar qué botón se presiona:

if (header.indexOf(«GET /white/on») >= 0) {
Serial.println(«White LED is on»);
whiteLEDState = «on»;
digitalWrite(whiteLED, HIGH);
} else if (header.indexOf(«GET /white/off») >= 0) {
Serial.println(«White LED is off»);
whiteLEDState = «off»;
digitalWrite(whiteLED, LOW);
} else if (header.indexOf(«GET /green/on») >= 0) {
Serial.println(«Green LED is on»);
greenLEDState = «on»;
digitalWrite(greenLED, HIGH);
} else if (header.indexOf(«GET /green/off») >= 0) {
Serial.println(«Green LED is off»);
greenLEDState = «off»;
digitalWrite(greenLED, LOW);
}

• El fragmento de código anterior verifica qué botón presente en la página web se presiona y, de acuerdo con él, se envía una solicitud única al servidor y se toma la acción apropiada.
• Por ejemplo– cuando se presiona el botón ON para el LED verde, el “OBTENER /verde/encendidoSe envía la solicitud (solicitud HTTP para una página URL diferente)
• Luego, utilizando la función digitalWrite, el LED se establece en ALTO y también la variable de estado del LED se cambia a ENCENDIDO. El texto que se muestra sobre el botón verde también cambia a APAGADO.

Creación de la página web HTML:

La interfaz gráfica de usuario que ve después de ingresar la IP en el navegador es en realidad una página HTML. Esta página web receptiva se crea en el IDE de Arduino como se explica a continuación:

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:,»>»);

• La función Client.println() se utiliza para enviar los datos a nuestro navegador.
• La página HTML se crea comenzando la página con etiqueta y seguido por el etiqueta que consiste en un atributo de ventana gráfica para que la página sea compatible con todos los navegadores y dispositivos.

Diseñar la página HTML usando CSS:

client.println(«<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}»);
client.println(«.button { background-color: #e62936; border: none; color: white; padding: 16px 40px;»);
client.println(«text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}»); client.println(«.button2 {background-color: #2a09e6;}</style></head>»);

• El La etiqueta se usa para hacer que la página web sea más creativa y hermosa al cambiar la fuente, el tamaño de fuente, el margen y la alineación del texto.
• También podemos crear una clase dentro del etiqueta, aquí hemos creado dos botones de clase y button2. Clase de botón antes de que no se presione el botón en la página web y button2 cuando se presiona el botón en la página web.

Etiqueta de la página HTML:

// Web Page Heading
client.println(«<body><h1>ESP32: Controlling External LED using Wi-Fi</h1>»);

• Esto establece el encabezado superior de la página web en «ESP32: control de LED externo mediante Wi-Fi», como se muestra a continuación:

client.println(«<p>White LED State » + whiteLEDState + «</p>»);
Display the current state of white LED
// If the whiteLEDState is off, it displays the ON button
if (whiteLEDState==»off») {
client.println(«<p><a href=»/white/on»><button class=»button»>ON</button></a></p>»);
} else {
client.println(«<p><a href=»/white/off»><button class=»button button2″>OFF</button></a></p>»);
}

• Este código muestra el estado actual del LED blanco y también crea un botón para controlar el LED blanco en la página web.

// Display current state, and ON/OFF buttons for GPIO 5
client.println(«<p>Green LED State » + greenLEDState + «</p>»);
// If the greenLEDState is off, it displays the ON button
if (greenLEDState==»off») { client.println(«<p><a href=»/green/on»><button class=»button»>ON</button></a></p>»); }
else {
client.println(«<p><a href=»/green/off»><button class=»button button2″>OFF</button></a></p>»);
}

• Este código muestra el estado actual del LED verde y también crea un botón para controlar el LED verde en la página web.

client.println(«</body></html>»);

• Finalmente cerramos el etiquetar y etiqueta para crear la página web.

header = «»;
client.stop();
Serial.println(«Client disconnected.»);
Serial.println(«»);
}

• Y, por último, borramos la variable de encabezado después de enviar la respuesta del servidor y luego desconectamos el cliente e imprimimos un éxito «Cliente desconectado” mensaje en el monitor serie.

Demostración del proyecto de servidor web ESP32:

El>

Ambos>

#include 





// Reemplaza con tus credenciales de red


const char ssid[] = "TU_SSID"; 


const char password[] = "TU_CONTRASEÑA"; 





WiFiServer server(80);


String header;


String whiteLEDState = "off";


String greenLEDState = "off";


const int whiteLED = 15;


const int greenLED = 5;





void setup() {


    Serial.begin(115200);


    pinMode(whiteLED, OUTPUT);


    pinMode(greenLED, OUTPUT);


    digitalWrite(whiteLED, LOW);


    digitalWrite(greenLED, LOW);


    


    Serial.print("Conectando a ");


    Serial.println(ssid);


    WiFi.begin(ssid, password);


    while (WiFi.status() != WL_CONNECTED) {


        delay(500);


        Serial.print(".");


    }


    Serial.println("nConexión Wi-Fi exitosa.");


    Serial.print("Dirección IP: ");


    Serial.println(WiFi.localIP());


    server.begin();


}





void loop() {


    WiFiClient client = server.available(); // Escuchar clientes entrantes


    if (client) {


        String currentLine = "";


        while (client.connected()) {


            if (client.available()) {


                char c = client.read();


                header += c;


                if (c == 'n') {


                    if (currentLine.length() == 0) {


                        client.println("HTTP/1.1 200 OK");


                        client.println("Content-type:text/html");


                        client.println("Connection: close");


                        client.println();


                        if (header.indexOf("GET /white/on") >= 0) {


                            whiteLEDState = "on";


                            digitalWrite(whiteLED, HIGH);


                        }


                        else if (header.indexOf("GET /white/off") >= 0) {


                            whiteLEDState = "off";


                            digitalWrite(whiteLED, LOW);


                        }


                        // Restante del código HTML aquí


                    }


                } 


                else if (c != 'r') {


                    currentLine += c;


                }


            }


        }


        header = "";


        client.stop();


    }


}