Arduino - Servidor Web
En este tutorial, aprenderemos cómo convertir un Arduino Uno R4 WiFi en un servidor web. Al acceder a las páginas web alojadas en el Arduino Web Server a través de un navegador en tu PC o teléfono inteligente, podrás leer valores del Arduino e incluso controlarlo. A continuación se presenta un desglose de lo que aprenderemos para programar el Arduino Uno WiFi y lograrlo:
- Arduino Web Server - Página única: Esto nos permite monitorizar los valores de los sensores desde el Arduino a través de una interfaz web.
- Arduino Web Server - Página única: Habilitaremos la capacidad de controlar el Arduino mediante un navegador web.
- Arduino Web Server - Página única: Aprenderemos a separar el contenido HTML (HTML, CSS y JavaScript) en otro archivo dentro del IDE de Arduino.
- Arduino Web Server - Múltiples páginas: En este paso, crearemos varias páginas como index.html, temperature.html, led.html, error_404.html, y error_405.html..., y más.
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 a través de la web
Esto es relativamente simple. El código de Arduino realiza las siguientes tareas:
- Crear un servidor web que escuche solicitudes HTTP desde un navegador.
- Al recibir una solicitud de un navegador web, Arduino responde con la siguiente información:
- Cabecera HTTP
- Cuerpo HTTP: Esto incluye contenido HTML y el valor leído del sensor.
- Si es la primera vez que usas Arduino Uno R4, consulta cómo configurar el entorno para Arduino Uno R4 en Arduino IDE.
- Abre el Administrador de Bibliotecas haciendo clic en el icono Administrador de Bibliotecas en el lado izquierdo del Arduino IDE.
- 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 WiFi (SSID y contraseña) en el código por la tuya
- Haz clic en el botón Upload en Arduino IDE para subir el código a Arduino
- Abre el Monitor Serial
- Consulta el resultado en el Monitor Serial
- Tome nota de la dirección IP que se muestra y escriba dicha dirección en la barra de direcciones de un navegador web en su teléfono inteligente o PC.
- Como resultado, verá la siguiente salida en el Monitor Serial.
- Una vez que acceda al navegador web utilizando la dirección IP, se le presentará una página web muy básica que mostrará información sobre la placa Arduino. La página se verá como la siguiente:
A continuación se muestra el código de Arduino que realiza las tareas anteriores.
/*
* 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-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
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 que la página web luzca fantástica con una interfaz gráfica de usuario (UI), consulta la sección final de este tutorial.
Controlar el Arduino a través de la web
Controlar algo conectado a un Arduino es un poco más desafiante que simplemente leer un valor. Eso se debe a que el Arduino tiene que entender la solicitud que recibe del navegador web para saber qué acción tomar. Aquí está lo que hace el código de Arduino en este caso:
- Crear un servidor web que escuche solicitudes HTTP desde un navegador web.
- Manejar la solicitud recibida desde el navegador web haciendo lo siguiente:
- Lee el encabezado de la solicitud HTTP.
- Analiza el encabezado de la solicitud HTTP para determinar el comando de control específico necesario.
- Controla el dispositivo o cosa conectada al Arduino en función del comando de control recibido.
- Envía de vuelta una respuesta HTTP.
- Además, puede enviar un cuerpo de respuesta HTTP con contenido HTML para mostrar información sobre el estado del control (si es necesario).
Para un ejemplo más completo y detallado, recomiendo consultar los tutoriales que se enumeran a continuación:
Separar el contenido HTML en otro archivo en el IDE de Arduino
Si quieres crear una página web simple con contenido mínimo, puedes incrustar el HTML directamente en el código de Arduino, como se explicó anteriormente.
Sin embargo, si quieres crear una página web más sofisticada e impresionante con un contenido de mayor tamaño, se vuelve incómodo incluir todo el HTML, CSS y JavaScript directamente en el código de Arduino. En esta situación, puedes usar un enfoque diferente para gestionar el código:
- El código de Arduino se colocará en un archivo .ino, como antes.
- El código HTML (HTML, CSS, JavaScript) se colocará en un archivo separado .h. Esto le permite mantener el contenido de la página web separado del código de Arduino, lo que facilita su gestión y modificación.
Para hacerlo, necesitamos realizar dos grandes pasos:
- Preparando contenido HTML
- Programando Arduino
Preparando contenido HTML
- Crea un archivo HTML en tu PC local que contenga el contenido HTML (HTML, CSS y JavaScript) para tu diseño de la interfaz de usuario.
- En el archivo HTML, donde deben mostrarse los datos de Arduino, usa un valor arbitrario.
- Prueba y modifícalo hasta que estés satisfecho.
- En el archivo HTML, donde deben mostrarse los datos de Arduino, reemplaza el valor arbitrario por un nombre especial, por ejemplo, TEMPERATURE_MARKER. Más adelante, en el código de Arduino, usaremos la función String.replace("TEMPERATURE_MARKER", real_value); para actualizar el valor proporcionado por Arduino.
- Colocaremos el contenido HTML en el archivo .h en el IDE de Arduino. Consulta el siguiente paso.
Programación de Arduino
- Abre el IDE de Arduino y crea un nuevo sketch. Dale un nombre, por ejemplo, ArduinoGetStarted.com.ino.
- Copia el código que se proporciona a continuación y pégalo en el archivo creado.
/*
* 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-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();
}
- Cambia la información de WiFi (SSID y contraseña) en el código por la tuya
- Crea el archivo index.h en el IDE de Arduino mediante:
- Haz clic en el botón justo debajo del icono del monitor serie y elige Nueva pestaña, o usa Ctrl+Shift+N teclas.
- Escribe el nombre del archivo index.h y haz clic en el botón Aceptar
- Copia el código de abajo y pégalo en el index.h.
/*
* 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-web-server
*/
const char *HTML_CONTENT = R""""(
REPLACE_YOUR_HTML_CONTENT_HERE
)"""";
- Reemplace la línea REPLACE_YOUR_HTML_CONTENT_HERE con el contenido HTML que preparó anteriormente. No hay problema con el carácter de salto de línea. A continuación se muestra un ejemplo del archivo index.h:
/*
* 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-web-server
*/
const char *HTML_CONTENT = R""""(
<!DOCTYPE html>
<html>
<head>
<title>Arduino - 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: ArduinoGetStarted.com.ino y index.h
- Haz clic en el botón Upload en el IDE de Arduino para cargar el código en Arduino
- Accede a la página web de la placa de Arduino a través del navegador como antes. La verás como se muestra a continuación:
Para una ilustración más completa y detallada, consulte el tutorial Arduino - DS18B20 Temperature Sensor via Web
※ Nota:
- Si realizas cambios en el contenido HTML dentro del index.h pero no modificas nada en el ArduinoGetStarted.com.ino archivo, el IDE de Arduino no actualizará ni refrescará el contenido HTML cuando compiles y cargues el código al ESP32.
- Para forzar que el IDE de Arduino actualice el contenido HTML en esta situación, necesitas hacer una modificación en el ArduinoGetStarted.com.ino archivo. Por ejemplo, puedes añadir una línea vacía o insertar un comentario. Esta acción hace que el IDE reconozca que ha habido cambios en el proyecto, asegurando que el contenido HTML actualizado se incluya en la carga.
Servidor Web de Arduino - Varias Páginas
Consulta este Arduino - Web Server Multiple Pages tutorial.