ESPUI - веб-интерфейс из блоков для ESP8266, ESP32

[User8]

ESPUI - веб-интерфейс(dashboard) без необходимости изучения различных языков для создания web-страниц, сам моментально обновляется при изменение значений, без перезагрузки страницы.

Описание блоков:
Main: должен присутствовать в проекте всегда, в параметрах Main блока можно включить авторизацию и задать заголовок веб-интерфейса;
Tab - вкладка: размещается над блоками которым нужно попасть в эту вкладку, укажите нужный tabId в настройках, так же укажите этот же tabId у блоков которые должны быть в этой вкладке;
Slider: в настройках можно указать минимальное и максимальное значение для слайдера;
Switcher: переключатель, выход Status показывает актуальное состояние переключателя. При подаче единицы на вход UpdateValue, в веб-интерфейсе значение изменится, на то, что указанно на входе Value;
Label: вывод любого текста в web-интерфейс, при подаче единицы на вход UpdateText, строка будет обновлена в вебинтерфейсе на ту, что указана на входе Text. Если нужно перевести текст на следующую строку, используйте в строке тег <br> там где нужно перенести текст;
InputText: можно вводить любой текст в вебинтерфейсе, этот текст появится на выходе Text;
InputNumber: тоже самое что и блок InputText, только для ввода чисел.
Button: при нажатии будет единица на выходе Status;
Pad: колесо управления;
PadWithCenter: колесо управление с центральной кнопкой;

Расположение блоков в web-интерфейсе будет такое же, как вы расположите их в flprog.

Доступные цвета для блоков:
COLOR_TURQUOISE
COLOR_EMERALD
COLOR_PETERRIVER
COLOR_WETASPHALT
COLOR_SUNFLOWER
COLOR_CARROT
COLOR_ALIZARIN
COLOR_NONE

Пример проекта для демонстрации функционала:

ESPUI_test2.flp

(4.91 МБ) 3261 скачивание

Видео по использованию интерфейса в flprog:
https://youtu.be/i9-Gy7GuEIw
https://youtu.be/MDqO-L7NTDc
https://youtu.be/ElC8SVVFqn8
https://youtu.be/5LGsO7_Z6f8
https://youtu.be/-VA8BcGTkq8

Если у вас не компилируется проект удалите из FLProg\ideV5\portable\sketchbook\libraries папки ESPUI и ArduinoOTA, если не поможет попробуйте установить библиотеки вручную, разархивируйте архив в папку: flprog\ideV5\libraries\

espui_libraries_v1.2.zip

(1.46 МБ) 2138 скачиваний

Данный веб-интерфейс не будет работать вместе с встроенным в flprog, если только на разных портах.
Не забудьте включить wifi клиент в настройках контроллера и указать данные вашей wifi сети.

Новая/Альтернативная версия блоков: viewtopic.php?f=71&t=7414

Main блок с внешними входами авторизации: viewtopic.php?p=83619#p83619
Остальные блоки: viewtopic.php?p=74571#p74571

[aidar_i]

Баги:
1)В примере сброс настроек Wifi не работает. Может я не особо понял как он работает, потому сделал по своему. Приложение в конце.
2)После первой конфигурации wifi через captiveportal esp подключается к сети, но не поднимает ESPUI. После следующего reset уже и ESPUI работает. Может можно куда-то прописать внеочередной reset после сохранения настроек или handle для espui?

1) В последнем блоке WiFiManager пока не будут работать сброс настроек и установка своих адресов. Ваш вариант сброса настроек Wifi тоже интересен.
2) Должен работать, проверю. Как только вписываете и сохраняете свои имя сети и пароль точка доступа сама отключается (нужно немного подождать) и есп подключается к сети (Вай фай компа должна быть настроена на автоматическое подключение). Об этом сигнализирует штатный светодиод есп (горит постоянно).

если подключившись к точке доступа попытаться ввести ее ip-адрес в браузере, то перейти на страницу настройки у меня не вышло.

Точку доступа не нужно вводить, браузер откроется автоматически.
Вы пробовали с последним примером отсюда?

[SanSanICH]

aidar_i, прошил примером viewtopic.php?p=85074#p85074 от Iqubik, автоматически появляется окно с настройкой, это правда. Тут вопросов нет, все отлично.

Дело стечения обстоятельств: я настраиваю сеть на Wemos-e через смартфон, и в правой нижней четверти экрана с боку у меня не работает тачскрин и ввести некоторые буквы пароля не получается.
Окно настройки, появляющееся автоматически, не переворачивается в горизонтальную ориентацию, поэтому приходится заходить через хром или мозиллу, вводить айпи адрес точки доступа, к которой подключен телефон, переворачивать экран и вводить пароль. Такая вот запутанная история.

Но это к основной работе блока не имеет отношения, и именно потому, что это, вроде как, прихоть такая с моей стороны, что бы можно было заходить в настройки через другой браузер, я и написал что это просто наблюдение и ни в коем случае не претензия или что-то подобное.

[Iqubik]

Текущая реализация работает но не идеальна. Думаю что wm после получения данных от пользователя и коннекта в режиме клиента просто тушит webserver потому и espui при первом старте не поднимается. Конечно внеочередной резет решает проблему и делает решение костыльно рабочим, но хочется всё таки чтобы после коннекта не нужно было физически искать reset. Буду копать ещё, но пока мне не хватает знаний на это и только неэффективный метод научного тыка с элементами разума

[aidar_i]

Это проблема дб в ESPUI , с WFM другие программы работали правильно. Хотелось бы посмотреть исходники по которым делались ПБ ESPUI.

[o615ye161]

Почему при включённом клиенте при запуске ESPUI страница чаще не загружается и связь с ESP отваливается, в чем может быть проблема

[Sirius]

Добрый день, можно реализовать в один из блоков ESPUI обновление прошивки с бинарника прям как на роутерах прошивка, просто OTA работает не всегда, ещё попробовал именно main 1.2 жалуется на size там где параметр обновления без все good с ними нет. Пожалуйста добавьте один блок для обновы очень нужен спасибо за ваши труды ESPUI открывает новые возможности

[Phazz]

Может это подойдёт?
viewtopic.php?t=5429

[Iqubik]

Довольно сложно было установить все нужные модули питона чтобы скрипт обновления ресурсов /tools/rebuild.py (css,js,html) отрабатывал сжатие, но получилось. В итоге слегка поправил положения и позиции блоков. Приложил уже исправленный /data. Cкриншоты, чтобы было понятно какие такие правки и зачем так же под спойлером.

СпойлерПоказать

data.zip

(38.73 КБ) 73 скачивания

UPD. Добавлен скрин результатов изменения css

[User8]

Sirius, нужно удалить старые библиотеки и установить, что в первом посте, тогда не будет жаловаться на size при компиляции.

[Sirius]

Sirius, нужно удалить старые библиотеки и установить, что в первом посте, тогда не будет жаловаться на size при компиляции.

удалял, ставил с архива тоже самое

Отправлено спустя 2 минуты 56 секунд:

Может это подойдёт?
viewtopic.php?t=5429

Спасибо, я вчера это нашёл и попробовал вместе с веб интерфейсом ESPUI не компилируется

[aidar_i]

Перезалил пример с измененным ПБ WiFiManager. В параметрах блока можно выбрать адреса точки доступа и клиента. Сброс настроек делайте как предложил здесь:

В примере сброс настроек Wifi не работает. Может я не особо понял как он работает, потому сделал по своему. Приложение в конце.

[fsergei70]

User8, Судя по описанию на GitHube https://github.com/s00500/ESPUI
ESPUI можно строить графики, как добавить эту возможность в Flprog ?

[User8]

fsergei70, viewtopic.php?p=84353#p84353

[Iqubik]

В сообщении viewtopic.php?p=85074#p85074 был дан пример совместной работы ESPUI WIFIMANAGER и OTA, но

Текущая реализация работает но не идеальна. Есть баг.

Сразу после настройки точки доступа espUI не поднимается и нужен ещё один принудительный резёт для его корректной работы. Поковырял и нашёл как костыльно поправить такое подлое поведение.

СпойлерПоказать

ideV4\libraries\WiFiManager\WiFiManager.cpp 253 строка добавить:
DEBUG_WM(F("Manual restart to espUI work"));
ESP.restart();

WiFiManager.cpp

(22.44 КБ) 77 скачиваний

P.S Комрады, а насколько вообще корректно править библиотеки? Я как то думал, что править их следует как бы переопределяя функциями из кода скетча, но как это делается? Как же править либы без внесения правок непосредственно в либы?

Отправлено спустя 11 часов 12 минут 27 секунд:

User8, Судя по описанию на GitHube https://github.com/s00500/ESPUI
ESPUI можно строить графики, как добавить эту возможность в Flprog ?

Я бы тоже проголосовал за добавление графиков. И на гитхабе написано что они умеют сохранять значения, eeprom или локальное хранище браузера.

[Pratak]

У меня что то не заводится WIFIManager
Пробовал примеры из этих постов: viewtopic.php?p=84763#p84763 и viewtopic.php?p=84681#p84681
Бибки тоже менял, компилируется без ошибок. К точке подключается но страница не открывается. Заливаю пример с обычными блоками из первого поста, все работает.
FLProg 6.3.1, доска Nodemcu v3.

[aidar_i]

Попробуйте удалить из настроек wifi компа сохранённую ранее ТД есп8266. И при прошивке в плате Arduino ide ставьте,: скетч+ настройки wifi.

[Pratak]

Попробуйте удалить из настроек wifi компа сохранённую ранее ТД есп8266

Сори, а ТД это что?

[Webq]

Pratak, 9
Точка Доступа

[aidar_i]

Точка доступа.

[Pratak]

доступа

Да, тупанул)
Короче долго мучился, все завелось только на чистой портативной версии. Видимо проблема на моей стороне.
Я так понимаю что точка доступа активна только если нет подключения клиента, а как только клиент подключается к сети то ТД отключается?

Отправлено спустя 2 часа 49 минут 36 секунд:
То веб морда отвалится, то ОТА, то после сброса настройки теряет... WIFIManager без ОТА работает с ESPUI отлично, ОТА без WIFIManager работает ESPUI отлично, но вместе криво. Костыли для совместной работы ОТА и WIFIManager, ИМХО, еще не допилены.