Internetvezérelt LED az ESP32 alapú webszerver használatával: 10 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:41

A projekt áttekintése

Ebben a példában kitaláljuk, hogyan lehet ESP32-alapú webszervert készíteni a LED állapotának vezérlésére, amely a világ bármely pontjáról elérhető. A projekthez Mac számítógépre lesz szüksége, de ezt a szoftvert futtathatja még egy olcsó és alacsony fogyasztású számítógépen is, mint például a Raspberry Pi.

Az ESP32 előkészítése az Arduino IDE -vel

Annak érdekében, hogy az ESP32 programozását elkezdhesse az Arduino IDE és az Arduino programozási nyelv használatával, szüksége lesz egy speciális kiegészítőre. Olvassa el, hogyan készítheti el az Arduino IDE -t az ESP32 rendszerhez Mac OS rendszeren a következő link segítségével.

Kellékek

Ehhez az oktatóanyaghoz a következő elemekre lesz szüksége:

• ESP32 fejlesztőlap 5 mm
• LED ellenállás 220ohm
• 16x2 LCD kijelző I2C modullal
• Kenyeretábla
• Jumper vezetékek
• Micro USB kábel

1. lépés: Az áramkör építése

Végezze el a csatlakozásokat az alábbi vázlatos ábra szerint

Kezdje azzal, hogy az ESP32 és GND 3V3 tápfeszültség kimenetét csatlakoztatja a kenyérpanelhez. Csatlakoztassa a LED -et ellenálláson keresztül az ESP32 -hez a GPIO 23 -as tűvel digitális kimeneti tűként. Ezután csatlakoztassa a 16x2 -es LCD -kijelző SDA -tűjét a 21 -es GPIO -tűhöz, az SCL -t pedig a 22 -es GPIO -tűhöz.

2. lépés: A SPIFFS fájlrendszer gyors áttekintése

Az SPIFFS a „Serial Peripheral Interface Flash File System”, azaz a flash memória fájlrendszerét jelenti, amely adatokat továbbít az SPI -n keresztül. Ennek megfelelően az SPIFFS egy egyszerűsített fájlrendszer, amelyet flash chipekkel rendelkező mikrokontrollerekhez terveztek, amelyek adatokat továbbítanak az SPI buszon keresztül (például ESP32 flash memória).

A SPIFFS a leghasznosabb ESP32 -vel az alábbi esetekben:

• Fájlok létrehozása a beállítások tárolásához
• Állandó adattárolás.
• Fájlok létrehozása kis mennyiségű adat tárolására (ahelyett, hogy ehhez microSD kártyát használna).
• HTML és CSS fájlok tárolása webszerver létrehozásához.

3. lépés: A SPIFFS Bootloader telepítése Mac OS rendszerre

Az ESP32 fájlrendszerben tárolt fájlokba adatokat hozhat létre, menthet és írhat közvetlenül az Arduino IDE beépülő moduljával.

Először győződjön meg arról, hogy az Arduino IDE legújabb verziója telepítve van, majd tegye a következőket:

• Nyissa meg az alábbi linket, és töltse le az „ESP32FS-1.0.zip” archívumot
• Lépjen az Arduino IDE könyvtárba, amely a Dokumentumok mappában található.
• Hozzon létre egy eszközmappát, ha nem létezik. Az eszközök könyvtárán belül hozzon létre egy másik mappát ESP32FS. Az ESP32FS belsejében hozzon létre egy másikat, amelyet eszköznek hívnak.
• Csomagolja ki az 1. lépésben letöltött ZIP archívumot az eszközmappába.
• Indítsa újra az Arduino IDE -t.
• A plug-in sikeres telepítésének ellenőrzéséhez nyissa meg az Arduino IDE-t, kattintson az „Eszközök” elemre, és ellenőrizze, hogy van-e „ESP32 Sketch Data Upload” elem ebben a menüben.

4. lépés: Könyvtárak telepítése

Az ESPAsyncWebServer és AsyncTCP könyvtárak lehetővé teszik webszerver létrehozását az ESP32 fájlrendszeréből származó fájlok felhasználásával. Ha többet szeretne tudni ezekről a könyvtárakról, ellenőrizze az alábbi linket.

Telepítse az ESPAsyncWebServer könyvtárat

• Kattintson ide a könyvtár ZIP archívumának letöltéséhez.
• Csomagolja ki ezt az archívumot. Meg kell szereznie az ESPAsyncWebServer-master mappát.
• Nevezze át "ESPAsyncWebServer" -re.

Telepítse az AsyncTCP könyvtárat

• Kattintson ide a könyvtár ZIP archívumának letöltéséhez.
• Csomagolja ki ezt az archívumot. Meg kell szereznie az AsyncTCP-master mappát.
• Nevezze át „AsyncTCP” -re.

Helyezze át az ESPAsyncWebServer és AsyncTCP mappákat a könyvtárak mappába, amely a Dokumentumok könyvtárban található.

Végül indítsa újra az Arduino IDE -t.

5. lépés: Hozzon létre egy Index.html és Style.css fájlt a következő tartalommal

A váltógomb HTML/CSS sablonja a következő forrásból származik.

6. lépés: Arduino kód

A kód elsősorban az Arduino kódon alapult, amelyet az ESP32 webszerverről SPIFFS használatával és az I2C LCD használatát ESP32 -vel használtak az Arduino IDE -n.

7. lépés: Töltse fel az Arduino kódot és fájlokat a SPIFFS betöltővel

• Nyissa meg az Arduino kód vázlatmappáját.
• Ebben a mappában hozzon létre egy új mappát, az „adatok” nevet.
• Az adatmappába be kell helyeznie az index.html és a style.css fájlokat.
• Töltse fel az Arduino kódot
• Ezután a fájlok feltöltéséhez kattintson az Arduino IDE lehetőségre az Eszközök> ESP32 vázlatadatok feltöltése menüpontban

8. lépés: Határozza meg az ESP32 webszerver IP -címét

Kétféleképpen lehet megtalálni.

• Soros monitor az Arduino IDE -n (Eszközök> Soros monitor)
• LCD kijelzőn

9. lépés: A helyi webszerver tesztelése

Ezután nyisson meg egy választott webböngészőt, és illessze be a következő IP -címet a címsorba. Az alábbi képernyőképhez hasonló kimenetet kell kapnia.

10. lépés: Hozzáférés a helyi webszerverhez a világ bármely pontjáról az Ngrok használatával

Az Ngrok egy olyan platform, amely lehetővé teszi a külső internetről a számítógépen futó webszerverhez vagy más szolgáltatáshoz való távoli hozzáférés megszervezését. A hozzáférés az ngrok elején létrehozott biztonságos alagúton keresztül szerveződik.

• Kövesse ezt a linket, és regisztráljon.
• A fiók létrehozása után jelentkezzen be, és lépjen az "Auth" fülre. Másolja a sort a „Your Tunnel Authtoken” mezőből.
• Kattintson a „Letöltés” fülre a navigációs sávon. Válassza ki az operációs rendszerének megfelelő ngrok verziót, és töltse le.
• Csomagolja ki a letöltött mappát, és futtassa a parancssort.
• Csatlakoztassa fiókját a következő parancs megadásával

./ngrok authtoken

Indítson el egy HTTP alagutat a 80 -as porton

./ngrok http Saját_IP_cím: 80

Ha mindent helyesen csinált, akkor az alagút állapotának „online” -ra kell változnia, és az „Átirányítás” oszlopban egy átirányítási linknek kell megjelennie. Ha ezt a linket a böngészőjébe írja be, a világ bármely pontjáról elérheti a webszervert.