Controle de LEDs por Wi-Fi com o ESP8266

Como um microcontrolador de poucos reais pode virar um servidor web completo — e responder a cliques de um navegador em qualquer celular da mesma rede.

Imagine acender uma lâmpada, ligar uma bomba d’água ou destravar um portão só abrindo uma página no navegador do celular — sem aplicativo, sem nuvem, sem servidor externo. É exatamente isso que o código deste artigo faz, numa versão didática com dois LEDs: um vermelho e um verde, cada um com seu próprio botão de ligar e desligar numa página HTML servida pelo próprio ESP8266.

O que você vai precisar

• Placa ESP8266 (modelo WEMOS D1 R1 ou equivalente) com Wi-Fi integrado
• 1 LED vermelho e 1 LED verde, cada um com resistor (220–330Ω)
• Protoboard e jumpers para a montagem
• Cabo USB para gravar o código e alimentar a placa
• Arduino IDE com o suporte de placas ESP8266 instalado
• Uma rede Wi-Fi 2.4GHz para conectar a placa (o ESP8266 não se conecta em redes 5GHz)

Como um microcontrolador vira um “site”

Todo site que você acessa funciona no modelo cliente-servidor: o navegador (cliente) envia uma requisição HTTP pedindo alguma coisa, e um servidor responde com uma página. Normalmente esse servidor é um computador potente numa empresa de hospedagem — mas o protocolo HTTP é simples o suficiente para caber dentro de um microcontrolador de poucos centavos de processamento.

É isso que a biblioteca ESP8266WiFi.h faz: ela transforma o ESP8266 em um servidor que escuta a porta 80 (a porta padrão do HTTP) e espera alguém bater à porta. Quando um cliente se conecta, o código lê a primeira linha da requisição — algo como GET /vermelho/ligar HTTP/1.1 — e decide o que fazer a partir do caminho pedido (/vermelho/ligar).

Cada botão da página é, na prática, um link para um caminho diferente (/vermelho/ligar, /verde/desligar…). O ESP8266 não entende “botões” — ele só entende qual endereço foi pedido, e decide o que ligar ou desligar a partir disso.

Entendendo o código passo a passo

1 Configuração inicial (setup)

A placa define os pinos dos LEDs como saída, inicia a comunicação serial (para acompanhar tudo pelo Monitor Serial da Arduino IDE) e tenta se conectar à rede Wi-Fi informada em ssid e senha. O while que aparece logo depois do WiFi.begin() é o que faz a placa “esperar” a conexão ser concluída antes de seguir em frente.

2 Descobrindo o endereço da placa

Assim que conecta, o código imprime o IP local (WiFi.localIP()) no Monitor Serial. Esse número — algo como 192.168.0.42 — é o endereço que você vai digitar no navegador do celular ou computador para abrir a página de controle. Ele muda conforme a rede, então sempre confira o valor impresso após ligar a placa.

3 Esperando um cliente (loop)

servidor.available() fica checando, a cada volta do loop(), se algum dispositivo se conectou à porta 80. Enquanto ninguém acessa, a função simplesmente retorna e tenta de novo — é assim que o ESP8266 “escuta” continuamente sem travar.

4 Lendo o pedido e roteando a ação

Quando um cliente aparece, o código lê a primeira linha da requisição com readStringUntil('\r') e usa indexOf() para verificar se o texto contém um dos quatro caminhos possíveis: ligar ou desligar o LED vermelho, ligar ou desligar o LED verde. Essa cadeia de if / else if é o “roteador” do servidor — o mesmo princípio usado (de forma muito mais sofisticada) por frameworks web profissionais.

5 Respondendo com uma página HTML

Depois de decidir o que ligar ou desligar, a placa monta e envia de volta um cabeçalho HTTP (200 OK) seguido de HTML puro, linha por linha, com cliente.println(). É a mesma página sempre — com os quatro botões — só que os LEDs já estarão no novo estado quando a página recarregar.

Código completo para copiar

Copie o código abaixo para a Arduino IDE, ajuste ssid e senha para a sua rede, selecione a placa ESP8266 correta e grave.

#include <ESP8266WiFi.h> //Biblioteca para funções do WiFi

//---Configurações da rede WiFi e dos Leds ---
const char* ssid = "NomeDaRede"; //Ative o roteador do seu celular para saber o nome
const char* senha = "SenhaDaRede"; // senha da sua rede roteada

const int pinoLedVermelho = 5; // conectar o led vermelho no conector D1 do ESP
const int pinoLedVerde = 4; //conectar o led verde no conector D2 do ESP

//Agora vamos criar o "servidor". Ele será o responsável por
// "receber" os comandos enviados na porta 80, que é a porta padrão
//para comunicação HTTP
WiFiServer servidor(80);

//Função Setup: configuração inicial do ESP

void setup() {
  Serial.begin(115200); //inicia a comunicação serial com o ESP8266

  //Configura os pinos dos Leds como saída e os inicializa apagados
  pinMode(pinoLedVermelho, OUTPUT); 
  pinMode(pinoLedVerde, OUTPUT); 
  digitalWrite(pinoLedVermelho, LOW);
  digitalWrite(pinoLedVerde, LOW);

  //Conecta a rede WiFi e exibe o IP no Monitor Serial
  Serial.print("Conectando-se a rede: ");// Escreve a mensagem Conectando-se a rede
  Serial.print(ssid);// Exibe o nome da rede
  WiFi.begin(ssid, senha); //envia o nome da rede e  a senha

while (WiFi.status() != WL_CONNECTED){ // Verifica se o ESP se conectou a rede
  delay(500); //aguarda 5 segundos para fazer uma nova verificação de conexão
  Serial.print("."); //exibe pontinhos enuqanto o ESP não se conecta a rede
}
Serial.println("\n WiFi conectado com sucesso!"); //pula uma linha e exibe a mensagem de sucesso
Serial.print("Servidor disponível em: http://");
Serial.println(WiFi.localIP()); //exibe o numero IP do Servidor

servidor.begin(); //inicia o servidor web, agora ele está pronto para receber os comandos
}
// Função Loop: executada repetidamente após o setup
void loop() {
  // Verifica se algum cliente se conectou ao servidor
  WiFiClient cliente = servidor.available(); //fica aguardando (escutando) se chegou algum cliente
if (!cliente){ //se não existir cliente
  return;// encerra a execução do loop e começa novamente
}
Serial.println("Novo Cliente conectado");
//aguarda até que o cliente envie uma informação
while (!cliente.available()) {
  delay(1);
}
// Lê a primeira linha da requisição
String requisicao = cliente.readStringUntil('\r');//Lê a requisição somente da primeira linha
Serial.print("Requisição: ");
Serial.println(requisicao);
cliente.flush();//apaga as informações desnecessárias

// Abaixo temos a lógica de funcionamento (roteamento) das requisições
//contém os caminhos que definem cada ação
if (requisicao.indexOf("/vermelho/ligar") !=-1) {//se o texto "/vermelho/ligar" for encontrado
  digitalWrite(pinoLedVermelho, HIGH);//ligar o led vermelho que está na saída pinoLedVermelho
} else if (requisicao.indexOf("/vermelho/desligar") !=-1){//se o texto "/vermelho/desligar" for encontrado
  digitalWrite(pinoLedVermelho, LOW);//desligar (LOW) o led vermelho
} else if (requisicao.indexOf("/verde/ligar") !=-1){
  digitalWrite(pinoLedVerde, HIGH);
  } else if (requisicao.indexOf("/verde/desligar") !=-1){
  digitalWrite(pinoLedVerde, LOW);
  }
// --- O código HTML página do cliente ---
cliente.println("HTTP/1.1 200 OK");
cliente.println("Content-Type: text/html");
cliente.println("");
//---Corpo do código HTML---
cliente.println("<!DOCTYPE html><head><title>IoT - Controle de Leds</title>");
cliente.println("<meta name='viewport' content='width=device-width, initial-scale=1'>");
cliente.println("</head><body>");
cliente.println("<h1>IoT - Controle de Leds via Wi-Fi</h1>");
cliente.println("<h2>Led Vermelho</h2>");
cliente.println("<a href='/vermelho/ligar'><button>Ligar</button></a>");
cliente.println("<a href='/vermelho/desligar'><button>Desligar</button></a>");
cliente.println("<h2>Led Verde</h2>");
cliente.println("<a href='/verde/ligar'><button>Ligar</button></a>");
cliente.println("<a href='/verde/desligar'><button>Desligar</button></a>");
cliente.println("</body></html>");

delay(1);
Serial.println("Página enviada");
Serial.println("");
}

Para ir além: desafios de extensão

Depois que os dois LEDs estiverem funcionando, algumas evoluções interessantes para testar:

Página com CSS

Estilizar o HTML enviado pelo cliente.println() para que os botões mudem de cor conforme o LED correspondente está ligado ou desligado.

Vale lembrar: esse modelo aceita apenas uma conexão por vez e não tem nenhuma autenticação — qualquer pessoa na mesma rede Wi-Fi consegue acessar os botões. Para um projeto real, essas são as duas primeiras limitações a resolver.

Artigo de Washington Paiva — washington.pro.br