ESP32 Веб-сервер с файлами на MicroSD-карте 

В этом руководстве вы узнаете, как создать веб-сервер на ESP32, который раздаёт файлы с microSD-карты, используя модуль microSD-карты, работающий по протоколу SPI. Вы научитесь отдавать HTML, CSS, JavaScript файлы, изображения и другие ресурсы, сохранённые на microSD-карте. Это может быть особенно полезно, если ваши файлы слишком велики для файловой системы (SPIFFS), или это может быть удобнее в зависимости от вашего проекта. Для создания веб-сервера мы будем использовать библиотеку ESPAsyncWebServer.

ESP32 Web Server Hosting Files from MicroSD Card

Если вы хотите создать веб-сервер с файлами из SPIFFS, воспользуйтесь следующим руководством:

ESP32 Web Server using SPIFFS (SPI Flash File System)

Обзор проекта 

Чтобы показать вам, как создать веб-сервер с файлами на microSD-карте, мы создадим простую HTML-страницу, которая отображает текст, отформатированный с помощью CSS. Мы также будем отдавать favicon. На следующем изображении показана веб-страница, которую мы будем обслуживать:

ESP32 Web Server with Files from microSD card

Веб-сервер создаётся с использованием библиотеки ESPAsyncWebServer;
Файлы HTML, CSS и favicon сохраняются на microSD-карте;
MicroSD-карта связывается с ESP32 через протокол SPI;
Когда клиент делает запрос к ESP32, он отдаёт файлы, сохранённые на microSD-карте;
Вы можете применить то, чему здесь научитесь, к любому проекту веб-сервера, над которым работаете.

ESP32 Web Server with Files from microSD Card How it Works

Модуль MicroSD-карты 

Существуют различные модули microSD-карт, совместимые с ESP32. Мы используем модуль microSD-карты, показанный на следующем рисунке — он связывается по протоколу SPI. Вы можете использовать любой другой модуль microSD-карты с интерфейсом SPI.

microSD card module for ESP32 ESP8266 Arduino SPI

Где купить?

Вы можете перейти по ссылке ниже, чтобы посмотреть различные магазины, где можно приобрести модуль microSD-карты:

MicroSD card module

Распиновка модуля MicroSD-карты

Модуль microSD-карты связывается по протоколу SPI. Мы будем использовать стандартные выводы SPI ESP32, как показано в следующей таблице:

Модуль microSD-карты	ESP32
3V3	3.3V
CS	GPIO 5
MOSI	GPIO 23
CLK	GPIO 18
MISO	GPIO 19
GND	GND

Рекомендуемое чтение: ESP32 Pinout Reference: Which GPIO pins should you use?

Подготовка MicroSD-карты 

Перед тем как продолжить руководство, убедитесь, что вы отформатировали microSD-карту в FAT32. Следуйте инструкциям ниже, чтобы отформатировать microSD-карту, или используйте программу, например SD Card Formatter (совместима с Windows и Mac OS).

1. Вставьте microSD-карту в компьютер. Перейдите в Мой компьютер и щёлкните правой кнопкой мыши на SD-карте. Выберите Форматирование, как показано на рисунке ниже.

Preparing the MicroSD Card format microSD Card

2. Появится новое окно. Выберите FAT32, нажмите Начать, чтобы начать процесс форматирования, и следуйте инструкциям на экране.

После форматирования microSD-карты вы можете поместить на неё файлы, используемые для создания веб-сервера. Мы перенесём файлы index.html, style.css и favicon.png. Следуйте следующему разделу, чтобы подготовить файлы.

HTML-файл

Создайте файл с именем index.html со следующим содержимым:

<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="icon"  type="image/png" href="favicon.png">
  <title>ESP Web Server</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This page was built with files from a microSD card.</p>
</body>
</html>

Посмотреть исходный код

CSS-файл

Создайте файл с именем style.css со следующим содержимым:

html {
    font-family: Arial;
    text-align: center;
}
body {
    max-width: 400px;
    margin:0px auto;
}

Посмотреть исходный код

Favicon

Мы также будем отдавать favicon. Это png-изображение размером 15x15 пикселей. Вы можете использовать тот же favicon, что и у нас, или свою собственную иконку, или вообще без favicon.

Вы можете нажать на следующую ссылку, чтобы скачать favicon:

Скачать файл favicon.png

Копирование файлов на MicroSD-карту

После подготовки всех файлов откройте директорию microSD-карты и вставьте файлы.

microSD Card Folder with Files to Build Web Server

Необходимые компоненты 

ESP32 microSD card module wiring breadboard

Для этого руководства вам понадобятся следующие компоненты:

ESP32 (рекомендуем ознакомиться: Best ESP32 development boards)
Модуль MicroSD-карты
MicroSD-карта
Макетная плата
Соединительные провода

Схема подключения 

Подключите модуль microSD-карты к ESP32, как показано на следующей схеме. Мы используем стандартные выводы SPI ESP32.

ESP32 microSD Card Module Wiring Diagram

Код 

Скопируйте следующий код в вашу Arduino IDE.

/*
  Rui Santos
  Complete project details at https://RandomNerdTutorials.com/esp32-web-server-microsd-card/

  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files.

  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.
*/

#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include "FS.h"
#include "SD.h"
#include "SPI.h"

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

void initSDCard(){
  if(!SD.begin()){
    Serial.println("Card Mount Failed");
    return;
  }
  uint8_t cardType = SD.cardType();

  if(cardType == CARD_NONE){
    Serial.println("No SD card attached");
    return;
  }

  Serial.print("SD Card Type: ");
  if(cardType == CARD_MMC){
    Serial.println("MMC");
  } else if(cardType == CARD_SD){
    Serial.println("SDSC");
  } else if(cardType == CARD_SDHC){
    Serial.println("SDHC");
  } else {
    Serial.println("UNKNOWN");
  }
  uint64_t cardSize = SD.cardSize() / (1024 * 1024);
  Serial.printf("SD Card Size: %lluMB\n", cardSize);
}

void initWiFi() {
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi ..");
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print('.');
    delay(1000);
  }
  Serial.println(WiFi.localIP());
}

void setup() {
  Serial.begin(115200);
  initWiFi();
  initSDCard();

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SD, "/index.html", "text/html");
  });

  server.serveStatic("/", SD, "/");

  server.begin();
}

void loop() {

}

Посмотреть исходный код

Вставьте свои учётные данные сети в следующие переменные, и код должен сразу заработать:

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Как работает код 

Мы уже рассматривали, как создать веб-сервер с ESP32 в предыдущих руководствах. Поэтому мы рассмотрим только соответствующие части для этого руководства.

Библиотеки

Сначала убедитесь, что вы подключили библиотеки FS.h, SD.h и SPI.h, чтобы иметь возможность взаимодействовать с microSD-картой и обрабатывать файлы.

#include "FS.h"
#include "SD.h"
#include "SPI.h"

Инициализация MicroSD-карты

Функция initSDCard() инициализирует microSD-карту на стандартных выводах SPI.

void initSDCard(){
  if(!SD.begin()){
    Serial.println("Card Mount Failed");
    return;
  }
  uint8_t cardType = SD.cardType();

  if(cardType == CARD_NONE){
    Serial.println("No SD card attached");
    return;
  }
  Serial.print("SD Card Type: ");
  if(cardType == CARD_MMC){
    Serial.println("MMC");
  } else if(cardType == CARD_SD){
    Serial.println("SDSC");
  } else if(cardType == CARD_SDHC){
    Serial.println("SDHC");
  } else {
    Serial.println("UNKNOWN");
  }
  uint64_t cardSize = SD.cardSize() / (1024 * 1024);
  Serial.printf("SD Card Size: %lluMB\n", cardSize);
}

Затем вам нужно вызвать эту функцию в setup():

initSDCard();

Раздача файлов с MicroSD-карты

Когда вы обращаетесь к IP-адресу ESP32 по корневому (/) URL, отправляется HTML-файл, сохранённый на microSD-карте.

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(SD, "/index.html", "text/html");
});

Первый аргумент функции send() — это файловая система, где сохранены файлы. В данном случае файлы сохранены на SD-карте (SD). Второй аргумент — это путь к файлу (/index.html). Третий аргумент — тип контента (text/html).

Когда HTML-файл загружается в вашем браузере, он запрашивает CSS и favicon файлы. Это статические файлы, сохранённые в той же директории (SD). Мы можем добавить следующую строку для раздачи статических файлов из директории при запросе корневого URL. Она автоматически отдаёт CSS и favicon файлы.

server.serveStatic("/", SD, "/");

Если вашему веб-серверу нужно обрабатывать больше маршрутов, вы можете добавить их в setup(). Не забудьте указать SD в качестве первого аргумента функции send(). Таким образом, он будет искать файлы на microSD-карте.

Всё настолько просто. Это может быть применено к любому другому проекту веб-сервера.

Демонстрация 

После загрузки кода откройте монитор порта на скорости 115200 бод. Нажмите встроенную кнопку RST.

Вы должны увидеть что-то подобное в мониторе порта: IP-адрес ESP32 и информацию о microSD-карте.

Web Server with Files from MicroSD card Serial Monitor IP Address

Откройте браузер в вашей локальной сети и вставьте IP-адрес ESP32. Загрузится следующая веб-страница с файлами, сохранёнными на microSD-карте. Обратите внимание на favicon в строке заголовка веб-браузера.

Заключение 

В этом руководстве вы узнали, как создать веб-сервер на ESP32 с файлами, сохранёнными на microSD-карте. Вместо того чтобы писать HTML, CSS и JavaScript код непосредственно в Arduino-скетче, вы можете сохранить их в отдельных файлах на microSD-карте. Это также может быть полезно для хранения других данных, которые вы хотите отображать на своём веб-сервере.

Если у вас нет модуля microSD-карты, вы можете сохранить файлы в файловой системе ESP32 (SPIFFS), если они помещаются. Вам также может быть интересно:

ESP32 Data Logging Temperature to MicroSD Card

Надеемся, вы нашли это руководство полезным.

Узнайте больше об ESP32 с нашими ресурсами:

Примечание

Источник: ESP32 Web Server Hosting Files from MicroSD Card — RandomNerdTutorials.com