UD03T03_DashboardIoT

01_Enunciado_Principal

Β 

πŸ“Š ENUNCIADO GUIADO: DASHBOARD IoT - MONITOR DE SENSORES EN TIEMPO REAL

1. INTRODUCCIΓ“N Y CONTEXTO

πŸ“– DescripciΓ³n del Proyecto

DesarrollarΓ‘s unΒ Dashboard IoT (Internet of Things)Β completo utilizandoΒ JavaFXΒ que simule el monitoreo en tiempo real de un sensor ambiental multiparamΓ©trico. La aplicaciΓ³n mostrarΓ‘ de forma grΓ‘fica y numΓ©rica tres magnitudes fΓ­sicas fundamentales:

  • 🌑️ TemperaturaΒ (Β°C) - Rango: 10-40Β°C, Alerta: >35Β°C
  • πŸ’§Β Humedad relativaΒ (%) - Rango: 20-90%, Alerta: >80%
  • 🌍 PresiΓ³n atmosfΓ©ricaΒ (hPa) - Rango: 980-1040 hPa, Alerta: >1035 hPa

🎯 Funcionalidades Principales

El dashboard implementarΓ‘:

  • βœ…Β ActualizaciΓ³n automΓ‘ticaΒ cada 0.5 segundos mediante Timeline
  • βœ…Β GrΓ‘fico de lΓ­neas interactivoΒ con ventana deslizante temporal (30s)
  • βœ…Β Sistema de alertasΒ por umbrales configurables
  • βœ…Β Filtros dinΓ‘micosΒ para visualizar series especΓ­ficas
  • βœ…Β DiseΓ±o profesionalΒ tipo tarjetas (card-based UI) con CSS moderno
  • βœ…Β GestiΓ³n de memoriaΒ limitando puntos histΓ³ricos (max 200 por serie)


2. DIAGRAMA DE FLUJO GENERAL DEL SISTEMA

                    β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
                    β”‚ initialize() - Controller    β”‚
                    β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚
                    β”‚ β”‚1. cargarInformacionSensorβ”‚ β”‚
                    β”‚ β”‚2. configurarEstadoInicialβ”‚ β”‚
                    β”‚ β”‚3. iniciarTimeline()      β”‚ β”‚
                    β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚
                    β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                               β”‚
                    β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
                    β”‚                              β”‚
                    ↓                             ↓
         β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
         β”‚ Timeline activo            β”‚  β”‚ Escuchar eventos   β”‚
         β”‚ cicloPrincipal() cada 0.5s β”‚  β”‚ usuario (UI)       β”‚
         β””β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜  β””β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                β”‚                                 β”‚
                β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                β”‚  β”‚
                ↓  ↓
    ╔═══════════════════════════════════════════╗
    β•‘      CICLO PRINCIPAL (cada 0.5s)          β•‘
    ╠═══════════════════════════════════════════╣
    β•‘ 1. modelo.generarLectura()                β•‘
    β•‘ 2. actualizarValoresMostrados()           β•‘
    β•‘ 3. modelo.agregarPuntosASeries()          β•‘
    β•‘ 4. actualizarEjeX()                       β•‘
    β•‘ 5. actualizarAvisos()                     β•‘
    β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•
                β”‚
                ↓
         β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
         β”‚ ΒΏUsuario    β”‚  NO
         β”‚ cierra app? β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”
         β””β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”˜        β”‚
                β”‚ SÍ            β”‚
                ↓               β”‚
         β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”    β”‚
         β”‚ DiΓ‘logo         β”‚    β”‚
         β”‚ confirmaciΓ³n    β”‚    β”‚
         β””β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜    β”‚
                β”‚               β”‚
                ↓               β”‚
         β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”    β”‚
         β”‚ timeline.stop() β”‚    β”‚
         β”‚ Platform.exit() β”‚    β”‚
         β””β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜    β”‚
                β”‚               β”‚
                ↓               β”‚
         β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”        β”‚
         β”‚   FIN APP   β”‚        β”‚
         β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜        β”‚
                                β”‚
                ← ← ← ← ← ← ← β†β”˜
                (Continuar ciclo)

3. ESTRUCTURA DE ARCHIVOS

πŸ“ OrganizaciΓ³n Completa del Proyecto

πŸ“¦ UD03T03_DashboardIoT/
 ┃
 β”—  πŸ“‚ src/
   β”— πŸ“‚ dam/
     ┃
     ┣ πŸ“œ UD03T03_DashboardIoT.java
     ┃   └─ Clase principal (extends Application)
     ┃
     ┣ πŸ“‚ modelo/
     ┃ β”— πŸ“œ IotModel.java
     ┃     └─ LΓ³gica de negocio
     ┃        β€’ GeneraciΓ³n de lecturas simuladas
     ┃        β€’ GestiΓ³n de series XYChart
     ┃        β€’ ValidaciΓ³n de umbrales
     ┃        β€’ CΓ‘lculo de lΓ­mites de ejes
     ┃        β€’ Formateo de datos
     ┃
     ┣ πŸ“‚ controller/
     ┃ β”— πŸ“œ DashboardController.java
     ┃     └─ Controlador MVC
     ┃        β€’ @FXML componentes UI
     ┃        β€’ initialize()
     ┃        β€’ GestiΓ³n de Timeline
     ┃        β€’ Manejadores de eventos
     ┃        β€’ ActualizaciΓ³n de vista
     ┃
     β”— πŸ“‚ vista/
       ┣ πŸ“œ Dashboard.fxml
       ┃   └─ Interfaz grΓ‘fica (XML)
       ┃
       β”— πŸ“œ dashboard.css
           └─ Estilos visuales
 

4.Β πŸ–₯️ ELEMENTOS DEL DASHBOARD (Vista)

La interfaz grΓ‘fica debe mostrarΒ cinco zonas claramente diferenciadas:

  1. Card de informaciΓ³n del sensor

    • Nombre del sensor
    • Modelo
    • UbicaciΓ³n
    • Fecha y hora de la ΓΊltima mediciΓ³n
  2. Card de valores actuales

    • Temperatura actual
    • Humedad actual
    • PresiΓ³n actual
  3. Zona de filtros

    • CheckBox para Temperatura
    • CheckBox para Humedad
    • CheckBox para PresiΓ³n

    El grΓ‘fico mostrarΓ‘ ΓΊnicamente las magnitudes seleccionadas.

  4. GrΓ‘fico

    • Tipo LineChart
    • Eje X: tiempo (simulado)
    • Eje Y: valor medido
  5. Card de avisos

    • Muestra mensajes cuando algΓΊn valor supera un mΓ‘ximo establecido