GyverPortal

[Michael74Rus]

после обновления на новую версию есть два вопроса:
1. можно ли поменять цвет переключателя Switch
2. во второй версии график PLOT_STOCK_DARK на компьютере был раза в 3 шире. чем на мобилке, на третьей версии этот же графки стал одинаковым как на мобиле так и на компе. можно ли для компьютера (ну или вообще) увеличить ширину окна графика

 

[AlexGyver]

@pingemall, теряется плюс - возможно это проделки Веба и нужно прикрутить url encode.

UPD. Я пофиксил, выйдет в обновлении 3.3

 

[DAK]

@Michael74Rus,
1. Думаю можно в файлах тем, но это уже кастом, у других не заработает, только если для себя
2. Про графики не в курсе, посмотрите в какой контейнер он пихается, и возможно подправить размер контейнера, пока думаю графики не трогаются, есть ощущения, что Алекс перетянет графики на новый уровень в следующем глобальном релизе... но это не точно.

 

[vitek1658]

@DAK, Здравствуйте! В программировании я новичок, раньше нигде не встречал такого синтаксиса: led1?GP_GREEN:GP_RED. Где можно почитать о таких трюках или это особенность библиотеки? Не понимаю как это работает.

 

[DAK]

Я тоже новичок, но смысл прост, если слева от вопроса true, то значение этого выражения будет то, что справа от вопроса, если false то, что после :, где то видел более подробное описание, я Вам в двух словах всю суть рассказал

 

[AlexGyver]

@DAK, Здравствуйте! В программировании я новичок, раньше нигде не встречал такого синтаксиса: led1?GP_GREEN:GP_RED. Где можно почитать о таких трюках или это особенность библиотеки? Не понимаю как это работает.

Сравнения, условия и выбор

В этом уроке научимся сравнивать значения и переменные на Ардуино. Рассмотрим if, switch case и их особенности

alexgyver.ru

 

[Michael74Rus]

@Michael74Rus,
1. Думаю можно в файлах тем, но это уже кастом, у других не заработает, только если для себя

Нашел, создал новую тему под себя, спасибо

@Michael74Rus,
2. Про графики не в курсе, посмотрите в какой контейнер он пихается, и возможно подправить размер контейнера, пока думаю графики не трогаются, есть ощущения, что Алекс перетянет графики на новый уровень в следующем глобальном релизе... но это не точно.

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

 

[AlexGyver]

после обновления на новую версию есть два вопроса:
1. можно ли поменять цвет переключателя Switch
2. во второй версии график PLOT_STOCK_DARK на компьютере был раза в 3 шире. чем на мобилке, на третьей версии этот же графки стал одинаковым как на мобиле так и на компе. можно ли для компьютера (ну или вообще) увеличить ширину окна графика

1. Нельзя, но возможно получится добавить
2. Сейчас у страницы есть контейнер конкретной ширины (задаётся в build begin), график принимает его размер. Можно сделать контейнер пошире, а "панель управления" засунуть в один из контейнеров с настраиваемой шириной, которые есть в библиотеке (BOX, BLOCK)

 

[Michael74Rus]

2. Сейчас у страницы есть контейнер конкретной ширины (задаётся в build begin), график принимает его размер. Можно сделать контейнер пошире, а "панель управления" засунуть в один из контейнеров с настраиваемой шириной, которые есть в библиотеке (BOX, BLOCK)

все отлично, то что требовалось

 

[pingemall]

@DAK, уезжает всё по расписанию, а вот ловит контроллер уже без "+"


p.s.: Ответ уже увидел, не обновил страницу перед сообщением.

 

[zoland]

С глубокой благодарностью к @AlexGyver за то, что вдохновил на освоение HTML, Css и JS. В последние годы пишу на Python, однако алгоритмы - они везде алгоритмы. Поэтому хотел поделиться идеями, возникшими и частично воплощенными после изучения библиотеки GyverPortal и ссылок, любезно предоставленных на схожие решения.

Сперва я хотел один-в -один повторить GyverPortal на Python, так как до этого использовал собственную надстройку над EspNow, сделав одну из ESP32 графическим контроллером для визуализации процессов, а остальные - по прямому назначению управляющими и обрабатывающими события от графического контроллера, в частности. Однако наличие старых смартфонов не давало покоя и появление GyverPortal показал Путь, позволяющий уйти от собственного колхоза в пользу мобильных приложений с низким порогом вхождения.

Однако при этом я сохранил желание разделить процессы, связанные с визуализацией и обработкой событий, по этой причине препроцессинг размещения элементов html на странице, а так же логистику визуализации перенес из кода основной программы в JS (заодно начал изучение очередного языка программирования), оставив описание структуры и элементов на ESP32 и передачу ее в JSON-формате в клиентскую часть мобильника. Оговорюсь, что я сосредотачивался именно на смартфонах с тачскринами, без адаптации на планшеты и десктопы в силу своих приоритетов. Эта логика успешно использовалась в подобных библиотеках типа JeeUI 2 и ее потомках, я лишь ее реализовал, практикуясь, по ходу, в новом для себя языке JS.

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

• расширение библиотеки виджетами и оптимизация ее кода в основной программе;
• облегчение кода основной программы за счет переноса этой нагрузки в клиентскую часть, создания метаязыка описания страниц в JSON-формате, парсинга и препроцессинга в клиентской части без необходимости подгрузки элементов html-кода и оптимизация подгрузки частей css и js библиотек;
• создания отдельной программы типа Nextion, QT-Creator или подобных им, где в графической форме рисуется визуализация и ее логика и результатом работы которой является пакет html-css-js файлов, возможно даже сжатый, который загружается на ESP и при старте основной программы перебрасывается в клиентскую часть, позволяя при разработке сосредоточится именно на обработке событий, для начала просто писать отдельную програмку, которая на основании имеющейся библиотеки готовит html, css, js файлы для загрузки на ESP32. Тоже, собственно, ничего нового - препроцессор, как это успешно применяют в ЧПУ-форматах.

Касательно событий - помимо обработки стандартных событий, генерируемых элементами html, можно устанавливать не один, а несколько таймеров в клиентской части (я пробовал устанавливать два) для обновления разных виджетов или даже принудительного перемещения по страницам путем обработки в call-back функции.

Структуру страницы можно заложить на основе css grid layout - создавая произвольную сетку и пропорции ячеек, в которые уже вписывать свои виджеты (над чем сейчас и работаю, осваивая этот css-формат) использую просто более глубокую вложенность JSON-формата при описании страниц.

Страницы реализовал трех типов - одиночная (простая), слайдер (перебор страниц стрелками, как слайдер) и бургер-меню (выбор очередной страницы из списка). Тип определяется в приложении при инициализации визуализации. Страницы, подготовленные в результате препроцессинга, живут в массиве html-страниц клиентской части, подгрузка не требуется. Так как в моем случае это мобильные приложения, то количество элементов на странице не более десятка и страницы не столь "тяжелые". Теоретически в процессе первоначального парсинга можно подключать только те части css и js, которые используются. Сейчас загружаю css и js модули в полном объеме. Сначала загружается стартовая страница, затем после ее загрузки закачиваются html-страницы, css и js библиотеки, после чего запускается основной алгоритм. Бывает немного медленнее при запуске, но не критично. Зависит, конечно, от объема визуализации.

Кстати, перенос бОльшей части визуализации и ее логики в клиентскую часть, либо препроцессорной обработке на десктопе позволяет оторваться от конкретного языка приложения (хоть на Ассемблере) и решать вопрос - синхронно или асинхронно обрабатывать поступающие события в зависимости от сложности приложения и квалификации разработчика. Хотя эмоционально формат GyverPortal-функций при описании страницы мне изначально больше понравился (кстати, это тоже можно назвать своеобразным мета-языком), чем JSON-формат. Я даже пробовал в виджет-функциях генерировать не html-код, а JSON, но это создавало дополнительную нагрузку на основной код в ESP32, что понудило отказаться от этой идеи в пользу размышлений о создании десктопного приложения по подготовке визуализации проекта (чего в одиночку не потянуть, по прошествии полугода слежения развития GyverPortal и собственного изучения css и js поймал себя на мысли, что мне для своих редких проектов проще вручную написать html-css-js, привязав к обработчику событий, но для многих, полагаю, этот путь более нерационально трудоемкий, чем использовать готовые решения с качественной поддержкой разработчика).

Это идеи, которыми решил поделиться и частично опробовал сам, что, возможно, натолкнет на мысли о стратегии дальнейшего успешного продвижения замечательного проекта GeverPortal!

 

[zoland]

Гарик Чилингарян с ArduinoProm уже даже демонстрацию сделал Демо GyverPortal на FlProg

 

[DAK]

@zoland,
Даже двух минут не выдержал. Никогда не пробовал flpog, может я просто ущербный.... Конструктор очень простой, главное подобрать правильные алгоритмы для решения поставленных задач. Мне сперва было тяжело, но в итоге переписал всё свои алгоритмы для взаимодействия с порталом, сейчас понимаю, что переписал всё таким образом, что могу любой фреймворк подключить к своим основным алгоритмам.... Я видел код, который генерирует флпрог, дурно становится...

 

[Старик Похабыч]

Веб интрефейс вообще не сложно строится.
Я для себя сделал так:
1) Сделал шаблон из нескольких файлов, где запускаю файловую систему, вифи и веб сервер, ну плюс с недавних пор считаю кол-во нажатых ресетов.
2) Веб сервер настроен так, что выводит любые файлы в соотв. с расширением как html , txt или для скачивания.
3) Все рисую в html.
4) Добавляю нужный обмен данными по xml

 

[DAK]

@Старик Похабыч, этот подход понятен, но как по мне более применим к статичным данным, то есть не подходит к созданию динамических страниц.. Как я понимаю при таком подходе очень непросто создать Web интерфейс, где кол-во элементов на страницах меняется в зависимости от различных параметров. Хотя в принципе могу ошибаться, так как подобные элементы можно генерировать ява скриптами из xml файлов, но это не тривиальная задача и не такая и простая, как мне кажется...

 

[zoland]

@Старик Похабыч, мне тоже flprog не понравился, пробовал на нем схемы рисовать для документации, но очень муторным показалось, однако если игнорировать оболочку и смотреть его описание компонентов GyverPortal и их применение, то имеет место на жизнь и такой подход. Это я к тому,что популярность библиотеки неуклонно растет!

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

Например, сейчас при запуске я загружаю стартовую страницу с css и js библитеками, которые по определению статические, а по окончании их загрузки подгружаются странички, описанные в JSON-формате от одной до необходимого количества, которые преобразуются из JSON описаний в html и дальше работает только call-back функция в основной программе, в которую при каком-либо действии на экране поступает название события, имя элемента с которым это событие произошло и измененное значение, а при выходе можно вернуть ничего или команду в json-формате для изменения значения или атрибута одного или нескольких элементов не только на текущей странице, Дополнительно могут происходить события, связанные со сменой страниц (если надо что-то сделать при закрытии/открытии) и от предустановленных таймеров, которые запрашивают с заданной периодичностью внесение изменений для отображения чего-либо на странице. С их помощью, теоретически, можно делать и анимацию, но мне в этом не было необходимости. Кстати, тут я не привязан к регулярным опросам, реагируя только на события, что позволяет писать асинхронных код.

В итоге, в основном коде сейчас при старте загрузка стартовой страницы и json-описаний элементов и их размещения на рабочих страницах и call-back функция, через которую осуществляется взаимодействие с телефоном, на котором происходит основная работа по визуализации, реализованная на js.

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

Альтернативой можно считать совершенствование и дополнение элементами (виджетами) существующей библиотеки с уже налаженным алгоритмом опроса устройства, на котором осуществляется визуализация, однако объем кода в основной программе вынужденно должен содержать библиотеку обработки виджетов от чего я, собственно, пытался уйти разделяя код на графическую часть на одной ESP32 и управленческую на другом ESP32 организовав между ними прямую связь через протокол ESP-Now. А в GyverPortal все красиво - достаточно сосредоточиться на управлении, потратив минимум усилий на описание визуализации.

 

[abrikos]

Доброго времени суток! Подскажите новичку, проблема заключается в обновлении 2 свича 1 свич обновляется после нажатия кнопки а 2 свич обновляется постоянно в обратное значение в интернете ничего не нашёл(

#include <WiFiUdp.h>
#include <ESP8266mDNS.h>
#include <ArduinoOTA.h>
#include <GyverPortal.h>
#include <list.h>
#include <log.h>
#include <portal.h>
#include <themes.h>
#include <utils.h>

bool valswOpen = 1;
bool valswClose = 1;
bool Emergency = 0;
#define relayBLOCK1 D1
#define relayBLOCK2 D2
#define relayOPEN D3
#define relayCLOSE D4

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

  GP.UPDATE("swOPEN,swCLOSE");

  GP.LABEL("Открыть");
  GP.SWITCH("swOPEN", valswOpen); GP.BREAK();
  GP.BUTTON("relayOPEN", "OPEN"); GP.BREAK();

  GP.LABEL("Закрыть");
  GP.SWITCH("swCLOSE", valswClose); GP.BREAK();
  GP.BUTTON("relayCLOSE", "CLOSE"); GP.BREAK();

  GP.BUTTON("relayEMERGENCY", "EMERGENCY"); GP.BREAK();
  GP.BUILD_END();
}

GyverPortal portal;

void setup() {

 Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin("Beeline_2G_F1FF36", "xUHs7uPh");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println(WiFi.localIP());

  pinMode(relayBLOCK1, OUTPUT);
  digitalWrite(relayBLOCK1, LOW);

  pinMode(relayBLOCK2, OUTPUT);
  digitalWrite(relayBLOCK2, LOW);

  pinMode(relayCLOSE, OUTPUT);
  digitalWrite(relayCLOSE, LOW);

  pinMode(relayOPEN, OUTPUT);
  digitalWrite(relayOPEN, LOW);

  portal.attachBuild(build);
  portal.attach(action);
  portal.start();

ArduinoOTA.setHostname("ESP-LIGHT-CONTROL");

ArduinoOTA.begin();

}
void action() {
  if (portal.update()) {
    if (portal.update("swOPEN")); Serial.println("1");
    if (portal.update("swCLOSE")); Serial.println("1");

    portal.updateBool("swOPEN", valswOpen);
    portal.updateBool("swCLOSE", valswClose);
  }
  if (portal.click()) {
    if (portal.clickBool("swOPEN", valswOpen)) {
      valswOpen = 0;
      Serial.print("Switch: ");
      Serial.println(valswOpen);
      digitalWrite(relayBLOCK1, HIGH);
    }
    if (portal.clickBool("swCLOSE", valswClose)) {
      valswClose = 0;
      Serial.print("Switch: ");
      Serial.println(valswClose);
      digitalWrite(relayBLOCK2, HIGH);
    }
    if (portal.click("relayOPEN")) {
      Serial.println("ButtonOPEN click");
      digitalWrite(relayOPEN, HIGH);
    }
    if (portal.click("relayCLOSE")) {
      Serial.println("ButtonCLOSE click");
      digitalWrite(relayCLOSE, HIGH);
    }
    if (portal.clickUp("relayEMERGENCY")) {
      Serial.println("ButtonEMERGENCY click");
      digitalWrite(relayBLOCK1, LOW);
      digitalWrite(relayBLOCK2, LOW);
      digitalWrite(relayCLOSE, LOW);
      digitalWrite(relayOPEN, LOW);
      Emergency = 1;
    }
  }
}
  void loop() {
  ArduinoOTA.handle();
  portal.tick();
  if (Emergency > 0)
    valswOpen = 1;
  valswClose = 1;
  delay(50);
  Emergency = 0;
}

 

[AlexGyver]

@DAK, уезжает всё по расписанию, а вот ловит контроллер уже без "+"
Посмотреть вложение 38603Посмотреть вложение 38604

p.s.: Ответ уже увидел, не обновил страницу перед сообщением.

Это типичная проблема urlencode, исправлено в обновлении 3.3 (на текущий момент не вышло). Если нужно прямо сейчас - файл builder.h, строка 82, обернуть v в encodeURIComponent(v). Строка целиком:

"if(v.charAt(0)=='#')v=v.substring(1);GP_send('/GP_click?'+arg.name+'='+encodeURIComponent(v));\n"

 

[ASM]

uint32_t colorled = 0x00FFFF;
EEManager mem5(colorled);

mem5.begin(mem4.nextAddr(), 'a');

GPcolor color;
color = colorled;
GP.COLOR("color", color);

GPcolor colorled;
portal.copyColor("color", colorled);   
mem5.updateNow();

выводит цвет правильно, но не сохраняет, показывает снова 0x00FFFF что тут не так?)

 

[gorlanovmax]

Добрый день,

Пытаюсь посмотреть примеры OTAсustom и OTAUpdate

При компилировании выдает ошибку
C:\Users\Professional\AppData\Local\Temp\arduino-sketch-5974F5A9F19F47DABBD36D5E4D0DA359\sketch\OTAcustom.ino.cpp.o.literal._Z5setupv+0x8): undefined reference to `LittleFS'
C:\Users\Professional\AppData\Local\Temp\arduino-sketch-5974F5A9F19F47DABBD36D5E4D0DA359\sketch\OTAcustom.ino.cpp.o.literal._Z5setupv+0x20): undefined reference to `fs::LittleFSFS::begin(bool, char const*, unsigned char, char const*)'
C:\Users\Professional\AppData\Local\Temp\arduino-sketch-5974F5A9F19F47DABBD36D5E4D0DA359\sketch\OTAcustom.ino.cpp.o: In function `setup()':
C:\Users\Professional\Desktop\GyverPortal\examples\demos\OTAcustom/OTAcustom.ino:30: undefined reference to `fs::LittleFSFS::begin(bool, char const*, unsigned char, char const*)'
collect2.exe: error: ld returned 1 exit status

Arduino IDE 2.0.0
Библиотеку LittleFS брал отсюда

arduino-esp32/libraries/LittleFS at master · espressif/arduino-esp32

Arduino core for the ESP32. Contribute to espressif/arduino-esp32 development by creating an account on GitHub.

github.com

 

[ASM]

Arduino IDE 2.0.0

Возможно в ней проблема. Так как в ней куча ошибок) Попробуй первую версию)

 

[DAK]

У меня были глюки при использовании не той версии ядра под еср32. Какой версии у вас пакет для еср32 в менеджере плат? После правильной установки актуального ядра, отдельно библиотеку под литлфс ставить не надо.

 

[gorlanovmax]

Интересную штуку обнаружил при просмотре на iOS.

При первом подключении к Wi-Fi настроенной в качестве точки доступа.
Происходит автоматическая переадресация на страницу.
Страница грузится.
И телефон от wi-fi сразу отключается
При этом сверху висит панель подключения к сети.
И надо отметить, что страница эта открывается внутри приложения wi-fi, не в браузере
Если нажать ссылку отменить "Отменить" то задается вопрос: "Подключиться к другой сети или использовать текущую без интернета"
При выборе "использовать текущую", автоматом опять подключается к wi-fi и окно с отображением страницы закрывается.
Т.е. получается после подключения к сети и первичном отображении страницы, от вэб-сервера нужен некий ответ что авторизация прошла успешно и повторная переадресация уже в браузер.

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

На десктопе в принципе это тоже видно, т.к. первоначально открывается страница http://www.msftconnecttest.com/redirect
Там тоже видимо должна сразу стоять переадресация на локальный адрес или имя хоста (если используется mDNS)

 

[ASM]

@gorlanovmax, по своему опыту, проверь код на дублирующие ссылки. У меня было похожая проблема. Точка переподключалась, не всегда успевал внести настройки. Было два вызова. Исправил, точка стала держаться, открывается автоматически страница, всё ок)

 

[gorlanovmax]

@ASM,

Код из стандартного примера OTACustom
Дублирующие ссылки к каком месте имеешь ввиду