SENSORES/ATUADORES

INTERNET DAS COISAS (IoT)

Arduino Nano ESP32 - Ethernet

Arduino Nano ESP32 - Controla LED via Web

Neste tutorial, vamos aprender a controlar um LED por meio de uma interface web usando um navegador em um PC ou celular, utilizando o Arduino Nano ESP32. Em detalhes, o Arduino Nano ESP32 será programado para funcionar como um servidor web. Vamos supor que o endereço IP do Arduino Nano ESP32 seja 192.168.0.3. Veja os detalhes de como funciona:

Quando você digita 192.168.0.3 no navegador web, o navegador envia uma requisição ao ESP32, e o Arduino Nano ESP32 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 web, o Arduino Nano ESP32 liga o LED e responde com a página web de controle.
Do mesmo modo, quando você clica no botão "Turn OFF" na página web ou digita 192.168.0.3/led1/off no navegador web, o Arduino Nano ESP32 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 Arduino Nano ESP32
O conteúdo HTML está separado do código do Arduino Nano ESP32 e colocado em um arquivo .h

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

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

Hardware Necessário

1	×	Arduino Nano ESP32
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 Arduino Nano
1	×	(Recomendado) Placa de Expansão Breakout para Arduino Nano
1	×	(Recomendado) Divisor de Alimentação para Arduino Nano ESP32

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 Arduino Nano ESP32

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

Diagrama de Ligação

The wiring diagram between Arduino Nano ESP32 and LED

This image is created using Fritzing. Click to enlarge image

Código Arduino Nano ESP32 - O conteúdo HTML está embutido no código do Arduino Nano ESP32

/* * Este código de Arduino Nano ESP32 foi desenvolvido por pt.newbiely.com * Este código de Arduino Nano ESP32 é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-controls-led-via-web */ #include <DIYables_ESP32_WebServer.h> #define LED_PIN D5 // The Arduino Nano ESP32 pin connected to LED int LED_state = LOW; // WiFi credentials const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // Create web server instance DIYables_ESP32_WebServer server; // Page handlers 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; } // home page void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("Arduino Nano ESP32 Web Server: New request received"); server.sendResponse(client, getHTML().c_str()); } void handleLedOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("Arduino Nano ESP32 Web Server: New request received"); LED_state = HIGH; digitalWrite(LED_PIN, LED_state); server.sendResponse(client, getHTML().c_str()); } void handleLedOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("Arduino Nano ESP32 Web Server: New request received"); LED_state = LOW; digitalWrite(LED_PIN, LED_state); server.sendResponse(client, getHTML().c_str()); } void setup() { Serial.begin(9600); delay(1000); pinMode(LED_PIN, OUTPUT); digitalWrite(LED_PIN, LED_state); Serial.println("Arduino Nano ESP32 Web Server"); // Configure routes server.addRoute("/", handleHome); server.addRoute("/led1/on", handleLedOn); server.addRoute("/led1/off", handleLedOff); // Start web server with WiFi connection server.begin(WIFI_SSID, WIFI_PASSWORD); } void loop() { server.handleClient(); // Your code here }

Passos Rápidos

Para começar com o Arduino Nano ESP32, siga estes passos:

Se você é novo no Arduino Nano ESP32, consulte o tutorial sobre como configurar o ambiente para o Arduino Nano ESP32 na Arduino IDE.
Faça a ligação dos componentes de acordo com o diagrama fornecido.
Conecte a placa Arduino Nano ESP32 ao seu computador usando um cabo USB.
Abra a Arduino IDE no seu computador.
Selecione a placa Arduino Nano ESP32 e a porta COM correspondente.
Abra o Library Manager clicando no ícone Library Manager na barra de navegação à esquerda da Arduino IDE.
Pesquise por “DIYables ESP32 WebServer” e encontre a DIYables ESP32 WebServer.
Clique no botão Install para instalar a biblioteca Web Server da DIYables.

Copie o código acima e abra-o na Arduino IDE
Altere as informações de WiFi (SSID e senha) no código para as suas
Clique no botão Upload na Arduino IDE para fazer o upload do código para o Arduino Nano ESP32
Abra o Serial Monitor
Veja 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 'Arduino Nano ESP32' on 'COM15')

New Line

9600 baud

Connecting to WiFi... Connected to WiFi Arduino Nano ESP32 Web Server's IP address: 192.168.0.3

Ln 11, Col 1

Arduino Nano ESP32 on COM15

Você verá um endereço IP, por exemplo: 192.168.0.3. Este é o endereço IP do Servidor Web do Arduino Nano ESP32
Abra um navegador web 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. 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 'Arduino Nano ESP32' on 'COM15')

New Line

9600 baud

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

Ln 11, Col 1

Arduino Nano ESP32 on COM15

Verifique o estado do LED
Você verá a página web da placa Arduino Nano ESP32 no navegador web como abaixo

Agora você consegue ligar/desligar o LED por meio da interface web

Código Arduino Nano ESP32 - O conteúdo HTML está separado do código do Arduino Nano ESP32

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

O código do Arduino Nano ESP32 ficará em um arquivo .ino.
O código HTML (incluindo HTML, CSS e Javascript) ficará 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 na Arduino IDE

/* * Este código de Arduino Nano ESP32 foi desenvolvido por pt.newbiely.com * Este código de Arduino Nano ESP32 é disponibilizado ao público sem nenhuma restrição. * Para tutoriais completos e diagramas de ligação, visite: * https://pt.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-controls-led-via-web */ #include <DIYables_ESP32_WebServer.h> #include "index.h" // Include the index.h file #define LED_PIN D5 // The Arduino Nano ESP32 pin connected to LED int LED_state = LOW; // WiFi credentials const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // Create web server instance DIYables_ESP32_WebServer server; // Page handlers 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; } // home page void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("Arduino Nano ESP32 Web Server: New request received"); server.sendResponse(client, getHTML().c_str()); } void handleLedOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("Arduino Nano ESP32 Web Server: New request received"); LED_state = HIGH; digitalWrite(LED_PIN, LED_state); server.sendResponse(client, getHTML().c_str()); } void handleLedOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) { Serial.println("Arduino Nano ESP32 Web Server: New request received"); LED_state = LOW; digitalWrite(LED_PIN, LED_state); server.sendResponse(client, getHTML().c_str()); } void setup() { Serial.begin(9600); delay(1000); pinMode(LED_PIN, OUTPUT); digitalWrite(LED_PIN, LED_state); Serial.println("Arduino Nano ESP32 Web Server"); // Configure routes server.addRoute("/", handleHome); server.addRoute("/led1/on", handleLedOn); server.addRoute("/led1/off", handleLedOff); // Start web server with WiFi connection server.begin(WIFI_SSID, WIFI_PASSWORD); } void loop() { 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-o no index.h.

Agora você tem o código em dois arquivos: newbiely.com.ino e index.h
Clique no botão Upload na Arduino IDE para fazer o upload do código para o Arduino Nano ESP32
Acesse a página web da placa Arduino Nano ESP32 por meio de um navegador web no seu PC ou celular como antes. Você a verá semelhante ao 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 o upload do código para o ESP32, a Arduino IDE não 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 facilmente e com inovação o código acima para conseguir o seguinte:

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

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!