Web Server com ESP8266 - Controlando Dispositivos Remotamente
Olá a todos!!!
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.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
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
Nao seria copia desse site https://lastminuteengineers.com/creating-esp8266-web-server-arduino-ide/ ???
ResponderExcluirOlá @ANÔNIMO
ExcluirNós fazemos parte de uma comunidade de programadores com plataforma de distribuição livre, então é comum você encontrar códigos similares, pois todos vem de uma só base, as próprias bibliotecas da IDE oferecem centenas de modelos para você adaptar e criar as suas ideias, tanto é que tem no cabeçario do código, adaptado e modificado.
Já vi, em alguns sites, os códigos que adaptei e desenvolvi, na comunidade de código aberto isso é extremamente normal, por isso crescemos constantemente.
Obrigado pelo seu comentário.
Forte abraço.