Kinokontrol ng Internet na LED Gamit ang ESP32 Batay sa Web Server: 10 Mga Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:12

Pangkalahatang-ideya ng proyekto

Sa halimbawang ito, malalaman namin kung paano gumawa ng isang web32-based web server upang makontrol ang estado ng LED, na naa-access mula sa kahit saan sa mundo. Kakailanganin mo ang isang Mac computer para sa proyektong ito, ngunit maaari mong patakbuhin ang software na ito kahit sa isang mura at mababang-lakas na computer tulad ng Raspberry Pi.

Paghahanda ng ESP32 kasama ang Arduino IDE

Upang masimulan ang programa ng ESP32 gamit ang Arduino IDE at ang Arduino programming language, kakailanganin mo ng isang espesyal na add-on. Basahin ang tungkol sa kung paano ihanda ang Arduino IDE para sa ESP32 sa Mac OS sa pamamagitan ng sumusunod na link.

Mga gamit

Para sa tutorial na ito kakailanganin mo ang mga sumusunod na item:

• ESP32 development board5mm
• LEDResistor 220ohm
• 16x2 LCD display na may module na I2C
• Breadboard
• Jumper wires
• Micro USB cable

Hakbang 1: Pagbuo ng Circuit

Magsagawa ng mga koneksyon tulad ng ipinapakita sa sumusunod na diagram ng eskematiko sa ibaba

Magsimula sa pamamagitan ng pagkonekta ng output ng boltahe ng supply ng 3V3 sa pisara ng ESP32 at GNDto. Ikonekta ang LED sa pamamagitan ng risistor sa ESP32 gamit ang GPIO pin 23 bilang digital output pin. Pagkatapos nito, ikonekta ang SDA pin ng 16x2 LCD display sa GPIO pin 21 at SCL sa GPIO pin 22.

Hakbang 2: Mabilis na Pangkalahatang-ideya ng SPIFFS Filesystem

Ang SPIFFS ay nangangahulugang "Serial Peripheral Interface Flash File System", ie file system para sa flash memory na naglilipat ng data sa pamamagitan ng SPI. Alinsunod dito, ang SPIFFS ay isang pinasimple na file system na idinisenyo para sa mga microcontroller na may mga flash chip na nagpapadala ng data sa pamamagitan ng SPI bus (tulad ng memorya ng ESP32 flash).

Ang SPIFFS ay pinaka-kapaki-pakinabang para magamit sa ESP32 sa mga sumusunod na sitwasyon:

• Lumilikha ng mga file para sa pagtatago ng mga setting
• Permanenteng pag-iimbak ng data.
• Lumilikha ng mga file upang maiimbak ang isang maliit na halaga ng data (sa halip na gumamit ng isang microSD card para dito).
• Ang pag-iimbak ng mga file ng HTML at CSS para sa paglikha ng isang web server.

Hakbang 3: Pag-install ng SPIFFS Bootloader sa Mac OS

Maaari kang lumikha, makatipid at sumulat ng data sa mga file na nakaimbak sa system ng file na ESP32 nang direkta gamit ang plugin sa Arduino IDE.

Una sa lahat, tiyaking mayroon kang pinakabagong bersyon ng naka-install na Arduino IDE, at pagkatapos ay gawin ang sumusunod:

• Buksan ang sumusunod na link at i-download ang archive na "ESP32FS-1.0.zip"
• Pumunta sa direktoryo ng Arduino IDE, na matatagpuan sa folder ng Mga Dokumento.
• Lumikha ng isang folder ng mga tool, kung wala ito. Sa loob ng direktoryo ng mga tool lumikha ng isa pang folder na ESP32FS. Sa loob ng ESP32FS lumikha ng isa pa, na kung saan ay tinatawag na tool.
• I-unzip ang ZIP archive na nai-download sa hakbang 1 sa folder ng tool.
• I-restart ang iyong Arduino IDE.
• Upang suriin kung matagumpay na na-install ang plug-in, buksan ang Arduino IDE at mag-click sa "Mga Tool" at suriin kung mayroong isang item na "ESP32 Sketch Data Upload" sa menu na ito.

Hakbang 4: Pag-install ng Mga Aklatan

Pinapayagan ka ng mga aklatan ng ESPAsyncWebServer at AsyncTCP na lumikha ng isang web server na gumagamit ng mga file mula sa file system ng ESP32. Para sa karagdagang impormasyon tungkol sa mga libraryong ito, suriin ang sumusunod na link.

I-install ang ESPAsyncWebServer library

• Mag-click dito upang i-download ang ZIP archive ng library.
• I-unzip ang archive na ito. Dapat mong makuha ang folder na ESPAsyncWebServer-master.
• Palitan ang pangalan nito sa "ESPAsyncWebServer".

I-install ang AsyncTCP library

• Mag-click dito upang i-download ang ZIP archive ng library.
• I-unzip ang archive na ito. Dapat mong makuha ang folder ng AsyncTCP-master.
• Palitan ang pangalan nito sa "AsyncTCP".

Ilipat ang mga folder na ESPAsyncWebServer at AsyncTCP sa folder ng mga aklatan, na matatagpuan sa loob ng direktoryo ng Mga Dokumento.

Sa wakas, muling simulan ang Arduino IDE.

Hakbang 5: Lumikha ng isang File ng Index.html at Style.css Gamit ang Sumusunod na Nilalaman

Ang HTML / CSS Template para sa toggle button ay kinuha mula sa sumusunod na mapagkukunan.

Hakbang 6: Arduino Code

Pangunahin, ang code ay batay sa Arduino code na nakuha mula sa ESP32 Web Server gamit ang SPIFFS at Paano Gumamit ng I2C LCD sa ESP32 sa Arduino IDE.

Hakbang 7: I-upload ang Arduino Code at Mga File Gamit ang SPIFFS Loader

• Buksan ang folder ng sketch ng Arduino code.
• Sa loob ng folder na ito, lumikha ng isang bagong folder na tinatawag na "data".
• Sa loob ng folder ng data, kailangan mong ilagay ang index.html at style.css.
• Mag-upload ng Arduino code
• Pagkatapos, upang mai-upload ang mga file, mag-click sa Arduino IDE sa Tools> ESP32 Sketch Data Upload

Hakbang 8: Tukuyin ang ESP32 Web Server IP Address

Maaari itong matagpuan sa dalawang paraan.

• Serial monitor sa Arduino IDE (Mga Tool> Serial monitor)
• Sa LCD display

Hakbang 9: Pagsubok sa Local Web Server

Susunod, buksan ang isang web browser na iyong pinili at i-paste ang sumusunod na IP address sa address bar. Dapat kang makakuha ng isang output na katulad ng screenshot sa ibaba.

Hakbang 10: Pag-access sa isang Lokal na Web Server Mula Sa Kahit saan man sa Mundo Gamit ang Ngrok

Ang Ngrok ay isang platform na nagbibigay-daan sa iyo upang ayusin ang malayuang pag-access sa isang web server o ilang iba pang serbisyo na tumatakbo sa iyong PC mula sa panlabas na internet. Inaayos ang pag-access sa pamamagitan ng ligtas na lagusan na nilikha sa simula ng ngrok.

• Sundin ang link na ito at mag-sign up.
• Pagkatapos lumikha ng isang account, mag-log in at pumunta sa tab na "Auth". Kopyahin ang linya mula sa patlang na "Iyong Tunnel Authtoken".
• Mag-click sa tab na "I-download" sa bar ng nabigasyon. Piliin ang bersyon ng ngrok na tumutugma sa iyong OS at i-download ito.
• I-unzip ang na-download na folder at patakbuhin ang linya ng utos.
• Ikonekta ang iyong account sa pamamagitan ng pagpasok ng sumusunod na utos

./ngrok authtoken

Magsimula ng isang HTTP tunnel sa port 80

./ngrok http Iyong_IP_Address: 80

Kung nagawa ang lahat nang tama, pagkatapos ay dapat mabago ang katayuan ng tunnel sa "online", at dapat lumitaw ang isang link sa pag-redirect sa haligi na "Pagpasa." Sa pamamagitan ng pagpasok ng link na ito sa iyong browser, maaari mong ma-access ang web server mula sa kahit saan sa mundo.