Internet Tswj LED Siv ESP32 Raws Li Web Server: 10 Kauj Ruam

2024 Tus sau: John Day | [email protected]. Kawg hloov kho: 2024-01-30 09:26

Txheej txheem cej luam

Hauv qhov piv txwv no, peb yuav txiav txim siab yuav ua li cas thiaj tsim ESP32-based web server los tswj LED lub xeev, uas tuaj yeem nkag tau los ntawm txhua qhov chaw hauv ntiaj teb. Koj yuav xav tau lub khoos phis tawj Mac rau txoj haujlwm no, tab sis koj tuaj yeem siv cov software no txawm tias pheej yig thiab lub zog siv computer zoo li Raspberry Pi.

Kev npaj ESP32 nrog Arduino IDE

Txhawm rau pib ua haujlwm ESP32 siv Arduino IDE thiab Arduino cov lus programming, koj yuav xav tau tshwj xeeb ntxiv. Nyeem txog yuav npaj Arduino IDE rau ESP32 ntawm Mac OS li cas hauv qab no.

Khoom siv

Rau qhov kev qhia no koj yuav xav tau cov khoom hauv qab no:

• ESP32 txoj kev loj hlob board5mm
• LEDResistor 220ohm
• 16x2 LCD zaub nrog I2C module
• Cov qhob cij
• Jumper xov hlau
• Micro USB kab

Kauj Ruam 1: Tsim Circuit Court

Ua cov kev sib txuas raws li qhia hauv daim duab qhia duab hauv qab no

Pib los ntawm kev txuas 3V3 muab hluav taws xob tso tawm ntawm ESP32 thiab GNDto breadboard. Txuas LED ntawm tus tiv thaiv mus rau ESP32 siv GPIO tus pin 23 raws li cov lej tso tawm. Tom qab ntawd, txuas SDA tus pin ntawm 16x2 LCD zaub rau GPIO tus pin 21 thiab SCL rau GPIO tus pin 22.

Kauj Ruam 2: Txheej txheem cej luam ntawm SPIFFS Cov Ntaub Ntawv

SPIFFS sawv rau "Serial Peripheral Interface Flash File System", piv txwv li cov ntaub ntawv kaw lus rau flash nco uas hloov cov ntaub ntawv los ntawm SPI. Raws li, SPIFFS yog cov txheej txheem cov ntaub ntawv yooj yim tsim rau microcontrollers nrog flash chips uas xa cov ntaub ntawv ntawm SPI npav (xws li ESP32 flash memory).

SPIFFS muaj txiaj ntsig tshaj plaws rau siv nrog ESP32 hauv cov xwm txheej hauv qab no:

• Tsim cov ntaub ntawv rau khaws cia chaw
• Kev khaws cov ntaub ntawv mus tas li.
• Tsim cov ntaub ntawv khaws me me ntawm cov ntaub ntawv (tsis txhob siv daim npav microSD rau qhov no).
• Khaws cov ntaub ntawv HTML thiab CSS rau tsim lub web server.

Kauj Ruam 3: Kev teeb tsa SPIFFS Bootloader ntawm Mac OS

Koj tuaj yeem tsim, txuag thiab sau cov ntaub ntawv rau cov ntaub ntawv khaws tseg hauv ESP32 cov ntaub ntawv kaw lus ncaj qha siv lub plugin ntawm Arduino IDE.

Ua ntej tshaj plaws, xyuas kom koj muaj qhov hloov tshiab kawg ntawm Arduino IDE teeb tsa, thiab tom qab ntawd ua cov hauv qab no:

• Qhib qhov txuas hauv qab no thiab rub tawm cov ntawv "ESP32FS-1.0.zip"
• Mus rau Arduino IDE phau ntawv teev npe, uas nyob ntawm Cov Ntawv Teev Npe.
• Tsim cov cuab yeej nplaub tshev, yog tias nws tsis muaj. Sab hauv ntawm cov cuab yeej teev npe tsim lwm daim nplaub tshev ESP32FS. Sab hauv ntawm ESP32FS tsim lwm qhov, uas yog hu ua cuab yeej.
• Unzip ZIP cov ntaub ntawv rub tawm hauv qib 1 rau lub cuab yeej nplaub tshev.
• Rov pib dua koj Arduino IDE.
• Txhawm rau txheeb xyuas yog tias qhov txuas txuas tau ua tiav, qhib Arduino IDE thiab nyem rau "Cov cuab yeej" thiab tshawb xyuas yog tias muaj ib yam khoom "ESP32 Sketch Data Upload" hauv cov ntawv qhia zaub mov no.

Kauj Ruam 4: Txhim Kho Tsev Qiv Ntawv

ESPAsyncWebServer thiab AsyncTCP cov tsev qiv ntawv tso cai rau koj los tsim lub vev xaib siv cov ntaub ntawv los ntawm cov kab ke ntawm ESP32. Yog xav paub ntxiv txog cov tsev qiv ntawv no, txheeb xyuas qhov txuas hauv qab no.

Nruab ESPAsyncWebServer lub tsev qiv ntawv

• Nyem rau qhov no txhawm rau rub tawm ZIP cov ntaub ntawv ntawm lub tsev qiv ntawv.
• Unzip cov ntawv no. Koj yuav tsum tau txais ESPAsyncWebServer-master nplaub tshev.
• Hloov nws mus rau "ESPAsyncWebServer".

Nruab ib lub tsev qiv ntawv AsyncTCP

• Nyem rau qhov no txhawm rau rub tawm ZIP cov ntaub ntawv ntawm lub tsev qiv ntawv.
• Unzip cov ntawv no. Koj yuav tsum tau txais AsyncTCP-master nplaub tshev.
• Hloov nws mus rau "AsyncTCP".

Tsiv ESPAsyncWebServer thiab AsyncTCP cov nplaub tshev mus rau lub tsev qiv ntawv khaws cia, uas nyob hauv sab hauv Cov Ntawv Teev Npe.

Thaum kawg, rov pib dua Arduino IDE.

Kauj Ruam 5: Tsim Index.html thiab Style.css Cov Ntaub Ntawv Nrog Cov Lus hauv qab no

HTML/CSS Template rau khawm toggle raug coj los ntawm cov hauv qab no.

Kauj Ruam 6: Arduino Code

Feem ntau, cov cai tau ua raws Arduino code uas tau coj los ntawm ESP32 Web Server siv SPIFFS thiab Yuav Siv I2C LCD nrog ESP32 ntawm Arduino IDE li cas.

Kauj Ruam 7: Upload Arduino Code thiab Cov Ntaub Ntawv Siv SPIFFS Loader

• Qhib daim duab kos ntawm Arduino code.
• Sab hauv daim nplaub tshev no, tsim daim nplaub tshev tshiab hu ua "cov ntaub ntawv".
• Sab hauv cov ntaub ntawv tais ceev tseg, koj yuav tsum tau muab qhov index.html thiab style.css.
• Rub tawm Arduino code
• Tom qab ntawd, txhawm rau upload cov ntaub ntawv, nyem rau ntawm Arduino IDE ntawm Cov Cuab Yeej> ESP32 Sketch Data Upload

Kauj Ruam 8: Txheeb Xyuas ESP32 Web Server IP Address

Nws tuaj yeem pom hauv ob txoj hauv kev.

• Serial saib ntawm Arduino IDE (Cuab Yeej> Saib xyuas txuas)
• Hauv LCD zaub

Kauj Ruam 9: Xeem Lub Vev Xaib Hauv Zos

Tom ntej no, qhib lub vev xaib uas koj xaiv thiab muab tus IP chaw nyob hauv qab no rau hauv qhov chaw nyob bar. Koj yuav tsum tau txais cov txiaj ntsig zoo ib yam li hauv qab screenshot.

Kauj ruam 10: Nkag mus rau Lub Vev Xaib Hauv Zos Los Ntawm Txhua Qhov Chaw Hauv Ntiaj Teb Siv Ngrok

Ngrok yog lub platform uas tso cai rau koj los teeb tsa kev nkag mus rau lub web server lossis qee qhov kev pabcuam uas khiav ntawm koj lub PC los ntawm internet sab nraud. Kev nkag mus tau teeb tsa los ntawm txoj kev ruaj ntseg uas tsim thaum pib ntawm ngrok.

• Ua raws li qhov txuas no thiab sau npe.
• Tom qab tsim tus as khauj, nkag mus thiab mus rau "Auth" tab. Luam kab ntawm kab "Koj Qhov Chaw Authtoken" teb.
• Nyem rau ntawm "Download" tab hauv kab ntawv qhia zaub mov Xaiv cov version ntawm ngrok uas phim koj OS thiab rub tawm nws.
• Unzip cov ntawv rub tawm thiab khiav kab hais kom ua.
• Txuas koj tus account los ntawm kev nkag mus rau cov lus txib hauv qab no

./ngrok authtoken

Pib HTTP qhov ntawm chaw nres nkoj 80

./ngrok http Koj_IP_Address: 80

Yog tias txhua yam ua tiav kom raug, tom qab ntawv qhov xwm txheej yuav tsum hloov mus rau "online", thiab qhov txuas txuas rov qab yuav tsum tshwm nyob rau hauv kab lus "Xa mus tom ntej".