Файловое хранилище на базе ESP32 и карты MicroSD

08.06.2021Вольтик.руИнструкции и решения проблем, Проекты на ESP8266 / EPS3210

В данном руководстве мы расскажем, как создать файловое хранилище на веб-сервере на базе ESP32 и карты MicroSD (будем использовать протокол SPI). Хостинг может быть полезен, когда хранящиеся файлы слишком большие для SPIFFS. Для создания сервера мы будем использовать библиотеку ESPAsyncWebServer

Обзор

В качестве примера мы создадим простую страницу на HTML+CSS с текстом и добавим иконку страницы. В результате должно выглядеть примерно так:

Карта MicroSD

Для изучения проекта вам понадобится карта MicroSD с поддержкой SPI. Для подключения к плате будем использовать этот адаптер:

Распиновка адаптера

Данный адаптер работает по интерфейсу SPI. Подключать адаптер будем по следующей распиновке:

Адаптер	ESP32
5V	VIN
CS	GPIO 5
MOSI	GPIO 23
CLK	GPIO 18
MISO	GPIO 19
GND	GND

Так как на плате отсутствует вывод 5V, питание на модуль будем подавать через контакт VIN. Питание через него будет напрямую идти от USB кабеля.

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

Прежде чем переходить непосредственно к созданию веб-сервера, убедитесь что карта отформатирована в файловую систему FAT32. Если это не так, то сделать это достаточно просто:

Вставьте карту в компьютер. Зайдите в «Мой компьютер» и кликните правой кнопкой мыши на карту. Выберите опцию «Форматировать»

Откроется новое окно, в котором нужно выбрать файловую систему FAT32 и нажать «Начать»

После форматирования карты вы можете загрузить на нее файлы, необходимые для создания веб-сервера. В нашем случае – загрузим файлы 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>

<!DOCTYPE HTML><html>

<head>

<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;
}

html {

font-family: Arial;

text-align: center;

}

body {

max-width: 400px;

margin:0px auto;

}

Иконка

Это будет картинка формата .png с размером 15×15 пикселей. Вы, конечно, можете использовать любую другую иконку.

Также вы можете перейти по ссылке, чтобы скачать иконку.

Копируем файлы на microSD карту

После подготовки файлов копируем их на карту

Что потребуется для проекта?

Файловое хранилище на базе ESP32 и карты MicroSD

Вам потребуются следующие детали:

Принципиальная схема

Подключите адаптер к плате по следующей схеме (мы используем пины по умолчанию):

Скетч

Вставьте следующий код в среде разработки Arduino:

/*
  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"

// Укажите свои учетные данные сети
const char* ssid = "ЗАМЕНИТЕ_СВОИМ_SSID";
const char* password = "УКАЖИТЕ СВОЙ ПАРОЛЬ";

// Создаем сервер, используя 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() {
  
}

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"

// Укажите свои учетные данные сети

const char* ssid = "ЗАМЕНИТЕ_СВОИМ_SSID";

const char* password = "УКАЖИТЕ СВОЙ ПАРОЛЬ";

// Создаем сервер, используя 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() {

}

Не забудьте указать свои учетные данные!

const char* ssid = "ЗАМЕНИТЕ_СВОИМ_SSID";
const char* password = "УКАЖИТЕ_СВОЙ_ПАРОЛЬ";

1 2	const char* ssid = "ЗАМЕНИТЕ_СВОИМ_SSID"; const char* password = "УКАЖИТЕ_СВОЙ_ПАРОЛЬ";

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

Как создать веб-сервер мы рассматривали в предыдущих руководствах (надеемся, вы их читали). Так что мы просто возьмем необходимые участки кода оттуда:

Библиотеки

Для начала подключаем библиотеки FS.h, SD.h и SPI.h для обеспечения возможности обмена файлами с картой MicroSD.

Подключаем карту MicroSD

Для подключения карты с использованием дефолтных пинов SPI используем функцию initSDCard():

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 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()

Загружаем файлы с карты

Отправляем наши файлы HTML и CSS при подключении к плате ESP32 по корневому IP (/)

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){

request->send(SD, "/index.html", "text/html");

});

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){

request->send(SD, "/index.html", "text/html");

});

Первый аргумент функции send() – система, где хранятся файлы (здесь они сохранены на microSD карте). Второй аргумент передает путь, где расположен файл (/index.html, то есть в корне карты). Третий аргумент содержит тип файла (text/html).

Когда HTML файл загрузится на сервер, он затребует иконку и файл CSS, которые также сохранены в корне карты. Добавим следующую строку для загрузки статических файлов по URL запросу. Она находит и загружает нашу иконку и CSS файл автоматически.

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

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

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

В общем-то, достаточно просто и легко встраивается в любой проект.

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

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

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

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

Заключение

В данном руководстве мы рассмотрели, как создать веб-сервер с помощью платы ESP32 и карты MicroSD. Кроме рассмотренных нами форматов файлов можно использовать любые другие, что позволяет использовать карту MicroSD для хранения разных файлов проекта, в том числе слишком больших для хранения в файловой системе SPIFFS.

Данный материал был переведен с сайта RandomNerdTutorials.com. Авторские права принадлежат ее автору - Rui Santos. Автор продает очень полезные и толковые курсы по ESP8266 / ESP32 (на английском языке), ознакомиться с которыми можно по ссылке.
Вопросы по прошивке и работе с кодом лучше писать напрямую автору в комментариях к статье (на англ. языке)

Вольтик.ру

Вольтик - это слаженная команда амбициозных и заядлых инженеров. Мы создали этот проект с целью вовлечения вас, талантливых и начинающих профессионалов, в увлекательный мир мейкерской микроэлектроники!

10 комментариев. Оставить новый

Aleks

20.11.2022 15:17

На картике приведен модуль HW-125 для чтения и записи карт microSD.
Интерфейс обмена SPI.
7pin.
Питание: 5В. На плате стоит стоит соответствующий чип понижения напряжения до 3.3в (такой же стоит на sp32).
Каким образом его запитывают от 3.3 в ?

Ответить

Вольтик.ру

20.11.2022 17:40

Модуль может работать от напряжения 3.3В, а стабилизатор выдаёт на выходе столько же, сколько получает на входе.

Ответить

Aleks

21.11.2022 14:53

Питание модуля осуществляется через встроенный стабилизатор на плату и входное напряжение не может быть ниже 5 в. Каким образом модуль работает от 3.3 в ? Если предполагается питание модуля от 3.3 в, то это не HW-125 , приведенный на картинке. При размещении какой либо информации тщательно следите за ее содержимым.

Aleks

21.11.2022 14:55

И приведенная в таблице распиновка никак не соответствует указанному на “Для подключения к плате будем использовать этот адаптер:”

Alex

21.11.2022 15:00

Читайте спецификацию на установленный на плате чип AMS1117-3.3 Входное напряжение должно быть в пределах 4.75V – 12V

Ответить

Копатыч

18.10.2023 18:01

Модуль чтения / записи micro SD карт памяти SPI в ссылке указан как TF 5v, а на фото по факту мини на 3.3v…

Ответить

supportvoltiq

18.10.2023 19:18

Добрый день!

Спасибо за ваш комментарий! Мы проверили и исправили описание, однако, стоит отметить, что принцип работы модуля остается все тем-же, вне зависимости от того, работает ли он при напряжении 5В или 3.3В.

Samvel

09.05.2023 16:25

можно юзать esp8266?

Ответить

Дмитрий

10.04.2025 09:33

А НА карту SD записать файлы возможно? Если это хранилище, то должна быть возможность гонять файлы туда-сюда.

Ответить

Вольтик (Техподдержка)

14.04.2025 11:35

Здравствуйте, да, возможно.

File myFile = SD.open("test.txt", FILE_WRITE); // Открываете файл для записи (если его не существует, он будет создан)
if (myFile) { // Проверяете, что файл открылся успешно
    myFile.println("testing 1, 2, 3."); // Записываете в файл что-нибудь
    myFile.close(); // Закрываете файл
  } else { // В противном случае обрабатываете ошибку
    Serial.println("error opening test.txt");
  }

File myFile = SD.open("test.txt", FILE_WRITE); // Открываете файл для записи (если его не существует, он будет создан)

if (myFile) { // Проверяете, что файл открылся успешно

myFile.println("testing 1, 2, 3."); // Записываете в файл что-нибудь

myFile.close(); // Закрываете файл

} else { // В противном случае обрабатываете ошибку

Serial.println("error opening test.txt");

}

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

Ответить

Файловое хранилище на базе ESP32 и карты MicroSD

Обзор

Карта MicroSD

Распиновка адаптера

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

Файл HTML

Файл CSS

Иконка

Копируем файлы на microSD карту

Что потребуется для проекта?

Принципиальная схема

Скетч

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

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

Заключение

10 комментариев. Оставить новый

Добавить комментарий Отменить ответ