GyverPortal

ASM

ASM

★★★★★✩✩
26 Окт 2018
1,599
311
@Kisa9000, да, ограничений нет, что хочешь пиши) можешь сделать готовые функции по аналогии, затем просто вставлять в проекте. И при обновлении библиотеки, в случае изменения, легко подправить)
 
Kisa9000

Kisa9000

✩✩✩✩✩✩✩
4 Апр 2023
4
0
@ASM, а я все таки еще раз явно спрошу. Тобишь в текущей реализации GyverPortal нет методов которые позволят сделать динамическое меню?
 
ASM

ASM

★★★★★✩✩
26 Окт 2018
1,599
311
@Kisa9000, названия вкладок в меню прописываются. Есть простое с верхними вкладками. И боковое UI. Всё статичное. Если хочется предложить что-то своё, можешь написать Алексу на гитхаб.
 
Kisa9000

Kisa9000

✩✩✩✩✩✩✩
4 Апр 2023
4
0
@ASM, все понял. Спасибо большое. Я сделал верхние вкладки и думаю щас как сделать сопряжение с девайсами по шине и сразу отображать их в WEB GUI, аля прокинул девайс, он у меня на экране появился в интерфейсе сразу ему все настройки ручками выдал и SAVE.
 
Alexsey62

Alexsey62

✩✩✩✩✩✩✩
11 Апр 2023
1
0
Оформи код соответствующим тэгом
Добрый день, разбираюсь с порталом, написал простую программку для адресной ленты - выпадающий список выбирает номер диода и три слайдера меняют его цвет. Для изменения цветов в реальном времени (не по отпусканию, а по движению слайдера) используются GP.SLIDER_C. Если ооочень медленно тащить ползунок проблем с изменением цвета нет, а если чуть быстрее - сразу вылетает сообщение Offline! И через пару секунд вновь в онлайне, пока не начнешь двигать ползунок быстрее чем "ооочень медленно". Как это исправить? GP.setTimeout() не влияет на результат.

C++: 
#define PIN        2
#define NUMPIXELS  8
#include <GyverPortal.h>
#include <Adafruit_NeoPixel.h>
GyverPortal ui;
byte n,r,g,b;
Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800);
void build() {
  GP.BUILD_BEGIN();
  GP.THEME(GP_DARK);
  GP.BLOCK_TAB_BEGIN("WS2812B REMOTE");
      M_BOX(GP.LABEL("Num.LED");  GP.SELECT("num_led", "0,1,2,3,4,5,6,7");  );
      M_BOX(GP.LABEL("R");   GP.SLIDER_C("red",0,0,255,1,0,GP_RED_B);    );
      M_BOX(GP.LABEL("G");   GP.SLIDER_C("green",0,0,255,1,0,GP_GREEN_B););
      M_BOX(GP.LABEL("B");   GP.SLIDER_C("blue",0,0,255,1,0,GP_BLUE_B);  );
      Serial.print("RED ");
  GP.BUILD_END();
}
void action() {
    if (ui.click("num_led")) {
      ui.copyInt("num_led", n);
    }
    if (ui.click("red")) {
      ui.copyInt("red", r);
    }
if (ui.click("green")) {
      ui.copyInt("green", g); 
    }
if (ui.click("blue")) {
      ui.copyInt("blue", b);
    }
    pixels.setPixelColor(n, pixels.Color(r, g, b));
    pixels.show();
};
void setup() {
  pixels.begin();
  Serial.begin(115200);
  pixels.clear();
  pixels.setBrightness(255);
  WiFi.mode(WIFI_AP);
  WiFi.softAP("8266");

  ui.attachBuild(build);
  ui.attach(action);
  ui.start("");
}
void loop() {
  ui.tick();
}
 
Изменено:
S

ShSergeyn

✩✩✩✩✩✩✩
13 Апр 2023
3
0
Подскажите как разместить картинку ?

Делаю так
1. Размещаю в проекте по пути файл data\gp_data\background.png
2. в build() строку
GP.SEND("<body bgcolor=\"#000\" background=\"\\gp_data\\background.png\">");
или такую
GP.SEND("<img src=\"\\gp_data\\background.png\">")
картинка не появляется
В браузере пытаюсь открыть картинку по пути http://192.168.2.102/gp_data/background.png не открывает.
 
ASM

ASM

★★★★★✩✩
26 Окт 2018
1,599
311
@ShSergeyn, может просто data?
Подключи файловый менеджер и посмотри.
А так из Вики
C++: 
// иконки из файлов
GP.ICON_FILE_BUTTON(имя, uri_иконки);
GP.ICON_FILE_BUTTON(имя, uri_иконки, размер);
GP.ICON_FILE_BUTTON(имя, uri_иконки, размер, цвет);
 
S

ShSergeyn

✩✩✩✩✩✩✩
13 Апр 2023
3
0
замена в GP.SEND gp_data на data не помогло
В браузере пытаюсь открыть картинку по пути http://192.168.2.102/data/background.png не открывает.
ASM написал(а):
Подключи файловый менеджер и посмотри.
Нажмите для раскрытия...
Можно поподробнее.

Взял из примера
void build() {
GP.BUILD_BEGIN();
GP.THEME(GP_DARK);
GP.TITLE("Расстояние");
GP.HR();
GP.ICON_SUPPORT();
GP.LABEL(GP.ICON("gear") + "Text");
GP.ICON_FILE_BUTTON("icnf", "/gp_data/gear.svg", 70, GP_RED);
GP.BUILD_END();
}
GP.LABEL - отображается иконка и только с расширением svg, меняю на png и ее нет.
GP.ICON_FILE_BUTTON - ничего нет

Вот так выглядит.
Над местом GP.ICON_FILE_BUTTON меняется курсор с указателя на руку.
 

Вложения

ASM

ASM

★★★★★✩✩
26 Окт 2018
1,599
311
Изменено:
F

Foster

✩✩✩✩✩✩✩
14 Апр 2023
1
2
Здравствуйте.
Попробовал все графики в режиме точки доступа (AP) и ни один не работает, чистое фоновое пространство (как и описано в issue#78 ). В режиме станции всё работает. Как я правильно понимаю highstock.js тянет другие файлы из сети. Можно ли как то их подтянуть оффлайн, записав в spiffs? И будет ли переход на опенсорс как например упомянутый в issue#73 μPlot ?
 
  • Лойс +1
Реакции: SoftFelix и Eagle
A

ART_HA

✩✩✩✩✩✩✩
14 Апр 2023
4
0
Здравствуйте.
Есть желание сотворить для ESP32 следующую HTML конструкцию.
Четыре слайдера с индикацией числового значения позиции с запоминанием их в FRAM. SPIFF не желателен. Украшения не требуются, дизайн строго технический. Проблем с FRAM нет, есть проблема с HTML.
Т.е. при каждом запуске скачиваются 4 байта из FRAM и согласно им устанавливаются движки слайдера и числовые значения их позиций.
При изменении в браузере положений слайдера новые значения записываются в FRAM с выдачей признака факта изменения каждого значения.
Просьба подсказать какой пример или какие примеры наиболее подходят для реализации задачи.
PS. Плохо, когда примеров мало. Но и когда их много, тоже не очень хорошо. :)
 
alfik777

alfik777

✩✩✩✩✩✩✩
29 Янв 2022
3
0
Доброго! Имею кнопку и иконку-кнопку из файла:
C++: 
 GP.BUTTON("btn", "Button");
GP.ICON_FILE_BUTTON("icon", "/icon.svg", 24, PSTR("#bbbbbb"));
В обработчике отлавливаю события нажатия и отпускания ( не клики):

C++: 
void action()
{
if (portal.hold())
   {
    if (portal.clickDown("icon")) Serial.println("Press icon");
    if (portal.clickUp("icon")) Serial.println("Release icon");
    if (portal.clickDown("btn")) Serial.println("Press btn");
    if (portal.clickUp("btn")) Serial.println("Release btn");
   }
  if (portal.click()) { }
}
Кнопка отрабатывает прекрасно, а с иконкой непонятки. События нажатия-отжатия появляются только после того, как на иконке произойдет один раз клик, т.е. после быстрого нажатия и отпускания..После этого прекрасно отрабатываются и нажатие и отпускания. Догадываюсь, что это не анонсировано, но эти иконки тоже "типа" кнопки, к тому же после клика все отлично отрабатывает. Посоветуйте что-то.
 
Изменено:
Эдуард Анисимов

Эдуард Анисимов

★★★★★★✩
23 Сен 2019
2,396
971
58
Марий-Эл
В руки попал чужой код.
Там используется версия 2.1
У меня два вопроса:
1. Где указывается адрес сети. Ни в коде, нигде не нашёл.
2. Как сделать сеть открытой. У меня она закрыта и подсоединиться можно только зная SSID.
 
ASM

ASM

★★★★★✩✩
26 Окт 2018
1,599
311
@Эдуард Анисимов, на сколько я правильно понял вопрос, то библиотека использует стандартные библиотеки. Ничего не создаёт и не хранит с wifi...
В будущем Алекс писал, перевел на EspaSync, возможности ее не смотрел.
 
Эдуард Анисимов

Эдуард Анисимов

★★★★★★✩
23 Сен 2019
2,396
971
58
Марий-Эл
@ASM, Да. Я так понял. Вдаваться особо не хочется в эту кухню. Проект разовый. На ESP32.
Я схемотехнику сделал. Нужно только код подправить. Сумбурный он и ошибок много.
 
ASM

ASM

★★★★★✩✩
26 Окт 2018
1,599
311
@gidiara666, изучай документацию)
ТЗ не понятно)
Макросы очень удобны в реализации)
Черти таблицу, если нужно и в ячейки вставляй нужное)
Для удобства можно включить границы.
Кнопка работает по клику. Опрос по имени в action.
github.com

Home

Простой конструктор веб интерфейса для esp8266 и ESP32 - GyverLibs/GyverPortal
github.com github.com
 
Изменено:
G

gidiara666

★✩✩✩✩✩✩
5 Май 2023
59
13
А хоть как можно посмотреть результат? В HTML я убрал client.println и кое-где блокировку кавычек, т.е. в блокноте привёл к стандартному виду, переименовал файл в *.html - и смотрю вывод прямо в браузере после многочисленных изменений. А GyverPortal - прям беда, я так память заезжу тысячами прошивок, глядя как любая запятая влияет, да и время конкретно отбирает процедура...
 
ASM

ASM

★★★★★✩✩
26 Окт 2018
1,599
311
@gidiara666, ничего не понятно) я вот делаю свои проекты, десятками раз перепрошиваю, память жива) пока рисуешь страницу, много раз приходится перепрошивать, чтобы правильно расположить элемент)
Не бойся, шей смело)
 
G

gidiara666

★✩✩✩✩✩✩
5 Май 2023
59
13
Угу... Я пока сделал большой проект, "шил" смело около 500 раз. А тут... Правка интерфейса занимает в десятки раз больше времени правки кода. Плюс время на компиляцию, подключение, просмотр... Проект прекрасный, но я лучше на HTML вернусь, пару недель жизни - экономия серьёзная, достаточно в коде убрать адаптацию к ESP - и запускать и полировать код прямо из блокнота в браузере, а уж потом готовое всё "шить", дизайн - дело очень долгое и без компиляции. Всем спасибо!
 
Изменено:
  • Лойс +1
Реакции: Эдуард Анисимов
G

gidiara666

★✩✩✩✩✩✩
5 Май 2023
59
13
Дорогой Alex Gyver! Огромное спасибо за Портал!
Сильно не хватает светодиода как у Blynk, который можно увеличивать до больших разноцветных кругов, изменяющих цвет при смене состояния пина. Либо большой кнопки (не минислайдера), которая бы изменяла свой цвет (зелёный/красный) при смене состояния пина, как у светодиода. И такой же выключатель: включен - зелёный, ткнул- красный. И, конечно, необходим обычный "Показометр" чего угодно, в виде круга или стрелочный. Тоже как в Blynk.
 
Изменено:
  • Лойс +1
Реакции: Barragozin_01
N

Nikantovik

✩✩✩✩✩✩✩
15 Май 2023
5
1
Добрый день всем!
Столкнулся с проблемой. Графики через сеть работают. А когда создаешь локальную точку доступа, то не работают.
Мож кто-то сталкивался с подобной проблемой?
Заранее благодарен!
 
  • Лойс +1
Реакции: gidiara666
G

gidiara666

★✩✩✩✩✩✩
5 Май 2023
59
13
Столкнулся с фундаментальным ограничением GP. В ESP32 свободных pin около 20. Я использую всего 18, из них 15 - для опросов состояния pin. Цикл по опросу трёх датчиков температуры - каждые 3 секунды, Цикл по опросу состояний 12 pin - каждые 4 секунды, обновления на экране настроены на компромисные 3 сек. Ежели использовать динамическое ajax обновление (для чего, собственно, и предназначен web интрерфейс - визуальная оценка параметров в любой момент времени) - портал гарантированно "вылетает" в оффлайн... Максимум 5 динамических параметров для стабильной работы! Испытал сильное разочарование. Будьте осторожнее в планах, работая с GP.
 
  • Лойс +1
Реакции: pingemall
gambeet

gambeet

✩✩✩✩✩✩✩
24 Май 2023
1
0
Всем привет. Никак не могу заставить локальные иконки работать, ни в каком виде.
Setup: 
void setup() {
    WiFi.mode(WIFI_AP);
    WiFi.softAP("esp32", "12345678");
 
    GyverPortal portal;
 
    if (!LittleFS.begin()) Serial2.println("FS Error");
 
    portal.uploadAuto(true);   //не уверен что здесь это нужно
    portal.downloadAuto(true); //но и так пробовал
    portal.enableAuth("admin", "12345678");
    portal.attachBuild(build);
    portal.start("point");
}

Build: 
void build(GyverPortal &p) {
    GP.BUILD_BEGIN();
    GP.THEME(GP_DARK);

    GP.ICON_SUPPORT(); //вроде тоже не нужно, но попробовал

    GP.UI_MENU("Configurator", GP_ORANGE);
    String a = GP.ICON_FILE("/wum-color.svg"); // хотел вставить в боковом
    GP.LABEL(a);                               // меню сверху списка вкладок, не вышло
    GP.BREAK();
    GP.LABEL("some text");
    GP.UI_LINK("/", "Home");
    GP.UI_LINK("/serial1", "Serial port 1");
    GP.UI_LINK("/gsm", "GPRS/LTE");
    GP.UI_LINK("/terminal", "Terminal");
    GP.UI_LINK("/service", "Service");
    GP.UI_LINK("/upgrade", "Upgrade");
    GP.BREAK();
    GP.BREAK();
    GP.LABEL("1.0.0");

    GP.UI_BODY();
    GP.LABEL("some text");
    String b = GP.ICON_FILE("/icons/wum-color.svg");  // просто на странице вкладки
    GP.LABEL(b);                                      // не вышло
    GP.LABEL(GP.ICON_FILE("/gp_data/gear.svg") + "Text"); // подумал что мой svg какой то не такой, взял из примера, не вышло
    GP.BREAK();                                        
    GP.LABEL(GP.ICON_FILE("/gp_data/gear.svg", 30) + "Text"); // менял размеры
    GP.BREAK();
    GP.LABEL(GP.ICON_FILE("/gp_data/gear.svg", 50, GP_RED) + "Text");
    GP.BREAK();
    GP.ICON_FILE_BUTTON("icnf", "/gp_data/gear.svg", 70, GP_RED); //пробовал кнопку сделать
    GP.BREAK();
    GP.UI_END();

    GP.BUILD_END();
}
В общем, никак не могу заставить иконки отображаться.
Вот структура файлов. Кидал и в папку, и в корень.
1684930210638.png
Файловая система монтируется, тот же файл config.json грузится по крайней мере. Плата esp32 wroom 32ue

P.S. Разобрался.
Надо класс правильно инициализировать:
GyverPortal portal(&LittleFS);

Правда мой svg идет цветным, в несколько цветов. Неплохо было бы конечно таким его и грузить. Попробую поковыряться, я не очень в html.
 
Изменено:
G

gidiara666

★✩✩✩✩✩✩
5 Май 2023
59
13
Подскажите пожалуйста, как сделать авторизацию на отдельный пункт меню?
Висит старый планшет, показывает всё о доме, ребёнок пришёл в гости, потыкал- и настройки Telegram, Blynk, wifi - усё...
ui.enableAuth("admin", "admin"); - это на весь портал. Но какой смысл вешать пароль на всю графическую систему информации?? Надо ж как обычно: логин на отдельный пункт меню, где хранятся ценные данные...
 
  • Лойс +1
Реакции: pingemall
Войдите или зарегистрируйтесь для ответа.
Сверху Снизу