GyverLibs commented 2 years ago

CHANGELOG v3.3

Улучшена работа парсеров
Улучшены встроенные JS скрипты
Префикс макросов сокращён с GPMAKE до M_, подсветка синтаксиса заменена на жирную
GP_EDGES заменён на GP_JUSTIFY, у SPAN выравнивание теперь тоже задаётся через GPalign
Добавлен url encode, в TEXT теперь можно вставлять текст со "опасными" символами (+#<>` итд)
Компоненту SWITCH теперь можно задавать цвет
click/update/copy Int теперь работает со всеми целочисленными типами (int, byte, long...)
Добавлен FORM_SEND и FORM_SEND_MINI - новый вариант отправки формы без редиректа
Добавлен RELOAD_CLICK для перезагрузки страницы по клику по указанным компонентам
Добавлены стили "отключенным" компонентам
Добавлен SLIDER_C, отправляющий значения в процессе изменения положения
Нажатие и отпускание кнопки теперь работает со смартфона (тачскрина)
Переделан стиль SPINNER, теперь он более компактный
Добавлены таблицы (TABLE_BEGIN, TABLE_END, TD, TR), макросы (GP_MAKE_TABLE, GP_MAKE_TD, GP_MAKE_TR, GP_ALS)
Ширину лога можно настраивать
Для TEXT добавлены атрибуты "паттерн" и максимальная длина ввода. Изменился последний аргумент в функции
Добавлен SUBMIT_MINI
Добавлен модуль реального локального времени (запрос с браузера), функции getSystemDate(), getSystemTime(), а также getUnix()
Улучшено ОТА обновление, можно шить через curl
Чуть оптимизирован механизм Update, также сам вырезает лишние пробелы в списке
FOLDER_UPLOAD() теперь работает на ESP32
Добавлен FILE_MANAGER() - вывод списка файлов из памяти с кнопками удалить, а также обработчики deleteFile(), deleteAuto(), deletePath()
Добавлены компоненты PLAIN() и BOLD() для вывода текста
Добавлен компонент SYSTEM_INFO() - вывод таблицы с системной информацией
Добавлен "глаз" для поля ввода пароля
Добавлен цвет GRAY_B
Блоки BLOCK... теперь создаются одним компонентом. У THIN блока добавилась настройка цвета

TODO

Сделать красивые таблицы для текста https://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy
Добавить меню-бургер
Сделать основной UI-блок со встроенным бургером
Настройка цвета у check

Осмыслить

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

Кастом чекбокс

.custom-checkbox>input{position:absolute;opacity:0;display:none;}
.custom-checkbox>span::before{content:'';border-radius:8px;padding:4px 12px;color:#bbb;background-color:#fff;border:1px solid #adb5bd;border-radius:0.25em;transition:.1s;cursor:pointer;}
.custom-checkbox>input:checked+span::before{border-color:#4CAF50;background-color:#4CAF50;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='m12.82,3l-6.6,6.6l-3,-3-1.9,1.9l5,5.00687l8.5,-8.5-1.9,-1.9z' fill='%23fff'/%3e%3c/svg%3e");}
.custom-checkbox>input:disabled+span::before{background-color:#e9ecef;}
.custom-checkbox>input:hover+span::before{filter:brightness(0.85);}

Когда выйдет

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

DAK85 commented 2 years ago

Подглядел в форуме монитор статистики... Может сделаешь потом GP.STATS() который будет выводить монитор ресурсов МК. https://community.alexgyver.ru/threads/wifi-lampa-budilnik-obsuzhdenie-proshivki-fieryledlamp-ot-alvikskor.7223/post-91880

Serega88kos commented 2 years ago

Ребят, что-то не вижу компонента, с помощью которого можно вывести число? LABEL не подходит, только текст.

GyverLibs commented 2 years ago

LABEL не подходит, только текст

А String давно отменили?

Serega88kos commented 2 years ago

Создал свою страницу от CustomOTA, назвал /ota загружаю прошивку и после загрузки перекидывает на /ota_update и с темной темой

GyverLibs commented 2 years ago

Приколы от Дениса подъехали)

GyverLibs commented 2 years ago

так, попробуй в customOTA строки 72 и 76 заменить window.location.href='/ota_update' на location.reload() и отпишись о результатах

Serega88kos commented 2 years ago

192.168.1.76/GP_OTAupload

GyverLibs commented 2 years ago

вот собака..

DenysChuhlib commented 2 years ago

Создал свою страницу от CustomOTA, назвал /ota загружаю прошивку и после загрузки перекидывает на /ota_update и с темной темой

надо страницу делать не в главном билдере а в билдере portal.OTA.attachUpdateBuild(OTAbuild); void OTAbuild(bool OTAend, const String& UpdateError) {}

DenysChuhlib commented 2 years ago

а если делать череp просто кнопки OTA_FRIMWARE() OTA_FILESYSTEM() будет перекидывать на страницу /ota_update

DenysChuhlib commented 2 years ago

и да если отак сделать плата не перезагрузиться и не обновиться

так, попробуй в customOTA строки 72 и 76 заменить window.location.href='/ota_update' на location.reload() и отпишись о результатах

Serega88kos commented 2 years ago

Завтра попробую, что получится)

DenysChuhlib commented 2 years ago

а поповоду темной темы есть настройка на светлую

DenysChuhlib commented 2 years ago

define GP_OTA_LIGHT

DenysChuhlib commented 2 years ago

https://github.com/GyverLibs/GyverPortal/blob/main/src/CustomOTA.h настройки 21-23 рядок и дэфайнить перед подключением портала

DenysChuhlib commented 2 years ago

Приколы от Дениса подъехали)

С стандартним httpUpdateServer тоже перекидует на /ota_update

Serega88kos commented 2 years ago

Это видел, но это уже чисто под себя сборка) После каждого обновления править конфиг вручную?

DenysChuhlib commented 2 years ago

всм? в скэтч перед #include и всё

DenysChuhlib commented 2 years ago

они там просто для справки

Serega88kos commented 2 years ago

Ну, ок)

DenysChuhlib commented 2 years ago

а в билдере portal.OTA.attachUpdateBuild(OTAbuild); void OTAbuild(bool OTAend, const String& UpdateError) {}

есть дєфолтна страница рядок 189, так что делай как она и будет удобно.

Serega88kos commented 2 years ago

Я с 189 и начал изучать, в итоге дошел к тому, что получилось) Мне нужна только одна кнопка для обновления скетча.

GyverLibs commented 2 years ago

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

DAK85 commented 2 years ago

Как идеи для рассмотрения.... Добавить возможность в jquery update по принципу GP.RELOAD, то есть обновлять только в том случае, если МК даст на это команду. Произошли изменения, обновляем, нет изменений, не обновляем. Позволит уменьшить нагрузку на мк и не делать лишних запросов. Так же рассмотреть добавление в твой упдейт немного нишятков, а именно - нет кликов по элементам из списка лист, то обновляем по таймеру, если происходят события кликов по элементам из списка на обновление, то делаем ребут через 150 мс, а следующий ребут по интервалу пропускаем.

B00mlex commented 2 years ago

Может добавить меню? Себе сделал вот такое.

https://user-images.githubusercontent.com/59569595/194750068-a2ad4f6c-42b0-4754-8bcb-55c5ee5da6f0.mp4

Я не профи но даже у меня получилось. Так, как мне кажется, намного удобнее, меню всегда под рукой.

Вот код из custom, может кому то пригодится.

void GP_MENU_BURGER(const String& urls, const String& names) { String s; s += "<div class='conteiner'>\n"; s += "<div class='menu-burger'>\n"; s += "<span class='burger-menu_lines'></span>"; s += "</div>\n"; s +="<div class='navmenu'>"; s +="<ul>"; GP.SEND(s); s = ""; GP_parser n; GP_parser u; while (n.parse(names)) { u.parse(urls); s += F("<li "); if (_gp_uri->equals(u.str)) s += F("style='background:#4CAF50' "); s += F("onclick='location.href=\""); s += u.str; s += F("\";'>"); s += n.str; s += F("</li>\n"); } s += F("</ul></div></div>\n"); GP.SEND(s); }

void GP_BURGER_STYLE() { GP.SEND_P(PSTR("<style type='text/css'>.conteiner{position:absolute;display:flex;justify-content: end;max-width:inherit;width:100%;top:0;z-index:50;}\n" ".menu-burger{position:fixed;display:block;top:15px;width:36px;height:36px;border-radius:8px;background:#4CAF50;z-index:3;box-shadow:#3c4048 0px 0px 5px;}\n" ".menu-burger:before,.menu-burger:after,.menu-burger span{content:'';background-color:#fff;width:70%;position:absolute;height:2px;left:5px;}\n" ".menu-burger span{top:17px;transition:all 0.3s ease 0s;}\n" ".menu-burger:before{top:10px;transition:all 0.3s ease 0s;}\n" ".menu-burger:after{bottom:10px;transition:all 0.3s ease 0s;}\n" ".menu-burger.active span{transform: scale(0);transition:all 0.3s ease 0s;}\n" ".menu-burger.active:before{transform: rotate(45deg);top:17px;transition:all 0.3s ease 0s;}\n" ".menu-burger.active:after{transform: rotate(-45deg);bottom:17px;transition:all 0.3s ease 0s;}\n" ".navmenu{top:-100%;position:fixed;max-width:inherit;width:100%;height:100%;overflow:auto;background-color: #3c4048;z-index:2;transition:all 0.3s ease 0s;}\n" ".navmenu.active{top:0;}\n" ".navmenu>ul{list-style-type:none;color:white;font-size: 22px;padding: 20px;text-align: left;}\n" ".navmenu>ul>li{padding: 5px 5px;border-bottom: groove 1px #4CAF50;cursor:pointer;}body.lock{overflow:hidden;}" ".navmenu>ul>li:hover{background-color:#4caf505e;}</style>\n" )); }

void GP_BURGER_SCRIPT() { GP.SEND_P(PSTR("<script>\n" "let menuBtn = document.querySelector('.menu-burger');\n" "let menu = document.querySelector('.navmenu');\n" "let body = document.body;\n" "menuBtn.addEventListener('click', function(){menu.classList.toggle('active');menuBtn.classList.toggle('active');body.classList.toggle('lock');})\n" "</script>\n")); }

Ну а так в билдере собираю в самом начале. GP_BURGER_STYLE(); GP_MENU_BURGER("/,/form,/button,/led,/menu5,/menu6,/menu7,/menu8,/menu9", "Домашняя,Форма,Кнопка,Лампочка,Меню 5,Меню 6,Меню 7,Меню 8,Меню 9"); GP_BURGER_SCRIPT();

GyverLibs commented 2 years ago

офигеть, не знал что так можно) добавим

B00mlex commented 2 years ago

По сути, также можно сделать и виртуальную мультистраничность. Надо только добавить JS кода чтобы закрывать меню после клика по пункту меню. Мне вообще думается что меню должно быть по дефолту, даже с пустой страницей. Еще портал должен быть адаптивным. Если открывать портал на компе, с большим разрешением, то ширина портала 700+ пикселей и слева меню без кнопки всегда доступное. Если разрешение мобильное, то показывать меню бургер.

GyverLibs commented 2 years ago

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

B00mlex commented 2 years ago

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

Это да )

GyverLibs commented 2 years ago

что то типа такого

B00mlex commented 2 years ago

Ну да) Только чтобы такое сверстать, на мой взгляд, нужен профи в дизайне. Мне такое не дано(

GyverLibs commented 2 years ago

я вообще не знал что такое javascript и как оно работает до недавнего времени) попробую, сами блоки то уже готовы, считай надо внешний каркас доделать и всё

B00mlex commented 2 years ago

я вообще не знал что такое javascript и как оно работает до недавнего времени) попробую, сами блоки то уже готовы, считай надо внешний каркас доделать и всё

Просто отлично! А я свое меню бургер часов 10 собирал, у меня все куда то съезжало, падало, пропадало, все эти флексы, шмексы, ужас))) Тонны мануалов перечитал прежде чем хоть что то получилось. Опыт конечно отличный, css мощная штука оказывается)

Serega88kos commented 2 years ago

Алекс, а я предупреждал) Что появятся новые специалисты и будет 4 версия портала) Думаю надо внедрять как дополнения, если что-то возможно. Если ещё и делиться народ будет своими дополнениями, как во второй версии... Глядя на html, можно внести в дизайн какую-то табличность. Посмотри последние страницы форума.

GyverLibs commented 2 years ago

Посмотри последние страницы форума.

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

DAK85 commented 2 years ago

Никуда не смотри, я уже почти всё допилил, скоро сюда скину

GyverLibs commented 2 years ago

мне страшно, перестань)))

Serega88kos commented 2 years ago

Никуда не смотри, я уже почти всё допилил, скоро сюда скину

Я немного подготовил, чтобы не напугать)

GyverLibs commented 2 years ago

я свое меню бургер часов 10 собирал

я нашёл простой вариант чисто на css) скорее всего его буду добавлять

B00mlex commented 2 years ago

я нашёл простой вариант чисто на css) скорее всего его буду добавлять

Ага, видел такое. Я больше мучался с Position:fixed, странная штука.

DAK85 commented 2 years ago

Давным давно, когда мамонты ещё не вымерли... многие люди для позиционирования элементов использовали таблицы. По сей день часто встречаются таблицы на страницах, только мы их не видим, поверх них тянут css. для примера ниже картинка, верхний блок собран на таблице, нижний - через боксы. Можно заметить как кое-где не хватает кнопок, но при этом интерфейс никуда не уезжает.... tables

void GP_TABLE_BEGIN() {
        GP.SEND_P(PSTR("<table width=100% border=0>"));
}
void GP_TR() {
    GP.SEND_P(PSTR("<tr>"));
}
void GP_TD(const String& w = "", const String& al = "", const String& val = "", uint8_t cs = 1, uint8_t rs = 1) {
    String s;
    s += F("<td");
    if (w.length()>1){
        s += F(" width=");
        s += w;
    }
    if (al.length()>1){
        s += F(" align=");
        s += al;
    }
    if (val.length()>1){
        s += F(" valign=");
        s += val;
    }
    if (cs>1){
        s += F(" coolspan=");
        s += cs;
    }
    if (rs>1){
        s += F(" rowspan=");
        s += rs;
    }
    s += F(">");
    GP.SEND(s);
}
void GP_TABLE_END(){
    GP.SEND_P(PSTR("</table>"));
}

Я взял только самый минимум из таблиц, и надо понимать, что если это внедрять, то надо всё таки align пихать из GPAlign

DAK85 commented 2 years ago

На идею толкнула картинка с форума https://community.alexgyver.ru/threads/gyverportal.6632/post-129436

GyverLibs commented 2 years ago

именно это хотел добавить в следующей версии. А что даёт coolspan rowspan?

DAK85 commented 2 years ago

объединяет ячейки горизонтально и вертикально

B00mlex commented 2 years ago

На идею толкнула картинка с форума https://community.alexgyver.ru/threads/gyverportal.6632/post-129436

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

GyverLibs commented 2 years ago

пихать из GPAlign

Не выйдет... GPAlign сделан для flex бокса, там другие значения. Я что нибудь придумаю

GyverLibs commented 2 years ago

цвет показаний

в моей версии лейбл можно красить

B00mlex commented 2 years ago

цвет показаний

в моей версии лейбл можно красить

Это просто замечательно! )

GyverLibs commented 2 years ago

@DAK85, не понял как работает таблица у тебя. Должно ведь быть

  <tr>
    <td>foo</td>
    <td>bar</td>
    <td>gay</td>
  </tr>

DAK85 commented 2 years ago

Пока надо пилить вики под то, что уже есть.... Это всё потом:) Если таблицы делать, то в принципе надо не забыть для таблицы сделать макрос. GP_MAKE_TABLE. Очень эффектно, если первый столбик объединяется по всем ячейкам таблицы и в него выводится текст через <br> В Х О Д Ы Теги <tr> и <td> можно не закрывать, это уже 100 лет назад браузеры делают сами

GyverLibs / GyverPortal

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

CHANGELOG v3.3

TODO

Осмыслить

Когда выйдет

define GP_OTA_LIGHT