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

GyverLibs commented 1 year ago

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
асинхронный сервер

steelmak commented 1 year ago

Спасибо. Я не очень ориентируюсь как в Ардуино ИДЕ автоматически обновляются исходники. Правильно ли я понимаю, что мне надо самому скачать из репозитория builder.h и заменить на ПК этот файл?

GyverLibs commented 1 year ago

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

steelmak commented 1 year ago

Вопрос не по теме. Как преобразовать число в одиночный символ String?

String s = "ABC"; // коды символов по UTF-8 А=65, B=66, C=67 if (s[0] == 'A') {что-то делаем}// это работает

Как написать условие по коду символа, например типа такого if (s[0] == Strind(char(65)) {что-то делаем} if (s[0] == DecToStr(65)) {что-то делаем} if (s[0] == CharToStr(65)) {что-то делаем}

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

GyverLibs commented 1 year ago

@steelmak просто взять и сравнить

if (s[0] == 65) {что-то делаем}

steelmak commented 1 year ago

Александр, в очередной раз спасибо. Синтаксис удивляет крайностями; либо примитивно, либо заковыристо. И снова вопрос. Числовые компоненты NUMBER для int и NUMBER_F для float. При вводе числа на форме появляется ЧИСЛОВАЯ клавиатура; это прекрасно. Но в моей клавиатуре децимальный разделитель печатается не запятой, а точкой - это плохо, но поле принимает разделитель точку; и я ещё не знаю к каким последствиям приведёт неправильный разделитель. Что нехорошо? Можно наставить несколько точек 1.2.3.4. Точку можно поставить для int, а она совсем не нужна. Что хочу? Либо поле должно как-то анализировать неправильный ввод и отбрасывать ненужное и неправильное. Либо в поле должен быть задействован механизм паттерна.

steelmak commented 1 year ago

Ещё нюанс в тему предыдущего сообщения.

// инициализация на старте float fTmp1 = 1,23; // разделитель запятая, поле где-то в коде принимает только 1 float fTmp2 = 1.23; // разделитель точка, поле где-то в коде принимает 1.23 но на форме рисует через запятую 1,23

Разночтение децимального разделителя совсем не по фен-шую.

GyverLibs commented 1 year ago

либо примитивно, либо заковыристо

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

разделитель печатается не запятой, а точкой - это плохо

Это как раз хорошо, потому что и в математике, и в C++ в коде разделитель это точка, и библиотека при парсинге float ищет именно точку

Можно наставить несколько точек 1.2.3.4

Так это же хорошо, парсинг флот обработает только первую точку без ошибок. А с несколькими точками можно передать через поле например IP адрес. Компоненты number и number_f по сути отличаются только количеством знаков после запятой при выводе

GyverLibs commented 1 year ago

float fTmp1 = 1,23;

Это ошибка, учим c++ / уроки ардуино. Оператор "запятая" в таком применении говорит программе "сначала сделай это, а потом это", то есть данный код равносилен

float fTmp1 = 1;
23;

на форме рисует через запятую 1,23

Да, разработкой веба занимались гуманитарии, поэтому у программистов разделитель точка, а в вебе - запятая

steelmak commented 1 year ago

можно передать через поле например IP адрес Для IP адреса предлагается поле TEXT с соответствующим патерном. С точки зрения организации сохранения - удобнее сохранить переменную String в естественном виде, чем int или float с несколькими точками. Я конечно попробую, но хочется защиту от дурака.

поэтому у программистов разделитель точка, а в вебе - запятая В вебе - запятую Вы можете как-то исправить?

GyverLibs commented 1 year ago

Для IP адреса предлагается поле TEXT с соответствующим патерном

Мне себе любимому удобнее вводить айпишник с цифровой клавиатуры...

удобнее сохранить переменную String

Да без проблем, данные из всех компонентов конструктора изначально приходят в виде String и доступны для чтения в таком виде

В вебе - запятую Вы можете как-то исправить?

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

GyverLibs commented 1 year ago

а я уже решал эту проблему, но способ не работает)) это печально

steelmak commented 1 year ago

_number и numberf по сути отличаются только количеством знаков после запятой при выводе

данные из всех компонентов конструктора изначально приходят в виде String и доступны для чтения в таком виде

т.е. поля по природе все текстовые?

GyverLibs commented 1 year ago

поля по природе все текстовые?

Нет, есть два типа полей - текст и цифры. Но браузер передает все значения со всех полей на сервер в виде текста, ибо это веб

GyverLibs commented 1 year ago

Вообще всё что не ломается вручную - можно сломать через js, попробую позже

steelmak commented 1 year ago

Вообще всё что не ломается вручную - можно сломать через js, попробую позже Хорошо. По факту посмотрю с каким разделителем из полей придут данные.

Вопрос.

// переменная int iVal = 123;

// форма GP.UPDATE("Val"); GP.NUMBER("Val", "", iVal)

// в action() пробую обновлять форму двумя вариантами if (ui.update("Val")) ui.answer(iVal); или ui.updateInt("Val",iVal);

При старте страницы поле заполняется 123. Хочу руками с клавиатуры изменить на, например, 321. Форма не даёт исправить на 321, а подставляет 123.

Вопрос - какой должен быть сценарий действий, чтобы вбить и сохранить новое значение?

GyverLibs commented 1 year ago

update - это передача из программы в браузер, периодическая или по событию. Если нужно передать из браузера в программу - это механизм click или form

GyverLibs commented 1 year ago

Не, бестолку)

steelmak commented 1 year ago

update - это передача из программы в браузер, периодическая или по событию. Если нужно передать из браузера в программу - это механизм click или form Дай Бог Вам здоровья. На сегодня то что запланировал - работает. Ещё бы паттерны для NUMBER и NUMBER_F для защиты от дурака, будет совсем торт.

GyverLibs commented 1 year ago

Добавил, но пока что в NUMBER_RAW, там есть ещё мин и макс

void NUMBER_RAW(const String& name, const String& place, const String& value, const String& minv, const String& maxv, const String& width, const String& pattern, bool dis);

// прототип
NUMBER_RAW(name, text, String(value), "", "", "", "", 0);

steelmak commented 1 year ago

Александр, новый каменный цветок не выходит у меня.

Снимок

// переменная int i=123;

// в апдейт клик if (ui.click("sw")) { if (ui.getBool("sw")) i=1; else i=0; // передали из браузера в программу }

// просто апдейт ui.updateInt("Polе",i); // передали из программы в браузер

Вопрос - как одновременно руками в браузере в поле вводить новые данные и передавать в программу? Зачем? Переключателем выбираются калибровки. И периодически надо калибровки корректировать.

Пример со свичём условный. Смысл вопроса получать в поле и отправлять из поля.

GyverLibs commented 1 year ago

руками в браузере в поле вводить новые данные и передавать в программу?

через механизм click. Данные будут отправлены, если значение в поле изменится, и мышкой будет сделан клик в любом другом месте (снимется фокус с поля). Либо по нажатию на Enter

steelmak commented 1 year ago

Всё что Вы пишите - мне понятно и работает.

Попробую по-другому описать нужный сценарий работы с полем. Подали питание на ЕСП. ЕСП запросила и получила в сериал-порт калибровку из вне . Калибровку записали в переменную. Из переменной по апдейту обновили поле (и поле будет обновляться с некой периодичностью) // через какое-то время стало понятно, что калибровку надо скорректировать Руками вводим в поле новую калибровку чтобы обновить переменную по клику и... не можем этого сделать, потому-что "с некой периодичностью" оно поле апдейтится старым значением.

GyverLibs commented 1 year ago

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

GyverLibs commented 1 year ago

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

steelmak commented 1 year ago

Если бы калибровка хранилась в ЕСП - то вопросов бы не было; на момент старта формы значения бы были прочитаны из еепром ЕСП и переданы в веб в поля. Но планируется один и тот же интерфейс в ЕСП для разных однотипных устройств с индивидуальными калибровками. Хочется получать эти калибровки в программу ЕСП, передавать в веб, корректировать в вебе, отдавать назад в программу и назад в устройство. Даже если ЕСП "отвалится" - устройство продолжит работать со старыми калибровками.

Задача менять калибровки не в программе в ЕСП, а менять в вебе. А прежде чем менять в вебе - надо хоть что-то получить и передать в веб.

DenysChuhlib commented 1 year ago

// переменная int i=123;

// в апдейт клик if (ui.click("sw")) { if (ui.getBool("sw")) i=1; else i=0; // передали из браузера в программу }

// просто апдейт ui.updateInt("Polе",i); // передали из программы в браузер

Вопрос - как одновременно руками в браузере в поле вводить новые данные и передавать в программу? Зачем? Переключателем выбираются калибровки. И периодически надо калибровки корректировать.

Выводи значение калибровки в объект Label и постав его на update, а менять значение будешь объектом Number c событием click.

GyverLibs commented 1 year ago

А прежде чем менять в вебе - надо хоть что-то получить и передать в веб.

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

steelmak commented 1 year ago

выводить текущее значение при загрузке страницы да, тоже думаю сначала получить калибровки, а потом отрисовать страницу

GyverLibs commented 1 year ago

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

steelmak commented 1 year ago

сначала получить калибровки, а потом отрисовать страницу Сделал. Работает. Теперь другая задача. Пришло три калибровочные таблицы. Надо перерисовывать на форме значения одной из таблиц, при выборе соответствующей таблицы. Возвращаемся на шаг назад, к проблеме отрисовать в поле и обновить через поле. Может есть способ блокировать апдейт, пока поле на форме в фокусе?

GyverLibs commented 1 year ago

Надо перерисовывать на форме значения одной из таблиц, при выборе соответствующей таблицы.

Ничего не понял, но очень интересно)

steelmak commented 1 year ago

// таблица, 3 массива по 6 элементов int iTab[3][6] = { {50,500,1000,2000,3000,4000}, {40,400,900,1900,2900,3900}, {30,300,800,1800,2800,3800}};

свичём выбираем один из трёх массивов и отрисовываем в скриншот выше

GyverLibs commented 1 year ago

Выбирать можно через SELECT, а при клике на селект сделать перезагрузку страницы через RELOAD_CLICK

steelmak commented 1 year ago

Поздравляю всех с Новым годом. Желаю здоровья, успехов, достатка и мира! Александр, Вам отдельно спасибо за конструктор веб интерфейса GyverPortal - жизнь заиграла новыми красками )

У компонентов ввода-вывода есть параметр "откл" (режим "только чтение" - true [bool] (умолч. false)). По загрузке/перезагрузке формы использую этот параметр и передаю рассмотренный выше bSwRedact. И мы видим что 1 отключает редактирование, а 0 включает редактирование. И это не логично. Я осторожно прошу пересмотреть Вашу логику и сделать отключение нулём, а включение единицей.

////////////////////////////////////////////// Ещё вопрос к размышлению. Можно ли добавить свойство "невидимость компонента" или условие, при котором компонент (в том числе таблица с компонентами) при запуске формы были невидимы (не загружались)?

////////////////////////////////////////////// Предлагаю компонентам LED добавить свойство CLICK чтобы естественным образом клацать по ним и переключать.

Ещё раз спасибо за терпение и обратную связь.

steelmak commented 1 year ago

И к фразе "жизнь заиграла новыми красками" - почему бы LED не добавить свойство "цвет" (произвольный цвет, а не из типового ряда).

GyverLibs commented 1 year ago

сделать отключение нулём, а включение единицей

Это жёстко нарушит работу у пользователей библиотеки) обратная логика идёт из веба, там есть флаг disabled, поэтому его мы добавляем при true. Также большинство неиспользуемых аргументов задаются нулями, это приводит компоненты к +- одному виду

невидимость компонента

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

LED добавить свойство CLICK

Изначальной идеей led была индикация того, что происходит в скетче. Для управления есть чекбокс, свитч, и в следующей версии появится radio button

LED добавить свойство "цвет"

Изначально так и планировалось, но там были какие то сложности с реализацией и запутанными стилями. Возможно вернусь к этому вопросу и на этот раз получится, тк вместе с порталом я неплохо прокачался в вебе

steelmak commented 1 year ago

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

/////////////////////////////////////////////

Изначальной идеей led была индикация того, что происходит в скетче. Для управления есть чекбокс, Да, я всё это понимаю. И понимаю, что добавив для led свойство click мы получаем аналог чекбокса. Ну разве это плохо, когда юзер клацает на светодиод (LED) и этот светодиод вызывает событие, когда он нужным цветом, когда перерисовывается нужным цветом. Тут очень много возможностей открывается. Я понимаю, что со светодиодами и подсветкой до тошноты могли наиграться, но вдруг торкнут идеи как сделать веб-интерфейс

GyverLibs commented 1 year ago

if (bFlag) GP.TITLE("Отключаемый заголовок");

Конечно

разве это плохо

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

steelmak commented 1 year ago

в жизни нельзя тыкнуть на светодиод на картинке выше в смартфоне можно тыкнуть на "цветной кружок" очень похожий на LED ) Берём ESP-01 + адресные светодиоды и получаем интересную штуку.

GyverLibs commented 1 year ago

на картинке выше

Круглая цветная кнопка. Такую можно сделать через ICON_BUTTON

цветной кружок

Ну все таки цветной кружок - не светодиод) у меня это именно светодиод

steelmak commented 1 year ago

можно сделать через ICON_BUTTON загрузка картинок - не спортивная история. Был бы это программно нарисованный объект - вот это дело. Прошу простить за агитацию )

GyverLibs commented 1 year ago

Можно сделать свой кастомный компонент с любым функционалом

steelmak commented 1 year ago

Мне нравится Ваш универсальный ответ. Не в тему - но пожелание, хотелось бы Ваш урок с примером WiFi радио.

GyverLibs commented 1 year ago

https://youtube.com/watch?v=JTcG319rdcg

GyverLibs commented 1 year ago

было также просто по схеме и реализации как здесь

Но зачем? Уже есть ведь такой проект и видео про него, зачем плодить одинаковый контент?

DenysChuhlib commented 1 year ago

Здраствуйте, у меня есть важное предложение. Можете сделать сделать и остальные скрипты (особенно графики) в формате PROGMEM? Просто все скрипты разом занимают 800кб а если использовать их через FS остается свободная память, которую под скетчи не деть(. А я умудрился так, что мне нужно 2 мб для скетча но и нужно чтобы графики были доступны без интернета. Спасибо за внимание)

DenysChuhlib commented 1 year ago

я про esp32

А я умудрился так, что мне нужно 2 мб для скетча но и нужно чтобы графики были доступны без интернета.

GyverLibs commented 1 year ago

Скопируй себе в скетч через прогмем и отправь через send

DenysChuhlib commented 1 year ago

Я так думал... , ладно попробую

DenysChuhlib commented 1 year ago

не получилось( ну ладно

GyverLibs / GyverPortal