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

User8 · #1

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

Описание блоков:
Main: должен присутствовать в проекте всегда, в параметрах Main блока можно включить авторизацию и задать заголовок веб-интерфейса;
Tab - вкладка: размещается над блоками которым нужно попасть в эту вкладку, укажите нужный tabId в настройках, так же укажите этот же tabId у блоков которые должны быть в этой вкладке;
Slider: в настройках можно указать минимальное и максимальное значение для слайдера;
Switcher: переключатель, выход Status показывает актуальное состояние переключателя. При подаче единицы на вход UpdateValue, в веб-интерфейсе значение изменится, на то, что указанно на входе Value;
Label: вывод любого текста в web-интерфейс, при подаче единицы на вход UpdateText, строка будет обновлена в вебинтерфейсе на ту, что указана на входе Text. Если нужно перевести текст на следующую строку, используйте в строке тег там где нужно перенести текст;
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 МБ) 3254 скачивания

Видео по использованию интерфейса в 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 МБ) 2135 скачиваний

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

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

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

DrMario · #321

Нужна толковая справка, как вставлять ссылки в строку. Сделайте кто нибудь пожалуйста

Qwert855 · #322

uglerod писал(а): ↑
15.01.2021{, 04:19}

Вот это то что мне надо. ESPUI.begin("Зал " "<a href=http://192.168.1.26>Кухня </a>" "<a href=http://192.168.1.27>Ванна</a>");- это как дополнительная строка в секции setup?

подобная команда пропишет ссылки в заголовке страницы строкой, как уже писали выше если надо колонкой то добавлять не пробел   а разрыв хххххх
тег можно вписать в самом блоке ESPUI в поле имени заголовка,

Отправлено спустя 9 минут 47 секунд:

DrMario писал(а): ↑
13.01.2021{, 14:07}
Помогло!
Вопрос другой...
Как выводить текст в несколько строк, на снимке в первом посте самый первый элемент.

подскажите что было сделано для ESP32?

касательно строк
в HTML коде тег хххххх - это переход на след строку.
соотв вероятно должно быть похоже на ( не проверял)
ESPUI.begin("Зал " "<a href=http://192.168.1.26> Кухня </a>" "<a href=http://192.168.1.27> Ванна</a>");

Отправлено спустя 6 минут 59 секунд:

DrMario писал(а): ↑
15.01.2021{, 09:14}
Нужна толковая справка, как вставлять ссылки в строку. Сделайте кто нибудь пожалуйста

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

гораздо перспективнее изучить вопрос штатных инструментов ФЛП + пользоваться онлайн редакторами и вставлять готовые теги в штатную оболочку ФЛП. - ноо это сложнее ест но. тут есть блоки с заготовками а там чистый лист.
но взамен полная гибкость оформления HTML

DrMario · #323

Кто нибудь знает, как можно изменить шрифт в элементах?
Хочу моноширинный шрифт Courier New в блоке лейбл.

Qwert855 · #324

Еще пример оформления. (возможно пригодится кому то )

ESPUI.begin("открыт - ЗАЛ&hearts;" "<a href=\http://192.168.1.26\>Перейти на Кухню</a>" " " "<a href=\http://192.168.1.27\>Перейти в Ванну</a>" );

: Безымянный.png (7.82 КБ) 2120 просмотров

пример с моноширным
ESPUI.begin("открыт - <kbd>моноширинный ЗАЛ</kbd>&hearts;" "<a href=\http://192.168.1.26\>Перейти на Кухню</a>" " " "<a href=\http://192.168.1.27\>Перейти в Ванну</a>" );

: Безымянный2.png (9.62 КБ) 2120 просмотров

пояснения
Теги, преобразующие текст в <code>моноширинный</code>
Теги, преобразующие текст в <kbd>моноширинный</kbd>
Теги, преобразующие текст в <samp>моноширинный</samp>

DrMario писал(а): ↑
15.01.2021{, 18:23}
Кто нибудь знает, как можно изменить шрифт в элементах?
Хочу моноширинный шрифт Courier New в блоке лейбл.

не знаю на счет Courier New но выглядит иначе.

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

Qwert855 писал(а): ↑
15.01.2021{, 21:14}

не знаю на счет Courier New но выглядит иначе.

посмотрел на мобильном хроме, шрифт моноширинный как и ожидалось не работает.

#325

Использование ESPUI для веб настроек клиента

grover · #326

На основе проекта

Rovki писал(а): ↑
07.02.2021{, 20:05}
Использование ESPUI для веб настроек клиента

Добрый день.
Подскажите как сделать после того как клиент подключился точка доступа отключалась.
А если соединение пропало снова была доступной ?

#327

grover писал(а): ↑
08.02.2021{, 02:02}
На основе проекта
Rovki писал(а): ↑
07.02.2021{, 20:05}
Использование ESPUI для веб настроек клиента

Добрый день.
Подскажите как сделать после того как клиент подключился точка доступа отключалась.
А если соединение пропало снова была доступной ?

А чем мешает точка доступа?

grover · #328

Rovki писал(а): ↑
08.02.2021{, 07:21}
А чем мешает точка доступа?

Если работает 10 штук одновременно много WI-FI сетей.

#329

grover писал(а): ↑
08.02.2021{, 10:54}

Rovki писал(а): ↑
08.02.2021{, 07:21}
А чем мешает точка доступа?
Если работает 10 штук одновременно много WI-FI сетей.

Понятно. А проект можно глянуть (можно в личку)

#330

grover, тут то что нужно
viewtopic.php?f=71&t=6717

grover · #331

Phazz,
Большое спасибо то что нужно.

#332

4ds18b.flp: (5.63 МБ) 102 скачивания

Сканирование (авто) 4 датчиков ds18b20 на одной шине

с использованием веб интерфейса ESPUI

#333

Имею 4 закладки (страницы) , 16 органов управления (кнопки, индикаторы,итд) , как только ставлю 17ю (любую) ,она не отображается. Как только удаляю любую , так отображается 17я , как будто есть ограничение 16

.Как можно вылечить ???

Qwert855 · #334

Qwert855 писал(а): ↑
12.01.2021{, 16:10}
обнаружил еще одну грусть. при использовании данных блоков не работает штатный блок онлайн времени FLP7xx. при этом МК esp d1 зависает (без рестарта) с цикличностью заданной в блоке на запрос первичного времени на время работы блока (примерно 5 сек) т.к блок времени не получает ответа - эта история идет в цикле.
почему то уверен что раньше толи когда блоки были более старые 1.0 и точно ФЛ был 6.3 данная связка работала.

вопрос получения ответа оказался в роутере. помог только хард ресет и новая конфигурация роутера. подозреваю произошло автоматическое кривое онлайн обновление. вчера тупо отвалились все устройства кроме одного. после обнуления вай фай гада все заработало в т.ч онлайн запросы от ЕСП.

Так же обратил внимание что далеко не на всех версиях, модах браузеров работает ESPIU . на одном и том же браузере (разных версиях или модах) на одном РС работает на втором нет. точно работает на опере и штатном експлоере ( не всегда).

Qwert855 · #335

Добрый вечер, из наблюдений - не рекомендую применять "украшательства" в блоке LABEL - различного рода вставки кодов форматирования текста. заскриптованный текст (длина символов кода в параметре стринг) сильно грузит ESP, что приводит к нестабильной работе и частым перезагрузкам ESP. этот метод работает только на маленьких проектах. проект начинает глючить.

так же просьба к разработчикам блока рассмотреть возможность

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

: 001.png (19.52 КБ) 2686 просмотров

почти на всех других цветах самого блока розовый текст не читается например на желтом или красном и тд.

- добавить возможность форматирования информационного текста без доп знаков в строке стринг.

#336

Сделал конвертер 1-wire to RS485 c использованием ESPUI интерфейса настроек

Qwert855 · #337

Rovki писал(а): ↑
21.02.2021{, 07:59}
Имею 4 закладки (страницы) , 16 органов управления (кнопки, индикаторы,итд) , как только ставлю 17ю (любую) ,она не отображается. Как только удаляю любую , так отображается 17я , как будто есть ограничение 16 .Как можно вылечить ???

Встречал такое при отключении плат ФЛП.
Приходилось нумерацию блоков обновлять.

sergserg · #338

User8 писал(а): ↑
15.08.2019{, 21:01}
Встречал такое при отключении плат ФЛП.

это при выполнении плат по условию?
или отключение плат в самом проекте флпрог?

Qwert855 · #339

sergserg писал(а): ↑
14.03.2021{, 17:49}

User8 писал(а): ↑
15.08.2019{, 21:01}
Встречал такое при отключении плат ФЛП.
это при выполнении плат по условию?
или отключение плат в самом проекте флпрог?

в моем случае при отключении части кода путем отключения платы в ФЛП вручную.

Отправлено спустя 1 час 36 минут 46 секунд:

Qwert855 писал(а): ↑
28.12.2020{, 14:23}
Добрый день. У кого то есть опыт совместимости этих блоков с блоком запроса онлайн погоды и блоком обновления прошивки по вебу? они все обращаются к json и у похоже у всех блоков разная модификация этого пакета и разные настройки.

по ссылке погодный блок от rogekam, который написан под JSON 6, теперь он совместим с ESPUI

viewtopic.php?f=71&t=7193&p=101257#p101257
за что ему огромное спасибо.

#340

Qwert855 писал(а): ↑
14.03.2021{, 17:46}

Rovki писал(а): ↑
21.02.2021{, 07:59}
Имею 4 закладки (страницы) , 16 органов управления (кнопки, индикаторы,итд) , как только ставлю 17ю (любую) ,она не отображается. Как только удаляю любую , так отображается 17я , как будто есть ограничение 16 .Как можно вылечить ???
платы были ,но без условий

Встречал такое при отключении плат ФЛП.
Приходилось нумерацию блоков обновлять.