Conecte varios DS18B20 a ESP32 y muestre valores a través de un servidor web

¡Hola lectores de tecnología! En este artículo descubrirás cómo conectar varios sensores DS18B20 al ESP32 y mostrar sus valores a través de un servidor web. ¡Sigue leyendo para aprender cómo puedes monitorear múltiples temperaturas de manera remota y en tiempo real!

¿Alguna vez ha deseado que sensores distribuidos por su hogar y jardín informen periódicamente su temperatura a un servidor central? ¡Entonces este proyecto de IoT podría ser un sólido punto de partida para usted!

Este proyecto utiliza ESP32 como dispositivo de control, que se conecta fácilmente a una red WiFi existente y crea un servidor web. Cuando un dispositivo conectado accede a este servidor web, ESP32 lee la temperatura de múltiples sensores de temperatura DS18B20 y la envía al navegador web de ese dispositivo a través de una hermosa interfaz. ¿Decepcionado? ¡Vamos a empezar!

Múltiples DS18B20 en un solo bus

Una de las características más importantes del DS18B20 es que pueden coexistir varios DS18B20 en el mismo bus 1-Wire. Porque cada DS18B20 es único código de serie de 64 bits Como ya vienen horneados en fábrica, es más fácil distinguirlos.

Esta característica puede ser una gran ventaja si desea controlar muchos DS18B20 repartidos en un área grande. En este tutorial haremos lo mismo.

Cableado de múltiples sensores DS18B20 a ESP32

Conectar sensores DS18B20 a ESP32 es bastante fácil.

Conecte varios DS18B20 a ESP32 y muestre valores a través de un servidor web

Comience conectando todos los DS18B20 en paralelo, es decir, conectando todos los pines VDD, GND y señales juntos. Luego conecte VDD a la salida de 3.3V de ESP32, GND a tierra y conecte el pin de señal al pin digital 15 de ESP32.

A continuación necesitas agregar uno. Resistencia pull-up de 4,7k para todo el bus entre los pines de señal y alimentación para mantener estable la transmisión de datos.

Conecte varios DS18B20 a ESP32 y muestre valores a través de un servidor web
Cableado de múltiples sensores de temperatura DS18B20 a ESP32

Preparando el IDE de Arduino

Existe un complemento para Arduino IDE que le permite programar el ESP32 usando Arduino IDE. Siga la guía a continuación para preparar su IDE de Arduino para que funcione con ESP32 si aún no lo ha hecho.

Conecte varios DS18B20 a ESP32 y muestre valores a través de un servidor web
Instalación de la placa ESP32 en el IDE de Arduino
Hay varias plataformas de desarrollo disponibles para programar el ESP32. Puedes elegir: Arduino IDE – destinado a aquellos que están familiarizados con ArduinoEspruino…

Instalar biblioteca para DS18B20

El protocolo Dallas 1-Wire es algo complejo y requiere mucho código para analizar la comunicación. Para ocultar esta complejidad innecesaria instalaremos DallasTemperatura.h Biblioteca para que podamos emitir comandos simples para obtener lecturas de temperatura del sensor.

Para instalar la biblioteca, navegue hasta Arduino IDE > Sketch > Incluir biblioteca > Administrar bibliotecas… Espere a que el administrador de la biblioteca descargue el índice de la biblioteca y actualice la lista de bibliotecas instaladas.

Filtra tu búsqueda escribiendo “ds18b20'. Debería haber algunas entradas. Buscar Dallastemperatura de Miles Burton. Haga clic en esta entrada y luego seleccione Instalar.

Conecte varios DS18B20 a ESP32 y muestre valores a través de un servidor web

Esta biblioteca Dallas Temperature es una biblioteca específica de hardware que maneja funciones de nivel inferior. Debe combinarse con Un alambre Biblioteca para comunicarse con cualquier dispositivo de un solo cable, no solo DS18B20. Instale esta biblioteca también.

Conecte varios DS18B20 a ESP32 y muestre valores a través de un servidor web

Encontrar direcciones de DS18B20 en el autobús

Sabemos que a cada DS18B20 se le asigna una dirección única de 64 bits para distinguirlos entre sí. primero lo haremos Encuentra esta dirección etiquete cada sensor en consecuencia. Luego se puede utilizar la dirección Leer cada sensor individualmente.

El siguiente esquema detecta todos los DS18B20 presentes en el bus y genera su dirección de un solo cable en el monitor en serie.

Puede conectar un sensor a la vez para obtener su dirección (o agregar un nuevo sensor a medida que avanza) para poder identificar cada sensor individual por su dirección. Luego puede etiquetar cada sensor.


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

// Data wire is plugged into port 15 on the ESP32
#define ONE_WIRE_BUS 15

// Setup a oneWire instance to communicate with any OneWire devices
OneWire oneWire(ONE_WIRE_BUS);

// Pass our oneWire reference to Dallas Temperature.
DallasTemperature sensors(&oneWire);

// variable to hold device addresses
DeviceAddress Thermometer;

int deviceCount = 0;

void setup(void)
{
  // start serial port
  Serial.begin(115200);

  // Start up the library
  sensors.begin();

  // locate devices on the bus
  Serial.println("Locating devices...");
  Serial.print("Found ");
  deviceCount = sensors.getDeviceCount();
  Serial.print(deviceCount, DEC);
  Serial.println(" devices.");
  Serial.println("");
  
  Serial.println("Printing addresses...");
  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)
{ }

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("");
}

Ahora abra el monitor serie. Deberías obtener lo siguiente:

Conecte varios DS18B20 a ESP32 y muestre valores a través de un servidor web

Copie todas las direcciones que necesitamos en el siguiente boceto.

Cree un servidor web ESP32 en modo WiFi Station (STA)

Ahora configuramos nuestro ESP32 en modo estación (STA) y creamos un servidor web para servir páginas web a cada cliente conectado en la red existente.

Si desea obtener más información sobre cómo crear un servidor web con ESP32 en modo AP/STA, consulte este tutorial.


Conecte varios DS18B20 a ESP32 y muestre valores a través de un servidor web
Cree un servidor web ESP32 simple en Arduino IDE
El ESP32, el sucesor recién lanzado del ESP8266, es una estrella en ascenso en proyectos relacionados con IoT o WiFi. Es un módulo WLAN rentable que…

Antes de comenzar a subir el boceto, debes hacer esto hacer algunos cambios para que funcione para usted.

  • Debe cambiar las siguientes dos variables con sus credenciales de red para permitir que ESP32 se conecte a la red existente.
    const char* ssid = "YourNetworkName";  // Enter SSID here
    const char* password = "YourPassword";  //Enter Password here
  • Antes de servir una página web, ESP32 lee la temperatura de cada DS18B20 por su dirección. Por lo tanto, debe cambiar las direcciones de los DS18B20 con las direcciones que encontró en el boceto anterior.
    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 terminado, prueba el boceto.

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

// Data wire is plugged into port 15 on the ESP32
#define ONE_WIRE_BUS 15

// Setup a oneWire instance to communicate with any OneWire devices (not just Maxim/Dallas temperature ICs)
OneWire oneWire(ONE_WIRE_BUS);

// Pass our oneWire reference to Dallas Temperature.
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  };

/*Put your SSID & Password*/
const char* ssid = "YourNetworkName";  // Enter SSID here
const char* password = "YourPassword";  //Enter Password here

WebServer server(80);             

float tempSensor1, tempSensor2, tempSensor3;
 
void setup() {
  Serial.begin(115200);
  delay(100);
  
  sensors.begin();              

  Serial.println("Connecting to ");
  Serial.println(ssid);

  //connect to your local wi-fi network
  WiFi.begin(ssid, password);

  //check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

  server.on("/", handle_OnConnect);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");

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

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

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

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>ESP32 Temperature Monitor</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>ESP32 Temperature Monitor</h1>n";
  ptr +="<p>Living Room: ";
  ptr +=tempSensor1;
  ptr +="&deg;C</p>";
  ptr +="<p>Bedroom: ";
  ptr +=tempSensor2;
  ptr +="&deg;C</p>";
  ptr +="<p>Kitchen: ";
  ptr +=tempSensor3;
  ptr +="&deg;C</p>";
  ptr +="</div>n";
  ptr +="</body>n";
  ptr +="</html>n";
  return ptr;
}

Acceso al servidor web

Después de cargar el boceto, abra el Monitor serie con una velocidad de baudios de 115200. Y presione el botón EN en el ESP32. Si todo está bien, se generará y mostrará la dirección IP dinámica recibida de su enrutador. servidor HTTP iniciado Noticias.

Conecte varios DS18B20 a ESP32 y muestre valores a través de un servidor web

A continuación, cargue un navegador y apúntelo a la dirección IP que se muestra en el monitor serie. El ESP32 debería proporcionar una página web que muestre las temperaturas de todos los DS18B20.

Conecte varios DS18B20 a ESP32 y muestre valores a través de un servidor web

Explicación detallada del código

El boceto comienza con la integración de las siguientes bibliotecas.

  • WiFi.h La biblioteca proporciona métodos WiFi específicos de ESP32 a los que llamamos para conectarnos a la red.
  • Servidor Web.h Hay algunos métodos disponibles en la biblioteca que nos ayudan a configurar un servidor y procesar solicitudes HTTP entrantes sin tener que preocuparnos por los detalles de implementación de bajo nivel.
  • DallasTemperatura.h La biblioteca es una biblioteca específica de hardware que maneja funciones de nivel inferior. Debe combinarse con Un alambre Biblioteca para que funcione.
  • OneWire.h La biblioteca se comunica con cualquier dispositivo de un solo cable, no solo con DS18B20.
#include <WiFi.h>
#include <WebServer.h>
#include <OneWire.h>
#include <DallasTemperature.h>

A continuación, creamos las instancias necesarias para el sensor de temperatura y las variables para almacenar las lecturas de temperatura. El sensor de temperatura está conectado a GPIO15.

// Data wire is plugged into port 15 on the ESP32
#define ONE_WIRE_BUS 15

// Setup a oneWire instance to communicate with any OneWire devices
OneWire oneWire(ONE_WIRE_BUS);

// Pass our oneWire reference to Dallas Temperature.
DallasTemperature sensors(&oneWire);

float tempSensor1, tempSensor2, tempSensor3;

A continuación, ingresamos las direcciones encontradas anteriormente para cada sensor de temperatura. En nuestro caso tenemos lo siguiente.

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  };

Dado que estamos configurando ESP32 en modo estación (STA), se unirá a la red WiFi existente. Por lo tanto, debemos indicarle el SSID y la contraseña de su red. A continuación iniciamos el servidor web en el puerto 80.


/*Put your SSID & Password*/
const char* ssid = "YourNetworkName";  // Enter SSID here
const char* password = "YourPassword";  //Enter Password here

WebServer server(80);

Dentro de la función Configuración()

Dentro de la función Setup(), configuramos nuestro servidor HTTP antes de ejecutarlo. Primero inicializamos la comunicación serial con la PC e inicializamos el objeto DallasTemperature con begin() Función. Inicializa el bus y detecta todos los DS18B20 presentes en él. Luego, a cada sensor se le asigna un índice y la resolución de bits se establece en 12 bits.

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

Ahora necesitamos conectarnos a la red WiFi. WiFi.begin() Función. La función utiliza SSID (nombre de red) y contraseña como parámetros.

Serial.println("Connecting to ");
Serial.println(ssid);

//connect to your local wi-fi network
WiFi.begin(ssid, password);

Mientras el ESP32 intenta conectarse a la red, podemos verificar el estado de la conexión con WiFi.status() Función.


//check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }

Una vez que el ESP32 está conectado a la red, el boceto muestra la dirección IP asignada al ESP32 WiFi.localIP() Valor en el monitor serie.

Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

Para procesar las solicitudes HTTP entrantes, debemos especificar qué código se debe ejecutar cuando se visita una URL. Para esto utilizamos En Método. Este método requiere dos parámetros. La primera es una ruta URL y la segunda es el nombre de la función que queremos ejecutar cuando se llama a esa URL.

El siguiente código indica que cuando un servidor recibe una solicitud HTTP en el directorio raíz (/) ruta, activará el handle_OnConnect Función. Tenga en cuenta que la URL proporcionada es una ruta relativa.

server.on("/", handle_OnConnect);

No hemos especificado qué debe hacer el servidor si el cliente solicita una URL distinta a la especificada server.on. Debería responder con el estado HTTP 404 (No encontrado) y un mensaje para el usuario. También ponemos esto en una función y usamos server.onNotFound para indicarle que lo ejecute cuando reciba una solicitud de una URL que no se especificó server.on

server.onNotFound(handle_NotFound);

Ahora, para iniciar nuestro servidor, llamamos al método de inicio en el objeto del servidor.

server.begin();
Serial.println("HTTP server started");

Dentro de la función Loop()

Para procesar las solicitudes HTTP entrantes reales, necesitamos llamar al handleClient() Método para el objeto del servidor.

server.handleClient();

A continuación, necesitamos crear una función que agregará la URL raíz (/). server.on ¿Recordar?

Al inicio de esta función obtenemos las lecturas de temperatura de cada sensor. Para responder a la solicitud HTTP utilizamos el enviar Método. Aunque el método se puede llamar con diferentes argumentos, su forma más simple consiste en el código de respuesta HTTP, el tipo de contenido y el contenido.

En nuestro caso enviamos el código 200 (uno de Códigos de estado HTTP), que corresponde a este DE ACUERDO Respuesta. Luego especificamos el tipo de contenido como «texto/html» y finalmente llamamos SendHTML() Función personalizada que crea una página HTML dinámica con lecturas de temperatura.

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)); 
}

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

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

Ver la página web HTML

SendHTML() La función es responsable de generar una página web cuando el servidor web ESP32 recibe una solicitud de un cliente web. Simplemente concatena el código HTML en una cadena grande y regresa al server.send() Característica que discutimos anteriormente. La función utiliza mediciones de temperatura como parámetros para generar dinámicamente el contenido HTML.

El primer texto que siempre debes enviar es el -Declaración indicando que estamos enviando código HTML.

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

El siguiente es el elemento de la ventana gráfica. garantiza que el sitio web responda en cualquier navegador web, mientras que la etiqueta de título 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>ESP32 Temperature Monitor</title>n";

Diseño del sitio web

A continuación tenemos algo de CSS para diseñar la apariencia del sitio web. Elegimos la fuente Helvetica, definimos el contenido a mostrar como un bloque en línea y lo centramos.

ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}n";

Luego, el siguiente código establece el color, la fuente y el borde alrededor del cuerpo, las etiquetas H1 y P.

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";

Configurar el encabezado de la página web

A continuación, se determina el encabezado de la página web; Puede cambiar este texto para adaptarlo a su aplicación.

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

Ver lecturas de temperatura en el sitio web.

Para mostrar dinámicamente las lecturas de temperatura, incluimos estos valores en la etiqueta del párrafo. Para mostrar el símbolo de grado usaremos una entidad HTML °

ptr +="<p>Living Room: ";
ptr +=tempSensor1;
ptr +="&deg;C</p>";
ptr +="<p>Bedroom: ";
ptr +=tempSensor2;
ptr +="&deg;C</p>";
ptr +="<p>Kitchen: ";
ptr +=tempSensor3;
ptr +="&deg;C</p>";
ptr +="</div>n";
ptr +="</body>n";
ptr +="</html>n";
return ptr;
}

Haz tu sitio web más profesional

Los programadores como nosotros a menudo nos sentimos intimidados por el diseño, pero un poco de esfuerzo puede hacer que su sitio web parezca más atractivo y profesional. La siguiente captura de pantalla le da una idea básica de lo que vamos a hacer.

Conecte varios DS18B20 a ESP32 y muestre valores a través de un servidor web

Bastante sorprendente, ¿verdad? Sin más preámbulos, apliquemos algo de estilo a nuestra página HTML anterior. Primero, copie y pegue el siguiente código para reemplazarlo SendHTML() Función del boceto de arriba.

String SendHTML(float tempSensor1,float tempSensor2,float tempSensor3){
  String ptr = "<!DOCTYPE html>";
  ptr +="<html>";
  ptr +="<head>";
  ptr +="<title>ESP32 Temperature Monitor</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>ESP32 Temperature Monitor</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 ";
  ptr +="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.656";
  ptr +="c-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.655V21";
  ptr +="C65.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-24";
  ptr +="L32.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.438";
  ptr +="C56.053,8.418,54.415,6.781,52.396,6.781z'fill=#3B97D3 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Living Room</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.688";
  ptr +="C43.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 ";
  ptr +="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.391";
  ptr +="c3.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.728";
  ptr +="c0.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.488";
  ptr +="c0.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.502";
  ptr +="c1.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.054";
  ptr +="c0.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'>Bedroom</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.031";
  ptr +="c-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.031";
  ptr +="C16.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.906";
  ptr +="C48,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.083";
  ptr +="V2.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'>Kitchen</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;
}

Si intenta comparar esta característica con la anterior, encontrará que son similares excepto por estos cambios.

  • Usamos Google en nombre Abierto sin Fuente web para nuestro sitio web. Tenga en cuenta que no podrá ver la fuente de Google sin una conexión a Internet activa en el dispositivo. Las fuentes de Google se cargan en un instante.
    ptr +="<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>";
  • Los símbolos utilizados para mostrar las lecturas de temperatura son en realidad una Gráficas vectoriales escalables (SVG) en -Etiqueta definida. No se requieren conocimientos especiales de programación para crear SVG. Puedes usar Editor SVG de Google para crear gráficos para su sitio. Usamos estos íconos SVG.
    Conecte varios DS18B20 a ESP32 y muestre valores a través de un servidor web

Mejora del código: actualización automática de la página

Una de las mejoras que puede realizar con nuestro código es actualizar automáticamente la página para actualizar el valor del sensor.

Al agregar una única metaetiqueta a su documento HTML, puede indicarle al navegador que recargue automáticamente la página en un intervalo específico.

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

Coloque este código en el -Etiqueta tu documento. Esta metaetiqueta le indica al navegador que se actualice cada dos segundos. ¡Muy elegante!

Cargar dinámicamente datos del sensor usando AJAX

Actualizar una página web no es particularmente práctico si tienes un sitio web grande. Un mejor método es utilizar Javascript y XML asincrónicos (AJAX) para que podamos solicitar datos del servidor de forma asincrónica (en segundo plano) sin actualizar la página.

El Solicitud XMLHttp El objeto en JavaScript se usa a menudo para ejecutar AJAX en páginas web. Ejecuta la solicitud GET silenciosa en el servidor y actualiza el elemento en la página. AJAX no es una tecnología nueva ni un lenguaje diferente, solo tecnologías existentes utilizadas de nuevas maneras. Además, AJAX también permite esto

  • Solicitar datos de 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.

Aquí está el script AJAX que usaremos. Coloque este script justo antes de cerrar el -Etiquetas.

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 guión comienza con el día.