UD03T03_DashboardIoT
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 |