LED controlat prin internet utilizând serverul web bazat pe ESP32: 10 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:43

Rezumatul proiectului

În acest exemplu, vom afla cum să facem un server web bazat pe ESP32 pentru a controla starea LED-ului, care este accesibil de oriunde din lume. Veți avea nevoie de un computer Mac pentru acest proiect, dar puteți rula acest software chiar și pe un computer ieftin și cu putere redusă, cum ar fi Raspberry Pi.

Pregătirea ESP32 cu Arduino IDE

Pentru a începe să programați ESP32 utilizând Arduino IDE și limbajul de programare Arduino, veți avea nevoie de un supliment special. Citiți despre cum să pregătiți Arduino IDE pentru ESP32 pe Mac OS, urmând linkul următor.

Provizii

Pentru acest tutorial veți avea nevoie de următoarele elemente:

• Placa de dezvoltare ESP32 5mm
• LEDResistor 220ohm
• Afișaj LCD 16x2 cu modul I2C
• Pană de pâine
• Sârme de jumper
• Cablu micro USB

Pasul 1: Construirea circuitului

Efectuați conexiunile așa cum se arată în următoarea diagramă schematică de mai jos

Începeți prin conectarea ieșirii de tensiune de alimentare 3V3 pe placa ESP32 și GNDto. Conectați LED-ul prin rezistor la ESP32 utilizând pinul GPIO 23 ca pin digital de ieșire. După aceea, conectați pinul SDA al afișajului LCD 16x2 la pinul GPIO 21 și SCL la pinul GPIO 22.

Pasul 2: Prezentare rapidă a sistemului de fișiere SPIFFS

SPIFFS înseamnă „Serial Peripheral Interface Flash File System”, adică un sistem de fișiere pentru memoria flash care transferă date prin SPI. În consecință, SPIFFS este un sistem de fișiere simplificat conceput pentru microcontrolere cu cipuri flash care transmit date prin magistrala SPI (cum ar fi memoria flash ESP32).

SPIFFS este cel mai util pentru utilizare cu ESP32 în următoarele situații:

• Crearea fișierelor pentru stocarea setărilor
• Stocare permanentă a datelor.
• Crearea fișierelor pentru a stoca o cantitate mică de date (în loc să folosiți un card microSD pentru aceasta).
• Stocarea fișierelor HTML și CSS pentru crearea unui server web.

Pasul 3: Instalarea SPIFFS Bootloader pe Mac OS

Puteți crea, salva și scrie date în fișiere stocate în sistemul de fișiere ESP32 direct folosind pluginul pe Arduino IDE.

În primul rând, asigurați-vă că aveți instalată cea mai recentă versiune a Arduino IDE, apoi faceți următoarele:

• Deschideți următorul link și descărcați arhiva „ESP32FS-1.0.zip”
• Mergeți la directorul Arduino IDE, care se află în folderul Documents.
• Creați un folder cu instrumente, dacă nu există. În interiorul directorului de instrumente, creați un alt folder ESP32FS. În interiorul ESP32FS creați altul, numit instrument.
• Dezarhivați arhiva ZIP descărcată la pasul 1 în dosarul instrumentului.
• Reporniți ID-ul Arduino.
• Pentru a verifica dacă plug-in-ul a fost instalat cu succes, deschideți ID-ul Arduino și faceți clic pe „Tools” și verificați dacă există un element „ESP32 Sketch Data Upload” în acest meniu.

Pasul 4: Instalarea bibliotecilor

Bibliotecile ESPAsyncWebServer și AsyncTCP vă permit să creați un server web folosind fișiere din sistemul de fișiere al ESP32. Pentru mai multe informații despre aceste biblioteci, consultați următorul link.

Instalați biblioteca ESPAsyncWebServer

• Faceți clic aici pentru a descărca arhiva ZIP a bibliotecii.
• Dezarhivați această arhivă. Ar trebui să obțineți folderul ESPAsyncWebServer-master.
• Redenumiți-l în „ESPAsyncWebServer”.

Instalați biblioteca AsyncTCP

• Faceți clic aici pentru a descărca arhiva ZIP a bibliotecii.
• Dezarhivați această arhivă. Ar trebui să obțineți folderul AsyncTCP-master.
• Redenumiți-l în „AsyncTCP”.

Mutați folderele ESPAsyncWebServer și AsyncTCP în folderul biblioteci, care se află în directorul Documents.

În cele din urmă, reporniți Arduino IDE.

Pasul 5: Creați un fișier Index.html și Style.css cu conținutul următor

Șablonul HTML / CSS pentru butonul de comutare a fost preluat din următoarea sursă.

Pasul 6: Cod Arduino

În principal, codul se baza pe codul Arduino care a fost preluat de pe serverul web ESP32 utilizând SPIFFS și Cum se utilizează I2C LCD cu ESP32 pe Arduino IDE.

Pasul 7: Încărcați codul și fișierele Arduino folosind SPIFFS Loader

• Deschideți dosarul de schiță al codului Arduino.
• În acest folder, creați un folder nou numit „date”.
• În folderul de date, trebuie să introduceți index.html și style.css.
• Încărcați codul Arduino
• Apoi, pentru a încărca fișierele, faceți clic pe ID-ul Arduino din Tools> ESP32 Sketch Data Upload

Pasul 8: Determinați adresa IP a serverului web ESP32

Poate fi găsit în două moduri.

• Monitor serial pe Arduino IDE (Instrumente> Monitor serial)
• Pe ecranul LCD

Pasul 9: Testarea serverului web local

Apoi, deschideți un browser web la alegere și lipiți următoarea adresă IP în bara de adrese. Ar trebui să obțineți o ieșire similară cu cea de mai jos.

Pasul 10: Acces la un server web local de oriunde din lume folosind Ngrok

Ngrok este o platformă care vă permite să organizați accesul de la distanță la un server web sau la un alt serviciu care rulează pe computerul dvs. de pe internetul extern. Accesul este organizat prin tunelul securizat creat la începutul ngrok.

• Urmați acest link și înscrieți-vă.
• După crearea unui cont, conectați-vă și accesați fila „Auth”. Copiați linia din câmpul „Tunnel Authtoken”.
• Faceți clic pe fila „Descărcați” din bara de navigare. Selectați versiunea de ngrok care se potrivește cu sistemul dvs. de operare și descărcați-o.
• Dezarhivați folderul descărcat și rulați linia de comandă.
• Conectați-vă contul introducând următoarea comandă

./ngrok authtoken

Porniți un tunel HTTP pe portul 80

./ngrok http Adresa_IP_Dvs.: 80

Dacă totul a fost făcut corect, atunci starea tunelului ar trebui să se schimbe în „online” și un link de redirecționare ar trebui să apară în coloana „Redirecționare”. Prin introducerea acestui link în browserul dvs., puteți accesa serverul web de oriunde din lume.