В данном руководстве мы расскажем, как создать файловое хранилище на веб-сервере на базе ESP32 и карты MicroSD (будем использовать протокол SPI). Хостинг может быть полезен, когда хранящиеся файлы слишком большие для SPIFFS. Для создания сервера мы будем использовать библиотеку ESPAsyncWebServer
В качестве примера мы создадим простую страницу на HTML+CSS с текстом и добавим иконку страницы. В результате должно выглядеть примерно так:
Для изучения проекта вам понадобится карта MicroSD с поддержкой SPI. Для подключения к плате будем использовать этот адаптер:
Данный адаптер работает по интерфейсу SPI. Подключать адаптер будем по следующей распиновке:
|
Адаптер |
ESP32 |
|
5V |
VIN |
|
CS |
GPIO 5 |
|
MOSI |
GPIO 23 |
|
CLK |
GPIO 18 |
|
MISO |
GPIO 19 |
|
GND |
GND |
Так как на плате отсутствует вывод 5V, питание на модуль будем подавать через контакт VIN. Питание через него будет напрямую идти от USB кабеля.
Прежде чем переходить непосредственно к созданию веб-сервера, убедитесь что карта отформатирована в файловую систему FAT32. Если это не так, то сделать это достаточно просто:
Создаем файл index.html со следующими строками:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!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> |
Создаем файл style.css со следующими строками:
|
1 2 3 4 5 6 7 8 |
html { font-family: Arial; text-align: center; } body { max-width: 400px; margin:0px auto; } |
Это будет картинка формата .png с размером 15×15 пикселей. Вы, конечно, можете использовать любую другую иконку.
Также вы можете перейти по ссылке, чтобы скачать иконку.
После подготовки файлов копируем их на карту
Вам потребуются следующие детали:
Подключите адаптер к плате по следующей схеме (мы используем пины по умолчанию):
Вставьте следующий код в среде разработки Arduino:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
/* 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() { } |
Не забудьте указать свои учетные данные!
|
1 2 |
const char* ssid = "ЗАМЕНИТЕ_СВОИМ_SSID"; const char* password = "УКАЖИТЕ_СВОЙ_ПАРОЛЬ"; |
Как создать веб-сервер мы рассматривали в предыдущих руководствах (надеемся, вы их читали). Так что мы просто возьмем необходимые участки кода оттуда:
Библиотеки
Для начала подключаем библиотеки FS.h, SD.h и SPI.h для обеспечения возможности обмена файлами с картой MicroSD.
Подключаем карту MicroSD
Для подключения карты с использованием дефолтных пинов SPI используем функцию initSDCard():
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
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 (/)
|
1 2 3 4 5 |
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SD, "/index.html", "text/html"); }); |
Первый аргумент функции send() – система, где хранятся файлы (здесь они сохранены на microSD карте). Второй аргумент передает путь, где расположен файл (/index.html, то есть в корне карты). Третий аргумент содержит тип файла (text/html).
Когда HTML файл загрузится на сервер, он затребует иконку и файл CSS, которые также сохранены в корне карты. Добавим следующую строку для загрузки статических файлов по URL запросу. Она находит и загружает нашу иконку и CSS файл автоматически.
|
1 |
server.serveStatic("/", SD, "/"); |
Если для работы вашего веб-сервера требуется загрузить файлы из других местоположений, вы можете добавить их в функции setup(), но не забудьте указывать SD первым аргументом функции send(). Только в этом случае сервер будет искать файлы на карте MicroSD.
В общем-то, достаточно просто и легко встраивается в любой проект.
После загрузки кода откройте монитор порта на скорости 115200 бод и нажмите кнопку RST.
В мониторе порта вы должны увидеть IP-адрес платы и информацию о microSD карте.
Откройте браузер и вставьте в адресную строку IP платы. Загрузится соответствующая веб-страница, созданная с помощью файлов на microSD карте.
В данном руководстве мы рассмотрели, как создать веб-сервер с помощью платы ESP32 и карты MicroSD. Кроме рассмотренных нами форматов файлов можно использовать любые другие, что позволяет использовать карту MicroSD для хранения разных файлов проекта, в том числе слишком больших для хранения в файловой системе SPIFFS.
Вольтик
8 комментариев. Оставить новый
На картике приведен модуль HW-125 для чтения и записи карт microSD.
Интерфейс обмена SPI.
7pin.
Питание: 5В. На плате стоит стоит соответствующий чип понижения напряжения до 3.3в (такой же стоит на sp32).
Каким образом его запитывают от 3.3 в ?
Модуль может работать от напряжения 3.3В, а стабилизатор выдаёт на выходе столько же, сколько получает на входе.
Питание модуля осуществляется через встроенный стабилизатор на плату и входное напряжение не может быть ниже 5 в. Каким образом модуль работает от 3.3 в ? Если предполагается питание модуля от 3.3 в, то это не HW-125 , приведенный на картинке. При размещении какой либо информации тщательно следите за ее содержимым.
И приведенная в таблице распиновка никак не соответствует указанному на “Для подключения к плате будем использовать этот адаптер:”
Читайте спецификацию на установленный на плате чип AMS1117-3.3 Входное напряжение должно быть в пределах 4.75V – 12V
Модуль чтения / записи micro SD карт памяти SPI в ссылке указан как TF 5v, а на фото по факту мини на 3.3v…
Добрый день!
Спасибо за ваш комментарий! Мы проверили и исправили описание, однако, стоит отметить, что принцип работы модуля остается все тем-же, вне зависимости от того, работает ли он при напряжении 5В или 3.3В.
можно юзать esp8266?