Интернет контролиран светодиод, използващ уеб сървър, базиран на ESP32: 10 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:52

Резюме на Проекта

В този пример ще разберем как да направим базиран на ESP32 уеб сървър за управление на състоянието на LED, което е достъпно от всяка точка на света. За този проект ще ви е необходим компютър с Mac, но можете да стартирате този софтуер дори на евтин компютър с ниска мощност като Raspberry Pi.

Подготовка на ESP32 с Arduino IDE

За да започнете да програмирате ESP32 с помощта на Arduino IDE и езика за програмиране Arduino, ще ви е необходима специална добавка. Прочетете как да подготвите Arduino IDE за ESP32 на Mac OS от следната връзка.

Консумативи

За този урок ще ви трябват следните елементи:

• ESP32 дъска за разработка 5 мм
• LED резистор 220ohm
• 16x2 LCD дисплей с I2C модул
• Платка
• Кабелни проводници
• Микро USB кабел

Стъпка 1: Изграждане на веригата

Извършете връзки, както е показано на следната схематична диаграма по -долу

Започнете, като свържете изходно захранващо напрежение 3V3 към платката ESP32 и GND. Свържете светодиода чрез резистор към ESP32, като използвате GPIO извод 23 като изход за цифров изход. След това свържете SDA щифт от 16x2 LCD дисплей към GPIO пин 21 и SCL към GPIO пин 22.

Стъпка 2: Бърз преглед на файловата система SPIFFS

SPIFFS означава „Файлова система за сериен периферен интерфейс Flash“, т.е. файлова система за флаш памет, която прехвърля данни чрез SPI. Съответно, SPIFFS е опростена файлова система, предназначена за микроконтролери с флаш чипове, които предават данни чрез SPI шина (като флаш памет ESP32).

SPIFFS е най -полезен за използване с ESP32 в следните ситуации:

• Създаване на файлове за съхраняване на настройки
• Постоянно съхранение на данни.
• Създаване на файлове за съхраняване на малко количество данни (вместо да се използва microSD карта за това).
• Съхранение на HTML и CSS файлове за създаване на уеб сървър.

Стъпка 3: Инсталиране на SPIFFS Bootloader на Mac OS

Можете да създавате, запазвате и записвате данни във файлове, съхранявани във файловата система ESP32 директно с помощта на плъгин в Arduino IDE.

На първо място, уверете се, че имате инсталирана най -новата версия на Arduino IDE и след това направете следното:

• Отворете следната връзка и изтеглете архива „ESP32FS-1.0.zip“
• Отидете в директорията на IDE на Arduino, която се намира в папката Documents.
• Създайте папка с инструменти, ако тя не съществува. В директорията с инструменти създайте друга папка ESP32FS. Вътре в ESP32FS създайте друг, който се нарича инструмент.
• Разархивирайте ZIP архива, изтеглен в стъпка 1, в папката с инструменти.
• Рестартирайте вашата Arduino IDE.
• За да проверите дали приставката е инсталирана успешно, отворете Arduino IDE и кликнете върху „Инструменти“и проверете дали в това меню има елемент „ESP32 Sketch Data Upload“.

Стъпка 4: Инсталиране на библиотеки

Библиотеките на ESPAsyncWebServer и AsyncTCP ви позволяват да създавате уеб сървър, използвайки файлове от файловата система на ESP32. За повече информация относно тези библиотеки проверете следната връзка.

Инсталирайте библиотеката ESPAsyncWebServer

• Щракнете тук, за да изтеглите ZIP архива на библиотеката.
• Разархивирайте този архив. Трябва да получите папката ESPAsyncWebServer-master.
• Преименувайте го на „ESPAsyncWebServer“.

Инсталирайте библиотеката AsyncTCP

• Щракнете тук, за да изтеглите ZIP архива на библиотеката.
• Разархивирайте този архив. Трябва да получите папката AsyncTCP-master.
• Преименувайте го на „AsyncTCP“.

Преместете папките ESPAsyncWebServer и AsyncTCP в папката библиотеки, която се намира в директорията Документи.

Накрая рестартирайте Arduino IDE.

Стъпка 5: Създайте файл Index.html и Style.css със следното съдържание

HTML/CSS шаблон за бутон за превключване е взет от следния източник.

Стъпка 6: Arduino код

Основно кодът се основаваше на кода на Arduino, който е взет от уеб сървъра на ESP32 с помощта на SPIFFS и как да се използва I2C LCD с ESP32 на Arduino IDE.

Стъпка 7: Качете кода и файловете на Arduino с помощта на SPIFFS Loader

• Отворете папката за скициране на кода на Arduino.
• В тази папка създайте нова папка, наречена „данни“.
• Вътре в папката с данни трябва да поставите index.html и style.css.
• Качете Arduino код
• След това, за да качите файловете, щракнете върху Arduino IDE в Инструменти> ESP32 Sketch Data Upload

Стъпка 8: Определете IP адреса на уеб сървъра на ESP32

Може да се намери по два начина.

• Сериен монитор на Arduino IDE (Инструменти> Сериен монитор)
• На LCD дисплей

Стъпка 9: Тестване на локалния уеб сървър

След това отворете уеб браузър по ваш избор и поставете следния IP адрес в адресната лента. Трябва да получите изход, подобен на екранната снимка по -долу.

Стъпка 10: Достъп до локален уеб сървър от всяка точка на света с помощта на Ngrok

Ngrok е платформа, която ви позволява да организирате отдалечен достъп до уеб сървър или друга услуга, работеща на вашия компютър от външния интернет. Достъпът е организиран през защитения тунел, създаден в началото на ngrok.

• Следвайте тази връзка и се регистрирайте.
• След като създадете акаунт, влезте и отидете в раздела „Удостоверяване“. Копирайте реда от полето „Вашият тунел за удостоверяване“.
• Кликнете върху раздела „Изтегляне“в лентата за навигация. Изберете версията на ngrok, която отговаря на вашата операционна система, и я изтеглете.
• Разархивирайте изтеглената папка и стартирайте командния ред.
• Свържете акаунта си, като въведете следната команда

./ngrok автентичен

Стартирайте HTTP тунел на порт 80

./ngrok http Your_IP_Address: 80

Ако всичко е направено правилно, тогава състоянието на тунела трябва да се промени на „онлайн“, а връзката за пренасочване трябва да се появи в колоната „Препращане“. Като въведете тази връзка в браузъра си, можете да получите достъп до уеб сървъра от всяка точка на света.