search

GyverLibs / GyverPortal

Простой конструктор веб интерфейса для esp8266 и ESP32
MIT License
311 stars 25 forks source link

Идеи/проблемы на обновление v3.6 #58

Closed GyverLibs closed 1 year ago

GyverLibs commented 1 year ago

v3.6

ROADMAP

steelmak commented 1 year ago

После обновления с 3.4 на 3.5 появилась проблема в ширине столбцов в таблице. Строим таблицу с указанием размеров ячеек (ширины столбцов), например, четыре столбца "25%,25%,25%,25%". В ячейки помещаем GP.NUMBER(имя, подсказка, число); и в табличке в релизе 3.4 корректно задаётся ширина столбцов, согласно, "25%,25%,25%,25%" В релизе 3.5 столбцы расширились до умолчательной ширины GP.NUMBER и в целом таблица стала ширине всех других таблиц, где нет GP.NUMBER. Для решения проблемы у GP.NUMBER теперь явно указываю ширину текста (80%) GP.NUMBER(имя, подсказка, число, ширина).

Проблема наблюдается и у GP.NUMBER_F

gorlanovmax commented 1 year ago

А проблему с перезагрузкой по alert не удалось устранить?

GyverLibs commented 1 year ago

проблема в ширине столбцов в таблице

Принял, верну ширину обратно

проблему с перезагрузкой по alert

Я в тот же вечер сделал, вроде работает отлично. Имя алерта добавляется в релоад список, после вывода алерта и нажатия на ОК страница перезагружается

gorlanovmax commented 1 year ago

Я в тот же вечер сделал, вроде работает отлично. Имя алерта добавляется в релоад список, после вывода алерта и нажатия на ОК страница перезагружается

Смешной вопрос, а alert и jquery совместимы на одной странице? У меня есть блок с jquery обновлением и alert, но что-то alert не появляется

gorlanovmax commented 1 year ago

И продублирую с форума:

Обнаружил, что локально можно грузить скрипты графиков только для AJAX и PLOT_STOCK у PLOT намеренно нет такой возможности?

void PLOT(const String& id, const char** labels, int16_t vals[ax][am], int dec = 0, int height = 400)

Есть фиксовый массив, который хотелось бы показать на графике, ESP в режиме роутера, доступа к интернету нет

GyverLibs commented 1 year ago

alert и jquery совместимы на одной странице?

Ни малейшего понятия) но все компоненты, которые вызываются через обновление, должны вызываться именно через update. Jquery обновляет только значения

у PLOT намеренно нет такой возможности?

Намеренно, тк там десяток файлов скриптов и стилей нужно для работы. В будущем все три графика скорее всего будут заменены одним лёгким и универсальным

gorlanovmax commented 1 year ago

Ни малейшего понятия) но все компоненты, которые вызываются через обновление, должны вызываться именно через update. Jquery обновляет только значения

Собственно не получается. Имею страницу На ней часть заключена в GP.JQ_UPDATE Заключена, чтобы иметь возможность без перезагрузки страницы обновлять доступность SWITCH калибровки (чтобы следующий становился доступным, после включения предыдущего) Доступность слайдеров работает корректно. Но вот alert не появляется после нажатия кнопки "Сохранить данные калибровки" и страница не перезагружается. При этом со страницы пропадает блок, который заключен в GP.JQ_UPDATE Код и скрины ниже

void build() {
GP.BUILD_BEGIN_FILE(600);
  GP.THEME_FILE("GP_DARK");
  GP.ALERT("alt2");
  GP.RELOAD_CLICK("alt2");
  GP.UPDATE("current_adc36,alt2", 250); 
  GP.BLOCK_BEGIN(GP_TAB, "100%", "Калибровка датчика уровня");
  GP.JQ_SUPPORT_FILE();
  GP.BLOCK_BEGIN(GP_TAB, "100%", "Ввод данных калибровки");
    if (cal_start == true) {
      GP.BOX_BEGIN(GP_CENTER);
        GP.BOLD("Текущее значение конвертера"); 
        GP.LABEL_BLOCK("", "current_adc36");
      GP.BOX_END();
      GP.BREAK();
      //начало блока JQUERY
      GP.JQ_UPDATE_BEGIN(500);              
      GP.TABLE_BORDER(1);
      GP.TABLE_BEGIN("40%,30%,30%", GP_ALS(GP_CENTER, GP_CENTER, GP_CENTER), "100%"); 
      GP.TR(); GP.TD(); GP.SPAN("Литров"); GP.TD(); GP.SPAN("Процентов"); GP.TD(); GP.SPAN("Задать"); 
      GP.TR(); GP.TD(); GP.SPAN("0"); GP.TD(); GP.SPAN("0%"); GP.TD(); GP.SWITCH("cal_0", f0, PSTR("#6ecced"));   
      GP.TR(); GP.TD(); GP.SPAN(String(volume*0.5)); GP.TD(); GP.SPAN("50%"); GP.TD(); GP.SWITCH("cal_500", f500, PSTR("#6ecced"), !f0);  
      GP.TR(); GP.TD(); GP.SPAN(String(volume)); GP.TD(); GP.SPAN("100%"); GP.TD(); GP.SWITCH("cal_1000", f1000, PSTR("#6ecced"), !f500);  
      GP.TABLE_END(); 
      GP.JQ_UPDATE_END(); 
      // конец блока
      GP.BUTTON_MINI("cal_stop", "Сохранить данные калибровки","","","",0,0);
    } else {
        GP.BUTTON_MINI("cal_start", "Начать калибровку","","","",0,1);
    }
}

void action()
  if (portal.update()) { 
    if (portal.update("current_adc36")) {
      portal.answer(analogRead(Pin_36));
    }
    if (alertCal && portal.update("alt2")) {
      alertCal = 0;
      portal.answer(String("Значения калибровки сохранены!"));
    }
  if (portal.click()) {
    if (portal.click("cal_stop")) { //остановка калибровки
        save_calibrate();
        alertCal = 1;
    }
    if (portal.click("cal_0")) { //кнопка калибровки 0%
      cal_0 = analogRead(Pin_36);
      f0 = 1;
    }   
    if (portal.click("cal_500")) { //кнопка калибровки 50%
      cal_500 = analogRead(Pin_36);
      f500 = 1;
    }   
    if (portal.click("cal_1000")) { //кнопка калибровки 100%
      cal_1000 = analogRead(Pin_36);
      f1000 = 1;
    }   
}

Перед началом калибровки 1 В процессе калибровки 2 По нажатию кнопки "Сохранить данные калибровки" 3

gorlanovmax commented 1 year ago

Еще сегодня обратил внимание на баг. ONLINE_CHECK не использую при этом на странице внизу надпись "Device offline" хотя ESP на связи и отвечает 4 5

GyverLibs commented 1 year ago

Возможно jquery не очень совместим с костылями в коде.

внизу надпись "Device offline"

Если надпись там постоянно - Ctrl+F5. Если иногда появляется - в текущей версии браузер проверяет, долетают ли до есп апдейты. Если за секунду апдейт не доходит - всплывает баннер оффлайн

gorlanovmax commented 1 year ago

Надпись постоянно и Ctrl+F5 не помогает

GyverLibs commented 1 year ago

А какой браузер? Потому что этот баннер должен быть справа, и текст ориентирован вертикально :)

gorlanovmax commented 1 year ago

Opera

GyverLibs commented 1 year ago

хз, поставил оперу - всё ок image

gorlanovmax commented 1 year ago

А тема с LittleFS берется?

GyverLibs commented 1 year ago

Нет, со скетча. Файл обновлялся после перехода на 3.6?

gorlanovmax commented 1 year ago

Да, обновлял, но сейчас еще раз проверю

webresh commented 1 year ago

@GyverLibs есть предложение добавить возможность вносить свой код в раздел head веб-страницы. например, чтобы избавиться от увеличения на Андроиде, добавлял такие строки в builder.h:

        "<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>\n"
        "<meta http-equiv='ScreenOrientation' content='autoRotate:disabled'>\n"
GyverLibs commented 1 year ago

ух, неудобно будет) я внёс user-scalable=0 в хэд

DenysChuhlib commented 1 year ago

@GyverLibs есть предложение добавить возможность вносить свой код в раздел head веб-страницы. например, чтобы избавиться от увеличения на Андроиде, добавлял такие строки в builder.h:

        "<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>\n"
        "<meta http-equiv='ScreenOrientation' content='autoRotate:disabled'>\n"

Сделай свой копмонент и все

GyverLibs commented 1 year ago

Сделай свой копмонент и все

ну это не очень круто, потому что мета находятся в BUILD BEGIN

Serega88kos commented 1 year ago

#define GP_VERSION "3.6-b12.01" Алекс, предложение по отслеживанию изменений. Указывать в номере версии дату внесения изменений) если несколько получится, можно добавить _2

steelmak commented 1 year ago

Пробую пример использования "блоков" для оформления - blocks2 Меняю тему на GP_LIGHT - изменений в оформлении не наблюдаю (возможно так и должно быть).

Пробую менять цвет ФОНА под заголовком в блоке. Фон меняется. GP.BLOCK_BEGIN(GP_TAB, "", "My tab txt red ", PSTR("#99cdff")); GP.LABEL("Block tab text red"); GP.BLOCK_END();

Вопрос - как поменять цвет текста в заголовке?

GyverLibs commented 1 year ago

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

MalfurionST commented 1 year ago

Здравствуйте, хотелось-бы дефайновую настройку для отключения функционала ONLINE_CHECK(), т.к. периодически вылазит когда не ждешь и мешает (хотя не особо сильно)...

GyverLibs commented 1 year ago

для отключения функционала ONLINE_CHECK()

можно установить таймаут секунды на две-три GP.setTimeout(3000)

gorlanovmax commented 1 year ago

Что-то перестал работать кастомный OTA

void customBuild(bool UpdateEnd, const String& UpdateError) {
  GP.BUILD_BEGIN_FILE(600);
  GP.THEME_FILE(F("GP_DARK"));

  GP.NAV_TABS_LINKS("/,/ota_update", "Настройки,Обновление");

  GP.BLOCK_BEGIN(GP_TAB, "100%", F("Обновление программного обеспечения"));
    if (!UpdateEnd) {
      GP.OTA_FIRMWARE("Обновить прошивку", PSTR("#6ecced"));
      GP.OTA_FILESYSTEM("Обновить файлы", PSTR("#6ecced"));
    } else if (UpdateError.length()) {
      GP.LABEL(String(F("<b>Ошибка обновления:</b><br>")));
      GP.BOLD(UpdateError);
      GP.BUTTON_MINI_LINK(F("/update"), F("Вернуться"));
    } else {
      GP.LABEL(F("<b>Обновление выполнено!<br>Перезагрузка...</b>"));
      GP.BUTTON_MINI_LINK(F("/"), F("К настройкам..."));
    }
  GP.BLOCK_END();

  GP.BUILD_END();
}

В setup прописываю

  portal.attachBuild(build);
  portal.attach(action);
  portal.uploadAuto(true); //автоматическая загрузка
  portal.downloadAuto(true);
  portal.enableOTA();
  portal.OTA.attachUpdateBuild(customBuild);
  portal.start();

обновление проходит, но страницы с сообщением о успехе нет

gorlanovmax commented 1 year ago

Есть предложение: Реализовать плашки как вот в этой библиотеке https://github.com/ayushsharma82/ESP-DASH

Т.е. некие элементы, например GP.TEMP С параметрами "id", "текст", "цвет" Который при добавлении на страницу даст готовый блок с отображением параметров и картинкой

gorlanovmax commented 1 year ago

Еще есть предложение добавить проверку имени файла бинарника файловой системы по аналогии с бинарником скетча image

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

GyverLibs commented 1 year ago

плашки как вот в этой библиотеке

Есть подобное в планах, но более гибкое

gorlanovmax commented 1 year ago

по кастомной странице ОТА не посмотрел?

gorlanovmax commented 1 year ago

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

Могу добавить и выслать файл CustomOTA.h

GyverLibs commented 1 year ago

Оставим это Денису)

gorlanovmax commented 1 year ago

Так ничего сложного. В этом файле добавлена возможность указания : Имя бинарника файловой системы - #define GP_OTA_FS_NAME Кастомный текст ошибки имени бинарника скетча - #define GP_ERROR_OTA_FS_NAME Кастомный текст ошибки имени бинарника файловой системы - #define GP_ERROR_OTA_NAME Кастомный текст ошибки при отмене загрузки - #define GP_ERROR_OTA_ABORTED Кастомный текст ошибки типа выбранного файла - #define GP_ERROR_OTA_TYPE

CustomOTA.zip

DenysChuhlib commented 1 year ago

У меня есть лутше идея по тексту, ща сделаю и отправлю

DenysChuhlib commented 1 year ago

Изминения в CustomOTA.h

// setup portal.OTA.attachErrorCode(getErr);


[CustomOTA.zip](https://github.com/GyverLibs/GyverPortal/files/10457082/CustomOTA.zip)
bruckbond commented 1 year ago

вопрос, переходящий в пожелание) в примере actionForm.ino происходит запись в EEPROM. Но на каком именно этапе, и как использовать записанное не могу понять. В примере выглядит просто как использование 1 переменной, которая при перезагрузке не обнуляется. Пожелание - подробнее описать взаимодействие с EEPROM.

GyverLibs commented 1 year ago

в примере actionForm.ino происходит запись в EEPROM

Такого примера нет в библиотеке

подробнее описать взаимодействие с EEPROM

Библиотека веб-интерфейса - не место для базовых ардуино-уроков :) см. https://alexgyver.ru/lessons/eeprom/ А также документацию к GyverPortal

gorlanovmax commented 1 year ago

Изменения в CustomOTA.h

Денис спасибо, огонь.

gorlanovmax commented 1 year ago

Делаю в build так

  GP.BLOCK_BEGIN(GP_TAB, "100%", F("Обновление программного обеспечения"));
  if (!portal.OTA.updateEnd()) {
    GP.OTA_FIRMWARE("Обновить прошивку", PSTR("#6ecced"));
    GP.OTA_FILESYSTEM("Обновить файлы", PSTR("#6ecced"));
  } else if (portal.OTA.hasError()) {
    GP.BOLD("Ошибка обновления:");
    GP.BREAK();
    GP.BOLD(portal.OTA.error());
    portal.OTA.clearError();
    GP.BREAK();
    GP.BUTTON_MINI_LINK(F("/update"), F("Назад"));
  } else {
    GP.LABEL("Обновление успешно завершено!!!<br>Перезагрузка");
    GP.BREAK();
    GP.BUTTON_MINI_LINK(F("/update"), F("Назад"));    
  }

В setup

 portal.attachBuild(build);
  portal.attach(action);
  portal.uploadAuto(true); //автоматическая загрузка
  portal.downloadAuto(true);
  portal.enableOTA();
  portal.OTA.attachErrorCode(getErrorDescription);
  portal.start();

Сэмулировал ошибку Сообщение об ошибке не появляется, т.е. hasError() не отрабатывает При корректно обновлении Во время обновления идет переадресация на страницу /GP_OTA_update По окончании обновления опять переходит на мою страницу, но сообщение об успешности также не появляется.\Всегда отображается блок по условию if (!portal.OTA.updateEnd())

DenysChuhlib commented 1 year ago

Изминения в CustomOTA.h

  • buildBlock(portal.OTA.updateEnd(), portal.OTA.error()) пастроет в build() блок с кнопками, такой же как и на странице /ota_update
  • updateEnd() закончено ли обновление (bool)
  • clearError() очищает ошибки
  • hasError() есть ли ошибка (bool)
  • getError() возвращает код ошибки(все коды ошибок в CustomOTA.h)
  • getErrorString() возвращает тест ошибки на английском
  • error() возвращает тест ошибки как и getErrorString(), но если подключить функцию в attachErrorCode(имя_функции) то будет использовать повсюду новый текст, даже на странице /ota_update , например:
String getErr(uint8_t code) {
  String out;
  switch(code) {
    case UPDATE_ERROR_OK:
      out = F("Нету ошибки");
      break;
    default:
      out = portal.OTA.getErrorString();//будет подставлять текст для других ошибок
      break;
  }
  return out;
}

// setup
portal.OTA.attachErrorCode(getErr);

CustomOTA.zip

gorlanovmax commented 1 year ago

Денис, а можно пример итоговый? Кастомная страница обновления (чтобы можно было вывести ошибки и успех)

Serega88kos commented 1 year ago

@GyverLibs 525c59e61ddb43eabc72d0161e61e596 Нужно такое?)

gorlanovmax commented 1 year ago

@DenysChuhlib, собственно перепробовал возможные варианты: Везде использую свой текст ошибок

  1. Использование штатной страницы /ota_update

    • Выдает ошибки обновления
    • Выдает успешный результат обновления. НО в виде ошибки image т.е. до блока успешности в условии не доходит image

  2. Использование кастомного build страницы обновления по адресу /ota_update Строю страницу абсолютно идентично штатной странице обновления

    void customBuild(bool UpdateEnd, const String& UpdateError) {
GP.BUILD_BEGIN_FILE(600);
GP.THEME_FILE(F("GP_DARK"));
GP.BLOCK_BEGIN(GP_TAB, "100%", F("Обновление программного обеспечения"));
if (!UpdateEnd) {
  GP.OTA_FIRMWARE("Обновить прошивку", PSTR("#6ecced"));
  GP.OTA_FILESYSTEM("Обновить файлы", PSTR("#6ecced"));
} else if (UpdateError.length()) {
  GP.LABEL(String(F("<b>Ошибка обновления:</b><br>")));
  GP.BOLD(UpdateError);
  GP.BUTTON_MINI_LINK(F("/ota_update"), F("Назад"));
} else {
  GP.LABEL(F("<b>Обновление выполнено!<br>Перезагрузка...</b>"));
  GP.BUTTON_MINI_LINK(F("/"), F("К настройкам..."));
}
GP.BLOCK_END();
GP.BUILD_END();
}

    Подключаю в setup() portal.OTA.attachUpdateBuild(customBuild); image

В результате:

  1. Использования кнопок на своей странице Строю страницу 
    void build() {
int i;
GP.BUILD_BEGIN_FILE(600);
GP.THEME_FILE("GP_DARK");
if (portal.uri("/update")) {
GP.BLOCK_BEGIN(GP_TAB, "100%", F("Обновление программного обеспечения"));
if (portal.OTA.getError() == 0) {
GP.OTA_FIRMWARE("Обновить прошивку", PSTR("#6ecced"), 1);
GP.OTA_FILESYSTEM("Обновить файлы", PSTR("#6ecced"), 1);
} else if (!portal.OTA.hasError()) {
GP.LABEL("Обновление успешно завершено!!!<br>Перезагрузка");
GP.BREAK();
GP.BUTTON_MINI_LINK(F("/update"), F("Назад"));
} else {
GP.BOLD("Ошибка обновления:");
GP.BREAK();
GP.BOLD(portal.OTA.error());
portal.OTA.clearError();
GP.BREAK();
GP.BUTTON_MINI_LINK(F("/update"), F("Назад"));
}
GP.BLOCK_END();
}
GP.BUILD_END();
}

    В результате:

    • При ошибке страница обновляется, текст ошибки отображается.
    • При успешном обновлении результат также не появляется сообщения, сразу появляются кнопки. Отдельно замечу, что при использовании кнопок на своей странице, после обновления wi-fi отваливается (esp работает в режиме роутера). На штатной странице такого не происходит
gorlanovmax commented 1 year ago

@GyverLibs Алекс есть предложение относительно alert и promt На большом экране вывод небольшого белого окна уведомления не всегда сразу бросается в глаза. Возможно имеет смысл попробовать сделать вплывающим блоком div с позицией absolute по центру окна? и с кнопками в стиле темы

gorlanovmax commented 1 year ago

Проверка связи с ESP В библиотеке в scripts.h оставлена функция вывод всплывающего окна средствами браузера. Получается дублирование И alert требующий подтверждения, и плашка в правой части экрана image

И в scripts.js (при хранении в spiffs) тоже оставлено image

GyverLibs commented 1 year ago

alert и promt

Это стандартные компоненты html, я их переделывать не буду

Получается дублирование И alert требующий подтверждения, и плашка

Нет, не получается. Там условие !upd. Алерт появляется при ошибке отправки клика, чтобы юзер сразу понял что его клик не дошёл. А плашка всплывает при ошибках апдейта, апдейт у нас процесс цикличный и это его статус

gorlanovmax commented 1 year ago

Это стандартные компоненты html, я их переделывать не буду Я говорил о добавлении новых возможностей уведомления, стандартные не обязательно трогать

Нет, не получается. Там условие !upd. Алерт появляется при ошибке отправке клика, чтобы юзер сразу понял что его клик не дошёл. А плашка всплывает при ошибках апдейта, апдейт у нас процесс цикличный и это его статус А интервал проверки напомни, где выставляется для каждой из проверок

GyverLibs commented 1 year ago

На большом экране вывод небольшого белого окна уведомления не всегда сразу бросается в глаза.

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

интервал проверки

GP.setTimeout(ms), умолч 1500

gorlanovmax commented 1 year ago

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

Да нет))) Просто если бы это было не белое окно (особенно на темной теме) это бы смотрелось намного органичнее image

GP.setTimeout(ms), умолч 1500

А на стандартной странице ota_update он же не сработает?

GyverLibs commented 1 year ago

это бы смотрелось намного органичнее

У алерта как раз функция быть заметным)

на стандартной странице ota_update он же не сработает?

На стандартной странице ота нет ни кликов, ни апдейтов. Возможно я добавлю принудительный скрипт проверки связи если на странице нет апдейтов, пока не знаю. Пока все только жалуются что вылезает уведомление и приходится поднимать тайм-аут