Guía de la Interfaz Web de CO2 Gadget: Dark Mode, Gráficas y Captura

La interfaz web de CO2 Gadget te permite configurar, monitorizar y actualizar tu medidor desde cualquier navegador, sin instalar nada en tu ordenador. Accede escribiendo http://CO2-Gadget.local en la barra de direcciones, o directamente a la IP del dispositivo si prefieres.

El diseño sigue el estilo Apple: fondo oscuro automático (se adapta al tema de tu sistema), tipografía limpia y animaciones suaves. El menú superior contiene el acceso directo a Inicio y Gráficas.

CO2 Gadget – Dashboard principal con indicadores de CO₂, temperatura y humedad

Navegación

La barra de navegación superior tiene dos secciones:

🏠 Home — página principal con los indicadores en tiempo real
📈 Charts — acceso directo a las gráficas históricas

Los iconos de la derecha son:

ⓘ — información del dispositivo y versiones
⚙ — acceso a preferencias (equivale a /preferences.html)
⛶ — pantalla completa

Páginas disponibles

Página	URL	Qué ofrece
Inicio	/	Dashboard en tiempo real con los tres indicadores
Gráficas	/charts.html	Datos históricos con filtro de fechas y exportación
Calibración	/calibration.html	Lectura en vivo + calibración forzada FRC
Bajo Consumo	/low_power.html	Configuración de los modos HIGH_PERFORMANCE y LOW_POWER
Preferencias	/preferences.html	Todos los ajustes del dispositivo agrupados por secciones
Estado	/status.html	Resumen de features activas, RSSI WiFi y versión
OTA	/update	Actualización de firmware desde el navegador

1 — Inicio (/)

El dashboard muestra los tres indicadores en tiempo real, actualizándose automáticamente:

CO₂ — grande a la izquierda. El anillo cambia de color según el nivel: verde (excelente, <800 ppm), naranja (moderado) o rojo (alto). Debajo indica el estado textual (“Excellent”, “Good”, etc.)
Temperatura — panel superior derecho. Rango visible de 10 °C a 50 °C
Humedad — panel inferior derecho

Los valores se actualizan por defecto cada 5 segundos. Si el sensor está en warm-up, el dashboard lo indica y los valores pueden estar vacíos o cambiar rápidamente hasta que se estabilice (típicamente 10-15 minutos para un SCD4x).

2 — Gráficas (/charts.html)

CO2 Gadget – Gráficas con selector de rango y exportación

Chart.js muestra los datos históricos de CO₂ con una línea azul y marcadores circulares. El eje Y es ppm; el X es tiempo.

Filtrar por rango de fechas

Desmarca la casilla “Rango de fechas” para ver todo el historial disponible. Para un período concreto:

Pulsa “mm/dd/yyyy, –:–“ en el campo “Desde” y selecciona fecha y hora de inicio
Repite en el campo “Hasta”
Pulsa “Aplicar”

Exportar datos

Los botones de exportación generan un archivo con todos los datos visibles en la gráfica:

CSV — hoja de cálculo (fecha, hora, ppm). Ideal para Excel o Google Sheets
JSON — datos estructurados, útil para scripts o Home Assistant
PNG — imagen de la gráfica actual lista para compartir
SVG — vector, editable en Illustrator o Inkscape

3 — Calibración (/calibration.html)

CO2 Gadget – Calibración FRC desde el navegador

La página de calibración tiene dos funciones: leer el valor actual del sensor en tiempo real, y aplicar una calibración forzada (FRC).

Aplicar una calibración FRC

Abre la ventana y sitúa el medidor en aire fresco (ventana abierta, exterior, al menos 400 ppm de CO₂)
Espera 5-10 minutos a que el valor se estabilice
Introduce el valor de referencia en el campo ppm (típicamente 400 ppm si estás en exterior)
Pulsa “Calibrar”
El firmware aplica la corrección y el sensor pasa a dar valores correctos

Solo funciona con sensores que soportan FRC: Sensirion SCD30, SCD40 y SCD41. MH-Z19 y Senseair S8 usan calibración a 400 ppm (menú) o ASC automático.

4 — Bajo Consumo (/low_power.html)

CO2 Gadget – Configuración de modos de bajo consumo

Permite alternar entre los dos modos binarios disponibles desde v0.16.x:

HIGH_PERFORMANCE (0) — funcionamiento continuo, todas las radios activas, deepest sleep desactivado
LOW_POWER (1) — deep sleep con despertares periódicos. El intervalo se configura en segundos

En modo LOW_POWER, el medidor despierta, mide, publica datos por MQTT si está configurado, y vuelve a dormir. Esto es lo que permite autonomiees de hasta 3 meses con una batería 18650.

5 — Preferencias (/preferences.html)

CO2 Gadget – Preferencias del dispositivo

Es la página más completa. Contiene todos los ajustes del dispositivo organizados por secciones:

WiFi — SSID, contraseña, IP fija, hostname
MQTT — broker, topics, usuario/contraseña, Discovery prefix
BLE — activar, BTHome, MyAmbiance
Sensor CO₂ — modelo, calibración, compensación por presión
Salidas — configuración de relés, NeoPixel y buzzer
Pantalla — brillo, modo oscuro, rotación
Low Power — modo y parámetros de sueño

Todos los cambios requieren guardar (botón “Guardar”) y luego “Reiniciar” para que se apliquen.

CO2 Gadget web interface in dark mode — Panel de estado en modo oscuro — datos en tiempo real con CO₂, temperatura, humedad y estado de las comunicaciones

6 — Estado (/status.html)

Un resumen rápido de lo que está activado y funcionando:

Badges de features — indicadores de qué radios y funciones están activas (WiFi, BLE, MQTT, BTHome, etc.)
RSSI — potencia de la señal WiFi en dBm. Valores típicos: -30 (excelente), -70 (bueno), -90 (malo)
Versión del firmware — confirma qué versión tienes instalada

7 — OTA (/update)

Permite actualizar el firmware sin cables ni herramientas. Solo necesita el archivo .bin compilado para tu placa:

Selecciona el archivo .bin desde tu disco
Pulsa “Update”
El dispositivo recibe el archivo, lo verifica y rearranca automáticamente
Tras el rearranque, abre de nuevo /status.html y verifica que la versión ha cambiado

Funciona con navegadores Chromium (Chrome, Edge, Brave). Si el archivo es demasiado grande o está mal nombrado, la interfaz da error antes de empezar.

Acceso desde fuera de casa

Por defecto, la interfaz web solo es accesible desde la red local (LAN). Si quieres acceder desde internet:

VPN — la opción más segura. Conecta tu móvil a la red de casa y accedes a la IP local
Túnel Cloudflare — crea un túnel gratuito en cloudflare.com para exponer el dispositivo sin abrir puertos en el router
Port forwarding — ❌ No recomendado en absoluto. Abre el puerto 80 en el router hacia la IP del dispositivo, exponiéndolo directamente a internet sin capas de protección adicionales. Si el dispositivo no tiene contraseña configurada, cualquiera puede acceder a toda la configuración. Usa siempre VPN o Cloudflare Tunnel.

Contraseña

Por defecto la interfaz web no tiene contraseña. Para configurarla:

Ve a Preferencias → WiFi y activa la contraseña
O desde el menú en pantalla del dispositivo

⚠️ Los campos de contraseña en la web están deshabilitados por seguridad (las contraseñas viajan en texto plano por la red). Si necesitas editarla desde la web, añade ?relaxedSecurity=true a la URL:

http://CO2-Gadget.local/preferences.html?relaxedSecurity=true

Captura de pantalla TFT

El endpoint GET /screenshot devuelve una imagen PNG con lo que muestra la pantalla física del dispositivo en ese momento. Muy útil para depurar o documentar:

curl -o pantalla.png http://CO2-Gadget.local/screenshot

No todos los modelos de placa tienen pantalla TFT. Los dispositivos OLED, E-Ink y algunas pantallas TFT no soportan esta funcionalidad. En esos casos el endpoint devuelve un mensaje indicando que no está soportado. Incluso en placas con TFT, los colores pueden no ser exactos. La captura está implementada en modo mejor esfuerzo: sigue disponible aunque no sea perfecta, porque puede ser útil para depuración.

¿Te ha sido útil? Comparte este artículo. También consulta la Guía del Menú. Tienes dudas? Pregunta en el grupo de Telegram.