Скачивание файлов - GyverLibs/GyverPortal GitHub Wiki

В библиотеке предусмотрено скачивание файлов с сервера (с esp), причём этот процесс максимально автоматизирован и требует добавления минимального количества кода в скетч. Это позволяет:

  • Выводить на страницу изображения, текст, видео и другие файлы
  • Скачивать файлы с сервера
  • Сильно ускорить загрузку страницы портала, подгружая стили и скрипты из файлов: в этом случае они скачаются один раз и будут храниться в кеше!

Подготовка

Для работы с файловой системой нужно подключить библиотеку (SPIFFS или LittleFS) и запустить её:

#include <LittleFS.h>

void setup() {
  LittleFS.begin();
}

Сигнал на скачивание

Когда библиотека получит запрос на скачивание файла - функция download() вернёт true (нужно опрашивать в функции-обработчике действия):

void action() {
  if (portal.download()) {
    // есть запрос, смотрим адрес (путь к файлу)
    Serial.println(portal.uri());
  }
}

Под запросом на скачивание файла библиотека понимает запрос, начинающийся с /, имеющий в тексте точку . и не имеющий параметров (т.е. url без знака ?)

Для отключения обработки загрузки можно

  • Вызвать portal.downloadMode(false) - файлы перестанут обрабатываться
  • Задефайнить #define GP_NO_DOWNLOAD перед подключением библиотеки - модуль скачивания будет полностью убран из компиляции

Отправка

Ручная отправка файла

Внутри обработки запроса на скачивание нужно открыть и отправить файл типа File. Какой файл сейчас запрашивается можно узнать из uri():

void action() {
  if (portal.download()) {
    Serial.println(portal.uri());
    
    // открыть файл любым способом и передать в библиотеку
    portal.sendFile(LittleFS.open(portal.uri(), "r"));
  }
}

Таким образом можно построить более сложную логику с именами файлов и/или их источником.

См. пример fileDownloadManual

Отправка файла по имени

Если не нужна сложная логика при выборе и открытии файла - можно указать библиотеке, какая файловая система используется, тогда файлы можно будет отправлять просто по имени - библиотека сама их откроет и закроет:

GyverPortal portal(&LittleFS);

void setup() {
  LittleFS.begin();
}

void action() {
  if (portal.download()) {
    portal.sendFile(portal.uri());
  }
}

См. пример fileDownload

Автоматическая отправка файла

Третий вариант полностью автоматический - файлы будут скачиваться с указанной файловой системы по url запроса. Для включения режима нужно вызвать downloadAuto(true):

GyverPortal portal(&LittleFS);

void setup() {
  LittleFS.begin();
  portal.downloadAuto(true);
}

void action() {
  // обработка скачивания не требуется
}

См. пример fileDownloadAuto

Скрипты и стили

Если файлы портала загружены и настроено скачивание - можно сильно ускорить загрузку страницы портала, указав библиотеке что скрипты и стили можно скачать файлом.

void build() {
  // запуск конструктора
  //GP.BUILD_BEGIN();     // обычный вариант, скрипты отправятся текстом
  GP.BUILD_BEGIN_FILE();  // скрипты будут загружены из файла /gp_data/scripts.js
  
  // тема
  //GP.THEME(GP_LIGHT);         // обычный вариант, стили отправятся текстом
  //GP.THEME_FILE("GP_LIGHT");  // стили будут загружены из файла /gp_data/GP_LIGHT.css
  GP.THEME_FILE("GP_DARK");     // стили будут загружены из файла /gp_data/GP_DARK.css

  // jQuery обновление
  //GP.JQ_SUPPORT();      // поддержка jquery. Файл скачается с https://code.jquery.com/
  GP.JQ_SUPPORT_FILE();   // поддержка jquery, файл скачается из файла /gp_data/jquery.js
}

Встраивание и скачивание

  • Если в коде страницы файл указан как src=/file.txt' - он будет встроен в страницу (стили, скрипты, картинки...)
  • Если зайти в браузере по адресу файла (например http://192.168.1.123/file.txt) - файл откроется в окне браузера
  • Для скачивания файла как файл - используйте кнопку GP.BUTTON_DOWNLOAD(ссылка, текст); (см. полный список)
  • Для встраивания изображений, видео и текстовых файлов есть готовые функции:
GP.IMAGE(ссылка);                   // картинка. Указать ссылку на файл в памяти
GP.IMAGE(ссылка, ширина);           // + ширина строкой "100px", "25%" и так далее (умолч "", т.е. авто)

GP.VIDEO(ссылка);                   // видео. Указать ссылку на файл в памяти
GP.VIDEO(ссылка, ширина);           // + ширина строкой "100px", "25%" и так далее (умолч "", т.е. авто)

GP.EMBED(ссылка);                   // текст. Указать ссылку на файл в памяти
GP.EMBED(ссылка, ширина);           // + ширина строкой "100px", "25%" и так далее (умолч "", т.е. авто)
⚠️ **GitHub.com Fallback** ⚠️