Home
- Эта страница - список всех функций и методов библиотеки. Подробную информацию по использованию смотри на остальных страницах
- Оглавление ищи справа на полной версии сайта и снизу на мобильной
- Примеры есть в папке с библиотекой
- Документация в разработке, информация постепенно добавляется
| 🔥🔥🔥 Обратите внимание на новую библиотеку GyverHub - это как GyverPortal, только сильно проще, удобнее, работает через Интернет и интегрируется с умным домом! 🔥🔥🔥 |
|---|
Система
// ======== СОЗДАНИЕ СТРАНИЦЫ ========
// скрипты/стили из памяти прошивки
GP.BUILD_BEGIN(); // начать построение, ширина колонки 350px
GP.BUILD_BEGIN(ширина); // + ширина колонки в px [int]
GP.BUILD_BEGIN(тема); // + тема из памяти прошивки [доступные темы: GP_LIGHT, GP_DARK]
GP.BUILD_BEGIN(тема, ширина); // + ширина колонки в px [int]
// скрипты/стили из SPIFFS памяти
GP.BUILD_BEGIN_FILE(); // начать построение, файл скриптов скачается из памяти /gp_data/scripts.js (см. папку data библиотеки), ширина колонки 350px
GP.BUILD_BEGIN_FILE(ширина); // + ширина колонки в px [int]
GP.BUILD_BEGIN_FILE(тема); // + тема из файла /gp_data/стиль (см. папку data библиотеки). Указывать имя строкой без расширения [доступные темы: "GP_LIGHT", "GP_DARK"]
GP.BUILD_BEGIN_FILE(тема, ширина); // + ширина колонки в px [int]
GP.BUILD_END(); // завершить построение (завершающий HTML код)
// =============== ТЕМА ==============
// установить тему
GP.THEME(тема); // из памяти прошивки [доступные темы: GP_LIGHT, GP_DARK]
GP.THEME_FILE(имя); // из файла /gp_data/стиль (см. папку data библиотеки). Указывать имя строкой без расширения [доступные темы: "GP_LIGHT", "GP_DARK"]
// ============== UPDATE =============
// механизм обновления
GP.UPDATE(список); // Передать строку - "список" компонентов через запятую без пробелов [пример: "id1,id2,id5"]
GP.UPDATE(список, период); // + период обновления в мс [int] (умолч. 1000)
GP.UPDATE_CLICK(upd, clicks); // вызвать update у компонентов в списке upd [строка] при клике по компонентам из списка clicks [строка]
// =============== EVAL ==============
// выполнить JS код. Нужно подключить update на указанное имя
GP.EVAL(имя); // выполнит код, отправленный в update
GP.EVAL(имя, код); // выполнить указанный код при ответе (любым текстом) на update
// ============ JQUERY UPD ===========
// механизм обновления JQUERY
GP.JQ_SUPPORT(); // поддержка jquery. Файл скачается с https://code.jquery.com/
GP.JQ_SUPPORT_FILE(); // поддержка jquery, файл скачается из памяти (/gp_data/jquery.js)
GP.JQ_UPDATE_BEGIN(); // начать обновляемый блок с периодом 1 секунда. Один на страницу!
GP.JQ_UPDATE_BEGIN(период); // + период обновления в мс [int]
GP.JQ_UPDATE_BEGIN(период, задержка); // + задержка клика [int] (умолч. 100мс)
GP.JQ_UPDATE_END(); // закончить обновляемый блок
// ============== RELOAD =============
GP.RELOAD(имя); // скрытый блок перезагрузки страницы. Добавь его "имя" в UPDATE и ответь 1 на update, чтобы обновить страницу
GP.RELOAD_CLICK(список); // клик по указанным в списке компонентам перезагружает страницу [пример: "id1,id2,id5"]
GP.setTimeout(таймаут); // таймаут ожадания ответа сервера для текущей страницы (вызывать в конструкторе сразу после BUILD BEGIN), мс [int] (умолч. 1000)
// =============== INFO ==============
GP_VERSION; // строка с версией библиотеки GyverPortal [const char*]
GP.FILE_MANAGER(FS); // файловый менеджер. Передай &ссылку на свою файловую систему [например &LittleFS, &SPIFFS, &SD]
GP.FILE_MANAGER(FS, путь); // + указать путь, по которому выводить файлы [пример "/myData/foler/"]
GP.SYSTEM_INFO(); // таблица с системной информацией
GP.SYSTEM_INFO(версия); // + версия вашей программы (в таблице появится строка Version с указанным текстом), [строка]
GP.SYSTEM_INFO(версия, ширина); // + ширина строкой "100px", "25%" и так далее [строка]
GP.setTimeUpdatePeriod(период); // период запроса обновления времени для systemTime/Date, мс [uint32_t] (умолч. 10*60*1000ul)
GP.ONLINE_CHECK(); // невидимый компонент. Проверка связи с esp, в случае отсутствия связи в названии вкладки появится символ 🚫
GP.ONLINE_CHECK(период); // + период проверки в мс [int] (умолч. 5000)Форматирование и дизайн
// ========== ФОРМАТИРОВАНИЕ =========
GP.BREAK(); // перенести строку
GP.HR(); // горизонтальная линия-разделитель
GP.HR(цвет); // + цвет из списка (см. GP. Цвета) или цвет в формате PSTR("#rrggbb")
// =========== ОБЪЕДИНЕНИЕ ==========
// объединение компонентов по горизонтали
GP.BOX_BEGIN(); // начать
GP.BOX_BEGIN(выравнивание); // + выравнивание [GP_CENTER, GP_LEFT, GP_RIGHT, GP_JUSTIFY] (умолч. GP_JUSTIFY)
GP.BOX_BEGIN(выравнивание, ширина); // + ширина строкой "100px", "25%" и так далее [строка] (умолч. "100%")
GP.BOX_BEGIN(выравнивание, ширина, top);// + выравнивание по верхнему краю [bool] (умолч. false)
Прототип: GP.BOX_BEGIN(GP_JUSTIFY, "100%");
GP.BOX_END(); // завершить объединение
// =============== БЛОК ==============
// объединение компонентов (в т.ч. BOX) по вертикали
// GP_DIV_RAW - невидимый блок без отступов
// GP_DIV - невидимый блок со стандартными отступами
// GP_TAB - блок-подложка с цветным фоном и заголовком на цветной панели (опционально)
// GP_THIN - обведённый прозрачный блок с заголовком в разрыве (опционально)
GP.BLOCK_BEGIN(тип); // + тип [GP_DIV_RAW, GP_DIV, GP_TAB, GP_THIN]
GP.BLOCK_BEGIN(тип, ширина); // + ширина строкой "100px", "25%" и так далее [строка] (умолч. "100%")
GP.BLOCK_BEGIN(тип, ширина, текст); // + текст (будет выведен как заголовок блока) [строка]
GP.BLOCK_BEGIN(тип, ширина, текст, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_DEFAULT) или цвет в формате PSTR("#rrggbb")
Прототип: GP.BLOCK_BEGIN(тип, "", "", GP_DEFAULT);
GP.BLOCK_END(); // завершить отрисовку блока
// =============== СЕТКА =============
// сборка BLOCK блоков по горизонтали
GP.GRID_BEGIN(); // начать
GP.GRID_BEGIN(ширина); // + макс. ширина [int] (умолч. 0, отключено)
GP.GRID_END(); // завершить сетку
GP.GRID_RESPONSIVE(ширина); // располагать BLOCK блоки внутри сетки по вертикали, если ширина меньше указанной в пикселях [int]. Указывать после выбора темы!
// ===== ПАНЕЛЬ УПРАВЛЕНИЯ АВТО ====
// шаблон админ-панели с меню слева (выпадающее на мобильных устройствах)
// автоматическое меню (только указанные кнопки)
GP.UI_BEGIN(заголовок, адреса, названия); // указать список адресов (url) и названий кнопок [пример "/,/cfg,/ota" и "Home,Config,OTA"]
GP.UI_BEGIN(заголовок, адреса, названия, цвет); // + цвет меню из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.UI_BEGIN(заголовок, адреса, названия, цвет, ширина); // + ширина колонки в пикселях (заменит указанную в BUILD_BEGIN!) [int] (умолч. 1000)
// ...
// далее контент страницы
// ...
GP.UI_END(); // завершить главную колонку
// ==== ПАНЕЛЬ УПРАВЛЕНИЯ РУЧНАЯ ====
// шаблон админ-панели с меню слева (выпадающее на мобильных устройствах)
// ручное меню (можно добавить любой контент)
GP.UI_MENU(заголовок); // начать шаблон панели, указать заголовок [строка]
GP.UI_MENU(заголовок, цвет); // + цвет меню из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
// далее контент меню
// ...
GP.UI_LINK(ссылка, имя); // добавить кнопку-ссылку в меню, их может быть сколько угодно
// ...
GP.UI_BODY(); // начать главную колонку
GP.UI_BODY(ширина); // + ширина в px [int] (умолч. 1000)
// ...
// далее контент страницы
// ...
GP.UI_END(); // завершить главную колонку
// ============ НАВИГАЦИЯ ===========
GP.NAV_TABS_LINKS(список адресов, список подписей); // блок с кнопками-ссылками
GP.NAV_TABS_LINKS(список адресов, список подписей, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.NAV_TABS(список); // автоматическая панель динамической навигации, передать "список" названий вкладок [строка]
GP.NAV_TABS(список, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.NAV_BLOCK_BEGIN(); // начало вкладки навигации
GP.NAV_BLOCK_END(); // конец вкладки навигации
GP.NAV_TABS_M(имя, список); // ручная панель динамической навигации, передать имя и "список" названий вкладок [строка]
GP.NAV_TABS_M(имя, список, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.NAV_BLOCK_BEGIN(имя, номер); // начало вкладки навигации. Имя [строка] должно совпадать с именем NAV_TABS_M, номера по порядку с 0 (0, 1, 2..) [int]
GP.NAV_BLOCK_END(); // конец вкладки навигации
// =============== ТАБЛИЦА ==============
GP.TABLE_BEGIN(); // начать таблицу
GP.TABLE_BEGIN(ширины); // + список ширин столбцов "40%,20px,60%", должно соответствовать кол-ву столбцов [строка]
GP.TABLE_BEGIN(ширины, выравнивания); // + список выравниваний из макроса GP_ALS, должен соответствовать кол-ву столбцов [пример: GP_ALS(GP_LEFT, GP_CENTER...) ]
GP.TABLE_BEGIN(ширины, выравнивания, ширина); // + ширина всей таблицы строкой "100px", "25%" и так далее [строка] (умолч. "100%")
Прототип: GP.TABLE_BEGIN("", nullptr, "100%");
GP.TABLE_END(); // завершить таблицу
GP.TR(); // начать СТРОКУ таблицы
GP.TR(выравнивание); // + выравнивание [GP_CENTER, GP_LEFT, GP_RIGHT, GP_JUSTIFY]
GP.TD(); // начать СТОЛБЕЦ таблицы
GP.TD(выравнивание); // + выравнивание [GP_CENTER, GP_LEFT, GP_RIGHT, GP_JUSTIFY]
GP.TD(выравнивание, объед. столб); // + объединение столбцов [int] (умолч. 1, т.е. без объединения)
GP.TD(выравнивание, объед. столб, объед. строк); // + объединение строк [int] (умолч. 1, т.е. без объединения)
Прототип: GP.TD(GP_CENTER, 1, 1);
GP.TABLE_BORDER(вкл) // включить отображение границ [bool] (умолч. 0, выкл)
// ============== СПОЙЛЕР =============
GP.SPOILER_BEGIN(текст); // начать спойлер
GP.SPOILER_BEGIN(текст, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.SPOILER_END(); // завершить спойлерПодписи
// ============ ИМЯ ОКНА ============
GP.PAGE_TITLE(текст); // переименовать окно в браузере [строка]
GP.PAGE_TITLE(текст, имя); // + имя для update. Текст из ответа на update станет заголовком окна [строка]
// ============ ПОДПИСИ =============
GP.TITLE(текст); // заголовок
GP.TITLE(текст, имя); // + имя компонента (для update())
GP.TITLE(текст, имя, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_DEFAULT) или цвет в формате PSTR("#rrggbb")
GP.TITLE(текст, имя, цвет, размер); // + размер в пикселях [int] (умолч. 0, по факту 24px)
GP.TITLE(текст, имя, цвет, размер, жирный); // + жирный текст [bool] (умолч. 0)
GP.LABEL(текст); // подпись (для кнопок, полей, чекбоксов итд)
GP.LABEL(текст, имя); // + имя компонента (для update())
GP.LABEL(текст, имя, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_DEFAULT) или цвет в формате PSTR("#rrggbb")
GP.LABEL(текст, имя, цвет, размер); // + размер в пикселях [int] (умолч. 0, по факту 20px)
GP.LABEL(текст, имя, цвет, размер, жирный); // + жирный текст [bool] (умолч. 0)
GP.LABEL(текст, имя, цвет, размер, жирный, перенос); // + перенос тескта [bool] (умолч. 0)
GP.LABEL_BLOCK(текст); // яркий текстовый лейбл
GP.LABEL_BLOCK(текст, имя); // + имя компонента (для update())
GP.LABEL_BLOCK(текст, имя, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.LABEL_BLOCK(текст, имя, цвет, размер); // + размер в пикселях [int] (умолч. 0, по факту 18px)
GP.LABEL_BLOCK(текст, имя, цвет, размер, жирный); // + жирный текст [bool] (умолч. 0)
GP.SPAN(текст); // просто текст
GP.SPAN(текст, выравнивание); // + выравнивание (GP_CENTER, GP_LEFT, GP_RIGHT, GP_JUSTIFY), умолч. GP_CENTER
GP.SPAN(текст, выравнивание, имя); // + имя компонента (для update())
GP.SPAN(текст, выравнивание, имя, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_DEFAULT) или цвет в формате PSTR("#rrggbb")
GP.PLAIN(текст); // просто текст
GP.PLAIN(текст, имя); // + имя компонента (для update())
GP.PLAIN(текст, имя, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.BOLD(текст); // жирный текст
GP.BOLD(текст, имя); // + имя компонента (для update())
GP.BOLD(текст, имя, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
// ============ ПОДСКАЗКА ===========
GP.HINT(имя, текст); // всплывающая подсказка с текстом "текст" для элемента "имя". Вызывать после добавления компонентаИконки
// ============= ИКОНКИ =============
GP.ICON_SUPPORT(); // добавить поддержку иконок FontAwesome (требуется подключение к Интренет)
// онлайн-иконка (требует подключение к Интернет)
String GP.ICON(имя); // имена - https://fontawesome.com/v4/icons/ , указывать без "fa-" [например "cloud", "gear"]
String GP.ICON(имя, размер); // + размер в пикселях [int] (умолч. 20)
String GP.ICON(имя, размер, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_DEFAULT) или цвет в формате PSTR("#rrggbb")
// SVG иконка из файла SPIFFS (должнен быть настроен download)
String GP.ICON_FILE(uri); // полный путь к файлу [например "/icons/icon.svg"]
String GP.ICON_FILE(uri, размер); // + размер в пикселях [int] (умолч. 20)
String GP.ICON_FILE(uri, размер, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_DEFAULT) или цвет в формате PSTR("#rrggbb")
Примечание: результат выполнения - строка, её нужно вывести вручную. Например:
GP.LABEL(GP.ICON("gear")); // лейбл с иконкой
GP.BUTTON("btn", GP.ICON("gear") + "Settings"); // кнопка с иконкой и текстом
// ========== ИКОНКИ-КНОПКИ ==========
// имя - имя кнопки для обработки, остальные аргументы по аналогии с просто иконками
// онлайн-иконки
GP.ICON_BUTTON(имя, имя_иконки);
GP.ICON_BUTTON(имя, имя_иконки, размер);
GP.ICON_BUTTON(имя, имя_иконки, размер, цвет);
// иконки из файлов
GP.ICON_FILE_BUTTON(имя, uri_иконки);
GP.ICON_FILE_BUTTON(имя, uri_иконки, размер);
GP.ICON_FILE_BUTTON(имя, uri_иконки, размер, цвет);Popup
// ============= POP UP =============
// окна вызываются ответом на update, помести имя в список UPDATE() или вызови через UPDATE_CLICK()
// всплывающее окно предупреждения
GP.ALERT(имя); // Ответь на update текстом, он будет отображён в окне
GP.ALERT(имя, текст); // Ответь на update цифрой 1, будет отображён указанный текст
// всплывающее окно с полем вводом текста. При нажатии на ОК отправит введённый текст через событие click
GP.PROMPT(имя); // Ответь на update текстом, он будет отображён в окне
GP.PROMPT(имя, текст); // Ответь на update цифрой 1, будет отображён указанный текст
// всплывающее окно с кнопкой ДА и ОТМЕНА. Отправит результат через событие click (принимать нужно через clickBool())
GP.CONFIRM(имя); // Ответь на update текстом, он будет отображён в окне
GP.CONFIRM(имя, текст); // Ответь на update цифрой 1, будет отображён указанный текстВвод-вывод текста
// ============== ВВОД ==============
GP.NUMBER(имя); // поле ввода числа int
GP.NUMBER(имя, подсказка); // + подсказка [строка]
GP.NUMBER(имя, подсказка, число); // + число/переменная [int]
GP.NUMBER(имя, подсказка, число, ширина); // + ширина строкой "100px", "25%" и так далее [строка] (умолч. "")
GP.NUMBER(имя, подсказка, число, ширина, откл); // + режим "только чтение" - true [bool] (умолч. false)
Прототип: GP.NUMBER("", "", INT32_MAX, "", false);
GP.NUMBER_F(имя); // поле ввода числа float
GP.NUMBER_F(имя, подсказка); // + подсказка [строка]
GP.NUMBER_F(имя, подсказка, число); // + число/переменная [float]
GP.NUMBER_F(имя, подсказка, число, знаков); // + кол-во знаков после запятой (умолч. 2) [int]
GP.NUMBER_F(имя, подсказка, число, знаков, ширина); // + ширина строкой "100px", "25%" и так далее [строка] (умолч. "")
GP.NUMBER_F(имя, подсказка, число, знаков, ширина, откл); // + режим "только чтение" - true [bool] (умолч. false)
Прототип: GP.NUMBER_F("", "", NAN, 2, "", false);
GP.TEXT(имя); // поле ввода текста
GP.TEXT(имя, подсказка); // + подсказка [строка]
GP.TEXT(имя, подсказка, текст); // + текст [строка]
GP.TEXT(имя, подсказка, текст, ширина); // + ширина строкой "100px", "25%" и так далее [строка] (умолч. "")
GP.TEXT(имя, подсказка, текст, ширина, макс. длина); // + макс длина [int] (0 чтобы отключить)
GP.TEXT(имя, подсказка, текст, ширина, макс. длина, паттерн); // + паттерн вида http://htmlbook.ru/html/input/pattern
GP.TEXT(имя, подсказка, текст, ширина, макс. длина, паттерн, откл); // + режим "только чтение" - true [bool] (умолч. false)
Прототип: GP.TEXT("", "", "", "", 0, "", false)
GP.PASS(имя); // поле ввода текста
GP.PASS(имя, подсказка); // + подсказка [строка]
GP.PASS(имя, подсказка, текст); // + текст [строка]
GP.PASS(имя, подсказка, текст, ширина); // + ширина строкой "100px", "25%" и так далее [строка] (умолч. "")
GP.PASS(имя, подсказка, текст, ширина, макс. длина); // + макс длина, [int] (0 чтобы отключить)
GP.PASS(имя, подсказка, текст, ширина, макс. длина, паттерн); // + паттерн вида http://htmlbook.ru/html/input/pattern
GP.PASS(имя, подсказка, текст, ширина, макс. длина, паттерн, откл); // + режим "только чтение" - true [bool] (умолч. false)
Прототип: GP.PASS("", "", "", "", 0, "", false);
GP.PASS_EYE(...); // то же самое, но с "глазом"!
GP.AREA(имя); // многострочное поле для ввода текста
GP.AREA(имя, высота); // + высота в количестве строк [int] (умолч. 1)
GP.AREA(имя, высота, текст); // + отображаемый текст [строка]
GP.AREA(имя, высота, текст, ширина); // + ширина строкой "100px", "25%" и так далее [строка] (умолч. "")
GP.AREA(имя, высота, текст, ширина, откл); // + режим "только чтение" - true [bool] (умолч. false)
Прототип: GP.AREA("", 1, "", "", false);
// =============== LOG ==============
GP.AREA_LOG(); // окно лога
GP.AREA_LOG(строк); // + кол-во строк [int] (умолч. 5)
GP.AREA_LOG(строк, период); // + период обновления, мс [int] (умолч. 1000)
GP.AREA_LOG(строк, период, ширина); // + ширина строкой "100px", "25%" и так далее [строка]
Прототип: GP.AREA_LOG(5, 1000, "");
GP.AREA_LOG(лог); // окно лога ручное. Передать объект GPlog
GP.AREA_LOG(лог, строк); // + кол-во строк [int] (умолч. 5)
GP.AREA_LOG(лог, строк, период); // + период обновления, мс [int] (умолч. 1000)
GP.AREA_LOG(лог, строк, период, ширина); // + ширина строкой "100px", "25%" и так далее [строка]
Прототип: GP.AREA_LOG(log, 5, 1000, "");Форма
// ============= ФОРМА ==============
GP.FORM_BEGIN(имя); // начать форму с именем (имя)
GP.FORM_END(); // завершить форму
GP.SUBMIT(текст); // кнопка отправки формы
GP.SUBMIT(текст, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.SUBMIT(текст, цвет, класс); // + css класс (для кастомных стилей)
GP.SUBMIT_MINI(текст); // кнопка отправки формы
GP.SUBMIT_MINI(текст, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.SUBMIT_MINI(текст, цвет, класс); // + css класс (для кастомных стилей)
GP.FORM_SEND(текст); // кнопка отправки формы БЕЗ ПЕРЕЗАГРУЗКИ СТРАНИЦЫ
GP.FORM_SEND(текст, редирект); // + переадресация на указанный урл (умолч. "")
GP.FORM_SEND(текст, редирект, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.FORM_SEND(текст, редирект, цвет, класс); // + css класс (для кастомных стилей)
GP.FORM_SEND_MINI(текст); // кнопка отправки формы БЕЗ ПЕРЕЗАГРУЗКИ СТРАНИЦЫ
GP.FORM_SEND_MINI(текст, редирект); // + переадресация на указанный урл
GP.FORM_SEND_MINI(текст, редирект, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.FORM_SEND_MINI(текст, редирект, цвет, класс); // + css класс (для кастомных стилей)
GP.HIDDEN(имя, значение); // скрытый элемент
GP.FORM_SUBMIT(имя, текст); // пустая форма с кнопкой submit
GP.FORM_SUBMIT(имя, текст, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.FORM_SUBMIT(имя, текст, имя hidden, значение hidden); // пустая форма с кнопкой submit и HIDDEN компонентом
GP.FORM_SUBMIT(имя, текст, имя hidden, значение hidden, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")Файлы
// ============= ФАЙЛЫ =============
GP.FILE_UPLOAD(имя); // кнопка для загрузки файла (файлов) на сервер
GP.FILE_UPLOAD(имя, текст); // + текст на кнопке
GP.FILE_UPLOAD(имя, текст, расширения); // + разрешённые для загрузки типы данных (см тут https://www.w3schools.com/tags/att_input_accept.asp)
GP.FILE_UPLOAD(имя, текст, расширения, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.FOLDER_UPLOAD(имя); // кнопка для загрузки папки с файлами на сервер. Название файла будет содержать полный путь в указанной папке
GP.FOLDER_UPLOAD(имя, текст); // + текст на кнопке
GP.FOLDER_UPLOAD(имя, текст, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
// OTA НЕ РАБОТАЕТ ВНУТРИ ФОРМЫ
GP.OTA_FIRMWARE(); // загрузка файла прошивки для обновления
GP.OTA_FIRMWARE(текст); // + текст на кнопке
GP.OTA_FIRMWARE(текст, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.OTA_FILESYSTEM(); // загрузка файла файловой системы для обновления
GP.OTA_FILESYSTEM(текст); // + текст на кнопке
GP.OTA_FILESYSTEM(текст, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.IMAGE(ссылка); // картинка. Указать ссылку на файл в памяти
GP.IMAGE(ссылка, ширина); // + ширина строкой "100px", "25%" и так далее (умолч "", т.е. авто)
GP.VIDEO(ссылка); // видео. Указать ссылку на файл в памяти
GP.VIDEO(ссылка, ширина); // + ширина строкой "100px", "25%" и так далее (умолч "", т.е. авто)
GP.EMBED(ссылка); // текст. Указать ссылку на файл в памяти
GP.EMBED(ссылка, ширина); // + ширина строкой "100px", "25%" и так далее (умолч "", т.е. авто)
GP.EMBED(ссылка, ширина, высота); // + высота строкой
GP.CAM_STREAM(); // окно стрима с камеры (файл CamStream.h, пример esp32-stream)
GP.CAM_STREAM(ширина); // + ширина в пикселях [int] (умолч. 500) или [строка] "100px", "25%" итд
GP.CAM_STREAM(ширина, порт); // + порт, такой же как в cam_stream_begin [int] (умолч. 90)Кнопки
// ============= КНОПКА =============
GP.BUTTON(имя, текст); // кнопка
GP.BUTTON(имя, текст, id); // + id компонента, данные с которого кнопка отправит данные по click
GP.BUTTON(имя, текст, id, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.BUTTON(имя, текст, id, цвет, ширина); // + ширина строкой "100px", "25%" и так далее (умолч. "")
GP.BUTTON(имя, текст, id, цвет, ширина, откл); // + отключить кнопку [bool] (умолч. false)
GP.BUTTON(имя, текст, id, цвет, ширина, откл, перезагр); // + перезагрузка страницы после клика [bool] (умолч. false)
Прототип: GP.BUTTON("", "", "", GP_GREEN, "", 0, 0);
GP.BUTTON_MINI(имя, текст); // мини кнопка
GP.BUTTON_MINI(имя, текст, id); // + id компонента, данные с которого кнопка отправит данные по click [строка]
GP.BUTTON_MINI(имя, текст, id, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.BUTTON_MINI(имя, текст, id, цвет, ширина); // + ширина строкой "100px", "25%" и так далее [строка] (умолч. "")
GP.BUTTON_MINI(имя, текст, id, цвет, ширина, откл); // + отключить кнопку [bool] (умолч. false)
GP.BUTTON_MINI(имя, текст, id, цвет, ширина, откл, перезагр); // + перезагрузка страницы после клика [bool] (умолч. false)
Прототип: GP.BUTTON_MINI("", "", "", GP_GREEN, "", 0, 0);
// ========= КНОПКА-ССЫЛКА =========
GP.BUTTON_LINK(ссылка, текст); // кнопка-ссылка для навигации по сайту
GP.BUTTON_LINK(ссылка, текст, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.BUTTON_LINK(ссылка, текст, цвет, ширина); // + ширина строкой "100px", "25%" и так далее [строка] (умолч. "")
GP.BUTTON_LINK(ссылка, текст, цвет, ширина, имя); // + сигнал click перед переходом по ссылке на указанное имя [строка]
Прототип: GP.BUTTON_LINK("", "", GP_GREEN, "", "");
GP.BUTTON_MINI_LINK(ссылка, текст); // мини кнопка-ссылка для навигации по сайту
GP.BUTTON_MINI_LINK(ссылка, текст, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.BUTTON_MINI_LINK(ссылка, текст, цвет, ширина); // + ширина строкой "100px", "25%" и так далее [строка] (умолч. "")
GP.BUTTON_MINI_LINK(ссылка, текст, цвет, ширина, имя); // + сигнал click перед переходом по ссылке на указанное имя [строка]
Прототип: GP.BUTTON_MINI_LINK("", "", GP_GREEN, "", "");
// ========= КНОПКА-СКАЧКА =========
GP.BUTTON_DOWNLOAD(ссылка, текст); // кнопка для скачивания файла
GP.BUTTON_DOWNLOAD(ссылка, текст, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.BUTTON_DOWNLOAD(ссылка, текст, цвет, ширина); // + ширина строкой "100px", "25%" и так далее [строка] (умолч. "")
Прототип: GP.BUTTON_DOWNLOAD("", "", GP_GREEN, "");
GP.BUTTON_MINI_DOWNLOAD(ссылка, текст); // мини кнопка для скачивания файла
GP.BUTTON_MINI_DOWNLOAD(ссылка, текст, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.BUTTON_MINI_DOWNLOAD(ссылка, текст, цвет, ширина); // + ширина строкой "100px", "25%" и так далее [строка] (умолч. "")
Прототип: GP.BUTTON_MINI_DOWNLOAD("", "", GP_GREEN, "");Индикаторы и выключатели
// ========== ИНДИКАТОРЫ ============
GP.LED(имя); // зелёный - вкл, красный - выкл
GP.LED(имя, состояние); // + состояние [bool]
GP.LED(имя, состояние, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.LED_GREEN(имя); // зелёный - вкл, чёрный - выкл
GP.LED_GREEN(имя, состояние); // + состояние [bool]
GP.LED_RED(имя); // красный - вкл, чёрный - выкл
GP.LED_RED(имя, состояние); // + состояние [bool]
// =========== ВЫКЛЮЧАТЕЛИ ===========
GP.CHECK(имя); // чекбокс, умолч. выключен
GP.CHECK(имя, состояние); // + состояние [bool]
GP.CHECK(имя, состояние, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.CHECK(имя, состояние, цвет, откл); // + режим "только чтение" - true [bool] (умолч. false)
GP.SWITCH(имя); // выключатель, умолч. выключен
GP.SWITCH(имя, состояние); // + состояние [bool]
GP.SWITCH(имя, состояние, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.SWITCH(имя, состояние, цвет, откл); // + режим "только чтение" - true [bool] (умолч. false)Выбор и настройка
// ============ ДАТА-ВРЕМЯ ===========
GP.DATE(имя); // ввод даты
GP.DATE(имя, GPdate); // + значение [GPdate]
GP.DATE(имя, GPdate, откл); // + режим "только чтение" - true [bool] (умолч. false)
GP.TIME(имя); // ввод времени
GP.TIME(имя, GPtime); // + значение [GPtime]
GP.TIME(имя, GPtime, откл); // + режим "только чтение" - true [bool] (умолч. false)
// =============== ЦВЕТ ===============
GP.COLOR(имя); // выбор цвета, (умолч. чёрный)
GP.COLOR(имя, цвет); // выбор цвета [uint32_t] или [GPcolor]
GP.COLOR(имя, цвет, откл); // + режим "только чтение" - true [bool] (умолч. false)
// ============== ВЫБОР ==============
GP.SELECT(имя, список); // селектор (дропбокс)
GP.SELECT(имя, список, активный); // + текущий активный пункт [int]
GP.SELECT(имя, список, активный, нумерация); // + текущий активный пункт [int]
GP.SELECT(имя, список, активный, нумерация, откл); // + режим "только чтение" - true [bool] (умолч. false)
GP.SELECT(имя, список, активный, нумерация, откл, перезагр); // + перезагрузка страницы после выбора пункта [bool]
Прототип: GP.SELECT("", "", 0, 0, 0, 0);
// Здесь список:
// - Строка любого формата, пункты разделены запятой: "пункт1,пункт2,пункт3"
// - Массив String[], последняя строка должна быть пустой!
// - Массив char**, последняя строка должна быть пустой! (напр. char* names[] = {"p1", "p2", ""})
// ============== РАДИО ==============
GP.RADIO(имя, номер); // радио кнопка с номером (0, 1, 2...)
GP.RADIO(имя, номер, значение); // + значение [int] выбранного пункта
GP.RADIO(имя, номер, значение, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.RADIO(имя, номер, значение, цвет, откл); // + режим "только чтение" - true [bool] (умолч. false)
Прототип: GP.RADIO("", 0, 0, GP_DEFAULT, 0)
// ============== СЛАЙДЕР ==============
GP.SLIDER(имя);
GP.SLIDER(имя, значение); // слайдер 0..100
GP.SLIDER(имя, значение, мин, макс); // слайдер с шагом 1
GP.SLIDER(имя, значение, мин, макс, шаг); // + шаг
GP.SLIDER(имя, значение, мин, макс, шаг, знаков); // + кол-во знаков после запятой (умолч. 0)
GP.SLIDER(имя, значение, мин, макс, шаг, знаков, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.SLIDER(имя, значение, мин, макс, шаг, знаков, цвет, откл); // + режим "только чтение" - true [bool] (умолч. false)
Прототип: GP.SLIDER("", 0, 0, 100, 1, 0, GP_GREEN, 0);
GP.SLIDER_C(...); // тот же слайдер, но отправляет значения на каждом "тике" ползунка
// ============== СПИННЕР ==============
GP.SPINNER(имя);
GP.SPINNER(имя, значение); // спиннер
GP.SPINNER(имя, значение, мин, макс); // + минимум максимум [int/float]
GP.SPINNER(имя, значение, мин, макс, шаг); // + шаг (умолч. 1), поддерживает [int/float]
GP.SPINNER(имя, значение, мин, макс, шаг, знаков); // + кол-во знаков после запятой [int] (умолч. 0)
GP.SPINNER(имя, значение, мин, макс, шаг, знаков, цвет); // + цвет из списка (см. GP. Цвета) (умолч. GP_GREEN) или цвет в формате PSTR("#rrggbb")
GP.SPINNER(имя, значение, мин, макс, шаг, знаков, цвет, ширина); // + ширина строкой "100px", "25%" и так далее [строка] (умолч. "")
GP.SPINNER(имя, значение, мин, макс, шаг, знаков, цвет, ширина, откл); // + режим "только чтение" - true [bool] (умолч. false)
Прототип: GP.SPINNER("", 0, NAN, NAN, 1, 0, GP_GREEN, "", 0);
GP.setSpinnerPeriod(период); // период изменения значения при удержании кнопки спиннера, мс [int] (умолч. 200)Графики
// ============== ГРАФИКИ ==============
// лёгкий статичный график без масштаба
GP.PLOT<к-во осей, к-во данных>(имя, подписи, данные int16_t, int dec = 0, int height = 400);
GP.PLOT_DARK<к-во осей, к-во данных>(имя, подписи, данные int16_t, int dec = 0, int height = 400);
// статичный график с масштабом и привязкой ко времени
GP.PLOT_STOCK<к-во осей, к-во данных>(имя, подписи, массив времён, массив данных, int dec = 0, int height = 400, bool local = 0);
GP.PLOT_STOCK_DARK<к-во осей, к-во данных>(имя, подписи, массив времён, массив данных, int dec = 0, int height = 400, bool local = 0);
// динамический график, вызывает update
GP.AJAX_PLOT(имя, к-во осей, к-во точек по Х, период update, int height = 400, bool local = 0);
GP.AJAX_PLOT_DARK(имя, к-во осей, к-во точек по Х, период update, int height = 400, bool local = 0);
// + подписи осей const char**
GP.AJAX_PLOT(имя, подписи, к-во осей, к-во точек по Х, период update, int height = 400, bool local = 0);
GP.AJAX_PLOT_DARK(имя, подписи, к-во осей, к-во точек по Х, период update, int height = 400, bool local = 0);Custom
// ============== КАСТОМ ==============
GP.PAGE_BEGIN(); // начальный HTML код
GP.PAGE_BLOCK_BEGIN(); // центральный div блок
GP.PAGE_BLOCK_BEGIN(ширина); // + ширина в пикселях [int] (умолч. 350)
GP.PAGE_BLOCK_END() // центральный div блок
GP.PAGE_END(); // завершающий HTML код
GP.JS_BEGIN(); // начать js-вставку (отправляет <script>)
GP.JS_END(); // закончить js-вставку (отправляет </script>)
GP.JS_TOP(); // верхний блок JS скриптов (для кликов, слайдеров и т.д.)
GP.JS_TOP_FILE(); // файл скриптов скачается из памяти (/gp_data/scripts.js)
GP.JS_BOTTOM(); // нижний блок JS скриптов (для кликов, слайдеров и т.д.)
GP.SEND(код); // добавить свой код на страницу ("строка", F("строка"), String)
GP.SEND_P(pgm код); // добавить свой код на страницу (PGM_P, PROGMEM)Цвета
// =============== ЦВЕТА ==============
// цвет с постфиксом _B - яркий
GP_RED
GP_RED_B
GP_PINK
GP_PINK_B
GP_VIOL
GP_VIOL_B
GP_BLUE
GP_BLUE_B
GP_CYAN
GP_CYAN_B
GP_GREEN
GP_GREEN_B
GP_YELLOW
GP_YELLOW_B
GP_ORANGE
GP_ORANGE_B
GP_GRAY
GP_GRAY_B
GP_BLACK
GP_WHITECanvas
// =============== CANVAS ===============
// рисование в окне браузера
GP.REDRAW_CLICK(имя, список); // обновить CANVAS с именем имя при клике на компонент из списка [строка]
GP.CANVAS_SUPPORT(); // включить поддержку canvas (скачается из памяти прошивки)
GP.CANVAS_SUPPORT_FILE(); // включить поддержку canvas (скачается из /gp_data/canvas.js)
GP.CANVAS(имя, ширина, высота); // добавить пустой canvas (для рисования через update)
GP.CANVAS_BEGIN(имя, ширина, высота); // добавить canvas и начать рисовать (см. примеры)
GP.CANVAS_END(); // закончить и отправить Макросы
M_FORM(act, subm, args);
M_GRID(args);
M_BOX(args);
M_BOX(align, args);
M_BOX(align, width, args);
M_TABLE(args);
M_TABLE(tdw, args);
M_TABLE(tdw, als, args);
M_TABLE(tdw, als, w, args);
M_TD(args);
M_TD(al, args);
M_TD(al, cs, args);
M_TD(al, cs, rs, args);
M_TR(...);
GP_ALS(...);
M_BLOCK(args);
M_BLOCK(type, args);
M_BLOCK(type, width, args);
M_BLOCK(type, width, text, args);
M_BLOCK(type, width, text, style, args);
M_JQ_UPDATE(name, args);
M_JQ_UPDATE(name, prd, args);
M_NAV_BLOCK(args);
M_NAV_BLOCK(name, pos, args);
M_SPOILER(txt, args);
M_SPOILER(txt, style, args);Система
// ============== СИСТЕМА =============
void start(); // запустить портал
void start("host"); // запуск с поддержкой mDNS, указать адрес (см. доку).
void start("host", port); // запуск с поддержкой mDNS и указанием порта. Если mDNS не нужен - передай ""
void stop(); // остановить портал
bool state(); // проверить, запущен ли портал
bool online(); // проверить, подключен ли клиент (браузер)
void onlineTimeout(uint16_t prd); // установить таймаут онлайна (умолч. 1500)
void setBufferSize(int sz); // задать размер буфера страницы, байт (умолч. 1000)
void setFS(fs::FS *useFS); // подключить файловую систему (&LittleFS, &SPIFFS, &SD...)
void caching(bool v); // кеширование встроенных стилей/скриптов (умолч. вкл)
void clearCache(); // сбросить кеш встроенных стилей/скриптов в браузере (для разработчиков)
// ============ АВТОРИЗАЦИЯ ============
void enableAuth(char* login, char* pass); // включить авторизацию по логину-паролю
void disableAuth(); // отключить авторизацию
const char* login(); // получить логин авторизации
const char* pass(); // получить пароль авторизации
// ================ OTA ================
void enableOTA(); // подключить OTA обновление по адресу /ota_update
void enableOTA(login, pass); // + авторизация
// =============== ATTACH ==============
void attachBuild(func()); // подключить функцию-билдер страницы
void attachBuild(func(GyverPortal&)); // + передача объекта (см. Локальный портал)
void detachBuild(); // отключить
void attach(func()); // подключить функцию-обработчик действия
void attach(func(GyverPortal&)); // + передача объекта (см. Локальный портал)
void detach(); // отключить
// ================ ВРЕМЯ ===============
GPdate getSystemDate(); // получить текущую дату
GPtime getSystemTime(); // получить текущее время
uint32_t getUnix(); // получить текущее unix время
// =========== IP REMOTE CLIENT =========
IPAddress clientIP(); // вернёт IP адрес клиента
bool clientFromNet(IPAddress NetIP, uint8_t mask); // вернёт true, если IP адрес клиента принадлежит указанной сети
// ================= TICK ===============
bool tick(); // тикер портала, вызывать в loop. Вернёт true, если портал запущенФайлы
// =============== UPLOAD ==============
void uploadMode(bool m); // вкл/выкл поддержку загрузки файлов (по умолч. вкл, true)
void uploadAuto(bool mode); // автоматическая загрузка файла по uri (по умолч. вкл, true)
bool upload(); // вернёт true, если был запрос на загрузку файла
bool upload(имя); // вернёт true, если был запрос на загрузку файла с указанной кнопки
void saveFile(File file); // установить файл для загрузки вручную
void saveFile(имя); // установить файл для загрузки по пути
bool uploadEnd(); // вернёт true, если загрузка файла завершена
bool uploadAbort(); // вернёт true, если загрузка файла прервана
String& uploadName(); // имя формы загрузки файла
String& fileName(); // имя файла при загрузке
// ============== DOWNLOAD ==============
void downloadMode(bool m); // вкл/выкл поддержку скачивания файлов (по умолч. вкл, true)
void downloadAuto(bool mode); // автоматическое скачивание файла по uri (по умолч. вкл, true)
bool download(); // вернёт true, если был запрос на скачивание файла
void sendFile(File file); // отправить файл вручную
void sendFile(имя); // отправить файл по uri
// =============== DELETE ===============
void deleteAuto(bool mode); // автоматическое удаление файла по uri (по умолч. вкл, true)
bool deleteFile(); // вернёт true, если был запрос на удаление файла
String deletePath(); // путь к файлу, на который запрошено удаление
// =============== RENAME ===============
void renameAuto(bool m); // автоматическое переименование файла по uri (по умолч. вкл, true)
bool renameFile(); // вернёт true при запросе на переименование файла
String renamePath(); // имя (путь) файла для переименования. Начинается с '/'
String renamePathTo(); // новое имя (путь) файлаЛог
// ================= ВЕБ-ЛОГ =================
GPlog(); // пустой конструктор
GPlog(const char* name); // задать имя
void start(int n = 64); // запустить
void stop(); // остановить
bool state(); // лог запущен
void write(uint8_t n); // записать байт
void print(); // отправить любые данные
void println(); // отправить любые данные
char* read(); // прочитать char*
void clear(); // очистить
bool available(); // есть данные для чтенияСписок обновления
// ========== СПИСОК АВТООБНОВЛЕНИЯ ==========
list.init(количество); // инициализировать список, указать количество
list.clear(); // очистить список
list.add(адрес, имя, тип); // добавить переменную, указать имя компонента и тип
list.add(адрес, имя формы, имя, тип); // добавить переменную, ИМЯ ФОРМЫ, указать имя компонента и тип
// типы для списка
T_CSTR - массив char
T_STRING - строка String
T_TIME - время типа GPtime
T_DATE - дата типа GPdate
T_CHECK - boolean, для чекбокса
T_BYTE - целое 1 байт
T_INT - целое 4 байта
T_FLOAT - float
T_COLOR - целое 4 байта, для цветаПубличные объекты
// ============ ПУБЛИЧНЫЕ ОБЪЕКТЫ ============
File file;
GPlist list;
GPlog log;
ESP8266HTTPUpdateServer/HTTPUpdateServer httpUpdater;
ESP8266WebServer/WebServer server;Дефайны настроек
// ========== ДЕФАЙНЫ НАСТРОЕК ==========
// объявлять ДО ПОДКЛЮЧЕНИЯ БИБЛИОТЕКИ GyverPortal
#define GP_NO_MDNS // убрать поддержку mDNS из библиотеки (вход по хосту в браузере)
#define GP_NO_DNS // убрать поддержку DNS из библиотеки (для режима работы как точка доступа)
#define GP_NO_OTA // убрать поддержку OTA обновления прошивки
#define GP_NO_UPLOAD // убрать поддержку загрузки файлов на сервер
#define GP_NO_DOWNLOAD // убрать поддержку скачивания файлов с сервераПарсинг
int argLength();
int argLength(имя); // длина текста в полученном значении
// ================ URI =================
String uri(); // адрес текущей страницы
bool uri(uri); // true если uri совпадает
bool uriSub(const String& s); // true если uri начинается с
String uriNameSub(int idx = 1); // вернёт часть uri, находящейся под номером idx после разделителя /
bool root(); // открыта главная страница сайта /
// ============== REQUEST =============
bool request(); // вернёт true, если был http запрос
bool request(url); // вернёт true, если был http запрос на указанный url
// =============== FORM ===============
bool form(); // вернёт true, если было нажатие на любой submit
bool form(имя); // вернёт true, если был submit с указанной формы
bool formSub(имя); // вернёт true, если имя формы НАЧИНАЕТСЯ с указанного
String formName(); // получить имя текущей submit формы
String formNameSub(int idx); // вернёт часть имени формы, находящейся под номером idx после разделителя /
// =============== CLICK ==============
bool click(); // вернёт true, если был клик по (кнопка, чекбокс, свитч, слайдер, селектор)
bool click(имя); // вернёт true, если был клик по указанному элементу
bool click(объект); // вернёт true, если был клик по указанному объекту
bool clickSub(имя); // вернёт true, если имя кликнутого компонента НАЧИНАЕТСЯ с указанного
String clickName(); // получить имя текущего кликнутого компонента
String clickNameSub(int idx); // вернёт часть имени кликнутого компонента, находящейся под номером idx после разделителя /
// для автоматического опроса click
bool clickStr(имя, char* t); // переписать в char массив
bool clickStr(имя, char* t, int len); // + размер массива
bool clickString(имя, String& t);
bool clickInt(имя, int& t);
bool clickFloat(имя, float& t);
bool clickBool(имя, bool& t);
bool clickDate(имя, GPdate& t);
bool clickTime(имя, GPtime& t);
bool clickColor(имя, GPcolor& t);
// для вызова в условии
bool clickStr(char* t);
bool clickStr(char* t, int len);
bool clickString(String& t);
bool clickInt(int& t);
bool clickFloat(float& t);
bool clickBool(bool& t);
bool clickDate(GPdate& t);
bool clickTime(GPtime& t);
bool clickColor(GPcolor& t);
// =============== HOLD ================
bool hold(); // вернёт true, если статус удержания кнопки изменился (нажата/отпущена)
bool hold(имя); // вернёт true, если кнопка удерживается
bool holdSub(имя); // вернёт true, если кнопка удерживается и имя компонента начинается с указанного
String holdName(); // вернёт имя удерживаемой кнопки
String holdNameSub(idx); // вернёт часть имени hold компонента, находящейся под номером idx после разделителя /
bool clickDown(имя); // вернёт true, если кнопка была нажата
bool clickDownSub(имя); // вернёт true, если кнопка была нажата и имя компонента начинается с указанного
bool clickUp(имя); // вернёт true, если кнопка была отпущена
bool clickUpSub(имя); // вернёт true, если кнопка была отпущена и имя компонента начинается с указанного
// =============== UPDATE ==============
bool update(); // вернёт true, если было обновление
bool update(имя); // вернёт true, если было update с указанного компонента
bool update(объект); // вернёт true, если было update с указанного объекта
bool updateSub(имя); // вернёт true, если имя обновляемого компонента НАЧИНАЕТСЯ с указанного
String updateName(); // вернёт имя обновлённого компонента
String updateNameSub(int idx); // вернёт часть имени обновляемого компонента, находящейся под номером idx после разделителя /
// автоматическое обновление. Отправит значение из указанной переменной
// Вернёт true в момент обновления
bool updateString(имя, String& f);
bool updateInt(имя, int f);
bool updateFloat(имя, float f, int dec = 2);
bool updateBool(имя, bool f);
bool updateDate(имя, GPdate f);
bool updateTime(имя, GPtime f);
bool updateColor(имя, GPcolor f);
bool updateLog(const String& n, GPlog& log);
// =============== ANSWER ==============
void answer(const String& s; // отправить ответ на обновление
void answer(GPcolor col); // ответ с цветом
void answer(GPdate date); // ответ с датой
void answer(GPtime time); // ответ со временем
void answer(int v); // ответ с числом
void answer(float v, uint8_t dec); // ответ с float и кол-вом знаков
void answer(int16_t* v, int am); // массив int размерностью am, для графика
void answer(int16_t* v, int am, int dec); // + делитель
// ========= ПОЛУЧЕНИЕ ЗНАЧЕНИЙ ==========
// ОПАСНЫЕ ФУНКЦИИ (не проверяют есть ли запрос). Конвертируют и возвращают значение
String getString(имя); // получить String строку с компонента
int getInt(имя); // получить число с компонента
float getFloat(имя); // получить float с компонента
bool getBool(имя); // получить состояние чекбокса/свитча
GPdate getDate(имя); // получить дату с компонента
GPtime getTime(имя); // получить время с компонента
GPcolor getColor(имя); // получить цвет с компонента
// вариант без имени (нулевой аргумент), опрашивать только в условии, например if (p.click("name")) Serial.println(p.getString())
String getString(); // получить String строку с компонента
int getInt(); // получить число с компонента
float getFloat(); // получить float с компонента
bool getBool(); // получить состояние чекбокса/свитча
GPdate getDate(); // получить дату с компонента
GPtime getTime(); // получить время с компонента
GPcolor getColor(); // получить цвет с компонента
// БЕЗОПАСНЫЕ ФУНКЦИИ (проверяют запрос). Копируют данные из запроса в переменную
// вернёт true, если имя компонента есть в запросе. Можно использовать для form() и click()
bool copyStr(имя, char* t); // переписать в char массив
bool copyStr(имя, char* t, int len); // + размер массива
bool copyString(имя, String& t);
bool copyInt(имя, int& t);
bool copyFloat(имя, float& t);
bool copyBool(имя, bool& t);
bool copyDate(имя, GPdate& t);
bool copyTime(имя, GPtime& t);
bool copyColor(имя, GPcolor& t);
// ОПАСНЫЕ (для вызова в условии)
bool copyStr(char* t, int len = 0);
bool copyString(String& t);
bool copyInt(int& t);
bool copyFloat(float& t);
bool copyBool(bool& t);
bool copyDate(GPdate& t);
bool copyTime(GPtime& t);
bool copyColor(GPcolor& t);
bool copy(объект); // был запрос на имя объекта с формы, значение обновленоСистема
// Инициализация
GPcanvas(); // пустая
GPcanvas(size); // указать размер буфера [int] (умолч. 500)
// Примечание: в принципе можно не думать над размером буфера, т.к. это String
void add(const String& s); // добавить строку кода на js (оканчивается ; !!!)
void clearBuffer(); // очистить буфер (для рисования снаружи билдера)Processing-like API
цвет в данной реализации может задаваться как:
- Строка с веб-цветом: "red", "#abc1230", "rgb(10,30,255)"
- Три канала цвета:
(uint8_t r, uint8_t g, uint8_t b) - Три канала (+ прозрачность):
(uint8_t r, uint8_t g, uint8_t b, uint8_t a) - 24 (RGB) / 32 (RGBA) битный цвет:
(uint32_t hex)
// ================= BACKGROUND ====================
void clear(); // очистить полотно
void background(); // залить всё полотно выбранным fill() цветом
void background(цвет); // залить указанным цветом
// ===================== FILL ======================
void fill(цвет); // выбрать цвет заливки графики
void noFill(); // отключить заливку
// =================== STROKE ======================
void stroke(цвет); // выбрать цвет обводки графики
void noStroke(); // отключить обводку
void strokeWeight(int v); // толщина обводки
// соединение линий: CV_MITER (острый) (умолч), CV_BEVEL (усечённый), CV_ROUND (закруглённый)
// https://processing.org/reference/strokeJoin_.html
void strokeJoin(PGM_P v);
// края линий: CV_PROJECT (квадратный) (умолч), CV_ROUND (закруглённый), CV_SQUARE (квадратный короткий)
// https://processing.org/reference/strokeCap_.html
void strokeCap(PGM_P v);
// =================== PRIMITIVES ==================
void circle(int x, int y, int r); // окружность
void line(int x1, int y1, int x2, int y2); // линия
void point(int x, int y); // точка
void quad(int x1, int y1, int x2, int y2, int x3, int y3, int x4, int y4); // четырёхугольник
void triangle(int x1, int y1, int x2, int y2, int x3, int y3); // треугольник
void rect(int x, int y, int w, int h); // прямоугольник
void square(int x, int y, int w); // квадрат
// режим окружности: M_CENTER (умолч), M_CORNER (лев верхн угол)
// https://processing.org/reference/ellipseMode_.html
void ellipseMode(GP_DrawMode mode);
// режим прямоугольника: M_CORNER (лев верхн угол) (умолч), M_CORNERS (углы по диагонали), M_CENTER (центр), M_RADIUS (центр радиус)
// https://processing.org/reference/rectMode_.html
void rectMode(GP_DrawMode mode);
// ===================== TEXT ======================
void textFont(const char* name); // установить шрифт
void textSize(int size); // установить размер шрифта
void text(const String& text, int x, int y, int w = 0); // вывести текст
// выравнивание текста
// h - CV_LEFT, CV_CENTER, CV_RIGHT
// v - TXT_TOP, TXT_BOTTOM, TXT_CENTER, TXT_BASELINE
void textAlign(PGM_P h, PGM_P v);HTML API
// цвет заполнения: "red", "#abc1230", "rgb(10,30,255)"
void fillStyle(const String& v);
void fillStyle(uint8_t r, uint8_t g, uint8_t b, uint8_t a = 255);
void fillStyle(uint32_t hex);
// цвет обводки: "red", "#abc1230", "rgb(10,30,255)"
void strokeStyle(const String& v);
void strokeStyle(uint8_t r, uint8_t g, uint8_t b, uint8_t a = 255);
void strokeStyle(uint32_t hex);
// цвет тени: "red", "#abc1230", "rgb(10,30,255)"
void shadowColor(const String& v);
void shadowColor(uint8_t r, uint8_t g, uint8_t b, uint8_t a = 255);
void shadowColor(uint32_t hex);
// размытость тени в px
void shadowBlur(int v);
// отступ тени в px
void shadowOffsetX(int v);
// отступ тени в px
void shadowOffsetY(int v);
// края линий: CV_BUTT (умолч), CV_ROUND, CV_SQUARE
// https://www.w3schools.com/tags/canvas_linecap.asp
void lineCap(PGM_P v);
// соединение линий: CV_MITER (умолч), CV_BEVEL, CV_ROUND
// https://www.w3schools.com/tags/canvas_linejoin.asp
void lineJoin(PGM_P v);
// ширина линий в px
void lineWidth(int v);
// длина соединения CV_MITER
// https://www.w3schools.com/tags/canvas_miterlimit.asp
void miterLimit(int v);
// шрифт: "30px Arial"
// https://www.w3schools.com/tags/canvas_font.asp
void font(const String& v);
// выравнивание текста: CV_START (умолч), CV_END, CV_CENTER, CV_LEFT, CV_RIGHT
// https://www.w3schools.com/tags/canvas_textalign.asp
void textAlign(PGM_P v);
// позиция текста: CV_ALPHABETIC (умолч), CV_TOP, CV_HANGING, CV_MIDDLE, CV_IDEOGRAPHIC, CV_BOTTOM
// https://www.w3schools.com/tags/canvas_textbaseline.asp
void textBaseline(PGM_P v);
// прозрачность рисовки, 0.0-1.0
void globalAlpha(float v);
// тип наложения графики: CV_SRC_OVER (умолч), CV_SRC_ATOP, CV_SRC_IN, CV_SRC_OUT, CV_DST_OVER, CV_DST_ATOP, CV_DST_IN, CV_DST_OUT, CV_LIGHTER, CV_COPY, CV_XOR
// https://www.w3schools.com/tags/canvas_globalcompositeoperation.asp
void globalCompositeOperation(PGM_P v);
// закрашенный прямоугольник
void fillRect(int x, int y, int w, int h);
// закрашенный прямоугольник, параметры строкой "1,2,3,4"
void fillRect(const String& v);
// обведённый прямоугольник
void strokeRect(int x, int y, int w, int h);
// обведённый прямоугольник, параметры строкой "1,2,3,4"
void strokeRect(const String& v);
// очистить область
void clearRect(int x, int y, int w, int h);
// очистить область, параметры строкой "1,2,3,4"
void clearRect(const String& v);
// залить
void fill();
// обвести
void stroke();
// начать путь
void beginPath();
// переместить курсор
void moveTo(int x, int y);
// завершить путь (провести линию на начало)
void closePath();
// нарисовать линию от курсора
void lineTo(int x, int y);
// ограничить область рисования
// https://www.w3schools.com/tags/canvas_clip.asp
void clip();
// провести кривую
// https://www.w3schools.com/tags/canvas_quadraticcurveto.asp
void quadraticCurveTo(int cpx, int cpy, int x, int y);
// провести кривую Безье
// https://www.w3schools.com/tags/canvas_beziercurveto.asp
void bezierCurveTo(int cp1x, int cp1y, int cp2x, int cp2y, int x, int y);
// провести дугу
// https://www.w3schools.com/tags/canvas_arc.asp
void arc(int x, int y, int r, int sa = 0, int ea = 360, bool ccw = 0);
// скруглить
// https://www.w3schools.com/tags/canvas_arcto.asp
void arcTo(int x1, int y1, int x2, int y2, int r);
// масштабировать область рисования
// https://www.w3schools.com/tags/canvas_scale.asp
void scale(int sw, int sh);
// вращать область рисования
// https://www.w3schools.com/tags/canvas_rotate.asp
void rotate(int v);
// перемещать область рисования
// https://www.w3schools.com/tags/canvas_translate.asp
void translate(int x, int y);
// вывести закрашенный текст, опционально макс. длина
void fillText(const String& text, int x, int y, int w = 0);
// вывести обведённый текст, опционально макс. длина
void strokeText(const String& text, int x, int y, int w = 0);
// вывести картинку
// https://www.w3schools.com/tags/canvas_drawimage.asp
void drawImage(const String& img, int x, int y);
void drawImage(const String& img, int x, int y, int w, int h);
void drawImage(const String& img, int sx, int sy, int sw, int sh, int x, int y, int w, int h);
// сохранить конфигурацию полотна
void save();
// восстановить конфигурацию полотна
void restore();Объекты
GP_TITLE
GP_TITLE(const char* n = nullptr, const String& t = "", PGM_P st = GP_DEFAULT, int s = 0, bool b = 0);
const char* name;
String text;
PGM_P style;
int size;
bool bold;
GP_LABEL
GP_LABEL(const char* n = nullptr, const String& t = "", PGM_P st = GP_DEFAULT, int s = 0, bool b = 0, bool w = 0);
const char* name;
String text;
PGM_P style;
int size;
bool bold;
bool wrap;
GP_LABEL_BLOCK
GP_LABEL_BLOCK(const char* n = nullptr, const String& t = "", PGM_P st = GP_GREEN, int s = 0, bool b = 0);
const char* name;
String text;
PGM_P style;
int size;
bool bold;
GP_LED(const char* n = nullptr, bool st = 0);
const char* name;
bool state;
GP_LED_RED(const char* n = nullptr, bool st = 0);
const char* name;
bool state;
GP_LED_GREEN(const char* n = nullptr, bool st = 0);
const char* name;
bool state;
GP_BUTTON(const char* n = nullptr, const String& t = "", const String& tar = "", PGM_P st = GP_GREEN, const String& w = "", bool dis = 0, bool rel = 0);
const char* name;
String text;
String target;
PGM_P style;
String width;
bool disabled;
bool reload;
GP_BUTTON_MINI(const char* n = nullptr, const String& t = "", const String& tar = "", PGM_P st = GP_GREEN, const String& w = "", bool dis = 0, bool rel = 0);
const char* name;
String text;
String target;
PGM_P style;
String width;
bool disabled;
bool reload;
GP_NUMBER(const char* n = nullptr, const String& place = "", int val = GP_EMPTY_INT, const String& w = "", bool dis = false);
const char* name;
String placeholder;
int value;
String width;
String min;
String max;
bool disabled;
GP_NUMBER_F(const char* n = nullptr, const String& place = "", float val = GP_EMPTY_FLOAT, uint8_t dec = 2, const String& w = "", bool dis = false);
const char* name;
String placeholder;
float value;
uint8_t decimals;
String width;
String min;
String max;
bool disabled;
GP_TEXT(const char* n = nullptr, const String& place = "", const String& txt = "", const String& w = "", int maxl = 0, const String& pat = "", bool dis = false);
const char* name;
String placeholder;
String text;
String width;
int maxlen;
String pattern;
bool disabled;
GP_PASS
GP_PASS(const char* n = nullptr, const String& place = "", const String& txt = "", const String& w = "", int maxl = 0, const String& pat = "", bool dis = false, bool e = false);
const char* name;
String placeholder;
String text;
String width;
int maxlen;
String pattern;
bool disabled;
bool eye;
GP_AREA
GP_AREA(const char* n = nullptr, int r = 1, const String& txt = "", const String& w = "", bool dis = false);
const char* name;
int rows;
String text;
String width;
bool disabled;
GP_CHECK(const char* n = nullptr, bool sta = 0, PGM_P st = GP_GREEN, bool dis = false);
const char* name;
bool state;
PGM_P style;
bool disabled;
GP_SWITCH(const char* n = nullptr, bool sta = 0, PGM_P st = GP_GREEN, bool dis = false);
const char* name;
bool state;
PGM_P style;
bool disabled;
GP_DATE(const char* n = nullptr);
GP_DATE(const char* n, GPdate d, bool dis = false);
const char* name;
GPdate date;
bool disabled = false;
GP_TIME(const char* n = nullptr);
GP_TIME(const char* n, GPtime t, bool dis = false);
const char* name;
GPtime time;
bool disabled;
GP_COLOR(const char* n = nullptr);
GP_COLOR(const char* n, GPcolor c, bool dis = false);
const char* name;
GPcolor color;
bool disabled;
GP_SPINNER
GP_SPINNER(const char* n = nullptr, float v = 0, float mn = NAN, float mx = NAN, float stp = 1, uint8_t dec = 0, PGM_P st = GP_GREEN, const String& w = "", bool dis = 0);
const char* name;
float value;
float min;
float max;
float step;
uint8_t decimals;
PGM_P style;
String width;
bool disabled;
GP_SLIDER(const char* n = nullptr, float val = 0, float mn = 0, float mx = 10, float stp = 1, uint8_t dec = 0, PGM_P st = GP_GREEN, bool dis = false, bool oninp = 0);
const char* name;
float value = 0;
float min = 0;
float max = 10;
float step = 1;
uint8_t decimals;
PGM_P style;
bool disabled;
bool oninput;
GP_SELECT(const char* n = nullptr, const String& lst = "", int sel = 0, bool nums = 0, bool dis = false, bool rel = 0);
const char* name;
String list;
int selected;
bool numbers;
bool disabled;
bool reload;
String getValue();
GP_RADIO
GP_RADIO(const char* n = nullptr, int nm = 0, int v = -1, PGM_P st = GP_DEFAULT, bool dis = 0);
const char* name;
int num;
int value;
PGM_P style;
bool disabled;ESP32-CAM Stream
// CamStream.h
void cam_stream_begin(); // запустить стрим на 90 порту
void cam_stream_begin(порт); // + указать порт [int]
String cam_stream_window(); // окно стрим для вставки в страницу
String cam_stream_window(ширина); // + ширина в пикселях [int] или [строка] "300px", "80%" итдХранение и изменение даты GPdate
// структура для хранения даты GPdate
// переменные
uint16_t year;
uint8_t month, day;
// инициализация
GPdate();
GPdate(int year, int month, int day); // из трёх чисел
GPdate(String str); // из строки вида yyyy-mm-dd
// методы
void set(int nyear, int nmonth, int nday); // установить
String encode(); // преобразовать в строку вида yyyy-mm-dd
String encodeDMY(); // преобразовать в строку вида dd.mm.yyyy
void decode(String str); // обновить из строки вида yyyy-mm-ddХранение и изменение времени GPtime
// структура для хранения времени GPtime
// переменные
uint8_t hour, minute, second;
// инициализация
GPtime();
GPtime(int hour, int minute, int second); // из трёх чисел
GPtime(String str); // из строки вида hh:mm:ss
// методы
void set(int nhour, int nminute, int nsecond = 0); // установить
String encode(); // преобразовать в строку вида hh:mm:ss
void decode(String str); // обновить из строки вида hh:mm:ssХранение и изменение времени GPunix
// получить unix время для графика
uint32_t GPunix(год, месяц, день, час, минута, секунда);
uint32_t GPunix(год, месяц, день, час, минута, секунда, gmt);
uint32_t GPunix(GPdate d, GPtime t);
uint32_t GPunix(GPdate d, GPtime t, int8_t gmt);
// gmt - часовой пояс, по умолч. 0 (пример: Москва gmt = 3)
// месяц и день начинаются с 1, не с 0!Хранение и изменение цвета GPcolor
// см. пример gpcolor_demo
// структура для хранения цвета GPcolor
// переменные
uint8_t r, g, b;
// инициализация
GPcolor();
GPcolor(uint32_t color);
GPcolor(byte r, byte g, byte b);
GPcolor(String s) // из строки вида #RRGGBB
// методы
String encode(); // преобразовать в строку вида #RRGGBB
void decode(String str); // обновить из строки вида #RRGGBB
void setRGB(r, g, b); // установить цвет побайтно
void setHEX(uint32_t col); // установить 24 бит цвет
uint32_t getHEX(); // получить 24 бит цвет
// к структуре можно присвоить uint32_t числоУтилиты
// получить номер, под которым name входит в list вида "val1,val2,val3"
int GPinList(const String& s, const String& list);
// получить строку, которая входит в список list "val1,val2,val3" под номером idx
String GPlistIdx( const String& li, int idx);
// + указать свой разделитель
String GPlistIdx(const String& li, int idx, char div);
// получить тип файла (вида image/png) по его пути uri
String GPfileType(const String& uri);
// добавить новое значение в массив с перемоткой (для графиков)
GPaddInt(int16_t val, int16_t* arr, uint8_t am); // новое значение, массив, размер массива
GPaddUnix(uint32_t val, uint32_t* arr, uint8_t am); // новое значение, массив, размер массива
GPaddUnixS(int16_t val, uint32_t* arr, uint8_t am); // добавить секунды, массив, размер массива
PGM_P GPgetAlign(GPalign a); // получить align для flex
OTA Update
В объекте класса GyverPortal живёт объект OTA класса CustomOTAUpdate. К нему можно применить:// включить авторизацию
void enableAuth(const String& login, const String& pass);
// выключить авторизацию
void disableAuth();
// подключить функцию-билдер страницы OTA update
void attachUpdateBuild(void (*handler)(bool UpdateEnd, const String& UpdateError));
// отключить функцию-билдер страницы OTA update
void detachUpdateBuild();
// подключить функцию которая вызывается перед рестартом платы
void attachBeforeRestart(void (*handler)());
// отключить функцию которая вызывается перед рестартом платы
void detachBeforeRestart();
// подключить функцию которая вызывается при прерывании загрузки обновления
void attachAbort(void (*handler)());
// отключить функцию которая вызывается при прерывании загрузки обновления
void detachAbort();
// подключить функцию которая вызывается при ошибке
void attachError(void (*handler)(const String& UpdateError));
// отключить функцию которая вызывается при ошибке
void detachError();
// вывести описание ошибки (например в label)
String error();| Компонент | form() | click() | update() | Парсинг (getX, copyX, clickX) |
|---|---|---|---|---|
| TITLE | ✔ | |||
| LABEL | ✔ | |||
| LABEL_BLOCK | ✔ | |||
| SPAN | ✔ | |||
| BUTTON | ✔ | |||
| BUTTON_MINI | ✔ | |||
| NUMBER | ✔ | ✔ | ✔ | Int |
| NUMBER_F | ✔ | ✔ | ✔ | Float |
| TEXT | ✔ | ✔ | ✔ | Str, String |
| PASS | ✔ | ✔ | ✔ | Str, String |
| AREA | ✔ | ✔ | ✔ | Str, String |
| CHECK | ✔ | ✔ | ✔ | Bool |
| SWITCH | ✔ | ✔ | ✔ | Bool |
| DATE | ✔ | ✔ | ✔ | Date |
| TIME | ✔ | ✔ | ✔ | Time |
| COLOR | ✔ | ✔ | ✔ | Color, Int |
| SLIDER | ✔ | ✔ | ✔ | Int, Float |
| SPINNER | ✔ | ✔ | ✔ | Int, Float |
| SELECT | ✔ | ✔ | ✔ | Int |
| RADIO | ✔ | ✔ | ✔ | Int |
| LED_RED | ✔ | ✔ | ||
| LED_GREEN | ✔ | ✔ | ||
| LED | ✔ | ✔ |