ESP32 asosidagi veb -server yordamida Internet boshqariladigan LED: 10 qadam

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:25

Loyihaning umumiy ko'rinishi

Bu misolda biz dunyoning istalgan nuqtasidan kirish mumkin bo'lgan LED holatini boshqarish uchun ESP32-ga asoslangan veb-serverni qanday yaratishni bilib olamiz. Bu loyiha uchun sizga Mac kompyuteri kerak bo'ladi, lekin siz bu dasturni hatto Raspberry Pi kabi arzon va kam quvvatli kompyuterda ham ishga tushirishingiz mumkin.

Arduino IDE bilan ESP32 ni tayyorlash

ESP32-ni Arduino IDE va Arduino dasturlash tili yordamida dasturlashni boshlash uchun sizga maxsus plagin kerak bo'ladi. Quyidagi havola orqali Mac OS -da ESP32 uchun Arduino IDE -ni qanday tayyorlash haqida o'qing.

Ta'minotlar

Bu darslik uchun sizga quyidagi narsalar kerak bo'ladi:

• ESP32 ishlab chiqish paneli 5 mm
• LED rezistor 220 ohm
• I2C modulli 16x2 LCD displey
• Non paneli
• Jumper simlari
• Mikro USB kabeli

1 -qadam: O'chirish tizimini yaratish

Quyidagi sxematik diagrammada ko'rsatilgan ulanishlarni bajaring

ESP32 va GNDto taxtasida 3V3 kuchlanish kuchlanishini ulashdan boshlang. LEDni rezistor orqali ESP32 ga GPIO pin 23 yordamida raqamli chiqish pimi sifatida ulang. Shundan so'ng, 16x2 LCD displeyli SDA pinini GPIO pin 21 ga va SCL ni GPIO pin 22 ga ulang.

2 -qadam: SPIFFS fayl tizimining umumiy ko'rinishi

SPIFFS "ketma -ket tashqi interfeysli flesh -fayl tizimi" degan ma'noni anglatadi, ya'ni SPI orqali ma'lumotlarni uzatadigan flesh -xotira uchun fayl tizimi. Shunga ko'ra, SPIFFS - bu SPI avtobusi orqali ma'lumotlarni uzatuvchi flesh -chipli mikrokontrollerlar uchun mo'ljallangan soddalashtirilgan fayl tizimi (masalan, ESP32 flesh xotira).

SPIFFS quyidagi holatlarda ESP32 bilan ishlashda eng foydali hisoblanadi:

• Sozlamalarni saqlash uchun fayllar yaratish
• Ma'lumotlarni doimiy saqlash.
• Kichik hajmdagi ma'lumotlarni saqlash uchun fayllar yaratish (buning uchun microSD kartasidan foydalanish o'rniga).
• Veb -server yaratish uchun HTML va CSS fayllarini saqlash.

3 -qadam: SPIFFS yuklash vositasini Mac OS -ga o'rnatish

Siz to'g'ridan -to'g'ri Arduino IDE plagini yordamida ESP32 fayl tizimida saqlangan fayllarga ma'lumotlarni yaratishingiz, saqlashingiz va yozishingiz mumkin.

Birinchidan, Arduino IDE -ning so'nggi versiyasi o'rnatilganligiga ishonch hosil qiling va keyin quyidagilarni bajaring:

• Quyidagi havolani oching va "ESP32FS-1.0.zip" arxivini yuklab oling
• Hujjatlar papkasida joylashgan Arduino IDE katalogiga o'ting.
• Agar asboblar papkasi bo'lmasa, uni yarating. Asboblar katalogi ichida boshqa ESP32FS papkasini yarating. ESP32FS ichida asbob deb ataladigan boshqasini yarating.
• 1 -qadamda yuklangan ZIP arxivini asboblar papkasida oching.
• Arduino IDE -ni qayta ishga tushiring.
• Plagin muvaffaqiyatli o'rnatilganligini tekshirish uchun Arduino IDE-ni oching va "Asboblar" ni bosing va ushbu menyuda "ESP32 eskiz ma'lumotlarini yuklash" bandi borligini tekshiring.

4 -qadam: kutubxonalarni o'rnatish

ESPAsyncWebServer va AsyncTCP kutubxonalari ESP32 fayl tizimidagi fayllar yordamida veb -server yaratishga imkon beradi. Ushbu kutubxonalar haqida qo'shimcha ma'lumot olish uchun quyidagi havolani tekshiring.

ESPAsyncWebServer kutubxonasini o'rnating

• Kutubxonaning ZIP arxivini yuklab olish uchun shu erni bosing.
• Bu arxivni oching. Siz ESPAsyncWebServer-master papkasini olishingiz kerak.
• Uni "ESPAsyncWebServer" deb o'zgartiring.

AsyncTCP kutubxonasini o'rnating

• Kutubxonaning ZIP arxivini yuklab olish uchun shu erni bosing.
• Bu arxivni oching. AsyncTCP-master papkasini olishingiz kerak.
• Uni "AsyncTCP" deb o'zgartiring.

ESPAsyncWebServer va AsyncTCP papkalarini Hujjatlar katalogida joylashgan kutubxonalar jildiga o'tkazing.

Nihoyat, Arduino IDE -ni qayta ishga tushiring.

5 -qadam: Quyidagi tarkib bilan Index.html va Style.css faylini yarating

HTML/CSS shablonini almashtirish tugmasi quyidagi manbadan olingan.

6 -qadam: Arduino kodi

Asosan, kod SPIFFS yordamida ESP32 veb -serveridan olingan Arduino kodiga va Arduino IDE -da ESP32 bilan I2C LCD -dan qanday foydalanishga asoslangan.

7 -qadam: Arduino kodini va fayllarini SPIFFS yuklagich yordamida yuklang

• Arduino kodining eskiz papkasini oching.
• Ushbu papkada "ma'lumotlar" deb nomlangan yangi papka yarating.
• Ma'lumotlar papkasida index.html va style.css ni qo'yish kerak.
• Arduino kodini yuklang
• Keyin, fayllarni yuklash uchun Arduino IDE ni bosing Asboblar> ESP32 eskiz ma'lumotlarini yuklash

8 -qadam: ESP32 veb -serverining IP -manzilini aniqlang

Buni ikki xil usulda topish mumkin.

• Arduino IDE -da ketma -ket monitor (Asboblar> Serial monitor)
• LCD displeyda

9 -qadam: Mahalliy veb -serverni sinab ko'rish

Keyin, o'zingiz xohlagan veb -brauzerni oching va quyidagi IP -manzilni manzil satriga joylashtiring. Quyidagi skrinshotga o'xshash natijani olishingiz kerak.

10 -qadam: Ngrok yordamida dunyoning istalgan joyidan mahalliy veb -serverga kirish

Ngrok - bu tashqi Internetdan kompyuterda ishlaydigan veb -serverga yoki boshqa xizmatlarga masofadan kirishni tashkil qilish imkonini beradigan platforma. Kirish ngrok boshida yaratilgan xavfsiz tunnel orqali tashkil etiladi.

• Ushbu havolaga o'ting va ro'yxatdan o'ting.
• Hisob qaydnomasini yaratgandan so'ng, tizimga kiring va "Auth" yorlig'iga o'ting. "Sizning tunnelingiz avtokoken" maydonidan chiziqni nusxalash.
• Navigatsiya panelidagi "Yuklab olish" yorlig'ini bosing, OS -ga mos keladigan ngrok versiyasini tanlang va uni yuklab oling.
• Yuklab olingan papkani oching va buyruq satrini ishga tushiring.
• Quyidagi buyruqni kiritish orqali hisobingizni ulang

./ngrok avtomatik

80 -portda HTTP tunnelini ishga tushiring

./ngrok http Sizning_IP_ manzilingiz: 80

Agar hamma narsa to'g'ri bajarilgan bo'lsa, tunnel holati "onlayn" ga o'zgarishi va "yo'naltirish" ustunida yo'naltirish havolasi paydo bo'lishi kerak. Ushbu havolani brauzeringizga kiritib, siz dunyoning istalgan joyidan veb -serverga kirishingiz mumkin.