GyverPortal

AlexGyver · 27 Сен 2022

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

DAK · 27 Сен 2022

Мне не повезло поработать во второй версии, но даже то, что было месяц назад уже было очень мощным инструментом и позволяло более просто создавать свои компоненты, дальше всё закрутилось и завертелось, можно спокойно работать с файлами,и сделать свой css со стилями... А там ещё и макросами всё накручивать можно, что позволяет гораздо упростить кодинг. В сфере своей работы не раз писал морды на php, тут точно в разы проще создавать интерфейс. Я изначально скептически отнёсся к этой библиотеки, но это было моим заблуждением... Сделать подобный интерфейс с нуля просто нереальная задача. Сейчас уже всё круто, но думаю и дальше будет развитие этого мощного инструмента.

aidar_i · 27 Сен 2022

Когда выход новой версии?

ASM · 27 Сен 2022

@aidar_i, так уже можно тестировать)

aidar_i · 28 Сен 2022

AlexGyver написал(а):
И всё же лучше использовать css класс, чем вот такую ёлку.

Согласен, но я делаю блоки для FLProg. Там это не проблема. За 5 минут создается проект , как хочешь

Вот код сгенерированный программой:

C++:

#include <GyverPortal.h>
GyverPortal portal;
bool fl_b= 1;
bool Out;
void setup()
{
}
void loop()
{
    if (<en_gp>)
    {
        if (fl_b)
        {
            fl_b = 0;
            portal.attachBuild(build);
            portal.attach(action);
            portal.start();
         }
    }
    else fl_b = 1;
    portal.tick();
}
void action()
{
      if (portal.click())
    {
        if (portal.click("btn"))
        {
            if (Out == LOW) Out = HIGH;
            else Out = LOW;
        }
    }
}

void build()
{
    BUILD_BEGIN();
    GP.BODY_("DodgerBlue");
    GP.BUTTON("btn", "КНОПКА", "320px", "60px", "8px", "Aqua", Arial, "28px", "White");
    BUILD_END();
}

DAK · 28 Сен 2022

Если хочется сделать таким образом, то в принципе реально переделанные функции конструктора запихать в custom.h и делать как раньше. Просто надо помнить, что всё что Вы передаёте будет кушать дополнительное количество памяти МК. Тут каждый решает для себя. Если делать проект, который в дальнейшем должен быть совместим с библиотекой, то как минимум надо переделать, если же Вы не видите в этом никакой необходимости, то Вам и решать как быть дальше...

aidar_i · 28 Сен 2022

DAK написал(а):
запихать в custom.h

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

aidar_i · 28 Сен 2022

Первый запуск примера actionClick блином на ESP32.... Когда плата ESP8266 нормально компилируется.

C++:

\libraries\GyverPortal-v3\src/CustomOTA.h:15:22: fatal error: LittleFS.h: No such file or directory
compilation terminated.

Хотя эта библиотека есть в плате ESP8266.
Ошибка здесь , перепутано все.

C++:

#ifdef ESP8266
#include <WiFiUdp.h>
#include <flash_hal.h>
#include <FS.h>
#include "StreamString.h"
#else
#include <LittleFS.h>
#include <SPIFFS.h>
#include <StreamString.h>
#include <Update.h>
#endif

в ESP32 есть FS, SPIFFS,
а в ESP8266 LittleFS
Ниже тоже перепутано.

DAK · 28 Сен 2022

Тот же косяк и я схватил, у меня ссылка в иде была не правильная и версия ядра для еср32 была 1.0.6, хотя актуальная 2.0.5. просто надо обновится, засунуть в настройки правильную строку, потом обновить через менеджер плат. Вот такую строку воткнул в настройки

https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

aidar_i · 28 Сен 2022

Спасибо, помогло. Я ранее откатывался на 1.0.6, 2.0.5 не работал с какими то проектами.
Опять начнется , одно будет работать, другое нет.
Нужно сделать совместимость с платой 1.0.6.

Заменил файл CustomOTA на эту и заработала плата 1.0.6

TasNorilsk · 28 Сен 2022

По клику на "bOn" подразумевается включение ленты на все светодиоды. И она (внезапно!) включается. Только вот не все диоды, а только первый. Если цикл FOR вынести просто в loop() - все работает штатно, а именно в "зааттаченной" функции - только один светодиод. Что я делаю не так?

C++:

void action() {
  if (portal.click()) {
   
    if (portal.click("bOn")) {
      for (int i = 0; i < NUM_LEDS; i++) {
        leds[i] = CRGB::White;
      }
      LEDS.show();
    }

  }
}

DAK · 29 Сен 2022

@aidar_i, я у себя пересобрал весь свой проект, даже выкинул всё из custom.h, всё, лишь бы не трогать библиотеку. При этом, по поводу кнопок и размеров. Есть файл css стилей, можно тупо сделать свой файл под себя, со своим именем, и всё, кидаешь в gp_data, в конструкторе вызываешь GP.THEME_FILE("имя") (просто имя, без .css), файл подтягивается и будет счастье! При этом не надо будет лишний раз занимать память МК. Надо ещё понять то, что данная либа позволяет кешировать файла, то есть при первом запуске у тебя файл css заливается в кешу, и потом браузер повторно не запрашивает его, это значительно уменьшает время загрузки страницы. Это проверено, Алекс там всё сделал отлично! Кешится и либа jquery и скрипты тоже в кеш ложатся, то есть по факту раз в 3 меньше инфы летит с МК, если использовать файлы вместо конструктора! Для понимания сейчас можно посмотреть builder.h, в принципе там всё очень понятно, но на сколько я знаю, где то пилится вики по всем возможностям этой либы.
Я тоже вчера выкинул код из customOta, чтобы у меня работало всё как надо, потом кинул в issue о данной проблеме. Оказалось проблема только у меня (ну и у тебя), плюс ко всему на новом ядре тот же код у меня жрёт меньше памяти. У меня с ESP32 было много глюков (я слишком увлёкся созданием динамических переменных), но как не странно после глобальной переделки вчера не было ни одного кернел паника (думаю что то сделали в ядре). На старом ядре у меня от оператора free() такие чудеса были, что в итоге у меня теперь везде в коде delete [ ] arr вместо этого free.

AlexGyver · 29 Сен 2022

Я запушил ещё некоторые нововведения, в т.ч. переделал OTA. Пока не могу проверить на есп32
вики кстати здесь https://github.com/GyverLibs/GyverPortal/wiki

DAK · 29 Сен 2022

@AlexGyver, на старом ядре не могу проверить, но мой мего монстр спокойно откомпилировался на последней библиотеки без проблем, при этом все компоненты работают на ура. Как по маслу, избавился от кастом и всё теперь очень просто обновляется. Страницы быстро грузятся, не успеваю глазом моргнуть, но при этом скрипты, стили и жквери закешированы.
Вот скрин самой тяжёлой страницы

AlexGyver · 29 Сен 2022

@DAK,

избавился от кастом и всё теперь очень просто обновляется.

Чиво? Ответь плиз в issue, мне через форум неудобно, уведомлений нет

aidar_i · 30 Сен 2022

@TasNorilsk, попробуйте в клик переменную bool поставить, а в loop запустить for

TasNorilsk · 1 Окт 2022

@aidar_i, Да, спасибо, это сработало.

C++:

void loop() {
  portal.tick();
  if (valSwitch) {
    fill_solid(leds, NUM_LEDS, CRGB::White);
    FastLED.show();
  } else {
    fill_solid(leds, NUM_LEDS, CRGB::Black);
    FastLED.show();
  }
}

aidar_i · 1 Окт 2022

Добавил эффект нажатия кнопки (добавлена одна строка).

DAK · 1 Окт 2022

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

aidar_i · 1 Окт 2022

DAK написал(а):
Думаю с этим надо в ишью, заходи туда, делай ишью, только лучше сразу напиши для чего с какой целью. Можешь полностью переделать стиль под новый и выкинуть его в пул реквест.

Автору не понравился, поэтому будет только здесь.
Видео работы

DAK · 1 Окт 2022

@aidar_i, ну если честно, мне тоже хочется эффекта нажатия ощутить, но этот файл я точнго трогать не буду, там глаза кругом. Я так и не понял каким образом у тебя так получилось. Мне хочется сделать тень только спрао и снизу (без левой тени), и ещё хочется чтобы эта граница будто отбрасывала тень..., зеленоватую тень на чёрном фоне... Можешь сделать свои изменения в css файле (в папке \data\gp_data\GP_DARK.css). Или сюда сделать? У тебя программа генерирует код или ты можешь пояснить как оно работает?

C++:

input[type=submit],
input[type=button],
button {
  height: 55px;
  font-size: 28px;
  width: 90%;
  max-width: 300px;
  margin: 8px 5px;
  background-color: #4CAF50;
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
}

input[type=submit]:hover,
input[type=button]:hover,
button:hover {
  filter: brightness(0.95);
}

input[type=button],
button {
  display: flex;
  align-items: center;
  justify-content: center;
}

DAK · 1 Окт 2022

@aidar_i, Дело не в том, что ты трогаешь библиотеки, дело в том, что это жрёт драгоценную память

С цветами не гармонирует, Ты показываешь на видео только с зелёными кнопками, то ли будет с красными и прочими чудесами

Вставь код ниже в css файл и посмотри какой будет эффект от следующего

CSS:

input[type=submit]:active,
input[type=button]:active,
button:active {
  box-shadow: inset 1px 1px 7px #13161a;
  height: 55px;
  font-size: 28px;
  width: 90%;
  max-width: 300px;
  margin: 8px 5px;
  background-color: #4CAF50;
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
}

Этот код адекватно работает с кнопками разного цвета, он как бы делает эфект вдавливания кноки в экран, то есть по факту нет никаких серых каёмок, просто чёрный цвет фона при клике наезжает на кнопку.
Жаль, что у меня так толком и заработал фильтр drop-shadow, ради одной тени столько всего...
Как тебе такой вариант?

ASM · 1 Окт 2022

C++:

uint16_t clock_col  = display->color565(0, 255, 255);

в библиотеке используется uint16_t формат записи цвета, а в портале виджет генерирует R,G,B.
как их подружить, чтобы можно было с web формы менять цвета?)

DAK · 1 Окт 2022

@ASM, то есть тебе надо 3 байта переделать в 2?

ASM · 1 Окт 2022

@DAK, не знаю, сколько байтов) uint16_t какой-то выводил в сериал, было 4х значение число, типа 1048.

Либо декодировать, либо костыли вставлять, добавляя переменные для каждого цвета. Вот только какой тип переменной, опять непонятно)

GyverPortal

★★★★★★✩

★★★✩✩✩✩

✩✩✩✩✩✩✩

★★★★★✩✩

✩✩✩✩✩✩✩

★★★✩✩✩✩

✩✩✩✩✩✩✩

✩✩✩✩✩✩✩

★★★✩✩✩✩

✩✩✩✩✩✩✩

Вложения

✩✩✩✩✩✩✩

★★★✩✩✩✩

★★★★★★✩

★★★✩✩✩✩

★★★★★★✩

✩✩✩✩✩✩✩

✩✩✩✩✩✩✩

✩✩✩✩✩✩✩

Вложения

★★★✩✩✩✩

✩✩✩✩✩✩✩

Вложения

★★★✩✩✩✩

★★★✩✩✩✩

★★★★★✩✩

★★★✩✩✩✩

★★★★★✩✩