Простой конструктор веб интерфейса для esp8266 и ESP32

От Алекс Гайвер. https://github.com/GyverLibs/GyverPortal/tree/7ba61a44fbf1224095980736638c6c551f9837b2

Относящиеся к программированию МК
Аватара пользователя
Di123
Капитан
Сообщения: 811
Зарегистрирован: 03.11.2018{, 19:38}
Репутация: 25
Имя: Дмитрий

Простой конструктор веб интерфейса для esp8266 и ESP32

#21

Сообщение Di123 » 27.04.2022{, 20:03}

Потестить можно
С правкой я не знаю даже азов написания кода тут не ко мне

Светодиода небыло там
Но надпись всеравно нужна вывод информации температуры влажности давления каких либо ошибок и прочее

Отправлено спустя 2 минуты 19 секунд:
То что номер у блока пароля каждого свой присвоен я видел в компиляторе но видимо это не работает

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#22

Сообщение aidar_i » 27.04.2022{, 20:06}

Di123 писал(а):
27.04.2022{, 20:03}
Потестить можно
С правкой я не знаю даже азов написания кода тут не ко мне

Светодиода небыло там
Но надпись всеравно нужна вывод информации температуры влажности давления каких либо ошибок и прочее
Там не надо писать коды.
В новых блоках все есть, там примерно 14-15 блоков на каждый режим.
Вам нужно будет использовать 2 режима, на текст или светодиод Режим обновления, чтобы они автоматически изменили состояние. Я испытал так, работает.
Завтра посмотрите.

Аватара пользователя
Di123
Капитан
Сообщения: 811
Зарегистрирован: 03.11.2018{, 19:38}
Репутация: 25
Имя: Дмитрий

Простой конструктор веб интерфейса для esp8266 и ESP32

#23

Сообщение Di123 » 27.04.2022{, 20:16}

Можете ещё расковырять блок кнопки и вынести в параметр цвет кода цвета

Отправлено спустя 1 минуту 35 секунд:
Ну или на выбор предоставить в параметрах несколько цветов

Отправлено спустя 10 часов 58 минут 43 секунды:
кнопка мини тоже дублируется везде
вытаскиваеш 4 штуки при нажатии на одну срабатывают все

Отправлено спустя 8 минут 45 секунд:
про клик я так и не понял зачем он если кнопка и без него работает а так же и слайдер и ввод значения всё автоматом передаётся на контролер

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#24

Сообщение aidar_i » 28.04.2022{, 07:34}

Di123 писал(а):
28.04.2022{, 07:17}
Можете ещё расковырять блок кнопки и вынести в параметр цвет кода цвета

Отправлено спустя 1 минуту 35 секунд:
Ну или на выбор предоставить в параметрах несколько цветов
Поковырялся, могу только задать цвета кнопок, изменил в библиотеке файл theme.h, сделал цвета кнопки, мини кнопки и Обновление разными. Но не смог вывести в параметры, чтобы менять цвет каждой кнопки, для этого нужно переписать функцию void BUTTON(const char* name, const char* value, uint32_t background_color) { }, добавив туда Цвет. Я не смог, может кто нибудь разбирается в этом и сделает.
СпойлерПоказать
IMG_20220428_093416.jpg
Замените файл в библиотеке
themes.h
Там в строках 64-66 можно самому менять цвет, я там отметил что менять. Вот эти строки:
//Цвет кнопок менять ниже: background-color: цвет в hex
"input[type=\"submit\"] {max-width:350px;height:60px;font-size:28px;width:90%;margin:8px 5px;background-color:#4CAF50;border:none;border-radius:8px;color:white;cursor:pointer;}\n"
"input[type=\"button\"] {max-width:350px;height:60px;font-size:28px;width:90%;margin:8px 5px;background-color:#FF0000;border:none;border-radius:8px;color:white;cursor:pointer;}\n"
".miniButton{height:40px !important;font-size:20px!important;width:auto!important;background-color:#ffcc00!important;;}\n"
Отправлено спустя 4 минуты 26 секунд:
Di123 писал(а):
28.04.2022{, 07:25}
кнопка мини тоже дублируется везде
вытаскиваеш 4 штуки при нажатии на одну срабатывают все
Об этом писал выше, исправлю.
Di123 писал(а):
28.04.2022{, 07:25}
про клик я так и не понял зачем он если кнопка и без него работает а так же и слайдер и ввод значения всё автоматом передаётся на контролер
Пример в режиме Клик, поэтому и работает так.
Для скачивания вложений Вы должны быть зарегистрированы.

Аватара пользователя
Di123
Капитан
Сообщения: 811
Зарегистрирован: 03.11.2018{, 19:38}
Репутация: 25
Имя: Дмитрий

Простой конструктор веб интерфейса для esp8266 и ESP32

#25

Сообщение Di123 » 28.04.2022{, 14:01}

когда тестить

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#26

Сообщение aidar_i » 28.04.2022{, 15:53}

Di123 писал(а):
28.04.2022{, 14:01}
когда тестить
Отправил на личку
СпойлерПоказать
IMG_20220428_170815.jpg
IMG_20220428_170540.jpg
Для скачивания вложений Вы должны быть зарегистрированы.

Аватара пользователя
Imran
Рядовой
Сообщения: 62
Зарегистрирован: 08.11.2017{, 20:53}
Репутация: 2
Имя: Имран

Простой конструктор веб интерфейса для esp8266 и ESP32

#27

Сообщение Imran » 29.04.2022{, 15:08}

aidar_i писал(а):
27.04.2022{, 11:51}
Вывод значений же есть в блоках ввода
ошибся ввод покозаний :)

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#28

Сообщение aidar_i » 29.04.2022{, 16:26}

Imran писал(а):
29.04.2022{, 15:08}
aidar_i писал(а):
27.04.2022{, 11:51}
Вывод значений же есть в блоках ввода
ошибся ввод покозаний :)
Уже есть, немного потерпите, тестим, исправляем.

av
Подполковник
Сообщения: 1411
Зарегистрирован: 25.09.2017{, 13:25}
Репутация: 125
Имя: Алексей

Простой конструктор веб интерфейса для esp8266 и ESP32

#29

Сообщение av » 29.04.2022{, 17:51}

aidar_i писал(а):
28.04.2022{, 07:39}
Поковырялся, могу только задать цвета кнопок, изменил в библиотеке файл theme.h, сделал цвета кнопки, мини кнопки и Обновление разными. Но не смог вывести в параметры, чтобы менять цвет каждой кнопки, для этого нужно переписать функцию void BUTTON(const char* name, const char* value, uint32_t background_color) { }, добавив туда Цвет. Я не смог, может кто нибудь разбирается в этом и сделает.
Айдар можно попробовать добавить вход цвета в пользовательский блок с типом unsigned long integer, далее с созданного входа передавать в функцию кнопки числовой код цвета. Только нужна таблица цветов в числовом выражении для вставки константой на созданный вход. Примерно так же это работает с цветными дисплеями TFT. Допустим белый цвет в числовом выражении будет иметь значение 65535, а красный цвет 63488. Вставляем эти значения на созданный вход цвета константой или через переключатель для изменения цвета в процессе выполнения программы. Если будут сложности с таблицей цветов можно создать доп.блок конвертации цвета из RGB в unsigned long integer. А таблица цвета в формате RGB доступна на множестве онлайн конвертеров.

artemka19
Сержант
Сообщения: 153
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 59
Откуда: Питер
Имя: Артем

Простой конструктор веб интерфейса для esp8266 и ESP32

#30

Сообщение artemka19 » 29.04.2022{, 22:32}

бедняга мк)))

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#31

Сообщение aidar_i » 29.04.2022{, 23:48}

av писал(а):
29.04.2022{, 17:51}
Айдар можно попробовать добавить вход цвета в пользовательский блок с типом unsigned long integer, далее с созданного входа передавать в функцию кнопки числовой код цвета. Только нужна таблица цветов в числовом выражении для вставки константой на созданный вход. Примерно так же это работает с цветными дисплеями TFT. Допустим белый цвет в числовом выражении будет иметь значение 65535, а красный цвет 63488. Вставляем эти значения на созданный вход цвета константой или через переключатель для изменения цвета в процессе выполнения программы. Если будут сложности с таблицей цветов можно создать доп.блок конвертации цвета из RGB в unsigned long integer. А таблица цвета в формате RGB доступна на множестве онлайн конвертеров.
Все это круто, кто бы это сделал?

Отправлено спустя 1 минуту 46 секунд:
Я остановился на этом 3 цвета. Submit сделал коричневым и желтым
СпойлерПоказать
WhatsApp Image 2022-04-29 at 21.38.51.jpeg
СпойлерПоказать
Безымянный.jpg
Отправлено спустя 7 часов 43 минуты 20 секунд:
aidar_i писал(а):
27.04.2022{, 20:06}
Айдар можно попробовать добавить вход цвета в пользовательский блок с типом unsigned long integer, далее с созданного входа передавать в функцию кнопки числовой код цвета.
Оказывается можно, мне подсказали как, сделаю.
Только цвета будут прописаны в библиотеке, просто код передать не получается, передавать нужно будет название, например, redButton.
Если нужен будет другой цвет можно в библиотеке изменить название и в 2х местах хекс цвета, и эти 2 строки добавить в библиотеку, и всё, я потом объясню.
Для скачивания вложений Вы должны быть зарегистрированы.

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#32

Сообщение aidar_i » 02.05.2022{, 18:55}

Поработал с кнопками немного
СпойлерПоказать
Для испытаний выкладываю блоки и пример, где мини кнопки. Как цвета свои установить, написано в описании блока.
Скачивайте только те форумчане, кто готов тестировать, после доводки будет выложен с исправлениями в отдельную тему.
Блоки установите с этого файла, их много.
GiverPortal.ubl
GyverPortal Кнопки цвета.flp
Отправлено спустя 32 минуты 43 секунды:
Главное, измененная библиотека
viewtopic.php?p=114422#p114432
Прежние блоки и библиотеки удалите
Для скачивания вложений Вы должны быть зарегистрированы.

artemka19
Сержант
Сообщения: 153
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 59
Откуда: Питер
Имя: Артем

Простой конструктор веб интерфейса для esp8266 и ESP32

#33

Сообщение artemka19 » 03.05.2022{, 00:53}

добавил Контроль Статуса Соединения с еспшкой в библиотеку Гайвера (в файл GyverPortal.h (строка 65-110)):
(скрипт делает GET запрос на esp8266/32 каждые 2 секунды и если ответ от нее не равен 200, то меняет цвет и надпись)

1.png


2.png

просто замените библиотеку или файл "GyverPortal.h" у себя по пути "portable\sketchbook\libraries\GyverPortal_izm\src\GyverPortal.h"
СпойлерПоказать
библиотека со статусом соединения.7z
Для скачивания вложений Вы должны быть зарегистрированы.

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#34

Сообщение aidar_i » 03.05.2022{, 02:37}

Предлагаю дополнять библиотеку новыми возможностями. В принципе это просто. По кнопкам даже есть сайт, где нажав на кнопку можно получить готовый код, немного его подправив , вставить в библиотеку. Кто разбирается в css кодах, можете это сделать. Чтобы не было путаницы, обозначайте папку библиотеки GyverPortal_izm1, 2 и тп., вносите изменения в последний вариант библиотеки, проверив и скачав отсюда. Я в прежнем своем сообщении дал ссылку на эту измененную библиотеку. Следующим названием папки библиотеки будет GyverPortal_izm1.

Отправлено спустя 2 часа 14 минут 29 секунд:
artemka19 писал(а):
03.05.2022{, 00:53}
добавил Контроль Статуса Соединения с еспшкой в библиотеку Гайвера (в файл GyverPortal.h (строка 65-110)):
(скрипт делает GET запрос на esp8266/32 каждые 2 секунды и если ответ от нее не равен 200, то меняет цвет и надпись)
Когда есть связь , контроль моргает частотой запроса 2 сек, можно сделать, чтобы горел постоянно зеленым?

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#35

Сообщение aidar_i » 03.05.2022{, 05:01}

Привязал и кнопки Submit к цветам.
GyverPortal Кнопки.flp
Библиотека, добавил в библиотеку , измененную от artemka19
GyverPortal_izm1.rar
СпойлерПоказать
IMG_20220503_065530.jpg
В библиотеку добавлена индикация значения положения слайдера, слева от слайдера.
Забыл блоки выложить отдельным файлом.
Используйте пока прежние, обновите блоки кнопок и́з примера
Для скачивания вложений Вы должны быть зарегистрированы.

artemka19
Сержант
Сообщения: 153
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 59
Откуда: Питер
Имя: Артем

Простой конструктор веб интерфейса для esp8266 и ESP32

#36

Сообщение artemka19 » 03.05.2022{, 11:42}

aidar_i писал(а):
03.05.2022{, 05:01}
контроль моргает частотой запроса 2 сек, можно сделать, чтобы горел постоянно зеленым?
в 7.5.2?

когда тестил на 7.5.1 (с примером как на скрине), не моргало))

гляну позже что там в 7.5 2

artemka19
Сержант
Сообщения: 153
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 59
Откуда: Питер
Имя: Артем

Простой конструктор веб интерфейса для esp8266 и ESP32

#37

Сообщение artemka19 » 03.05.2022{, 11:51}

сейчас проверил еще раз в 7.5.1 - все нормально, не моргает, даже на телефоне:
СпойлерПоказать
Screenshot_20220503-114756_Opera.jpg
надо значит смотреть что там в 7.5.2...
Для скачивания вложений Вы должны быть зарегистрированы.

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#38

Сообщение aidar_i » 03.05.2022{, 12:46}

artemka19 писал(а):
03.05.2022{, 11:51}
сейчас проверил еще раз в 7.5.1 - все нормально, не моргает, даже на телефоне
У меня когда нет подключения, красный, когда подключено зеленый с красным переключаются.

artemka19
Сержант
Сообщения: 153
Зарегистрирован: 03.09.2020{, 15:41}
Репутация: 59
Откуда: Питер
Имя: Артем

Простой конструктор веб интерфейса для esp8266 и ESP32

#39

Сообщение artemka19 » 03.05.2022{, 18:46}

aidar_i писал(а):
03.05.2022{, 11:51}
меня когда нет подключения, красный, когда подключено зеленый с красным переключаются
а на выходах кнопок в проекте висит что нибудь при этом?

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

Простой конструктор веб интерфейса для esp8266 и ESP32

#40

Сообщение aidar_i » 03.05.2022{, 20:50}

artemka19 писал(а):
03.05.2022{, 18:46}
а на выходах кнопок в проекте висит что нибудь при этом?
Нет, пример просто с кнопками.

Ответить

Вернуться в «Полезные ссылки»