Conectar múltiples DS18B20 con ESP32 y mostrar valores en servidor web

¿Alguna vez has deseado tener sensores distribuidos por toda tu casa y jardín que informen regularmente sobre la temperatura a un servidor central? Este proyecto de IoT podría ser el impulso que necesitas. Utilizando el ESP32 como dispositivo de control, puedes conectarlo fácilmente a una red WiFi existente y crear un servidor web. Cada vez que un dispositivo conectado accede a este servidor, el ESP32 lee la temperatura de múltiples sensores DS18B20 y la envía al navegador del dispositivo con una interfaz atractiva. ¡Empecemos!

Conexión de múltiples sensores DS18B20 en un único bus

Una de las características más destacadas del DS18B20 es su capacidad para coexistir varios sensores en el mismo bus de 1-Wire. Cada sensor DS18B20 tiene un código serial de 64 bits que se graba en la fábrica, lo que facilita su diferenciación. Esta función es especialmente útil cuando se desean controlar varios sensores distribuidos en un área extensa.

La posibilidad de conectar múltiples sensores es ventajosa en diversas aplicaciones, como el monitoreo de temperatura en un invernadero o en distintas habitaciones de una casa. En este tutorial, implementaremos este enfoque para medir la temperatura en diferentes ubicaciones.

Cómo conectar múltiples sensores DS18B20 al ESP32

La conexión de los sensores DS18B20 al ESP32 es relativamente sencilla. Para ello, sigue estos pasos:

• Conecta todos los sensores DS18B20 en paralelo: une todos los pines VDD, GND y los pines de señal.
• Conecta el pin VDD al pin de salida de 3.3V del ESP32, el pin GND a tierra y el pin de señal al pin digital 15 del ESP32.
• Asegúrate de agregar un resistor de pull-up de 4.7k ohmios entre el pin de señal y el pin de alimentación para mantener estable la transferencia de datos.

Preparando el entorno de desarrollo en Arduino IDE

Para programar el ESP32 utilizando el entorno de desarrollo de Arduino, es necesario instalar algunas bibliotecas adicionales. Si aún no lo has hecho, sigue este tutorial para preparar tu Arduino IDE.

Instalación de la biblioteca para DS18B20

El protocolo Dallas 1-Wire es complejo y requiere mucho código para gestionar la comunicación. Por eso, vamos a instalar la biblioteca DallasTemperature.h, que simplifica las instrucciones para obtener lecturas de temperatura.

Para instalar esta biblioteca, navega a Arduino IDE > Sketch > Incluir Biblioteca > Gestionar Bibliotecas... y espera a que el Gestor de Bibliotecas descargue el índice. Filtra tu búsqueda escribiendo 'ds18b20' y selecciona DallasTemperature por Miles Burton para instalarla.

Es importante mencionar que la biblioteca DallasTemperature requiere ser emparejada con OneWire para comunicarse con dispositivos que utilizan el protocolo de un solo hilo, no solo con el DS18B20. Asegúrate de instalar también esta última.

Encontrando las direcciones de los DS18B20 en el bus

Cada sensor DS18B20 tiene una dirección única de 64 bits asignada para diferenciarlos. Lo primero que debemos hacer es localizar esa dirección para etiquetar adecuadamente cada sensor. Esta dirección será utilizada para leer cada sensor de manera individual.

El siguiente código detecta todos los DS18B20 presentes en el bus y muestra sus direcciones en el monitor serial:

#include <OneWire.h>
#include <DallasTemperature.h>

#define ONE_WIRE_BUS 15  // El cable de datos se conecta al puerto 15 del ESP32

OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
DeviceAddress Thermometer;
int deviceCount = 0;

void setup() {
  Serial.begin(115200);
  sensors.begin();
  Serial.println("Buscando dispositivos...");
  deviceCount = sensors.getDeviceCount();
  Serial.print("Se encontraron ");
  Serial.print(deviceCount, DEC);
  Serial.println(" dispositivos.");
  Serial.println("Imprimiendo direcciones...");
  for (int i = 0; i < deviceCount; i++) {
    Serial.print("Sensor ");
    Serial.print(i + 1);
    Serial.print(" : ");
    sensors.getAddress(Thermometer, i);
    printAddress(Thermometer);
  }
}

void loop() { }

void printAddress(DeviceAddress deviceAddress) { 
  for (uint8_t i = 0; i < 8; i++) {
    Serial.print("0x");
    if (deviceAddress[i] < 0x10) Serial.print("0");
    Serial.print(deviceAddress[i], HEX);
    if (i < 7) Serial.print(", ");
  }
  Serial.println("");
}

Una vez cargado el sketch, abre el monitor serial. Deberías ver las direcciones de cada sensor. Copia todas las direcciones ya que las necesitaremos en el siguiente paso.

Creando un servidor web en ESP32 utilizando modo WiFi Station (STA)

A continuación, configuraremos nuestro ESP32 en modo estación (STA) y crearemos un servidor web que servirá páginas web a cualquier cliente conectado en la red existente.

Antes de subir el sketch, debes modificar algunas variables para que funcione en tu entorno:

• Cambia los siguientes dos valores con tus credenciales de red para que el ESP32 se conecte a la red existente:

  const char* ssid = "TuNombreDeRed";  // Ingresa el SSID aquí
  const char* password = "TuContraseña";  // Ingresa la contraseña aquí

• Antes de servir una página web, el ESP32 lee la temperatura de cada DS18B20 por su dirección. Así que necesitarás cambiar las direcciones de los DS18B20s con las que encontraste anteriormente:

  uint8_t sensor1[8] = { 0x28, 0xEE, 0xD5, 0x64, 0x1A, 0x16, 0x02, 0xEC };
  uint8_t sensor2[8] = { 0x28, 0x61, 0x64, 0x12, 0x3C, 0x7C, 0x2F, 0x27 };
  uint8_t sensor3[8] = { 0x28, 0x61, 0x64, 0x12, 0x3F, 0xFD, 0x80, 0xC6 };

Una vez que hayas hecho los cambios, prueba el sketch.

#include <WiFi.h>
#include <WebServer.h>
#include <OneWire.h>
#include <DallasTemperature.h>

#define ONE_WIRE_BUS 15
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);

uint8_t sensor1[8] = { 0x28, 0xEE, 0xD5, 0x64, 0x1A, 0x16, 0x02, 0xEC };
uint8_t sensor2[8] = { 0x28, 0x61, 0x64, 0x12, 0x3C, 0x7C, 0x2F, 0x27 };
uint8_t sensor3[8] = { 0x28, 0x61, 0x64, 0x12, 0x3F, 0xFD, 0x80, 0xC6 };

const char* ssid = "TuNombreDeRed";  // Ingresa el SSID aquí
const char* password = "TuContraseña";  // Ingresa la contraseña aquí

WebServer server(80);             

float tempSensor1, tempSensor2, tempSensor3;

void setup() {
  Serial.begin(115200);
  delay(100);
  
  sensors.begin();              
  Serial.println("Conectando a ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("Conexión WiFi exitosa!");
  Serial.print("IP obtenida: ");  Serial.println(WiFi.localIP());

  server.on("/", handle_OnConnect);
  server.onNotFound(handle_NotFound);
  server.begin();
  Serial.println("Servidor HTTP iniciado");
}

void loop() {
  server.handleClient();
}

void handle_OnConnect() {
  sensors.requestTemperatures();
  tempSensor1 = sensors.getTempC(sensor1);
  tempSensor2 = sensors.getTempC(sensor2);
  tempSensor3 = sensors.getTempC(sensor3);
  server.send(200, "text/html", SendHTML(tempSensor1, tempSensor2, tempSensor3)); 
}

void handle_NotFound() {
  server.send(404, "text/plain", "No encontrado");
}

String SendHTML(float tempSensor1, float tempSensor2, float tempSensor3) {
  String ptr = "<!DOCTYPE html> <html>n";
  ptr += "<head><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">n";
  ptr += "<title>Monitor de Temperatura ESP32</title>n";
  ptr += "<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}n";
  ptr += "body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;}n";
  ptr += "p {font-size: 24px;color: #444444;margin-bottom: 10px;}n";
  ptr += "</style>n";
  ptr += "</head>n";
  ptr += "<body>n";
  ptr += "<div id="webpage">n";
  ptr += "<h1>Monitor de Temperatura ESP32</h1>n";
  ptr += "<p>Sala de Estar: ";
  ptr += tempSensor1;
  ptr += "&deg;C</p>";
  ptr += "<p>Dormitorio: ";
  ptr += tempSensor2;
  ptr += "&deg;C</p>";
  ptr += "<p>Cocina: ";
  ptr += tempSensor3;
  ptr += "&deg;C</p>";
  ptr += "</div>n";
  ptr += "</body>n";
  ptr += "</html>n";
  return ptr;
}

Accediendo al servidor web

Después de subir el sketch, abre el Monitor Serial a una velocidad de 115200 baudios y presiona el botón EN en el ESP32. Si todo está bien, debería mostrar la dirección IP dinámica obtenida de tu enrutador y el mensaje Servidor HTTP iniciado.

Luego, abre un navegador y dirígete a la dirección IP que aparece en el monitor serial. El ESP32 debería servir una página web que muestre las temperaturas de todos los DS18B20.

Explicación detallada del código

El sketch comienza incluyendo las siguientes bibliotecas:

• WiFi.h: Proporciona métodos específicos de ESP32 para conectarse a la red WiFi.
• WebServer.h: Contiene métodos que ayudan a configurar un servidor y gestionar solicitudes HTTP entrantes.
• DallasTemperature.h: Maneja funciones específicas del hardware y debe ser emparejada con One Wire para funcionar correctamente.
• OneWire.h: Permite la comunicación con cualquier dispositivo de un solo hilo, no solo con el DS18B20.

A continuación, se crean las instancias necesarias para el sensor de temperatura y variables para almacenar las lecturas de temperatura. El sensor de temperatura se conecta a GPIO15.

#define ONE_WIRE_BUS 15
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
float tempSensor1, tempSensor2, tempSensor3;

Después, se ingresan las direcciones previamente encontradas para cada sensor de temperatura. En nuestro caso, tenemos las direcciones de tres sensores.

uint8_t sensor1[8] = { 0x28, 0xEE, 0xD5, 0x64, 0x1A, 0x16, 0x02, 0xEC };
uint8_t sensor2[8] = { 0x28, 0x61, 0x64, 0x12, 0x3C, 0x7C, 0x2F, 0x27 };
uint8_t sensor3[8] = { 0x28, 0x61, 0x64, 0x12, 0x3F, 0xFD, 0x80, 0xC6 };

Al configurar el ESP32 en modo estación (STA), se unirá a la red WiFi existente. Es necesario proporcionar el SSID y la contraseña de tu red, y luego iniciar el servidor web en el puerto 80.

const char* ssid = "TuNombreDeRed";  // Ingresa el SSID aquí
const char* password = "TuContraseña";  // Ingresa la contraseña aquí
WebServer server(80);

Dentro de la función de configuración

En la función setup(), configuramos nuestro servidor HTTP antes de ejecutarlo. Inicializamos la comunicación serial con el PC y el objeto DallasTemperature utilizando la función begin(), que detecta todos los DS18B20 presentes en el bus.

Serial.begin(115200);
delay(100);
sensors.begin();

Después, unimos el ESP32 a la red WiFi utilizando la función WiFi.begin(), que toma el SSID y la contraseña como parámetros.

Serial.println("Conectando a ");
Serial.println(ssid);
WiFi.begin(ssid, password);

Mientras el ESP32 intenta conectarse, podemos comprobar el estado de la conectividad con WiFi.status().

while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
}

Una vez conectado, el sketch imprime la dirección IP asignada al ESP32 mostrando el valor de WiFi.localIP().

Serial.println("");
Serial.println("WiFi conectado..!");
Serial.print("Obtuve IP: ");  Serial.println(WiFi.localIP());

Para manejar las solicitudes HTTP entrantes, especificamos qué código ejecutar cuando se accede a una URL. Utilizamos el método on, que recibe dos parámetros: el camino de la URL y el nombre de la función que deseamos ejecutar.

El siguiente código indica que cuando el servidor recibe una solicitud HTTP en la raíz (/), se ejecutará la función handle_OnConnect.

server.on("/", handle_OnConnect);

Si el cliente solicita una URL diferente, el servidor debería responder con un estado HTTP 404 (No Encontrado) y un mensaje para el usuario, a lo que hemos asignado una función también:

server.onNotFound(handle_NotFound);

Finalmente, para iniciar nuestro servidor, llamamos al método begin() del objeto servidor.

server.begin();
Serial.println("Servidor HTTP iniciado");

Dentro de la función loop

Para manejar las solicitudes HTTP entrantes, llamamos al método handleClient() en el objeto servidor.

Luego, creamos la función que se adjunta a la URL raíz con server.on. En esta función, obtenemos la lectura de temperatura de cada sensor y respondemos a la solicitud HTTP utilizando el método send. Este método puede ser llamado con diferentes conjuntos de argumentos, pero su forma más simple consiste en el código de respuesta HTTP, el tipo de contenido y el contenido.

void handle_OnConnect() {
  sensors.requestTemperatures();
  tempSensor1 = sensors.getTempC(sensor1);
  tempSensor2 = sensors.getTempC(sensor2);
  tempSensor3 = sensors.getTempC(sensor3);
  server.send(200, "text/html", SendHTML(tempSensor1, tempSensor2, tempSensor3)); 
}

También necesitamos crear una función para manejar la página de error 404.

void handle_NotFound() {
  server.send(404, "text/plain", "No encontrado");
}

Mostrando la página web HTML

La función SendHTML() es responsable de generar una página web cada vez que el servidor web de ESP32 recibe una solicitud de un cliente. Simplemente concatena el código HTML en una cadena grande y lo devuelve a la función server.send().

La primera línea que siempre debes enviar es la declaración <!DOCTYPE>, que indica que estamos enviando código HTML.

String SendHTML(float tempSensor1, float tempSensor2, float tempSensor3) {
  String ptr = "<!DOCTYPE html> <html>n";

A continuación, el elemento <meta> viewport hace que la página web sea responsiva en cualquier navegador, mientras que la etiqueta title establece el título de la página.

ptr += "<head><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">n";
ptr += "<title>Monitor de Temperatura ESP32</title>n";

Estilizando la página web

Luego, agregamos algo de CSS para darle estilo a la apariencia de la página web. Elegimos la fuente Helvetica, definimos el contenido como un bloque en línea y centrado.

ptr += "<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}n";
ptr += "body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;}n";
ptr += "p {font-size: 24px;color: #444444;margin-bottom: 10px;}n";

El siguiente código establece el color, la fuente y el margen alrededor de las etiquetas body, h1 y p.

ptr += "</style>n";
ptr += "</head>n";
ptr += "<body>n";

Configurando el encabezado de la página web

A continuación, se establece el encabezado de la página web. Puedes cambiar este texto por cualquier cosa que se ajuste a tu aplicación.

ptr += "<div id="webpage">n";
ptr += "<h1>Monitor de Temperatura ESP32</h1>n";

Mostrando las lecturas de temperatura en la página web

Para mostrar dinámicamente las lecturas de temperatura, colocamos esos valores en una etiqueta de párrafo. Para mostrar el símbolo de grado, utilizamos la entidad HTML &deg;.

ptr += "<p>Sala de Estar: ";
ptr += tempSensor1;
ptr += "&deg;C</p>";
ptr += "<p>Dormitorio: ";
ptr += tempSensor2;
ptr += "&deg;C</p>";
ptr += "<p>Cocina: ";
ptr += tempSensor3;
ptr += "&deg;C</p>";
ptr += "</div>n";
ptr += "</body>n";
ptr += "</html>n";
return ptr;

Estilizando la página web para que luzca más profesional

Los programadores a menudo se sienten intimidados por el diseño, pero un poco de esfuerzo puede hacer que tu página web luzca más atractiva y profesional. A continuación, aplicaremos algunos estilos a nuestra página HTML anterior.

Sin más preámbulos, sustituye la función SendHTML() anterior por el siguiente código, que incluye mejoras estéticas:

String SendHTML(float tempSensor1, float tempSensor2, float tempSensor3) {
  String ptr = "<!DOCTYPE html>";
  ptr += "<html>";
  ptr += "<head>";
  ptr += "<title>Monitor de Temperatura ESP32</title>";
  ptr += "<meta name='viewport' content='width=device-width, initial-scale=1.0'>";
  ptr += "<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>";
  ptr += "<style>";
  ptr += "html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #444444;}";
  ptr += "body{margin-top: 50px;} ";
  ptr += "h1 {margin: 50px auto 30px;} ";
  ptr += ".side-by-side{display: table-cell;vertical-align: middle;position: relative;}";
  ptr += ".text{font-weight: 600;font-size: 19px;width: 200px;}";
  ptr += ".temperature{font-weight: 300;font-size: 50px;padding-right: 15px;}";
  ptr += ".living-room .temperature{color: #3B97D3;}";
  ptr += ".bedroom .temperature{color: #F29C1F;}";
  ptr += ".kitchen .temperature{color: #26B99A;}";
  ptr += ".superscript{font-size: 17px;font-weight: 600;position: absolute;right: -5px;top: 15px;}";
  ptr += ".data{padding: 10px;}";
  ptr += ".container{display: table;margin: 0 auto;}";
  ptr += ".icon{width:82px}";
  ptr += "</style>";
  ptr += "</head>";
  ptr += "<body>";
  ptr += "<h1>Monitor de Temperatura ESP32</h1>";
  ptr += "<div class='container'>";
  ptr += "<div class='data living-room'>";
  ptr += "<div class='side-by-side icon'>";
  ptr += "<svg enable-background='new 0 0 65.178 45.699'height=45.699px id=Layer_1 version=1.1 viewBox='0 0 65.178 45.699'width=65.178px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><polygon fill=#3B97D3 points='8.969,44.261 8.969,16.469 7.469,16.469 7.469,44.261 1.469,44.261 1.469,45.699 14.906,45.699 14.906,44.261 '/><polygon fill=#3B97D3 points='13.438,0 3,0 0,14.938 16.438,14.938 '/><polygon fill=#3B97D3 points='29.927,45.699 26.261,45.699 26.261,41.156 32.927,41.156 '/><polygon fill=#3B97D3 points='58.572,45.699 62.239,45.699 62.239,41.156 55.572,41.156 '/><path d='M61.521,17.344c-2.021,0-3.656,1.637-3.656,3.656v14.199H30.594V21c0-2.02-1.638-3.656-3.656-3.656c-2.02,0-3.657,1.636-3.657,3.656v14.938c0,2.021,1.637,3.655,3.656,3.655H61.52c2.02,0,3.655-1.637,3.655-3.655V21C65.177,18.98,63.54,17.344,61.521,17.344z'fill=#3B97D3 /><g><path d='M32.052,30.042c0,2.02,1.637,3.656,3.656,3.656h16.688c2.019,0,3.656-1.638,3.656-3.656v-3.844h-24L32.052,30.042L32.052,30.042z'fill=#3B97D3 /><path d='M52.396,6.781H35.709c-2.02,0-3.656,1.637-3.656,3.656v14.344h24V10.438C56.053,8.418,54.415,6.781,52.396,6.781z'fill=#3B97D3 /></g></svg>";
  ptr += "</div>";
  ptr += "<div class='side-by-side text'>Sala de Estar</div>";
  ptr += "<div class='side-by-side temperature'>";
  ptr += (int)tempSensor1;
  ptr += "<span class='superscript'>°C</span></div>";
  ptr += "</div>";
  ptr += "<div class='data bedroom'>";
  ptr += "<div class='side-by-side icon'>";
  ptr += "<svg enable-background='new 0 0 43.438 35.75'height=35.75px id=Layer_1 version=1.1 viewBox='0 0 43.438 35.75'width=43.438px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M25.489,14.909H17.95C13.007,14.908,0,15.245,0,20.188v3.688h43.438v-3.688C43.438,15.245,30.431,14.909,25.489,14.909z'fill=#F29C1F /><polygon fill=#F29C1F points='0,31.25 0,35.75 2.5,35.75 4.5,31.25 38.938,31.25 40.938,35.75 43.438,35.75 43.438,31.25 43.438,25.375 0,25.375 	'/><path d='M13.584,11.694c-3.332,0-6.033,0.973-6.033,2.175c0,0.134,0.041,0.264,0.105,0.391c3.745-0.631,7.974-0.709,10.341-0.709h1.538C19.105,12.501,16.613,11.694,13.584,11.694z'fill=#F29C1F /><path d='M30.009,11.694c-3.03,0-5.522,0.807-5.951,1.856h1.425V13.55c2.389,0,6.674,0.081,10.444,0.728c0.069-0.132,0.114-0.268,0.114-0.408C36.041,12.668,33.34,11.694,30.009,11.694z'fill=#F29C1F /><path d='M6.042,14.088c0-2.224,3.376-4.025,7.542-4.025c3.825,0,6.976,1.519,7.468,3.488h1.488c0.49-1.97,3.644-3.489,7.469-3.489c4.166,0,7.542,1.801,7.542,4.025c0,0.17-0.029,0.337-0.067,0.502c1.08,0.247,2.088,0.549,2.945,0.926V3.481C40.429,1.559,38.871,0,36.948,0H6.49C4.568,0,3.009,1.559,3.009,3.481v12.054c0.895-0.398,1.956-0.713,3.095-0.968C6.069,14.41,6.042,14.251,6.042,14.088z'fill=#F29C1F /></g></svg>";
  ptr += "</div>";
  ptr += "<div class='side-by-side text'>Dormitorio</div>";
  ptr += "<div class='side-by-side temperature'>";
  ptr += (int)tempSensor2;
  ptr += "<span class='superscript'>°C</span></div>";
  ptr += "</div>";
  ptr += "<div class='data kitchen'>";
  ptr += "<div class='side-by-side icon'>";
  ptr += "<svg enable-background='new 0 0 48 31.5'height=31.5px id=Layer_1 version=1.1 viewBox='0 0 48 31.5'width=48px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><circle cx=24.916 cy=15.75 fill=#26B99A r=15.75 /><path d='M14.917,15.75c0-5.522,4.478-10,10-10c2.92,0,5.541,1.26,7.369,3.257l1.088-1.031c-2.103-2.285-5.106-3.726-8.457-3.726c-6.351,0-11.5,5.149-11.5,11.5c0,3.127,1.252,5.958,3.277,8.031l1.088-1.031C16.011,20.945,14.917,18.477,14.917,15.75z'fill=#FFFFFF /><path d='M45.766,2.906c-1.232,0-2.232,1-2.232,2.234v11.203c0,0,2.76,0,3,0v12H48v-12V2.906C48,2.906,46.035,2.906,45.766,2.906z'fill=#26B99A /><path d='M6.005,2.917v5.184c0,0.975-0.638,1.792-1.516,2.083V2.917H3.021v7.267c-0.878-0.29-1.516-1.107-1.516-2.083V2.917H0v5.458c0,1.802,1.306,3.291,3.021,3.592v16.376H4.49v-16.38c1.695-0.318,2.979-1.8,2.979-3.588V2.917H6.005z'fill=#26B99A /></svg>";
  ptr += "</div>";
  ptr += "<div class='side-by-side text'>Cocina</div>";
  ptr += "<div class='side-by-side temperature'>";
  ptr += (int)tempSensor3;
  ptr += "<span class='superscript'>°C</span></div>";
  ptr += "</div>";
  ptr += "</div>";
  ptr += "</body>";
  ptr += "</html>";
  return ptr;

Mejoras al código: actualización automática de la página

Una de las mejoras que puedes implementar es la actualización automática de la página para mantener los valores de los sensores actualizados. Con la adición de una única etiqueta meta en tu documento HTML, puedes indicar al navegador que recargue automáticamente la página a intervalos establecidos.

<meta http-equiv="refresh" content="2">

Coloca este código en la etiqueta <head> de tu documento, y el navegador actualizará la página cada dos segundos. ¡Es una solución práctica!

Carga dinámica de datos del sensor con AJAX

Actualizar una página web no es práctico si tiene muchos elementos pesados. Una mejor solución es utilizar AJAX, que permite solicitar datos del servidor de manera asíncrona (en segundo plano) sin recargar la página.

El objeto XMLHttpRequest en JavaScript se usa comúnmente para ejecutar AJAX en páginas web. Permite realizar solicitudes silenciosas GET al servidor y actualizar los elementos de la página. AJAX no es una nueva tecnología ni un lenguaje diferente, sino el uso de tecnologías existentes de nuevas maneras. Además, AJAX facilita:

• Solicitar datos a un servidor después de que la página se haya cargado.
• Recibir datos de un servidor después de que la página se haya cargado.
• Enviar datos a un servidor en segundo plano.

A continuación, se presenta el script AJAX que utilizaremos. Coloca este script justo antes de cerrar la etiqueta </head>.

ptr += "<script>n";
ptr += "setInterval(loadDoc,1000);n";
ptr += "function loadDoc() {n";
ptr += "var xhttp = new XMLHttpRequest();n";
ptr += "xhttp.onreadystatechange = function() {n";
ptr += "if (this.readyState == 4 && this.status == 200) {n";
ptr += "document.body.innerHTML =this.responseText}n";
ptr += "};n";
ptr += "xhttp.open("GET", "/", true);n";
ptr += "xhttp.send();n";
ptr += "}n";
ptr += "</script>n";

El script comienza con la etiqueta <script>. Como el script AJAX es simplemente JavaScript, debe escribirse dentro de la etiqueta <script>. Para que esta función se llame repetidamente, usaremos la función JavaScript setInterval(), que toma dos parámetros: una función a ejecutar y un intervalo de tiempo (en milisegundos) para determinar con qué frecuencia ejecutar la función.

ptr += "<script>n";
ptr += "setInterval(loadDoc,1000);n";

El núcleo de este script es la función loadDoc(). Dentro de esta función, se crea un objeto XMLHttpRequest() que se utiliza para solicitar datos de un servidor web.

ptr += "function loadDoc() {n";
ptr += "var xhttp = new XMLHttpRequest();n";

La función xhttp.onreadystatechange() se llama cada vez que cambia el estado de la solicitud. La propiedad readyState contiene el estado del objeto XMLHttpRequest, que puede tener uno de los siguientes valores:

• 0: solicitud no inicializada
• 1: conexión con el servidor establecida
• 2: solicitud recibida
• 3: procesando solicitud
• 4: solicitud finalizada y respuesta lista

La propiedad status indica el estado del objeto XMLHttpRequest, con los siguientes valores:

• 200: "OK"
• 403: "Prohibido"
• 404: "Página no encontrada"

Cuando readyState es 4 y status es 200, la respuesta está lista y el contenido del cuerpo (que contiene las lecturas de temperatura) se actualiza.

ptr += "xhttp.onreadystatechange = function() {n";
ptr += "if (this.readyState == 4 && this.status == 200) {n";
ptr += "document.body.innerHTML =this.responseText}n";
ptr += "};n";

La solicitud HTTP se inicia a través de las funciones open() y send().

ptr += "xhttp.open("GET", "/", true);n";
ptr += "xhttp.send();n";
ptr += "}n";