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

User8 · #1

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

User8 · #2

User8 · #3

User8 · #4

#5

User8, Отлично, не плохо бы еще размер панели и место расположения задавать.

Отправлено спустя 2 минуты 43 секунды:
Можно пояснить как используется SPIFFS?

User8 · #6

Phazz, размер пока не поменять, располагать хоть как можно, будет такой же порядок как расположишь в flprog, можно разместить блок выше через переменные. Spiffs пока не работает, ну или у меня не заработало, это обновленная версия библиотеки и тут пока не все гладко работает, вот сама библиотека: https://github.com/s00500/ESPUI/blob/2.0.0/README.md там написано как загрузить файлы на spiffs.

ivan_nw · #7

User8 индикаторов получается нет в вебпанели? или в InputText можно выводить температуру например?

User8 · #8

ivan_nw, блок Label?

fsergei70 · #9

С библиотекой WifiManager эти блоки работать будут?

Отправлено спустя 2 минуты 7 секунд:
Я имел в виду настройка сети происходит через WifiManager в режиме точка доступа. а при подключении к сети отображается этот интерфейс

User8 · #10

fsergei70, если у wifimanager сменить порт у веб-сервера, тогда может и заработает.

Отправлено спустя 3 минуты 32 секунды:
fsergei70, настройка сети производится в веб интерфейсе? Если да, то на одном порту 80 два сервера работать не будет.

fsergei70 · #11

User8 писал(а): ↑
16.08.2019{, 13:03}
настройка сети производится в веб интерфейсе? Если да, то на одном порту 80 два сервера работать не будет.

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

User8 · #12

fsergei70, как вы себе это представляете? Код, что находится вверху скетча не получится временно закомментировать или задать условие без перепрошивки контроллера, он либо есть либо его нет.

Отправлено спустя 26 минут 40 секунд:
fsergei70, можно сделать в этом интерфейсе настройки сети без wifimanager, он всегда будет доступен, как точка доступа на прямую и как клиент через роутер. Хотя в флпрог пока вроде нельзя задать название точки доступа и пароль через параметр...

#13

Будет время посмотрю, WiFimanager можно привязать много куда. Сюда, думаю, тоже. Пока эти блоки ещё не смотрел.
Я писал в теме WiFimanager , как это делается.

#14

ошибка компиляции (
'class ESPUIClass' has no member named 'addControl'

User8 · #15

Phazz, библиотеку скачивали с github? Если да, то удалить из папки с библиотеками и перезапустить flprog, все нужные библиотеки есть в блоке.
Если нет, то также удалить библиотеку и скачать по ссылке выше 2.0.0 версию.
Так же библиотека ArduinoJson должна быть 6 версии и выше.

#16

А в примере такие же блоки как и ниже?

User8 · #17

Phazz, да

#18

Предыдущая ошибка пропала, но компилироваться все равно не хочет

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

Arduino: 1.8.9 (Windows 10), Плата:"NodeMCU 1.0 (ESP-12E Module), 80 MHz, 512000, 4M (3M SPIFFS)"

In file included from e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\portable\sketchbook\libraries\ESPUI-2.0.0\src/ESPUI.h:25:0,

from C:\Users\1\AppData\Local\Temp\flprog\pr11\pr11.ino:8:

e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\libraries\ESPAsyncWebServer\src/ESPAsyncWebServer.h:56:18: error: redeclaration of 'HTTP_GET'

HTTP_GET = 0b00000001,

^

In file included from C:\Users\1\AppData\Local\Temp\flprog\pr11\pr11.ino:4:0:

e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\portable\packages\esp8266\hardware\esp8266\2.3.0-rc2\libraries\ESP8266WebServer\src/ESP8266WebServer.h:30:29: note: previous declaration 'HTTPMethod HTTP_GET'

enum HTTPMethod { HTTP_ANY, HTTP_GET, HTTP_POST, HTTP_PUT, HTTP_PATCH, HTTP_DELETE, HTTP_OPTIONS };

^

In file included from e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\portable\sketchbook\libraries\ESPUI-2.0.0\src/ESPUI.h:25:0,

from C:\Users\1\AppData\Local\Temp\flprog\pr11\pr11.ino:8:

e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\libraries\ESPAsyncWebServer\src/ESPAsyncWebServer.h:57:18: error: redeclaration of 'HTTP_POST'

HTTP_POST = 0b00000010,

^

In file included from C:\Users\1\AppData\Local\Temp\flprog\pr11\pr11.ino:4:0:

e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\portable\packages\esp8266\hardware\esp8266\2.3.0-rc2\libraries\ESP8266WebServer\src/ESP8266WebServer.h:30:39: note: previous declaration 'HTTPMethod HTTP_POST'

enum HTTPMethod { HTTP_ANY, HTTP_GET, HTTP_POST, HTTP_PUT, HTTP_PATCH, HTTP_DELETE, HTTP_OPTIONS };

^

In file included from e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\portable\sketchbook\libraries\ESPUI-2.0.0\src/ESPUI.h:25:0,

from C:\Users\1\AppData\Local\Temp\flprog\pr11\pr11.ino:8:

e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\libraries\ESPAsyncWebServer\src/ESPAsyncWebServer.h:58:18: error: redeclaration of 'HTTP_DELETE'

HTTP_DELETE = 0b00000100,

^

In file included from C:\Users\1\AppData\Local\Temp\flprog\pr11\pr11.ino:4:0:

e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\portable\packages\esp8266\hardware\esp8266\2.3.0-rc2\libraries\ESP8266WebServer\src/ESP8266WebServer.h:30:72: note: previous declaration 'HTTPMethod HTTP_DELETE'

enum HTTPMethod { HTTP_ANY, HTTP_GET, HTTP_POST, HTTP_PUT, HTTP_PATCH, HTTP_DELETE, HTTP_OPTIONS };

^

In file included from e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\portable\sketchbook\libraries\ESPUI-2.0.0\src/ESPUI.h:25:0,

from C:\Users\1\AppData\Local\Temp\flprog\pr11\pr11.ino:8:

e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\libraries\ESPAsyncWebServer\src/ESPAsyncWebServer.h:59:18: error: redeclaration of 'HTTP_PUT'

HTTP_PUT = 0b00001000,

^

In file included from C:\Users\1\AppData\Local\Temp\flprog\pr11\pr11.ino:4:0:

e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\portable\packages\esp8266\hardware\esp8266\2.3.0-rc2\libraries\ESP8266WebServer\src/ESP8266WebServer.h:30:50: note: previous declaration 'HTTPMethod HTTP_PUT'

enum HTTPMethod { HTTP_ANY, HTTP_GET, HTTP_POST, HTTP_PUT, HTTP_PATCH, HTTP_DELETE, HTTP_OPTIONS };

^

In file included from e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\portable\sketchbook\libraries\ESPUI-2.0.0\src/ESPUI.h:25:0,

from C:\Users\1\AppData\Local\Temp\flprog\pr11\pr11.ino:8:

e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\libraries\ESPAsyncWebServer\src/ESPAsyncWebServer.h:60:18: error: redeclaration of 'HTTP_PATCH'

HTTP_PATCH = 0b00010000,

^

In file included from C:\Users\1\AppData\Local\Temp\flprog\pr11\pr11.ino:4:0:

e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\portable\packages\esp8266\hardware\esp8266\2.3.0-rc2\libraries\ESP8266WebServer\src/ESP8266WebServer.h:30:60: note: previous declaration 'HTTPMethod HTTP_PATCH'

enum HTTPMethod { HTTP_ANY, HTTP_GET, HTTP_POST, HTTP_PUT, HTTP_PATCH, HTTP_DELETE, HTTP_OPTIONS };

^

In file included from e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\portable\sketchbook\libraries\ESPUI-2.0.0\src/ESPUI.h:25:0,

from C:\Users\1\AppData\Local\Temp\flprog\pr11\pr11.ino:8:

e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\libraries\ESPAsyncWebServer\src/ESPAsyncWebServer.h:62:18: error: redeclaration of 'HTTP_OPTIONS'

HTTP_OPTIONS = 0b01000000,

^

In file included from C:\Users\1\AppData\Local\Temp\flprog\pr11\pr11.ino:4:0:

e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\portable\packages\esp8266\hardware\esp8266\2.3.0-rc2\libraries\ESP8266WebServer\src/ESP8266WebServer.h:30:85: note: previous declaration 'HTTPMethod HTTP_OPTIONS'

enum HTTPMethod { HTTP_ANY, HTTP_GET, HTTP_POST, HTTP_PUT, HTTP_PATCH, HTTP_DELETE, HTTP_OPTIONS };

^

In file included from e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\portable\sketchbook\libraries\ESPUI-2.0.0\src/ESPUI.h:25:0,

from C:\Users\1\AppData\Local\Temp\flprog\pr11\pr11.ino:8:

e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\libraries\ESPAsyncWebServer\src/ESPAsyncWebServer.h:63:18: error: redeclaration of 'HTTP_ANY'

HTTP_ANY = 0b01111111,

^

In file included from C:\Users\1\AppData\Local\Temp\flprog\pr11\pr11.ino:4:0:

e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\portable\packages\esp8266\hardware\esp8266\2.3.0-rc2\libraries\ESP8266WebServer\src/ESP8266WebServer.h:30:19: note: previous declaration 'HTTPMethod HTTP_ANY'

enum HTTPMethod { HTTP_ANY, HTTP_GET, HTTP_POST, HTTP_PUT, HTTP_PATCH, HTTP_DELETE, HTTP_OPTIONS };

^

Несколько библиотек найдено для "ESPUI.h"
Используется: e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\portable\sketchbook\libraries\ESPUI-2.0.0
Не используется: e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\libraries\ESPUI-2.0.0
Несколько библиотек найдено для "ArduinoJson.h"
Используется: e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\portable\sketchbook\libraries\ArduinoJson
Не используется: e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\libraries\ArduinoJson
Несколько библиотек найдено для "ArduinoOTA.h"
Используется: e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\portable\packages\esp8266\hardware\esp8266\2.3.0-rc2\libraries\ArduinoOTA
Не используется: e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\portable\sketchbook\libraries\ArduinoOTA
Не используется: e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\libraries\ArduinoOTA
Несколько библиотек найдено для "OneWire.h"
Используется: e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\portable\sketchbook\libraries\OneWire
Не используется: e:\Program Files\FLProg_5-0-1_Portable_Win64\ideV3\libraries\OneWire
exit status 1
Ошибка компиляции для платы NodeMCU 1.0 (ESP-12E Module).

Этот отчёт будет иметь больше информации с
включенной опцией Файл -> Настройки ->
"Показать подробный вывод во время компиляции"

User8 · #19

Phazz, удаляйте все библиотеки по путям что написаны внизу ошибки и перезапускайте flprog.

Отправлено спустя 1 минуту 19 секунд:
Если и после этого не будет компилироваться, нужно обновить платы: viewtopic.php?f=135&t=5424

Отправлено спустя 28 минут 29 секунд:
Phazz, вот еще библиотека нужна https://github.com/me-no-dev/ESPAsyncTCP но она есть в блоке, возможно не добавилась сама.

dizzyy · #20

а ято за проблема - 'class ESPUIClass' has no member named 'addControl'