Automação com ESP8266 utilizando relés

Hoje nós vamos programar o ESP8266 com a IDE do Arduino. Vamos montar um servidor para ligar e desligar qualquer dispositivo. Neste caso aqui usamos um circuito com dois relés. Nesse circuito, a gente vai utilizar o ESP8266 com a Wifi. Também usamos os conectores dos GPIO, e vamos mostrar, especificamente, o ESP01.

Montagem

O circuito que montamos é bem simples e resulta em uma montagem bem compacta. Usamos uma placa de poliestireno atrás pra deixar tudo agregado, podendo caber até dentro de uma caixa de energia, evitando a exposição da montagem, já que esta poderá ser utilizada para controlar diversos aparelhos de uma residência, por exemplo, como o ar-condicionado, lâmpadas, entre outros.

Então, colocamos uma fonte chaveada, onde eu transformo 110 ou 220 volts para 5 volts. Temos ainda um regulador de tensão 3v3, o AM1117. Pegamos duas GPIO e liguei na entrada da placa de relé. Lembrando que no ESP8266 temos que tomar algumas precauções, como aterrar os pinos dele.

ESP8266 na IDE do Arduino

É importante recordar que, quando você vai programar o ESP8266, é preciso carregar as bibliotecas deste dispositivo dentro do Arduino. 
Para isso você deve estar com a IDE na versão 1.6.4. Agora vá nas preferências e em “URLS Adicionais para Gerenciadores de Placas” adicione a url: http://arduino.esp8266.com/stable/package_esp8266com_index.json.

Depois vá em Ferramentas>Placa>Gerenciador de Placas...

Na busca digite esp8266 e instale o pacote “esp8266 by ESP8266 Community”

Agora você já pode selecionar o seu ESP8266 na lista de placas

Nesta montagem de hoje, o ESP866 vai ser um servidor. Você vai, portanto, pegar seu smartphone e vai conectar no IP do dispositivo, ou seja, você entra lá e ele vai servir uma página para você

No vídeo é possível ver uma demonstração de como vai funcionar tudo isso. Confira:

Código fonte

O primeiro passo é incluir a lib que nos permite controlar o WiFi do ESP8266. Depois disso criamos uma variável que vai guardar uma referência ao nosso servidor que rodará na porta 80. O motivo de escolhermos a porta 80 é que essa é a porta padrão para o protocolo http e utilizaremos um navegador para nos conectarmos com o módulo.

 //Inclui as funções de Wifi do ESP
 #include <ESP8266WiFi.h>

 //Cria um server na porta 80 (porta
 //padrão para onde os navegadores 
 //enviam as requisições http)
 WiFiServer server(80);

Setup

No setup vamos inicializar o Serial apenas para que tenhamos um log utilizando o monitor serial.

Iremos utilizar o GPIO0 e o GPIO2 como OUTPUT e inicializaremos o estado inicial com LOW.

void setup()
{
  //Inicializa a Serial apenas para efeito de log
  Serial.begin(115200);
 
  //Configura o GPIO0 e GPIO2 como output, ou seja, como 
  //saída para podermos alterar o seu valor
  pinMode(0, OUTPUT);
  pinMode(2, OUTPUT);

  //Deixa o GPIO0 e o GPIO2 com saída LOW
  digitalWrite(0, LOW);
  digitalWrite(2, LOW);

Agora chamamos WiFi.begin(“ssid”, “senha”) para conectar o ESP8266 ao roteador. No exemplo temos o ssid “TesteESP” e a senha “87654321”, mas você deve substituir pela rede que irá utilizar.

 Serial.print("Conectando");
 //Faz o ESP se conectar à rede WiFi. No nosso exemplo o ssid 
 //da rede é TesteESP e a senha é 87654321
 WiFi.begin("TesteESP", "87654321");

Verificamos a cada 100 milissegundos para ver se o ESP8266 se conectou à rede (ele retorna status WL_CONNECTED quando está conectado).

Quando sair do “while” significa que conectou.

//Enquanto o ESP não se conectar à rede
 while (WiFi.status() != WL_CONNECTED)
 {
   //Esperamos 100 milisegundos
   delay(100);
   Serial.print(".");
 }
 
 //Se chegou aqui é porque conectou à rede, então mostramos 
 //no monitor serial para termos um feedback
 Serial.println("");
 Serial.println("Conectou");

Aqui é onde colocamos as configurações da rede. As configurações de IP, gateway e máscara devem ser alteradas conforme a sua rede.

//Configurações do IP fixo. Você pode alterar 
 //conforme a sua rede
 IPAddress ip(192, 168, 2, 8);
 IPAddress gateway(192, 168, 2, 1);
 IPAddress subnet(255, 255, 255, 0);
 Serial.print("Configurando IP fixo para : ");
 Serial.println(ip);
 //Envia a configuração
 WiFi.config(ip, gateway, subnet);

Agora podemos inicializar o server e mostrar no monitor serial se o IP que está vinculado ao ESP8266 é o mesmo que configuramos. Com isso finalizamos o setup.

//Inicializa o server que criamos na porta 80
 server.begin();
 
 //Mostramos no monitor serial o IP que o ESP possui para verificarmos se 
 //é o mesmo que configuramos
 Serial.print("Server em: ");
 Serial.println(WiFi.localIP());
}

Loop

No loop principal do programa verificamos se algum cliente está tentando se conectar e caso esteja esperamos até que ele nos retorne sua requisição.

void loop()
{
  //Verifica se algum cliente está tentando se conectar
  WiFiClient client = server.available();
  if (!client)
  {
    //Se não houver nenhum cliente podemos retornar pois não há nada a fazer
    return;
  }

  Serial.println("Novo cliente conectou");
  //Esperamos até que o cliente nos envie a requisição
  while (!client.available())
  {
    delay(100);
  }

Guardamos a requisição na variável “req” para mais tarde sabermos qual a ação que o cliente quer que seja executada.

  //Fazemos a leitura da requisição
  String req = client.readStringUntil('\r');
  Serial.print("Requisição: ");
  Serial.println(req);

A seguir construimos o html que irá ser enviado para o cliente para que ele monte a interface

//Este é o html que iremos retornar para o cliente
  //É composto basicamente de dois botões (ON e OFF) para o GPIO0 e dois botões (ON e OFF) para o GPIO2
  //A parte que nos interessa é o <a href=' com a ação vinculada a cada botão
  //Quando clicamos em um destes botões essa informação chegará até o ESP para que ele verifique qual ação deve executar
  //A parte dentro de '<style>' é apenas para modificarmos o visual da página que será exibida, você pode alterá-la como queira
  String html = 
  "<html>"
    "<head>"
      "<meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'/>"
      "<title>ESP8266</title>"
      "<style>"
        "body{"
          "text-align: center;"
          "font-family: sans-serif;"
          "font-size:14px;"
          "padding: 25px;"
        "}"

        "p{"
          "color:#444;"
        "}"

A parte mais importante do html serão os “href” que marcarão as ações que aparacerão no cliente. A parte que está em “style” é apenas para mudar a aparência da interface e você pode alterar como queira

"button{"
          "outline: none;"
          "border: 2px solid #1fa3ec;"
          "border-radius:18px;"
          "background-color:#FFF;"
          "color: #1fa3ec;"
          "padding: 10px 50px;"
        "}"
 
        "button:active{"
          "color: #fff;"
          "background-color:#1fa3ec;"
        "}"
      "</style>"
    "</head>"
    "<body>"
    "<p>GPIO0</p>"
    "<p><a href='?acao=gpio0On'><button>ON</button></a></p>"
    "<p><a href='?acao=gpio0Off'><button>OFF</button></a></p>"
    "<p>GPIO2</p>"
    "<p><a href='?acao=gpio2On'><button>ON</button></a></p>"
    "<p><a href='?acao=gpio2Off'><button>OFF</button></a></p>"
    "</body>"
  "</html>";

Agora escrevemos no buffer que será enviado para o cliente e enviamos

 //Escreve o html no buffer que será enviado para o cliente
 client.print(html);
 
 //Envia os dados do buffer para o cliente
 client.flush(); 

Verificamos se o cliente enviou alguma ação na requisição e qual o GPIO e o estado (On ou Off) e chamamos o digitalWrite correspondente

//Verifica se a requisição possui a ação gpio0On
if (req.indexOf("acao=gpio0On") != -1)
{
      //Se possui a ação gpio0On colocamos a saída do GPIO0 como alta
      digitalWrite(0, HIGH);
}
//Senão, verifica se a requisição possui a ação gpio0Off
else if (req.indexOf("acao=gpio0Off") != -1)
{
    //Se possui a ação gpio0Off colocamos a saída do GPIO0 como baixa
    digitalWrite(0, LOW);
}
//Senão, verifica se a requisição possui a ação gpio2On
else if (req.indexOf("acao=gpio2On") != -1)
{
    //Se possui a ação gpio2On colocamos a saída do GPIO2 como alta
    digitalWrite(2, HIGH);
}
//Senão, verifica se a requisição possui a ação gpio2Off
else if (req.indexOf("acao=gpio2Off") != -1)
{
    //Se possui a ação gpio0Off colocamos a saída do GPIO2 como baixa
    digitalWrite(2, LOW);

Por último fechamos a conexão com o cliente. Com isso finalizamos o loop e o código

   //Fecha a conexão com o cliente
   client.stop();
   Serial.println("Cliente desconectado");
} 

Testando

Para testar basta abrir o navegador e digitar o ip que aparecerá no monitor serial. Clique nas ações e veja se o GPIO correspondente está mudando.

Depois de acompanhar o passo a passo, você pode baixar os arquivos:

PDF

INO