SENSORES/ATUADORES

INTERNET DAS COISAS (IoT)

ESP8266 - Ethernet

ESP8266 - Controla LED via Web

Este tutorial ensina como controlar um LED por uma interface web usando um navegador em um PC ou celular, utilizando o ESP8266. Em detalhe, o ESP8266 será programado para funcionar como um servidor web. Vamos supor que o endereço IP do ESP8266 seja 192.168.0.5. Veja os detalhes de como funciona:

Quando você digita 192.168.0.3 no navegador, o navegador envia uma requisição ao ESP8266, e o ESP8266 responde com uma página web que contém o botão de ligar/desligar para controlar o LED.
Da mesma forma, quando você clica no botão "Turn ON" na página web ou digita 192.168.0.3/led1/on no navegador, o ESP8266 liga o LED e responde com a página web de controle.
Igualmente, quando você clica no botão "Turn OFF" na página web ou digita 192.168.0.3/led1/off no navegador, o ESP8266 desliga o LED e responde com a página web de controle.

Vamos aprender por meio de dois códigos de exemplo:

O conteúdo HTML está embutido no código do ESP8266
O conteúdo HTML está separado do código do ESP8266 e colocado em um arquivo .h

O tutorial oferece os fundamentos que você pode personalizar com facilidade e inovação para conseguir o seguinte:

Controlar vários LEDs pela web
Redesenhar a interface de usuário web (UI)

Hardware Necessário

1	×	ESP8266 NodeMCU ESP-12F
1	×	Alternatively, ESP8266 D1 Mini NodeMCU ESP-12F
1	×	Alternatively, ESP8266 NodeMCU ESP-12E (Uno-form)
1	×	Micro USB Cable
1	×	Alternatively, ESP8266 NodeMCU ESP-12F (SMD-form)
1	×	Cabo USB Tipo-A para Tipo-C (para PC com USB-A)
1	×	Cabo USB Tipo-C para Tipo-C (para PC com USB-C)
1	×	LED Kit
1	×	LED (red)
1	×	LED Module
1	×	(Alternativa) Button and LED Kit
1	×	220Ω Resistor
1	×	Protoboard
1	×	Fios Jumper
1	×	(Recomendado) Placa de Expansão com Bornes de Parafuso para ESP8266

Or you can buy the following kits:

DIYables Sensor Kit (18 sensors/displays)

Divulgação: Alguns dos links desta seção são links de afiliado da Amazon. Podemos receber uma comissão pelas compras feitas por meio desses links, sem custo adicional para você. Agradecemos o seu apoio.

Buy Note: Use the LED Module for easier wiring. It includes an integrated resistor.

Sobre o LED e o ESP8266

Se você não conhece o LED e o ESP8266 (pinagem, como funciona, como programar ...), aprenda sobre eles nos tutoriais a seguir:

Diagrama de Ligação

The wiring diagram between ESP8266 NodeMCU and LED

This image is created using Fritzing. Click to enlarge image

Para mais informações, veja Pinagem do ESP8266 e como alimentar o ESP8266 e outros componentes.

Código ESP8266 - O conteúdo HTML está embutido no código do ESP8266

/* * Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com * Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/esp8266/esp8266-controls-led-via-web */ #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #define LED_PIN D6 // The ESP8266 pin connected to LED const char *ssid = "YOUR_WIFI_SSID"; // CHANGE IT const char *password = "YOUR_WIFI_PASSWORD"; // CHANGE IT ESP8266WebServer server(80); // Web server on port 80 int LED_state = LOW; String getHTML() { String html = "<!DOCTYPE HTML>"; html += "<html>"; html += "<head>"; html += "<link rel='icon' href='data:,'>"; html += "</head>"; html += "LED state: "; if (LED_state == LOW) html += "OFF"; else html += "ON"; html += ""; html += "<a href='/led1/on'>Turn ON</a>"; html += " "; html += "<a href='/led1/off'>Turn OFF</a>"; html += "</html>"; return html; } void setup() { Serial.begin(9600); pinMode(LED_PIN, OUTPUT); digitalWrite(LED_PIN, LED_state); // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } Serial.println("Connected to WiFi"); // Print the ESP8266's IP address Serial.print("ESP8266 Web Server's IP address: "); Serial.println(WiFi.localIP()); // home page server.on("/", HTTP_GET, []() { Serial.println("ESP8266 Web Server: New request received:"); Serial.println("GET /"); server.send(200, "text/html", getHTML()); }); // Route to control the LED server.on("/led1/on", HTTP_GET, []() { Serial.println("ESP8266 Web Server: New request received:"); Serial.println("GET /led1/on"); LED_state = HIGH; digitalWrite(LED_PIN, LED_state); server.send(200, "text/html", getHTML()); }); server.on("/led1/off", HTTP_GET, []() { Serial.println("ESP8266 Web Server: New request received:"); Serial.println("GET /led1/off"); LED_state = LOW; digitalWrite(LED_PIN, LED_state); server.send(200, "text/html", getHTML()); }); // Start the server server.begin(); } void loop() { // Handle client requests server.handleClient(); // Your code here }

Passos Rápidos

Para começar com o ESP8266 na Arduino IDE, siga estes passos:

Veja o tutorial como configurar o ambiente para o ESP8266 na Arduino IDE se esta for a sua primeira vez usando o ESP8266.
Ligue os componentes como mostrado no diagrama.
Conecte a placa ESP8266 ao seu computador usando um cabo USB.
Abra a Arduino IDE no seu computador.
Escolha a placa ESP8266 correta, como (por exemplo, NodeMCU 1.0 (ESP-12E Module)), e a respectiva porta COM.
Copie o código acima e abra-o com a Arduino IDE
Altere as informações de WiFi (SSID e senha) no código para as suas
Clique no botão Upload da Arduino IDE para fazer upload do código para o ESP8266
Abra o Serial Monitor
Confira o resultado no Serial Monitor.

Newbiely | Arduino IDE 2.3.8

──

☐

Newbiely.ino

···

8 Serial.println("Hello World!");

Output

Serial Monitor

Message (Enter to send message to 'Nodemcu 1.0 (ESP-12E Module)' on 'COM15')

New Line

9600 baud

Connecting to WiFi... Connected to WiFi ESP8266 Web Server's IP address: 192.168.0.3

Ln 11, Col 1

Nodemcu 1.0 (ESP-12E Module) on COM15

Você verá um endereço IP, por exemplo: 192.168.0.3. Esse é o endereço IP do Servidor Web ESP8266
Abra um navegador e digite um dos três formatos abaixo na barra de endereços:

192.168.0.3

192.168.0.3/led1/on

192.168.0.3/led1/off

Esteja ciente de que o endereço IP pode variar. Por favor, verifique o valor atual no Serial Monitor.
Você também verá a saída abaixo no Serial Monitor

Newbiely | Arduino IDE 2.3.8

──

☐

Newbiely.ino

···

8 Serial.println("Hello World!");

Output

Serial Monitor

Message (Enter to send message to 'Nodemcu 1.0 (ESP-12E Module)' on 'COM15')

New Line

9600 baud

Connecting to WiFi... Connected to WiFi ESP8266 Web Server's IP address: 192.168.0.3 ESP8266 Web Server: New request recieved: GET / ESP8266 Web Server: New request recieved: GET /led1/on ESP8266 Web Server: New request recieved: GET /led1/off

Ln 11, Col 1

Nodemcu 1.0 (ESP-12E Module) on COM15

Verifique o estado do LED
Você verá a página web da placa ESP8266 no navegador, como abaixo

Agora você consegue controlar o LED (ligar/desligar) pela interface web

Código ESP8266 - O conteúdo HTML está separado do código do ESP8266

Como uma página web gráfica contém uma grande quantidade de conteúdo HTML, embuti-la no código do ESP8266 como antes se torna inconveniente. Para resolver isso, precisamos separar o código do ESP8266 e o código HTML em arquivos diferentes:

O código do ESP8266 será colocado em um arquivo .ino.
O código HTML (incluindo HTML, CSS e Javascript) será colocado em um arquivo .h.

Passos Rápidos

Abra a Arduino IDE e crie um novo sketch. Dê um nome a ele, por exemplo, newbiely.com.ino
Copie o código abaixo e abra-o com a Arduino IDE

/* * Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com * Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/esp8266/esp8266-controls-led-via-web */ #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include "index.h" // Include the index.h file #define LED_PIN D6 // The ESP8266 pin connected to LED const char *ssid = "YOUR_WIFI_SSID"; // CHANGE IT const char *password = "YOUR_WIFI_PASSWORD"; // CHANGE IT ESP8266WebServer server(80); // Web server on port 80 int LED_state = LOW; String getHTML() { String html = webpage; // Use the HTML content from the index.h file html.replace("%LED_STATE%", LED_state ? "ON" : "OFF"); // update the led state return html; } void setup() { Serial.begin(9600); pinMode(LED_PIN, OUTPUT); digitalWrite(LED_PIN, LED_state); // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } Serial.println("Connected to WiFi"); // Print the ESP8266's IP address Serial.print("ESP8266 Web Server's IP address: "); Serial.println(WiFi.localIP()); // home page server.on("/", HTTP_GET, []() { Serial.println("ESP8266 Web Server: New request received:"); Serial.println("GET /"); server.send(200, "text/html", getHTML()); }); // Route to control the LED server.on("/led1/on", HTTP_GET, []() { Serial.println("ESP8266 Web Server: New request received:"); Serial.println("GET /led1/on"); LED_state = HIGH; digitalWrite(LED_PIN, LED_state); server.send(200, "text/html", getHTML()); }); server.on("/led1/off", HTTP_GET, []() { Serial.println("ESP8266 Web Server: New request received:"); Serial.println("GET /led1/off"); LED_state = LOW; digitalWrite(LED_PIN, LED_state); server.send(200, "text/html", getHTML()); }); // Start the server server.begin(); } void loop() { // Handle client requests server.handleClient(); // Your code here }

Altere as informações de WiFi (SSID e senha) no código para as suas
Crie o arquivo index.h na Arduino IDE da seguinte forma:

Clique no botão logo abaixo do ícone do Serial Monitor e escolha New Tab, ou use as teclas Ctrl+Shift+N.

Dê ao arquivo o nome index.h e clique no botão OK

Copie o código abaixo e cole no index.h.

Agora você tem o código em dois arquivos: newbiely.com.ino e index.h
Clique no botão Upload da Arduino IDE para fazer upload do código para o ESP8266
Acesse a página web da placa ESP8266 pelo navegador no seu PC ou celular como antes. Você a verá parecida com a do código anterior, como abaixo:

※ Nota:

Se você modificar o conteúdo HTML no index.h e não mexer em nada no arquivo newbiely.com.ino, quando você compilar e fizer upload do código para o ESP8266, a Arduino IDE não vai atualizar o conteúdo HTML.
Para fazer a Arduino IDE atualizar o conteúdo HTML nesse caso, faça uma alteração no arquivo newbiely.com.ino (por exemplo, adicionar uma linha vazia, adicionar um comentário....)

Você pode personalizar o código acima com facilidade e inovação para conseguir o seguinte:

Controlar vários LEDs pela web
Redesenhar a interface de usuário web (UI)

Tutoriais Relacionados

※ NOSSAS MENSAGENS

Fique à vontade para compartilhar o link deste tutorial. Porém, por favor, não use nosso conteúdo em outros sites. Investimos muito esforço e tempo para criar este conteúdo, por favor respeite nosso trabalho!