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

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

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

#1

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

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

Ниже блоки, которые можно настроить по своему вкусу(это не проект,выложены просто блоки, настройки по умолчанию):
ПБ Клик настройки.flp
(423.26 КБ) 93 скачивания
ПБ Обновление настройки.flp
(424.87 КБ) 84 скачивания
ПБ Форма настройки.flp
(539.94 КБ) 86 скачиваний
Настраиваемые блоки режима Форм.
СпойлерПоказать
Настройки блоки форм.png
Отрисовка блоков для размещения компонентов
Пример удалил для изменения.
СпойлерПоказать
Отрисовка блоков.png
Вывод картинок
Вывод картинок.flp
(129.52 КБ) 78 скачиваний
СпойлерПоказать
Вывод картинок.png
Вывод картинок.png (12.23 КБ) 3425 просмотров
Иконки можно брать здесь icons8.ru, код тоже там же.

Вывод графиков
Вывод графика.flp
(218.4 КБ) 70 скачиваний
СпойлерПоказать
Графики.png
Внимание! Тело проекта расположите в платах выше плат с блоками портала.
Или блоки портала должны быть последними в проекте. 😊
Расположите блоки портала отдельно на свох платах, тогда порядок компиляции будет так, как они стоят в проекте. Можно их и сдвигать вместе с платой куда надо.

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

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

#41

Сообщение aidar_i » 25.05.2022{, 10:38}

Fuksas писал(а):
23.05.2022{, 14:13}
Добрый день.Можно как-то задавать размеры шрифта для отдельного блока?
Потихоньку продвигаюсь, осталось блоки скорректировать.
СпойлерПоказать
Настройки.png
Заложил такие настройки, несложно создать свои настройки :
СпойлерПоказать
В параметре Настройка можно устанавливается: ширина, высота, цвет, выравнивание компонентов, высота, цвет шрифта.
В настройках можно установить(по умолчанию ничего не установлено, применяются настройки из библиотеки):
(Мини кнопку уже настроенную в библиотеке можно задать так " 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
Сержант
Сообщения: 198
Зарегистрирован: 17.09.2015{, 13:04}
Репутация: 1
Откуда: Беларусь
Имя: Олег

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

#42

Сообщение Oleg » 25.05.2022{, 13:16}

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

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

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

#43

Сообщение ibalabanov » 25.05.2022{, 13:49}

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

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

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

#44

Сообщение aidar_i » 25.05.2022{, 16:01}

ibalabanov писал(а):
25.05.2022{, 13:49}
А возможно приделать ко всему этому WiFi manager или что то подобное?
Возможно

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

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

#45

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

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

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

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

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

#46

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

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

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

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

#47

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

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

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

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

#48

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

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

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

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

#49

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

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

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

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

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

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

#50

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

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

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

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

#51

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

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

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

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

#52

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

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

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

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

#53

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

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

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

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

#54

Сообщение 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 КБ) 13 скачиваний

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

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

#55

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

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

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

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

#56

Сообщение 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
Рядовой
Сообщения: 41
Зарегистрирован: 23.11.2020{, 16:46}
Репутация: 0
Имя: Artem

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

#57

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

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

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

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

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

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

#58

Сообщение 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
Рядовой
Сообщения: 13
Зарегистрирован: 03.10.2021{, 09:58}
Репутация: 0
Имя: Георгий

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

#59

Сообщение 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
Полковник
Сообщения: 2479
Зарегистрирован: 24.12.2016{, 16:55}
Репутация: 418
Откуда: Уфа
Имя: Айдар
Контактная информация:

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

#60

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

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

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

Ответить

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