GyverPortal

Всем привет. Предлагаю здесь обсуждать все вопросы по этой библиотеке!

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

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

github.com

 

[Mikhail_Demidov]

Доброго времени суток! Подскажите, пожалуйста, по варианту использования GP.SELECT. Необходимо используя массив типа char, положить его в GP.SELECT с возможностью выбора одного элемента массива и сохранения выбранного элемента при обновлении страницы.
Нерабочий вариант прилагаю:

#include <WiFi.h>
#define AP_SSID "ESP32" //имя точки доступа
#define AP_PASS "12345678" //пароль точки доступа

#include <GyverPortal.h>
GyverPortal ui;

int idx;
char* trigger[6];
struct Struct {
char trigger[5][6] = {
"qwe",
"ewq",
"weq",
"wee",
"",
};
}; Struct alarmtrigger;

void build() {
GP.BUILD_BEGIN(600);
GP.THEME(GP_DARK);
GP.SELECT("idx", trigger, idx);
GP.RELOAD_CLICK("idx");

GP.BUILD_END();
}
void action() {
if (ui.click()) {
ui.clickStr("idx", idx); // поймать и записать индекс
}
}
void setup() {
Serial.begin(115200);
WiFi.mode(WIFI_AP);
WiFi.softAP(AP_SSID, AP_PASS);
ui.attachBuild(build);
ui.attach(action);
ui.log.start(30);
ui.start();
}

void loop() {
ui.tick();
}

Есть вариант из примеров, но там не используется массив:
// вывод компонентов и значений в зависимости от выбора в SELECT
// хранение текста в char[] для удобства сохранения в EEPROM

#define AP_SSID ""
#define AP_PASS ""

#include <GyverPortal.h>
GyverPortal ui;

int idx;
char dates[10][10];
char times[10][10];

void build() {
GP.BUILD_BEGIN(GP_DARK);

GP.SELECT("idx", "1,2,3,4,5", idx);
GP.RELOAD_CLICK("idx");
GP.BREAK();

GP.TEXT(String("date/") + idx, "", dates[idx]);
GP.BREAK();
GP.TEXT(String("time/") + idx, "", times[idx]);

GP.BUILD_END();
}

void action() {
if (ui.click()) {
ui.clickInt("idx", idx); // поймать и записать индекс

if (ui.clickSub("date")) {
// clickName() вернёт полное имя с индексом, например date/1
// ui.clickNameSub(1) вернёт сам индекс после /
ui.copyStr(ui.clickName(), dates[ui.clickNameSub(1).toInt()]);
}
if (ui.clickSub("time")) {
ui.copyStr(ui.clickName(), times[ui.clickNameSub(1).toInt()]);
}
}
}

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();
}

void loop() {
ui.tick();
}

 

[Владлэн]

...в if (ui.click("название кнопки-иконки")) {что тут сделать?};

Что такое кнопка-иконка? В GP разве есть такое?

 

[Владлэн]

@Mikhail_Demidov,
Покопался в библиотеке. Похоже, что там всё завязано на GP_parser, который получая строковое значение делит по запятым. Нужно переписывать под себя.

 

[wow4an]

@Владлэн, Это иконка, на которую можно кликнуть, работает как кнопка.
GP.ICON_FILE_BUTTON("icnf", "/gear.svg", 70, GP_RED);
Вопрос в том, как мне создать страничку например "/settings", а затем перейти на неё.

 

[Владлэн]

@wow4an,
Похоже, чтоб без написания своего обработчика никак.
Обычные кнопки обрабатываются через функцию BUTTON_LINK_RAW, иконочные через ICON_BUTTON_RAW и в ней нет ("' onclick='location.href=\"")

 

[wow4an]

@Владлэн, да, смотрел я в сторону создания кастомного компонента путём объединения кнопки-ссылки и кнопки-иконки, но нет никакого понимания того, что и как делать... Эх жалко. Задумка использовать навигацию в виде больших иконок, видимо, пока не осуществима, буду юзать меню.

 

[Petr_S]

как заставить писать float
float valNum;
GP.NUMBER_F("num", "number", valNum); GP.BREAK();
if (ui.clickInt("num", valNum)) {
Serial.print("Number: ");
Serial.println(valNum);
пишеш 23.5 а сохраняет 23.00

 

[wow4an]

@Petr_S, Вы задали переменную float, а при клике записываете её зачем то в int. Правильно тут будет так: ui.clickFloat("num", valNum)

 

[asltd]

Всем привет. Столкнулся с проблемкой- при использовании ESP32 (DevKit) и Portal все стабильно работает, отрываются и обновляются страницы шустро, пока есть устойчивая связь с роутером. Если ардуинкку отнести от роутера (без потери связи. пинги до платы идут), то страницы сервера перестают отвечать. При возвращении в устойчивый прием WiFi работа сервера не восстанавливается. Собственно вопрос, можно как то сделать проверку и авто ребут сервера при таких разрывах? желательно не по таймеру, а по условию) п.с. в программировании не силен, сильно не пинайте, если уже обсуждалось- не нашел)

 

[gidiara666]

Не покидает мечта сделать кнопку, которая при нажатии меняет цвет без перезагрузки всей страницы. (На странице выведены показания кучи датчиков, очень некрасиво они при перезагрузке страницы обнуляются, затем по очереди возникают показания, это создаёт крайне жуткий эффект при кликании всего на одну кнопку переключателя).
Код рабочий организован при помощи кнопки и костыльного прямоугольника color, меняющего цвет. Светодиод не использую, ибо в firefox светодиоды портала выглядят крайне хреново.

// При нажатии цвет кнопки не изменяется, но справа есть большой прямоугольный индикатор.
// Видно изменение состояни  кнопки со всех экранов: телефон, лептоп, браузер в ТВ. 
GP.BUTTON("switch4", "Клапан воды", switch4, GP_CYAN), GP.COLOR("col4", valCol));

//код, при котором меняется цвет кнопки, но перегружается весь портал, что крайне нежелательно:

GP.BUTTON("switch4", "Клапан воды", switch4, relay4Flag?GP_RED:GP_GREEN,"",false,true);
//Разумеется, если убрать true, перезагрузки портала не произойдёт. Но тогда нет изменения
//цвета кнопки при нажатии в браузере. Как сделать изменение цвета кнопки без перерисовки всей страницы? Причём, видно должно быть на нескольких устройствах одновременно.

 

[Barmer]

В билдере если применять две одинаковые подписи с именем, то значение выводится только у одного компонента.
Напрмер:

void build()
{
  GP.BUILD_BEGIN(400);
  GP.THEME(GP_DARK);
  GP.UPDATE("inp_intT1"); // Какие компоненты будем обновлять
  GP.LABEL("Адрес датчика 1", "inp_strT1");
  GP.LABEL("Адрес датчика 1", "inp_strT1");
  GP.BUILD_END();
}

void action()
{
  if (ui.update())
  {
    ui.updateString("inp_strT1", inp_strT1);
  }

Выведет адрес только один раз.

Это норма? Надо для отображения в разных местах одних и тех же данных на странице применять разные имена?

  GP.LABEL("Адрес датчика 1", "inp_strT1");
  GP.LABEL("Адрес датчика 1", "_inp_strT1_");

 

[artem.pcb]

Добрый день!
Можно ли изменить внешний вид GP.RADIO на GP.SWITCH например? Я копировал в файлах библиотеки GP.RADIO, переименовывал в GP.RADIO_SW, пытался менять строки, но ничего не получалось...
Спасибо!

 

[CCat]

Допустим, у меня отрезки в loop отдельные - "когда портал" и "когда не портал".
Какие-то проблемы со считыванием из EEPROM заданных порталом переменных.
Вот код, относящийся к нужному.

struct Data {
  int trigVal;
  int durVal;
  int brightVal;
  bool fullBr;
  bool xMas;
};
Data data;

#include <EEManager.h>
EEManager memory(data);

void setup() {
  EEPROM.begin(150); 
  memory.begin(0, 'a');
}

void loop() {
  memory.tick();
  Serial.println(data.brightVal);
}

Я что-то забыл в этом куске кода? Я так получу data.brightVal?
Да, и раз в этой части кода (когда портал выключен), я не пишу ничего в eeprom, мне же memory.tick(); вообще не нужно?

 

[gidiara666]

1. Замените bool на int.
2. Памяти до лампочки, юзаете Вы GP или нет. Она сохраняет данные по команде. А будет эта команда в коде GP или когда он "выключен"- это на усмотрение программиста.
3. Этот отрезок кода не позволяет ответить на вопрос, получите ли Вы data.brightVal из памяти. Нигде не видно команды запоминия в память этой величины, да и сама она не инициализирована и не объявлена. .

 

[CCat]

1) bool нельзя?
2) это я понимаю.
в портальной части

      data.brightVal = ui.getInt("bright");
      data.trigVal = ui.getInt("trig");
      data.durVal = ui.getInt("dur");
      data.fullBr = ui.getBool("full");
      data.xMas = ui.getBool("mas");

      memory.update();

(и в loop memory.tick())
так что в память засовываю.
3) Так в самом вверху инициализируется же вроде
struct Data {....

В общем, в портальной части всё сохраняется и считывается, но у меня непонятные глюки со считыванием уже записанного в "непортальной" части.

 

[DEST81]

Коллеги, доброго времени суток.
Ткните носом, сам пока не смог найти. А есть ли возможность нарисовать просто таблицу по данным, без привязки ко времени? По двум переменным. Может встречал кто?

 

[Владлэн]

Может использовать GP.NUMBER(...) в цикле?

 

[Владлэн]

У меня такой вопрос. Есть ли способ простой статичный график перезагружать с новыми данными? У меня массив данных, могу построить график, но чтоб получить новый график с новыми данными нужно перазагрузить страницу. Можно ли это сделать без перезагрузки страницы?

 

[SoftFelix]

Подскажите, пожалуйста, можно ли отлаживать GP, открыв браузером на локальном компьютере скопилированный код? Т.е. без загрузки в ESP.

В описании написано:

Примеры можно скомпилировать и выполнить на хосте, запустив ../../onhost [-h] из любого каталога примеров.

Но не понимаю, это ли ответ на мой вопрос и где это искать?

 

[Владлэн]

Подскажите, пожалуйста

Вроде это на линуксе только работает. Не проверял.

 

[gidiara666]

1. Хочу вывести большую инструкцию на отдельной странице. Как это осуществить?
Отдельно загружать файл в память- не вариант, человек удалённо покупает контроллер, загружает мой код и при кликании на пункт "инструкция" получает многостраничную инструкцию к этому коду.
Создал instruction.h с необходимым содержимым.
команда GP GP.EMBED(instruction.h); - выдаёт пустой белый квадрат.
2. как получить время из GP и вне портала постоянно его обновлять для срабатывания по условию?
GP.LABEL(String(timeClient.getFormattedTime())); //появляется время при обновлении страницы (F5)
как в виде String получить его работать с ним далее, причём, это - время и оно динамически изменяется...
Без проблем получаю время с NTP сервера сторонней библиотекой, но если ESP в режиме точки доступа, то зависает всё... Портал же получает время с роутера, не подключённого к интернету, и благополучно его показывает.

 

[Владлэн]

1. Не проще дать файл с инструкцией отдельно?
2. Портал получает время из браузера.
GP.LABEL(String(timeClient.getFormattedTime())); - это ведь и есть время из NTP.

 

[gidiara666]

@Владлэн,
ну надо Вам вывести страницу текста на экран. По требованию автора программы. И что, писать в одну строку это всё в коде, не используя знак "" в тексте??? Или флешку втыкать по команде?
Лучше вообще не отвечать, чем давать такие советы .
2. весь смысл- чтоб поставить приблуду без инета в подвал, зайти в настройки web морды и ввести желаемое время вкл/выкл механизма, сменить часовой пояс и затем оно само работает до следующего выхода в инет для коррекции времени, с этой целью иногда можно с мобилой подходить с созданной точкой доступа, которая указана в Портале.
Тасмота так умеет.
Проблемка: как это время из Портала добывать каждую секунду, пока условие по времени не сработает... Отдельный модуль часов с батареей ставить - не вариант

P.S.
Загрузил пример из examples GP, для теста. Прямо в папке со скетчем - другая папка, data. В ней test.txt, всё как в примере. Не выводит содержимое! Загружать даёт, в результате файл с нулевым размером test.txt, без содержания. Что это может быть? Код примера нет смысла выводить, там основное:
GP.EMBED("/test.txt");
GP.BUTTON_LINK("/test.txt", "Открыть");
GP.BUTTON_DOWNLOAD("/test.txt", "Скачать");

 

[gidiara666]

Не работает OTA и выгрузка/загрузка файлов из GP.
Что делал:
1. форматирую ESP32, ESP8286 WROOM в Arduino v1 вот так: «Инструменты- ESP8266 LittleFS data upload», успешно. Использую последний имеющийся на оф. сайте esp8266littlefs.jar, находится в /home/e/Arduino/tools/ESP8266LittleFS/tool, либо для ESP32 esp32fs.jar в своей папке, всё по инструкции с оф.сайта.
2. Кладу файл в папку data, созданную прямо в папке проекта, проверяю простым кодом, выводит в консоль содержимое файла.
3. Пытаюсь сделать тоже самое при помощи средств GP — результата нет.
Что я делаю не так?

Включена опция: «erase flash: only scetch».

Flash sise: 4Mb, FS- 2mb, OTA — 1Mb

Файл test.txt присутствует в папке со скетчем, в папке data, в папке data/gp_data/test.txt — нет результата.

#include "LittleFS.h"

void setup() {
  Serial.begin(115200);

  if(!LittleFS.begin()){
    Serial.println("An Error has occurred while mounting LittleFS");
    return;
  }

  File file = LittleFS.open("/test.txt", "r");
  if(!file){
    Serial.println("Failed to open file for reading");
    return;
  }

  Serial.println("File Content:");
  while(file.available()){
    Serial.write(file.read());
  }
  file.close();
}

void loop() {

}

Представляю сообществу часть своего проекта.
Многофункциональный таймер с сохранением заданного значения времени в EEPROM памяти.
При запуске ждать, пока не появится сеть wifi c названием: ESP_WIFI_PORTAL, пароль: smarthome. Таймер работает как с инетом, так и без, с возможностью изменить часовой пояс, время старт/стоп, включено/выключено при загрузке, заданием с сохранением в память времени вкл/выкл временных интервалов.
Логин/ Пароль на админку: administator administrator. Пин на реле: GPIO4.
Это малая часть почти завершённого проекта, в этом куске нет mqtt и Telegram, температур, влажности, атмосферного давления, датчиков на окна и двери, датчика Холла на ригель замка (закрыт ли замок), управлением вентилятором в санузле по влажности, датчика протечки воды, выключателей 6 шт на различную нагрузку, термостата на тёплый пол с гистерезисом и заданием температуры вкл/выкл, данных с электросчётчика PZEM, меню Telegram для управления ко всему этому и выводом в Telegram адреса портала для доступа и управления отовсюду. Кстати, всё вроде влезло в ESP32 и работает без особых тормозов.
Огромная благодарность всем терпеливым участникам обсуждения за помощь при создании.
Пока не работает вывод и загрузка файла...

 

[Buratyno]

Доброго времени суток. Кто-нибудь делала проброс для есп через днс , чтобы можно было подключаться через интернет а не только локально, или может у кого-то есть ссылка на статью по этой теме. Как я понял нужно использовать функцию
void start("host", port); порт ясно, но что делать с хостом, какой сервис лучше использовать.