¡Bienvenidos al tutorial sobre cómo mostrar los valores de múltiples sensores DS18B20 en un servidor web utilizando el ESP8266 NodeMCU! En este artículo, aprenderás paso a paso cómo configurar tu NodeMCU para leer los datos de varios sensores de temperatura DS18B20 y mostrarlos de forma accesible en un servidor web. ¡Sigue leyendo para descubrir cómo poner en práctica esta emocionante funcionalidad en tu proyecto de IoT!
¿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 ESP8266 NodeMCU 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, ESP8266 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 al ESP8266 NodeMCU
Conectar sensores DS18B20 a ESP8266 NodeMCU es bastante fácil.
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, GND a tierra y conecte el pin de señal al pin digital D2 en ESP8266 NodeMCU.
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.
Preparando el IDE de Arduino
Existe un complemento para Arduino IDE que le permite programar el ESP8266 NodeMCU utilizando Arduino IDE. Siga la guía a continuación para preparar su IDE de Arduino para que funcione con ESP8266 si aún no lo ha hecho.
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.
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.
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 D2 on the ESP8266
#define ONE_WIRE_BUS D2
// 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:
Copie todas las direcciones que necesitamos en el siguiente boceto.
Cree el servidor web ESP8266 en modo estación (STA).
Ahora configuramos nuestro ESP8266 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 ESP8266 NodeMCU en modo AP/STA, consulte este tutorial.
Antes de comenzar a subir el boceto, debes hacer esto hacer algunos cambios para que funcione para usted.
- Debe cambiar las dos variables siguientes con sus credenciales de red para que ESP8266 pueda conectarse 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, ESP8266 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 <ESP8266WebServer.h>
#include <OneWire.h>
#include <DallasTemperature.h>
// Data wire is plugged into port D2 on the ESP8266
#define ONE_WIRE_BUS D2
// 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;
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
ESP8266WebServer server(80);
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>ESP8266 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>ESP8266 Temperature Monitor</h1>n";
ptr +="<p>Living Room: ";
ptr +=tempSensor1;
ptr +="°C</p>";
ptr +="<p>Bedroom: ";
ptr +=tempSensor2;
ptr +="°C</p>";
ptr +="<p>Kitchen: ";
ptr +=tempSensor3;
ptr +="°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 RST en NodeMCU. Si todo está bien, se generará y mostrará la dirección IP dinámica recibida de su enrutador. servidor HTTP iniciado Noticias.
A continuación, cargue un navegador y apúntelo a la dirección IP que se muestra en el monitor serie. El ESP8266 debería proporcionar una página web que muestre las temperaturas de todos los DS18B20.
Explicación detallada del código
El boceto comienza con la integración de las siguientes bibliotecas.
- ESP8266ServidorWeb.h La biblioteca proporciona métodos WiFi específicos de ESP8266 a los que llamamos para conectarnos a la red. También hay algunos métodos disponibles para ayudarnos 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 <ESP8266WebServer.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 GPIO D2.
// Data wire is plugged into port D2 on the ESP8266
#define ONE_WIRE_BUS D2
// 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 el ESP8266 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
ESP8266WebServer 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 ESP8266 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 ESP8266 está conectado a la red, el boceto muestra la dirección IP asignada al ESP8266 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 ESP8266 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>ESP8266 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>ESP8266 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 +="°C</p>";
ptr +="<p>Bedroom: ";
ptr +=tempSensor2;
ptr +="°C</p>";
ptr +="<p>Kitchen: ";
ptr +=tempSensor3;
ptr +="°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.
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>ESP8266 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>ESP8266 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
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.