bclose

Servidor Web con ESP32 y BMP280

Sensor BMP280

 

 

    • Jugar con el sensor BMP280 y el ESP32.
    • Crear un servidor web que publique las lecturas.
 

 

Material requerido.

 

 Tienda EspañaTienda Mexico
Vista principal

Un ESP32

Un ESP32

 Imagen principal Sensor BMP280

 

ESP32 Servidor web con BMP280

 

En la última sesión vimos como conectar un sensor BMP280 (Temperatura, presión barométrica y altitud) a un Arduino UNO por aquello de la sencillez. Pero fue tan sencillo que al final necesitaba complicar todo un poco y que mejor manera, que montar un servidor web con un ESP32 que publique esos datos en una página que podamos leer desde un navegador externo.

Para ello vamos a usar un ESP32 como procesador por incluir ya WIFI y además aprovechamos para seguir con este pequeño procesador maravilla que nos ha regalado los chicos de Expressif.

La ventaja de estos sensores BMP280 todo en uno es su pequeño tamaño y consumo lo que nos permite integrar una pequeña estación meteorológica en un único sensor y mas adelante usaremos un sensor BME280 que tiene lo mismo que el BMP280, pero además incluye un sensor de humedad ambiente, que tiene una doble ventaja. Por un lado, nos da una lectura adicional y por otra la humedad ambiente nos permite calibrar mucho mejor la estimación de altitud ya que al depender de la presión atmosférica, la humedad puede arruinar la lectura.

 

Montando el ESP32 en la protoboard

 

El diagrama de conexión del BMP280 al ESP32 es de lo más sencilla, pero nos plantea un problema logístico con el ESP32 y la protoboard ya que este es mas ancho de lo que nos gustaría y nos impide usar una sola protoboard, obligándonos a usar dos unidades por las muescas laterales. Por si no os habíais dado cuenta, las protoboard pueden unirse lateralmente mediante las muescas macho o hembra que tienen disponibles:

Muescas de encaje

Encajándolas con cuidado podemos hacer crecer nuestra protoboard hasta el tamaño adecuado (En ancho y en largo)  y para montar un ESP32 necesitamos un mínimo de dos protos. El resultado final será algo como esto:

Imagen de las conexiones

Ahora ya podemos encajar el ESP32 mediante la protoboard, y conectar cables sin problemas al procesador.

 
  • En la imagen de arriba, he retirado los raíles de una de las protoboards antes de encajar el ESP32, porque pura vagancia (Ya la tenía separada)
  • Pero también seria posible colocar el ESP32 sobre el canal central y añadir la segunda protoboard con o sin railes. A tu gusto siempre que dejes sitio para pinchar cables Dupont en los costados.  

 

Esquema de conexión del ESP32 al BMP280

 

Vamos a conectar nuestro BMP280 mediante I2C usando las mismas librerías que usamos con Arduino UNO, y adaptaremos los pines al ESP32. Para ello es imprescindible que tengas clara la disposición de pines de tu modelo porque no todos los disponibles en el mercado usan la misma distribución.

Dicho de otro modo: No te fíes de la posición de mis pines porque en tu ESP32 la disposición puede ser diferente y es importante que te asegures de no cometer errores para evitar disgustos (Y visitas a Prometec a comprar más ESP32s)

 
  • Por eso es importante a la hora de conectar que tengas en cuenta el nombre de los pines que te indicamos mas que en las posiciones relativas de os mismos en tu placa. Asegúrate de leer el nombre de los pines en el propio ESP32 o tendrás problemas.   

Por si acaso y a efectos de inventario, os pongo aquí la distribución de pines de los ESP32 que vendemos en nuestra tienda:

Detalle de pines con nombre

Las conexiones del BMP280 al ESP32 deben ser de este modo:

ESP32BMP280
GNDGND
3.3VVcc
SCLIO22
SDAIO21
SDOGND

Hemos conectado el pin SDO a GND para asignar la dirección 0x76 I2C al módulo BMP280. Recuerda que podemos cambiar esta dirección dependiendo de la conexión de este pin:

Pin BMP280ArduinoDirección I2C
SD0GND0x76
SD03,3V0x77
SD0FlotandoNo está muy claro

Y sin otra cosa pasamos a la parte del programa

 

Programa ESP32 con BMP80

 

Podemos descargar la misma librería que usamos en la sesión previa con el Arduino UNO: BMP280_DEV y ya podemos empezar importando las librerías precisas:

#include <WiFi.h>
#include <WebServer.h>
#include <Wire.h>
#include <BMP280_DEV.h>

Creamos ahora una instancia del sensor y definimos tres variables que contengan las lecturas:

BMP280_DEV bme;
float temperature, humidity, pressure, altitude;

Y ahora definimos un par de variables como siempre, que contengan los datos de nuestra WIFI: SSID y contraseña, y arrancamos el servidor web en el puerto 80::

const char* ssid = "TU_WIFI";  
const char* password = "TU_CONTRASEÑA";
WebServer server(80);

En el setup inicializamos el sensor con la dirección 0x76, programamos las lecturas cada 2 segundos y arrancamos la toma de datos:

bme.begin(BMP280_I2C_ALT_ADDR);
bme.setTimeStandby(TIME_STANDBY_2000MS);     // Set the standby time to 2 seconds
bme.startNormalConversion();

Vamos a arrancar la conexión WIFI e imprimimos la dirección que obtengamos para mas adelante podernos conectar con un navegador a ver los datos publicados:

while (WiFi.status() != WL_CONNECTED)
   {   delay(1000);
       Serial.print(".");
   }
Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: ");  Serial.println(WiFi.localIP());
Display de consola

Ahora vamos a lanzar el server con una función callback (O sea a la que llamamos cuando alguien se conecte) que definiremos mas abajo. La primera línea server.on() liga la función handle_OnConnect a “/”, o sea que cuando alguien se conecte, será esta función la que se invoque para servir las peticiones.

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

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

Y con esto vamos al loop() principal y a definir las funciones que hemos usado:

void loop()
{   server.handleClient();
    bme.getMeasurements(temperature, pressure, altitude);
}

¿Fácil. Nooo?  Vamos con las funciones auxiliares. ¿Que queremos hacer cuando alguien conecte a nuestro servidor web? Pues simplemente leemos el sensor y publicamos las lecturas:

Contenido solo disponible para suscriptores. ¡Accede al contenido!

    

Si subimos el programa y lo ejecutamos, podemos ir a la dirección IP de nuestro servidor web (Que os la mandado imprimir en la consola Arduino para poder usarla ahora) Veremos algo como esto:

Pantallazo del navegador

Donde podéis ver el resultado con la temperatura en grados centígrados (Con su gradito y todo º) La presión en hectopascales (Pero podéis convertirlo en bares si os apetece) y la altitud en metros. Como el sensor que estoy usando no nos proporciona humedad el resultado es simplemente cero y podéis eliminar la linea tambien si estáis de humor.

 

Mejorando la presentacion de datos

 

La página web que hemos creado mas arriba esta muy bien y es mas que suficiente para unos técnicos como nosotros que no solemos apreciar demasiado las sutilezas del estilo y la presentación pero es indudable que con un poco de gusto (Algo que no suele sobarnos) y trabajo para mejorar el resultado puede dar resultados espectaculares.

Por eso no me puedo resistir a incluir aquí la versión de la función  SendHTML() que ha publicado en LastMinuteEngineers con mucho mas estilo y una presentación con colores y pequeños gráficos para representar las variables.

Simplemente sustituir la funcion anterior por esta otra y veréis como el resultado en pantalla mejora espectacularmente:

Contenido solo disponible para suscriptores. ¡Accede al contenido!

    

Como verás, la diferencia es apreciable.

Presentacion de datos personalizada

Y esto es todo por hoy amigos. Hasta la próxima.

 

IMAGEN DE MARCA