GyverPortal

RomaT · 4 Окт 2022

@DAK, не много не то, или не так, ваш код работает и обновляет, но он обновляет уже созданную страницу и переменные на ней, в а вот если типа так сделано

C++:

void build() {
  BUILD_BEGIN();
    if(portal.uri() == " "){
        ...;
    } else if(portal.uri() == " "){
        ...;
    } else if(portal.uri() == " "){
        ...;
    } else if (portal.uri() == (" ")){
      GP.PAGE_BEGIN();
      GP.THEME(GP_DARK);
      GP.TITLE(F(" "));
      GP.BUTTON(" ",F(" "));
      switch (state)
      {
        case 0:
          GP.SPAN(F(" "));GP.BREAK();
          GP.SPAN(F(" "));GP.BREAK();
          break;
        case 1:
          GP.SPAN(F(" "));GP.BREAK();
          GP.SPAN(F(" "));GP.BREAK();
          break;
        case 2:
          GP.SPAN(F(" "));GP.BREAK();
          GP.SPAN(String( ));GP.BREAK();
          GP.BUTTON("",F(" "));
          break;
        case 3:
          GP.SPAN(F(" "));GP.SPAN(String( ));GP.BREAK();
          GP.SPAN(F(" "));GP.BREAK();
          break;
        default:
          break;
      }
      GP.BUTTON_LINK(" ", F(" "));
      GP.PAGE_END();
    } else {
      GP.THEME(GP_DARK);
      GP.PAGE_BEGIN();
        GP.TITLE("");
        GP.BUTTON_LINK(" ", " ");  GP.BREAK();
        GP.BUTTON_LINK(" "," "); GP.BREAK();
        GP.BUTTON_LINK(" ", " ");
      GP.PAGE_END();
    }
  BUILD_END();
}

то если меняем программно state, то блок страница перестраивается только после обновления со стороны браузера
код полностью приводить смысла нет - много букв)

DAK · 4 Окт 2022

@RomaT, Понимаете, надо всего лишь обновлять страницу в определённое время. Чтобы лишний раз не обновлять, надо сперва сделать запрос на МК, о необходимости обновить страницу. Как только придёт ответ, что страницу надо обновить, сработает ява скрипт location.reload(), который как раз и обновит страницу. А как иначе может это работать, я не представляю (вернее можно это сделать, это должен сервис подниматься на компе, дополнительно с мк на комп по сокетам гоняться инфа, но это уже совсем другая история). Главное что скрипт должен успешно отрабатываться, я сам его тестил, сам его придумывал для таких вот ситуация, всё что надо, это правильно ответить на update запрос. В Вашем коде нет action секции, которая как раз и должна давать ответ. Так же не понятно, каким образом Вы флаг обновления поднимаете в состояние true. Здесь в конструкторе я не вижу релоад, о котором ранее Вам писал.
То есть там же, где меняется state надо делать flag_reload=true;

RomaT · 4 Окт 2022

@DAK, в общем-то заработало, не работает если обновление ставишь 1000 как я и сделал, поменял на 5000 - заработало. И



     if (portal.updateName() == "reboot"){

всё же

DAK · 4 Окт 2022

Думаю тут всё таки надо смотреть как меняется state, может state меняется 3 раза в секунду обновление просто не успевает выводить, может наоборот сделать 300-500 в упдейт в конструкторе поставить и посмотреть что будет. Или стейт при изменении бросать в сериал для отладки и понимания происходящих процессов, но думаю это уже не касается работы портала

RomaT · 4 Окт 2022

@DAK, возможно причина в том, что я в скетче использую прерывания, и скрипт просто не успевает исполняться

vitek1658 · 5 Окт 2022

Здравствуйте!
Решил немного "пощупать" обновление библиотеки. Не нашел элемента по типу radiobutton, и решил добавить в виде html, и ничего не получилось. Покажите пожалуйста как правильно добавлять html.
Вот мои каракули:

C++:

String gg;
    GP.PAGE_BEGIN();
    gg += F("<!DOCTYPE html><html><head><meta charset="utf-8"><title>Переключатели</title></head><body><p><b>Какое у вас состояние разума?</b></p><p><input name="dzen" type="radio" value="nedzen"> Не дзен</p><p><input name="dzen" type="radio" value="dzen"> Дзен</p><p><input name="dzen" type="radio" value="pdzen" checked> Полный дзен</p><p><input type="submit" value="Выбрать"></p></form> </body></html>");
GP.PAGE_END();

DAK · 5 Окт 2022

Вы вместо кнопок всю страницу пихаите
Радио переделаны в светодиоды.

ASM · 5 Окт 2022

vitek1658 написал(а):
Не нашел элемента по типу radiobutton

C++:

GP.LED(имя);                        // зелёный - вкл, красный - выкл
GP.LED(имя, состояние);             // + состояние (bool)

GP.LED_GREEN(имя);                  // зелёный - вкл, чёрный - выкл
GP.LED_GREEN(имя, состояние);       // + состояние (bool)

GP.LED_RED(имя);                    // красный - вкл, чёрный - выкл
GP.LED_RED(имя, состояние);         // + состояние (bool)

pingemall · 6 Окт 2022

Не получается выровнять и навести красоту.
Если у кого такое получалось подсоплите

.
Найденной инфы про библу не хватает для понятия выравнивания.

C++:

  //---Обновление значений измерений------------------------------
  GP.UPDATE("adc",1000); 
  GP.BLOCK_THIN_TAB_BEGIN("Аккумулятор","90%");
  // значение аккумулятора
  GP.LABEL("Напряжение: ");
  GP.NUMBER_F("adc", "", Vadc, 2,"80px",true);
  GP.LABEL("В");   
  GP.BLOCK_END();
 
  GP.BLOCK_THIN_TAB_BEGIN("Сеть 220 В","90%");
  // напряжение сети
  GP.LABEL(" Напряжение: ");
  GP.NUMBER_F("voltage", "", voltage, 1,"80px",true);
  GP.LABEL("В");  GP.BREAK();
  // потребляемый ток
  GP.LABEL("Ток потреб-я:  ");
  GP.NUMBER_F("current", "", current, 2,"80px",true);
  GP.LABEL("А");  GP.BREAK();
  // мощность
  GP.LABEL("Мощность:   ");
  GP.NUMBER_F("power", "", power, 2,"80px",true);
  GP.LABEL("Вт");  GP.BREAK();
  // частота
  GP.LABEL("Частота сети: ");
  GP.NUMBER_F("frequency", "", frequency, 1,"80px",true);
  GP.LABEL("Гц");
  // потребление
  GP.LABEL("Потребление: ");
  GP.NUMBER_F("energy", "", energy, 2,"80px",true);
  GP.LABEL("кВт/ч");  GP.BREAK();
 
  GP.BLOCK_END();

RomaT · 7 Окт 2022

pingemall написал(а):

Не получается выровнять и навести красоту.
Если у кого такое получалось подсоплите

.
Найденной инфы про библу не хватает для понятия выравнивания.

Посмотреть вложение 38519

C++:

  //---Обновление значений измерений------------------------------
  GP.UPDATE("adc",1000);
  GP.BLOCK_THIN_TAB_BEGIN("Аккумулятор","90%");
  // значение аккумулятора
  GP.LABEL("Напряжение: ");
  GP.NUMBER_F("adc", "", Vadc, 2,"80px",true);
  GP.LABEL("В");  
  GP.BLOCK_END();

  GP.BLOCK_THIN_TAB_BEGIN("Сеть 220 В","90%");
  // напряжение сети
  GP.LABEL(" Напряжение: ");
  GP.NUMBER_F("voltage", "", voltage, 1,"80px",true);
  GP.LABEL("В");  GP.BREAK();
  // потребляемый ток
  GP.LABEL("Ток потреб-я:  ");
  GP.NUMBER_F("current", "", current, 2,"80px",true);
  GP.LABEL("А");  GP.BREAK();
  // мощность
  GP.LABEL("Мощность:   ");
  GP.NUMBER_F("power", "", power, 2,"80px",true);
  GP.LABEL("Вт");  GP.BREAK();
  // частота
  GP.LABEL("Частота сети: ");
  GP.NUMBER_F("frequency", "", frequency, 1,"80px",true);
  GP.LABEL("Гц");
  // потребление
  GP.LABEL("Потребление: ");
  GP.NUMBER_F("energy", "", energy, 2,"80px",true);
  GP.LABEL("кВт/ч");  GP.BREAK();

  GP.BLOCK_END();

как вариант вместо label используй span, там есть align

pingemall · 7 Окт 2022

@RomaT,Спасибо, пробовал он переносит на следующую строку все что дальше

RomaT · 7 Окт 2022

@pingemall, или так
String strinG="Напряжение: "+String(Vadc)+" В";
GP.SPAN(strinG,"left","");

pingemall · 7 Окт 2022

@RomaT, Не плохо, но это общая строка. Верстка плачет в стороне.

RomaT · 7 Окт 2022

C++:

void SPAN(const String& val, const String& align = "", const String& name = "") {

        if (align.length()) {

            *_gp_page += F("<div style='text-align:");

            *_gp_page += align;

            *_gp_page += F("'>");

        } else *_gp_page += F("<div>");

        TAG_RAW(F("span"), val, name);

        *_gp_page += F("</div>");

        send();

    }

SPAN при наличии align формирует

HTML:

<div style='text-align:ALIGN>TAG_RAW(F("span")</div>

А TAG_RAW() даёт перевод строки в конце

C++:

void TAG_RAW(const String& tag, const String& val, const String& name) {

        *_gp_page += F("<");

        *_gp_page += tag;

        if (name.length()) {

            *_gp_page += F(" id='");

            *_gp_page += name;

            *_gp_page += "'";

        }

        *_gp_page += F(">");

        *_gp_page += val;

        *_gp_page += F("</");

        *_gp_page += tag;

        *_gp_page += F(">\n");

        send();

    }

Зачем - хз. Извращайтесь как получается)

RomaT · 7 Окт 2022

@pingemall,если верстка слово знакомо, то пишите тегами сразу)

pingemall · 7 Окт 2022

@RomaT, та ото ж, хотел обмануть лень.

RomaT · 7 Окт 2022

@pingemall,такая же фигня. Задумка хорошая, но допиливать её и допиливать.

DAK · 7 Окт 2022

@pingemall, Всё должно быть проще:

C++:

//---Обновление значений измерений------------------------------
  GP.UPDATE("adc",1000);
  GP_MAKE_BLOCK_TAB("Аккумулятор",
    // значение аккумулятора
    GP_MAKE_BOX(GP_EDGES,
        GP.LABEL("Напряжение:");
        GP_MAKE_BOX(GP_RIGHT,
            //GP.NUMBER_F("adc", "", Vadc, 2,"80px",true);
            GP.NUMBER_F("adc", "", Vadc, 2);
            GP.LABEL("В");
        )
    )  
  );

  GP_MAKE_BLOCK_TAB("Сеть 220 В",
    // напряжение сети
    GP_MAKE_BOX(GP_EDGES,
        GP.LABEL(" Напряжение:");
        GP_MAKE_BOX(GP_RIGHT,
            //GP.NUMBER_F("voltage", "", voltage, 1,"80px",true);
            GP.NUMBER_F("voltage", "", voltage, 1);
            GP.LABEL("В");
        )
    );
    // потребляемый ток
    GP_MAKE_BOX(GP_EDGES,
        GP.LABEL("Ток потреб-я:");
        GP_MAKE_BOX(GP_RIGHT,
            //GP.NUMBER_F("current", "", current, 2,"80px",true);
            GP.NUMBER_F("current", "", current, 2);
            GP.LABEL("А");
        )
    );
    // мощность
    GP_MAKE_BOX(GP_EDGES,
        GP.LABEL("Мощность:   ");
        GP_MAKE_BOX(GP_RIGHT,
            //GP.NUMBER_F("power", "", power, 2,"80px",true);
            GP.NUMBER_F("power", "", power, 2);
            GP.LABEL("Вт");
        )
    );
    // частота
    GP_MAKE_BOX(GP_EDGES,
        GP.LABEL("Частота сети: ");
        GP_MAKE_BOX(GP_RIGHT,
            //GP.NUMBER_F("frequency", "", frequency, 1,"80px",true);
            GP.NUMBER_F("frequency", "", frequency, 1);
            GP.LABEL("Гц");
        )
    );
    // потребление
    GP_MAKE_BOX(GP_EDGES,
        GP.LABEL("Потребление: ");
        GP_MAKE_BOX(GP_RIGHT,
            //GP.NUMBER_F("energy", "", energy, 2,"80px",true);
            GP.NUMBER_F("energy", "", energy, 2);
            GP.LABEL("кВт/ч");
        )
    )
  );

Надеюсь поможет, 1-2 страницы назад этот вопрос уже был. Однако конкретно в вашем случае восможно придётся использовать неразрывнй пробел (&nbsp ) для уравнивания длины размерности
Доки тут, но ещё в разработке.
Макросы просто позволяют сократить код, по факту компилятор вставляет GP.BOX_BEGIN GP.BOX_END вместо GP_MAKE_BOX
Перечень всех макросов есть в вики

Home

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

github.com

DAK · 7 Окт 2022

RomaT написал(а):
Зачем - хз. Извращайтесь как получается)

Символом ''\n" браузерн не переводит строку на следующую, это делает <BR> или </BR>, зато при просмотре исходного кода страницы это очень удобно.

pingemall · 7 Окт 2022

@DAK ,Спасибо, 1-2 стр пробовал не помогло. С примером "коробок" из helpa не докумекал, с Вашим примером поярче будет.

DAK · 7 Окт 2022

Пока Вики не до конца напилено, буду потихой подглядывать за этой темой. Я сперва скептически отнёсся к этой библиотеки, потом, увидев код, понял, что это очень полезный инструмент. Думаю что его функций хватит на реализацию даже очень сложных алгоритмов.

ASM · 9 Окт 2022

pingemall написал(а):
Не получается выровнять и навести красоту.

мой пример)

C++:

    GP_MAKE_BLOCK_THIN_TAB(
      "Корректировка показаний",
      GP_MAKE_BOX(GP.LABEL("Комнатная");
                  GP_MAKE_BOX(GP_RIGHT, "100px",
                              GP.LABEL(String (FtempH)); GP.NUMBER("cor_tempH", "", o.cor_tempH, "70px");
                             );
                 );

      GP_MAKE_BOX(GP.LABEL("Уличная");
                  GP_MAKE_BOX(GP_RIGHT, "100px",
                              GP.LABEL(String (FtempS)); GP.NUMBER("cor_tempS", "", o.cor_tempS, "70px");
                             );
                 );
      GP_MAKE_BOX(GP.LABEL("Давление");
                  GP_MAKE_BOX(GP_RIGHT, "100px",
                              GP.LABEL(String (pres)); GP.NUMBER("cor_pres", "", o.cor_pres, "70px");
                             );
                 );
    );

DAK · 9 Окт 2022

@ASM, Там был тот самый прикол, ~~что у тебя 2 элемента, а выше 3~~ (вернее не так, у тебя последний элемент фиксированной ширины, а там было иначе, ширина правого элемента меняласть, то 1 символ, то 2, то 4). В таких случаях всё очень просто решается простой таблицей, но на этом движке её пока нет. А вот с выравниванием, когда 3 элемента, всё как то сложнее. Есть GP.GRID, Но я пока не разобрался как оно работает. Конкретно в случае выше проще было размерность прикрутить к параметру, например вместо Мощность - 12 кВт/ч, сделать просто Мощность (кВт/ч) - 12. С выравниванием трёх элементов сам столкнулся и ничего не придумал толкового. Думаю всё таки попробую замутить кастом функции таблиц, посмотрю как это будет выглядеть.

ASM · 9 Окт 2022

@DAK, думаю с таблицами сложностей не будет)
GP_TR();
GP_TD();

@DAK,И у меня тоже три элемента в строке) Думаю можно и 4, только задать ширину)

AlexGyver · 9 Окт 2022

ПО ВЫРАВНИВАНИЮ - информация будет в вики, просто нет времени описать все новые фичи. В текущей версии есть все необходимые инструменты для того, чтобы сделать и выровнять практически любую конфигурацию компонентов. В основном для этого используется элемент BOX с указанием ширины и типа выравнивания компонентов внутри него. Боксы можно вкладывать друг в друга

GyverPortal

★✩✩✩✩✩✩

★★★✩✩✩✩

★✩✩✩✩✩✩

★★★✩✩✩✩

★✩✩✩✩✩✩

✩✩✩✩✩✩✩

★★★✩✩✩✩

★★★★★✩✩

✩✩✩✩✩✩✩

★✩✩✩✩✩✩

✩✩✩✩✩✩✩

★✩✩✩✩✩✩

✩✩✩✩✩✩✩

★✩✩✩✩✩✩

★✩✩✩✩✩✩

✩✩✩✩✩✩✩

★✩✩✩✩✩✩

★★★✩✩✩✩

★★★✩✩✩✩

✩✩✩✩✩✩✩

★★★✩✩✩✩

★★★★★✩✩

Вложения

★★★✩✩✩✩

★★★★★✩✩

★★★★★★✩