Internetski upravljana LED pomoću web poslužitelja zasnovanog na ESP32: 10 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:35

Pregled projekta

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

Priprema ESP32 s Arduino IDE -om

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

Pribor

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

• Razvojna ploča ESP32 5 mm
• LEDResistor 220ohm
• 16x2 LCD zaslon s I2C modulom
• Oglasna ploča
• Kratkospojne žice
• Mikro USB kabel

Korak 1: Izgradnja kruga

Izvedite veze kako je prikazano na sljedećoj shematskoj shemi u nastavku

Počnite povezivanjem izlaznog napona 3V3 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 zaslona na GPIO pin 21 i SCL na GPIO pin 22.

Korak 2: Brzi pregled datotečnog sustava SPIFFS

SPIFFS označava "Flash File System sa serijskim perifernim sučeljem", tj. Datotečni sustav za flash memoriju koji prenosi podatke putem SPI -ja. Prema tome, SPIFFS je pojednostavljeni datotečni sustav dizajniran za mikrokontrolere s flash čipovima koji prenose podatke putem SPI sabirnice (poput ESP32 flash memorije).

SPIFFS je najkorisniji za korištenje s ESP32 u sljedećim situacijama:

• Stvaranje datoteka za spremanje postavki
• Trajna pohrana podataka.
• Stvaranje datoteka za pohranu male količine podataka (umjesto korištenja microSD kartice za to).
• Pohranjivanje HTML i CSS datoteka za izradu web poslužitelja.

Korak 3: Instalacija SPIFFS Bootloader -a na Mac OS

Možete stvarati, spremati i upisivati podatke u datoteke pohranjene u datotečnom sustavu ESP32 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 direktorij Arduino IDE koji se nalazi u mapi Dokumenti.
• Izradite mapu alata, ako ona ne postoji. Unutar direktorija alata stvorite drugu mapu ESP32FS. Unutar ESP32FS stvorite 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 "Alati" i provjerite postoji li u ovom izborniku stavka "ESP32 Sketch Data Upload".

Korak 4: Instaliranje knjižnica

Knjižnice ESPAsyncWebServer i AsyncTCP omogućuju vam stvaranje web poslužitelja pomoću datoteka iz datotečnog sustava ESP32. Za više informacija o tim knjižnicama provjerite sljedeću vezu.

Instalirajte knjižnicu ESPAsyncWebServer

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

Instalirajte knjižnicu AsyncTCP

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

Premjestite mape ESPAsyncWebServer i AsyncTCP u mapu knjižnica koja se nalazi unutar direktorija Dokumenti.

Na kraju, ponovno pokrenite Arduino IDE.

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

HTML/CSS predložak za gumb za prebacivanje preuzet je iz sljedećeg izvora.

Korak 6: Arduino kod

Uglavnom, kôd se temeljio na Arduino kodu koji je preuzet s ESP32 web poslužitelja pomoću SPIFFS -a i Kako koristiti I2C LCD s ESP32 na Arduino IDE -u.

Korak 7: Prenesite Arduino kod i datoteke pomoću SPIFFS Loadera

• 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.
• Prenesite Arduino kod
• Zatim, da biste učitali datoteke, kliknite Arduino IDE na Alati> ESP32 Sketch Data Upload

Korak 8: Odredite IP adresu ESP32 web poslužitelja

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

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

Korak 9: Testiranje lokalnog web poslužitelja

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

Korak 10: Pristup lokalnom web poslužitelju s bilo kojeg mjesta u svijetu pomoću Ngroka

Ngrok je platforma koja vam omogućuje da s vanjskog interneta organizirate daljinski pristup web poslužitelju ili nekoj drugoj usluzi koja se izvodi na vašem računalu. Pristup je organiziran putem sigurnog tunela stvorenog na početku ngroka.

• Slijedite ovu vezu i prijavite se.
• Nakon stvaranja računa prijavite se i idite na karticu "Auth". Kopirajte redak iz polja “Your Tunnel Authtoken”.
• Kliknite karticu "Preuzmi" na navigacijskoj traci. Odaberite verziju ngroka koja odgovara vašem OS -u i preuzmite je.
• Raspakirajte preuzetu mapu i pokrenite naredbeni redak.
• Povežite svoj račun unošenjem sljedeće naredbe

./ngrok autoriziran

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 trebala bi se pojaviti u stupcu "Prosljeđivanje". Unosom ove veze u svoj preglednik web -poslužitelju možete pristupiti sa bilo kojeg mjesta u svijetu.