Internet -beheerde LED met behulp van ESP32 -gebaseerde webbediener: 10 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:25

Projek Oorsig

In hierdie voorbeeld sal ons uitvind hoe u 'n ESP32-gebaseerde webbediener kan maak om die LED-toestand te beheer, wat toeganklik is van oral ter wêreld. U benodig 'n Mac-rekenaar vir hierdie projek, maar u kan hierdie sagteware selfs op 'n goedkoop en lae-kragrekenaar soos die Raspberry Pi gebruik.

Voorbereiding van die ESP32 met die Arduino IDE

Om die ESP32 met die Arduino IDE en die Arduino-programmeertaal te begin programmeer, benodig u 'n spesiale byvoeging. Lees die volgende skakel oor hoe om die Arduino IDE vir ESP32 op Mac OS voor te berei.

Voorrade

Vir hierdie tutoriaal benodig u die volgende items:

• ESP32 ontwikkelbord 5 mm
• LED Weerstand 220ohm
• 16x2 LCD -skerm met I2C -module
• Broodbord
• Springdrade
• Mikro USB kabel

Stap 1: Bou die kring

Voer verbindings uit soos getoon in die volgende skematiese diagram hieronder

Begin deur die 3V3 -voedingspanningsuitset op die ESP32- en GNDto -broodbord aan te sluit. Koppel LED via weerstand aan die ESP32 met GPIO -pen 23 as digitale uitsetpen. Koppel daarna 'n SDA -pen van 16x2 LCD -skerm aan GPIO -pen 21 en SCL aan GPIO -pen 22.

Stap 2: Vinnige oorsig van die SPIFFS -lêerstelsel

SPIFFS staan vir “Serial Peripheral Interface Flash File System”, dit wil sê lêerstelsel vir flitsgeheue wat data deur SPI oordra. Gevolglik is SPIFFS 'n vereenvoudigde lêerstelsel wat ontwerp is vir mikrobeheerders met flitsskyfies wat data via die SPI -bus oordra (soos ESP32 -flitsgeheue).

SPIFFS is die nuttigste vir gebruik met ESP32 in die volgende situasies:

• Skep lêers vir die stoor van instellings
• Permanente data stoor.
• Skep lêers om 'n klein hoeveelheid data te stoor (in plaas daarvan om 'n microSD -kaart hiervoor te gebruik).
• Stoor HTML- en CSS -lêers vir die skep van 'n webbediener.

Stap 3: Installasie van die SPIFFS Bootloader op Mac OS

U kan data skep, stoor en skryf na lêers wat in die ESP32 -lêerstelsel gestoor is, direk met die inprop op Arduino IDE.

Maak eerstens seker dat u die nuutste weergawe van die Arduino IDE geïnstalleer het, en doen dan die volgende:

• Maak die volgende skakel oop en laai die argief "ESP32FS-1.0.zip" af
• Gaan na die Arduino IDE -gids, wat in die gids Dokumente geleë is.
• Skep 'n gereedskapmap as dit nie bestaan nie. Skep 'n ander ESP32FS -gids in die gereedskapgids. Binne in die ESP32FS kan u nog een skep, 'n instrument genoem.
• Pak die zip -argief wat in stap 1 afgelaai is, uit na die gereedskapmap.
• Herbegin u Arduino IDE.
• Om te kyk of die inprop suksesvol geïnstalleer is, maak die Arduino IDE oop, klik op "Tools" en kyk of daar 'n item "ESP32 Sketch Data Upload" in hierdie spyskaart is.

Stap 4: Installeer biblioteke

Met ESPAsyncWebServer- en AsyncTCP -biblioteke kan u 'n webbediener skep met behulp van lêers uit die lêerstelsel van ESP32. Raadpleeg die volgende skakel vir meer inligting oor hierdie biblioteke.

Installeer die ESPAsyncWebServer -biblioteek

• Klik hier om die zip -argief van die biblioteek af te laai.
• Pak hierdie argief uit. U moet die ESPAsyncWebServer-master-lêergids kry.
• Hernoem dit na "ESPAsyncWebServer".

Installeer die AsyncTCP -biblioteek

• Klik hier om die zip -argief van die biblioteek af te laai.
• Pak hierdie argief uit. U moet die AsyncTCP-master-lêergids kry.
• Hernoem dit na "AsyncTCP".

Beweeg die ESPAsyncWebServer- en AsyncTCP -vouers na die gids biblioteke, wat in die gids Dokumente geleë is.

Laastens, herbegin die Arduino IDE.

Stap 5: Skep 'n Index.html- en Style.css -lêer met die volgende inhoud

HTML/CSS -sjabloon vir wisselknoppie is uit die volgende bron geneem.

Stap 6: Arduino -kode

Die kode is hoofsaaklik gebaseer op die Arduino -kode wat met behulp van SPIFFS van die ESP32 -webbediener geneem is en hoe om I2C LCD met ESP32 op Arduino IDE te gebruik.

Stap 7: Laai die Arduino -kode en lêers op met die SPIFFS Loader

• Maak die sketsmap met die Arduino -kode oop.
• Skep 'n nuwe gids met die naam "data" in hierdie gids.
• In die gegewensmap moet u index.html en style.css plaas.
• Laai Arduino -kode op
• Om die lêers op te laai, klik dan op die Arduino IDE op Tools> ESP32 Sketch Data Upload

Stap 8: Bepaal die ESP32 -webbediener se IP -adres

Dit kan op twee maniere gevind word.

• Seriële monitor op Arduino IDE (Tools> Serial monitor)
• Op LCD -skerm

Stap 9: Toets die plaaslike webbediener

Maak vervolgens 'n webblaaier van u keuse oop en plak die volgende IP -adres in die adresbalk. U moet 'n uitset kry wat soortgelyk is aan die onderstaande skermkiekie.

Stap 10: Toegang tot 'n plaaslike webbediener vanaf enige plek ter wêreld met behulp van Ngrok

Ngrok is 'n platform waarmee u afstandstoegang tot 'n webbediener of 'n ander diens vanaf u rekenaar vanaf die eksterne internet kan organiseer. Toegang word georganiseer deur die veilige tonnel wat aan die begin van ngrok geskep is.

• Volg hierdie skakel en teken aan.
• Nadat u 'n rekening geskep het, meld u aan en gaan na die oortjie "Verifiëring". Kopieer die reël uit die veld "Your Tunnel Authtoken".
• Klik op die "Download" -oortjie in die navigasiebalk. Kies die weergawe van ngrok wat by u bedryfstelsel pas en laai dit af.
• Pak die afgelaaide vouer uit en voer die opdragreël uit.
• Koppel u rekening deur die volgende opdrag in te voer

./ngrok authtoken

Begin 'n HTTP -tonnel op poort 80

./ngrok http Your_IP_Address: 80

As alles korrek gedoen is, moet die tonnelstatus verander na "aanlyn", en 'n herleidingskakel moet in die kolom "Aanstuur" verskyn. Deur hierdie skakel in u blaaier in te voer, het u toegang tot die webbediener van oral in die wêreld.