LED controllato da Internet tramite server Web basato su ESP32: 10 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:02

Panoramica del progetto

In questo esempio, scopriremo come creare un server Web basato su ESP32 per controllare lo stato del LED, accessibile da qualsiasi parte del mondo. Avrai bisogno di un computer Mac per questo progetto, ma puoi eseguire questo software anche su un computer economico e a bassa potenza come il Raspberry Pi.

Preparazione dell'ESP32 con l'IDE Arduino

Per iniziare a programmare ESP32 utilizzando l'IDE Arduino e il linguaggio di programmazione Arduino, avrai bisogno di un componente aggiuntivo speciale. Leggi come preparare l'IDE Arduino per ESP32 su Mac OS dal seguente link.

Forniture

Per questo tutorial avrai bisogno dei seguenti elementi:

• Scheda di sviluppo ESP325mm
• LEDResistore 220ohm
• Display LCD 16x2 con modulo I2C
• tagliere
• Ponticelli
• Cavo micro USB

Passaggio 1: costruire il circuito

Eseguire i collegamenti come mostrato nel seguente diagramma schematico di seguito

Inizia collegando l'uscita della tensione di alimentazione 3V3 su ESP32 e GND alla breadboard. Collegare il LED tramite resistore all'ESP32 utilizzando il pin 23 GPIO come pin di uscita digitale. Successivamente, collega il pin SDA del display LCD 16x2 al pin 21 GPIO e SCL al pin 22 GPIO.

Passaggio 2: panoramica rapida del filesystem SPIFFS

SPIFFS sta per “Serial Peripheral Interface Flash File System”, ovvero file system per memoria flash che trasferisce dati tramite SPI. Di conseguenza, SPIFFS è un file system semplificato progettato per microcontrollori con chip flash che trasmettono dati tramite il bus SPI (come la memoria flash ESP32).

SPIFFS è molto utile per l'uso con ESP32 nelle seguenti situazioni:

• Creazione di file per la memorizzazione delle impostazioni
• Archiviazione permanente dei dati.
• Creazione di file per archiviare una piccola quantità di dati (invece di utilizzare una scheda microSD per questo).
• Memorizzazione di file HTML e CSS per la creazione di un server web.

Passaggio 3: installazione del Bootloader SPIFFS su Mac OS

Puoi creare, salvare e scrivere dati su file archiviati nel file system ESP32 direttamente utilizzando il plug-in su Arduino IDE.

Prima di tutto, assicurati di avere l'ultima versione dell'IDE Arduino installata, quindi procedi come segue:

• Aprire il seguente collegamento e scaricare l'archivio “ESP32FS-1.0.zip”
• Vai alla directory IDE di Arduino, che si trova nella cartella Documenti.
• Crea una cartella degli strumenti, se non esiste. All'interno della directory degli strumenti, crea un'altra cartella ESP32FS. All'interno di ESP32FS crearne un altro, che si chiama tool.
• Decomprimi l'archivio ZIP scaricato nel passaggio 1 nella cartella degli strumenti.
• Riavvia il tuo IDE Arduino.
• Per verificare se il plug-in è stato installato correttamente, apri l'IDE Arduino e fai clic su "Strumenti" e controlla se è presente una voce "Caricamento dati schizzo ESP32" in questo menu.

Passaggio 4: installazione di librerie

Le librerie ESPAsyncWebServer e AsyncTCP consentono di creare un server Web utilizzando file dal file system di ESP32. Per ulteriori informazioni su queste librerie, controllare il seguente collegamento.

Installa la libreria ESPAsyncWebServer

• Clicca qui per scaricare l'archivio ZIP della biblioteca.
• Decomprimi questo archivio. Dovresti ottenere la cartella ESPAsyncWebServer-master.
• Rinominalo in "ESPAsyncWebServer".

Installa la libreria AsyncTCP

• Clicca qui per scaricare l'archivio ZIP della biblioteca.
• Decomprimi questo archivio. Dovresti ottenere la cartella AsyncTCP-master.
• Rinominalo in "AsyncTCP".

Sposta le cartelle ESPAsyncWebServer e AsyncTCP nella cartella delle librerie, che si trova all'interno della directory Documenti.

Infine, riavvia l'IDE Arduino.

Passaggio 5: creare un file Index.html e Style.css con il seguente contenuto

Il modello HTML/CSS per il pulsante di attivazione/disattivazione è stato preso dalla seguente fonte.

Passaggio 6: codice Arduino

Principalmente, il codice era basato sul codice Arduino preso da ESP32 Web Server utilizzando SPIFFS e How to Use I2C LCD con ESP32 su Arduino IDE.

Passaggio 7: caricare il codice e i file Arduino utilizzando il caricatore SPIFFS

• Apri la cartella degli sketch del codice Arduino.
• All'interno di questa cartella, crea una nuova cartella chiamata "dati".
• All'interno della cartella dei dati, è necessario inserire index.html e style.css.
• Carica il codice Arduino
• Quindi, per caricare i file, fare clic sull'IDE Arduino su Strumenti> Caricamento dati schizzo ESP32

Passaggio 8: determinare l'indirizzo IP del server Web ESP32

Si può trovare in due modi.

• Monitor seriale su Arduino IDE (Strumenti> Monitor seriale)
• Sul display LCD

Passaggio 9: test del server Web locale

Quindi, apri un browser web a tua scelta e incolla il seguente indirizzo IP nella barra degli indirizzi. Dovresti ottenere un output simile allo screenshot qui sotto.

Passaggio 10: accesso a un server Web locale da qualsiasi parte del mondo utilizzando Ngrok

Ngrok è una piattaforma che ti permette di organizzare l'accesso remoto a un server web o qualche altro servizio in esecuzione sul tuo PC da Internet esterno. L'accesso è organizzato attraverso il tunnel sicuro creato all'inizio di ngrok.

• Segui questo link e iscriviti.
• Dopo aver creato un account, accedi e vai alla scheda "Auth". Copia la riga dal campo "Your Tunnel Authtoken".
• Fai clic sulla scheda "Download" nella barra di navigazione. Seleziona la versione di ngrok che corrisponde al tuo sistema operativo e scaricala.
• Decomprimi la cartella scaricata ed esegui la riga di comando.
• Collega il tuo account inserendo il seguente comando

./ngrok authtoken

Avvia un tunnel HTTP sulla porta 80

./ngrok http Your_IP_Address:80

Se tutto è stato eseguito correttamente, lo stato del tunnel dovrebbe cambiare in "online" e nella colonna "Inoltro" dovrebbe apparire un collegamento di reindirizzamento. Inserendo questo collegamento nel browser, è possibile accedere al server Web da qualsiasi parte del mondo.