.png)
Este tutorial te guía para crear una app web mínima y enfocada en la privacidad que lee únicamente el valor de CO2 anunciado por un sensor HibouAir cercano utilizando un dongle USB BLE BleuIO. No requiere emparejamiento, nube ni backend; solo tu navegador, el dongle y una página que decodifica el valor numérico de CO2 emitido en los anuncios BLE y lo muestra como una barra de color con ventana por defecto de 400–2000 ppm y una alerta de CO2 alto cuando se supera el umbral.
Es una continuación del proyecto Ambient Adaptive Noise Bar con la misma estructura y UI, pero cambiando el decodificador para leer CO2 en lugar de ruido.
Qué construirás
Un único archivo HTML que se comunica con BleuIO mediante la API Web Serial. La página coloca a BleuIO en modo central, ejecuta periódicamente un escaneo dirigido para tu Board ID de HibouAir y analiza los bytes de Manufacturer Specific Data de cada anuncio para extraer el CO2 en ppm. El valor controla una barra horizontal con gradiente; al cruzar el umbral aparece una banda de advertencia. Todo corre localmente en el navegador.
Código: repositorio en GitHub
Pruébalo ahora: demo en GitHub Pages. Conecta BleuIO y pulsa Conectar. Asegúrate de introducir el Board ID correcto de tu HibouAir.
Por qué un monitor de CO2 en el navegador
El CO2 es un indicador práctico de ventilación. Niveles elevados se asocian con aire viciado, somnolencia y menor productividad. En salas de reuniones, aulas, oficinas y hogares, un feedback visual inmediato ayuda a ventilar a tiempo. Leer solo un número calculado por el propio dispositivo desde los anuncios BLE mantiene el diseño simple, rápido y respetuoso con la privacidad.
Hardware y software
BleuIO USB BLE dongle y monitor de CO2 HibouAir.
Cómo funciona
Los dispositivos BLE emiten periódicamente anuncios cortos con el valor actual de CO2. Se pueden leer sin emparejar. La página filtra por un Board ID concreto, captura la línea del anuncio, extrae la carga hex más larga y decodifica el CO2 desde una posición fija dentro del bloque de datos de fabricante. El resultado se mapea a un llenado de 0 a 100 por ciento de la barra para una ventana de 400–2000 ppm y se muestra una banda de alerta cuando se alcanza o supera el umbral, por defecto 1000 ppm.
Flujo BLE
Al pulsar Conectar, la página abre una sesión serie con BleuIO y envía los comandos clave. Primero AT+CENTRAL para entrar en modo de escaneo. Después AT+FINDSCANDATA=BOARD_ID=3 en cada ciclo para realizar un escaneo dirigido de 3 segundos. El lector consume líneas hasta recibir SCAN COMPLETE y luego espera para repetir. Cada anuncio recibido se analiza para extraer la carga en hexadecimal, decodificar el CO2, actualizar la barra y activar o desactivar la alerta de CO2 alto según el umbral.
Salida
Verás una barra horizontal de color etiquetada con el CO2 actual en ppm. La barra se rellena de izquierda a derecha conforme el valor sube dentro de la ventana 400–2000 ppm. Una banda visible de CO2 alto aparece al superar el umbral por defecto de 1000 ppm, como recordatorio para mejorar la ventilación. Puedes ver una demostración en video en YouTube.
Casos de uso
Este indicador funciona bien en cualquier espacio donde se reúnen personas y el aire pueda estancarse. En salas de reuniones y aulas ofrece una señal en vivo para abrir una ventana o activar la ventilación. En oficinas abiertas ayuda a promover renovaciones de aire a tiempo. En el hogar es una forma ligera de mantener frescos dormitorios y salones, especialmente en invierno. También es útil en estudios compartidos y makerspaces sin necesidad de pantallas complejas ni paneles.
Privacidad
La app solo lee un dato numérico que HibouAir ya difunde en anuncios, por lo que evita manejar datos personales y resulta sencilla de desplegar en entornos sensibles a la privacidad.
Precisión y notas prácticas
Es un indicador ligero, no una herramienta de calibración. Las lecturas de CO2 en anuncios se actualizan periódicamente y representan el valor actual del sensor. La ubicación importa; mantén tu HibouAir a una distancia razonable de BleuIO para reducir paquetes perdidos. Si en tu entorno superas a menudo la ventana por defecto, ajusta el rango de visualización y el umbral en el código.
Extiende el proyecto
Añade registro de lecturas en CSV o IndexedDB para analizar tendencias por días o semanas. Si tienes varios sensores, crea una vista multidispositivo que escanee varios Board ID y muestre tarjetas compactas en una sola página. Para automatización, dispara un webhook o envía un comando serie para controlar un ventilador o relé al superar el umbral. También puedes combinarlo con el indicador de ruido y mostrar Ruido y CO2 juntos para una visión de confort y productividad más completa. Si deseas convertir estas métricas en decisiones de negocio, con Q2BSTUDIO puedes conectar los datos a tableros de servicios inteligencia de negocio y power bi, por ejemplo con soluciones de Business Intelligence.
Sobre Q2BSTUDIO
En Q2BSTUDIO desarrollamos aplicaciones a medida y software a medida, creamos experiencias digitales robustas y escalables y acompañamos a tu organización en todo el ciclo de vida del producto. Somos especialistas en inteligencia artificial e ia para empresas, diseño e implementación de agentes IA, ciberseguridad, servicios cloud aws y azure y servicios inteligencia de negocio con power bi. Si buscas un partner para crear una solución similar a esta barra de CO2 o para integrar sensores BLE e IoT en tus procesos, descubre cómo podemos ayudarte con nuestro enfoque de desarrollo integral en desarrollo de aplicaciones y software multiplataforma.
Consejos finales
Prueba primero en un navegador compatible con Web Serial. Mantén actualizado el firmware de BleuIO. Documenta el Board ID de tus dispositivos para filtrar anuncios con precisión. Si planeas escalar a múltiples ubicaciones, considera centralizar la recopilación de datos y gobierno de acceso con buenas prácticas de ciberseguridad y políticas de datos mínimamente necesarios.
