Tabla de contenido:
- Suministros
- Paso 1: construcción del circuito
- Paso 2: Descripción general rápida del sistema de archivos SPIFFS
- Paso 3: instalación del cargador de arranque SPIFFS en Mac OS
- Paso 4: instalación de bibliotecas
- Paso 5: cree un archivo Index.html y Style.css con el siguiente contenido
- Paso 6: Código Arduino
- Paso 7: Cargue el código y los archivos de Arduino usando el cargador SPIFFS
- Paso 8: Determine la dirección IP del servidor web ESP32
- Paso 9: probar el servidor web local
- Paso 10: Acceso a un servidor web local desde cualquier lugar del mundo usando Ngrok
Video: LED controlado por Internet utilizando un servidor web basado en ESP32: 10 pasos
2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:42
Descripción del proyecto
En este ejemplo, descubriremos cómo crear un servidor web basado en ESP32 para controlar el estado del LED, al que se puede acceder desde cualquier parte del mundo. Necesitará una computadora Mac para este proyecto, pero puede ejecutar este software incluso en una computadora económica y de bajo consumo como la Raspberry Pi.
Preparación del ESP32 con Arduino IDE
Para comenzar a programar el ESP32 usando el IDE de Arduino y el lenguaje de programación Arduino, necesitará un complemento especial. Lea sobre cómo preparar el IDE de Arduino para ESP32 en Mac OS en el siguiente enlace.
Suministros
Para este tutorial, necesitará los siguientes elementos:
- Placa de desarrollo ESP32 5mm
- LEDResistor 220ohm
- Pantalla LCD 16x2 con módulo I2C
- Tablero de circuitos
- Cables de puente
- Cable micro USB
Paso 1: construcción del circuito
Realice las conexiones como se muestra en el siguiente diagrama esquemático a continuación
Comience conectando la salida de voltaje de suministro de 3V3 en el ESP32 y GND a la placa de pruebas. Conecte el LED a través de la resistencia al ESP32 usando el pin 23 de GPIO como pin de salida digital. Después de eso, conecte el pin SDA de la pantalla LCD 16x2 al pin 21 de GPIO y SCL al pin 22 de GPIO.
Paso 2: Descripción general rápida del sistema de archivos SPIFFS
SPIFFS son las siglas de "Serial Peripheral Interface Flash File System", es decir, sistema de archivos para memoria flash que transfiere datos a través de SPI. En consecuencia, SPIFFS es un sistema de archivos simplificado diseñado para microcontroladores con chips flash que transmiten datos a través del bus SPI (como la memoria flash ESP32).
SPIFFS es más útil para usar con ESP32 en las siguientes situaciones:
- Crear archivos para almacenar configuraciones
- Almacenamiento de datos permanente.
- Crear archivos para almacenar una pequeña cantidad de datos (en lugar de usar una tarjeta microSD para esto).
- Almacenamiento de archivos HTML y CSS para crear un servidor web.
Paso 3: instalación del cargador de arranque SPIFFS en Mac OS
Puede crear, guardar y escribir datos en archivos almacenados en el sistema de archivos ESP32 directamente usando el complemento en Arduino IDE.
En primer lugar, asegúrese de tener instalada la última versión del IDE de Arduino y luego haga lo siguiente:
- Abra el siguiente enlace y descargue el archivo "ESP32FS-1.0.zip"
- Vaya al directorio IDE de Arduino, que se encuentra en la carpeta Documentos.
- Cree una carpeta de herramientas, si no existe. Dentro del directorio de herramientas, cree otra carpeta ESP32FS. Dentro de ESP32FS cree otro, que se llama herramienta.
- Descomprima el archivo ZIP descargado en el paso 1 en la carpeta de herramientas.
- Reinicie su Arduino IDE.
- Para comprobar si el complemento se instaló correctamente, abra el IDE de Arduino y haga clic en "Herramientas" y compruebe si hay un elemento "Carga de datos de Sketch ESP32" en este menú.
Paso 4: instalación de bibliotecas
Las bibliotecas ESPAsyncWebServer y AsyncTCP le permiten crear un servidor web utilizando archivos del sistema de archivos de ESP32. Para obtener más información sobre estas bibliotecas, consulte el siguiente enlace.
Instale la biblioteca ESPAsyncWebServer
- Haga clic aquí para descargar el archivo ZIP de la biblioteca.
- Descomprime este archivo. Debería obtener la carpeta ESPAsyncWebServer-master.
- Cambie el nombre a "ESPAsyncWebServer".
Instale la biblioteca AsyncTCP
- Haga clic aquí para descargar el archivo ZIP de la biblioteca.
- Descomprime este archivo. Debería obtener la carpeta AsyncTCP-master.
- Cambie el nombre a "AsyncTCP".
Mueva las carpetas ESPAsyncWebServer y AsyncTCP a la carpeta de bibliotecas, que se encuentra dentro del directorio Documentos.
Finalmente, reinicie el IDE de Arduino.
Paso 5: cree un archivo Index.html y Style.css con el siguiente contenido
La plantilla HTML / CSS para el botón de alternancia se tomó de la siguiente fuente.
Paso 6: Código Arduino
Básicamente, el código se basó en el código Arduino que se tomó del servidor web ESP32 usando SPIFFS y Cómo usar I2C LCD con ESP32 en Arduino IDE.
Paso 7: Cargue el código y los archivos de Arduino usando el cargador SPIFFS
- Abra la carpeta de bocetos del código Arduino.
- Dentro de esta carpeta, cree una nueva carpeta llamada "datos".
- Dentro de la carpeta de datos, debe colocar index.html y style.css.
- Cargar código Arduino
- Luego, para cargar los archivos, haga clic en Arduino IDE en Herramientas> Carga de datos de boceto ESP32
Paso 8: Determine la dirección IP del servidor web ESP32
Se puede encontrar de dos formas.
- Monitor serie en Arduino IDE (Herramientas> Monitor serie)
- En la pantalla LCD
Paso 9: probar el servidor web local
A continuación, abra un navegador web de su elección y pegue la siguiente dirección IP en la barra de direcciones. Debería obtener una salida similar a la siguiente captura de pantalla.
Paso 10: Acceso a un servidor web local desde cualquier lugar del mundo usando Ngrok
Ngrok es una plataforma que le permite organizar el acceso remoto a un servidor web o algún otro servicio que se ejecute en su PC desde Internet externo. El acceso se organiza a través del túnel seguro creado al inicio de ngrok.
- Siga este enlace y regístrese.
- Después de crear una cuenta, inicie sesión y vaya a la pestaña "Auth". Copie la línea del campo "Your Tunnel Authtoken".
- Haga clic en la pestaña "Descargar" en la barra de navegación. Seleccione la versión de ngrok que coincida con su sistema operativo y descárguela.
- Descomprima la carpeta descargada y ejecute la línea de comando.
- Conecte su cuenta ingresando el siguiente comando
./ngrok authtoken
Inicie un túnel HTTP en el puerto 80
./ngrok http Su_IP_Dirección: 80
Si todo se hizo correctamente, entonces el estado del túnel debería cambiar a "en línea", y debería aparecer un enlace de redireccionamiento en la columna "Reenvío". Al ingresar este enlace en su navegador, puede acceder al servidor web desde cualquier parte del mundo.
Recomendado:
Lanzacohetes controlado por voz basado en Alexa: 9 pasos (con imágenes)
Lanzador de cohetes controlado por voz basado en Alexa: a medida que se acerca la temporada de invierno; Llega esa época del año en la que se celebra la fiesta de las luces. Sí, estamos hablando de Diwali, que es un verdadero festival indio que se celebra en todo el mundo. Este año, Diwali ya terminó, y ver gente
Sistema de riego por goteo conectado a Internet controlado por retroalimentación de humedad del suelo (ESP32 y Blynk): 5 pasos
Sistema de riego por goteo conectado a Internet controlado por retroalimentación de humedad del suelo (ESP32 y Blynk): preocúpese por su jardín o sus plantas cuando se vaya de vacaciones, u olvídese de regar su planta a diario. Bueno, aquí está la solución Es un sistema de riego por goteo controlado por la humedad del suelo y conectado globalmente controlado por ESP32 en la parte frontal del software i
LED controlado por servidor HTTP - Ameba Arduino: 3 pasos
LED controlado por servidor HTTP - Ameba Arduino: Controlar un LED es fácil con cualquier microcontrolador de su elección, pero controlar el LED de forma inalámbrica en el navegador de su teléfono móvil sobre la marcha es realmente genial y divertido. En realidad, ya es un proyecto de IoT, ya que puede usar el mismo servidor para controlar las cosas
Gesture Hawk: Robot controlado por gestos con la mano utilizando una interfaz basada en procesamiento de imágenes: 13 pasos (con imágenes)
Gesture Hawk: robot controlado por gestos con la mano que utiliza una interfaz basada en procesamiento de imágenes: Gesture Hawk se presentó en TechEvince 4.0 como una sencilla interfaz hombre-máquina basada en el procesamiento de imágenes. Su utilidad radica en el hecho de que no se requieren sensores adicionales o wearables excepto un guante para controlar el automóvil robótico que funciona en diferentes
Reloj de animación LED SMART conectado a la web con panel de control basado en la web, servidor de tiempo sincronizado: 11 pasos (con imágenes)
Reloj de animación LED SMART conectado a la web con panel de control basado en la web, servidor de tiempo sincronizado: la historia de este reloj se remonta a hace mucho tiempo: más de 30 años. Mi padre fue pionero en esta idea cuando yo tenía solo 10 años, mucho antes de la revolución del LED, cuando los LED eran 1/1000 del brillo de su brillo cegador actual. Una verdad