GyverPortal

Нажмите здесь, чтобы посмотреть текст статьи

Комментарии

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
23
7
Подскажите пожалуйста, как сделать авторизацию на отдельный пункт меню?
Висит старый планшет, показывает всё о доме, ребёнок пришёл в гости, потыкал- и настройки Telegram, Blynk, wifi - усё...
ui.enableAuth("admin", "admin"); - это на весь портал. Но какой смысл вешать пароль на всю графическую систему информации?? Надо ж как обычно: логин на отдельный пункт меню, где хранятся ценные данные...
 
  • Лойс +1
Реакции: pingemall
G

gidiara666

✩✩✩✩✩✩✩
5 Май 2023
23
7
Нашёл очень обескураживающий баг:
Gyver Portal не совместим с Fast Bot. Проходит компиляцию, ошибок нет. Но при внесении даже минимального кода с присутствием Fast Bot- зависает ESP. У меня вариант с работающей на ESP ТД и одновременно можно подключиться к любой сети wifi. Просто добавляю авторизацию Fast Bot в две строки, запуск в loop bot.tick() - всё, приехали... В консоли рапортует: точка доступа включена, но ни подключения к Telegram, ни точки доступа на ESP нет.
 
N

Nikantovik

✩✩✩✩✩✩✩
15 Май 2023
4
1
Добрый день!
Подскажите плиз, как можно из портала в какую либо программу получать данные. Не строя интерфейс.
Идея такая. WEB морда у ESP32 есть, но помимо ESP32 должен отправлять некие данные в программу которая собирает данные с датчиков.
Как это можно реализовать? Т.е. просто каким методом нужно воспользоваться чтоб отправить данные?
 
N

Nikantovik

✩✩✩✩✩✩✩
15 Май 2023
4
1
Спасибо за ответ, но программу я планирую написать в Lazarus. Мне просто интересно, есть ли некий метод в GyverPortal позволяющий отправлять к примеру просто текстовую строку, чтоб я мог ее принять и обработать в своей программе.
 
Maxx1200

Maxx1200

★✩✩✩✩✩✩
11 Фев 2022
66
16
@Nikantovik, как вариант это
Библиотека ESP8266HTTPClient предназначена для работы с HTTP-запросами на микроконтроллерах ESP8266 и ESP32. Она позволяет выполнять GET, POST, PUT, DELETE запросы к веб-серверам и получать ответы от них.

С помощью этой библиотеки можно легко отправлять запросы на удаленный сервер и получать данные в формате JSON, HTML, XML и других. Также возможна работа с HTTPS-запросами, что обеспечивает большую безопасность при обмене данными.

Библиотека ESP8266HTTPClient очень удобна и проста в использовании, что позволяет быстро создавать приложения для мониторинга и управления устройствами через Интернет. Она является важной частью разработки IoT-проектов на базе ESP8266 и ESP32.
 
Maxx1200

Maxx1200

★✩✩✩✩✩✩
11 Фев 2022
66
16
@Nikantovik,
Да, Вы можете использовать библиотеку Gyverportal и библиотеку ESP8266HTTPClient совместно для работы через Wi-Fi на платформе ESP8266. Библиотека GyverPortal позволяет создавать веб-интерфейсы для взаимодействия с платой, а библиотека ESP8266HTTPClient предоставляет функционал для отправки HTTP-запросов и получения ответов от удаленного сервера. Обе библиотеки можно использовать одновременно для создания приложений, использующих интернет-связь на платформе ESP8266.
 
G

gidiara666

✩✩✩✩✩✩✩
5 Май 2023
23
7
Извиняюсь, заработал Telegram! Если будете брать BotID из Портала, после введения его в нужное окно и сохранения в памяти ESP, то надо Telegram ID и бота прописывать по другому, уже в setup. В примере Memory.TelegramBOTID и Memory.TelegramID1 берутся из долговременной памяти ESP, где они возникают после соответствующих заклинаний и приготовлений. Общий вид таков:
#include <FastBot.h>
FastBot bot;

void setup() {
Serial.begin(115200);
EEPROM.begin(2000);
Memory.begin(0, 'a');

bot.setToken (Memory.TelegramBOTID);
#define CHAT_ID Memory.TelegramID1
/// всякие остальные сетапные заклинания тут
void loop() {
bot.tick(); // тикаем в луп ботом Telegram, шоб он был нам бодрым
///всякие остальные лупные заклинания тут

Попытаюсь повторить просьбу о помощи: как сделать пароль на отдельный пункт меню, не на весь графический портал?
2. У кого есть рецепт надёжного mini DNS вервера, который бы работал как нормальный captive portal и надёжно и непременно перебрасывал бы автоматически на портал при наборе нужных буковок? У меня #include <DNSServer.h> работает прекрасно, если сеть раздаёт ESP, но стоит только ему подключиться к роутеру - всё, облом, возможно подключение только по адресу, который надо смотреть в консоли... Сам портал с его потрясающими наворотами при этом идёт лесом, раз адрес к нему без консоли недоступен. Всякие "прописывания MAC в роутере" - не предлагать.
 
Изменено:
G

gidiara666

✩✩✩✩✩✩✩
5 Май 2023
23
7
А вот что бы я сделал в первую очередь перед тем как создавать портал (если б умел, конечно :)?
Разумеется, попытался бы преодолеть первую и основную проблему: как имея прошитую ESP с порталом к ней "железно" подключаться. Мутить экран только ради одного раза посмотреть IP? Бред. Одноразовых экранов нам не надо.
Сторонняя программа? Тоже не то, её минимум под 4 системы писать надо, не все Windows юзают, костыль ещё тот- надо иметь комп под рукой.
В роутер MAC ESP "прописывать"? Так ежели роутер не твой и пароль не знаешь, то и... Да и хотелось бы поуниверсальнее решения, чтоб вот прям на любом мобильном создал ТД- и сразу подконнектился к ESP с порталом.
Итого, вроде есть универсальное решение с Captive Portal - кто б не приконнектился- перебрасывает в веб морду Портала.
Как я пытался решить эту проблему:
удалось создать при помощи DNSServer и ТД в ESP, и чтоб она потом коннектилась к указанной ТД роутера. Вроде всё успешно. Всегда можно соединиться с ТД от ESP и там посмотреть адрес, имя и пароль другой сети. Пока не присоединил Telegram и прочий Blynk. Однако тогда начала пропадать точка доступа на ESP. В принципе, с интерактивным Telegram и графическим Blynk портал и не нужен, он для резерва задумывался, ежели "усё вдруг пропадёт". Но вот ежели пропадает wifi, то хренушки ESP точку доступа после этого поднимает... И оказывается портал совсем бесполезным...
Надо в комплект к порталу:
1. чтоб всегда и везде можно было попасть в него по персональному имени. (лично у меня с .local не работает вообще, никакой bonjour и avahi, что только не делал... По имени заходит только в случае прямого подключения к ESP).
2. Чтоб работало одновременно и ТД на ESP и подключалось к роутеру. Тогда можно зайти и посмотреть адрес прямо с ESP. В любой момент.
Как же ж сделать-то?
 
G

gidiara666

✩✩✩✩✩✩✩
5 Май 2023
23
7
Может, кому понадобится:
Костыль для выяснения IP адреса GP из telegram бота, при условии нахождения в одной совместной с ESP локальной сети, либо вошли в локальную сеть с ESP по VPN удалённо:
1. подключаем бота, делаем меню и одну из кнопок обзываем Portal. Заклинание простое, выводит IP соединения и IP
soft AP, в зависимости от состояния подключения. Юзать оба: soft AP и обычное подключение - не рекомендую, при обращении к soft AP та находится в полукоматозном состоянии и почти не реагирует на команды, контроллер "не тянет" два wifi соединения одновременно. А так- всего два клика и мы - в портале.

if (msg.text == "Portal" || msg.text == "/Portal" || msg.text == "portal")
{
String ip1 = "Portal IP: " + WiFi.localIP().toString();
String ip2 = "ESP wifi IP: " + WiFi.softAPIP().toString();
bot.sendMessage(ip1 + " " + ip2, msg.chatID);
}
 
G

gidiara666

✩✩✩✩✩✩✩
5 Май 2023
23
7
GP.LED в firefox выводится не читаемым чётко по цвету, размер очень мал, выглядит иначе, чем в остальных браузерах. В Opera цвета у LED - очень блеклые, но различимы.
Остальные браузеры- отлично. GP.LED_B не помогло. Проверял на 6 браузерах.
 
T

t_sa

✩✩✩✩✩✩✩
12 Мар 2021
7
1
Привет всем. Нужно в зависимости от значения переменной выводить разные изображения. Кто как реализовывал это? Поделитесь.
 
G

gidiara666

✩✩✩✩✩✩✩
5 Май 2023
23
7
Изображения чего??? Если диода красного либо зеленого- это одно, а если картинки с девушками- то совсем другое. Я лично отказался от LED из-за того, что они в разных браузерах по разному выглядят, использую color. В примерах все есть.
 
T

t_sa

✩✩✩✩✩✩✩
12 Мар 2021
7
1
Любое изображение (.png, .jpg и т.п.) Это может быть серия изображений какого-либо устройства с множеством состояний, а не только вкл./выкл.
Если переменная принимает значение 1 - выводится, например, IMG1.png, 2 - IMG2.png и т.д.
 
G

gidiara666

✩✩✩✩✩✩✩
5 Май 2023
23
7
Так делайте ссылку на изображение. В чем проблема? Грузить кучу фоток в 2Мб памяти- сами понимаете, не лучшая идея...
GP.UI_LINK(ссылка, имя);
напрямую из памяти:
GP.IMAGE(ссылка на файл памяти);
GP.ViDEO(ссылка):
GP.CAM_STREAM(размер, порт)
 
T

t_sa

✩✩✩✩✩✩✩
12 Мар 2021
7
1
@gidiara666,
Во-первых, GP.IMAGE не катит, т.к. этот компонет не обновляется, только через перезагрузку страницы. Меня как раз интересует как реализовать ДИНАМИЧЕСКОЕ обновление компонента по принципу
void build() {
GP.UPDATE("led", 2000);
GP.LED_GREEN(led);
}
void action() {
if (ui.update("led")) { }
}

Во-вторых, изображения - это не фотографии FullHD, а небольшие изображения типа иконок размером с десяток кб.
 
G

gidiara666

✩✩✩✩✩✩✩
5 Май 2023
23
7
А Вы хотя бы теоретически поясните, как себе это представляете... Как показать новую картинку на экране, не обновляя экран? Для этого надо иметь хотя бы буфер приличного размера. А в ESP он какой, глядели? Это на форум православных надо с такими вопросами, раздел: "обсуждение чудес".
 
Изменено:
C

c470ip

✩✩✩✩✩✩✩
9 Янв 2020
9
4
Друзья, а можно нубский вопросик? Вот сделал я себе тестовый веб-интерфейсик на GP, нажимаю кнопочку в интерфейсе, диодик на плате зажигается или гаснет. Аллилуйя! Ну и прочие контролы попробовал, не без того. Всё работает прекрасно, за что Алексу большое спасибо.

А есть ли возможность управлять устройством через GP удалённо, не имитируя нажатия кнопок? Т.е. с прямой передачей параметров через скрипт, URL или как-то ещё. Скажем, если я захочу несколько кнопочек, управляющих разными устройствами, собрать на одну веб-страничку. Или например отправлять какие-то команды автоматически по cron с NAS-сервера.
 
  • Лойс +1
Реакции: gidiara666
Войдите или зарегистрируйтесь для ответа.
Сверху Снизу