Светодиод, управляемый через Интернет, с использованием веб-сервера на базе ESP32: 10 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:51

Обзор проекта

В этом примере мы выясним, как заставить веб-сервер на основе ESP32 управлять состоянием светодиода, доступным из любой точки мира. Для этого проекта вам понадобится компьютер Mac, но вы можете запустить это программное обеспечение даже на недорогом и маломощном компьютере, таком как Raspberry Pi.

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

Чтобы начать программировать ESP32 с использованием Arduino IDE и языка программирования Arduino, вам понадобится специальное дополнение. О том, как подготовить Arduino IDE для ESP32 в Mac OS, читайте по следующей ссылке.

Запасы

Для этого урока вам понадобятся следующие предметы:

• Плата разработки ESP32 5 мм
• Светодиод Резистор 220 Ом
• ЖК-дисплей 16x2 с модулем I2C
• Макетная плата
• Провода перемычки
• Кабель Micro USB

Шаг 1: построение схемы

Выполните подключения, как показано на следующей принципиальной схеме

Начните с подключения выхода напряжения питания 3V3 на ESP32 и GND к макетной плате. Подключите светодиод через резистор к ESP32, используя вывод 23 GPIO в качестве вывода цифрового выхода. После этого подключите вывод SDA ЖК-дисплея 16x2 к контакту 21 GPIO, а SCL - к контакту 22 GPIO.

Шаг 2: Краткий обзор файловой системы SPIFFS

SPIFFS расшифровывается как «Flash File System с последовательным периферийным интерфейсом», то есть файловая система для флэш-памяти, которая передает данные через SPI. Соответственно, SPIFFS - это упрощенная файловая система, разработанная для микроконтроллеров с флеш-чипами, которые передают данные через шину SPI (например, флеш-память ESP32).

SPIFFS наиболее полезен для использования с ESP32 в следующих ситуациях:

• Создание файлов для хранения настроек
• Постоянное хранение данных.
• Создание файлов для хранения небольшого количества данных (вместо использования для этого карты microSD).
• Хранение файлов HTML и CSS для создания веб-сервера.

Шаг 3: Установка загрузчика SPIFFS в Mac OS

Вы можете создавать, сохранять и записывать данные в файлы, хранящиеся в файловой системе ESP32, напрямую с помощью плагина в Arduino IDE.

Прежде всего, убедитесь, что у вас установлена последняя версия IDE Arduino, а затем выполните следующие действия:

• Перейдите по следующей ссылке и скачайте архив «ESP32FS-1.0.zip»
• Перейдите в каталог Arduino IDE, который находится в папке Documents.
• Создайте папку инструментов, если она не существует. Внутри каталога инструментов создайте еще одну папку ESP32FS. Внутри ESP32FS создайте еще один, который называется tool.
• Разархивируйте ZIP-архив, загруженный на шаге 1, в папку с инструментами.
• Перезагрузите вашу Arduino IDE.
• Чтобы проверить, успешно ли был установлен плагин, откройте IDE Arduino, нажмите «Инструменты» и проверьте, есть ли в этом меню пункт «Загрузка данных эскиза ESP32».

Шаг 4: Установка библиотек

Библиотеки ESPAsyncWebServer и AsyncTCP позволяют создавать веб-сервер, используя файлы из файловой системы ESP32. Для получения дополнительной информации об этих библиотеках перейдите по следующей ссылке.

Установите библиотеку ESPAsyncWebServer

• Щелкните здесь, чтобы загрузить ZIP-архив библиотеки.
• Разархивируйте этот архив. У вас должна получиться папка ESPAsyncWebServer-master.
• Переименуйте его в «ESPAsyncWebServer».

Установите библиотеку AsyncTCP

• Щелкните здесь, чтобы загрузить ZIP-архив библиотеки.
• Разархивируйте этот архив. У вас должна получиться папка AsyncTCP-master.
• Переименуйте его в «AsyncTCP».

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

Наконец, перезапустите IDE Arduino.

Шаг 5. Создайте файл Index.html и Style.css со следующим содержимым

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

Шаг 6: код Arduino

В основном код был основан на коде Arduino, который был взят с веб-сервера ESP32 с использованием SPIFFS и Как использовать ЖК-дисплей I2C с ESP32 в среде Arduino IDE.

Шаг 7. Загрузите код и файлы Arduino с помощью загрузчика SPIFFS

• Откройте папку скетчей кода Arduino.
• Внутри этой папки создайте новую папку под названием «данные».
• Внутри папки данных нужно поместить файлы index.html и style.css.
• Загрузите код Arduino
• Затем, чтобы загрузить файлы, щелкните IDE Arduino в меню Инструменты> Загрузка данных эскиза ESP32.

Шаг 8: Определите IP-адрес веб-сервера ESP32

Его можно найти двумя способами.

• Последовательный монитор в Arduino IDE (Инструменты> Последовательный монитор)
• На ЖК-дисплее

Шаг 9: Тестирование локального веб-сервера

Затем откройте любой веб-браузер и вставьте следующий IP-адрес в адресную строку. Вы должны получить результат, аналогичный приведенному ниже снимку экрана.

Шаг 10: доступ к локальному веб-серверу из любой точки мира с помощью Ngrok

Ngrok - это платформа, которая позволяет организовать удаленный доступ к веб-серверу или какой-либо другой службе, работающей на вашем компьютере, из внешнего Интернета. Доступ организован через защищенный туннель, созданный при запуске ngrok.

• Перейдите по этой ссылке и зарегистрируйтесь.
• После создания учетной записи войдите в систему и перейдите на вкладку «Auth». Скопируйте строку из поля «Your Tunnel Authtoken».
• Щелкните вкладку «Загрузить» на панели навигации. Выберите версию ngrok, соответствующую вашей ОС, и загрузите ее.
• Разархивируйте загруженную папку и запустите командную строку.
• Подключите свою учетную запись, введя следующую команду

./ngrok authtoken

Запустить HTTP-туннель на порт 80

./ngrok http Ваш_IP_Address: 80

Если все было сделано правильно, то статус туннеля должен измениться на «онлайн», а в столбце «Пересылка» должна появиться ссылка для перенаправления. Введя эту ссылку в свой браузер, вы можете получить доступ к веб-серверу из любой точки мира.