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

[Di123]

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

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

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

[aidar_i]

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

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

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

[Di123]

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

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

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

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

[aidar_i]

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

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

Поковырялся, могу только задать цвета кнопок, изменил в библиотеке файл theme.h, сделал цвета кнопки, мини кнопки и Обновление разными. Но не смог вывести в параметры, чтобы менять цвет каждой кнопки, для этого нужно переписать функцию void BUTTON(const char* name, const char* value, uint32_t background_color) { }, добавив туда Цвет. Я не смог, может кто нибудь разбирается в этом и сделает.

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

Замените файл в библиотеке

themes.h

(6.65 КБ) 47 скачиваний

Там в строках 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 секунд:

кнопка мини тоже дублируется везде
вытаскиваеш 4 штуки при нажатии на одну срабатывают все

Об этом писал выше, исправлю.

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

Пример в режиме Клик, поэтому и работает так.

[Di123]

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

[aidar_i]

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

Отправил на личку

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

[Imran]

Вывод значений же есть в блоках ввода

ошибся ввод покозаний

[aidar_i]

Вывод значений же есть в блоках ввода

ошибся ввод покозаний

Уже есть, немного потерпите, тестим, исправляем.

[artemka19]

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

[aidar_i]

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

Все это круто, кто бы это сделал?

Отправлено спустя 1 минуту 46 секунд:
Я остановился на этом 3 цвета. Submit сделал коричневым и желтым

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

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

Безымянный.jpg (35.21 КБ) 1304 просмотра

Отправлено спустя 7 часов 43 минуты 20 секунд:

Айдар можно попробовать добавить вход цвета в пользовательский блок с типом unsigned long integer, далее с созданного входа передавать в функцию кнопки числовой код цвета.

Оказывается можно, мне подсказали как, сделаю.
Только цвета будут прописаны в библиотеке, просто код передать не получается, передавать нужно будет название, например, redButton.
Если нужен будет другой цвет можно в библиотеке изменить название и в 2х местах хекс цвета, и эти 2 строки добавить в библиотеку, и всё, я потом объясню.

[aidar_i]

Поработал с кнопками немного

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

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

GiverPortal.ubl

(1.55 МБ) 52 скачивания

GyverPortal Кнопки цвета.flp

(310.81 КБ) 48 скачиваний

Отправлено спустя 32 минуты 43 секунды:
Главное, измененная библиотека
viewtopic.php?p=114422#p114432
Прежние блоки и библиотеки удалите

[artemka19]

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

просто замените библиотеку или файл "GyverPortal.h" у себя по пути "portable\sketchbook\libraries\GyverPortal_izm\src\GyverPortal.h"

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

библиотека со статусом соединения.7z

(479.74 КБ) 48 скачиваний

[aidar_i]

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

Отправлено спустя 2 часа 14 минут 29 секунд:

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

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

[aidar_i]

Привязал и кнопки Submit к цветам.

GyverPortal Кнопки.flp

(463.02 КБ) 56 скачиваний

Библиотека, добавил в библиотеку , измененную от artemka19

GyverPortal_izm1.rar

(337.22 КБ) 43 скачивания

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

В библиотеку добавлена индикация значения положения слайдера, слева от слайдера.
Забыл блоки выложить отдельным файлом.
Используйте пока прежние, обновите блоки кнопок и́з примера

[artemka19]

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

в 7.5.2?

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

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

[artemka19]

сейчас проверил еще раз в 7.5.1 - все нормально, не моргает, даже на телефоне:

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

надо значит смотреть что там в 7.5.2...

[aidar_i]

сейчас проверил еще раз в 7.5.1 - все нормально, не моргает, даже на телефоне

У меня когда нет подключения, красный, когда подключено зеленый с красным переключаются.

[artemka19]

меня когда нет подключения, красный, когда подключено зеленый с красным переключаются

а на выходах кнопок в проекте висит что нибудь при этом?

[aidar_i]

а на выходах кнопок в проекте висит что нибудь при этом?

Нет, пример просто с кнопками.

[artemka19]

подправил скрипт Статуса соединения с есп (переименовал переменные чтоб не пересекались с Гайверовскими и пр.)

демо-видео:
https://disk.yandex.ru/i/BSJGJsJTUC0nAg

Библиотека и демо-проект из видео:

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

GyverPortal_izm2.7z

(479.51 КБ) 54 скачивания

bandicam 2022-05-04 00-30-28-973.mp4

(3.69 МБ) 61 скачивание