Web Server com ESP8266 - Controlando Dispositivos Remotamente

Olá a todos!!!

No post de hoje, iremos criar um simples Servidor Web que irá hospedar uma página da web e controlar qualquer dispositivo remotamente de qualquer lugar do mundo. Iremos utilizar o módulo NodeMCU, que é nada menos que o ESP8266, com alguns recursos de comunicação via USB, o que facilita a nossa montagem, você pode utilizar qualquer tipo de ESP8266, o 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 Modulo ESP8266 na IDE Arduíno

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. Iremos acessar 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 iremos programar na IDE Arduíno.

O design

O design elaborado é bastante simples, porém depende do quanto você é conhecedor da linguagem HTML, pois a parte de gráfica é feita utilizando a HTML e CSS, se você tem afinidade com essa linguagens, podes elaborar um design mais sofisticado, porém, para nossa ilustração, fizemos esse design básico, como mostrado nas figuras abaixo. O dispositivo inicializa com os botões no modo Desligado Figura 3, então 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, e 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 através de 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 da web.

O Código Web Server

Logo abaixo temos o código escrito na IDE Arduíno. Nós aconselhamos a você baixar no link direto que estamos disponibilizando logo abaixo do código, porém, depois de baixar, você deve substituir o SSID que é o nome da sua rede, e o PASSWORD, que é 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!!! Click aqui - FVM Learning!!!

Forte abraço.

Deus vos Abençoe

Shalom

FVM Learning

sexta-feira, 19 de julho de 2019

Web Server com ESP8266 - Controlando Dispositivos Remotamente