Arduino Uno R4 WiFi controla LED via Web
Neste tutorial, vamos aprender a controlar um LED através de uma interface web usando um navegador em um PC ou smartphone, utilizando o Arduino Uno R4 WiFi. Em detalhes, o Arduino Uno R4 WiFi será programado para funcionar como um servidor web. Vamos supor que o endereço IP do Arduino Uno R4 WiFi seja 192.168.0.2. Veja os detalhes de como funciona:
- Quando você digita 192.168.0.2 no navegador web, o navegador envia uma requisição ao Arduino, e o Arduino responde com uma página web que contém o botão liga/desliga para controlar o LED.
- Da mesma forma, quando você clica no botão "LED ON" na página web ou digita 192.168.0.2/led1/on no navegador web, o Arduino liga o LED e responde com a página web de controle.
- Do mesmo modo, quando você clica no botão "LED OFF" na página web ou digita 192.168.0.2/led1/off no navegador web, o Arduino desliga o LED e responde com a página web de controle.
O tutorial oferece os fundamentos que você pode personalizar de forma fácil e inovadora para conseguir o seguinte:
- Controlar vários LEDs pela web
- Redesenhar a interface de usuário (UI) web
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables STEM V4B IoT Starter Kit (Arduino included) | |
| 1 | × | 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 Uno R4
Se você não conhece o LED e o Arduino Uno R4 (pinagem, como funciona, como programar ...), aprenda sobre eles nos tutoriais a seguir:
Diagrama de Ligação
This image is created using Fritzing. Click to enlarge image
Código Arduino
/*
* Este código de Arduino foi desenvolvido por pt.newbiely.com
* Este código de Arduino é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino/arduino-uno-r4-wifi-controls-led-via-web
*/
#include <UnoR4WiFi_WebServer.h>
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// LED configuration
#define LED_PIN 9
int ledState = LOW; // Track LED state
const char* HTML_CONTENT =
"<!DOCTYPE HTML>\n"
"<html>\n"
"<head>\n"
"<link rel=\"icon\" href=\"data:,\">\n"
"</head>\n"
"<body>\n"
"<a href=\"/led1/on\">LED ON</a>\n"
"<br><br>\n"
"<a href=\"/led1/off\">LED OFF</a>\n"
"</body>\n"
"</html>\n";
// Create web server instance
UnoR4WiFi_WebServer server;
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HTML_CONTENT);
}
void handleLedOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
ledState = HIGH;
digitalWrite(LED_PIN, ledState);
server.sendResponse(client, HTML_CONTENT);
}
void handleLedOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
ledState = LOW;
digitalWrite(LED_PIN, ledState);
server.sendResponse(client, HTML_CONTENT);
}
void setup() {
Serial.begin(9600);
delay(1000);
// Initialize LED pin
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, ledState);
// Connect to WiFi
Serial.print("Connecting to ");
Serial.println(WIFI_SSID);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println(" connected!");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
// Configure routes
server.addRoute("/", handleHome);
server.addRoute("/led1/on", handleLedOn);
server.addRoute("/led1/off", handleLedOff);
// Start server
server.begin();
Serial.println("\n=== Web Server Ready! ===");
Serial.print("Visit: http://");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
}
Passos Rápidos
- Se esta é a primeira vez que você usa o Arduino Uno R4, veja como configurar o ambiente para o Arduino Uno R4 na Arduino IDE.
- Abra o Library Manager clicando no ícone Library Manager no lado esquerdo da Arduino IDE.
- Pesquise por Web Server for Arduino Uno R4 WiFi e localize a biblioteca Web Server criada pela DIYables.
- Clique no botão Install para adicionar a biblioteca Web Server.
- 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 carregar o código no Arduino
- Abra o Serial Monitor
- Veja o resultado no Serial Monitor.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno' on 'COM15')
New Line
9600 baud
Attempting to connect to SSID: YOUR_WIFI
IP Address: 192.168.0.2
signal strength (RSSI):-39 dBm
- Você verá um endereço IP, por exemplo: 192.168.0.2. Este é o endereço IP do Servidor Web do Arduino
- Abra um navegador web e digite um dos três formatos abaixo na barra de endereços:
192.168.0.2
192.168.0.2/led1/on
192.168.0.2/led1/off
- Lembre-se 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
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno' on 'COM15')
New Line
9600 baud
Connecting to YOUR_WIFI_SSID
connected!
IP address: 192.168.0.254
Starting web server on IP: 192.168.0.254
=== Web Server Ready! ===
Visit: http://192.168.0.254
Method: GET
Requested path: /led1/on
Client disconnected
- Verifique o estado do LED
- Você verá a página web da placa Arduino no navegador como abaixo
- Agora você pode ligar/desligar o LED pela interface web
Você pode personalizar o código acima de forma fácil e inovadora para conseguir o seguinte:
- Controlar vários LEDs pela web
- Redesenhar a interface de usuário (UI) web
Se você deseja melhorar a aparência da página web com uma interface gráfica de usuário (UI) impressionante, pode consultar o tutorial Arduino - Servidor Web para se inspirar e se orientar.