Что такое управление устройством через WEB интерфейс? При подключении устройства к локальной сети оно ловит IP адрес. Дальше мы берем любое другое устройство в этой же сети (смартфон, планшет, ноутбук, ПК). Эта статья продолжение истории про сборку самодельного интернет-радиоприемника. С электрической схемой и компонентами можно ознакомиться по этой ссылке
Далее мы берем смартфон, открываем браузер и получаем web страничку с элементами управления и списком радиостанций.
Тот же самый фокус можно проделать и с домашнего ПК
Технология WEB сервера очень удобная - в пульт управления можно превратить все, что угодно (лишь бы оно было в домашней сети и у него был браузер)
Демонстрацию работы смотрите в этом видеоролике:
Как это работает?
Когда в адресную строку WEB браузера вбивается IP адрес плата ESP32 обрабатывает этот запрос и отдает три файла:
- html - который содержит текущее состояние кнопок (например ползунок громкости ставится в положение в которое было настроено на WEB радио с помощью регулятора громкости
- ccs - файл стилей, который придает элементам управления красивый вид
- js - файл javascript с помощью которого обрабатываются события при нажатии на кнопки (например при нажатии на кнопку Включить радио на плату esp32 отправляется запрос "GET","ONOFF" и меняется цвет кнопки с серого на синий)
Использование javascript позволяет не перегружать страницу - например громкость регулируется в режиме онлайн (тащим ползунок в WEB интерфейсе - видим перемещение ползунка на экране и сразу слышим изменение громкости)
Исходный код проекта открыт и доступен вот по этой ссылке.
Если вы надумаете повторить данный проект самостоятельно, перенесите из данного архива папки с файлами в папку \Arduino\libraries (находится в папке мои документы).
Библиотека для работы с дисплеем в данном архиве уже русифицирована - дополнительных действий выполнять не нужно!
Также вы можете ознакомиться с полным списком статей моего канала
Всем удачи!