Arduino Uno R4 WiFi controla un LED a través de la web
En este tutorial, vamos a aprender a controlar un LED a través de una interfaz web utilizando un navegador en una PC o en un teléfono inteligente, utilizando el Arduino Uno R4 WiFi. En detalle, el Arduino Uno R4 WiFi será programado para funcionar como un servidor web. Supongamos que la dirección IP del Arduino Uno R4 WiFi es 192.168.0.2. Aquí están los detalles de cómo funciona:
- Cuando ingresas 192.168.0.2 en el navegador web, el navegador envía una solicitud al Arduino, y el Arduino responde con una página web que contiene el botón de encendido/apagado para controlar el LED.
- De manera similar, cuando haces clic en el botón "LED ON" en la página web o escribes 192.168.0.2/led1/on en el navegador web, el Arduino enciende el LED y responde con la página web de control.
- Del mismo modo, cuando haces clic en el botón "LED OFF" en la página web o escribes 192.168.0.2/led1/off en el navegador web, el Arduino apaga el LED y responde con la página web de control.
El tutorial ofrece los fundamentos que puedes personalizar de forma rápida e innovadora para lograr lo siguiente:
- Controlar múltiples LEDs a través de la web
- Rediseño de la interfaz de usuario web (UI)
Hardware Requerido
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) |
Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.
Buy Note: Use the LED Module for easier wiring. It includes an integrated resistor.
Acerca de LED y Arduino Uno R4
Si no sabes nada sobre LED y Arduino Uno R4 (pinout, cómo funciona, cómo programar ...), aprende sobre ellos en los siguientes tutoriales:
Diagrama de Cableado
This image is created using Fritzing. Click to enlarge image
Código de Arduino
/*
* Este código de Arduino fue desarrollado por es.newbiely.com
* Este código de Arduino se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.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();
}
Pasos R\u00e1pidos
- Si esta es la primera vez que usas Arduino Uno R4, consulta cómo configurar el entorno para Arduino Uno R4 en el IDE de Arduino.
- Abrir el Administrador de Bibliotecas haciendo clic en el icono Administrador de Bibliotecas en el lado izquierdo del IDE de Arduino.
- Busca Web Server for Arduino Uno R4 WiFi y localiza la biblioteca Web Server creada por DIYables.
- Haz clic en el botón Instalar para agregar la biblioteca Web Server.
- Copia el código anterior y ábrelo con Arduino IDE
- Cambia la información de Wi‑Fi (SSID y contraseña) en el código por la tuya
- Haz clic en el botón Subir en el IDE de Arduino para subir el código al Arduino
- Abre el Monitor Serial
- Observa el resultado en el Monitor Serial.
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
- Verá una dirección IP, por ejemplo: 192.168.0.2. Esta es la dirección IP del servidor web de Arduino
- Abra un navegador web e introduzca uno de los tres formatos que se indican a continuación en la barra de direcciones:
192.168.0.2
192.168.0.2/led1/on
192.168.0.2/led1/off
- Tenga en cuenta que la dirección IP puede variar. Verifique el valor actual en el Monitor Serial.
- También verá la salida que se muestra a continuación en el Monitor Serial.
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
- Comprobar el estado del LED
- Verás la página web de la placa Arduino en el navegador como se muestra a continuación
- Ya puedes controlar el encendido y apagado del LED a través de la interfaz web
Puede personalizar de forma rápida e innovadora el código anterior para lograr lo siguiente:
- Controlar múltiples LEDs a través de la web
- Rediseño de la interfaz de usuario web (UI)
Si desea mejorar la apariencia de la página web con una impresionante interfaz gráfica de usuario (UI), puede consultar el tutorial Arduino - Web Server para obtener inspiración y orientación.