ESP32 - Servidor Web em Cartão MicroSD
Neste tutorial, vamos descobrir como criar um servidor web no ESP32 hospedado em um Cartão MicroSD. Os arquivos HTML, CSS, JavaScript e de imagem ficarão armazenados no Cartão MicroSD.
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables ESP32 S3 Starter Kit (ESP32 S3 included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgação: Alguns dos links desta seção são links de afiliado da Amazon. Podemos receber uma comissão pelas compras feitas por meio desses links, sem custo adicional para você. Agradecemos o seu apoio.
Sobre o ESP32, o Servidor Web e o Cartão MicroSD
Se você não está familiarizado com o ESP32, o Servidor Web e o Cartão MicroSD (incluindo pinagem, como funciona e programação), pode aprender sobre eles nos tutoriais a seguir:
Diagrama de Ligação
This image is created using Fritzing. Click to enlarge image
Se você não sabe como alimentar o ESP32 e outros componentes, veja as instruções no tutorial a seguir: Como alimentar o ESP32.
Copiar o conteúdo HTML para o Cartão MicroSD
- Certifique-se de que o seu Cartão Micro SD está formatado no formato FAT32, como abaixo (no Windows, clique com o botão direito do mouse → formatar):
- Crie um arquivo HTML index.html e adicione o seguinte código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESP32 Web Page</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Web Page hosted on MicroSD Card</h1>
<img src="luffy.jpg" alt="A beautiful image">
<p>Sponsored by <a href="https://amazon.com/diyables">DIYables</a></p>
</div>
</body>
</html>
- Crie um arquivo CSS styles.css e adicione o seguinte código:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: white;
}
h1 {
font-size: 28px;
}
.container {
max-width: 800px;
margin: 20px auto;
text-align: center;
}
img {
max-width: 80%;
height: auto;
display: block;
margin: 20px auto;
}
- Prepare uma imagem. Este tutorial usa luffy.jpg, que é usada no código HTML. Você pode baixar esta imagem aqui:
- (Opcional) Prepare uma imagem de favicon. Este tutorial usa este favicon.ico
- Coloque todos os arquivos no diretório raiz do Cartão MicroSD, como nas imagens abaixo:
Observe que você pode adicionar outros arquivos, como JavaScript, txt, csv...
Código ESP32 - Servidor Web em Cartão MicroSD
/*
* Este código de ESP32 foi desenvolvido por pt.newbiely.com
* Este código de ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp32/esp32-web-server-on-sd-card
*/
#include <FS.h>
#include <SD.h>
#define PIN_SPI_CS 5 // The ESP32 pin GPIO5
// Replace with your network credentials
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
void setup() {
Serial.begin(9600);
// Print the ESP32's IP address
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// init MicroSD Card
if (!SD.begin(PIN_SPI_CS)) {
while (1) {
Serial.println(F("SD CARD FAILED, OR NOT PRESENT!"));
delay(1000);
}
}
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
request->send(SD, "/index.html", "text/html");
});
server.serveStatic("/", SD, "/");
server.begin();
}
=================
#include <DIYables_ESP32_WebServer.h>
#include "index.h"
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HOME_PAGE);
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Passos Rápidos
- Se esta é a primeira vez que você usa o ESP32, veja como configurar o ambiente para ESP32 no Arduino IDE.
- Conecte a placa ESP32 ao seu PC por um cabo micro USB
- Abra o Arduino IDE no seu PC.
- Selecione a placa ESP32 correta (por exemplo, ESP32 Dev Module) e a porta COM.
- Abra o Library Manager clicando no ícone Library Manager na barra de navegação à esquerda do Arduino IDE.
- Pesquise por “DIYables ESP32 WebServer” e encontre a biblioteca Web Server criada pela DIYables.
- Clique no botão Install para instalar a biblioteca Web Server.
- Copie o código acima e abra no Arduino IDE
- Altere as informações de WiFi (SSID e senha) no código para as suas
- Clique no botão Upload no Arduino IDE para fazer o upload do código para o ESP32
- Abra o Serial Monitor
- Veja o resultado no Serial Monitor.
8
Serial.println("Hello World!");
Message (Enter to send message to 'ESP32 Dev Module' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.3
- Você verá um endereço IP no Serial Monitor, por exemplo: 192.168.0.3
- Digite o endereço IP na barra de endereços de um navegador no seu celular ou PC.
- Observe que você precisa trocar 192.168.0.3 pelo endereço IP que você obteve no Serial Monitor.
- Você verá uma página que carrega HTML, CSS e imagens do Cartão SD
- Como você pode ver, o HTML, o CSS e as imagens armazenados no Cartão SD foram carregados pelo navegador.
Agora você pode modificar o código HTML e CSS, adicionar mais imagens e JavaScript para criar a sua própria página web.