ESP32 дээр суурилсан вэб сервер ашиглан интернет хяналттай LED: 10 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:02

Төслийн тойм

Энэ жишээн дээр бид дэлхийн өнцөг булан бүрээс нэвтрэх боломжтой LED төлөвийг хянахын тулд ESP32 дээр суурилсан вэб сервер хэрхэн хийх талаар олж мэдэх болно. Энэ төсөлд танд Mac компьютер хэрэгтэй болно, гэхдээ та энэ програмыг Raspberry Pi гэх мэт хямд, бага чадалтай компьютер дээр ажиллуулж болно.

Arduino IDE ашиглан ESP32 -ийг бэлтгэх

ESP32-ийг Arduino IDE болон Arduino програмчлалын хэл ашиглан програмчилж эхлэхийн тулд танд тусгай нэмэлт хэрэгсэл хэрэгтэй болно. Mac OS дээр ESP32 -д зориулсан Arduino IDE -ийг хэрхэн бэлтгэх талаар дараах линкээс уншина уу.

Хангамж

Энэхүү гарын авлагад танд дараах зүйлс хэрэгтэй болно.

• ESP32 хөгжлийн самбар 5 мм
• LED эсэргүүцэл 220 ом
• I2C модуль бүхий 16x2 хэмжээтэй LCD дэлгэц
• Талхны самбар
• Холбогч утас
• Микро USB кабель

Алхам 1: Цахилгаан хэлхээг бий болгох

Дараахь бүдүүвч диаграммд үзүүлсэн шиг холболтыг гүйцэтгэнэ

ESP32 ба GNDto талбар дээрх 3V3 тэжээлийн хүчдэлийн гаралтыг холбож эхэлнэ үү. LED -ийг дижитал гаралтын зүү болгон GPIO pin 23 ашиглан ESP32 руу резистороор холбоно уу. Үүний дараа 16х2 хэмжээтэй LCD дэлгэцтэй SDA зүүг GPIO зүү 21, SCL -ийг GPIO зүү 22 -тэй холбоно уу.

Алхам 2: SPIFFS файлын системийн ерөнхий тойм

SPIFFS нь "Цуваа захын интерфэйс флаш файлын систем" гэсэн утгатай бөгөөд өөрөөр хэлбэл өгөгдлийг SPI -ээр дамжуулдаг флаш санах ойн файлын систем юм. Үүний дагуу SPIFFS нь SPI автобусаар өгөгдөл дамжуулдаг флэш чиптэй микроконтроллеруудад зориулагдсан хялбаршуулсан файлын систем юм (ESP32 флаш санах ой гэх мэт).

SPIFFS нь дараах тохиолдолд ESP32 -ийг ашиглахад хамгийн ашигтай байдаг.

• Тохиргоог хадгалах файл үүсгэх
• Мэдээллийн байнгын хадгалалт.
• Бага хэмжээний өгөгдөл хадгалах файл үүсгэх (үүнийг хийхийн тулд microSD карт ашиглахын оронд).
• Вэб сервер үүсгэхийн тулд HTML болон CSS файлуудыг хадгалах.

Алхам 3: SPIFFS Bootloader -ийг Mac OS дээр суулгах

Та Arduino IDE дээрх залгаасыг ашиглан ESP32 файлын системд хадгалагдсан файлд өгөгдөл үүсгэх, хадгалах, бичих боломжтой.

Юуны өмнө та Arduino IDE -ийн хамгийн сүүлийн хувилбарыг суулгасан эсэхээ шалгаад дараах зүйлийг хийнэ үү.

• Дараах линкийг нээгээд "ESP32FS-1.0.zip" архивыг татаж авна уу.
• Documents фолдер дээр байрладаг Arduino IDE лавлах руу очно уу.
• Хэрэв байхгүй бол хэрэгслийн хавтас үүсгэнэ үү. Хэрэгслийн лавлах дотор өөр ESP32FS фолдер үүсгэнэ үү. ESP32FS дотор хэрэгсэл гэж нэрлэгддэг өөр нэгийг үүсгэнэ.
• 1 -р алхамд татаж авсан ZIP архивыг хэрэгслийн хавтсанд задлаарай.
• Arduino IDE -г дахин эхлүүлнэ үү.
• Plug-in амжилттай суулгасан эсэхийг шалгахын тулд Arduino IDE-ийг нээгээд "Tools" дээр дарж энэ цэсэнд "ESP32 Sketch Data Upload" гэсэн зүйл байгаа эсэхийг шалгаарай.

Алхам 4: Номын сан суулгах

ESPAsyncWebServer болон AsyncTCP номын сан нь ESP32 файлын системийн файлуудыг ашиглан вэб сервер үүсгэх боломжийг олгодог. Эдгээр номын сангийн талаар дэлгэрэнгүй мэдээлэл авахыг хүсвэл доорх линкээс үзнэ үү.

ESPAsyncWebServer номын санг суулгана уу

• Номын сангийн ZIP архивыг энд дарж татаж авна уу.
• Энэ архивыг задлах. Та ESPAsyncWebServer-master фолдерыг авах ёстой.
• Үүнийг "ESPAsyncWebServer" гэж нэрлэнэ үү.

AsyncTCP номын санг суулгана уу

• Номын сангийн ZIP архивыг энд дарж татаж авна уу.
• Энэ архивыг задлах. Та AsyncTCP-мастер фолдерыг авах ёстой.
• Үүнийг "AsyncTCP" гэж нэрлэнэ үү.

ESPAsyncWebServer болон AsyncTCP фолдеруудыг Documents директор дотор байрлах номын сангийн хавтсанд шилжүүлээрэй.

Эцэст нь Arduino IDE -ийг дахин эхлүүлнэ үү.

Алхам 5: Дараах агуулгатай Index.html ба Style.css файл үүсгэнэ үү

HTML/CSS загварыг солих товчлуурыг дараах эх сурвалжаас авсан болно.

Алхам 6: Arduino код

Үндсэндээ код нь ESP32 вэб серверээс SPIFFS ашиглан авсан Arduino код болон Arduino IDE дээр ESP32 -тэй I2C LCD -ийг хэрхэн ашиглах талаар үндэслэсэн болно.

Алхам 7: SPIFFS Loader ашиглан Arduino код болон файлуудыг байршуулна уу

• Arduino кодын ноорог хавтасыг нээнэ үү.
• Энэ фолдер дотор "өгөгдөл" нэртэй шинэ хавтас үүсгэнэ үү.
• Өгөгдлийн фолдер дотор index.html болон style.css оруулах хэрэгтэй.
• Arduino кодыг байршуулах
• Дараа нь файлуудыг байршуулахын тулд Tools> ESP32 Sketch Data Upload дээр Arduino IDE дээр дарна уу

Алхам 8: ESP32 вэб серверийн IP хаягийг тодорхойлох

Үүнийг хоёр аргаар олж болно.

• Arduino IDE дээрх цуваа дэлгэц (Хэрэгсэл> Цуваа дэлгэц)
• LCD дэлгэц дээр

Алхам 9: Локал вэб серверийг турших

Дараа нь хүссэн вэб хөтөчөө нээгээд хаягийн мөрөнд дараах IP хаягийг оруулна уу. Та доорх дэлгэцийн зурагтай төстэй үр дүнг авах ёстой.

Алхам 10: Ngrok ашиглан дэлхийн хаана ч байсан локал вэб сервер рүү нэвтрэх

Ngrok бол гадны интернэтээс компьютер дээрээ ажилладаг вэб сервер эсвэл бусад үйлчилгээнд алсаас хандах хандалтыг зохион байгуулах боломжийг олгодог платформ юм. Хандалтыг ngrok -ийн эхэнд үүсгэсэн аюулгүй туннелээр зохион байгуулдаг.

• Энэ линкээр орж бүртгүүлнэ үү.
• Бүртгэл үүсгэсний дараа нэвтэрч "Auth" таб руу очно уу. "Таны туннель автоматаар хийсэн" талбараас мөрийг хуулж ав.
• Навигацийн самбар дээрх "Татаж авах" таб дээр дарна уу. Ngrok -ийн OS -тэй тохирох хувилбарыг сонгоод татаж аваарай.
• Татаж авсан фолдерыг задалж командын мөрийг ажиллуулна уу.
• Дараах тушаалыг оруулаад дансаа холбоно уу

./ngrok autokoken

80 -р порт дээр HTTP туннель эхлүүлнэ үү

./ngrok http Таны_IP_Хаяг: 80

Хэрэв бүх зүйл зөв хийгдсэн бол туннелийн төлөв "онлайн" болж өөрчлөгдөх ёстой бөгөөд "дамжуулах" баганад дахин чиглүүлэх холбоос гарч ирэх ёстой. Энэ холбоосыг хөтөчдөө оруулснаар та вэб серверт дэлхийн аль ч өнцгөөс хандах боломжтой болно.