Estilo y Temas

Cada board en IronFlock viene con un aspecto predeterminado, pero tienes control total sobre su apariencia. Los ajustes de estilo del dashboard te permiten aplicar un tema, ajustar el diseño de la cuadrícula y controlar cómo se ven los widgets — todo desde un único panel de configuración. Para widgets individuales que necesiten un aspecto diferente, puedes sobrecargar el estilo global directamente en el editor de widgets.

Temas

Un tema establece el tono visual general de tu board con un solo clic. IronFlock incluye un conjunto de temas integrados — cada uno define una paleta coordinada de colores, fondos y valores de estilo predeterminados que se aplican en todo el dashboard.

Para aplicar un tema:

1. Abre el panel de Board Settings (icono de engranaje en la barra de herramientas superior).
2. Ve a la sección Theme.
3. Elige un tema de la lista.

Todos los widgets, fondos y colores de texto se actualizan instantáneamente para coincidir con el tema seleccionado.

Los temas son un punto de partida — no una elección fija. Después de elegir un tema, puedes sobrecargar cualquier ajuste individual (colores, bordes, fondos) y esas sobrecargas tienen prioridad sobre los valores predeterminados del tema.

Diseño

El lienzo del board tiene varias propiedades de diseño que controlan cómo se posicionan los widgets, cómo se comporta el lienzo en diferentes tamaños de pantalla y si el board se desplaza o se escala. Estas propiedades trabajan juntas para definir el comportamiento espacial de tu dashboard.

Grid Snap

Cuando Grid Snap está activado, los widgets se ajustan a la celda de cuadrícula más cercana al colocarlos o moverlos. La cuadrícula divide el lienzo en una matriz de filas y columnas — los widgets siempre se alinean con los límites de las celdas, lo que mantiene el diseño estructurado y ordenado.

Cuando Grid Snap está desactivado, los widgets pueden posicionarse libremente en cualquier lugar del lienzo con precisión a nivel de píxel. Este es el modo a usar para diseños de estilo SCADA donde los símbolos necesitan colocarse en posiciones exactas para coincidir con un diagrama de proceso, plano de planta o esquema de equipos.

Propiedades de Grid Snap:

• Columns — El número de divisiones verticales en el lienzo. Un mayor número de columnas proporciona un posicionamiento horizontal más fino. Un número menor ajusta los widgets a posiciones más amplias.
• Rows — El número de divisiones horizontales. Más filas significa un control vertical más fino; menos filas significa un ajuste vertical más grueso.

Consejo: Para boards SCADA que usan Grid Snap, configura un número alto de filas y columnas (por ejemplo, 48×32 o más) para obtener un control detallado sobre la colocación de símbolos mientras sigues beneficiándote de la alineación a la cuadrícula.

Overflow X / Overflow Y

Estas propiedades controlan si el lienzo se extiende más allá del viewport visible.

• Overflow X — Cuando está activado, el lienzo puede extenderse más allá del borde derecho de la pantalla. Aparece una barra de desplazamiento horizontal para que los usuarios puedan desplazarse hasta el contenido colocado fuera del ancho inicial del viewport. Los widgets no se escalan horizontalmente cuando se redimensiona la pantalla.
• Overflow Y — Cuando está activado, el lienzo puede extenderse más allá del borde inferior de la pantalla. Aparece una barra de desplazamiento vertical para el contenido colocado debajo de la altura inicial del viewport. Los widgets no se escalan verticalmente cuando se redimensiona la pantalla.

Overflow funciona tanto con Grid Snap activado como desactivado. Cuando el overflow está activo en una dirección, el diseño se vuelve no responsivo en esa dirección — los widgets mantienen su tamaño en lugar de estirarse o encogerse con la ventana. Esto es útil para diagramas SCADA grandes, flujos de proceso amplios o esquemas de equipos altos donde el diseño completo no debe comprimirse para caber en la ventana.

Cuando ambos overflows están desactivados, los widgets están limitados al área visible y se escalan de forma responsiva con la pantalla.

Scale to Fit

Scale to Fit hace que todo el board se escale proporcionalmente para llenar el espacio de pantalla disponible. Defines una relación de aspecto fija para el lienzo, y el board se escala hacia arriba o hacia abajo para ajustarse a la ventana del navegador mientras preserva esa relación.

Propiedades de Scale to Fit:

• Aspect Ratio — La relación ancho-alto del lienzo (por ejemplo, 16:9, 4:3 o un valor personalizado). El board siempre mantendrá esta relación independientemente de las dimensiones reales de la pantalla. Aparece espacio vacío (letterboxing) en los lados o arriba/abajo si la relación de aspecto de la pantalla no coincide.

Scale to Fit funciona tanto con Grid Snap activado como desactivado. Es mutuamente excluyente con Overflow — cuando Scale to Fit está activo, el lienzo no se desplaza porque todo el diseño siempre es visible.

Este modo es ideal para:

• Pantallas de sala de control — El dashboard llena cualquier monitor de forma limpia sin desplazamiento ni distorsión
• Pantallas de kiosco — Un diseño fijo que se adapta automáticamente a diferentes tamaños de pantalla
• Dashboards de presentación — Apariencia consistente en portátiles, proyectores y pantallas montadas en pared

Widget Fixed Size

Cada widget tiene propiedades opcionales de Fixed Width y Fixed Height que pueden activarse individualmente. Cuando se activan, el widget no cambiará de tamaño en esa dirección cuando se redimensiona la pantalla — se vuelve no responsivo en ese eje mientras el resto del diseño del board permanece fluido.

Esto es útil cuando ciertos elementos necesitan un tamaño estable independientemente de las dimensiones de la pantalla. Por ejemplo, una barra lateral de navegación que contiene etiquetas de texto debe mantener un ancho fijo para que el texto siga siendo legible, aunque el resto del board se escale de forma responsiva.

Para establecer un tamaño fijo en un widget:

1. Selecciona el widget en el lienzo.
2. Abre el Widget Editor.
3. Activa Fixed Width y/o Fixed Height.

Símbolos SCADA y tamaño fijo

Cuando se colocan símbolos SCADA en un board, obtienen tanto Fixed Width como Fixed Height activados por defecto. Los iconos resaltados en la barra de herramientas del widget indican las restricciones de tamaño fijo activas:

Los símbolos SCADA representan equipos físicos y elementos de proceso — necesitan mantener sus proporciones y posiciones relativas para representar con precisión un diseño del mundo real. En un modo responsivo de Grid Snap, esto solo es posible cuando las dimensiones de los símbolos están fijadas. Sin el tamaño fijo, el reescalado responsivo distorsionaría los símbolos y los desplazaría fuera de alineación.

Consulta las Opciones de diseño de boards SCADA para una visión general de cómo estos modos de diseño se aplican específicamente a los dashboards SCADA.

Resumen de modos de diseño

Para configurar las propiedades de diseño:

1. Abre el panel de Board Settings.
2. Busca la sección Layout.
3. Activa Grid Snap y establece filas/columnas, o desactívalo y configura Overflow o Scale to Fit con la relación de aspecto deseada.

Estilo global de widgets

Más allá del tema, puedes ajustar con precisión cómo se ven todos los widgets desde los ajustes de estilo del dashboard. Estos ajustes se aplican globalmente — cada widget en el board los hereda a menos que se sobrecargen individualmente.

Lo que puedes personalizar:

• Bordes — Controla el ancho y color del borde alrededor de los widgets. Establécelos en cero para un aspecto sin bordes, o hazlos prominentes para separar visualmente los widgets.
• Redondeo de esquinas — Ajusta el radio del borde para ir desde esquinas rectangulares afiladas hasta tarjetas completamente redondeadas.
• Fondos — Establece el color de fondo del widget o haz los widgets transparentes para que el fondo del board se vea a través.

Para establecer estilos globales de widgets:

1. Abre el panel de Board Settings.
2. Ve a la sección Style.
3. Ajusta los bordes, redondeo de esquinas y configuración de fondo según sea necesario.

Estos cambios se aplican inmediatamente en todos los widgets del board.

Sobrecargas de estilo por widget

A veces un solo widget necesita destacarse — un indicador de estado con fondo de color, una tarjeta de encabezado sin borde o un gráfico con relleno adicional. En lugar de cambiar el estilo global, puedes sobrecargarlo para ese widget específico.

Para sobrecargar estilos en un solo widget:

1. Haz clic en el widget en el lienzo para seleccionarlo.
2. Abre el Widget Editor (el panel de configuración del widget).
3. Busca los ajustes de estilo o apariencia dentro del editor de widgets.
4. Ajusta los bordes, redondeo de esquinas o fondo solo para ese widget.

Los ajustes por widget tienen prioridad sobre el estilo global del dashboard. Si más tarde cambias el estilo global o cambias de tema, los widgets con sobrecargas mantienen su aspecto personalizado.

Consejo: Usa los estilos globales para establecer una base consistente, luego usa las sobrecargas por widget con moderación para elementos que necesiten un tratamiento especial.

Poniendo todo junto

Un flujo de trabajo de estilo típico se ve así:

1. Elige un tema que coincida con la identidad visual de tu proyecto.
2. Ajusta la cuadrícula si necesitas un control más preciso sobre la colocación de widgets.
3. Establece estilos globales de widgets para bordes, esquinas y fondos para ajustar el tema.
4. Sobrecarga widgets individuales en el editor de widgets donde elementos específicos necesiten un aspecto diferente.

Este enfoque por capas — tema → estilos globales → sobrecargas por widget — mantiene tus boards consistentes mientras te da total flexibilidad donde importa.