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

[GyverLibs]

v3.5

• Добавлено
  • Отображение границ таблицы TABLE_BORDER()
  • Опасные copy- и click-парсеры (для опроса в условии)
  • Ширина для AREA
  • Всплывающее окно с ошибкой, если "клик" не дошёл до сервера
  • Можно получить логин и пароль, которые вводятся при авторизации, login() и pass()
  • Настройка размера/толщины текста и переноса для текстовых подписей TITLE, LABEL, LABEL_BLOCK. Подписи SPAN/BOLD/PLAIN больше не нужны
  • encodeDMY для GPdate (день.месяц.год)
  • Цвет GP_YELLOW_B
  • Настройка цвета для LED
  • RELOAD_CLICK работает с popup (ALERT, PROMPT, CONFIRM)
  • Проверка подключен ли клиент, функции online() и onlineTimeout()
  • У веб-лога добавлены кнопки для очистки и остановки прокрутки
  • Компонент RADIO для списков выбора
• Пофикшено
  • Глаз в PASSWORD() поставлен на место
  • Баг с макросом M_TR10
  • SPINNER() повинуется выравниванию
  • Таблица SYSTEM_INFO вернулась в компактный вид
  • HINT (сломался в v3.4)
  • Невероятный баг с вечной загрузкой CHECK() и проблемой с опросом его значения с формы
• Улучшено
  • Оптимизированы скрипты
  • Автоматическое удаление пробелов в списке UPDATE()
  • Ширину окна CAM_STREAM() и cam_stream_window можно задать стрингой
  • В ONLINE_CHECK() добавлена возможность отправлять свой js код при пропадании связи с платой
  • Дизайн таблички FILE_MANAGER + добавлена ширина вторым аргументом
  • Переделан механизм перезагрузки страницы, теперь работает гораздо быстрее и стабильнее
  • UPDATE запрашивает обновления только когда окно браузера активно
  • UPDATE при пропадании связи сигнализирует всплывающим баннером
  • Скрыты пустые ячейки у таблицы с заданными ширинами
• Изменено
  • В SPINNER() вернулась ширина предпоследним аргументом, её установка отключает автоширину
  • ONLINE_CHECK() теперь выдаёт всплывающий баннер вместо иконки в названии страницы
  • Убран setReloadTimeout(), механизм улучшен, задаётся общий таймаут в setTimeout()
  • Дизайн LABEL_BLOCK, чтобы отличался от кнопок
  • Поле пароля с "глазом" теперь вызывается компонентом PASS_EYE

TODO v3.5

• ОТА через cmd/shell curl -vF firmware=@firmware.bin http://x.x.x.х/GP_OTAupload

ROADMAP

• двойной слайдер https://w3collective.com/double-range-slider-html-css-js/
• джойстик
• нативные графики
• вебсокет
• аналог grid ui
• асинхронный сервер

[Serega88kos]

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

[GyverLibs]

После обновления всё стало кешироваться, после изменения стилей надо делать ctrl+f5

[Serega88kos]

GP.HINT вроде перестал работать

[GyverLibs]

ох блин точно, в одном месте ; лишняя...

[Serega88kos]

а что случилось с GP.CHECK();? включить можно, но выключить уже никак) другие элементы при этом сохраняются после отправки формы.

[GyverLibs]

а что случилось с GP.CHECK();?

добавил вариант от @MalfurionST. У меня работает корректно

[GyverLibs]

вот это жесть! Оказывается существует баг - если делать svg через xml, как у нас сделано - нельзя накидывать анимацию transition! Браузер начинает вечно что то загружать и начинаются лаги. Обновил в репе версию пофикшенную....

[Serega88kos]

не работает copyBool работает getBool

[GyverLibs]

странно, всё работает

bool v1 = 0, v2 = 0;
v1 = ui.getBool("ch");
ui.copyBool("ch", v2);

Serial.print(v1);
Serial.print(',');
Serial.println(v2);

// выводит одинаково 1,1 - 0,0 и так далее

copyBool(name, x) внутри это просто x = getBool(name)

[Serega88kos]

BOOL.ino.txt проблема повторилась)

[Serega88kos]

https://user-images.githubusercontent.com/57561983/208254006-c9fbcb6c-69a3-4739-a312-3898d2b9113b.mp4

запись делал в чистом браузере, где не было сохранений)

[GyverLibs]

опаааа, а вот эту проблему мы уже решали)) После изменения check она снова появилась, потому что я не глядя удалил кусок кода в старом CHECK, который это дело фиксил. Пасиба!

[steelmak]

Добрый день. Библиотека 3.4.0. На андроиде не отображаются графики из примеров plotStock plotStatic plotAjax . На других платформах не пробовал. Подключаюсь к ESP-01 в режиме точки доступа. В конструкторе страниц добавлял компоненты выше и ниже графика - на экране смартфона между компонентами видно пустое пространство. Цвета темы и графика пробовал в разных комбинациях - графика не видно. Может графики не должны работать в смартфоне?

Второстепенный вопрос - есть ли простое решение организовать компонент типа RadioButton?

[GyverLibs]

Если есп работает как точка доступа - нужно загрузить файлы скриптов графиков в память и поставить аргумент local у функции графика в единичку

Radio - а что именно интересует? Отображение нескольких лейблов (в столбик-строчку) и около каждого радио, которую можно выбрать только одну?

[steelmak]

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

GyverLibs> а что именно интересует? Нужен функциональный аналог SELECT, выбор одного из многих. Сейчас сделал из нескольких SWITCH, работает. Клацаем выключенный - любой включенный сам отключается. Если клацаем включенный, он выключается и затем сам включается. Старт процессов "сам отключается" или "сам включается" происходят не всегда моментально, а с очередным тиком ui.tick(). И это не напрягает. Напрягает то, что не работает два условия подряд - отслеживание клика и сразу же апдейта.

Это работает void action() { // был клик по компоненту if (ui.click()) { if (ui.click("sw1")) {valSw1=1; valSw2=0; valSw3=0;}; if (ui.click("sw2")) {valSw1=0; valSw2=1; valSw3=0;}; if (ui.click("sw3")) {valSw1=0; valSw2=0; valSw3=1;}; }

if (ui.update()) { ui.updateBool("sw1",valSw1); ui.updateBool("sw2",valSw2); ui.updateBool("sw3",valSw3);
} }

Это не работает if (ui.click("sw1")) {ui.updateBool("sw1",1); ui.updateBool("sw2",0); ui.updateBool("sw3",0);} if (ui.click("sw2")) {ui.updateBool("sw1",0); ui.updateBool("sw2",1); ui.updateBool("sw3",0);} if (ui.click("sw3")) {ui.updateBool("sw1",0); ui.updateBool("sw2",0); ui.updateBool("sw3",1);}

Второстепенный вопрос - см скрин выше верхняя границы таблицы; граница двойная; это таблица с указанием размеров ячеек; все другие таблицы получаются с одинарной границей. Это не напрягает, но не перфекционизм.

[GyverLibs]

Я понимаю что Вы предлагаете

В итоге ситуация какая? Есп не подключена к роутеру?

Старт процессов "сам отключается" или "сам включается" происходят не всегда моментально

Апдейт завязан на таймер или на клик?

отслеживание клика и сразу же апдейта

Да, это не работает, потому что это разные запросы от браузера

граница двойная

По умолчанию граница отключена, не нужно её включать 😁 при указании ширин компактным способом создаётся пустая строка в таблице. Можно указать ширины столбцов первой строки вручную, тогда этой пустой строки не будет

[GyverLibs]

Я добавлю обычный классический radio в следующем обновлении

[steelmak]

GyverLibs> В итоге ситуация какая? Я не знаю как "загрузить файлы скриптов графиков в память и поставить аргумент local у функции графика в единичку". Прошу пример или образец.

GyverLibs> Есп не подключена к роутеру? Есп не подключена к роутеру и не планируется. Сейчас у меня связь Есп+смартфон и в этой связке мне нужен график.

GyverLibs> Апдейт завязан на таймер или на клик? Сейчас апдейт работает когда завязан на таймер; это не очень хорошо, т.к. апдейт многократно вызывается, хотя событие обновления уже при первом (или втором вызове) сделано.

steelmak> отслеживание клика и сразу же апдейта GyverLibs> Да, это не работает, потому что это разные запросы от браузера Понял.

GyverLibs> тогда этой пустой строки не будет Попробую.

GyverLibs> Я добавлю обычный классический radio в следующем обновлении Прошу добавить компонент (числовой / текстовый), в котором можно менять РАЗМЕР ШРИФТА (и типовые цвета). Нужно для выделения на форме размером/цветом каких-то результирующих значений.

[GyverLibs]

загрузить файлы скриптов графиков в память

Всё описано в документации

local у функции графика в единичку

Посмотреть в документации как выглядит полная функция нужного графика, последним аргументом там везде есть bool local. И указать её единичкой, например GP.PLOT_STOCK<к-во осей, к-во данных>(имя, подписи, массив времён, массив данных, int dec = 0, int height = 400, bool local = 0); У обычного plot нет оффлайн режима, у остальных двух есть

Сейчас апдейт работает когда завязан на таймер

В такой ситуации лучше переделать на UPDATE_CLICK

РАЗМЕР ШРИФТА

Окей

[steelmak]

Я благодарю Вас, что отвечаете.

GyverLibs> Всё описано в документации Вашу документацию из Вики многократно читал и перечитываю. И спасибо что пишите! Но тему загрузки файлов (скриптов) в память не нашёл. Тема Загрузки из Вики

GP.PLOT_STOCK<к-во осей, к-во данных>(имя, подписи, массив времён, массив данных, int dec = 0, int height = 400, bool local = 0); Попробую.

UPDATE_CLICK Попробую.

[GyverLibs]

Но тему загрузки файлов (скриптов) в память не нашёл

https://github.com/GyverLibs/GyverPortal/wiki/%D0%A4%D0%B0%D0%B9%D0%BB%D1%8B

[Tisero]

А можно ли получить логин и пароль, которые вводятся при авторизации? При использовании enableAuth(x,y), что бы с ними дальше работать. Например если вести дополнительный секретный пароль, то он отключит авторизацию на страницу.

[GyverLibs]

получить логин и пароль, которые вводятся при авторизации

добавлю в следующем обновлении

[Tisero]

Добавте пожалуйста в параметры GP.PASS, возможность отключить глаз

[Tisero]

При вчерашнем изменении библиотеки что то поломалось. После него, интерфейс перестал реагировать на клики по кнопкам и как либо взаимодействовать. Это сохраняется даже если откатится на предыдушую версию библиотеки, пока не почистишь кеш браузера. Повторяется во всех браузерах.

[GyverLibs]

Всё верно, в "ночном" билде случайно удалена одна буква и скрипты не работают. А так как они теперь кешируются - кеш надо чистить

[Serega88kos]

@GyverLibs идея по HINT, т.к. с мобильного его не видно, можно сделать как на сайтах, знак вопроса справа, в виде иконки, при нажатии на который всплывает окно с текстом подсказки) Только думаю не надо привязывать к мобильному интерфейсу, думаю и для ПК выйдет красиво им понятно, что тут есть справка)

[gorlanovmax]

Предлагаю добавить в BUTTON и BUTTON_MINI режим update. Чтобы можно было динамически управлять кнопками. Пример приводил на форуме https://community.alexgyver.ru/threads/gyverportal.6632/post-134673

[GyverLibs]

Управлять кнопками это как?

[gorlanovmax]

Например управлять доступностью кнопок, текстом на кнопке. GP.BUTTON(имя, текст, id, цвет, ширина, откл, перезагр); выше давал ссылку на пример, который я пытался реализовать

[GyverLibs]

В моей текущей реализации апдейт передаёт только значение компонента. Всё остальное можно сделать через reload

[gorlanovmax]

но reload перезагрузит страницу, а хотелось именно динамическое обновление

[GyverLibs]

В текущей реализации не предусмотрено) перезагрузка страницы - абсолютно нормальное дело, в текущей версии когда все закешировано - происходит мгновенно

[steelmak]

Проблема с копированием фрагментов строки на кириллице (на английском всё норм). // переменные String sSystem, // общая строка sModel, sZavNum, sDataIzg, sPoverka; // фрагменты

// где-то в коде приняли строку на 32 символа и разбираем sSystem = "qwertyui12.45.78iuytrewq87.54.21"; // на англ нормально //sSystem = "модель11завном2233.44.5566.77.88"; // на русс трабля sModel = sSystem.substring(0,8); sZavNum = sSystem.substring(8,16); sDataIzg = sSystem.substring(16,24); sPoverka = sSystem.substring(24,32);

Режим точки доступа. Скрины со смартфона.

[GyverLibs]

строки на кириллице

Господи ну ещё бы, символ кириллицы занимает 2-3 байта вместо одного. Вот так брать и делать substring по фиксированной позиции - работать не будет

[steelmak]

Да, про кодировку кириллицы почитал. Есть мысль принимать строку в массив char[] или byte[]. Далее перебираем массив и если байт равен 208 или 209 (признак кириллицы в UTF-8) то "склеивать" два байта в символ (string) кириллицы if (byte[i]==208 || byte[i]==208 ) s = byte[i]+byte[i+1]; Правда не знаю как это написать, чтобы скомпилировалось и работало. Пожалуйста, подскажите как из массива char[] или byte[] конвертировать в string ? Этот подход мог быть как идея для хитрожопой функции String Rus_UTF8(String);

Сейчас обнаружил другую проблему. И она более важная чем кириллица. Обновление (update) лейбла перестаёт работать, после 4...8 приёма одиночного (и неодиночного символа). Пробовал цифры и латиницу. Пробовал кеш чистить. Пробовал другой модуль ESP. Обновление страницы тоже не помогает. Помогает только аппаратный reset - но это шляпа, как и ручное обновление страницы. Монитор порта показывает что символ ушёл и принят, т.к. эхо работает. Александр - вся надежда на Вас.

String slb; // GP.UPDATE("lb"); GP.LABEL("Label: "); GP.LABEL("NAN","lb"); // slb = Serial.readString(); Serial.println(slb); // if (ui.update("lb")) ui.answer(slb);

Думал может slb "чистится" или "портится" после Serial.println(slb); Пробовал через дополнительную переменную - не помогает.

Говоря короче - мне нужен компонент, который можно апдейтить, но нельзя кликнуть и менять руками. Завтра попробую принять в порт и проапдейтить другие компоненты, которые можно и руками менять.

[GyverLibs]

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

[GyverLibs]

компонент, который можно апдейтить, но нельзя кликнуть и менять руками

Любой компонент можно "отключить", передав false последним аргументом

[GyverLibs]

Обновление (update) лейбла перестаёт работать, после 4...8 приёма одиночного (и неодиночного символа).

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

#define AP_SSID ""
#define AP_PASS ""

#include <GyverPortal.h>
GyverPortal ui;

String lbl;

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

  GP.UPDATE("lbl");
  GP.LABEL("Label: ");
  GP.LABEL("NAN", "lbl");

  GP.BUILD_END();
}

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();
  Serial.setTimeout(10);
}

void action() {
  if (ui.update("lbl")) ui.answer(lbl);
}

void loop() {
  ui.tick();
  if (Serial.available()) {
    lbl = Serial.readString();
  }
}

[steelmak]

Беру из примеров апдейт if (ui.update("txt")) ui.answer(random(60)); Работает. Как только из монитора в ESP отправляю что-то - процесс апдейта останавливается.

И к слову. Из компонентов принимающих string только три - TITLE, LABEL и TEXT. TITLE использовать для оформления не красиво, он как заголовок. Неактивный TEXT мелкий и блёклый. Остаётся приличный LABEL.

[steelmak]

Спасибо. Оказывается надо Serial.setTimeout(10);

[GyverLibs]

Оказывается надо Serial.setTimeout(10);

это не то чтобы надо, просто ускоряет парсинг. Я так понимаю readString вызывался прямо в билдере или апдейте? Это критически неправильно

[GyverLibs]

Из компонентов принимающих string только три - TITLE, LABEL и TEXT.

Документация с вами не согласна

[steelmak]

Александр - ещё раз спасибо, Вы маг и чародей, работает. Подскажите - есть ли событие или функция для отслеживания активности нашей веб формы? Что я вижу сейчас в режиме точки доступа без пароля (далее ТД)? Подали питание. Появилась ТД. В этот момент можем проверять соединение с ТД в цикле while (WiFi.status() != WL_CONNECTED) {} Подключаемся к ТД и входим в цикл void loop() {}. Как только пользователь в браузере загрузит страницу (по адресу 192.168.4.1) начинает вызываться void action() {}.

Что мне нужно? Я бы хотел каким-то образом понимать, что у пользователя в браузере открыта (активна) вкладка с нашей формой (по адресу 192.168.4.1). Когда пользователь переключается между вкладками, сворачивает браузер или гасит экран смартфона вызов void action() {} продолжает работать. Это неплохо, но... хотелось бы отслеживать эти события (или событие условной неактивности формы). Для чего это надо? Чтобы в автомате прекращать запросы-ответы с портом Serial.

Примечание. Предполагаю, что в какой-то момент при удалении от esp произойдёт разрыв WiFi и можно использовать (WiFi.status() != WL_CONNECTED). Но в целом это неподходящий сценарий работы, т.к. при приближении связь без нашего участия может восстановиться; даже с погашенным экраном смартфона. Делать в интерфейсе кнопку "вкл-откл запросы-ответы Serial" - это несовременно. Отслеживать клики на форме и использовать таймаут - тоже не торт.

[GyverLibs]

В этот момент можем проверять соединение с ТД в цикле while (WiFi.status() != WL_CONNECTED) {}

Ох мамочки, всё перепутано :) конструкция (WiFi.status() != WL_CONNECTED) {} используется для проверки подключения к роутеру, а к режиму точки доступа отношения не имеет.

Как только пользователь в браузере загрузит страницу (по адресу 192.168.4.1) начинает вызываться void action() {}.

Нет, action вызывается при действиях пользователя на странице

у пользователя в браузере открыта (активна) вкладка с нашей формой

Я погуглю, но скорее всего это невозможно определить средствами JavaScript. Также если если открыть портал с двух устройств - уже непонятно за кем следить.

Чтобы в автомате прекращать запросы-ответы с портом Serial.

Зачем?

при удалении от esp произойдёт разрыв WiFi и можно использовать (WiFi.status() != WL_CONNECTED)

Опять же, это относится к режиму STA. В режиме AP можно использовать WiFi.softAPgetStationNum(), которая вернёт количество подключенных к ТД устройств

[steelmak]

> Ох мамочки, всё перепутано :) Признаюсь, я сразу удалил и не пробовал работу конструкции (WiFi.status() != WL_CONNECTED) {} в режиме точки доступа.

> Нет, action вызывается при действиях пользователя на странице У меня в порт начинают уходить данные до действий на странице, т.е. с момента как загрузилась страница (открыли страницу) в браузере 192.168.4.1 . Для теста отправку в порт я сделал из void action() {}.

[GyverLibs]

начинают уходить данные до действий на странице

Настроенный update также является действием, браузер отправляет запросы на есп.

Конструкция выглядит странно. Я не знаю деталей, но возможно тут хватило бы есп32 вместо МК + есп

[steelmak]

Александр, если не надоел своими вопросами, предлагаю на повестке оставить вопрос

как определить, открыта (активна) вкладка с нашей формой Я погуглю, но скорее всего это невозможно определить средствами JavaScript.

[GyverLibs]

В js есть флаг document.hidden, я могу просто добавить его в механизм update и запросы не будут приходить когда окно не активно

[GyverLibs]

проверил - работает как нужно, залил в репозиторий. Если в браузере открыта другая вкладка или браузер сёрнут - обновления не приходят