Arduino Nano ESP32 - Temperatura a través de la web
En esta guía, exploraremos el proceso de programar el Arduino Nano ESP32 para que funcione como un servidor web, permitiéndote acceder a los datos de temperatura a través de una interfaz web. Usando un sensor de temperatura DS18B20 conectado, puedes comprobar fácilmente la temperatura actual utilizando tu teléfono inteligente o PC para visitar la página web servida por el Arduino Nano ESP32. Aquí tienes un breve resumen de cómo funciona:
- Arduino Nano ESP32 está programado para funcionar como servidor web.
- Escribes la dirección IP de Arduino Nano ESP32 en un navegador web de tu teléfono inteligente o PC.
- Arduino Nano ESP32 responde a la solicitud desde el navegador web con una página web que contiene la temperatura leída del sensor DS18B20.
A continuación revisaremos dos ejemplos de código:
- Código Arduino Nano ESP32 que proporciona una página web muy simple que muestra la temperatura del sensor DS18B20. Esto facilita que entiendas cómo funciona. El contenido HTML está incrustado en el código de Arduino Nano ESP32
- Código Arduino Nano ESP32 que proporciona una página web gráfica que muestra la temperatura del sensor DS18B20; el contenido HTML está separado del código de Arduino Nano ESP32
Hardware Requerido
Or you can buy the following kits:
| 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.
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 Nano ESP32 Servidor Web y Sensor de Temperatura DS18B20
Si no conoces Arduino Nano ESP32 Web Server y el sensor de temperatura DS18B20 (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 Nano ESP32 - Página web sencilla
/*
* Este código de Arduino Nano ESP32 fue desarrollado por es.newbiely.com
* Este código de Arduino Nano ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-temperature-via-web
*/
#include <DIYables_ESP32_WebServer.h>
#include <OneWire.h>
#include <DallasTemperature.h>
#define SENSOR_PIN D2 // The Arduino Nano ESP32 pin connected to DS18B20 sensor's DATA pin
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
OneWire oneWire(SENSOR_PIN); // setup a oneWire instance
DallasTemperature DS18B20(&oneWire); // pass oneWire to DallasTemperature library
float getTemperature() {
DS18B20.requestTemperatures(); // send the command to get temperatures
float tempC = DS18B20.getTempCByIndex(0); // read temperature in °C
return tempC;
}
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("Arduino Nano ESP32 Web Server: New request received"); // for debugging
// get temperature from sensor
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
String html = "<!DOCTYPE HTML>";
html += "<html>";
html += "<head>";
html += "<link rel=\"icon\" href=\"data:,\">";
html += "</head>";
html += "<p>";
html += "Temperature: <span style=\"color: red;\">";
html += temperature;
html += "°C</span>";
html += "</p>";
html += "</html>";
server.sendResponse(client, html.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
DS18B20.begin(); // initialize the DS18B20 sensor
Serial.println("Arduino Nano ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Pasos R\u00e1pidos
Para empezar con Arduino Nano ESP32, siga estos pasos:
- Si eres nuevo en Arduino Nano ESP32, consulta el tutorial sobre cómo configurar el entorno para Arduino Nano ESP32 en el IDE de Arduino.
- Conecte los componentes de acuerdo con el diagrama proporcionado.
- Conecte la placa Arduino Nano ESP32 a su computadora con un cable USB.
- Inicie el IDE de Arduino en su computadora.
- Seleccione la placa Arduino Nano ESP32 y su puerto COM correspondiente.
- Abra el Administrador de Bibliotecas haciendo clic en el icono Library Manager en la barra de navegación izquierda del IDE de Arduino.
- Busque “DIYables ESP32 WebServer”, luego encuentre el DIYables ESP32 WebServer.
- Haga clic en el botón Instalar para instalar la biblioteca Web Server de DIYables.
- Busca “DallasTemperature” en la caja de búsqueda, luego busca la biblioteca DallasTemperature de Miles Burton.
- Haz clic en el botón Instalar para instalar la biblioteca DallasTemperature.
- Se le pedirá que instale la dependencia. Haga clic en el botón Instalar Todo para instalar la biblioteca OneWire.
- 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 Nano ESP32
- Abre el Monitor Serial
- Revisa el resultado en el Monitor Serial.
COM6
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
- 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.
COM6
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.2
Arduino Nano ESP32 Web Server: New request received:
GET /
Autoscroll
Clear output
9600 baud
Newline
- Verás una página web muy simple de la placa Arduino Nano ESP32 en el navegador web, como se muestra a continuación:
※ Nota:
Con el código proporcionado arriba, para obtener la actualización de la temperatura, tienes que recargar la página en el navegador web. En una próxima parte, aprenderemos cómo hacer que la página web actualice el valor de la temperatura en segundo plano sin recargar la página web.
Código de Arduino Nano ESP32 - Página web gráfica
Dado que una página web gráfica contiene una gran cantidad de contenido HTML, incrustarlo en el código de Arduino Nano ESP32 como antes resulta inconveniente. Para abordar esto, necesitamos separar el código de Arduino Nano ESP32 y el código HTML en archivos diferentes:
- El código de Arduino Nano ESP32 se colocará en un archivo .ino.
- El código HTML (incluyendo HTML, CSS y JavaScript) se colocará en un archivo .h.
Para obtener más detalles sobre cómo separar el código HTML del código de Arduino Nano ESP32, consulte el tutorial Arduino Nano ESP32 - Web Server.
Pasos R\u00e1pidos
- Abre el IDE de Arduino y crea un nuevo sketch, dale un nombre, por ejemplo, newbiely.com.ino
- Copia el código de abajo y ábrelo con Arduino IDE
/*
* Este código de Arduino Nano ESP32 fue desarrollado por es.newbiely.com
* Este código de Arduino Nano ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-temperature-via-web
*/
#include <DIYables_ESP32_WebServer.h>
#include "index.h" // Include the index.h file
#include <OneWire.h>
#include <DallasTemperature.h>
#define SENSOR_PIN D2 // The Arduino Nano ESP32 pin connected to DS18B20 sensor's DATA pin
OneWire oneWire(SENSOR_PIN); // setup a oneWire instance
DallasTemperature DS18B20(&oneWire); // pass oneWire to DallasTemperature library
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
float getTemperature() {
DS18B20.requestTemperatures(); // send the command to get temperatures
float tempC = DS18B20.getTempCByIndex(0); // read temperature in °C
return tempC;
}
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("Arduino Nano ESP32 Web Server: New request received"); // for debugging
server.sendResponse(client, webpage); // webpage is from index
}
// Page handlers
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("Arduino Nano ESP32 Web Server: New request received"); // for debugging
float temperature = getTemperature();
String temperatureStr = String(temperature, 2);
server.sendResponse(client, temperatureStr.c_str(), "text/plain");
}
void setup() {
Serial.begin(9600);
delay(1000);
DS18B20.begin(); // initialize the DS18B20 sensor
Serial.println("Arduino Nano ESP32 Web Server");
// Define a route to get the web page
server.addRoute("/", handleHome);
// Define a route to get the temperature data
server.addRoute("/temperature", handleTemperature);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
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 siguiendo estos pasos:
- 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.
- 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.
- 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 cargar el código al Arduino Nano ESP32
- Accede a la página web de la placa Arduino Nano ESP32 mediante un navegador web en tu PC o teléfono inteligente, como antes. La verás tal como se muestra a continuación:
- Si modifica el contenido HTML en el index.h y no toca nada en el archivo newbiely.com.ino, al compilar y subir el código al ESP32, el IDE de Arduino no actualizará el contenido HTML.
- Para que el IDE de Arduino actualice el contenido HTML en este caso, realice un cambio en el archivo newbiely.com.ino (p. ej. agregar una línea en blanco, añadir un comentario...)
/*
* Este código de Arduino Nano ESP32 fue desarrollado por es.newbiely.com
* Este código de Arduino Nano ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-temperature-via-web
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Nano ESP32 - 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);
fetchTemperature();
setInterval(fetchTemperature, 4000); // Update temperature every 4 seconds
}
function fetchTemperature() {
fetch("/temperature")
.then(response => response.text())
.then(data => {update_view(data);});
}
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, -cvs_height + 80, cvs_width, cvs_height + 50);
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 Nano ESP32 - Web Temperature</h1>
<canvas id="cvs"></canvas>
</body>
</html>
)=====";
#endif
※ Nota: