Introducción a ESP32: ESP32 Web Server

Introducción a ESP32: ESP32 Web Server

junio 08, 2022

ESP32-Servidor Web
Este es un tutorial para mostrar cómo comenzar con ESP32, construiremos un servidor web ESP32 simple, para controlar las luces LED por página web.

1. Propósito del proyecto

Bajo la misma red de área local, diferentes dispositivos pueden lograr una comunicación simple a través del protocolo HTTP. El siguiente artículo presenta un proyecto, que ESP32 realiza control remoto por navegador web, para controlar LED local On / Off, mediante la construcción de servidor web. El estado del LED se muestra en el OLED (Controlador: SSD1306).

El servidor web construido por ESP32 desempeña las siguientes funciones:
1. Introduzca la dirección IP del ESP32 en el navegador para acceder al servidor web ESP32;
2. Haga clic en el botón en el navegador web para cambiar el encendido / apagado de la luz LED;
3. El servidor web controla los dos LEDs por GPIO26 y GPIO27 conectados al ESP32;

2. Materiales del proyecto

2.1 MakePython ESP32

MakePython-ESP32
Es una placa de circuito ESP32 clásica de Makerfabs. La CPU es de dos Xtensa® de bajo consumo LX6 de 32 bits y ESP32-D0WDQ6. La frecuencia de reloj del procesador puede alcanzar 80MHz a 240MHz, lo que puede realizar una operación de alta velocidad. Además, el módulo integra una pantalla OLED SSD1306 IIC de 1,3 pulgadas, soporta protocolos Wi-Fi: 802.11b/g/n (802.11n a 150Mbps), agregación A-MPDU y A-MSDU, y protocolo Bluetooth v4.2 BR/EDR y especificaciones BLE, puedes obtenerlo desde este enlace:MakePython ESP32.

2.2 Otros componentes

● 2x LEDs
● 2x placa de pruebas
● 2 resistencias de 330 ohmios
● Varios saltadores de hombre a hombre
Componentes

3. Preparación del proyecto

El entorno de programación de este proyecto es Arduino IDE (versión 1.8.19). Además, debe descargar la placa de desarrollo ESP32 en Arduino e instalar las bibliotecas WIFI, Adafruit_SSD1306 y Adafruit_GFX.

3.1 Descargar placa de desarrollo ESP32

Abra la página Arduino IDE (versión 1.8.19) y seleccionePreferencias.
Arduino-ID

URLs adicionales-de Boards-Manager

EscogerGerente de Placas de Desarrollo > Herramientaspara ingresar a la página Administrador de la placa de desarrollo.
Arduino-IDE-Tools

BuscarESP32, seleccione la versión adecuada que utiliza este artículo (versión 1.0.6), haga clic en Instalar y espere a que finalice.
Boards-Manager-ESP32

3.2 Instalar archivos de biblioteca

En la barra de menús, seleccioneProject > Cargar bibliotecas > administrar bibliotecas.
Administrar bibliotecas

BuscarAdafruit_SSD1306yAdafruit_GFXy seleccione los archivos correspondientes que desea instalar.

Lo mismo para la biblioteca WIFI.
Biblioteca-Manager-SSD1306

Biblioteca-Manager-GFX

4. Principio del proyecto

4.1 El principio de ESP32 construyendo un servidor web

Después de que el ESP32 se conecte a la LAN inalámbrica a través del modo STA, el ESP32 puede obtener una dirección IP local. Después de abrir el servidor web, presione el botón de la página web para enviar una solicitud GET diferente, y el servidor web ESP32 la responderá después de recibir la solicitud pasando cadenas HTML al cliente, estas cadenas HTML construirán la página web y la presentarán al cliente (navegador).

● Tenga en cuenta que el ESP32 y el PC deben estar en la misma LAN WIFI.

4.2 Estado del LED de la pantalla OLED

ESP32 se comunica con SSD1306 OLED a través del protocolo IIC, que realiza la comunicación maestro-esclavo con SSD1306 OLED, para mostrar el estado del LED a través de la pantalla.
Diagrama-ESP32-Web-Servidor

5. Conexión de hardware

1) GPIO26 y GPIO27 están conectados al polo positivo del LED y conectados al GND después de pasar a través de la resistencia de 330Ω.
2) ESP32 están conectados a la computadora por cable USB.
ESP32-Web-Server-Hardware-Connection

ESP32-Web-Server-Hardware

Las luces LED y los pines de cableado ESP32 se refieren a la tabla a continuación.
LED
MakePython ESP32
LED26+
GPIO26
LED27+
GPIO27
LED26-, LED27-
GND

6. Flujo de trabajo de software y código de proyecto

El flujo de trabajo del software se muestra en la siguiente figura.
ESP32-Web-Server-Software-Workflow
Descargue la imagen original con tamaño completo aquí: Flujo de trabajo del software de servidor web ESP32↓

Descargue el código del proyecto:Servidor Web ESP32
Nota:
● Debe cambiar el SSID y la contraseña de acuerdo con el WIFI al que se está conectando.
● Modifique su propio GPIO de acuerdo con el GPIO realmente conectado a él.
● SDA predeterminado de la pantalla OLED SSID1306 es GPIO4, SCL es GPIO5.

7. Pasos de carga de software

7.1 Elija el puerto adecuado para ESP32

En el IDE de Arduino, seleccione su placa (placa ESP32 Dev Modul) enHerramientas > tableros, seleccione el COM adecuadopuerto > COM5en Herramientas.
ESP32-Dev-Módulo

Puerto-COM5

7.2 Haga clic en el botón de carga y espere a que se complete el mensaje de carga de código

Botón de carga
Carga hecha

8. Pruebas y resultados del proyecto

8.1 Registrar la dirección IP ESP32

Después de cargar el código, seleccione la velocidad en baudios de 115200, abra el monitor serie y presione el botón de reinicio de ESP32. ESP32 se conectará a WIFI y registrará la dirección IP local de ESP32192.168.1.3
Dirección IP-de-ESP32

8.2 Acceso al servidor web

Abra un navegador y visite 192.168.1.3. Verifique el monitor serie, puede ver que el ESP32 recibe solicitudes de acceso HTTP desde el navegador.
Web-Page-ESP32-Web-Server

Nuevo cliente

8.3 Prueba del servidor web

Compruebe si el servidor web funciona normalmente, encienda y apague los botones correspondientes a GPIO26 y GPIO27, observe las luces LED y observe si el OLED SSD1306 mostrará el estado de las luces LED correspondientes.
ESP32-Web-Servidor-1
Cuando hace clic en el botón para activar GPIO26, la luz LED26 está encendida y la pantalla OLED LED26>>> estado encendida.

ESP32-Web-Server-2
Cuando hace clic en el botón para activar GPIO27, la luz LED27 está encendida y la pantalla OLED LED27>>> estado encendido.

ESP32-Web-Server-3
Al hacer clic en el botón para desactivar GPIO26, la luz LED26 está apagada y la pantalla OLED LED26>>> ¡Estado apagado!

ESP32-Web-Server-4
Al hacer clic en el botón para desactivar GPIO27, la luz LED27 está apagada y la pantalla OLED LED27>>> ¡Estado apagado!

● Después de la prueba, el OLED actualizará el estado del LED correspondiente después de presionar el botón del interruptor la última vez.

Al hacer clic en el botón para activar GPIO26, el ESP32 recibe una solicitud para la URL /26/on, cuando el ESP32 recibe esa solicitud, activa la conexión a GPIO26 y actualiza su estado en la página web, para el SSD1306, El estado del LED se mostrará en el OLED, como se muestra en el cuadro rojo en la captura de pantalla a continuación, y lo mismo para GPIO27.
ESP32-Web-Server-5     ESP32-LED26-Encendido

ESP32-Servidor Web

Si tiene más preguntas sobre Introducción a ESP32: ESP32 Web Server o necesita algunasServicios de montaje de PCB llave en mano, póngase en contacto conservice@makerfabs.com.guiño

Contáctenos