Internetska kontrolisana LED pomoću web servera zasnovanog na ESP32: 10 koraka

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:06

Pregled projekta

U ovom primjeru ćemo shvatiti kako napraviti web server zasnovan na ESP32 za kontrolu stanja LED-a, kojem je dostupan bilo gdje u svijetu. Za ovaj projekt trebat će vam Mac računar, ali ovaj softver možete pokrenuti čak i na jeftinom računaru male snage poput Raspberry Pi.

Priprema ESP32 sa Arduino IDE -om

Da biste počeli programirati ESP32 pomoću Arduino IDE-a i programskog jezika Arduino, trebat će vam poseban dodatak. Na sljedećoj vezi pročitajte kako pripremiti Arduino IDE za ESP32 na Mac OS -u.

Supplies

Za ovaj vodič trebat će vam sljedeće stavke:

• Razvojna ploča ESP32 5 mm
• LEDResistor 220ohm
• 16x2 LCD ekran sa I2C modulom
• Breadboard
• Žice za kratkospojnike
• Mikro USB kabl

Korak 1: Izgradnja kruga

Izvedite veze kao što je prikazano na donjem shematskom dijagramu

Počnite povezivanjem 3V3 izlaznog napona na matičnoj ploči ESP32 i GND. Spojite LED preko otpornika na ESP32 koristeći GPIO pin 23 kao pin za digitalni izlaz. Nakon toga spojite SDA pin 16x2 LCD ekrana na GPIO pin 21 i SCL na GPIO pin 22.

Korak 2: Brzi pregled fajl sistema SPIFFS

SPIFFS označava “Flash File System sa serijskim perifernim interfejsom”, tj. Sistem datoteka za fleš memoriju koji prenosi podatke putem SPI. Prema tome, SPIFFS je pojednostavljeni sistem datoteka dizajniran za mikrokontrolere sa flash čipovima koji prenose podatke putem SPI sabirnice (poput ESP32 flash memorije).

SPIFFS je najkorisniji za upotrebu s ESP32 u sljedećim situacijama:

• Kreiranje datoteka za spremanje postavki
• Trajno skladištenje podataka.
• Stvaranje datoteka za pohranu male količine podataka (umjesto korištenja microSD kartice za ovo).
• Pohranjivanje HTML i CSS datoteka za kreiranje web servera.

Korak 3: Instalacija SPIFFS Bootloader -a na Mac OS

Možete kreirati, spremati i upisivati podatke u datoteke pohranjene u ESP32 datotečnom sistemu izravno pomoću dodatka na Arduino IDE.

Prije svega, provjerite imate li instaliranu najnoviju verziju Arduino IDE -a, a zatim učinite sljedeće:

• Otvorite sljedeću vezu i preuzmite arhivu “ESP32FS-1.0.zip”
• Idite u Arduino IDE direktorij koji se nalazi u mapi Documents.
• Kreirajte mapu alata, ako ona ne postoji. Unutar direktorija alata stvorite drugu mapu ESP32FS. Unutar ESP32FS kreirajte još jedan, koji se zove alat.
• Raspakirajte ZIP arhivu preuzetu u 1. koraku u mapu alata.
• Ponovo pokrenite svoj Arduino IDE.
• Da biste provjerili je li dodatak uspješno instaliran, otvorite Arduino IDE i kliknite na "Alati" i provjerite postoji li u ovom izborniku stavka "ESP32 Sketch Data Upload".

Korak 4: Instaliranje biblioteka

ESPAsyncWebServer i AsyncTCP biblioteke omogućuju vam da kreirate web server koristeći datoteke iz datotečnog sistema ESP32. Za više informacija o ovim bibliotekama pogledajte sljedeću vezu.

Instalirajte ESPAsyncWebServer biblioteku

• Kliknite ovdje za preuzimanje ZIP arhive biblioteke.
• Raspakirajte ovu arhivu. Trebali biste nabaviti mapu ESPAsyncWebServer-master.
• Preimenujte ga u "ESPAsyncWebServer".

Instalirajte biblioteku AsyncTCP

• Kliknite ovdje za preuzimanje ZIP arhive biblioteke.
• Raspakirajte ovu arhivu. Trebali biste nabaviti fasciklu AsyncTCP-master.
• Preimenujte ga u „AsyncTCP“.

Premjestite fascikle ESPAsyncWebServer i AsyncTCP u mapu biblioteke koja se nalazi unutar direktorija Dokumenti.

Na kraju, ponovno pokrenite Arduino IDE.

Korak 5: Kreirajte datoteku Index.html i Style.css sa sljedećim sadržajem

HTML/CSS predložak za dugme za prebacivanje preuzet je iz sledećeg izvora.

Korak 6: Arduino kod

Uglavnom, kôd se temeljio na Arduino kodu koji je preuzet sa ESP32 web servera koristeći SPIFFS i Kako koristiti I2C LCD sa ESP32 na Arduino IDE -u.

Korak 7: Prenesite Arduino kôd i datoteke koristeći SPIFFS Loader

• Otvorite mapu skica Arduino koda.
• Unutar ove mape stvorite novu mapu pod nazivom „podaci“.
• Unutar mape s podacima morate staviti index.html i style.css.
• Otpremite Arduino kod
• Zatim, da biste učitali datoteke, kliknite na Arduino IDE na Alati> ESP32 Sketch Data Upload

Korak 8: Odredite IP adresu ESP32 web servera

Može se pronaći na dva načina.

• Serijski monitor na Arduino IDE (Alati> Serijski monitor)
• Na LCD ekranu

Korak 9: Testiranje lokalnog web servera

Zatim otvorite web preglednik po svom izboru i zalijepite sljedeću IP adresu u adresnu traku. Trebali biste dobiti izlaz sličan slici ispod.

Korak 10: Pristup lokalnom web serveru sa bilo kojeg mjesta u svijetu pomoću Ngroka

Ngrok je platforma koja vam omogućuje da s vanjskog interneta organizirate daljinski pristup web serveru ili nekoj drugoj usluzi koja radi na vašem računaru. Pristup je organiziran kroz zaštićeni tunel kreiran na početku ngroka.

• Slijedite ovaj link i prijavite se.
• Nakon kreiranja računa prijavite se i idite na karticu "Auth". Kopirajte liniju iz polja “Your Tunnel Authtoken”.
• Kliknite na karticu "Preuzmi" na navigacijskoj traci. Odaberite verziju ngroka koja odgovara vašem OS -u i preuzmite je.
• Raspakujte preuzetu fasciklu i pokrenite komandnu liniju.
• Povežite svoj račun unosom sljedeće naredbe

./ngrok authtoken

Pokrenite HTTP tunel na portu 80

./ngrok http Vaša_IP_Adresa: 80

Ako je sve učinjeno ispravno, tada bi se status tunela trebao promijeniti u "online", a veza za preusmjeravanje bi se trebala pojaviti u koloni "Prosljeđivanje". Unosom ove veze u svoj preglednik, web serveru možete pristupiti sa bilo kojeg mjesta u svijetu.