Arduino - Temperatura a través de la web
En este tutorial aprenderemos a programar Arduino para que se convierta en un servidor web que le proporcione la temperatura a través de la web. Puedes acceder a la página web proporcionada por Arduino para comprobar la temperatura desde un sensor de temperatura DS18B20. A continuación se explica cómo funciona:
- Arduino está configurado como un servidor web.
- Escribes la dirección IP de Arduino en un navegador web en tu teléfono móvil o PC.
- Arduino responde a la solicitud del navegador web con una página web que contiene la temperatura leída por el sensor DS18B20.
Vamos a revisar dos códigos de ejemplo:
- Código de Arduino que proporciona una página web muy simple que muestra la temperatura del sensor DS18B20. Esto facilita que entiendas cómo funciona.
- Código de Arduino que proporciona una página web gráfica que muestra la temperatura del sensor DS18B20.
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: Many DS18B20 sensors available in the market are unreliable. We strongly recommend buying the sensor from the DIYables brand using the link provided above. We tested it, and it worked reliably.
Acerca de Arduino Uno R4 y el sensor de temperatura DS18B20
Si no conoces Arduino Uno R4 y el sensor de temperatura DS18B20 (disposición de pines, cómo funciona, cómo programarlo, etc.), aprende sobre ellos en los siguientes tutoriales:
Diagrama de Cableado
This image is created using Fritzing. Click to enlarge image
Código de Arduino - Página web simple
/*
* 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-temperature-via-web
*/
#include <UnoR4WiFi_WebServer.h>
#include <OneWire.h>
#include <DallasTemperature.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";
const char WIFI_SSID[] = "YOUR_WIFI_SSID"; // change your network SSID (name)
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // change your network password
const int SENSOR_PIN = 6; // Arduino pin connected to DS18B20 sensor's DQ pin
OneWire oneWire(SENSOR_PIN); // setup a oneWire instance
DallasTemperature tempSensor(&oneWire); // pass oneWire to DallasTemperature library
UnoR4WiFi_WebServer server;
float getTemperature() {
tempSensor.requestTemperatures(); // send the command to get temperatures
float tempCelsius = tempSensor.getTempCByIndex(0); // read temperature in Celsius
return tempCelsius;
}
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);
tempSensor.begin(); // initialize the temperature sensor
Serial.println("Arduino Uno R4 WiFi - Temperature via Web");
// 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
- Si es la primera vez que usas Arduino Uno R4, consulta cómo configurar el entorno para Arduino Uno R4 en el IDE de Arduino.
- Abre 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 añadir la biblioteca Web Server.
- Copia el código anterior y ábrelo con el IDE de Arduino.
- Cambia la información de WiFi (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.
- Revisa 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
Arduino Uno R4 WiFi - Temperature via Web
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
- Encontrarás una dirección IP. Escribe esta dirección IP en la barra de direcciones de un navegador web en tu teléfono inteligente o PC.
- Verás la siguiente salida en el Monitor serie.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno' on 'COM15')
New Line
9600 baud
Arduino Uno R4 WiFi - Temperature via Web
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
- Verá una página web muy simple de la placa Arduino en el navegador web como se muestra a continuación:
Código de Arduino - Página web gráfica
Como una página web gráfica contiene una gran cantidad de contenido HTML, incrustarlo en el código de Arduino como antes resulta inconveniente. Para abordar esto, necesitamos separar el código de Arduino y el código HTML en archivos diferentes:
- El código de Arduino se colocará en un archivo .ino.
- El código HTML (incluido HTML, CSS y JavaScript) se colocará en un archivo .h.
Pasos R\u00e1pidos
- Abre el IDE de Arduino y crea un nuevo sketch. Dale un nombre, por ejemplo, ArduinoGetStarted.com.ino
- Copia el código de abajo y ábrelo con el IDE 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-temperature-via-web
*/
#include <UnoR4WiFi_WebServer.h>
#include "index.h"
#include <OneWire.h>
#include <DallasTemperature.h>
const char WIFI_SSID[] = "YOUR_WIFI_SSID"; // change your network SSID (name)
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // change your network password
const int SENSOR_PIN = 6; // Arduino pin connected to DS18B20 sensor's DQ pin
OneWire oneWire(SENSOR_PIN); // setup a oneWire instance
DallasTemperature tempSensor(&oneWire); // pass oneWire to DallasTemperature library
UnoR4WiFi_WebServer server;
float getTemperature() {
tempSensor.requestTemperatures(); // send the command to get temperatures
float tempCelsius = tempSensor.getTempCByIndex(0); // read temperature in Celsius
return tempCelsius;
}
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);
tempSensor.begin(); // initialize the temperature sensor
Serial.println("Arduino Uno R4 WiFi - Temperature via Web");
// 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 Arduino IDE haciendo:
- Haz clic en el botón justo debajo del icono del monitor serie y elige Nueva pestaña, o usa las teclas Ctrl+Shift+N.
- Indica 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.
- Ahora tienes el código en dos archivos: ArduinoGetStarted.com.ino y index.h
- Haz clic en el botón Subir del IDE de Arduino para cargar el código al Arduino
- Accede a la página web de la placa Arduino a través del navegador como antes. Verás cómo se muestra a continuación:
- Si haces cambios en el contenido HTML dentro del index.h pero no modificas nada en el archivo ArduinoGetStarted.com.ino, el IDE de Arduino no actualizará ni refrescará el contenido HTML cuando compiles y subas 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 archivo ArduinoGetStarted.com.ino. Por ejemplo, puedes añadir una línea en blanco o insertar un comentario. Esta acción hace que el IDE reconozca que ha habido cambios en el proyecto, asegurando que tu contenido HTML actualizado quede incluido en la subida.
/*
* 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-temperature-via-web
*/
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>
)"""";
※ Nota: