Веб-интерфейс для 8266/32 (JeeUI2)

[ArtemArable]

Друзья, нужно ТЗ В какую форму это облачить решать автору. Считаю, что необходимы поля ввода и вывода данных, времени, даты, выпадающий список, слайдер, блок логгирования с меткой времени, разные кнопки, переключатели. Блоки элементов вывода с входом предустановки, а лучше с выбором возможности записью в EEPROM.

Еще немного и [ref]artemka19[/ref], будет ДОЛЖЕН всему форуму...

Скорее мы будем ему должны...
Просто хотелось немного структурировать все это.

[vitalik9]

Интересная тема хотелось бы дальнейшего развития

[artemka19]

*update до v.1.23
-добавлен элемент "выпадающий список"
(динамичный элемент)

скрины:
[spoiler]

1.png

2.png

запись списка из массива.png

последн.png

[/spoiler]

[artemka19]

внимание!
при длинной строке json (более 4кб) Arduino ide отказывается компилировать проект.
Данный глюк известен еще с 2015г. (оказывается )
Вроде как при заливке напрямую или через другой компилятор длина строки игнорируется.
Но я не проверял еще)

*попробую переделать механизм сбора и отправки строки подобно штатному вебу, если это позволит Редактор ПБ.

[artemka19]

*Update

Встречаем обновленную версию 2.05
(пока только для 8266)

Благодаря видеообзору данного веб-интерфейса от Дениса Теричева aka Samodelkin

https://www.youtube.com/watch?v=9HL1zfY4GjY


выявился баг в Ардуино IDE, приводящий к ошибке Компилирования проекта (хотя к примеру Platformio игнорит данную ошибку (превышение длины String более 4кб) и компиляция происходит успешно).

В связи с этим, решено было изменить метод обмена данными esp и веб-страницы.
На данный момент (пока только для есп8266) удалось достигнуть положительных результатов:
-запрос данных происходит только для тех элементов, которые расположены на той же странице, на которой находится пользователь.
-теперь данные отсылаются из есп8266 фрагментированно (по частям). Т.е. у нас нет ограничения в длине сообщения, отсылаемого на веб страницу.
-для уменьшения времени загрузки JS-cкрипта и CSS-cтилей теперь используется их сжатие в .gz архив, что позволило уменьшить размер пересылаемыx данныx на веб страницу с 30кб до примерно 9кб. (т.е. в 4(!) раза меньше).
Что благоприятно сказалось на скорости первоначальной загрузки страницы и позволило съэкономить место в памяти самой esp8266.
-добавлены блоки Сканирования WiFi сетей и Переключателя
-добавлена возможность задать Заголовок страницы
-поиски решения для esp32 продолжаются....)))



*Благодарности за поддержку и тестирование:
-[ref=#808080]Phazz[/ref], memberlist.php?mode=viewprofile&u=1952
-[ref]karen[/ref], memberlist.php?mode=viewprofile&u=776


Скрины:
[spoiler]

title.png

2.png

3.png

4.png

5.png

1.jpg

[/spoiler]

тестим, делимся результатами, пожеланиями и багами

[tema]

ждем esp32

[artemka19]

*Update до v.2.05.fix
-пофикшены некоторые баги

[ArtemArable]

То что надо. Выше всяких похвал...

[mgr]

artemka19,
"-Возможно использование совместно со штатным веб-интерфейсом (в этом случае необходимо задать свой адрес, например, " /test")."
Никак не могу понять где задавать адрес?

Отправлено спустя 1 минуту 55 секунд:
ААААААААААА , нашел

[artemka19]

в параметрах основного блока)

[hrach]

Здравствуйте. Стал тестировать и начале проекта столкнулся проблемой. При нажатие кнопки включается, текст переключается и цвет фона тоже. При повторном нажатия на кнопку выключается текст на кнопке меняется но цвет фона остается прежним. Цвет фона меняется только при обновления страницы.Из за чего этот может бит?

тест.jpg

[artemka19]

Из за чего этот может бит?

из-за названия цвета:
-смотрим таблицу http://htmlbook.ru/html/value/colorname
-внимание на последний столбец: зеленой галкой отмечены имена цвета, которые можно передать текстом (aqua, black, blue и т.д.).
-там где стоит крестик - это имя нужно передавать в hex-формате (#faebd7, #f0f8ff, #7fffd4 и т.д.)

Отправлено спустя 23 минуты 1 секунду:
Другими словами, вместо цвета "platinum" нужно использовать "#e5e4e2".

https://yandex.ru/search/?text=platinum+hex&lr=10801

[hrach]

-внимание на последний столбец: зеленой галкой отмечены имена цвета, которые можно передать текстом (aqua, black, blue и т.д.).
-там где стоит крестик - это имя нужно передавать в hex-формате (#faebd7, #f0f8ff, #7fffd4 и т.д.)

Спасибо большое!

[Vint]

-смотрим таблицу http://htmlbook.ru/html/value/colorname
...
-там где стоит крестик - это имя нужно передавать в hex-формате (#faebd7, #f0f8ff, #7fffd4 и т.д.)

Спасибо за информацию! ещё это поможет https://get-color.ru/

[artemka19]

*Update до v.3.02 (восстановлена поддержка esp32)
[spoiler]

1.png

2.png

[/spoiler]

Изменения:
-добавлена поддержка esp32 (читаем описание в шапке - есть нюанс с есп32)
[spoiler]
При использовании есп32:
-Все блоки интерфейса должны быть в конце проекта FLProg.
-И завершать проект должен "Последний блок".
*это расплата за реализацию Лайфхака в Редакторе ПБ "Место вставки кода в Функцию "
[/spoiler]
-добавлен блок Картинка (@Ushakov) (аккуратно с размерами картинок)
-применил некую "интерактивность" общения с пользователем в FLProg, путем отображения полезной информации на входах основного блока
[spoiler]

3.png

4.png

[/spoiler]

Остальное все как в v.2.05
-запрос данных происходит только для тех элементов, которые расположены на той же странице, на которой находится пользователь.
-теперь данные отсылаются из есп фрагментированно (по частям). Т.е. у нас нет ограничения в длине сообщения, отсылаемого на веб страницу.
-для уменьшения времени загрузки JS-cкрипта и CSS-cтилей теперь используется их сжатие в .gz архив, что позволило уменьшить размер пересылаемыx данныx на веб страницу с 30кб до примерно 9кб. (т.е. в 4(!) раза меньше).
Что благоприятно сказалось на скорости первоначальной загрузки страницы и позволило съэкономить место в памяти самой есп.


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

[hrach]

добавлен блок Картинка (@Ushakov) (аккуратно с размерами картинок)

Я собрался просит чтобы добавили данную функцию а Вы определили меня. Хотелось бы чтобы было возможность установить размер шрифта в блоке надпись. В мобильном устройстве маленький текст занимает все пространство.
Уже несколько дней тестирую, мое мнение это очень круто!.
Большое спасибо ребята !

[Rovki]

А как на счет одновременной работы этого веб интерфейса с update (обновление по воздуху) , нет конфликтов, будут одновременно работать??? Я имею ввиду на практике..

[aidar_i]

[ref]artemka19[/ref],
Не пробовали из spiffs загружать страницу и картинки?
Я пробовал на GP, все загружается.

[artemka19]

*Update до v.3.03

-добавлена возможность изменять размер шрифта на странице

[spoiler]
параметры

5.png

25px - здесь нужно увеличить длину кнопок

25.png

7px-здесь длину кнопок можно уменьшить еще

7.png

по дефолту-16px

по дефолту.png

[/spoiler]

Файл проекта в шапке.

[artemka19]

А как на счет одновременной работы этого веб интерфейса с update (обновление по воздуху)

про какой update речь?
WebUpdate работает (+ имеется визуальное отображение процесса загрузки прошивки).
Или вопрос про Arduino OTA ? (с ней не проверял ).