LED controlat per Internet mitjançant servidor web basat en ESP32: 10 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:13

Descripció general del projecte

En aquest exemple, esbrinarem com fer un servidor web basat en ESP32 per controlar l’estat dels LED, accessible des de qualsevol part del món. Necessitareu un ordinador Mac per a aquest projecte, però podeu executar aquest programari fins i tot en un equip econòmic i de baix consum com el Raspberry Pi.

Preparació de l'ESP32 amb l'IDE Arduino

Per començar a programar l'ESP32 mitjançant l'IDE Arduino i el llenguatge de programació Arduino, necessitareu un complement especial. Obteniu informació sobre com preparar l’IDE Arduino per a ESP32 a Mac OS mitjançant el següent enllaç.

Subministraments

Per a aquest tutorial necessitareu els elements següents:

• Taula de desenvolupament ESP32 de 5 mm
• Resistència LED 220ohm
• Pantalla LCD de 16x2 amb mòdul I2C
• Taula de pa
• Filferros de pont
• Cable micro USB

Pas 1: Construir el circuit

Realitzeu connexions tal com es mostra al següent esquema esquemàtic següent

Comenceu per connectar la sortida de tensió d’alimentació 3V3 a la placa de control ESP32 i GNDto. Connecteu el LED mitjançant la resistència a l'ESP32 mitjançant el pin 23 GPIO com a pin de sortida digital. Després, connecteu el pin SDA de la pantalla LCD de 16x2 al pin 21 GPIO i SCL al pin 22 GPIO.

Pas 2: Descripció ràpida del sistema de fitxers SPIFFS

SPIFFS significa "Sistema de fitxers flash de la interfície perifèrica de sèrie", és a dir, sistema de fitxers per a memòria flash que transfereix dades a través de SPI. En conseqüència, SPIFFS és un sistema de fitxers simplificat dissenyat per a microcontroladors amb xips flash que transmeten dades a través del bus SPI (com la memòria flash ESP32).

SPIFFS és el més útil per utilitzar-lo amb ESP32 en les situacions següents:

• Creació de fitxers per emmagatzemar la configuració
• Emmagatzematge permanent de dades.
• Creació de fitxers per emmagatzemar una petita quantitat de dades (en lloc d’utilitzar una targeta microSD per a això).
• Emmagatzematge de fitxers HTML i CSS per crear un servidor web.

Pas 3: Instal·lació del SPIFFS Bootloader al Mac OS

Podeu crear, desar i escriure dades a fitxers emmagatzemats al sistema de fitxers ESP32 directament mitjançant un connector a Arduino IDE.

Primer de tot, assegureu-vos que teniu instal·lada la versió més recent de l’IDE Arduino i, a continuació, feu el següent:

• Obriu el següent enllaç i descarregueu l’arxiu “ESP32FS-1.0.zip”
• Aneu al directori Arduino IDE, que es troba a la carpeta Documents.
• Creeu una carpeta d'eines, si no existeix. Dins del directori d'eines creeu una altra carpeta ESP32FS. Dins ESP32FS en creeu un altre, que s'anomena eina.
• Descomprimiu l'arxiu ZIP descarregat al pas 1 a la carpeta d'eines.
• Reinicieu l'IDE Arduino.
• Per comprovar si el connector s'ha instal·lat correctament, obriu l'IDE d'Arduino i feu clic a "Eines" i comproveu si hi ha un element "ESP32 Sketch Data Upload" en aquest menú.

Pas 4: Instal·lació de biblioteques

Les biblioteques ESPAsyncWebServer i AsyncTCP us permeten crear un servidor web mitjançant fitxers del sistema de fitxers d’ESP32. Per obtenir més informació sobre aquestes biblioteques, consulteu el següent enllaç.

Instal·leu la biblioteca ESPAsyncWebServer

• Feu clic aquí per descarregar l'arxiu ZIP de la biblioteca.
• Descomprimiu aquest arxiu. Haureu d'obtenir la carpeta mestra ESPAsyncWebServer.
• Canvieu el nom per "ESPAsyncWebServer".

Instal·leu la biblioteca AsyncTCP

• Feu clic aquí per descarregar l'arxiu ZIP de la biblioteca.
• Descomprimiu aquest arxiu. Haureu d'obtenir la carpeta mestra AsyncTCP.
• Canvieu el nom per "AsyncTCP".

Moveu les carpetes ESPAsyncWebServer i AsyncTCP a la carpeta de biblioteques, que es troba dins del directori Documents.

Finalment, reinicieu l'IDE Arduino.

Pas 5: creeu un fitxer Index.html i Style.css amb el contingut següent

La plantilla HTML / CSS per al botó d'activació s'ha extret de la font següent.

Pas 6: Codi Arduino

Principalment, el codi es basava en el codi Arduino que es prenia del servidor web ESP32 mitjançant SPIFFS i Com fer servir l’I2C LCD amb ESP32 a l’IDE Arduino.

Pas 7: pengeu el codi i els fitxers Arduino mitjançant el carregador SPIFFS

• Obriu la carpeta d'esbossos del codi Arduino.
• Dins d’aquesta carpeta, creeu una carpeta nova anomenada “dades”.
• A la carpeta de dades, heu de posar index.html i style.css.
• Pengeu codi Arduino
• A continuació, per carregar els fitxers, feu clic a l’IDE Arduino a Eines> ESP32 Sketch Data Upload

Pas 8: determineu l'adreça IP del servidor web ESP32

Es pot trobar de dues maneres.

• Monitor de sèrie a Arduino IDE (Eines> Monitor de sèrie)
• A la pantalla LCD

Pas 9: prova del servidor web local

A continuació, obriu un navegador web que vulgueu i enganxeu la següent adreça IP a la barra d'adreces. Hauríeu d'obtenir una sortida similar a la captura de pantalla següent.

Pas 10: accediu a un servidor web local des de qualsevol lloc del món mitjançant Ngrok

Ngrok és una plataforma que us permet organitzar l'accés remot a un servidor web o algun altre servei que s'executa al vostre PC des d'Internet extern. L’accés s’organitza a través del túnel segur creat al començament de ngrok.

• Seguiu aquest enllaç i inscriviu-vos.
• Després de crear un compte, inicieu la sessió i aneu a la pestanya "Autenticació". Copieu la línia del camp "El vostre túnel automàtic".
• Feu clic a la pestanya "Baixa" de la barra de navegació. Seleccioneu la versió de ngrok que coincideixi amb el vostre sistema operatiu i descarregueu-la.
• Descomprimiu la carpeta descarregada i executeu la línia d'ordres.
• Connecteu el vostre compte introduint l'ordre següent

./ngrok autenticació

Inicieu un túnel HTTP al port 80

./ngrok http La vostra adreça IP_IP: 80

Si tot s'ha fet correctament, l'estat del túnel hauria de canviar a "en línia" i hauria d'aparèixer un enllaç de redirecció a la columna "Reenviament". En introduir aquest enllaç al navegador, podeu accedir al servidor web des de qualsevol part del món.