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

Пользовательские блоки для коммкникации и связи GSM, GPRS, IR, Bluetooth и другие
Правила форума
Рекомендации по размещению блоков:
Автор блока создает подробное описание блока, отличие от подобных(если есть на данный момент).Сложные блоки очень желательно с примерами.
При выходе новых версий редактирует/дополняет свой первый пост с указанием даты, версии, причины.
В каждой теме обсуждается только выложенный автором блок - баги, возможность (или предложение) доработки и прочие хотелки.
Свои блоки, переработанные, с другими библиотеками, протоколами и т.д.- размещаем либо сами отдельно, либо обсуждаем и дорабатываем в форуме Разработка блоков.
Пользователи улучшив блок автора и проверив его работоспособность - могут обратиться к автору или модераторам с просьбой добавить их версию блока в первое сообщение темы.
aidar_i
Полковник
Сообщения: 3120
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 674
Откуда: Уфа
Имя: Айдар
Контактная информация:

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

#1

Сообщение aidar_i » 13.05.2022{, 21:12}

ЗДЕСЬ обсуждалась эта тема.
В начале сообщения блоки старой версии, ниже выложил новую версию.
1 версия.
Выкладываю ПБ и измененную библиотеку.
GyverPortal_.ubl
(2.12 МБ) 1012 скачиваний
GyverPortal_mod7.rar
(337.26 КБ) 1010 скачиваний
Кто скачивал с вышеуказанной темы для испытаний блоки и библиотеки, удалите все.
Нижеуказанные примеры и блоки со старыми не работают.
В библиотеке добавил выбор цвета фона , эффект нажатия, выбор положения (слева , справа, по умолчанию по центру), ширину и высоту компонента, высоту и цвет шрифта, радиус закругления.
Добавил дополнительно желтый и синий светодиоды. Замените файлы в библиотеке отсюда.

Ниже блоки, которые можно настроить по своему вкусу(это не проект,выложены просто блоки, настройки по умолчанию):
ПБ Клик настройки.flp
(423.26 КБ) 689 скачиваний
ПБ Обновление настройки.flp
(424.87 КБ) 561 скачивание
ПБ Форма настройки.flp
(539.94 КБ) 557 скачиваний
Настраиваемые блоки режима Форм.
СпойлерПоказать
Настройки блоки форм.png
Отрисовка блоков для размещения компонентов
Пример удалил для изменения.
СпойлерПоказать
Отрисовка блоков.png
Вывод картинок
Вывод картинок.flp
(129.52 КБ) 567 скачиваний
СпойлерПоказать
Вывод картинок.png
Вывод картинок.png (12.23 КБ) 48952 просмотра
Иконки можно брать здесь icons8.ru, код тоже там же.
Вывод графиков
Вывод графика.flp
(218.4 КБ) 546 скачиваний
СпойлерПоказать
Графики.png
------------------------------------------------------------------------------
2 версия , измененные блоки, библиотека и примеры.
Библиотека
GyverPortal_3.2.rar
(44.52 КБ) 609 скачиваний
Примеры, блок
Примеры GP.rar
(1.53 МБ) 571 скачивание
Проверил все примеры на ЕСП32. Блоки меню пока не работают, ждем новую версию.
Хорошо работает многостраничность. Видео
GPМногостраничность.rar
(259.5 КБ) 505 скачиваний
Привел пример с подробным описанием блоков многостраничности, придерживаться порядок расположения и компиляции блоков, иначе не будет работать. Что бы не путаться.
Старые и новые блоки и библиотеки не совместимы.
Оригинальная библиотека не совместима с блоками, устанавливайте выложенные здесь.

Внимание! Тело проекта расположите в платах выше плат с блоками портала.
Блоки портала должны быть последними в проекте.
Расположите блоки портала отдельно на своих платах, тогда порядок компиляции будет так, как они стоят в проекте. Можно их и сдвигать вместе с платой куда надо.
Для уменьшения плат можно располагать по 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
Рядовой
Сообщения: 32
Зарегистрирован: 03.10.2021{, 09:58}
Репутация: 1
Имя: Георгий

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

#41

Сообщение ibalabanov » 25.05.2022{, 20:37}

Что то не соображу как это сделать)

Отправлено спустя 1 час 19 секунд:
ibalabanov писал(а):
25.05.2022{, 20:37}
Что то не соображу как это сделать)
Сделал :smile9:

ArtemArable
Сержант
Сообщения: 139
Зарегистрирован: 23.11.2020{, 16:46}
Репутация: 10
Имя: Artem

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

#42

Сообщение ArtemArable » 25.05.2022{, 21:39}

Понравилось. Надо развивать. Автору респект.

aidar_i
Полковник
Сообщения: 3120
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 674
Откуда: Уфа
Имя: Айдар
Контактная информация:

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

#43

Сообщение aidar_i » 26.05.2022{, 10:36}

Обновил файлы здесь.
Все старое удалите, в примерах настройки стоят по умолчанию , в скетче " ", в параметр Настройки поставьте нужные вам настройки через пробел.
Например, для круглой кнопки: width150 height150 fontred_a5381b backgroundblue_264280 borderradius75
Создание круглого компонента.flp
(149.23 КБ) 47 скачиваний
СпойлерПоказать
Круглая кнопка.png
Круглая кнопка.png (6.53 КБ) 1668 просмотров

ArtemArable
Сержант
Сообщения: 139
Зарегистрирован: 23.11.2020{, 16:46}
Репутация: 10
Имя: Artem

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

#44

Сообщение ArtemArable » 26.05.2022{, 11:14}

На работе для графического представления SCADA использую программу Draw.io. Большая библиотека готовых элементов, если нет - легко создаётся.
Может и в данном деле пригодиться.

Аватара пользователя
Oleg
Сержант
Сообщения: 200
Зарегистрирован: 17.09.2015{, 13:04}
Репутация: 1
Откуда: Беларусь
Имя: Олег

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

#45

Сообщение Oleg » 26.05.2022{, 12:42}

Добрый день. Вот сраницы с прошивками для ESP32 и ESP8266 одной и той же проги ПБ Обновление настройки.flp

Отправлено спустя 1 час 6 минут 49 секунд:
У меня плата D1MINI так с ней очень туго идет обновление страницы. А если в ручную обновить вообще виснет и отваливается .

Отправлено спустя 5 минут 49 секунд:
На ESPЗ2 все шустро открывается. Но не отображается инфа со входов блоков.
СпойлерПоказать
ESP8266.png
ESP32.png

aidar_i
Полковник
Сообщения: 3120
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 674
Откуда: Уфа
Имя: Айдар
Контактная информация:

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

#46

Сообщение aidar_i » 26.05.2022{, 14:51}

Oleg писал(а):
26.05.2022{, 13:55}
не отображается инфа со входов блоков.
Автор пишет не все поддерживается в ЕСП32.
Со входа должен отображаться.
Проверю.
Если подождать немного, все равно нет?

Аватара пользователя
Oleg
Сержант
Сообщения: 200
Зарегистрирован: 17.09.2015{, 13:04}
Репутация: 1
Откуда: Беларусь
Имя: Олег

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

#47

Сообщение Oleg » 26.05.2022{, 16:33}

Да не отображается и с учетом времени.

ArtemArable
Сержант
Сообщения: 139
Зарегистрирован: 23.11.2020{, 16:46}
Репутация: 10
Имя: Artem

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

#48

Сообщение ArtemArable » 27.05.2022{, 16:47}

А есть рабочий пример?
Не работает вывод данных в UART. Wemos D1 Mini Pro. Тянул со слайдера, полей ввода даты, времени.

aidar_i
Полковник
Сообщения: 3120
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 674
Откуда: Уфа
Имя: Айдар
Контактная информация:

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

#49

Сообщение aidar_i » 27.05.2022{, 19:10}

ArtemArable писал(а):
27.05.2022{, 16:47}
А есть рабочий пример?
Не работает вывод данных в UART. Wemos D1 Mini Pro. Тянул со слайдера, полей ввода даты, времени.
Лучше свой проект выложите, так проще проверить и исправить.

ArtemArable
Сержант
Сообщения: 139
Зарегистрирован: 23.11.2020{, 16:46}
Репутация: 10
Имя: Artem

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

#50

Сообщение ArtemArable » 27.05.2022{, 20:35}

aidar_i писал(а):
27.05.2022{, 19:10}
ArtemArable писал(а):
27.05.2022{, 16:47}
А есть рабочий пример?
Не работает вывод данных в UART. Wemos D1 Mini Pro. Тянул со слайдера, полей ввода даты, времени.
Лучше свой проект выложите, так проще проверить и исправить.
Это простой проект для пробы вывода данных с Web/
Вложения
Тест.flp
(150.79 КБ) 53 скачивания

ibalabanov
Рядовой
Сообщения: 32
Зарегистрирован: 03.10.2021{, 09:58}
Репутация: 1
Имя: Георгий

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

#51

Сообщение ibalabanov » 28.05.2022{, 20:26}

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

aidar_i
Полковник
Сообщения: 3120
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 674
Откуда: Уфа
Имя: Айдар
Контактная информация:

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

#52

Сообщение aidar_i » 29.05.2022{, 07:19}

ArtemArable писал(а):
27.05.2022{, 20:35}
aidar_i писал(а):
27.05.2022{, 19:10}
ArtemArable писал(а):
27.05.2022{, 16:47}
А есть рабочий пример?
Не работает вывод данных в UART. Wemos D1 Mini Pro. Тянул со слайдера, полей ввода даты, времени.
Лучше свой проект выложите, так проще проверить и исправить.
Это простой проект для пробы вывода данных с Web/
Уберите блоки режима обновления. Оставьте только слайдер, он у Вас из режима Клик, срабатывает при изменении положения движка.

Отправлено спустя 1 минуту 20 секунд:
ibalabanov писал(а):
28.05.2022{, 20:26}
А можно сделать так, что бы при перетаскивании слайдера, значение отображалось сразу а не после отпускания его?
Можно, но нужно сделать :)

ArtemArable
Сержант
Сообщения: 139
Зарегистрирован: 23.11.2020{, 16:46}
Репутация: 10
Имя: Artem

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

#53

Сообщение ArtemArable » 29.05.2022{, 19:33}

Пытаюсь сваять у сдайдера вход стартового значения. Но при перезагрузке ESP или обновлении страницы на выходе блока значение 0.
Для реальных проектов такой вход нужен.

Отправлено спустя 47 минут 12 секунд:
Что то получилось.

Отправлено спустя 18 минут 1 секунду:
Еще пример.
Вложения
Slider+Slider.flp
(237.68 КБ) 46 скачиваний
Slider.flp
(185.4 КБ) 51 скачивание

aidar_i
Полковник
Сообщения: 3120
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 674
Откуда: Уфа
Имя: Айдар
Контактная информация:

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

#54

Сообщение aidar_i » 29.05.2022{, 20:44}

ibalabanov писал(а):
28.05.2022{, 20:26}
А можно сделать так, что бы при перетаскивании слайдера, значение отображалось сразу а не после отпускания его?
В файле GyverPortal.h в функции
void SLIDER(const char* name, int value, int min, int max, int step = 1) {
......
_gp_sptr += F("\" onchange=\"GP_click(this)\">\n");
......
}
замените onchange на oninput.
Проверите, отпишитесь

ibalabanov
Рядовой
Сообщения: 32
Зарегистрирован: 03.10.2021{, 09:58}
Репутация: 1
Имя: Георгий

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

#55

Сообщение ibalabanov » 29.05.2022{, 21:45}

aidar_i писал(а):
29.05.2022{, 20:44}
ibalabanov писал(а):
28.05.2022{, 20:26}
А можно сделать так, что бы при перетаскивании слайдера, значение отображалось сразу а не после отпускания его?
В файле GyverPortal.h в функции
void SLIDER(const char* name, int value, int min, int max, int step = 1) {
......
_gp_sptr += F("\" onchange=\"GP_click(this)\">\n");
......
}
замените onchange на oninput.
Проверите, отпишитесь
Спасибо) попробую отпишусь)

aidar_i
Полковник
Сообщения: 3120
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 674
Откуда: Уфа
Имя: Айдар
Контактная информация:

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

#56

Сообщение aidar_i » 30.05.2022{, 08:02}

Сам уже исправил и проверил, работает.В первом сообщении выложил.

Изменил цвет положения ползунка в темной теме

ArtemArable
Сержант
Сообщения: 139
Зарегистрирован: 23.11.2020{, 16:46}
Репутация: 10
Имя: Artem

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

#57

Сообщение ArtemArable » 30.05.2022{, 08:43}

aidar_i писал(а):
30.05.2022{, 08:02}
Сам уже исправил и проверил, работает. Выложил файл библиотеки, замените его в библиотеке.
GyverPortal.h
1. Планируете Вы как автор дополнить блоки входами предустановки? Пример выложил выше. В практике необходимо для сохранения настроек.
2. Планируете расширять набор блоков в соответствии с первоисточником? В частности, трендами.

aidar_i
Полковник
Сообщения: 3120
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 674
Откуда: Уфа
Имя: Айдар
Контактная информация:

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

#58

Сообщение aidar_i » 30.05.2022{, 09:26}

ArtemArable писал(а):
30.05.2022{, 08:43}
1. Планируете Вы как автор дополнить блоки входами предустановки? Пример выложил выше. В практике необходимо для сохранения настроек.
Вот блок для слайдера, подправил Вашу. Да, нужно все аналогично сделать, может поможете? Удалите в ПБ и добавьте эту.

ArtemArable
Сержант
Сообщения: 139
Зарегистрирован: 23.11.2020{, 16:46}
Репутация: 10
Имя: Artem

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

#59

Сообщение ArtemArable » 30.05.2022{, 09:30}

aidar_i писал(а):
30.05.2022{, 09:26}
ArtemArable писал(а):
30.05.2022{, 08:43}
1. Планируете Вы как автор дополнить блоки входами предустановки? Пример выложил выше. В практике необходимо для сохранения настроек.
Вот блок для слайдера, подправил Вашу. Да, нужно все аналогично сделать, может поможете?
Слайдер со стартовым значением.flp
Постараюсь как могу, но я делитант в ПО. Но, думаю, направление перспективно. Штатный Web интерфейс трудоёмок для быстрого создания проектов.

aidar_i
Полковник
Сообщения: 3120
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 674
Откуда: Уфа
Имя: Айдар
Контактная информация:

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

#60

Сообщение aidar_i » 30.05.2022{, 13:40}

Блок для настройки страницы: цвета фона , высоту и цвет и стиль шрифтов и тп
Настройки страницы BODY.flp
(174.61 КБ) 58 скачиваний
Ставьте блок add.BODY(......) после add.THEME(......);
Для фона создайте дополнительно сами классы с нужными цветами в файле themes.h
".backgroundgreen_4CAF50 {background-color:#4CAF50!important;}\n"
меняя эти выделенные названия и хекс код цвета.
Библиотеку с последними изменениями выложу в первую тему 6 версия.

Отправлено спустя 11 минут :
Всё на этом нужно остановиться, думаю. Что то затянуло. Эстафету примите :)

Ответить

Вернуться в «Коммуникация и связь»