Exploradores del Clima

Web educativa para visualizar la temperatura y la humedad ambiental medidas por un DHT11 conectado a una Keyestudio Easy Plug Control Board V2.0.

Diseño personalizado en azul para David Salcedo, Dinamizador TIC.

Desplegar con Dokploy

El repositorio incluye Dockerfile, nginx.conf y compose.yaml. En Dokploy:

1. Crea una aplicación y conecta este repositorio de GitHub.
2. Selecciona Dockerfile como método de construcción.
3. Usa la rama main, el contexto . y el archivo Dockerfile.
4. Configura el puerto interno 80.
5. Asigna un dominio con HTTPS y despliega.

La conexión con la placa se realiza desde el navegador del estudiante. La placa debe estar conectada por USB a esa misma computadora y la página debe abrirse con Chrome o Edge. Web Serial requiere HTTPS en el sitio desplegado; localhost también funciona durante el desarrollo.

Conexión

1. Conecta el módulo DHT11 EasyPlug al puerto digital D5.
2. Conecta la placa al computador mediante USB.
3. Cierra Connector 6.0, STEAMakersBlocks y cualquier consola serie.
4. Haz doble clic en CARGAR-FIRMWARE.bat. El cargador buscará la placa, compilará el programa y lo enviará automáticamente.
5. Cuando aparezca el mensaje LISTO, presiona Enter para cerrar la ventana.
6. Ejecuta INICIAR-WEB.bat y abre la página con Chrome o Microsoft Edge.
7. Pulsa Conectar y selecciona el puerto de la placa.

La comunicación se realiza a 9600 baudios. La placa envía una lectura cada dos segundos con este formato:

{"temperatura":26.0,"humedad":64}

Cargar el programa

Método recomendado: cargador automático

Ejecuta CARGAR-FIRMWARE.bat. Utiliza las herramientas ya instaladas con Connector 6.0, detecta una placa Arduino Uno compatible y carga el firmware. No es necesario instalar Arduino IDE.

Método alternativo: Arduino IDE

Abre firmware/dht11_easyplug/dht11_easyplug.ino, selecciona Herramientas → Placa → Arduino Uno, selecciona el puerto COM de la placa y pulsa el botón Subir.

El archivo .ino es autónomo y no necesita bibliotecas externas. Está preparado para Arduino Uno/ATmega328P.

Si se utiliza STEAMakersBlocks, el programa equivalente debe:

• iniciar el puerto serie a 9600 baudios;
• leer el DHT11 conectado a D5;
• enviar temperatura y humedad en una sola línea;
• esperar dos segundos antes de la siguiente lectura.

La web también reconoce formatos como TEMP:26,HUM:64 y 26,64.

Pantalla completa

Las mediciones aparecen inmediatamente debajo de la franja compacta de conexión. Pulsa Pantalla completa para mostrar simultáneamente la temperatura y la humedad con números grandes. Para regresar, pulsa Salir de pantalla completa o la tecla Esc.

Navegación por páginas

La interfaz se divide en tres pestañas para evitar una página larga:

• Monitor: conexión, temperatura, humedad y pantalla completa.
• Historial: gráfica de los últimos diez minutos y valores mínimos/máximos.
• Actividades: retos de exploración y explicación de la humedad relativa.

Modo demostración

El botón Demostración genera datos simulados. Permite comprobar la interfaz sin conectar la placa. Los valores del modo demostración no son mediciones reales.

Solución de problemas

• No aparece el puerto: desconecta y vuelve a conectar el cable USB. Comprueba el Administrador de dispositivos de Windows.
• Puerto ocupado o acceso denegado: cierra la consola serie y, si es necesario, el Connector 6.0 antes de conectar desde la web.
• No llegan lecturas: confirma que el DHT11 está en D5, que el programa fue cargado y que utiliza 9600 baudios.
• El navegador no permite conectar: usa una versión reciente de Chrome o Edge en una computadora.
• Valores --: espera al menos dos segundos; el DHT11 necesita tiempo entre mediciones.

Archivos

• index.html: estructura de la interfaz.
• styles.css: diseño adaptable y accesible.
• app.js: conexión Web Serial, gráfica, estadísticas y simulación.
• CARGAR-FIRMWARE.bat: cargador automático para Windows.
• firmware/dht11_easyplug/dht11_easyplug.ino: programa de la placa.
• INICIAR-WEB.bat: servidor local para Windows.