GyverPortal - простой конструктор веб интерфейса.

[aidar_i]

ЗДЕСЬ обсуждалась эта тема.
В начале сообщения блоки старой версии, ниже выложил новую версию.
1 версия.
Выкладываю ПБ и измененную библиотеку.

GyverPortal_.ubl

(2.12 МБ) 1010 скачиваний

GyverPortal_mod7.rar

(337.26 КБ) 1009 скачиваний

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

Ниже блоки, которые можно настроить по своему вкусу(это не проект,выложены просто блоки, настройки по умолчанию):

ПБ Клик настройки.flp

(423.26 КБ) 688 скачиваний

ПБ Обновление настройки.flp

(424.87 КБ) 560 скачиваний

ПБ Форма настройки.flp

(539.94 КБ) 556 скачиваний

Настраиваемые блоки режима Форм.

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

Отрисовка блоков для размещения компонентов
Пример удалил для изменения.

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

Вывод картинок

Вывод картинок.flp

(129.52 КБ) 566 скачиваний

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

Вывод картинок.png (12.23 КБ) 48907 просмотров

Иконки можно брать здесь icons8.ru, код тоже там же.
Вывод графиков

Вывод графика.flp

(218.4 КБ) 545 скачиваний

Вывод нескольких графиков на одной оси.flp

(260.2 КБ) 473 скачивания

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

------------------------------------------------------------------------------
2 версия , измененные блоки, библиотека и примеры.
Библиотека

GyverPortal_3.2.rar

(44.52 КБ) 608 скачиваний

Примеры, блок

Примеры GP.rar

(1.53 МБ) 570 скачиваний

Проверил все примеры на ЕСП32. Блоки меню пока не работают, ждем новую версию.
Хорошо работает многостраничность. Видео

GPМногостраничность.rar

(259.5 КБ) 502 скачивания

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

Внимание! Тело проекта расположите в платах выше плат с блоками портала.
Блоки портала должны быть последними в проекте.
Расположите блоки портала отдельно на своих платах, тогда порядок компиляции будет так, как они стоят в проекте. Можно их и сдвигать вместе с платой куда надо.
Для уменьшения плат можно располагать по 2-3 блока в плате, их корректировать проще.
Можно блоки вырезать и снова поставить, тогда они будут компилироваться ниже блоков, которые остались на плате.
ОТА тоже работает.

Снял видео инструкцию по блокам GP:

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

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

Здесь дополнительные блоки с возможностью установки любого цвета светодиодов и фона страницы.
—--------------------------------------------------------------------------------------------------------------------------------------------------------------------
Для работы с точкой доступа нужно использовать файловую систему ЕСП. Так как появились вопросы форумчан, выкладываю папку tools, которую нужно положить в папку ...\FLProg_8-0-2_Win64\ideV8\portable\sketchbook, тогда у вас будет работать файловая система. В Ардуино Иде в Tools появится надписи “ESP8266 LittleFS Data Upload“ и “ESP32 Sketch Data Upload“. Сохранить скетч, положить в папку со скетчем папку data. в которую положить нужные файлы для сохранения в файловую систему. В Ардуино Иде нажать нужную надпись и ФС прошьется, потом загрузите скетч. Далее вы можете прошивать только скетч, если файлы из ФС используются те же. Для GP прошейте файлы из библиотеки, там есть папка data, в примерах я его использую.

tools.rar

(13.73 КБ) 232 скачивания

----------------------------------------------------------------------------
3 версия по библиотеке 3.5.2. (В библиотеке ничего не менял) , выложил блоки, примеры и библиотеку.
Блоки:

GPv3.5.rar

(191.32 КБ) 320 скачиваний

Примеры GPv3.5.rar

(366.42 КБ) 342 скачивания

Бимблиотека:

GyverPortal-3.5.2.rar

(319.78 КБ) 348 скачиваний

Внимание!
Пользуйтесь только одной версией портала.
В каждой версии я выложил библиотеку этой версии.
Видео для прежней версии в основном подходит и для последней версии для понимания блоков.
4я версия ТУТ.

[Rovki]

... espui, но там нет обновления по воздуху...

Откуда такая информация?
Со штатным, встроенным в FLProg, OTA все работает, специально, только что, скачал последний проект со своей темы с мультиблоком и проверил.
Несколько раз заливал, проблем не увидел.
Нужна будет помощь в настройке данной связки (ESPUI + OTA от FLProg) - пишите в личку.

Спасибо, я имел ввиду БП UPDATE

[Naladchik]

видимо webupdate подразумевался под "обновлением по воздуху"

С webupdate да, не работает, так как для поднятия вебсервера в ESPUI используется библиотека ESPAsyncWebserver, а для работы webupdate требуется библиотека WebServer.

[aidar_i]

Аа очень сложно сделать не по вытаскивания а по построению блоков ?

Вставьте блок на отдельной плате.
В новой версии программы это должно быть исправлено. Это может сделать только Сергей.
В GP , чтобы прошивать по воздуху нужно открывать страницу по указанному в описании адресу, не проверял, но можно поставить кнопку ссылку или текст ссылку и нажатием открывать страницу эту.

[Imran]

Это может сделать только Сергей.

А с чем это связано? просто очень интересно стало,понимаю долго объяснять ну если можно хотя бы в двух словах. JeeUI2 по построению работает а в GyverPortal нет.

[aidar_i]

Это может сделать только Сергей.

А с чем это связано? просто очень интересно стало,понимаю долго объяснять ну если можно хотя бы в двух словах. JeeUI2 по построению работает а в GyverPortal нет.

Постарался ответить на вопросы в продолжении ВИДЕО
Еще вот проект с ОТА, страница которого запускается с кнопки ссылки(можно и из текста ссылки аналогично).

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

Безымянный.png (10.75 КБ) 2382 просмотра

Отправлено спустя 14 минут 9 секунд:
Перезалил библиотеку, примеры и блоки с исправлениями и добавлениями выявленными при снятии видео.

[aidar_i]

Испытал на светодиоде возможность задания любого цвета - получилось!
Создал еще стартовые блоки с возможностью задания любого цвета фона страницы.
Можете попробовать, для этого изменил библиотеку и добавил еще блоки. Блоки установите из примера. Нужно задать цвет, его название берете в интернете, ссылка в описании блоков
Библиотеку измененную перезалил в первом сообщении.
Пример с новыми блоками, установите их оттуда.

Блоки с выбором цвета.flp

(284.41 КБ) 99 скачиваний

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

Новые блоки.png (4.33 КБ) 2277 просмотров

[aidar_i]

В последнюю библиотеку добавлено некоторые дополнительные цвета, в описание блоков не вставил, можете взять отсюда:

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

//Цвет фона без эффекта наведения курсора
// (взят отсюда https://colorscheme.ru/html-colors.html)
//Красные тона:
".bg_red {background-color:red !important;}\n"
".bg_crimson {background-color:crimson !important;}\n"
".bg_pink {background-color:pink !important;}\n"
".bg_darkred {background-color:darkred !important;}\n"
".bg_lightsalmon {background-color:lightsalmon !important;}\n"
".bg_salmon {background-color:salmon !important;}\n"

// желтые тона
".bg_yellow {background-color:yellow !important;}\n"
".bg_gold {background-color:gold !important;}\n"
".bg_lightyellow {background-color:lightyellow !important;}\n"
".bg_khaki {background-color:khaki !important;}\n"
".bg_lemonchiffon {background-color:lemonchiffon !important;}\n"

//Зеленые тона
".bg_green {background-color:green !important;}\n"
".bg_darkgreen {background-color:darkgreen !important;}\n"
".bg_olive {background-color:olive !important;}\n"
".bg_teal {background-color:teal !important;}\n"
".bg_greenyellow {background-color:green !important;}\n"
".bg_lime {background-color:lime !important;}\n"
".bg_lightgreen {background-color:lightgreen !important;}\n"

//Синие тона
".bg_blue {background-color:blue !important;}\n"
".bg_skyblue {background-color:skyblue !important;}\n"
".bg_darkblue {background-color:garkblue !important;}\n"
".bg_RoyalBlue {background-color:RoyalBlue !important;}\n"
".bg_LightBlue {background-color:LightBlue !important;}\n"
".bg_Aqua {background-color:Aqua !important;}\n"
".bg_Aquamarine {background-color:Aquamarine !important;}\n"
".bg_LightCyan {background-color:LightCyan !important;}\n"
".bg_DodgerBlue {background-color:DodgerBlue !important;}\n"

//Фиолетовые тона
".bg_purple {background-color:purple !important;}\n"
".bg_Fuchsia {background-color:Fuchsia !important;}\n"
".bg_Indigo {background-color:Indigo !important;}\n"
".bg_DarkViolet {background-color:DarkViolet !important;}\n"
".bg_Lavender {background-color:Lavender !important;}\n"
".bg_Plum {background-color:Plum !important;}\n"
".bg_Violet {background-color:Violet !important;}\n"
".bg_MediumPurple {background-color:MediumPurple !important;}\n"

//Оранжевые тона
".bg_Orange {background-color:Orange !important;}\n"
".bg_DarkOrange {background-color:DarkOrange !important;}\n"
".bg_OrangeRed {background-color:OrangeRed !important;}\n"
".bg_Tomato {background-color:Tomato !important;}\n"
".bg_OrangeRed {background-color:OrangeRed !important;}\n"
".bg_Coral {background-color:Coral !important;}\n"

//Коричневые тона
".bg_Maroon {background-color:Maroon !important;}\n"
".bg_Brown {background-color:Brown !important;}\n"
".bg_SaddleBrown {background-color:SaddleBrown !important;}\n"
".bg_Tomato {background-color:Tomato !important;}\n"
".bg_OrangeRed {background-color:OrangeRed !important;}\n"
".bg_Cornsilk {background-color:Cornsilk !important;}\n"
".bg_Bisque {background-color:Bisque !important;}\n"
".bg_Tan {background-color:Tan !important;}\n"
".bg_Chocolate {background-color:Chocolate !important;}\n"

[aidar_i]

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

GyverPortal_4.rar

(41.1 КБ) 137 скачиваний

Тест кнопки с настройками.flp

(152.37 КБ) 113 скачиваний

[Rovki]

Что то не могу добавить этот архив, может лучше сразу делать Zip , а не rar?

[aidar_i]

Что то не могу добавить этот архив, может лучше сразу делать Zip , а не rar?

Ок, просто у меня архиватор по умолчанию rar.

[Rovki]

В ручную поместил в нужную папку- полет нормальный

[artemka19]

встрой, пожалуйста , в новую библиотеку проверку статуса соеднения, как сделано в jeeui2, чтобы загорался красный при обрыве связи

может это - я покажу КАК встроить, а дальше уже по примеру?)
Так в целом копипастой можно обойтись.

*просто часто изменяется библиотека - зачем кого то просить?)))

[aidar_i]

встрой, пожалуйста , в новую библиотеку проверку статуса соеднения, как сделано в jeeui2, чтобы загорался красный при обрыве связи

может это - я покажу КАК встроить, а дальше уже по примеру?)
Так в целом копипастой можно обойтись.

*просто часто изменяется библиотека - зачем кого то просить?)))

Один раз встрой и́ли покажи последний вариант, где нет зелёного,и дальше сам, спасибо.

[artemka19]

, где нет зелёного

недопонял про зеленый)

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

Включить/Отключить Статус соединения при сборке проекта в ФЛПрог

эту опцию оставить?

[aidar_i]

, где нет зелёного

недопонял про зеленый)

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

Включить/Отключить Статус соединения при сборке проекта в ФЛПрог

эту опцию оставить?

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

[artemka19]

, так имел ввиду

ок, попробую

[aidar_i]

, так имел ввиду

ок, попробую

В версии GyerPortal 3.2

[Imran]

Оба проекта экспериментирую и ваш artemka19, JeeUI2 , и ваш aidar_i, GyverPortal, в обеих есть свои плюсы и конечно минусы (без минусов не как не обойтись это очень даже хорошо для развития проекта ) в последнее время почему то у меня зависает контроллер или же связь разрывается именно с проектом JeeUI2 ( оставляю просто в рабочем режиме ухожу через примерно минут 10 + - 20,30 открываю страницу связь потеряна, обновляю страницу, бесполезно, приходится в ручную перезагружать контроллер ) а в GyverPortal нечего такого не видел, В чем дело может быть? может Я что то не так делаю ?

Вот проект JeeUI2
Контроллер Wemos D1 Mini Pro

UCS1903_WEMD1MP_JeeUI2_v_11.zip

(1.52 МБ) 60 скачиваний

[Rovki]

А проекты одни и те же?

[Imran]

Rovki, У обеих задача одинакова.