Monitoreo en vivo de estaciones meteorológicas basadas en ESP8266 y BME280

Cree una estación meteorológica ESP32 simple usando BME280

El ESP32 es un microcontrolador versátil y potente que permite crear una variedad de proyectos electrónicos interesantes. En este artículo, te mostraremos cómo crear una estación meteorológica simple utilizando el ESP32 y el sensor BME280. ¡Sigue leyendo para descubrir cómo puedes monitorear el clima en tiempo real con este proyecto!

No confíe únicamente en las aplicaciones meteorológicas de los teléfonos inteligentes o en las estaciones meteorológicas comerciales que proporcionan datos de estaciones situadas a kilómetros de distancia de usted. ¡En lugar de eso, puedes convertirte en tu propio pronosticador del tiempo con este proyecto de IoT!

Este proyecto utiliza el ESP32 como dispositivo de control que puede conectarse fácilmente a cualquier red WiFi existente y crear un servidor web. Cuando un dispositivo conectado accede a este servidor web, el ESP32 recupera datos de temperatura, humedad, presión barométrica y altitud del sensor BME280 y los muestra en el navegador web del dispositivo con una interfaz fácil de usar. ¿Entusiasta? ¡Entonces comencemos!

Sensor de temperatura, humedad y presión BME280

Primero, analicemos brevemente el módulo BME280.

El BME280 es un sensor digital de temperatura, humedad y presión de próxima generación de Bosch. Es el sucesor de sensores como BMP180, BMP085 y BMP183.

Cree una estación meteorológica ESP32 simple usando BME280

El módulo BME280 funciona en un rango de voltaje de 3,3 V a 5 V, lo que lo hace ideal para interactuar con microcontroladores de 3,3 V como el ESP32.

El módulo tiene una interfaz I2C simple de dos cables para comunicación. La dirección I2C predeterminada para el módulo BME280 es 0x76, pero se puede cambiar fácilmente a 0x77 mediante un procedimiento sencillo.

Cableado del sensor BME280 a ESP32

Las conexiones son bastante simples. Comience conectando el pin VIN del módulo BME280 a la salida de 3.3V del ESP32 y el pin GND a tierra.

A continuación, conecte el pin SCL del módulo BME280 al pin D22 (reloj I2C) del ESP32 y el pin SDA al pin D21 (datos I2C).

La siguiente tabla enumera las asignaciones de pines:

Sensor BME280 ESP32
VCC 3,3 V
Dimensiones Dimensiones
SCL T22 – El maravilloso mundo de la locura
ASD T21 – El maravilloso mundo de los sueños

El siguiente diagrama muestra cómo cablear todo.

Cree una estación meteorológica ESP32 simple usando BME280

Preparando el IDE de Arduino

Hay un complemento disponible para Arduino IDE que le permite programar el ESP32 dentro del Arduino IDE. Si aún no lo ha configurado, siga el tutorial a continuación para preparar su IDE de Arduino para que funcione con ESP32.

Cree una estación meteorológica ESP32 simple usando BME280
Instalación de la placa ESP32 en el IDE de Arduino
Hay varias plataformas de desarrollo disponibles para programar el ESP32. Puedes optar por: Arduino IDE – para aquellos que estén familiarizados con ArduinoEspruino…

Instalación de la biblioteca para BME280

Comunicarse con un módulo BME280 puede resultar un poco complejo, pero afortunadamente Biblioteca Adafruit BME280 fue diseñado para abstraer estas complejidades y permitirnos emitir comandos simples para leer datos de temperatura, humedad relativa y presión barométrica.

Para instalar esta biblioteca vaya a IDE de Arduino > Bosquejo > 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.

Cree una estación meteorológica ESP32 simple usando BME280

Para encontrar la biblioteca, filtre su búsqueda escribiendo «bme280'. Deberías ver algunas entradas. Estás buscando Adafruit BME280 Biblioteca de Adafruta y haga clic en esta entrada. Luego seleccione «Instalar».

Cree una estación meteorológica ESP32 simple usando BME280

Vale la pena señalar que la biblioteca de sensores BME280 en el Backend de soporte de sensores de AdafruitBuscar en el Administrador de biblioteca Sensor unificado de Adafruit e instalarlo también.

Cree una estación meteorológica ESP32 simple usando BME280

Muestra la temperatura, humedad, presión y altitud en el servidor web ESP32.

Ahora configuremos el ESP32 para que funcione en modo estación (STA) (conéctese a la red WiFi existente) y creemos un servidor web. Este servidor entrega páginas web a cada cliente conectado a la red existente.

Si desea aprender cómo crear un servidor web usando ESP32 en modo AP/STA, lea este tutorial.

Cree una estación meteorológica ESP32 simple usando BME280
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 WiFi rentable que…

Antes de cargar el boceto, debe realizar un cambio importante. Actualice las siguientes dos variables con sus credenciales de red. Esto garantiza que el ESP32 pueda conectarse a la red existente.

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

Después de realizar estos cambios, puedes probar el boceto.

#include <WiFi.h>
#include <WebServer.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

#define SEALEVELPRESSURE_HPA (1013.25)

Adafruit_BME280 bme;

float temperature, humidity, pressure, altitude;

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

WebServer server(80);             
 
void setup() {
  Serial.begin(115200);
  delay(100);
  
  bme.begin(0x76);   

  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() {
  temperature = bme.readTemperature();
  humidity = bme.readHumidity();
  pressure = bme.readPressure() / 100.0F;
  altitude = bme.readAltitude(SEALEVELPRESSURE_HPA);
  server.send(200, "text/html", SendHTML(temperature,humidity,pressure,altitude)); 
}

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

String SendHTML(float temperature,float humidity,float pressure,float altitude){
  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 Weather Station</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 Weather Station</h1>n";
  ptr +="<p>Temperature: ";
  ptr +=temperature;
  ptr +="&deg;C</p>";
  ptr +="<p>Humidity: ";
  ptr +=humidity;
  ptr +="%</p>";
  ptr +="<p>Pressure: ";
  ptr +=pressure;
  ptr +="hPa</p>";
  ptr +="<p>Altitude: ";
  ptr +=altitude;
  ptr +="m</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 y establezca la velocidad en baudios en 115200. Luego presione el botón EN en el ESP32. Verá la dirección IP dinámica que recibió de su enrutador junto con el mensaje «Servidor HTTP iniciado».

Cree una estación meteorológica ESP32 simple usando BME280

A continuación, abra un navegador y navegue hasta la dirección IP que se muestra en el monitor serie. El ESP32 debe proporcionar una página web que muestre datos de temperatura, humedad, presión y altitud del sensor BME280.

Cree una estación meteorológica ESP32 simple usando BME280

Explicación detallada del código

El boceto comienza incluyendo las siguientes bibliotecas:

  • WiFi.h: proporciona métodos WiFi específicos de ESP32 que utilizamos para conectarnos a la red.
  • WebServer.h: proporciona métodos para configurar un servidor y procesar solicitudes HTTP entrantes.

  • Wire.h: permite la comunicación con cualquier dispositivo I2C, no solo el BME280.
  • Adafruit_BME280.h Y Adafruit_Sensor.h: son bibliotecas específicas de hardware que manejan funciones de nivel inferior.
#include <WiFi.h>
#include <WebServer.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

A continuación, se crea un objeto del sensor junto con variables para almacenar datos de temperatura, humedad, presión y altitud.

#define SEALEVELPRESSURE_HPA (1013.25)

Adafruit_BME280 bme;

float temperature, humidity, pressure, altitude;

Dado que estamos configurando el ESP32 en Modo Estación (STA), se conectará a la red WiFi existente. Para ello necesitamos especificar el SSID y la contraseña de la red. Luego 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()

En el setup() Función que configuramos nuestro servidor HTTP.

Primero inicializamos la comunicación serial con la PC e inicializamos el objeto BME con el begin() Función. Esta función inicializa la interfaz I2C con la dirección I2C especificada (0x76) y verifica la ID del chip. Luego reinicia el chip mediante un reinicio por software y espera la calibración del sensor después de despertarse.

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

bme.begin(0x76);

El ESP32 luego intenta conectarse a la red WiFi mediante WiFi.begin() Función que acepta el SSID (nombre de red) y la contraseña como argumentos.

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 usando el 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 se haya conectado correctamente a la red, el boceto imprimirá la dirección IP del ESP32 en el monitor serie. WiFi.localIP() Método.

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

Para procesar solicitudes HTTP entrantes, debemos especificar qué código se debe ejecutar cuando se accede a una URL. Usamos eso server.on() método para este propósito. Este método requiere dos parámetros: la ruta URL y el nombre de la función que se ejecutará cuando se acceda a esta URL.

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

server.on("/", handle_OnConnect);

Si el servidor recibe una solicitud de una URL que no coincide server.on()debe responder con un estado HTTP 404 (No encontrado) y un mensaje para el usuario. Para ello utilizamos server.onNotFound() Método.

server.onNotFound(handle_NotFound);

Finalmente, para iniciar nuestro servidor llamamos al begin() Método 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 el handleClient() Método en el objeto del servidor.

server.handleClient();

A continuación necesitamos crear una función que vinculamos a la raíz (/) URL con server.on.

Al inicio de esta función recuperamos del sensor los valores de temperatura, humedad, presión y altitud. Para responder a la solicitud HTTP utilizamos el send() Método. Aunque este método puede aceptar varios argumentos, su forma más simple incluye el código de respuesta HTTP, el tipo de contenido y el contenido en sí.

En nuestro caso enviamos el código 200 (uno de los Códigos de estado HTTP), que corresponde a la respuesta OK. Luego especificamos el tipo de contenido como «texto/html». Finalmente llamamos a la costumbre. SendHTML() Función que genera una página HTML dinámica que contiene datos de temperatura, humedad, presión y altitud.

void handle_OnConnect() {
  temperature = bme.readTemperature();
  humidity = bme.readHumidity();
  pressure = bme.readPressure() / 100.0F;
  altitude = bme.readAltitude(SEALEVELPRESSURE_HPA);
  server.send(200, "text/html", SendHTML(temperature,humidity,pressure,altitude)); 
}

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

El SendHTML() La función es responsable de generar una página web cuando el servidor web ESP32 recibe una solicitud de un cliente web. Esta función acepta valores de temperatura, humedad, presión y altitud como parámetros y devuelve contenido HTML en forma de una cadena larga. server.send() Característica discutida anteriormente.

Todo documento HTML comienza con el <!DOCTYPE> Explicación.

String SendHTML(float temperature,float humidity,float pressure,float altitude){
  String ptr = "<!DOCTYPE html> <html>n";

Próximo <meta> El elemento de ventana gráfica garantiza que la página web responda en diferentes navegadores, 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 Weather Station</title>n";

Diseñando el sitio web

A continuación, diseñamos la apariencia del sitio web usando CSS. Elegimos la fuente Helvetica y configuramos el contenido para que se muestre centrado como un bloque en línea.

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

El siguiente código cambia el color, la fuente y el borde alrededor de las etiquetas Cuerpo, 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

Luego definimos el encabezado de la página; puede cambiar este texto según lo desee para su aplicación.

ptr +="<div id="webpage">n";
ptr +="<h1>ESP32 Weather Station</h1>n";

Mostrar métricas en el sitio web.

Para mostrar dinámicamente los valores de temperatura, humedad, presión y altitud, colocamos estos valores en etiquetas de párrafo. Para mostrar el símbolo de grado utilizamos la entidad HTML &deg;.

ptr +="<p>Temperature: ";
ptr +=temperature;
ptr +="&deg;C</p>";
ptr +="<p>Humidity: ";
ptr +=humidity;
ptr +="%</p>";
ptr +="<p>Pressure: ";
ptr +=pressure;
ptr +="hPa</p>";
ptr +="<p>Altitude: ";
ptr +=altitude;
ptr +="m</p>";
ptr +="</div>n";
ptr +="</body>n";
ptr +="</html>n";
return ptr;
}

Diseñar un sitio web para una apariencia más profesional.

Los creadores como nosotros muchas veces no prestamos mucha atención al diseño, pero con un poco de esfuerzo podemos hacer que nuestros sitios web sean más atractivos y profesionales. La siguiente captura de pantalla proporciona una idea de nuestro objetivo.

Cree una estación meteorológica ESP32 simple usando BME280

¿No es asombroso? Sin más demora, agreguemos algo de estilo a nuestra página HTML anterior. Solo reemplaza eso SendHTML() Función en el boceto anterior con el código que se proporciona a continuación.

String SendHTML(float temperature,float humidity,float pressure,float altitude){
  String ptr = "<!DOCTYPE html>";
  ptr +="<html>";
  ptr +="<head>";
  ptr +="<title>ESP32 Weather Station</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: 0px;} ";
  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 +=".reading{font-weight: 300;font-size: 50px;padding-right: 25px;}";
  ptr +=".temperature .reading{color: #F29C1F;}";
  ptr +=".humidity .reading{color: #3B97D3;}";
  ptr +=".pressure .reading{color: #26B99A;}";
  ptr +=".altitude .reading{color: #955BA5;}";
  ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;top: 10px;}";
  ptr +=".data{padding: 10px;}";
  ptr +=".container{display: table;margin: 0 auto;}";
  ptr +=".icon{width:65px}";
  ptr +="</style>";
  ptr +="</head>";
  ptr +="<body>";
  ptr +="<h1>ESP32 Weather Station</h1>";
  ptr +="<div class='container'>";
  ptr +="<div class='data temperature'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 19.438 54.003'height=54.003px id=Layer_1 version=1.1 viewBox='0 0 19.438 54.003'width=19.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='M11.976,8.82v-2h4.084V6.063C16.06,2.715,13.345,0,9.996,0H9.313C5.965,0,3.252,2.715,3.252,6.063v30.982";
  ptr +="C1.261,38.825,0,41.403,0,44.286c0,5.367,4.351,9.718,9.719,9.718c5.368,0,9.719-4.351,9.719-9.718";
  ptr +="c0-2.943-1.312-5.574-3.378-7.355V18.436h-3.914v-2h3.914v-2.808h-4.084v-2h4.084V8.82H11.976z M15.302,44.833";
  ptr +="c0,3.083-2.5,5.583-5.583,5.583s-5.583-2.5-5.583-5.583c0-2.279,1.368-4.236,3.326-5.104V24.257C7.462,23.01,8.472,22,9.719,22";
  ptr +="s2.257,1.01,2.257,2.257V39.73C13.934,40.597,15.302,42.554,15.302,44.833z'fill=#F29C21 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Temperature</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)temperature;
  ptr +="<span class='superscript'>&deg;C</span></div>";
  ptr +="</div>";
  ptr +="<div class='data humidity'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 29.235 40.64'height=40.64px id=Layer_1 version=1.1 viewBox='0 0 29.235 40.64'width=29.235px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><path d='M14.618,0C14.618,0,0,17.95,0,26.022C0,34.096,6.544,40.64,14.618,40.64s14.617-6.544,14.617-14.617";
  ptr +="C29.235,17.95,14.618,0,14.618,0z M13.667,37.135c-5.604,0-10.162-4.56-10.162-10.162c0-0.787,0.638-1.426,1.426-1.426";
  ptr +="c0.787,0,1.425,0.639,1.425,1.426c0,4.031,3.28,7.312,7.311,7.312c0.787,0,1.425,0.638,1.425,1.425";
  ptr +="C15.093,36.497,14.455,37.135,13.667,37.135z'fill=#3C97D3 /></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Humidity</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)humidity;
  ptr +="<span class='superscript'>%</span></div>";
  ptr +="</div>";
  ptr +="<div class='data pressure'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 40.542 40.541'height=40.541px id=Layer_1 version=1.1 viewBox='0 0 40.542 40.541'width=40.542px 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='M34.313,20.271c0-0.552,0.447-1,1-1h5.178c-0.236-4.841-2.163-9.228-5.214-12.593l-3.425,3.424";
  ptr +="c-0.195,0.195-0.451,0.293-0.707,0.293s-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l3.425-3.424";
  ptr +="c-3.375-3.059-7.776-4.987-12.634-5.215c0.015,0.067,0.041,0.13,0.041,0.202v4.687c0,0.552-0.447,1-1,1s-1-0.448-1-1V0.25";
  ptr +="c0-0.071,0.026-0.134,0.041-0.202C14.39,0.279,9.936,2.256,6.544,5.385l3.576,3.577c0.391,0.391,0.391,1.024,0,1.414";
  ptr +="c-0.195,0.195-0.451,0.293-0.707,0.293s-0.512-0.098-0.707-0.293L5.142,6.812c-2.98,3.348-4.858,7.682-5.092,12.459h4.804";
  ptr +="c0.552,0,1,0.448,1,1s-0.448,1-1,1H0.05c0.525,10.728,9.362,19.271,20.22,19.271c10.857,0,19.696-8.543,20.22-19.271h-5.178";
  ptr +="C34.76,21.271,34.313,20.823,34.313,20.271z M23.084,22.037c-0.559,1.561-2.274,2.372-3.833,1.814";
  ptr +="c-1.561-0.557-2.373-2.272-1.815-3.833c0.372-1.041,1.263-1.737,2.277-1.928L25.2,7.202L22.497,19.05";
  ptr +="C23.196,19.843,23.464,20.973,23.084,22.037z'fill=#26B999 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Pressure</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)pressure;
  ptr +="<span class='superscript'>hPa</span></div>";
  ptr +="</div>";
  ptr +="<div class='data altitude'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 58.422 40.639'height=40.639px id=Layer_1 version=1.1 viewBox='0 0 58.422 40.639'width=58.422px 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='M58.203,37.754l0.007-0.004L42.09,9.935l-0.001,0.001c-0.356-0.543-0.969-0.902-1.667-0.902";
  ptr +="c-0.655,0-1.231,0.32-1.595,0.808l-0.011-0.007l-0.039,0.067c-0.021,0.03-0.035,0.063-0.054,0.094L22.78,37.692l0.008,0.004";
  ptr +="c-0.149,0.28-0.242,0.594-0.242,0.934c0,1.102,0.894,1.995,1.994,1.995v0.015h31.888c1.101,0,1.994-0.893,1.994-1.994";
  ptr +="C58.422,38.323,58.339,38.024,58.203,37.754z'fill=#955BA5 /><path d='M19.704,38.674l-0.013-0.004l13.544-23.522L25.13,1.156l-0.002,0.001C24.671,0.459,23.885,0,22.985,0";
  ptr +="c-0.84,0-1.582,0.41-2.051,1.038l-0.016-0.01L20.87,1.114c-0.025,0.039-0.046,0.082-0.068,0.124L0.299,36.851l0.013,0.004";
  ptr +="C0.117,37.215,0,37.62,0,38.059c0,1.412,1.147,2.565,2.565,2.565v0.015h16.989c-0.091-0.256-0.149-0.526-0.149-0.813";
  ptr +="C19.405,39.407,19.518,39.019,19.704,38.674z'fill=#955BA5 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Altitude</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)altitude;
  ptr +="<span class='superscript'>m</span></div>";
  ptr +="</div>";
  ptr +="</div>";
  ptr +="</body>";
  ptr +="</html>";
  return ptr;
}

Si comparas esta característica con la anterior verás que son similares salvo estas diferencias.

  • Tenemos el encargado por Google Abierto sin Fuente web para nuestro sitio. Tenga en cuenta que sin una conexión a Internet activa en el dispositivo, la fuente de Google no se mostrará ya que se carga dinámicamente.
ptr +="<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>";
  • Los símbolos de temperatura, humedad, presión y altitud son Gráficas vectoriales escalables (SVG) definido dentro <svg> etiquetas. No se requieren conocimientos especiales de programación para crear gráficos SVG. tu puedes el Editor Canva SVG para crear gráficos para su sitio. Usamos estos íconos SVG.

Cree una estación meteorológica ESP32 simple usando BME280

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

Una mejora de nuestro código es actualizar automáticamente la página para actualizar los valores del sensor. Al agregar una única metaetiqueta a su documento HTML, puede indicarle al navegador que recargue la página a intervalos establecidos.

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

Coloque este código dentro del <head> Día de su documento. Esta metaetiqueta le indica al navegador que actualice la página cada dos segundos. ¡Muy útil!

Cargar datos del sensor dinámicamente con AJAX

Para sitios web grandes, actualizar un sitio web con frecuencia puede no ser práctico. Un enfoque más eficiente es utilizar JavaScript y XML asincrónicos (AJAX) para solicitar datos del servidor sin tener que actualizar toda la página.

El Solicitud XMLHttp El objeto en JavaScript se usa a menudo para solicitudes AJAX en páginas web. Realiza solicitudes GET silenciosas al servidor y actualiza elementos en la página. AJAX no es una tecnología nueva ni un lenguaje separado, solo tecnologías existentes utilizadas de nuevas maneras. Además, AJAX te permite:

  • Solicitar datos de un servidor después de que la página se haya cargado
  • Recibir datos de un servidor después de que se haya cargado la página

  • Enviar datos a un servidor en segundo plano.

Aquí está el script AJAX que usaremos. Coloque este script justo antes de cerrar el <head> Etiqueta.

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 <script> Día, dado que el script AJAX es esencialmente JavaScript y en <script> etiquetas. Para llamar a una función repetidamente, usamos JavaScript setInterval() Función que requiere dos parámetros: la función a ejecutar y el intervalo de tiempo (en milisegundos) para su ejecución.

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

El núcleo de este guión es este loadDoc() Función en la que un XMLHttpRequest() objeto creado. Este objeto se utiliza para solicitar datos del servidor web.

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

El xhttp.onreadystatechange() La función se llama cada vez. readyState Cambios. El readyState La propiedad tiene el estatus de XMLHttpRequestdonde los valores del 0 al 4 indican diferentes etapas del proceso de solicitud.

  • 0: Solicitud no inicializada

  • 1: conexión del servidor establecida
  • 2: Solicitud recibida
  • 3: La solicitud se está procesando

  • 4: Solicitud completada y respuesta lista

El status La propiedad, por otra parte, otorga el estatus de XMLHttpRequest objeto y toma uno de estos valores:

  • 200: «Está bien»

  • 403 Prohibido»
  • 404 Pagina no encontrada»

Cuando readyState es 4 y el status Si es 200, significa que la respuesta está lista. En este punto el contenido del <body> está actualizado.

ptr +="xhttp.onreadystatechange = function() {n";
ptr +="if (this.readyState == 4 && this.status == 200) {n";
ptr +="document.body.innerHTML =this.responseText}n";
ptr +="};n";
The HTTP request is then initiated via the open() and send() functions.
ptr +="xhttp.open("GET", "/", true);n";
ptr +="xhttp.send();n";
ptr +="}n";

Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded





Cree una estación meteorológica ESP32 simple usando BME280

Sobre la Estación Meteorológica ESP32 con BME280

No confíes únicamente en las aplicaciones meteorológicas de los smartphones o las estaciones meteorológicas comerciales que obtienen datos de estaciones ubicadas a millas de distancia. ¡Con este proyecto IoT, puedes convertirte en tu propio pronosticador del tiempo!

El Sensor BME280 de Temperatura, Humedad y Presión

El módulo BME280 es un sensor digital de última generación, fabricado por Bosch, que ofrece mediciones de temperatura, humedad y presión. Opera en un rango de voltaje de 3.3V a 5V, siendo ideal para conectarlo a microcontroladores de 3.3V como el ESP32.

Conexión del Sensor BME280 con ESP32

Las conexiones son sencillas. Conecta el pin VIN del módulo BME280 a la salida de 3.3V del ESP32, y el pin GND a tierra. Luego, enlaza el pin SCL del módulo BME280 al pin D22 (reloj I2C) del ESP32, y el pin SDA al pin D21 (datos I2C).

Preparando el Arduino IDE

Existe un complemento disponible para el Arduino IDE que te permite programar el ESP32. Sigue el tutorial proporcionado para configurar tu Arduino IDE para trabajar con el ESP32.

Instalando la Biblioteca para el BME280

Para comunicarte con el módulo BME280, utiliza la biblioteca Adafruit BME280, que simplifica la comunicación y la lectura de datos de temperatura, humedad y presión. Sigue las instrucciones para instalar esta biblioteca en tu Arduino IDE.

Visualizando Datos en el Servidor Web ESP32

Configura el ESP32 en modo Estación (STA) para conectarte a la red WiFi existente y crear un servidor web. Este servidor proporcionará páginas web a cualquier dispositivo conectado a la red para mostrar los datos de temperatura, humedad, presión y altitud del sensor BME280.

Accediendo al Servidor Web

Después de cargar el sketch, abre el Monitor en Serie y presiona el botón EN en el ESP32. Este mostrará la dirección IP dinámica obtenida de tu enrutador junto con el mensaje «HTTP server started». Abre un navegador y accede a la dirección IP mostrada para ver los datos del sensor en la página web.

Explicación Detallada del Código

El código utiliza bibliotecas específicas para el ESP32, el servidor web y el sensor BME280. La función setup() configura la conexión Wi-Fi y el servidor web, mientras que loop() maneja las solicitudes entrantes. Se utiliza una función handle_OnConnect() para obtener y mostrar los datos del sensor en la página web.

Mejoras al Código

Puedes agregar automáticamente una actualización de la página para refrescar los valores del sensor. También puedes utilizar AJAX para solicitar datos al servidor sin la necesidad de refrescar toda la página.

Más Información

Para obtener más detalles e instrucciones paso a paso, consulta el contenido original en inglés en fuente del proyecto.


Related Posts:

4 comentarios en «Cree una estación meteorológica ESP32 simple usando BME280»

Deja un comentario