Internetna LED z uporabo spletnega strežnika na osnovi ESP32: 10 korakov

2025 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2025-01-23 15:08

Pregled projekta

V tem primeru bomo ugotovili, kako narediti spletni strežnik na osnovi ESP32 za nadzor stanja LED, ki je dostopen od koder koli po svetu. Za ta projekt boste potrebovali računalnik Mac, vendar lahko to programsko opremo zaženete tudi na poceni računalniku z nizko porabo energije, kot je Raspberry Pi.

Priprava ESP32 z Arduino IDE

Če želite začeti programirati ESP32 z uporabo Arduino IDE in programskega jezika Arduino, boste potrebovali poseben dodatek. Na naslednji povezavi preberite, kako pripraviti Arduino IDE za ESP32 v sistemu Mac OS.

Zaloge

Za to vadnico boste potrebovali naslednje predmete:

• Razvojna plošča ESP32 5 mm
• LED upor 220ohm
• 16x2 LCD zaslon z modulom I2C
• Ogledna plošča
• Mostične žice
• Kabel mikro USB

1. korak: Izdelava vezja

Izvedite povezave, kot je prikazano na spodnji shematski shemi

Začnite tako, da na matično ploščo ESP32 in GND priključite izhod napajalne napetosti 3V3. Priključite LED preko upora na ESP32 z uporabo GPIO pin 23 kot digitalnega izhodnega zatiča. Nato priključite SDA pin 16x2 LCD zaslona na GPIO pin 21 in SCL na GPIO pin 22.

2. korak: hiter pregled datotečnega sistema SPIFFS

SPIFFS pomeni »Datotečni sistem bliskovnega perifernega vmesnika Flash«, tj. Datotečni sistem za pomnilnik flash, ki prenaša podatke prek SPI. V skladu s tem je SPIFFS poenostavljen datotečni sistem, zasnovan za mikrokrmilnike z bliskovnimi čipi, ki prenašajo podatke prek vodila SPI (na primer bliskovni pomnilnik ESP32).

SPIFFS je najbolj uporaben za uporabo z ESP32 v naslednjih situacijah:

• Ustvarjanje datotek za shranjevanje nastavitev
• Trajno shranjevanje podatkov.
• Ustvarjanje datotek za shranjevanje majhne količine podatkov (namesto tega za to uporabite kartico microSD).
• Shranjevanje datotek HTML in CSS za ustvarjanje spletnega strežnika.

3. korak: Namestitev zagonskega nalagalnika SPIFFS na Mac OS

Podatke v datoteke, shranjene v datotečnem sistemu ESP32, lahko ustvarite, shranite in zapišete neposredno z vtičnikom v Arduino IDE.

Najprej se prepričajte, da imate nameščeno najnovejšo različico Arduino IDE, nato pa naredite naslednje:

• Odprite naslednjo povezavo in prenesite arhiv »ESP32FS-1.0.zip«
• Pojdite v imenik Arduino IDE, ki se nahaja v mapi Dokumenti.
• Ustvarite mapo z orodji, če ne obstaja. V imeniku orodij ustvarite drugo mapo ESP32FS. Znotraj ESP32FS ustvarite še enega, ki se imenuje orodje.
• Arhiv ZIP, ki ste ga prenesli v 1. koraku, razpakirajte v mapo z orodji.
• Znova zaženite Arduino IDE.
• Če želite preveriti, ali je bil vtičnik uspešno nameščen, odprite Arduino IDE in kliknite »Orodja« ter preverite, ali je v tem meniju element »Nalaganje podatkov skice ESP32«.

4. korak: Namestitev knjižnic

Knjižnici ESPAsyncWebServer in AsyncTCP omogočata ustvarjanje spletnega strežnika z uporabo datotek iz datotečnega sistema ESP32. Za več informacij o teh knjižnicah obiščite naslednjo povezavo.

Namestite knjižnico ESPAsyncWebServer

• Kliknite tukaj za prenos ZIP arhiva knjižnice.
• Razpakirajte ta arhiv. Morali bi dobiti mapo ESPAsyncWebServer-master.
• Preimenujte ga v "ESPAsyncWebServer".

Namestite knjižnico AsyncTCP

• Kliknite tukaj za prenos ZIP arhiva knjižnice.
• Razpakirajte ta arhiv. Morali bi dobiti mapo AsyncTCP-master.
• Preimenujte ga v »AsyncTCP«.

Mape ESPAsyncWebServer in AsyncTCP premaknite v mapo knjižnic, ki se nahaja v imeniku Dokumenti.

Na koncu znova zaženite Arduino IDE.

5. korak: Ustvarite datoteko Index.html in Style.css z naslednjo vsebino

Predloga HTML/CSS za gumb za preklop je vzeta iz naslednjega vira.

6. korak: Arduino koda

Koda je v glavnem temeljila na kodi Arduino, ki je bila vzeta s spletnega strežnika ESP32 s pomočjo SPIFFS in Kako uporabljati I2C LCD z ESP32 v Arduino IDE.

7. korak: Naložite kodo in datoteke Arduino z nalagalnikom SPIFFS

• Odprite mapo skic kode Arduino.
• Znotraj te mape ustvarite novo mapo z imenom »podatki«.
• V mapo s podatki morate vnesti index.html in style.css.
• Naložite kodo Arduino
• Nato za nalaganje datotek kliknite Arduino IDE v Orodja> Nalaganje podatkov skice ESP32

8. korak: Določite IP naslov spletnega strežnika ESP32

Najdemo ga na dva načina.

• Serijski monitor v Arduino IDE (Orodja> Serijski monitor)
• Na LCD zaslonu

9. korak: Preizkusite lokalni spletni strežnik

Nato odprite spletni brskalnik po vaši izbiri in v naslovno vrstico prilepite naslednji naslov IP. Morali bi dobiti rezultat, podoben spodnjemu posnetku zaslona.

10. korak: Dostop do lokalnega spletnega strežnika od koder koli po svetu z uporabo Ngroka

Ngrok je platforma, ki vam omogoča organiziranje oddaljenega dostopa do spletnega strežnika ali katere koli druge storitve, ki se izvaja na vašem računalniku iz zunanjega interneta. Dostop je organiziran skozi varen tunel, ustvarjen na začetku ngroka.

• Sledite tej povezavi in se prijavite.
• Ko ustvarite račun, se prijavite in pojdite na zavihek »Auth«. Kopirajte vrstico iz polja »Your Tunnel Authtoken«.
• V zavihku za krmarjenje kliknite zavihek »Prenesi«. Izberite različico programa ngrok, ki ustreza vašemu operacijskemu sistemu, in jo prenesite.
• Prenesite preneseno mapo in zaženite ukazno vrstico.
• Račun povežite tako, da vnesete naslednji ukaz

./ngrok avten

Zaženite predor HTTP na vratih 80

./ngrok http Vaš_IP_naslov: 80

Če je bilo vse opravljeno pravilno, bi se moralo stanje predora spremeniti v »na spletu«, povezava za preusmeritev pa bi se morala prikazati v stolpcu »Posredovanje«. Če to povezavo vnesete v brskalnik, lahko dostopate do spletnega strežnika od koder koli na svetu.