Web Server com ESP8266 - Controlando Dispositivos Remotamente

Olá a Todos!

No post de hoje, criaremos um simples Servidor Web que irá hospedar uma página web e controlar remotamente qualquer dispositivo de qualquer lugar do mundo. 

Utilizaremos o módulo NodeMCU, que é nada menos que o ESP8266, com alguns recursos adicionais que facilita para programação via USB sem a necessidade de utilizar um conversor externo FTDI, facilitando a nossa montagem.

Você pode utilizar qualquer tipo de ESP8266, ESP32, Wemos, 12E, ESP01, qualquer um funcionará. Saiba mais sobre os módulos ESP e suas características no link abaixo.

• Conhecendo ESP8266, especificações e comparações com ESP32 e Arduino!

Iremos também utilizar a  IDE Arduíno para realizarmos a programação, e utilizaremos o ESP no modo AP — Access Point e o modo STA — Station.

Se você não instalou as bibliotecas na IDE Arduíno, você pode dar uma olhada no passo a passo que temos em nosso post, clicando no link abaixo.

• Instalando Biblioteca do Módulo ESP8266 na IDE Arduíno!

Descrição!

Com esse projeto, podermos controlar uma carga, como, por exemplo, motores, ventiladores, luz, Ar-condicionado, ou qualquer outro tipo de carga que você desejar, utilizando apenas um módulo simples de Relay.

Para exemplificar, utilizaremos um LED na saída, e o NODEMCU — ESP8266, que será programado como um Servidor Web. 

Acessaremos o conteúdo em uma página WEB de um navegador qualquer, pois o software é inscrito em HTML, e hospedada no Servidor ESP, ele será a interface de controle que programaremos na IDE Arduíno.

Você pode se interessar também!

• Controlando LEDs com dois ESP8266 utilizando Protocolo ESP-NOW
• Como Ler Valores Analógicos ADC Usando NodeMCU ESP8266 - IDE Arduíno!
• Como Hackear Circuito Módulo Relé para funcionar com ESP8266 & ESP32 com 3.3V
• Como utilizar o Botão Flash do NodeMCU ESP8266
• Piscando LEDs Independentes sem delay() utilizando Função millis()
• Alarme de Segurança com Sensor PIR e ESP8266 - Sensor de Movimento
  
  

O design!

O design elaborado é bastante simples, porém, se você tem conhecimento na linguagem HTML5, podes estar alterando o design, já que a parte de gráfica é feita utilizando a HTML e CSS, se você tem afinidade com essas linguagens, podes elaborar um design mais sofisticado.

Para o nosso projeto, utilizaremos esse design básico, como mostrado nas Figuras 2, 3, 4, abaixo, o dispositivo inicializa com os botões no modo Desligado Figura 3.

Quando pressionamos qualquer tecla, ele muda seu estado de Desligado para Ligado e o Status na parte superior dos botões mudam de OFF para ON confirmando que o dispositivo que você colocou na porta D0 ou D1 foi ativado, e vice-versa.

Fig. 2 - Botão 01 Ligado

Fig. 3 - Botões Desligados

Fig. 4 - Botões Ligados

O que é Web-server e como ele funciona?

Um Servidor Web é o local onde são armazenadas as páginas da Web, através de um programa que utiliza protocolo HTTP (Hypertext Transfer Protocol). 

Para processá-los e entregá-los aos clientes da Web, em resposta às suas solicitações, essas solicitações podem advim de um navegador em nosso Computador, Tablet, Smartphone, ou qualquer outro tipo de navegação.

A comunicação inicia-se por uma solicitação de uma determinada página da Web usando a solicitação HTTP GET e o Servidor responde com o conteúdo dessa página web. 

O Código Web Server

Logo abaixo temos o código escrito na IDE Arduíno. Aconselhamos a você baixar no link direto que estamos disponibilizando logo abaixo do código, porém, após baixar, você deve substituir o SSID que é o nome da sua rede, e o PASSWORD, a qual é a senha da sua rede. 

Se precisar, podes mudar as portas de saída dos LEDs, que no nosso caso, estamos utilizando as portas D0 e D1 para os LED1 e LED2.

//==================================================================================//
// Adapted by: Engineer Jemerson Marques, On: 14.07.2019 - FVM Learning website     //
// Available at: https://www.fvml.com.br and on Youtube channel                     //
// https://www.youtube.com/c/FVMLearning - I hope you have fun - Good luck          //
//----------------------------------------------------------------------------------//

//------------------------------------------------------------------------------------
// Libraries Needed For This Project
//------------------------------------------------------------------------------------
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

//------------------------------------------------------------------------------------
// WIFI Module Config, SSID and PASSWORD
//------------------------------------------------------------------------------------

//WiFiServer server(80);

IPAddress ip(192, 168, 25, 240);           // IP address of the server
IPAddress gateway(192, 168, 25, 1);        // gateway of your network
IPAddress subnet(255, 255, 255, 0);        // subnet mask of your network

const char* ssid = "your ssid";            // Enter SSID here
const char* password = "your password";    // Enter Password here

ESP8266WebServer server(80);

//------------------------------------------------------------------------------------
// Defining I/O Pins
//------------------------------------------------------------------------------------
#define   LED1      D0        // LED 1
#define   LED2      D1        // LED 2
bool      LED1_State = LOW;
bool      LED2_State = LOW;

//=====================================================================================
void setup() {
  Serial.begin(115200);
  delay(100);
  pinMode(LED1, OUTPUT);
  pinMode(LED2, OUTPUT);

  Serial.println("Connecting to ");
  Serial.println(ssid);

  //connect to your local wi-fi network
  WiFi.config(ip, gateway, subnet);       // forces to use the fix IP
  WiFi.begin(ssid, password);

  //check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

  server.on("/", handle_OnConnect);
  server.on("/led1on", handle_led1on);
  server.on("/led1off", handle_led1off);
  server.on("/led2on", handle_led2on);
  server.on("/led2off", handle_led2off);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");
}

//=====================================================================================================
void loop() {
  server.handleClient();
  if (LED1_State)
  {
    digitalWrite(LED1, HIGH);
  }
  else
  {
    digitalWrite(LED1, LOW);
  }

  if (LED2_State)
  {
    digitalWrite(LED2, HIGH);
  }
  else
  {
    digitalWrite(LED2, LOW);
  }
}

//===================================================================================================
void handle_OnConnect() {
  LED1_State = LOW;
  LED2_State = LOW;
  Serial.println("GPIO16 Status: OFF | GPIO5 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1_State, LED2_State));
}

void handle_led1on() {
  LED1_State = HIGH;
  Serial.println("GPIO7 Status: ON");
  server.send(200, "text/html", SendHTML(true, LED2_State));
}

void handle_led1off() {
  LED1_State = LOW;
  Serial.println("GPIO7 Status: OFF");
  server.send(200, "text/html", SendHTML(false, LED2_State));
}

void handle_led2on() {
  LED2_State = HIGH;
  Serial.println("GPIO6 Status: ON");
  server.send(200, "text/html", SendHTML(LED1_State, true));
}

void handle_led2off() {
  LED2_State = LOW;
  Serial.println("GPIO6 Status: OFF");
  server.send(200, "text/html", SendHTML(LED1_State, false));
}

void handle_NotFound() {
  server.send(404, "text/plain", "Not found");
}

//===========================================================================================================
String SendHTML(uint8_t led1stat, uint8_t led2stat) {
  String fvml = "<!DOCTYPE html> <html>"
                "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">"
                "<title>LED Control</title>"
                "<style>html { font-family:  Helvetica; display: inline-block; margin: 0px auto; text-align: center;}"
                "body{background: linear-gradient(to bottom, #000066 0%, #000099 100%); margin-top: 50px;} h1 {color: #00cc00;margin: 50px auto 30px;}"
                "h3 {color: #00cc00;margin-bottom: 50px;}h4 {color: #ffd699;margin: 50px auto 30px;}"
                ".button {display: block;width: 110px;background-color: #1abc9c;border: none;color: white;padding:"
                "13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}"
                ".button-on {background-color: #9494b8;}"
                ".button-on:active {background-color: #ff471a;}"
                ".button-off {background-color: #0066ff;}"
                ".button-off:active {background-color: #2c3e50;}"
                "p {font-size: 14px;color: #888;margin-bottom: 10px;}"
                "</style>"
                "</head>"
                "<body>"
                "<h1>CONTROLE DE DISPOSITIVOS REMOTO</h1>"
                "<h3>FVM Learning</h3>\n";

  if (led1stat) {
    fvml += "<p>Dispositivo 1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">Ligado</a>\n";
  } else {
    fvml += "<p>Dispositivo 1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">Desligado</a>\n";
  }

  if (led2stat) {
    fvml += "<p>Dispositivo 2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">Ligado</a>\n";
  } else {
    fvml += "<p>Dispositivo 2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">Desligado</a>\n";
  }
    fvml += "<h4><em>By: Eng. Jemerson Marques</em></h4>\n"
            " <p style='color:green;'> To more about this, visit us - <a href='https://www.fvml.com.br'style='color:green'>FVM Learning</a>.</p>\n"
            "</body>\n"
            "</html>\n";
  return fvml;
}

ARQUIVOS PARA BAIXAR:

Você também pode baixar os arquivos (.ino)  e o diagrama esquemático no link abaixo:

Link Direto: Arquivos para baixar

E por hoje é só, espero que tenham gostado!

Qualquer dúvida, digita nos comentários que logos estaremos respondendo.

Se inscreva no nosso Blog! Clique aqui - FVM Learning!

Forte abraço.

Deus vos Abençoe!

Shalom!