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

[GyverLibs]

CHANGELOG v3.4

• Добавлено
  • HTML Canvas (рисование в браузере) + обновление из скетча + Processing API
  • Разметка страницы в стиле панели управления с боковым меню, компоненты UI_BEGIN, UI_MENU, UI_BODY, UI_END, UI_LINK
  • UPDATE_CLICK() - вызывает update у указанных компонентов при клике по указанным компонентам
  • OTA.error() для вывода текста ошибки в любое место на странице
  • EVAL() выполнение отправленного в update js кода
  • GyverPortal::setFS()
  • Выбор цвета для иконок, FILE_UPLOAD, FOLDER_UPLOAD, OTA_FIRMWARE, OTA_FILESYSTEM, TITLE, LABEL, SPAN, PLAIN, BOLD и HR
  • Макс. ширина для GRID
  • JS_BEGIN() и JS_END()
  • В BUILD_BEGIN_FILE() и BUILD_BEGIN() можно передать тему оформления
  • PAGE_TITLE() - смена имени вкладки в браузере, в т.ч. по update
  • Цвет GP_WHITE
  • Иконки-кнопки ICON_BUTTON() и ICON_FILE_BUTTON()
  • ONLINE_CHECK() - отображение состояния соединения с esp
  • Подписи к осям AJAX_PLOT
  • GyverPortal::caching(bool), GyverPortal::clearCache()
  • Обработка удержания кнопок, отдельный обработчик hold()
• Исправлено
  • Мелкие баги
  • HINT() для BUTTON, SWITCH и UPLOAD
  • Потенциальный баг в механизме update
  • ICON_FILE()
• Улучшено
  • COLOR теперь можно парсить как int
  • Значительно ускорена (кеширование) загрузка страницы без скриптов/стилей в spiffs
  • При обновлении библиотеки не нужно чистить кеш браузера
  • FILE_MANAGER(): удаление файлов теперь не меняет url в браузере + добавлены кнопки скачать и переименовать + выбор директории
  • Улучшена обработка отпускания кнопки
  • SPINNER(): удержание кнопок, настройка скорости в GP.setSpinnerPeriod()
  • Убран перенос строки в последней строке в LOG
• Изменено
  • Логика работы всплывающих окон, УБРАН АРГУМЕНТ ПЕРИОД!
  • SPINNER(): убрана ширина, сделана автоширина, значение по центру
  • Автоматическое скачивание/загрузка/удаление/переименование ТЕПЕРЬ ВКЛЮЧЕНО ПО УМОЛЧАНИЮ!
  • Отсортированы примеры, portal переименован в ui для краткости
  • clickUp и clickDown вынесены в обработчик hold()

TODO

• button_n
• таблицы TH
• NUMBER min max

v3.5

• вебсокет

Лажа

• Переделать иконки на otf https://fontawesome.com/search?o=r&m=free&s=solid&f=classic

  @font-face {
  font-family: 'icons_otf';
  src: url('/font.ttf');
  }
  .fa_icon {
  font-family: 'icons_otf';
  }

Осмыслить

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

[MalfurionST]

из библиотеки убрали файл custom.h в котором был полезный // пример "текст-ссылка" может вернуть?

[GyverLibs]

Кастом файл теперь живёт в примере custom components:

• Это позволит проще переносить и не потерять свои кастом-компоненты при обновлении библиотеки
• У людей из за этого файла не компилилось в platformio

[MalfurionST]

ок

[MalfurionST]

GP.TABLE_BEGIN("60px,100%,50px", nullptr, "100%"); в какой форме записывать выравнивания (GP_LEFT, GP_CENTER, GP_RIGHT) или "GP_LEFT, GP_CENTER, GP_RIGHT" ?

[GyverLibs]

Смотри пример, там сильно по другому. В документации этого пока нет

[MalfurionST]

а ок, всё увидел...

[gorlanovmax]

Доброго дня,

Хотелось бы реализовать в popup PROMT ввод пароля. Т.е. чтобы поле ввода было маскировано

[GyverLibs]

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

[gorlanovmax]

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

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

[gorlanovmax]

Еще интересной фичей было бы ОТА прошивки и хранилища с заданного адреса в интернете

[GyverLibs]

авторизации на каком либо сайте

Это стандартное окно вызывается автоматически при включении авторизации в портале, вроде бы через .setAuthorization(login pass), см доку

ОТА прошивки и хранилища с заданного адреса в интернете

Пожалуйста, стандартная библиотека httpupdate.h. Делаешь поле ввода текста для адреса и рядом кнопку "прошить"

[MalfurionST]

Не стал добавлять или забыл? body {-webkit-tap-highlight-color: transparent;} Чтоб элементы на мобилах не подсвечивались...

[GyverLibs]

Не стал добавлять или забыл?

В v3.3 это есть

[MalfurionST]

А теперь увидел, в файлах стилей в файловой системе нет ... Кажется...

[GyverLibs]

Креститься надо)

[MalfurionST]

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

[GyverLibs]

Кеш в браузере почистить надо

[MalfurionST]

Помогло спс...

[gorlanovmax]

А возможность изменения цвета кнопок OTA_FIRMWARE и OTA_FILESYSTEM не запланирована?

[GyverLibs]

Запланировано то, что в списке наверху. Предлагайте, запланирую)

[gorlanovmax]

Предложил))) А то они могут быть только зеленого цвета

[gorlanovmax]

Еще такую вещь обнаружил label { white-space: nowrap; font-size: 20px; margin: 0 5px; }

У LABEL намеренно убран перенос текста? Если заголовок длинный, на мобиле вылезает за блок

[GyverLibs]

Намеренно, без этого переносы появятся там где их быть не должно, например при форматировании бокса "лейбл + компонент". Длинные тексты можно делать при помощи plain, bold, span

[MalfurionST]

а стрелки для фаерфокса не убрал... input[type='number'] { -moz-appearance: textfield; }

[GyverLibs]

Мозильщики могут вставить нужные им стили через GP.SEND("<style></style>");, я думаю одними стрелками дело не ограничится

[MalfurionST]

ок, еще на мозиле при уходе со вкладки всплывает сообщение с предложением сохранить имя пользователя и пароль из поля GP.TEXT

[GyverLibs]

Какая назойливая лисичка

[MalfurionST]

[MalfurionST]

А на тетелефоне в Яндексе такой глаз сбоку...

[GyverLibs]

Это печально

[MalfurionST]

все понял, окошко с сохранением выползает если есть поле GP.PASS а в пользователя ему пофиг что запихнуть... даже 3.14 если убрать поле GP.TEXT...

[MalfurionST]

да я уже понял что мозила совсем корявый браузер, у Spinner на светлой теме + и - уходят в право и лед вообще не светит... буду менять браузер наверно...

[GyverLibs]

А на темной нормально спиннер?

[MalfurionST]

Да

[GyverLibs]

В хроме и там и там нормально

[MalfurionST]

вот на темной

[MalfurionST]

CUSTOM_CHECKBOX по примеру SWITCH

void CUSTOM_CHECKBOX(const String& name, bool state = 0, bool dis = false, PGM_P st = GP_GREEN) { String s; if (st != GPGREEN) { s += F("\n"); } s += F("<label id='_"); s += name; s += "'"; s += F(" class='custom-checkbox'><input type='checkbox' name='"); s += name; s += F("' id='"); s += name; s += "' "; if (state) s += F("checked "); if (dis) s += F("disabled "); s += F("onclick='GP_click(this)'>\n"); s += F(""); GP.SEND(s); }

[MalfurionST]

лед на мозиле

[GyverLibs]

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

[MalfurionST]

со всеми остальными я так понял понял проще, а вот мозила не такая как все...

[MalfurionST]

не совсем конечно как у Вас, надо добавлять стили и т.д. но вот пример led через svg код: void CUSTOM_LED(byte colour) { String s; s += F("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"26\">\"); if (colour) { s += F("<circle r=\"11\" cy=\"13\" cx=\"13\" fill=\""); if (colour == 1) s += F("#3C0"); if (colour == 2) s += F("#D00"); s += F("\" filter=\"url(#svg_blur)\" opacity=\"0.6\"/>"); } s += F("<circle r=\"10\" cy=\"13\" cx=\"13\" fill=\""); if (colour == 0) s += F("#777"); if (colour == 1) s += F("#92E477"); if (colour == 2) s += F("#ED7777"); s += F("\"/><ellipse ry=\"8\" rx=\"9\" cy=\"15\" cx=\"13\" fill=\""); if (colour == 0) s += F("#333"); if (colour == 1) s += F("#3C0"); if (colour == 2) s += F("#D00"); s += F("\"/>"); if (colour) { s += F("\<filter id=\"svg_blur\"><feGaussianBlur stdDeviation=\"1\" in=\"SourceGraphic\"/>\\"); } s += "\"; GP.SEND(s); } проверил в нескольких браузерах вроде не искажается...

[GyverLibs]

svg там где достаточно css - это сильно)

[MalfurionST]

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

[B00mlex]

Изменил для себя GP_update чтобы иметь возможность добавить класс при обновлении элемента. Это позволит изменять элементы со всей мощью CSS на ходу. По сути GP_update как работал так и работает обновляя значения элементов но с дополнительными возможностями. Чтобы добавить класс надо в answerпосле значения для элемента добавить; и addClass:first и в элемент добавится класс first. Чтобы удалить класс first надо к answer добавить remClass:first. Добавлять и удалять можно несколько классов разделяя имена пробелами, также удалять и добавлять можно одновременно в одном answer. addClass и remClass необходимо разделять ;. Примеры: "data; addClass:first second third; remClass:first". Здесь добавятся 3 класса first second third и удалится first, data это данные для обновления элемента. 100;remClass: second;addClass:fourth Тут в элементе будет значение 100, удалится класс second, и добавится класс forth. Можно просто добавить или удалить класс без значения для элемента addClass:fourth.

Может Алексу понравится и он добавит в портал.

Демо работы добавления классов

https://user-images.githubusercontent.com/59569595/201477690-0f0d741c-113b-4656-997c-101873732737.mp4

Код из scripts.js

function GP_update(ids) {
  var xhttp = new XMLHttpRequest();
  xhttp.open('GET', '/GP_update?' + ids + '=', true);
  xhttp.send();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var str = this.responseText.split(',');
      ids = ids.split(',');
      if (ids.length != str.length)return;
  for (let i = 0; i < ids.length; i++) {
  var item = document.getElementById(ids[i]);
    if (!item || !str[i])continue;
    resp = str[i].split(';');
    resp.forEach((cmd,j) => {
        let tmp =  cmd.split(':');      
        if(tmp[0].trim() ==='addClass'){
         item.classList.add(...tmp[1].trim().split(' '))
        }else if(tmp[0].trim() ==='remClass'){
         item.classList.remove(...tmp[1].trim().split(' '))
        }else {                     
           if (item.type == 'hidden' && item.value == '_reload') {
        if (resp[j] == '1') location.reload();
      } else if (item.type == 'checkbox' || item.type == 'radio') item.checked = Number(resp[j]);
      else if (item.type == 'select-one') document.querySelector('#' + ids[i]).value = resp[j];
      else if (item.type == undefined) item.innerHTML = resp[j];
      else item.value = resp[j];
      if (item.type == 'range') GP_change(item);
   }});}
    }
  };
}

Добавленные классы в style.css

.red{color:red;}
.yellow{color:yellow;}
.green{color: green;}

.hide {
  max-height: 99em;
  opacity: 1;
  overflow: hidden;
  transition: opacity 1s linear, max-height 1s linear;
  height: 60px;  /* Указывать высоту придется для каждой скрываемой области
  иначе анимация не работает */ 
  overflow: hidden; 
  transition: all 0.3s ease;  
}
.invisible{
   height: 0;
   opacity: 0;
}`

[GyverLibs]

Если это использовать чисто для скрытия компонентов - не лучше сделать чисто на js на стороне браузера? Без передачи логики на МК

[B00mlex]

Сокрытие так, для демонстрации. Делал для изменения цвета компонентов.

[GyverLibs]

Ну это шашечки)

[Serega88kos]

Arduino IDE что-то не видит последний релиз.

[GyverLibs]

3.3?

[GyverLibs]

В следующей версии наконец то появится dashboard layout

А также рисование графики в браузере в стиле Processing!