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 МБ) 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

[Naladchik]

SSSergeich,
Ответил в личку.

P.S.
Библиотеку WiFi сломали.

[SSSergeich]

Итак, делаю все с "нуля"

1. Скачал портативку 7.2.0
2. Скачал пример wemos_test_ESPUI_1.3.zip и блок пользователя.
3. Запускаю FLProg, устанавливаю ПБ, открываю пример и нажимаю компилировать. появлятся сообщение, что не найдена библиотека ESPUI.h

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

4. После чего открывается ардуино, закрываю ардуино
5. Беру папку ESPUI-2.0.0 из архива шапки и помещаю ее в c:\PortableFLProg_7-2_Win64\ideV6\libraries\
6. Опять запускаю компиляцию в FLProg. Получаю сообщение

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

Код: Выделить всё

Несколько библиотек найдено для "ArduinoOTA.h"
In file included from C:\Users\User\AppData\Local\Temp\flprog\pr3\pr3.ino:4:0:
 Используется: C:\PortableFLProg_7-2_Win64\ideV6\portable\packages\esp8266\hardware\esp8266\2.7.4\libraries\ArduinoOTA
c:\PortableFLProg_7-2_Win64\ideV6\libraries\ESPUI-2.0.0\src/ESPUI.h:24:25: fatal error: ESPAsyncTCP.h: No such file or directory
Не используется: c:\PortableFLProg_7-2_Win64\ideV6\libraries\ArduinoOTA
 #include <ESPAsyncTCP.h>
Не используется: c:\PortableFLProg_7-2_Win64\ideV6\portable\sketchbook\libraries\ArduinoOTA
                         ^
Несколько библиотек найдено для "ArduinoJson.h"
compilation terminated.
 Используется: c:\PortableFLProg_7-2_Win64\ideV6\portable\sketchbook\libraries\ArduinoJson
Не используется: c:\PortableFLProg_7-2_Win64\ideV6\libraries\ArduinoJson
exit status 1
Ошибка компиляции для платы LOLIN(WEMOS) D1 R2 & mini.

7. Захожу в c:\PortableFLProg_7-2_Win64\ideV6\portable\sketchbook\libraries\ удаляю библиотеку ArduinoOTA
8. Опять запускаю компиляцию, получаю:

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

Код: Выделить всё

In file included from C:\Users\User\AppData\Local\Temp\flprog\pr3\pr3.ino:4:0:
Несколько библиотек найдено для "ArduinoJson.h"
c:\PortableFLProg_7-2_Win64\ideV6\libraries\ESPUI-2.0.0\src/ESPUI.h:24:25: fatal error: ESPAsyncTCP.h: No such file or directory
 #include <ESPAsyncTCP.h>
 Используется: c:\PortableFLProg_7-2_Win64\ideV6\portable\sketchbook\libraries\ArduinoJson
                         ^
Не используется: c:\PortableFLProg_7-2_Win64\ideV6\libraries\ArduinoJson
compilation terminated.
Несколько библиотек найдено для "ArduinoOTA.h"
 Используется: C:\PortableFLProg_7-2_Win64\ideV6\portable\packages\esp8266\hardware\esp8266\2.7.4\libraries\ArduinoOTA
Не используется: c:\PortableFLProg_7-2_Win64\ideV6\libraries\ArduinoOTA
exit status 1
Ошибка компиляции для платы LOLIN(WEMOS) D1 R2 & mini.

9. Копирую библиотеку ESPAsyncTCP в папку c:\PortableFLProg_7-2_Win64\ideV6\libraries\
10. Запускаю компиляцию, получаю:

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

Код: Выделить всё

In file included from C:\Users\User\AppData\Local\Temp\flprog\pr3\pr3.ino:4:0:
Несколько библиотек найдено для "ArduinoJson.h"
c:\PortableFLProg_7-2_Win64\ideV6\libraries\ESPUI-2.0.0\src/ESPUI.h:25:31: fatal error: ESPAsyncWebServer.h: No such file or directory
 Используется: c:\PortableFLProg_7-2_Win64\ideV6\portable\sketchbook\libraries\ArduinoJson
 #include <ESPAsyncWebServer.h>
Не используется: c:\PortableFLProg_7-2_Win64\ideV6\libraries\ArduinoJson
                               ^
Несколько библиотек найдено для "ArduinoOTA.h"
compilation terminated.
 Используется: C:\PortableFLProg_7-2_Win64\ideV6\portable\packages\esp8266\hardware\esp8266\2.7.4\libraries\ArduinoOTA
Не используется: c:\PortableFLProg_7-2_Win64\ideV6\libraries\ArduinoOTA
exit status 1
Ошибка компиляции для платы LOLIN(WEMOS) D1 R2 & mini.

11. Копирую библиотеку ESPAsyncWebServer в папку c:\PortableFLProg_7-2_Win64\ideV6\libraries\
12. Компиляция выполняется:

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

Код: Выделить всё

Executable segment sizes:
IROM   : 384768          - code in flash         (default or ICACHE_FLASH_ATTR) 
IRAM   : 28060   / 32768 - code in IRAM          (ICACHE_RAM_ATTR, ISRs...) 
DATA   : 1412  )         - initialized variables (global, static) in RAM/HEAP 
RODATA : 5220  ) / 81920 - constants             (global, static) in RAM/HEAP 
BSS    : 26184 )         - zeroed variables      (global, static) in RAM/HEAP 
Скетч использует 419460 байт (40%) памяти устройства. Всего доступно 1044464 байт.
Глобальные переменные используют 32816 байт (40%) динамической памяти, оставляя 49104 байт для локальных переменных. Максимум: 81920 байт.

Отлично!!! Но, контроллера ESP8266 под рукой нет, хочу попробовать на ESP32

13. Возвращаюсь в FLProg. Проект-сменить контроллер

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

В автонастройке контроллера выбираю "по умолчанию"

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

14. Компилирую проект, получаю:

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

Код: Выделить всё

Несколько библиотек найдено для "ArduinoJson.h"
In file included from C:\Users\User\AppData\Local\Temp\flprog\pr4\pr4.ino:3:0:
 Используется: c:\PortableFLProg_7-2_Win64\ideV6\portable\sketchbook\libraries\ArduinoJson
c:\PortableFLProg_7-2_Win64\ideV6\libraries\ESPUI-2.0.0\src/ESPUI.h:16:22: fatal error: AsyncTCP.h: No such file or directory
Не используется: c:\PortableFLProg_7-2_Win64\ideV6\libraries\ArduinoJson
compilation terminated.
Несколько библиотек найдено для "WiFiUdp.h"
 Используется: C:\PortableFLProg_7-2_Win64\ideV6\portable\packages\esp32\hardware\esp32\1.0.4\libraries\WiFi
Не используется: c:\PortableFLProg_7-2_Win64\ideV6\libraries\WiFi
exit status 1
Ошибка компиляции для платы ESP32 Dev Module.

15. Захожу в c:\PortableFLProg_7-2_Win64\ideV6\portable\sketchbook\libraries\ и удаляю папку ArduinoJson
16. Компилирую, получаю:

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

Код: Выделить всё

Несколько библиотек найдено для "WiFiUdp.h"
In file included from C:\Users\User\AppData\Local\Temp\flprog\pr4\pr4.ino:3:0:
 Используется: C:\PortableFLProg_7-2_Win64\ideV6\portable\packages\esp32\hardware\esp32\1.0.4\libraries\WiFi
c:\PortableFLProg_7-2_Win64\ideV6\libraries\ESPUI-2.0.0\src/ESPUI.h:16:22: fatal error: AsyncTCP.h: No such file or directory
Не используется: c:\PortableFLProg_7-2_Win64\ideV6\libraries\WiFi
compilation terminated.
exit status 1
Ошибка компиляции для платы ESP32 Dev Module.

17. Захожу в C:\PortableFLProg_7-2_Win64\ideV6\portable\packages\esp32\hardware\esp32\1.0.4\libraries\ и удаляю папку WiFi
18. Компилирую, получаю:

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

Код: Выделить всё

In file included from C:\Users\User\AppData\Local\Temp\flprog\pr4\pr4.ino:3:0:
c:\PortableFLProg_7-2_Win64\ideV6\libraries\ESPUI-2.0.0\src/ESPUI.h:16:22: fatal error: AsyncTCP.h: No such file or directory
compilation terminated.
exit status 1
Ошибка компиляции для платы ESP32 Dev Module.

Какие мои действия дальше?

[Naladchik]

SSSergeich,
То есть алгоритм, описанный мною Вам в личке Вас не устроил.
Ок.
Хотите ходить по своим граблям - Ваше право.

[SSSergeich]

SSSergeich,
То есть алгоритм, описанный мною Вам в личке Вас не устроил.
Ок.
Хотите ходить по своим граблям - Ваше право.

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

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

То есть алгоритм, описанный мною Вам в личке Вас не устроил.

Получаю ошибку

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

Код: Выделить всё

    In file included from C:\Users\User\AppData\Local\Temp\flprog\pr4\pr4.ino:3:0:
    c:\PortableFLProg_7-2_Win64\ideV6\libraries\ESPUI-2.0.0\src/ESPUI.h:16:22: fatal error: AsyncTCP.h: No such file or directory
    compilation terminated.
    exit status 1
    Ошибка компиляции для платы ESP32 Dev Module.

Отправлено спустя 2 минуты 15 секунд:
А точнее, используя Вашу ESPUI:

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

Код: Выделить всё

In file included from C:\Users\User\AppData\Local\Temp\flprog\pr7\pr7.ino:3:0:
c:\PortableFLProg_7-2_Win64\ideV6\libraries\ESPUI\src/ESPUI.h:12:22: fatal error: AsyncTCP.h: No such file or directory
compilation terminated.
exit status 1
Ошибка компиляции для платы ESP32 Dev Module.

Отправлено спустя 2 минуты 45 секунд:
Отличие лишь в
\ESPUI-2.0.0\src/ESPUI.h:16:22: в случае библы из шапки
и
\ESPUI\src/ESPUI.h:12:22 в случае Вашей библы

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

\ESPUI\src/ESPUI.h:12:22 в случае Вашей библы

в файле c:\PortableFLProg_7-2_Win64\ideV6\libraries\ESPUI\src\ESPUI.h
Строчка 12 содержит:

Код: Выделить всё

#include <AsyncTCP.h>

Возможно нужно где-то найти эту библиотеку и тогда все заработает?

[rw6cm]

Возможно нужно где-то найти эту библиотеку и тогда все заработает?

Берете из архива espui_libraries_v1.2.zip (что в шапке) файл AsyncTCP , и кладите в
C:\PortableFLProg_7-2_Win64\ideV6\portable\packages\esp32\hardware\esp32\1.0.4\libraries\
Для есп32 в проекте настройте еще и точку доступа.
только что проверил - работает.

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

[SSSergeich]

После

Отлично!!! Но, контроллера ESP8266 под рукой нет, хочу попробовать на ESP32

13. Возвращаюсь в FLProg. Проект-сменить контроллер
СпойлерПоказать
В автонастройке контроллера выбираю "по умолчанию"
СпойлерПоказать
14. Компилирую проект, получаю:
СпойлерПоказать
15. Захожу в c:\PortableFLProg_7-2_Win64\ideV6\portable\sketchbook\libraries\ и удаляю папку ArduinoJson
16. Компилирую, получаю:
СпойлерПоказать
17. Захожу в C:\PortableFLProg_7-2_Win64\ideV6\portable\packages\esp32\hardware\esp32\1.0.4\libraries\ и удаляю папку WiFi
18. Компилирую, получаю:
СпойлерПоказать
Какие мои действия дальше?

Делаю

Возможно нужно где-то найти эту библиотеку и тогда все заработает?

Берете из архива espui_libraries_v1.2.zip (что в шапке) файл AsyncTCP , и кладите в
C:\PortableFLProg_7-2_Win64\ideV6\portable\packages\esp32\hardware\esp32\1.0.4\libraries\
Для есп32 в проекте настройте еще и точку доступа.
только что проверил - работает.

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

2020_12_01_23_30_34_pr2_Arduino_1.8.13.png

Получаю:

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

Код: Выделить всё

c:\PortableFLProg_7-2_Win64\ideV6\libraries\ESPAsyncTCP\src\SyncClient.cpp:25:24: fatal error: interrupts.h: No such file or directory
Несколько библиотек найдено для "ArduinoOTA.h"
compilation terminated.
 Используется: C:\PortableFLProg_7-2_Win64\ideV6\portable\packages\esp32\hardware\esp32\1.0.4\libraries\ArduinoOTA
Не используется: c:\PortableFLProg_7-2_Win64\ideV6\libraries\ArduinoOTA
exit status 1
Ошибка компиляции для платы ESP32 Dev Module.

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

Для есп32 в проекте настройте еще и точку доступа.

Получаю ошибку

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

[rw6cm]

SSSergeich,
Заново распакуйте дестрибутив FLProg в другое место (чтобы больше не мучить этот)
Ни каких библиотек не удалять не ставить.
Запустите в нем проект ESPUI_test2.flp (из шапки). Ни чего не меняя сделайте в IDE проверку скетча.
Проверка должна пройти нормально. после в проекте меняете на есп32, и копируете файл AsyncTCP по тому пути, в новый flp.
И в настройке точки IP сделайте последнюю цифру отличную от шлюза )

Отправлено спустя 36 минут 11 секунд:
Только что все описанное выше проделал в версии FLProg 7.2.1
Все работает.
Точку можно не настраивать. работает и без нее.

[SSSergeich]

SSSergeich,
Заново распакуйте дестрибутив FLProg в другое место (чтобы больше не мучить этот)
Ни каких библиотек не удалять не ставить.
Запустите в нем проект ESPUI_test2.flp (из шапки). Ни чего не меняя сделайте в IDE проверку скетча.
Проверка должна пройти нормально. после в проекте меняете на есп32, и копируете файл AsyncTCP по тому пути, в новый flp.
И в настройке точки IP сделайте последнюю цифру отличную от шлюза )

Отправлено спустя 36 минут 11 секунд:
Только что все описанное выше проделал в версии FLProg 7.2.1
Все работает.
Точку можно не настраивать. работает и без нее.

Скачал FLProg 7.2.1
Невероятно!

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

Код: Выделить всё

Скетч использует 788962 байт (40%) памяти устройства. Всего доступно 1966080 байт.
Глобальные переменные используют 39984 байт (12%) динамической памяти, оставляя 287696 байт для локальных переменных. Максимум: 327680 байт.

Спасибо!

[tigr72]

Доброго времени суток. Прошу помощи.
Возникла необходимость выводить график на web-морде (не чего серьезного, температура котла за последние сутки).
Поиски по форуму меня естественно привели в эту ветку к блоку UI Graph. Подключив и поигравшись, понял что это не совсем то что мне нужно (график не сдвигается и не запоминается).
Ну, думаю фиг с ним. Буду данные хранить в массиве, а график буду строить динамически по мере надобности. Создал массив, заполнил его, и запульнул его быстренько в UI Graph, заглянул в браузер и заплакал от того как доооооолго строиться график. Тут не о какой динамичности говорить не приходиться.
Насколько я понял, этот блок уже не кто дорабатывать ближайшее время не будет.
Может кто подскажет ссылки на другие варианты построения графика в web-морде ?

зы Ах, да ESP8266.

[Serquick]

Привет. В данный момент идет тест графика. Если заинтересует, пишите в ЛС

[grover]

Подскажите можно температуру с разных ESP8266 вывести на одну страницу?

[JonyBest]

Новая сборка библиотек для работы ESPUI. На версию 7.2 портабл ставится и работает без танце в бубном. Пробовал и на ESP8266 и на ESP32. Пробовал на старых проектах, скомпилировалось без проблем. Чуть шрифт отличается... По настоятельной просьбе "Naladchik" включил в состав ESPAsyncTCP необходимую для ESP8266.
Для блоков от "Naladchik " необходимо перенести в коней списка

Код: Выделить всё

#include <ESPUI.h>
>

Более подробно о проблеме

[Dev1]

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

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

пысы: узаю 722 портабл

Отправлено спустя 38 минут 5 секунд:
Отменяется, на 721 все норм... Буду проверять...

Отправлено спустя 48 минут 35 секунд:
Бред какой то, скомпилил в 721 ESPUI_test2.flp все норм. Потом скомпилил в 722 стало кракозябрами. Теперь и в 721 то же кракозябры...

[Ingwar]

Теперь и в 721 то же кракозябры...

Пандемия однако...

[SSSergeich]

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

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

Screenshot_2020-12-18-16-56-26-651.jpg

пысы: узаю 722 портабл

Отправлено спустя 38 минут 5 секунд:
Отменяется, на 721 все норм... Буду проверять...

Отправлено спустя 48 минут 35 секунд:
Бред какой то, скомпилил в 721 ESPUI_test2.flp все норм. Потом скомпилил в 722 стало кракозябрами. Теперь и в 721 то же кракозябры...

Такая же проблема, более того, в самой FLProg шрифты поехали...

[Dev1]

Сейчас пробую блоки 1.3 и заметил что у всех блоков изначальный порядок Tab начинается с 0. А если поставить блок ESPUI_Tab у него уже значение Tab при компиляции ставится с 1, последующие 2,3 и так далее. Не сразу понял почему у меня вкладки как то не там расположены. Не знаю задумка это такая или не с того отсчет Tab начинается.

[Naladchik]

Dev1,
Tab=0 это основная страница, Tab>0 это вкладки на этой странице.

[Qwert855]

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

По веткам выше, добавил блок ESPUI_1.3_(Code).ubi через программу в только что распакованную FLP7.2.2, открыл пример test.flp, ошибок компиляции нет.

Спасибо.

[Naladchik]

блоком слайдера что бы он выводил флоат значение?

Маловероятно. Данный функционал скорее всего не поддерживается библиотекой ESPUI.

[Phazz]

Qwert855, как костыль можно умножить значения на 10. То есть если нужно 25.7 выбираем на слайдере 257 а в проекте делим на 10