Arduino UNO R4 - Servidor Web
En esta guía, te mostraremos cómo hacer que un Arduino UNO R4 R4 WiFi funcione como un servidor web. Puedes visitar páginas web en el Servidor Web Arduino UNO R4 utilizando un navegador web en tu computadora o teléfono inteligente. Esto te permitirá ver y cambiar valores en el Arduino UNO R4. A continuación aprenderemos los siguientes pasos para programar el Arduino UNO R4 WiFi para este propósito:
- Arduino UNO R4 Web Server - Single Page: Esto nos ayuda a verificar las lecturas de sensores en el Arduino UNO R4 a través de una página web.
- Arduino UNO R4 Web Server - Single Page: Haremos posible gestionar el Arduino UNO R4 mediante un navegador web.
- Arduino UNO R4 Web Server - Single Page: Aprenderemos cómo mover elementos HTML (como HTML, CSS y JavaScript) a un archivo diferente en el IDE de Arduino.
- Arduino UNO R4 Web Server - Múltiples páginas: Crearemos varias páginas web como index.html, temperature.html, led.html, error_404.html y error_405.html, entre otras.
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 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.
Lectura del valor del sensor desde Arduino UNO R4 a través de la web
El código del Arduino UNO R4 realiza estas tareas:
- Construir un servidor web que reciba solicitudes HTTP desde un navegador web.
- Cuando un navegador web envía una solicitud, el Arduino UNO R4 responde con:
- Cabecera HTTP
- Cuerpo HTTP: Esto contiene contenido HTML y datos de sensores.
- Si es la primera vez que utiliza Arduino Uno R4 WiFi/Minima, consulte el tutorial sobre configurar el entorno para Arduino Uno R4 WiFi/Minima en el IDE de Arduino.
- Conecte la placa Arduino Uno R4 a su computadora mediante un cable USB.
- Inicie el IDE de Arduino en su computadora.
- Seleccione la placa Arduino Uno R4 adecuada (p. ej., Arduino Uno R4 WiFi) y el puerto COM.
- Abra el Administrador de Bibliotecas haciendo clic en el icono Administrador de Bibliotecas ubicado en el lado izquierdo del IDE de Arduino.
- Busque Web Server for Arduino Uno R4 WiFi y localice la biblioteca Web Server creada por DIYables.
- Haga clic en el botón Instalar para agregar la biblioteca Web Server.
- Copia el código y ábrelo en el IDE de Arduino.
- Reemplaza los datos de wifi (SSID y contraseña) en el código por los tuyos.
- Haz clic en el botón Subir en el IDE de Arduino para subir el código al Arduino UNO R4.
- Abre el Monitor Serial.
- Observa los resultados en el Monitor Serial.
- Mira la dirección IP que se muestra y escríbela en la barra de direcciones de un navegador web en tu teléfono inteligente o computadora.
- Entonces, verás esta información en el Monitor Serial.
- Al ingresar la dirección IP en su navegador, verá una página simple que muestra información sobre la placa Arduino UNO R4. La página aparecerá de la siguiente manera:
Aquí está el código de Arduino UNO R4 que realiza las tareas mencionadas arriba:
/*
* Este código de Arduino UNO R4 fue desarrollado por es.newbiely.com
* Este código de Arduino UNO R4 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-web-server
*/
#include <UnoR4WiFi_WebServer.h>
const char HTML_CONTENT[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>
<head>
<link rel="icon" href="data:,">
</head>
<p>
Temperature: <span style="color: red;">%TEMP_PLACE_HOLDER% °C</span>
</p>
</html>
)rawliteral";
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID"; // change your network SSID (name)
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // change your network password
// Create web server instance
UnoR4WiFi_WebServer server;
float getTemperature() {
return 26.9456;
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float tempC = getTemperature();
String response = HTML_CONTENT;
response.replace("%TEMP_PLACE_HOLDER%", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("Arduino Uno R4 WiFi - Web Server");
// 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);
// 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
Siga estas instrucciones paso a paso:
COM6
Arduino Uno R4 WiFi - Web Server
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
Autoscroll
Clear output
9600 baud
Newline
COM6
Arduino Uno R4 WiFi - Web Server
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: /
Client disconnected
Autoscroll
Clear output
9600 baud
Newline
Para crear una página web de gran aspecto utilizando una interfaz gráfica de usuario (UI), consulta la última parte de este tutorial.
Controlando el Arduino UNO R4 a través de la web
Gestionar un dispositivo conectado a Arduino UNO R4 es un poco más complejo que simplemente verificar un valor. Esta complejidad surge porque Arduino UNO R4 debe interpretar el comando que recibe del navegador web para determinar la respuesta adecuada. Así es como el código de Arduino UNO R4 maneja esta situación:
- Construir un servidor web que recibe solicitudes HTTP desde un navegador web.
- Procesar la solicitud desde el navegador mediante:
- Leer la cabecera de la solicitud HTTP.
- Examinar la cabecera de la solicitud HTTP para determinar el comando de control necesario.
- Controlar el dispositivo o elemento conectado utilizando el Arduino UNO R4 de acuerdo con el comando de control.
- Enviar una respuesta HTTP.
- Opcionalmente, también puede enviar un cuerpo de respuesta HTTP que contenga contenido HTML para mostrar detalles sobre el estado del control (si es necesario).
Para un ejemplo más claro y detallado, sugiero echar un vistazo a los tutoriales que se encuentran a continuación:
Separando el contenido HTML en otro archivo en el IDE de Arduino
Para crear una página web básica con solo unos pocos contenidos, puedes incluir el HTML en el código del Arduino UNO R4, como se mencionó antes.
Si quieres crear una página web más compleja e impresionante con mucho contenido, no es fácil incluir todo el HTML, CSS y JavaScript directamente en el código del Arduino UNO R4. En este caso, puedes usar un método diferente para manejar el código.
- El código de Arduino UNO R4 debe guardarse en un archivo llamado .ino.
- El código HTML, que incluye HTML, CSS y JavaScript, debe guardarse en un archivo diferente llamado .h. Esto ayuda a mantener el contenido de la página web separado del código de Arduino UNO R4, haciéndolo más fácil de manejar y modificar.
Necesitamos dar dos pasos importantes:
- Creando contenido HTML
- Programando Arduino UNO R4
Preparando contenido HTML
- Crear un archivo HTML en tu computadora. Este archivo debe incluir el diseño de tu interfaz de usuario utilizando HTML, CSS y JavaScript.
- En el archivo HTML, coloca un marcador de posición donde quieras que aparezcan los datos del Arduino UNO R4. Por ahora, usa cualquier valor de muestra.
- Revisa y ajusta el diseño de tu archivo hasta que estés satisfecho con él.
- Reemplaza el valor del marcador de posición en tu archivo HTML con una etiqueta única, como TEMPERATURE_MARKER. Más adelante, usarás el comando String.replace("TEMPERATURE_MARKER", real_value); en tu script de Arduino UNO R4 para mostrar los datos reales del Arduino.
- A continuación, transferiremos este contenido HTML a un archivo .h dentro del IDE de Arduino.
Programación de Arduino UNO R4
- Abre el IDE de Arduino y crea un archivo nuevo. Nómbralo así: newbiely.com.ino.
- Toma el código que se proporciona a continuación y ponlo en el archivo nuevo que creaste.
/*
* Este código de Arduino UNO R4 fue desarrollado por es.newbiely.com
* Este código de Arduino UNO R4 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-web-server
*/
#include <UnoR4WiFi_WebServer.h>
#include "index.h"
const char WIFI_SSID[] = "YOUR_WIFI_SSID"; // change your network SSID (name)
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // change your network password
UnoR4WiFi_WebServer server;
float getTemperature() {
return 26.9456;
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float tempC = getTemperature();
String response = HTML_CONTENT;
response.replace("TEMPERATURE_MARKER", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("Arduino Uno R4 WiFi - Web Server");
// 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);
// Start server
server.begin();
Serial.println("\n=== Web Server Ready! ===");
Serial.print("Visit: http://");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
}
- Actualiza el código con tus datos de WiFi (SSID y contraseña)
- En el IDE de Arduino, crea el archivo llamado index.h
- Haz clic en el botón debajo del icono del monitor serie y selecciona Nueva pestaña, o pulsa Ctrl+Shift+N.
- Nombra el archivo index.h y pulsa el botón Aceptar.
- Copie el código a continuación y péguelo en el archivo llamado index.h.
/*
* Este código de Arduino UNO R4 fue desarrollado por es.newbiely.com
* Este código de Arduino UNO R4 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-web-server
*/
const char *HTML_CONTENT = R""""(
REPLACE_YOUR_HTML_CONTENT_HERE
)"""";
- Inserte su contenido HTML preparado en REPLACE_YOUR_HTML_CONTENT_HERE. Está bien usar caracteres de nueva línea. Aquí hay un ejemplo de un archivo index.h:
/*
* Este código de Arduino UNO R4 fue desarrollado por es.newbiely.com
* Este código de Arduino UNO R4 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-web-server
*/
const char *HTML_CONTENT = R""""(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Uno R4 - Web Temperature</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<meta charset="utf-8">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
body { font-family: "Georgia"; text-align: center; font-size: width/2pt;}
h1 { font-weight: bold; font-size: width/2pt;}
h2 { font-weight: bold; font-size: width/2pt;}
button { font-weight: bold; font-size: width/2pt;}
</style>
<script>
var cvs_width = 200, cvs_height = 450;
function init() {
var canvas = document.getElementById("cvs");
canvas.width = cvs_width;
canvas.height = cvs_height + 50;
var ctx = canvas.getContext("2d");
ctx.translate(cvs_width/2, cvs_height - 80);
update_view(TEMPERATURE_MARKER);
}
function update_view(temp) {
var canvas = document.getElementById("cvs");
var ctx = canvas.getContext("2d");
var radius = 70;
var offset = 5;
var width = 45;
var height = 330;
ctx.clearRect(-cvs_width/2, -350, cvs_width, cvs_height);
ctx.strokeStyle="blue";
ctx.fillStyle="blue";
//5-step Degree
var x = -width/2;
ctx.lineWidth=2;
for (var i = 0; i <= 100; i+=5) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 20, y);
ctx.stroke();
}
//20-step Degree
ctx.lineWidth=5;
for (var i = 0; i <= 100; i+=20) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 25, y);
ctx.stroke();
ctx.font="20px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="right";
ctx.fillText(i.toString(), x - 35, y);
}
// shape
ctx.lineWidth=16;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.stroke();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle="#e6e6ff";
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.fill();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle="#ff1a1a";
ctx.beginPath();
ctx.arc(0, 0, radius - offset, 0, 2 * Math.PI);
ctx.fill();
temp = Math.round(temp * 100) / 100;
var y = (height - radius)*temp/100.0 + radius + 5;
ctx.beginPath();
ctx.rect(-width/2 + offset, -y, width - 2*offset, y);
ctx.fill();
ctx.fillStyle="red";
ctx.font="bold 34px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillText(temp.toString() + "°C", 0, 100);
}
window.onload = init;
</script>
</head>
<body>
<h1>Arduino - Web Temperature</h1>
<canvas id="cvs"></canvas>
</body>
</html>
)"""";
- Ahora tienes el código en dos archivos: newbiely.com.ino y index.h
- Haz clic en el botón Subir en el IDE de Arduino para transferir el código al Arduino UNO R4
- Abre la página web de la placa Arduino UNO R4 en tu navegador, similar a las veces anteriores. Se mostrará como sigue:
Para una guía detallada, por favor consulte el tutorial Arduino UNO R4 - Sensor de temperatura DS18B20 vía Web.
※ Nota:
Si modifica el HTML en el archivo llamado "index.h" pero no realiza cambios en el archivo "newbiely.com.ino", el IDE de Arduino no actualizará el HTML cuando compile y cargue el código al ESP32.
Para que el IDE de Arduino actualice el HTML, debe cambiar algo en el archivo "newbiely.com.ino". Podría añadir una línea en blanco o un comentario. Esto le indica al IDE que el proyecto ha cambiado, de modo que incluya su nuevo HTML al subirlo.
Arduino UNO R4 Servidor Web - Páginas Múltiples
Visita este tutorial sobre Arduino UNO R4 - Servidor Web con Múltiples Páginas.