ESP32 - Controla Relé pela Web
Neste tutorial, vamos aprender a controlar um relé por meio de uma interface web, usando um navegador no PC ou no celular, com o ESP32. Em detalhes, o ESP32 será programado para funcionar como um servidor web. Vamos supor que o endereço IP do ESP32 seja 192.168.0.2. Veja como funciona:
- Quando você digita 192.168.0.2 no navegador, o navegador envia uma requisição ao ESP32, e o ESP32 responde com uma página web que contém o botão de ligar/desligar para controlar o relé.
- Da mesma forma, quando você clica no botão "Turn ON" da página web ou digita 192.168.0.2/relay1/on no navegador, o ESP32 liga o relé e responde com a página web de controle.
- Do mesmo modo, quando você clica no botão "Turn OFF" da página web ou digita 192.168.0.2/relay1/off no navegador, o ESP32 desliga o relé e responde com a página web de controle.
Vamos aprender com dois exemplos de código:
- O conteúdo HTML é embutido no código do ESP32
- O conteúdo HTML é separado do código do ESP32 e colocado em um arquivo .h
O tutorial oferece os fundamentos que você pode personalizar com facilidade e criatividade para realizar o seguinte:
- Controlar vários relés pela web
- Redesenhar a interface de usuário (UI) web
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 relé e o ESP32
Se você não conhece o relé e o ESP32 (pinagem, como funcionam, como programar ...), aprenda sobre eles nos tutoriais a seguir:
Diagrama de Ligação
- Como conectar o ESP32 e o relé usando uma protoboard (alimentado pelo cabo USB)
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.
- Como conectar o ESP32 e o relé usando uma protoboard (alimentado pelo pino Vin)
This image is created using Fritzing. Click to enlarge image
- Como conectar o ESP32 e o relé usando uma placa breakout com bornes de parafuso (alimentado pelo cabo USB)
- Como conectar o ESP32 e o relé usando uma placa breakout com bornes de parafuso (alimentado pelo pino Vin)
Código ESP32 - O conteúdo HTML é embutido no código do ESP32
/*
* 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-controls-relay-via-web
*/
#include <DIYables_ESP32_WebServer.h>
#define RELAY_PIN 16 // ESP32 pin GPIO16 connected to Relay
int relay_state = LOW;
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
String getHTML() {
String html = "<!DOCTYPE HTML>";
html += "<html>";
html += "<head>";
html += "<link rel='icon' href='data:,'>";
html += "</head>";
html += "<p>Relay state: <span style='color: red;'>";
if (relay_state == LOW)
html += "OFF";
else
html += "ON";
html += "</span></p>";
html += "<a href='/relay1/on'>Turn ON</a>";
html += "<br><br>";
html += "<a href='/relay1/off'>Turn OFF</a>";
html += "</html>";
return html;
}
// home page
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received");
server.sendResponse(client, getHTML().c_str());
}
// Route to control the Relay
void handleRelayOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received");
relay_state = HIGH;
digitalWrite(RELAY_PIN, relay_state);
server.sendResponse(client, getHTML().c_str());
}
void handleRelayOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received");
relay_state = LOW;
digitalWrite(RELAY_PIN, relay_state);
server.sendResponse(client, getHTML().c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
server.addRoute("/relay1/on", handleRelayOn);
server.addRoute("/relay1/off", handleRelayOff);
// 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 do ESP32 no Arduino IDE.
- Faça a ligação como na imagem acima.
- Conecte a placa ESP32 ao seu PC com 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 “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 do Arduino IDE para fazer 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.2
- Você verá um endereço IP, por exemplo: 192.168.0.2. Este é o endereço IP do servidor web do ESP32
- Abra um navegador e digite um dos três formatos abaixo na barra de endereços:
192.168.0.2
192.168.0.2/relay1/on
192.168.0.2/relay1/off
- Lembre-se de que o endereço IP pode ser diferente. Verifique o valor atual no Serial Monitor.
- Você também verá a saída abaixo 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.2
ESP32 Web Server: New request recieved:
GET /
ESP32 Web Server: New request recieved:
GET /relay1/on
ESP32 Web Server: New request recieved:
GET /relay1/off
- Verifique o estado do relé
- Você verá a página web da placa ESP32 no navegador, como abaixo
- Agora você já consegue ligar e desligar o relé pela interface web
Código ESP32 - O conteúdo HTML é separado do código do ESP32
Como uma página web gráfica contém muito conteúdo HTML, embuti-lo no código do ESP32 como antes fica pouco prático. Para resolver isso, precisamos separar o código do ESP32 e o código HTML em arquivos diferentes:
- O código do ESP32 ficará em um arquivo .ino.
- O código HTML (incluindo HTML, CSS e Javascript) ficará em um arquivo .h.
Passos Rápidos
- Abra o Arduino IDE e crie um novo sketch. Dê um nome a ele, por exemplo, newbiely.com.ino
- Copie o código abaixo e abra no Arduino IDE
/*
* 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-controls-relay-via-web
*/
#include <DIYables_ESP32_WebServer.h>
#include "index.h" // Include the index.h file
#define RELAY_PIN 16 // ESP32 pin GPIO16 connected to Relay
int relay_state = LOW;
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
String getHTML() {
String html = webpage; // Use the HTML content from the index.h file
html.replace("%RELAY_STATE%", relay_state ? "ON" : "OFF"); // update the relay state
return html;
}
// home page
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received");
server.sendResponse(client, getHTML().c_str());
}
// Route to control the Relay
void handleRelayOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received");
relay_state = HIGH;
digitalWrite(RELAY_PIN, relay_state);
server.sendResponse(client, getHTML().c_str());
}
void handleRelayOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received");
relay_state = LOW;
digitalWrite(RELAY_PIN, relay_state);
server.sendResponse(client, getHTML().c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
server.addRoute("/relay1/on", handleRelayOn);
server.addRoute("/relay1/off", handleRelayOff);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
- Altere as informações de WiFi (SSID e senha) no código para as suas
- Crie o arquivo index.h no Arduino IDE assim:
- Clique no botão logo abaixo do ícone do Serial Monitor e escolha New Tab, ou use as teclas Ctrl+Shift+N.
- Dê ao arquivo o nome index.h e clique no botão OK
- Copie o código abaixo e cole no index.h.
- Agora você tem o código em dois arquivos: newbiely.com.ino e index.h
- Clique no botão Upload do Arduino IDE para fazer upload do código para o ESP32
- Acesse a página web da placa ESP32 pelo navegador no seu PC ou celular, como antes. Ela ficará parecida com a do código anterior, como abaixo:
- Se você modificar o conteúdo HTML no index.h e não mexer em nada no arquivo newbiely.com.ino, ao compilar e fazer upload do código para o ESP32, o Arduino IDE não vai atualizar o conteúdo HTML.
- Para fazer o Arduino IDE atualizar o conteúdo HTML nesse caso, faça uma alteração no arquivo newbiely.com.ino (por exemplo, adicione uma linha vazia ou um comentário....)
- Controlar vários relés pela web
- Redesenhar a interface de usuário (UI) web
/*
* 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-controls-relay-via-web
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE HTML>
<html>
<head>
<link rel='icon' href='data:,'>
</head>
<p>Relay state: <span style='color: red;'>%RELAY_STATE%</span></p>
<a href='/relay1/on'>Turn ON</a>
<br><br>
<a href='/relay1/off'>Turn OFF</a>
</html>
)=====";
#endif
※ Nota:
Você pode personalizar o código acima com facilidade e criatividade para realizar o seguinte: