Создание веб-интерфейса для ESP32

Я работаю над проектом, который включает перемещение различных сервоприводов и освещения, и мне нужен хороший пользовательский интерфейс для работы с устройством. Ранее я использовал Blynk, который работал очень хорошо, но мне не нравились некоторые его ограничения. Мой текущий код работает с Blynk, и я хотел бы изменить его на веб-сервер, чтобы он мог работать на любом устройстве без приложения или подключения к интернету.

Сейчас мой esp настраивается как точка доступа, и я могу перейти по его IP-адресу, чтобы получить свой файл "hello world", но после этого я застрял. Что действительно ставит меня в тупик, так это получение ввода из интерфейса, который я делаю в HTML, я мог бы довольно легко сделать расположение кнопок, ползунков и полей, которое соответствует моим потребностям, но как мне получить их значение в качестве переменной в моем коде arduino?

Я видел несколько примеров кода, которые очень просты: по сути, пара кнопок перенаправляют на разные веб-страницы на сервере, и для назначения переменной требуются эти команды, но это кажется неверным. Есть ли лучший способ или как мне заставить это работать со сложным интерфейсом со множеством кнопок и переключателей?

Я слышал о Jquery и Ajax, но не знаю, как заставить это работать с кодом Arduino.

, 👍1

Обсуждение

Вы пробовали гуглить "ESP32 web server library"? Вам нужно реализовать веб-сервер, который предоставит вам доступ к этим элементам управления., @esoterik


2 ответа

0

Я мог бы довольно легко создать расположение кнопок, ползунков и полей, которое соответствует моим потребностям, но как мне получить их значение в качестве переменной в моем коде Arduino?

Точно так же, как веб-сервер! Вам нужно реализовать веб-сервер на ESP32. Вы будете обслуживать страницу с элементами управления, а затем эта страница должна сделать запрос обратно на сервер, который затем обработает его и сделает то, что вы запрограммируете.

Есть два способа сделать это:

  • Используйте форму get/post; отправьте все данные сразу
  • Что-то вроде ajax; каждый элемент управления отправляет данные асинхронно
,
1

Я бы настоятельно рекомендовал разделить его на две части: бэк-энд (C++) и фронт-энд (JS). Вероятно, вы захотите подключиться к маршрутизатору, чтобы ваши клиенты, такие как телефон и ноутбук, не были в этой точке доступа без интернета.

Сначала вы создаете API с помощью arduino, используя параметры GET для управления, например, значениями пинов int level = server.arg("level").toInt(); analogWrite(2, level); или что-то еще, что вам нужно сделать. Поместите это в функцию с именем handlePin и подпишите ее в setup(): server.on("/pin", handlePin);. Затем просто добавьте CORS к ответу сервера: server.sendHeader("Access-Control-Allow-Origin","*"); и теперь вы можете зайти на него с любого компьютера в сети. Чтобы проверить, просто введите его URL и некоторые параметры в адресную строку браузера; http://192.168.2.123/pin?level=512, чтобы затемнить на полпути.

После того, как URL-адреса заработают, интерфейсная часть будет создана полностью отдельно с использованием любых инструментов, которые вы захотите. Все, что вам нужно сделать, это заставить ваш пользовательский интерфейс обращаться к API с помощью простых вызовов ajax. Вот быстрый и грязный пример: Уровень:<input type=range id=val max=1024> <br> <button onclick="fetch('http://192.168.2.123/pin?level='+val.value)">update</button>

Вот как это делают профессионалы, вы просто меняете C++ на PHP или C# или что-то еще, и используете любую UI-инфраструктуру, которую хотите. Как только у вас будет готов исходный код вашего клиентского приложения, вы можете загрузить его в SPIFFS ESP, но я считаю, что проще размещать и обновлять всю систему на «реальном» сервере.

Если вы не хотите писать код пользовательского интерфейса самостоятельно, вы можете использовать node-red, чтобы сделать быструю и грязную «панель управления», как HTML, но с функцией перетаскивания (более или менее). Вы по-прежнему используете тот же API на ESP, и вы можете использовать более одной системы одновременно; все, что волнует ESP, — это попадание на правильный URL.

,
Смотрите также: