UD03T03_DashboardIoT
| Site: | Aula Virtual |
| Course: | Desenvolvemento de interfaces - 2DAM - 2526 |
| Book: | UD03T03_DashboardIoT |
| Printed by: | Guest user |
| Date: | Saturday, 2 May 2026, 6:30 AM |
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:
-
Card de información del sensor
- Nombre del sensor
- Modelo
- Ubicación
- Fecha y hora de la última medición
-
Card de valores actuales
- Temperatura actual
- Humedad actual
- Presión actual
-
Zona de filtros
- CheckBox para Temperatura
- CheckBox para Humedad
- CheckBox para Presión
El gráfico mostrará únicamente las magnitudes seleccionadas.
-
Gráfico
- Tipo LineChart
- Eje X: tiempo (simulado)
- Eje Y: valor medido
-
Card de avisos
- Muestra mensajes cuando algún valor supera un máximo establecido
02_Vista
🎨 DESARROLLO DE LA VISTA (FXML + CSS)
📋 PASO 1 VISTA FXML (Dashboard.fxml)
🎯 Propósito
Definir la estructura visual de la interfaz de usuario de forma declarativa usando XML.
1.1. Layout Principal - BorderPane
┌─────────────────────────────────────────────┐
│ <top> │
│ ┌─────────────┐ │
│ │ MenuBar │ │
│ │ - Archivo │ │
│ └─────────────┘ │
├─────────────────────────────────────────────┤
│ <center> │
│ ┌────────────────────────────────────┐ │
│ │ HBox principal (horizontal) │ │
│ │ ┌──────────┬──────────────────┐ │ │
│ │ │ Columna │ Columna │ │ │
│ │ │ Izquierda│ Derecha │ │ │
│ │ │ (360px) │ (restante) │ │ │
│ │ │ │ │ │ │
│ │ │ • Card │ • Card Filtros │ │ │
│ │ │ Sensor │ • Card Gráfico │ │ │
│ │ │ • Card │ │ │ │
│ │ │ Avisos │ │ │ │
│ │ └──────────┴──────────────────┘ │ │
│ └────────────────────────────────────┘ │
└────────────────────────────────────────────┘
Configuración del Eje X (Tiempo):
| Propiedad | Valor | Significado |
|---|---|---|
fx:id |
xAxis |
Referencia para modificar dinámicamente |
label |
"Tiempo (s)" |
Etiqueta del eje |
autoRanging |
false |
Límites MANUALES (ventana deslizante) |
lowerBound |
0 |
Límite inferior inicial |
upperBound |
30 |
Límite superior inicial (30s) |
tickUnit |
5 |
Marcas cada 5 segundos |
Configuración del Eje Y (Valor):
| Propiedad | Valor | Significado |
|---|---|---|
fx:id |
yAxis |
Referencia (no se modifica en este proyecto) |
label |
"Valor" |
Etiqueta del eje |
autoRanging |
true |
Límites AUTOMÁTICOS (se ajustan a datos) |
📋 PASO 2: ESTILOS CSS (dashboard.css)
2.1. Estilo: Contenedor Principal
Características en Español:
Selector: .root-pad
├─ PROPIEDAD: Color de fondo
│ └─ VALOR: Gris muy claro (#f5f7fb)
Aplicado a: HBox principal (contenedor de las dos columnas)
2.2. Estilo: Tarjetas (Cards)
Características:
Selector: .card
├─ PROPIEDAD: Color de fondo
│ └─ VALOR: Blanco
├─ PROPIEDAD: Color del borde
│ └─ VALOR: Gris muy suave (#e6e9f2)
├─ PROPIEDAD: Radio de esquinas del borde
│ └─ VALOR: 12 píxeles
├─ PROPIEDAD: Radio de esquinas del fondo
│ └─ VALOR: 12 píxeles
├─ PROPIEDAD: Relleno interno (padding)
│ └─ VALOR: 14 píxeles en todos los lados
└─ PROPIEDAD: Efecto visual de sombra (dropshadow)
├─ TIPO: Sombra difuminada gaussiana
├─ COLOR: Negro con 8% de opacidad
├─ RADIO DE DIFUMINADO: 14 píxeles
├─ FACTOR DE EXTENSIÓN: 0.15
├─ DESPLAZAMIENTO HORIZONTAL: 0 píxeles
└─ DESPLAZAMIENTO VERTICAL: 3 píxeles (hacia abajo)
Explicación de dropshadow:
dropshadow(tipo, color, radio, spread, offsetX, offsetY)
- tipo: gaussian (difuminado suave)
- color: rgba(0,0,0,0.08) (negro 8% opaco)
- radio: 14px (tamaño del difuminado)
- spread: 0.15 (expansión de la sombra)
- offsetX: 0px (sin desplazamiento horizontal)
- offsetY: 3px (desplazada 3px hacia abajo)
2.3. Estilo: Títulos
Card Title:
Selector: .card-title
├─ PROPIEDAD: Tamaño de fuente
│ └─ VALOR: 16 píxeles
├─ PROPIEDAD: Grosor de fuente
│ └─ VALOR: Negrita (bold)
└─ PROPIEDAD: Color del texto
└─ VALOR: Azul oscuro (#1f2a44)
Section Title:
Selector: .section-title
├─ PROPIEDAD: Tamaño de fuente
│ └─ VALOR: 13 píxeles
├─ PROPIEDAD: Grosor de fuente
│ └─ VALOR: Negrita (bold)
└─ PROPIEDAD: Color del texto
└─ VALOR: Gris azulado oscuro (#2b3553)
2.4. Estilo: Texto Secundario
Selector: .muted
└─ PROPIEDAD: Color del texto
└─ VALOR: Gris medio (#6b7486)
2.5. Estilo: Botón con Borde
Selector: .btn-outline
├─ PROPIEDAD: Color de fondo
│ └─ VALOR: Transparente
├─ PROPIEDAD: Color del borde
│ └─ VALOR: Azul (#2b6cb0)
├─ PROPIEDAD: Color del texto
│ └─ VALOR: Azul (#2b6cb0)
├─ PROPIEDAD: Radio de esquinas del borde
│ └─ VALOR: 10 píxeles
├─ PROPIEDAD: Radio de esquinas del fondo
│ └─ VALOR: 10 píxeles
├─ PROPIEDAD: Relleno interno (padding)
│ └─ VALORES: vertical=6px, horizontal=14px
└─ PROPIEDAD: Tipo de cursor
└─ VALOR: Mano (hand) - indica clickeable
Pseudoclase: :hover (cuando el ratón está encima)
└─ PROPIEDAD: Color de fondo
└─ VALOR: Azul con 8% de opacidad
2.6. Estilo: Pastillas de Advertencia (alertas)
Selector: .warn-pill
├─ PROPIEDAD: Color de fondo
│ └─ VALOR: Rojo con 10% de opacidad
├─ PROPIEDAD: Color del texto
│ └─ VALOR: Rojo oscuro (#b91c1c)
├─ PROPIEDAD: Relleno interno (padding)
│ └─ VALORES: vertical=8px, horizontal=10px
├─ PROPIEDAD: Radio de esquinas del fondo
│ └─ VALOR: 10 píxeles
├─ PROPIEDAD: Radio de esquinas del borde
│ └─ VALOR: 10 píxeles
└─ PROPIEDAD: Color del borde
└─ VALOR: Rojo con 25% de opacidad
2.7. Estilo: Pastilla OK (alertas)
Selector: .ok-pill
├─ PROPIEDAD: Color de fondo
│ └─ VALOR: Verde con 10% de opacidad
├─ PROPIEDAD: Color del texto
│ └─ VALOR: Verde oscuro (#166534)
├─ PROPIEDAD: Relleno interno (padding)
│ └─ VALORES: vertical=8px, horizontal=10px
├─ PROPIEDAD: Radio de esquinas del fondo
│ └─ VALOR: 10 píxeles
├─ PROPIEDAD: Radio de esquinas del borde
│ └─ VALOR: 10 píxeles
└─ PROPIEDAD: Color del borde
└─ VALOR: Verde con 25% de opacidad
2.8. Estilo: Gráfico
Selector: .chart
└─ PROPIEDAD: Relleno interno (padding)
└─ VALOR: 6 píxeles
Selector: .chart-plot-background
└─ PROPIEDAD: Color de fondo del área de trazado
└─ VALOR: Azul muy claro (#fbfcff)
Selectores: .chart-vertical-grid-lines, .chart-horizontal-grid-lines
└─ PROPIEDAD: Color de trazo de líneas de cuadrícula
└─ VALOR: Negro con 8% de opacidad
🎨 PALETA DE COLORES DEL PROYECTO
| Nombre | Código | Uso Principal |
|---|---|---|
| Blanco | #ffffff / white |
Fondos de cards |
| Gris muy claro | #f5f7fb |
Fondo general de la app |
| Gris borde | #e6e9f2 |
Bordes suaves de cards |
| Gris medio | #6b7486 |
Texto secundario (etiquetas) |
| Gris azulado | #2b3553 |
Subtítulos |
| Azul oscuro | #1f2a44 |
Títulos principales |
| Azul | #2b6cb0 |
Botones y acentos |
| Rojo alerta | #dc2626 / #b91c1c |
Advertencias |
| Verde OK | #16a34a / #166534 |
Estado normal |
| Azul muy claro | #fbfcff |
Fondo del gráfico |
03_Modelo
📦 DESARROLLO DEL MODELO (IotModel.java)
📋 PASO 1: MODELO DE DATOS
🎯 Responsabilidad Única del Modelo
- Almacenar:
- Información fija del sensor (nombre, modelo, ubicación).
- Valores actuales de temperatura, humedad y presión.
- Valores máximos permitidos para cada magnitud.
- Mantener históricos de valores para cada magnitud.
- Simular nuevas lecturas del sensor:
- Generar valores aleatorios realistas.
- Actualizar valores actuales.
- Guardar el histórico.
- Proporcionar los datos necesarios para el gráfico.
- Detectar cuándo un valor supera su umbral máximo.
🧱 ESTRUCTURA COMPLETA DE LA CLASE
1.1. Constantes del Sensor
// =========================
// CONSTANTES DEL SENSOR
// =========================
private final String nombre = "Sonda Ambiental";
private final String modelo = "DHT-Pro + BMP";
private final String ubicacion = "Aula 2.1 (ventana)";
Propósito: Información descriptiva del sensor físico simulado.
Diseño: Variables final porque son características fijas del dispositivo.
1.2. Umbrales de Alerta
// =========================
// UMBRALES (máximos)
// =========================
private static final double TEMP_MAX = 35.0; // °C
private static final double HUM_MAX = 80.0; // %
private static final double PRES_MAX = 1035.0; // hPa
Propósito: Valores máximos permitidos. Si se superan → generar alerta.
Criterios de diseño:
static final: Constantes compartidas por todas las instancias- Valores realistas basados en condiciones ambientales típicas
- Fácilmente modificables para diferentes contextos
1.3. Estado Actual del Sensor
// =========================
// VALORES ACTUALES DEL SENSOR
// =========================
private double tempActual = 22.0;
private double humActual = 45.0;
private double presActual = 1015.0;
Propósito: Almacenar la última lectura generada.
Valores iniciales: Condiciones ambientales normales típicas de interior:
- 22°C: Temperatura confortable
- 45%: Humedad moderada
- 1015 hPa: Presión atmosférica media a nivel del mar
1.4. Control de Tiempo
Variables explicadas:
| Variable | Tipo | Propósito |
|---|---|---|
tiempoSimulacion |
double | Tiempo transcurrido desde inicio (eje X gráfico) |
ultimaMedida |
LocalDateTime | Timestamp real de última lectura |
formatoFecha |
DateTimeFormatter | Formato "02/02/2026 15:30:45" |
1.5. Configuración de Visualización
Propósito:
| Constante | Valor | Función |
|---|---|---|
MAX_PUNTOS_POR_SERIE |
200 | Solo se almacenarán 200 valores en cada serie |
VENTANA_TIEMPO |
30.0s | Segundos visibles en gráfico simultáneamente (eje X) |
1.6. Constructor
/**
* Constructor: inicializa las series con sus nombres.
* Los nombres aparecerán en la leyenda del gráfico.
*/
🔧 MÉTODOS PRINCIPALES - DIAGRAMAS DE FLUJO
2.1. Método generarLectura()
Propósito: Simular una nueva lectura del sensor con variaciones realistas.
Diagrama de Flujo Detallado:
┌──────────────────────────────┐
│ generarLectura() │
└──────────┬───────────────────┘
│
↓
╔══════════════════════════════════════════╗
║ FASE 1: VARIACIONES NORMALES ║
╚══════════════╦═══════════════════════════╝
│
↓
┌──────────────────────────────────────┐
│ tempActual = limitarRango( │
│ tempActual + rnd(-0.8, 0.8), │
│ 10, 40) │
│ │
│ Explicación: │
│ - Suma variación: -0.8°C a +0.8°C │
│ - Limita resultado entre 10°C y 40°C │
└──────────┬───────────────────────────┘
│
↓
┌──────────────────────────────────────┐
│ humActual = limitarRango( │
│ humActual + rnd(-1.6, 1.6), │
│ 20, 90) │
│ │
│ Explicación: │
│ - Suma variación: -1.6% a +1.6% │
│ - Limita resultado entre 20% y 90% │
└──────────┬───────────────────────────┘
│
↓
┌──────────────────────────────────────┐
│ presActual = limitarRango( │
│ presActual + rnd(-1.1, 1.1), │
│ 980, 1040) │
│ │
│ Explicación: │
│ - Suma variación: -1.1 a +1.1 hPa │
│ - Limita entre 980 y 1040 hPa │
└──────────┬───────────────────────────┘
│
↓
╔══════════════════════════════════════════╗
║ FASE 2: PICOS ALEATORIOS (eventos) ║
╚══════════════╦═══════════════════════════╝
│
↓
┌──────────────────────────────────────┐
│ ¿Random < 0.05? (5% probabilidad) │
└──────────┬───────────────────────────┘
SÍ ←─┤ │ NO
│ ↓
↓ ┌──────────────┐
┌────────────────────┐ │
│ tempActual += │ │
│ rnd(4, 8) │ │
│ │ │
│ (Pico: +4°C a +8°C)│ │
│ Simula: ventana │ │
│ abierta, sol │ │
└────────┬───────────┘ │
│ │
└────→ ┌ ← ← ← ← ← ←┘
│
↓
┌──────────────────────────────────┐
│ ¿Random < 0.05? (5% prob.) │
└──────────┬─────────────────────────┘
SÍ ←─┤ │ NO
│ ↓
↓ ┌──────────────┐
┌────────────────────┐ │
│ humActual += │ │
│ rnd(8, 15) │ │
│ │ │
│ (Pico: +8% a +15%) │ │
│ Simula: lluvia, │ │
│ vapor de agua │ │
└────────┬───────────┘ │
│ │
└────→ ┌ ← ← ← ← ← ←┘
│
↓
┌──────────────────────────────────┐
│ ¿Random < 0.05? (4% prob. aprox) │
└──────────┬─────────────────────────┘
SÍ ←─┤ │ NO
│ ↓
↓ ┌──────────────┐
┌────────────────────────┐ │
│ presActual += │ │
│ rnd(8, 18) │ │
│ │ │
│ (Pico: +8 a +18 hPa) │ │
│ Simula: cambio │ │
│ meteorológico │ │
└────────┬───────────────┘ │
│ │
└────→ ┌ ← ← ← ← ← ←┘
│
↓
╔══════════════════════════════════════════╗
║ FASE 3: ACTUALIZAR TIMESTAMP ║
╚══════════════╦═══════════════════════════╝
│
↓
┌──────────────────────────────────────┐
│ ultimaMedida = LocalDateTime.now() │
│ │
│ Captura fecha/hora actual del sistema│
└──────────────────────────────────────┘
│
↓
(FIN)
Código Completo:
/**
* Genera una nueva lectura del sensor con variaciones aleatorias.
*
* Algoritmo:
* 1. Aplica pequeñas variaciones a cada magnitud
* 2. Limita los valores entre mínimos y máximos realistas
* 3. Aleatoriamente genera "picos" para simular eventos
* 4. Actualiza la marca de tiempo
*/
public void generarLectura() {
// FASE 1: Variaciones normales (pequeños cambios graduales)
tempActual = limitarRango(tempActual + rnd(-0.8, 0.8), 10, 40);
humActual = limitarRango(humActual + rnd(-1.6, 1.6), 20, 90);
presActual = limitarRango(presActual + rnd(-1.1, 1.1), 980, 1040);
// FASE 2: Picos aleatorios (simulan eventos repentinos)
if (ThreadLocalRandom.current().nextDouble() < 0.05) {
tempActual += rnd(4, 8); // Pico de temperatura
}
if (ThreadLocalRandom.current().nextDouble() < 0.05) {
humActual += rnd(8, 15); // Pico de humedad
}
if (ThreadLocalRandom.current().nextDouble() < 0.05) {
presActual += rnd(8, 18); // Pico de presión
}
// FASE 3: Actualizar timestamp
ultimaMedida = LocalDateTime.now();
}
Métodos Auxiliares:
/**
* Genera un número aleatorio en el rango [min, max).
* Usa ThreadLocalRandom para mejor rendimiento en entornos concurrentes.
*
* @param min Valor mínimo (inclusivo)
* @param max Valor máximo (exclusivo)
* @return Número aleatorio en el rango
*/
private double rnd(double min, double max) {
return ThreadLocalRandom.current().nextDouble(min, max);
}
/**
* Limita un valor entre un mínimo y un máximo (clamp).
*
* @param v Valor a limitar
* @param min Límite inferior
* @param max Límite superior
* @return Valor limitado
*/
private double limitarRango(double v, double min, double max) {
return Math.max(min, Math.min(max, v));
}
Explicación del algoritmo clamp:
Si v < min → retorna min
Si v > max → retorna max
Si min ≤ v ≤ max → retorna v
2.2. Método agregarPuntosASeries()
Propósito: Añadir los valores actuales a las series del gráfico, si los checkbox de la serie están seleccionados.
Diagrama de Flujo:
┌────────────────────────────────────┐
│ agregarPuntosASeries( │
│ tempHabilitada, │
│ humHabilitada, │
│ presHabilitada, │
│ incrementoTiempo) │
└─────────┬──────────────────────────┘
│
↓
┌─────────────────────────────────────┐
│ actualizamos el tiempo de la |
| simulación con el nuevo incremento |
| de timepo |
│ (Avanzar tiempo del eje X) │
└─────────┬───────────────────────────┘
│
↓
┌─────────────────────────────────────┐
│ si el checkbox de la serie |
| correspondiente está marcado │
└───────┬─────────────────────────────┘
SÍ ┤ │ NO
│ |
↓ └───────┐
┌──────────────────────────┐ │
│ Añade punto a la serie: │ │
│ (tiempo, temperatura) │ │
└──────────┬───────────────┘ │
│ │
↓ │
┌────────────────────────┐ │
│ Elimina puntos │ │
│ antiguos si tamaño>200 | │
└──────────┬─────────────┘ │
│ │
└────→ ┌ ← ← ← ← ┘
│
↓
┌─────────────────────────────────┐
│ repetir para todos lo sensores │
└────┬────────────────────────────┘
SÍ┤ │ NO
│ ↓
[Mismo proceso] [Continuar]
| │
│ │
└────→ ┌ ← ←┘
│
↓
(FIN)
2.3. Método recortarSerie()
Propósito: Evitar crecimiento infinito de memoria eliminando puntos antiguos.
Diagrama de Flujo:
┌───────────────────────────────┐
│ recortarSerie(serie) │
└──────────┬────────────────────┘
│
↓
┌────────────────────────────────────────┐
│ tamaño de serie > MAX_PUNTOS_POR_SERIE |
└──────────┬─────────────────────────────┘
SÍ ←─┤ │ NO
│ ↓
↓ ┌──────────┐
┌────────────────────────────┐ │ (FIN)
│ Si size=250 puntos: │ │
│ eliminar = 250 - 200 = 50│ │
│ Elimina primeros 50 │ │
└────────┬───────────────────┘ │
│ │
└─────→ ┌ ← ← ← ← ← ← ┘
│
↓
(FIN)
calcularLimiteInferiorX() y calcularLimiteSuperiorX()
Propósito: Crear efecto de "ventana deslizante" en el gráfico.
Diagrama de Flujo Combinado:
╔══════════════════════════════════════════════════════════╗
║ VENTANA DESLIZANTE - LÓGICA ║
╚══════════════════════════════════════════════════════════╝
FASE INICIAL (t ≤ 30s):
┌────────────────────────────────────────┐
│ Gráfico muestra: [0s ──────── 30s] │
│ Ventana FIJA al principio │
└────────────────────────────────────────┘
TRANSICIÓN (t = 35s):
┌────────────────────────────────────────┐
│ calcularLimiteInferiorX() │
│ ┌────────────────────────────────────┐ │
│ │ ¿tiempoSimulacion > VENTANA_TIEMPO?│ │
│ │ ¿35 > 30? │ │
│ └────────┬───────────────────────────┘ │
│ │ SÍ │
│ ↓ │
│ ┌────────────────────────────────────┐ │
│ │ return tiempoSimulacion - │ │
│ │ VENTANA_TIEMPO │ │
│ │ return 35 - 30 = 5s │ │
│ └────────────────────────────────────┘ │
└────────────────────────────────────────┘
RESULTADO:
┌────────────────────────────────────────┐
│ Gráfico muestra: [5s ──────── 35s] │
│ Ventana DESLIZANTE (se mueve) │
└────────────────────────────────────────┘
FASE AVANZADA (t = 60s):
┌────────────────────────────────────────┐
│ LimiteInferior: 60 - 30 = 30s │
│ LimiteSuperior: 60s │
│ Gráfico muestra: [30s ─────── 60s] │
└────────────────────────────────────────┘
2.4. Validación de Umbrales
Métodos hayAlertaXXX()
Propósito: Detectar si alguna magnitud supera su umbral máximo.
Métodos getMensajeAlertaXXX()
Propósito: Generar mensajes descriptivos para mostrar en la UI con los sigueitne formatos:
- "Temp = XX.X °C (máx YY.Y)".
- "Hum = XX.X % (máx YY.Y)"
- "Pres = XXXX.X hPa (máx YYYY.Y)"
Ejemplos de salida:
"Temp = 36.2 °C (máx 35.0)"
"Hum = 85.7 % (máx 80.0)"
"Pres = 1038.4 hPa (máx 1035.0)"
2.5. Formateo de Valores
Métodos getXXXFormateada()
Propósito: Convertir valores numéricos a String con formato específico para UI.
- Números con 1 decimal
- Fecha "dd/MM/yyyy HH:mm:ss"
2.6. Método resetearDatos()
Propósito: Reiniciar toda la simulación a su estado inicial.
Diagrama de Flujo:
┌────────────────────────┐
│ resetearDatos() │
└──────────┬─────────────┘
│
↓
┌──────────────────────────────┐
│ (Eliminar TODOS los puntos │
│ de la serie temperatura) │
└──────────┬───────────────────┘
│
↓
┌──────────────────────────────┐
│ (Eliminar TODOS los puntos │
│ de la serie humedad) │
└──────────┬───────────────────┘
│
↓
┌──────────────────────────────┐
│ (Eliminar TODOS los puntos │
│ de la serie presión) │
└──────────┬───────────────────┘
│
↓
┌──────────────────────────────┐
│ (Resetear contador tiempo) │
└──────────┬───────────────────┘
│
↓
┌──────────────────────────────┐
│ (Borrar timestamp) │
└──────────────────────────────┘
│
↓
(FIN)
2.7. Getters Básicos
Propósito: Proporcionar acceso de solo lectura a los atributos privados.
04_Controlador
🎛️ DESARROLLO DEL CONTROLADOR (DashboardController.java)
📋 PASO 4: CONTROLADOR MVC
5.1. Método initialize() - Ciclo de Vida
Diagrama de Flujo - initialize():
╔══════════════════════════════════════╗
║ PASO 1: cargarInformacionSensor() ║
╚══════════════╦═══════════════════════╝
│
↓
┌──────────────────────────────────┐
│ Muestra en la vista el nombre, |
| modelo y ubicación del sensor |
└──────────┬───────────────────────┘
│
↓
╔══════════════════════════════════════╗
║ PASO 2: configurarEstadoInicial() ║
╚══════════════╦═══════════════════════╝
│
↓
┌────────────────────────────────┐
│ Desmarca los checkbox │
│ Actualiza gráfico = vacío │
└──────────┬─────────────────────┘
│
↓
╔══════════════════════════════════════════╗
║ PASO 3: iniciarActualizacionAutomatica() ║
╚══════════════╦═══════════════════════════╝
│
↓
┌──────────────────────────────────────┐
│ timeline = new Timeline( │
│ new KeyFrame( │
│ Duration.millis(500), │
│ event -> cicloActualizacion() │
│ ) │
│ ) │
└──────────┬───────────────────────────┘
│
↓
┌──────────────────────────────────────┐
│ timeline.setCycleCount( │
│ Animation.INDEFINITE) │
│ (Repetir infinitamente) │
└──────────┬───────────────────────────┘
│
↓
┌──────────────────────────────────────┐
│ timeline.play() │
│ (Iniciar temporizador) │
└──────────┬───────────────────────────┘
│
↓
┌──────────────────────────────────────┐
│ Aplicación LISTA │
│ Timeline ejecuta cicloActualizacion()|
| cada 0.5s │
└──────────────────────────────────────┘
5.2. CICLO PRINCIPAL - Método cicloActualizacion()
Diagrama de Flujo Completo del Ciclo:
╔═════════════════════════════════════════════════════╗
║ Timeline ejecuta cicloActualizacion() cada 500ms ║
╚═════════════════════════════════════════════════════╝
│
↓
┌─────────────────────────────────────┐
│ cicloActualizacion() │
│ (Orquestador del ciclo) │
└──────────┬──────────────────────────┘
│
↓
╔════════════════════════════════════╗
║ FASE 1: generarNuevaLectura() ║
╚══════════════╦═════════════════════╝
│
↓
┌──────────────────────────────────────┐
│ modelo.generarLectura() │
│ ┌──────────────────────────────────┐ │
│ │ • Variaciones aleatorias │ │
│ │ • Picos ocasionales │ │
│ │ • Actualizar timestamp │ │
│ └──────────────────────────────────┘ │
└──────────┬───────────────────────────┘
│
↓
╔══════════════════════════════════════════╗
║ FASE 2: actualizarValoresMostrados() ║
╚══════════════╦═══════════════════════════╝
│
↓
┌──────────────────────────────────────┐
│ actualiza en el card de los valores |
| actuales los nuevos valores leido y |
| la hora de la lectura |
└──────────┬───────────────────────────┘
│
↓
╔═════════════════════════════════════╗
║ FASE 3: agregarPuntosAlGrafico() ║
╚══════════════╦══════════════════════╝
│
↓
┌──────────────────────────────────────┐
│ ┌──────────────────────────────────┐ │
│ │ Añade puntos a series habilitadas│ │
│ │ Recorta si >200 puntos │ │
│ └──────────────────────────────────┘ │
└──────────┬───────────────────────────┘
│
↓
╔══════════════════════════════════════════╗
║ FASE 4: actualizarEjeX() ║
╚══════════════╦═══════════════════════════╝
│
↓
┌──────────────────────────────────────┐
│ Establece los limites superior e |
| inferior del gráfico |
| (Ventana deslizante) │
└──────────┬───────────────────────────┘
│
↓
╔══════════════════════════════════════════╗
║ FASE 5: actualizarAvisos() ║
╚══════════════╦═══════════════════════════╝
│
↓
┌──────────────────────────────────────┐
│ Usuario ve interfaz actualizada: │
│ ✓ Nuevos valores numéricos │
│ ✓ Gráfico con nuevo punto │
│ ✓ Ejes ajustados │
│ ✓ Avisos actualizados │
└──────────┬───────────────────────────┘
│
│ (Esperar 500ms)
│
└──────→ (volver a cicloActualizacion())
5.2.1. Fase 1: Generar Nueva Lectura
/**
* Solicita al modelo generar una nueva lectura del sensor.
* Delega completamente la lógica al modelo.
*/
5.2.2. Fase 2: Actualizar Valores Mostrados
/**
* Actualiza los valores numéricos mostrados en la card de valores actuales.
* Obtiene valores formateados del modelo y los asigna a los labels.
*/
5.2.3. Fase 3: Agregar Puntos al Gráfico
/**
* Agrega nuevos puntos a las series del gráfico.
* Solo añade a series cuyo checkbox está marcado.
*/
5.2.4. Fase 4: Actualizar Eje X
/**
* Actualiza los límites del eje X para crear efecto ventana deslizante.
* Delega cálculos al modelo.
*/
5.3. Fase 5: Actualizar Avisos - DETALLADO
Diagrama de Flujo Completo:
┌───────────────────────────┐
│ actualizarAvisos() │
└─────────┬─────────────────┘
│
↓
┌─────────────────────────────┐
│ Eliminar avisos antiguos │
└─────────┬───────────────────┘
│
↓
╔═══════════════════════════════════════╗
║ VALIDACIÓN TEMPERATURA ║
╚═══════════════╦═══════════════════════╝
│
↓
┌──────────────────────────────┐
│ ¿hayAlertaTemperatura()? │
└──────┬──────┬────────────────┘
SÍ┤ │ NO
│ |
↓ └─────────────┐
┌──────────────────────────────┐ │
│ ┌──────────────────────────┐ │ │
│ │ Crea Label con: │ │ │
│ │ • Icono ⚠ │ │ │
│ │ • Texto formateado │ │ │
│ │ • StyleClass "warn-pill" │ │ │
│ └──────────────────────────┘ │ │
└──────────┬───────────────────┘ │
│ │
↓ │
┌──────────────────────────────┐ │
│ añadir alerta a la card │ │
| de avisos │ │
└──────────┬───────────────────┘ │
│ │
└────→ ┌ ← ← ← ← ← ← ┘
│
↓
╔═══════════════════════════════════════╗
║ VALIDACIÓN RESTO DE SENSORES ║
╚═══════════════╦═══════════════════════╝
│
↓
╔═══════════════════════════════════════╗
║ VERIFICACIÓN FINAL ║
╚═══════════════╦═══════════════════════╝
│
↓
┌─────────────────────────────────────┐
│ ¿Hay al menos UNA alerta? │
└──────┬──────┬───────────────────────┘
NO┤ │ SI
│ |
↓ └─────────────┐
┌──────────────────────────────┐ │
│ ┌──────────────────────────┐ │ │
│ │ Crea Label con: │ │ │
│ │ • Texto "Sin avisos" │ │ │
│ │ • StyleClass "ok-pill" │ │ │
│ └──────────────────────────┘ │ │
└──────────┬───────────────────┘ │
│ │
└─────→ ┌ ← ← ← ← ← ← ┘
│
↓
(FIN)05_Eventos
🎛️ CONTROLADOR - EVENTOS Y CLASE PRINCIPAL
5.9. MANEJADORES DE EVENTOS DE USUARIO
Evento 1: refrescarSeries()
Invocado por: CheckBox (cbTemp, cbHum, cbPres) cuando cambia su estado
Nota importante: Al desmarcar un checkbox, la serie se oculta pero NO pierde sus datos. Al volver a marcar, recupera todo el historial.
Evento 2: resetChart()
Invocado por: Button "Reset"
Evento 3: cerrarApp()
Invocado por: MenuItem "Cerrar" del menú Archivo