Interação com GPIOs via Interface Web no ESP32

Marcelo V. Souza 1s 259ms

O ESP32 é um microcontrolador altamente versátil, conhecido por suas capacidades de conectividade Wi-Fi e Bluetooth integradas. Uma das aplicações mais interessantes é a possibilidade de controlar os pinos GPIO (General Purpose Input/Output) através de uma interface web. Isso permite que dispositivos físicos sejam controlados remotamente, abrindo um mundo de possibilidades em automação residencial, projetos educacionais e aplicações industriais.

Neste artigo, exploraremos em profundidade como interagir com os GPIOs do ESP32 utilizando uma interface web. Abordaremos desde os conceitos básicos até a implementação prática de um servidor web capaz de ler e alterar estados de pinos em tempo real.

Introdução aos GPIOs do ESP32🔗

Antes de mergulharmos na interação web, é fundamental entender o que são GPIOs e como o ESP32 os utiliza.

O que são GPIOs?

GPIOs são pinos em um microcontrolador que podem ser configurados para atuar como entrada ou saída. Como entrada, eles podem ler sinais de sensores ou botões. Como saída, podem controlar LEDs, motores, relés e outros dispositivos.

Características dos GPIOs no ESP32

O ESP32 possui uma vasta gama de pinos GPIO, muitos dos quais têm funções adicionais, como comunicação serial, I2C, SPI, entre outros. Algumas características importantes:

Tolerância a 3.3V: Os GPIOs operam em 3.3V. Aplicar tensões superiores pode danificar o dispositivo.
Capacidade de Corrente: Cada pino pode fornecer ou consumir uma corrente limitada. É essencial considerar isso ao controlar dispositivos externos.
Funções Especiais: Alguns pinos têm funções especiais durante a inicialização ou reset. É recomendável consultar a documentação oficial para evitar conflitos.

Configurando o Ambiente de Desenvolvimento🔗

Para controlar os GPIOs via web, precisamos configurar nosso ambiente de desenvolvimento.

Ferramentas Necessárias

ESP32: Uma placa de desenvolvimento, como o ESP32 DevKit.
Cabo USB: Para programação e alimentação.
IDE Arduino: Uma plataforma amigável para programação do ESP32.

Instalando o Suporte ao ESP32 na IDE Arduino

1. Abra a IDE Arduino.

2. Vá em Arquivo > Preferências.

3. No campo URLs Adicionais para Gerenciadores de Placas, adicione:

https://dl.espressif.com/dl/package_esp32_index.json

4. Clique em OK.

5. Vá em Ferramentas > Placas > Gerenciador de Placas.

6. Procure por ESP32 e instale o pacote fornecido pela Espressif Systems.

Selecionando a Placa e a Porta

Após a instalação:

1. Em Ferramentas > Placa, selecione ESP32 Dev Module (ou a que corresponda ao seu hardware).

2. Em Ferramentas > Porta, selecione a porta serial à qual o ESP32 está conectado.

Criando um Servidor Web no ESP32🔗

Para interagir com os GPIOs via web, o ESP32 atuará como um servidor que responde a solicitações HTTP.

Configurando o Wi-Fi

Primeiramente, precisamos conectar o ESP32 à rede Wi-Fi.

#include <WiFi.h>
const char* ssid = "SEU_SSID";
const char* password = "SUA_SENHA";
void setup()
{
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(500);
    Serial.println("Conectando ao Wi-Fi...");
  }
  Serial.println("Conectado!");
  Serial.print("Endereço IP: ");
  Serial.println(WiFi.localIP());
}
void loop()
{
  // Código principal
}

Criando o Servidor Web

Usaremos a biblioteca WebServer para facilitar a criação das rotas.

#include <WebServer.h>
WebServer server(80);
void setup()
{
  // Código anterior de configuração do Wi-Fi
  // Definindo rotas
  server.on("/", handleRoot);
  // Iniciando servidor
  server.begin();
  Serial.println("Servidor HTTP iniciado");
}
void loop()
{
  server.handleClient();
}

Definindo as Rotas

A função handleRoot responderá às solicitações na raiz do servidor.

void handleRoot()
{
  server.send(200, "text/plain", "Bem-vindo ao servidor ESP32!");
}

Interagindo com os GPIOs🔗

Agora, vamos adicionar a funcionalidade de ler e escrever nos GPIOs através da interface web.

Controlando um LED via Web

Suponha que temos um LED conectado ao pino 2 do ESP32.

Configurando o Pino

No setup(), definimos o pino como saída.

const int ledPin = 2;
void setup()
{
  // Configurações anteriores
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);
  // Rotas
  server.on("/", handleRoot);
  server.on("/led_on", handleLedOn);
  server.on("/led_off", handleLedOff);
  // Iniciar servidor
  server.begin();
}

Implementando as Funções de Controle

void handleLedOn()
{
  digitalWrite(ledPin, HIGH);
  server.send(200, "text/plain", "LED ligado");
}
void handleLedOff()
{
  digitalWrite(ledPin, LOW);
  server.send(200, "text/plain", "LED desligado");
}

Criando uma Interface Web Simples

Em vez de retornar texto simples, podemos servir uma página HTML.

Servindo Página HTML

void handleRoot()
{
  String html = "<!DOCTYPE html><html>";
  html += "<head><meta charset='utf-8'><title>Controle de LED</title></head>";
  html += "<body>";
  html += "<h1>Controle de LED via Web</h1>";
  html += "<p><a href='/led_on'>Ligar LED</a></p>";
  html += "<p><a href='/led_off'>Desligar LED</a></p>";
  html += "</body></html>";
  server.send(200, "text/html", html);
}

Leitura de Estado dos GPIOs🔗

Além de controlar saídas, podemos ler entradas digitais.

Configurando um Botão de Entrada

Suponha que temos um botão conectado ao pino 4.

Configurando o Pino

No setup():

const int buttonPin = 4;
void setup()
{
  // Configurações anteriores
  pinMode(buttonPin, INPUT_PULLUP);
  // Rotas
  server.on("/", handleRoot);
  server.on("/led_on", handleLedOn);
  server.on("/led_off", handleLedOff);
  server.on("/button_state", handleButtonState);
  // Iniciar servidor
  server.begin();
}

Implementando a Função de Leitura

void handleButtonState()
{
  int state = digitalRead(buttonPin);
  String message = "Estado do botão: ";
  message += (state == HIGH) ? "Liberado" : "Pressionado";
  server.send(200, "text/plain", message);
}

Atualizando a Interface Web

void handleRoot()
{
  String html = "<!DOCTYPE html><html>";
  html += "<head><meta charset='utf-8'><title>Controle de LED</title></head>";
  html += "<body>";
  html += "<h1>Controle de LED via Web</h1>";
  html += "<p><a href='/led_on'>Ligar LED</a></p>";
  html += "<p><a href='/led_off'>Desligar LED</a></p>";
  html += "<p><a href='/button_state'>Estado do Botão</a></p>";
  html += "</body></html>";
  server.send(200, "text/html", html);
}

Implementando Interação em Tempo Real🔗

Para uma experiência mais dinâmica, podemos atualizar o estado dos GPIOs sem recarregar a página usando AJAX.

Utilizando JavaScript e AJAX

Atualize a função handleRoot():

void handleRoot()
{
  String html = "<!DOCTYPE html><html>";
  html += "<head><meta charset='utf-8'><title>Controle de LED</title></head>";
  html += "<body>";
  html += "<h1>Controle de LED via Web</h1>";
  html += "<p><button onclick='ligarLED()'>Ligar LED</button></p>";
  html += "<p><button onclick='desligarLED()'>Desligar LED</button></p>";
  html += "<p>Estado do Botão: <span id='estadoBotao'>Desconhecido</span></p>";
  html += "<script>";
  html += "function ligarLED() { fetch('/led_on'); }";
  html += "function desligarLED() { fetch('/led_off'); }";
  html += "setInterval(() => { fetch('/button_state').then(response => response.text()).then(data => { document.getElementById('estadoBotao').innerHTML = data.split(': ')[1]; }); }, 1000);";
  html += "</script>";
  html += "</body></html>";
  server.send(200, "text/html", html);
}

Explicação do Código

Fetch API: Usamos o fetch() para enviar requisições assíncronas ao servidor.
Atualização Periódica: A função setInterval() executa a cada segundo, atualizando o estado do botão.

Segurança Básica🔗

Embora este exemplo seja funcional, é importante considerar aspectos de segurança.

Restrição de Acesso

Podemos implementar uma autenticação simples para evitar acesso não autorizado.

Adicionando Autenticação

No setup():

const char* username = "admin";
const char* pass = "1234";

Nas funções de manipuladores:

void handleRoot()
{
  if (!server.authenticate(username, pass))
  {
    return server.requestAuthentication();
  }
  // Resto do código
}

Repita o padrão para as outras rotas.

Criptografia

Para projetos mais robustos, considere usar HTTPS. No entanto, isso está além do escopo deste artigo e requer configurações adicionais.

Utilizando CSS para Melhorar a Interface🔗

Podemos estilizar a página para torna-la mais amigável.

Adicionando Estilos

Atualize a função handleRoot():

void handleRoot()
{
  String html = "<!DOCTYPE html><html>";
  html += "<head><meta charset='utf-8'><title>Controle de LED</title>";
  html += "<style>";
  html += "body { font-family: Arial, sans-serif; text-align: center; }";
  html += "button { padding: 20px; font-size: 16px; margin: 10px; }";
  html += "</style></head>";
  html += "<body>";
  html += "<h1>Controle de LED via Web</h1>";
  html += "<button onclick='ligarLED()'>Ligar LED</button>";
  html += "<button onclick='desligarLED()'>Desligar LED</button>";
  html += "<p>Estado do Botão: <span id='estadoBotao'>Desconhecido</span></p>";
  html += "<script>";
  // Scripts como anteriormente
  html += "</script>";
  html += "</body></html>";
  server.send(200, "text/html", html);
}

Expandindo para Múltiplos GPIOs🔗

Podemos controlar múltiplos dispositivos adicionando mais pinos e rotas.

Exemplo com Múltiplos LEDs

Configurando os Pinos

const int ledPins[] = {2, 15, 4};
const int ledCount = 3;
void setup()
{
  // Configurações anteriores
  for (int i = 0; i < ledCount; i++)
  {
    pinMode(ledPins[i], OUTPUT);
    digitalWrite(ledPins[i], LOW);
  }
  // Rotas dinâmicas
  server.on("/", handleRoot);
  server.on("/led_on", handleLedOn);
  server.on("/led_off", handleLedOff);
  server.on("/toggle_led", handleToggleLed);
}

Implementando a Função de Alternância

void handleToggleLed()
{
  if (server.hasArg("id"))
  {
    int id = server.arg("id").toInt();
    if (id >= 0 && id < ledCount)
    {
      int state = digitalRead(ledPins[id]);
      digitalWrite(ledPins[id], !state);
      server.send(200, "text/plain", "LED " + String(id) + " alternado");
      return;
    }
  }
  server.send(400, "text/plain", "Parâmetro inválido");
}

Atualizando a Interface Web

void handleRoot()
{
  String html = "<!DOCTYPE html><html>";
  html += "<head><meta charset='utf-8'><title>Controle de LEDs</title>";
  html += "<style>";
  html += "body { font-family: Arial, sans-serif; text-align: center; }";
  html += "button { padding: 20px; font-size: 16px; margin: 10px; }";
  html += "</style></head>";
  html += "<body>";
  html += "<h1>Controle de LEDs via Web</h1>";
  for (int i = 0; i < ledCount; i++)
  {
    html += "<button onclick='toggleLED(" + String(i) + ")'>Alternar LED " + String(i) + "</button>";
  }
  html += "<script>";
  html += "function toggleLED(id) { fetch('/toggle_led?id=' + id); }";
  html += "</script>";
  html += "</body></html>";
  server.send(200, "text/html", html);
}

Considerações Finais🔗

Interagir com os GPIOs do ESP32 via interface web é uma maneira poderosa de controlar dispositivos físicos remotamente. Este artigo demonstrou como configurar um servidor web simples capaz de ler entradas e controlar saídas digitais. Com esses fundamentos, é possível expandir para projetos mais complexos, incluindo controles analógicos, comunicação com outros dispositivos e integração com serviços em nuvem.

Próximos Passos🔗

Implementar Feedback Visual: Atualizar a interface web para refletir o estado atual dos LEDs.
Adicionar Controle de PWM: Controlar a intensidade de LEDs usando saídas PWM.
Integrar Sensores Analógicos: Ler valores de sensores analógicos e exibi-los na interface web.
Melhorar a Segurança: Implementar autenticação e criptografia mais robustas.

Ao continuar explorando, você descobrirá que o ESP32 oferece um vasto leque de possibilidades, permitindo a criação de soluções inovadoras em IoT e automação.

Próximo Artigo

Controle de LEDs e Relés através do Web Server do ESP32

Aprenda a controlar dispositivos como LEDs e relés utilizando um servidor web com o ESP32. Descubra como configurar, programar e integrar conceitos de IoT em seus projetos.