GyverPortal

SoftFelix

★✩✩✩✩✩✩
16 Фев 2020
76
27
приложи код. Быстрее ответим.
Пока сделал как в примере к GyverPortal.

В конце setup'а запускаю log
C++:
ui.log.start(30);  // передали размер буфера log'a
Кстати, в чём этот буфер измеряется (в байтах) и какое его назначение???

И пока писал этот ответ, то понял, где у меня косяк: открывал лог в самом начале конструктора главной страницы, из-за этого лог и показывался везде и сверху.
C++:
void build() {
  GP.BUILD_BEGIN(400);  // начать построение, ширина колонки 350px (по умолчанию)
  GP.setTimeout(3000);  // таймаут ожидания ответа сервера для текущей страницы (вызывать в конструкторе сразу после BUILD BEGIN), мс [int] (умолч. 1000)
  GP.THEME(GP_DARK);
  //GP.THEME(GP_LIGHT);

  // #if (LOG_ENABLE == 1)
  // GP.AREA_LOG(5);  // 5 строк
  // GP.AREA_LOG(строк, период, ширина); // + ширина строкой "100px", "25%" и так далее [строка]
  // Прототип: GP.AREA_LOG(5, 1000, "");
  // #endif

  GP.PAGE_TITLE("WiFi Weather Clock");  // переименовать окно в браузере [строка]
  GP.TITLE("WiFi Weather Clock");       // заголовок
  GP.ONLINE_CHECK();                    // невидимый компонент. Проверка связи с esp, в случае отсутствия связи в названии вкладки появится символ 🚫, GP.ONLINE_CHECK(период); // + период проверки в мс [int] (умолч. 5000)

  GP.NAV_TABS_LINKS("/,/graphics,/settings,/sys_info,/ota_update,/log", "Главная,Графики,Настройки,Информация,Обновление,Лог");  // блок с кнопками-ссылками
Там я его убрал (закомментировал) и перенёс в блок действия на открытие вкладки "Лог".
C++:
   //---------------------- LOG START -----------------------------
  } else if (ui.uri("/log")) {  // LOG
#if (LOG_ENABLE == 1)
    GP.AREA_LOG(20, 1000, "350px");  // 20 строк, обновление раз в 1 сек., ширина окна лога 350 пикс.
// GP.AREA_LOG(строк, период, ширина); // + ширина строкой "100px", "25%" и так далее [строка]
// Прототип: GP.AREA_LOG(5, 1000, "");
#endif
      //---------------------- LOG END -----------------------------
Всё заработало.
Screenshot_2025-09-03-09-21-35-653_com.android.chrome.jpg

Когда нужно в основном коде вместе с логом для Serial.print, отсылаю мессагу в лог портала.
C++:
ui.log.println("Save default settings to file OK!");
Но есть косяк. Если я закрыл вкладку "Лог" и открыл её потом снова, то все мессаги в логе пропадают и он оказывается пустым. Это понятно, т.к.
при нажатии вкладки "Лог" заново запускается инициализация окна лога.
C++:
GP.AREA_LOG(20, 1000, "350px");  // 5 строк
А мне нужно, что бы лог наполнялся событиями в теневом режиме и при открытии вкладки "Лог" отображались все накопленные события в логе. Такое возможно сделать???
 
Изменено:

Doctor Death

✩✩✩✩✩✩✩
16 Мар 2025
19
0
Коллеги подскажите, хочу интегрировать в секч GyverPortal OTAupdate, но никак не могу понять как настроить action
 
Изменено:

gidiara666

★✩✩✩✩✩✩
5 Май 2023
79
16
@Doctor Death,
Никак. Все работает "из коробки". Раздел OTA в меню. Единственное, где Вы могли облажаться: неверно выбрать разметку памяти. Но, судя по вопросу, это пока не актуально.
 
Изменено:

Doctor Death

✩✩✩✩✩✩✩
16 Мар 2025
19
0
@Doctor Death,
Никак. Все работает "из коробки". Раздел OTA в меню.
у меня по примеру, выкидывает на Соединение было сброшено

1758713950410.png

вставлял так:
C++:
#include <LittleFS.h>
#include <GyverPortal.h>


    portal.attachBuild(build);
    portal.attach(action);
    portal.start();
    portal.enableOTA();
    portal.log.start(30);
    portal.enableAuth(login1, pass3);



GP_MAKE_BLOCK_TAB("Update Firmware", GP.LABEL("");
GP_MAKE_BOX(GP.LABEL("Select bin file:"); GP.OTA_FIRMWARE();););
Кстати на чистом сече из примера , такая же петрушка
 
Изменено:

gidiara666

★✩✩✩✩✩✩
5 Май 2023
79
16
Ой, извините, это я идиот... Имел в виду gyver hub, обсуждаемая ерунда уже давно заброшена в силу убогости.
 

Doctor Death

✩✩✩✩✩✩✩
16 Мар 2025
19
0
@Sergo_ST, Попробовал , тажа петрушка , после выбора файла "Соединение было сброшено"
 

Bruzzer

★★★★✩✩✩
23 Май 2020
772
235
@Doctor Death,
То, что соединение было сброшено, это нормально, если прошивка после нового подключения обновленная. Если прошивка не меняется, тогда не нормально.
 

Doctor Death

✩✩✩✩✩✩✩
16 Мар 2025
19
0
Ой, извините, это я идиот... Имел в виду gyver hub, обсуждаемая ерунда уже давно заброшена в силу убогости.
так у GyverHub еще даже релиза нет , только betta. К тому же она же работает только через APP. А web морды у нее ведь нет.
 

Bruzzer

★★★★✩✩✩
23 Май 2020
772
235
@Doctor Death,
У Hub есть вариант со встроенной веб мордой. Но если вам хватает Portal, то переходить на HUB смысла нет. Слова про убогость Portal - это частное мнение конкретного человека.
 
  • Лойс +1
Реакции: SoftFelix и Sergo_ST

Ivan_X

✩✩✩✩✩✩✩
11 Ноя 2025
11
0
Здравствуйте! Никак не могу разобраться, как выводить на страницу переменные (String и другие), и при этом обновлять их без перезагрузки страницы в браузере. Я хотел выводить время и дату с GyverNTP, да не получилось... Кто уже знает, можете пожалуйста помочь разобраться с лабиринтом команд?:)
 

gidiara666

★✩✩✩✩✩✩
5 Май 2023
79
16
Юзай hub или Settings, второе- если нужен только локальный доступ. Загружаешь пример, анализируешь. portal не рекомендую.
 

Barmer

✩✩✩✩✩✩✩
3 Ноя 2022
10
0
Всем привет!
Перестали работать графики.
Я думаю всё упирается в
<script src='https://code.highcharts.com/highcharts.js'></script>
Ресурс не доступен.
Не пробовали включить его в прошивку?

Cам спросил и сам отвечу.:)
Скачал по вышеуказанной ссылке файл highcharts.js через запрещёнку.
Разместил у себя на серваке. В файле библиотеки builder.h откорректировал размещение на http://192.168.0.1/highcharts.js.
перекомпилировал и обновил прошивку. Всё заработало.
 
Изменено:

Николай Ск

✩✩✩✩✩✩✩
28 Мар 2023
15
2
Добрый день

Понимаю, что портал уже не актуален, но в Settings я пока не готов вникать (пробовал как-то мне пока сложнее чем с порталом)

Не буду говорить, что пересмотрел все, но по поисковику не смог найти даже подобный вопрос.

Подскажите как сделать название кнопки сменным

То есть, к примеру кнопка таймера,

1 в режиме ожидания надпись «Старт»

2 в режиме работы надпись «Пауза»

3 в режиме пауза надпись «Продолжить»

Cкетч пример
C++:
#include <Arduino.h>
#include <GyverPortal.h>

#define AP_SSID ""
#define AP_PASS ""



//создадим объект веб итерфейс
GyverPortal ui;

uint32_t t = 120000;          // время работы тамера

// переменные для работы
byte fl_pauza = 0;        // флаг паузы
uint32_t tmr_pauza;       // точка отчета паузы
uint32_t t_pauza;         // время паузы
uint32_t ta_pauza;        // переменная накопитель пауз
byte val;                 // громкость просто для наглядности работы SLIDERа
byte fl_rabot = 0;        // флаг режима работы
uint32_t tmr_rabot;       // точка отчета режима
uint32_t tmr_rabot_nach;  // точка отчета начала процеса
uint32_t rt;              // переменная хранящяя расчет остатка времени работы в секундах
char buf[10];             // буфер символов хранящий остаток времени работы в формате 00:00:00
int res;                  // нужна для внесения значений в буфер символов
String buf_status;        // строка хранящая состояние работы (ожидание, работа, пауза)
String Button_status;     // строка хранящая название кнопки (старт, пауза, продолжить)


//расчет остатка времени таймера, составление строк (буферов символов) для веб интерфейса
void rft_m(){
    if (fl_rabot == 0) {
        rt = t;
        buf_status = "Ожидание";
        Button_status = "Старт";
    } else {
        if (fl_pauza == 1) {
            rt = (t + ta_pauza + t_pauza + tmr_rabot_nach - millis());
            buf_status = "Пауза";
            Button_status = "Продолжить";
        } else {
            rt = (t + ta_pauza + tmr_rabot_nach - millis());
            buf_status = "Работа";
            Button_status = "Пауза";
        }
    }
    rt = (rt > t ? 0 : rt) / 1000;
    res = snprintf(buf, 10, "%02d:%02d:%02d", rt / 3600 , (rt % 3600) / 60 , rt % 60);
}
//функция команды старт/пауза
void start_pauza (){
    //кнопка старт/пауза при работе тоесть пауза вкл./выкл.
    if (fl_rabot != 0) {
        fl_pauza = !fl_pauza;
        if (fl_pauza == 0) {
            ta_pauza = ta_pauza + t_pauza;
            t_pauza = 0;
        } else {
            tmr_pauza = millis();
        }
    }
    // начало работы кнопка старт при неработе и не пауза
    if (fl_rabot == 0 && fl_pauza == 0) {
        tmr_rabot_nach = millis();
        t_pauza = 0;
        ta_pauza = 0;
        fl_rabot = 1;
    }
    // что нужно добавить сюда чтобы произошло обновление страницы браузера без смены url адреса?
    //без смены url чтобы физичекая кнопка не меняла страницу веб интерфейса

    // это то что я пробовал не получилось
    //ui.show();
    //ui.update("button");
    //ui.update();
}
//билдер веб интерфейса
void build() {
    GP.BUILD_BEGIN();
    GP.THEME(GP_DARK);
    GP.HR();
    if (ui.uri("/")) {
        rft_m();
        GP.UPDATE("timer,status,val,button,button1");
        GP.BLOCK_BEGIN();
        GP.LABEL(buf_status, "status", GP_YELLOW , 30); GP.BREAK();
        GP.LABEL("Остаток времени работы"); GP.BREAK();
        GP.LABEL(buf,"timer", GP_YELLOW , 30); GP.BREAK();
        GP.SLIDER("val",val,0,100); GP.BREAK();
        GP.BUTTON("button", Button_status);
        GP.BREAK();
        GP.BREAK();
        GP.LABEL(Button_status, "button1"); GP.BREAK();   // это для проверки того, что просто текст меняется
        GP.BLOCK_END();
    }
  GP.BUILD_END();
}
//действия от веб итерфеса
void action() {
    if (ui.click("button")) start_pauza ();
    if (ui.click("val")) val = ui.getInt("val");
    if (ui.update()) {
        rft_m();
        if (ui.update("timer")) ui.answer(buf);
        if (ui.update("status")) ui.answer(buf_status);
        if (ui.update("val")) ui.answer(val);
        if (ui.update("button")) ui.answer(Button_status);    //надпись на кнопке не обновляется, скрипт на нее не работает
        if (ui.update("button1")) ui.answer(Button_status);    // это для проверки того, что просто текст меняется
    }
}

void loop() {
    //запускаем tick веб интерфейса
    ui.tick();
    //физическая кнопка старт/пауза (в примере ее нет)
    //if (but_sart.press()) start_pauza();

    //если пауза то записываем длительность паузы
    if (fl_pauza == 1) {
        t_pauza = millis() - tmr_pauza;
    }

    //конец выключение таймера
    if ((millis() - (ta_pauza + tmr_rabot_nach)) >= t) {
        fl_rabot = 0;
        fl_pauza = 0;
    }

    //убавление val для наглядности работы
    if (fl_rabot && !fl_pauza){
        static uint32_t tmr1;
        if (millis() - tmr1 >= 1000) {
            tmr1 = millis();
            val = (val == 0) ? 0 : val - 1;
        }
    }
}

void setup() {
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(AP_SSID, AP_PASS);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println(WiFi.localIP());

  // подключаем конструктор и запускаем
  ui.attachBuild(build);
  ui.attach(action);
  ui.start();
}

Там я думал, что update будет менять название, но оно не меняет без обновления страницы в браузере.

Насколько я понял GP_update не хочет работать с button

Я записал видео без звука на нем видно, что update работает, но в случае с button, он бьёт куда-то не туда, а точнее в элемент, которого портал не посылал (value=”Старт”) откуда он берется моих знаний нахватает.

В общем подскажите если у портала команда чтобы ESP обновлял страницу браузеру, или пересчитывал build но не менял URL адрес

Или есть какие-нибудь еще решения?
 

Олег Поляков

★★★★✩✩✩
18 Янв 2022
344
248
www.1812.ru
@Николай Ск, я делал смену названий активных элементов формы, в том числе и кнопок через javascript без перезагрузки страницы. К сожалению, исходники не под рукой, но копать нужно в этом направлении.
 

Bruzzer

★★★★✩✩✩
23 Май 2020
772
235
подскажите если у портала команда чтобы ESP обновлял страницу браузеру
Возможно я не понял ваш вопрос.
Если для изменения подписи кнопки вы согласны обновлять всю страницу по клику кнопки, то можно попробовать
GP.BUTTON("button", Button_status);
GP.RELOAD_CLICK("button");
 

Sergo_ST

★★★★★★✩
15 Мар 2020
1,203
922
@Николай Ск, Можете взять мод портала отсюда - https://community.alexgyver.ru/threads/chasy-na-gri-alternativnaja-proshivka.5843/
Тут этом момент исправлен, единственное, стоит посмотреть как реализовано построение страницы в прошивке веб интерфейса, тк вызов некоторых методов немного отличается от стокового портала...
 
  • Лойс +1
Реакции: Николай Ск

Николай Ск

✩✩✩✩✩✩✩
28 Мар 2023
15
2
@Bruzzer,Спасибо, проверил помогло можно использовать как вариант

@Sergo_ST, Спасибо за наводку нашёл там файл GyverPortalMod.h можешь в крантце объяснить как его туда прикрепить, в смысле куда вставить файл (в платформио) и нужно ли удалить #include <GyverPortal.h> и вставить #include <GyverPortalMod.h> или они обе должны остаться

А "стоит посмотреть как реализовано построение страницы в прошивке веб интерфейса, тк вызов некоторых методов немного отличается от стокового портала..." то есть это всё-таки замена GyverPortal

В общем спасибо, буду пробовать.
 

Николай Ск

✩✩✩✩✩✩✩
28 Мар 2023
15
2
@Sergo_ST,
Ну саму папку GyverPortalMod я чет не вижу

беру паку web ложу в папку библиотек (папку GyverPortal не удаляю) убираю (#include <GyverPortal.h> и объект GyverPortalMod ui; ) ставлю #include <GyverPortalMod.h> и объект GyverPortalMod ui;

Ругается не знает GP_DARK добавляю #include <themes.h> из стандартного набора GyverPortal.

Ну и там еще SLIDER ругался, просит еще 2 переменные

Загрузилось даже работает, но вообще не то выравнивание все слева страницы, а update вообще перестал работать.

Кажется, модификатор писали на первые версии портала или переписывали именно под свой проект.

В общем я толи чего-то не понял толи это не вариант.
 

Sergo_ST

★★★★★★✩
15 Мар 2020
1,203
922
@Николай Ск, Нет, это форк последней версии.
GP_DARK добавляю #include <themes.h>, но вообще не то выравнивание все слева страницы
Это неправильно, стили тоже изменялись, нужно использовать GP_DEFAULT_THEME вместо GP_DARK. Поэтому у вас и выравнивание неверное на странице.
SLIDER ругался, просит еще 2 переменные
Да, после первого аргумента(id) указываются подписи для минимального и максимального значения, если они не нужны то просто передаём пустые строки GP.SLIDER(имя, "", "", значение, мин, макс, шаг, знаков, цвет, откл);
переписывали именно под свой проект
Так и есть, но я старался по максимуму сохранить совместимость.

И не забудьте очистить кеш страницы, тк могут остаться стили и скрипты от предыдущей версии. В браузере на пк это ctrl+f5.
 

Николай Ск

✩✩✩✩✩✩✩
28 Мар 2023
15
2
@Sergo_ST, заменил название стиля удалил папку библиотеки GyverPortal и #include <themes.h>

update все равно не работает 2026-02-27_21-24-59.png.

в общем я думаю будет сперва изменяемая надпись а под ней кнопка без надписи
 

Sergo_ST

★★★★★★✩
15 Мар 2020
1,203
922
@Николай Ск, Напишите мне в лс, нужно увидеть как у вас троится страница. И да, забыл упомянуть что портал нужно из ветки бета скачать чтоб на кнопках надписи обновлялись...