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

starmos · #301

Phazz писал(а): ↑
24.12.2020{, 15:10}
Qwert855, как костыль можно умножить значения на 10. То есть если нужно 25.7 выбираем на слайдере 257 а в проекте делим на 10

Я так нередко делаю, удобно. Да и размер передаваемых данных меньше выходит. И работать с целыми числами быстрее.

Qwert855 · #302

Добрый день.
С точки зрения логики вопрос понятен, именно так и использую сейчас. Интересует именно возможность отображения точки в блоке слайдера (имеется женский фактор тк домашний сетевой ресурс).

Qwert855 · #303

Добрый день. У кого то есть опыт совместимости этих блоков с блоком запроса онлайн погоды и блоком обновления прошивки по вебу? они все обращаются к json и у похоже у всех блоков разная модификация этого пакета и разные настройки.

Imran · #304

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

Dev1 · #305

Если используете несколько вкладок то начинайте с 1 номера, далее 2, 3 и т.д. Если в каком то блоке будет стоять 0 то остальные вкладки будут под 0 вкладкой. У 0 приоритет и находится всегда сверху.

uglerod · #306

Всем добрый вечер.Возник вопрос- как при переходе на другую вкладку переходить на другой IP. Т.е. есть несколько esp со своими адресами. В теме вроде такого не увидел. Подскажите куда и как двигаться.

stigmat · #307

Вам сюда

stigmat · #308

У меня проект компилюеться нормально и загружается в МК. Однако сам интерфейс не работает. Пишет Error/No connection. Увеличение параметров jsoninitsize, jsonupdatesize не помогает. Версия блока espui 1.2. Flprog 6.3.1, ESP32

Кто может подсказать в чем причина?

Naladchik · #309

stigmat писал(а): ↑
12.01.2021{, 10:14}
Версия блока espui 1.2. Flprog 6.3.1

Версия блоков старая, версия FLProg старая, а библиотеки наверняка уже обновились вот и лезут конфликты.
А может и в проекте где косяк, а может и в конфигурации сетевого оборудования.
Вариантов масса.

Qwert855 · #310

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

stigmat · #311

Naladchik писал(а): ↑
12.01.2021{, 11:38}

stigmat писал(а): ↑
12.01.2021{, 10:14}
Версия блока espui 1.2. Flprog 6.3.1
Версия блоков старая, версия FLProg старая, а библиотеки наверняка уже обновились вот и лезут конфликты.
А может и в проекте где косяк, а может и в конфигурации сетевого оборудования.
Вариантов масса.

Все банально и просто. Очень быстрое обновление данных и интерфейс зависает.

Qwert855 · #312

Спасибо автору.
интересное видео (как всегда)

stigmat писал(а): ↑
12.01.2021{, 10:00}
Вам сюда

из видео можно подчеркнуть тег
br><a href=\"http://192.168.1.12/\">Гостиная</a> <br
куда можно ставить адрес ссылки (любой в том числе ftp), форматирование текста и фона текста (курсив, размер, жирный, зачеркнутый и тд)
подробнее про тег можно найти по запросу Яндекса - HTML тег span

хорошо работает на блоке "кнопка".
в графе "name_Button" можно вставлять
a href=\http://xxx.xxx.xxx.xxx\>xxx</a
пример
a href=\http://192.168.1.26\>Гараж</a

соответственно можно и без украшательств
a href=\http://192.168.1.20\>Гараж</a

тег работает с блоком "Tab"
в сроке "title_page_Main" кликая по наименованию проекта можно перебирать устройства

тег так же работает со строкой "title_Tab" но ссылки открываются только в новом окне контекстным меню.

PS: примеры использовать в < ххххххх > .

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

stigmat писал(а): ↑
12.01.2021{, 10:14}
У меня проект компилюеться нормально и загружается в МК. Однако сам интерфейс не работает. Пишет Error/No connection. Увеличение параметров jsoninitsize, jsonupdatesize не помогает. Версия блока espui 1.2. Flprog 6.3.1, ESP32

Кто может подсказать в чем причина?

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

grover · #313

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

После запуска портативной версии 7.3.0 тоже перестала работать данная связка .
После пяти чесов мучений психанул,переустановил винду Fl 6.3.1 и всё заработало.

Qwert855 · #314

Так же немного дополню тему ссылок.

при применении такого кода в "title_page_Main" (предполагаю не только там)
я ставил теги в в строке IDE, показалось так удобнее и быстрее (пример оттуда)
ESPUI.begin("Зал  " "<a href=http://192.168.1.26>Кухня  </a>" "<a href=http://192.168.1.27>Ванна</a>");
получаем гиперссылки прямо в верхней шапке. ест но их можно разместить строкой, столбиком, разукрасить, добавить кол во и тд по вкусу.

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

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

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

grover писал(а): ↑
13.01.2021{, 00:11}

После запуска портативной версии 7.3.0 тоже перестала работать данная связка .
После пяти чесов мучений психанул, переустановил винду Fl 6.3.1 и всё заработало.

на каких блоках заработало?
вопрос именно в ФЛП?
надо проверить он вообще работает этот блок часов?

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

Qwert855 писал(а): ↑
13.01.2021{, 01:03}

при применении такого кода в "title_page_Main" (предполагаю не только там)
я ставил теги в в строке IDE, показалось так удобнее и быстрее (пример оттуда)
ESPUI.begin("Зал " "<a href=http://192.168.1.26>Кухня </a>" "<a href=http://192.168.1.27>Ванна</a>");

вставлять теги можно прям в блок без боковых "
пример
Зал  " "<a href=http://192.168.1.26>Кухня  </a>" "<a href=http://192.168.1.27>Ванна</a>

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

grover писал(а): ↑
13.01.2021{, 00:11}

После запуска портативной версии 7.3.0 тоже перестала работать данная связка .
После пяти чесов мучений психанул,переустановил винду Fl 6.3.1 и всё заработало.

в штатном блоке отличие только одно в размещении строки
unsigned long _tempVariable_unsignedlong;
в версии 6ххх с этой строки начинался "loop"
в версии 7ххх параметр переехал перед "void setup"

если это не влияет на работу блоков ESPUI то можно подкинуть библиотеки с 6ххх
#include <TimeLib.h>
WiFiUDP _ntpUdpServer;

DrMario · #315

Всем привет!
Подскажите кто нибудь, как подружить блок обновления ESP8266 и ESPUI ? При компиляции выскакивает ошибка HTTP_GET
На ESP32 такой проблемы нет. Блок прилагаю.

Naladchik · #316

DrMario писал(а): ↑
13.01.2021{, 11:22}
...как подружить...

Как как, библиотеки править, больше никак.
В разных библиотеках одинаковые названия, вот и лезут конфликты.

DrMario · #317

Помогло!
Вопрос другой...
Как выводить текст в несколько строк, на снимке в первом посте самый первый элемент.

JonyBest · #318

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

В конце строки добавить переход на новую строку

grover · #319

Qwert855 писал(а): ↑
13.01.2021{, 01:36}
на каких блоках заработало?
вопрос именно в ФЛП?
надо проверить он вообще работает этот блок часов?

Штатный блок получение времени с NTP сервера + ESPU-I1.0

uglerod · #320

Qwert855 писал(а): ↑
13.01.2021{, 01:36}
Так же немного дополню тему ссылок.

при применении такого кода в "title_page_Main" (предполагаю не только там)
я ставил теги в в строке IDE, показалось так удобнее и быстрее (пример оттуда)
ESPUI.begin("Зал  " "<a href=http://192.168.1.26>Кухня  </a>" "<a href=http://192.168.1.27>Ванна</a>");
получаем гиперссылки прямо в верхней шапке. ест но их можно разместить строкой, столбиком, разукрасить, добавить кол во и тд по вкусу.

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