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

[aidar_i]

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

GyverPortal_.ubl

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

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 КБ) 48920 просмотров

Иконки можно брать здесь 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я версия ТУТ.

[ibalabanov]

Вот что получилось, блоки ставил по порядку так как вы писали

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

[Oleg]

ESP32 один раз страница открылась с favicon.ico. Потом я убрал favicon.ico в portal.h и после этого уже больше не открывается. Я все возвратил назад. Бесполезно.

[aidar_i]

Вот что получилось, блоки ставил по порядку так как вы писали

Нет, Вы поставили не по порядку.
Например LED засунули потом на второе место, но вытащили его после закрытия блока. Blok end ставьте , когда все другие блоки компонентов вытащены и выставлены.
Очередь вставки в проект и порядок расположения в проекте не одно и то же.
Пока программа работает так.

[ibalabanov]

Спасибо, начинает доходить…

[aidar_i]

Спасибо, начинает доходить…

Вообще можно потом проверить в скетче в функции build, она находится сразу после секции setup.
Там код компонентов почти соответствует блокам компонентов, можно там их как нужно переставлять.
Выглядит так

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

.   void build() {
  String s;
  BUILD_BEGIN(s);
  add.THEME(GP_DARK);
  add.AJAX_UPDATE("led, st");

  add.LABEL("Settings");
  add.BLOCK_BEGIN();
  add.LABEL("Power:");
  add.SWITCH("sw", data.state);
  add.BREAK();
  add.LABEL("Local status:");
  add.LABEL("OK");
  add.BLOCK_END();

  add.FORM_BEGIN("/save");

  add.LABEL("WiFi");
  add.BLOCK_BEGIN();
  add.TEXT("ssid", "SSID", data.ssid);
  add.BREAK();
  add.TEXT("pass", "Password", data.pass);
  add.BLOCK_END();

  add.LABEL("MQTT");
  add.BLOCK_BEGIN();
  add.TEXT("host", "Host", data.host);
  add.BREAK();
  add.NUMBER("port", "Port", data.port);
  add.BLOCK_END();

  add.SUBMIT("Save");
  add.FORM_END();

  BUILD_END();
}   

[ibalabanov]

Спасибо! Буду пробовать)

[Oleg]

Возвратил все в исходное. ESP32 открывает страницы только с /favicon.ico после IP. Все работает. Спасибо.

[aidar_i]

if (req.startsWith(F("/favicon.ico"))) show();

Открывается, но нажимаешь меню, страница снова пропадает.

Сделал:
#ifdef ESP8266
if (req.startsWith(F("/favicon.ico"))) show();
#else
if (req.startsWith(F("/"))) show();
#endif
ЕСП32 открывается, но не реагирует уже на меню, кнопка меню нажимается, идет обновление, но меню не разворачивается.
Пример GyverPortal CLICK_3 работает нормально.

[ibalabanov]

Доброго дня! Все получилось с расстановкой элементов) Подскажите пожалуйста как правильно вывести часы, что бы они были посередине… Получилось только так, а с блоком вывода time у меня не компилируется, выдаёт ошибку…

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

[aidar_i]

Попробовал много страничность

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

void build_i() {
  String i;
  GP_BUILD(i);
i += F("<!DOCTYPE html><html>");
        add.THEME(GP_DARK);
         add.SLIDER("f_sld","Слайдер 1", valSlider_188801767_1, 0, 10, 1);
        add.BREAK();
        add.SLIDER("f_sld1","Слайдер 2", valSlider_188801767_2, 0, 10, 1);
        add.BREAK();
        GP_SHOW();
}  
void build_sw() {
  String sw;
  GP_BUILD(sw);
sw += F("<!DOCTYPE html><html>");
        add.THEME(GP_LIGHT);
        add.LABEL("Название компонента", "f_val");
        add.DATE("f_date", valDate_178033386_1);
        add.BREAK();
        add.LABEL("Название компонента", "f_val");
        add.TIME("f_time", valTime_2589069_1);
        add.BREAK();
        GP_SHOW();
}

Вызывается
portal.attachBuild(build_i);
или
portal.attachBuild(build_sw);

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

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

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

как правильно вывести часы, что бы они были посередине…

Посередине чего?


А светодиоды, чтобы стояли ровно, название дополните пробелами.

[aidar_i]

Выложил в 1 сообщении последние изменения в блоках и в библиотеке, добавил вывод картинок.
В ПБ есть блоки Многостраничность, их не используйте, не доработаны еще.

[Fuksas]

Добрый день.Можно как-то задавать размеры шрифта для отдельного блока?

[Oleg]

Добрый день. Не получается выводить данные из контроллера. Можно пример.

[aidar_i]

Добрый день.Можно как-то задавать размеры шрифта для отдельного блока?

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

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

Добрый день. Не получается выводить данные из контроллера. Можно пример.

Поподробнее, можете проект прикрепить.
Примеры будут попозже.

[Oleg]

Добрый день. Я пытался использовать блоки обновления

[chmak2007]

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

Получается вот так!

Снимок экрана 2022-05-24 202835.jpg (11.44 КБ) 1588 просмотров

Делаю так!

В чем проблема?

[aidar_i]

Добрый день.Можно как-то задавать размеры шрифта для отдельного блока?

Потихоньку продвигаюсь, осталось блоки скорректировать.

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

Заложил такие настройки, несложно создать свои настройки :

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

В параметре Настройка можно устанавливается: ширина, высота, цвет, выравнивание компонентов, высота, цвет шрифта.
В настройках можно установить(по умолчанию ничего не установлено, применяются настройки из библиотеки):
(Мини кнопку уже настроенную в библиотеке можно задать так " push_butmini".)
1.Ширину компонента
width40
width50
width60
width100
width150
width200
width250
width300
width320
width350
widthauto

2.Высоту компонентов
height30
height50
height70
height100
height150
height200
height250
height300
height350
heightauto
3.Высоту шрифта
font16
font20
font40
font60
font80
font100
font150
font200
font250
4.Цвет шрифта
fontgreen_4CAF50
fontblue_264280
fontcyan_16747a
fontyellow_c79536
fontgrey_777777
fontred_a5381b
fontpurpe_5c3580

5.Цвет компонента
backgroundgreen_4CAF50
backgroundblue_264280
backgroundcyan_16747a
backgroundyellow_c79536
backgroundgrey_777777
backgroundred_a5381b
backgroundpurpe_5c3580

6.Цвет с градиентом:
backgroundred_gradient
backgroundgreen_gradient
backgroundyellow_gradient

7. Выравнивание компонента
position_left
position_right
positiontop_btn

8. Радиус закруглений углов
borderradius50
borderradius75

ВНИМАНИЕ! Свойства компонента можно подавать несколько через пробел,
например, для компонента шириной 100рх, цвета красного градиента, цветом шрифта серый 777777 и расположенный слева, константу писать так: "width100 backgroundred_gradient fontgrey_777777 position_left".
Аналогично можно передать и другие свойства компоненту.
Круглый компонент создается при равном ширине и высоте компонента и радиусе закругления равном их половине.

[Oleg]

где "привет" после температуры ? А у меня вообще со входа не передается инфа. Только что напишешь внутри блока. Дайте рабочий пример

[ibalabanov]

А возможно приделать ко всему этому WiFi manager или что то подобное?

[aidar_i]

А возможно приделать ко всему этому WiFi manager или что то подобное?

Возможно