Referencia de widgets

Los boards de IronFlock se construyen a partir de widgets. Cada tipo de widget cumple un propósito específico — desde mostrar datos en tiempo real hasta capturar entradas del usuario. Agregue cualquier widget arrastrándolo desde el panel de widgets a su lienzo de board, y luego configúrelo a través del panel de ajustes.

Los widgets se dividen en cuatro grupos: Visualización de datos para gráficos y pantallas de estado, Contenido y multimedia para contenido estático y enriquecido, Entrada y control para capturar entradas y enviar comandos, y Navegación para moverse entre páginas del board.

Visualización de datos

Widgets que convierten datos en tiempo real e históricos en gráficos, indicadores y pantallas de estado.

Gráfico cartesiano

Muestra datos de series temporales o categóricos como gráficos de líneas, barras o una combinación. Soporta múltiples series de datos en el mismo gráfico.

Cuándo usarlo: Tendencias de valores de sensores a lo largo del tiempo, comparar múltiples señales lado a lado, mostrar totales diarios como barras.

Lo que configura:

• Una o más series de datos, cada una apuntando a una columna de datos de su app
• Tipo de gráfico por serie: línea, barra o burbuja
• Tipo de eje X: basado en tiempo o categórico
• Etiqueta del eje Y y ventana de tiempo (por ejemplo, últimos 5 minutos agregados por minuto)
• Colores por serie

Indicador

Un medidor radial que muestra un único valor en tiempo real con zonas de umbral coloreadas.

Cuándo usarlo: Temperatura, presión, nivel de llenado o cualquier valor donde desee un estado de un vistazo con zonas verde/amarillo/rojo.

Lo que configura:

• La columna de datos a leer (siempre muestra el valor más reciente)
• Unidad y precisión decimal
• Límites de las zonas de color (por ejemplo, seguro: 0–60, advertencia: 60–80, crítico: 80–120)
• Opcional: promediar las últimas N lecturas para suavizar el ruido

Visualización de valores

Muestra uno o más valores individuales con etiquetas y unidades. Limpio y minimalista — ideal para indicadores KPI.

Cuándo usarlo: Mostrar temperatura actual, tiempo de actividad, último evento o cualquier métrica clave como número.

Lo que configura:

• Una o más columnas de datos, cada una con etiqueta y unidad
• Precisión decimal
• Colores de texto por valor

Señal

Indicadores de estado compactos — círculos o cuadrados — que cambian de color según el valor actual, ofreciendo un panel de estado de un vistazo.

Cuándo usarlo: Paneles de dispositivos en línea/fuera de línea, estados OK/advertencia/error en múltiples activos, luces de estado basadas en umbrales.

Lo que configura:

• Una o más señales, cada una leyendo una columna de datos
• Reglas de mapeo de colores por señal: coincidencias exactas (por ejemplo, ONLINE) o comparaciones numéricas (por ejemplo, >=70)
• Disposición (horizontal o vertical) y forma (círculo o cuadrado)
• Título y subtítulo opcionales

Gráfico de anillo

Un gráfico circular que muestra segmentos proporcionales.

Cuándo usarlo: Mostrar distribución — por ejemplo, dispositivos en línea vs fuera de línea, participación de producción por tipo de producto.

Lo que configura:

• Segmentos, cada uno con etiqueta, color y columna de datos (o valor fijo)
• Tamaño del recorte (controla el diámetro del agujero interior)

Tabla

Muestra filas de datos en formato tabular con columnas configurables.

Cuándo usarlo: Mostrar una lista de máquinas, eventos recientes, registros de inspección o cualquier conjunto de datos estructurado.

Lo que configura:

• Columnas, cada una con encabezado, columna de datos y tipo de visualización
• Altura de fila y tamaño de fuente del encabezado
• Número de filas a mostrar

Tipos de visualización de columnas: texto plano, número, estado (mapea valores a colores), booleano, imagen o botón (enlace clicable).

Mapa de calor

Un mapa de calor basado en cuadrícula para visualizar intensidad a través de dos dimensiones.

Cuándo usarlo: Consumo de energía por hora y día de la semana, utilización de máquinas por turno, patrones de anomalías a través del tiempo.

Lo que configura:

• Columnas del eje X (por ejemplo, hora del día) y eje Y (por ejemplo, día de la semana)
• La columna de valor para la intensidad del calor
• Escala mín/máx y si usar un gradiente de color continuo o escalonado

Historial de estados

Una línea de tiempo horizontal que muestra cuándo cambiaron los estados a lo largo del tiempo, una fila por activo.

Cuándo usarlo: Historial de estado de máquinas (en marcha / detenida / mantenimiento), registros de turnos, líneas de tiempo de eventos.

Lo que configura:

• Nombres de estados y sus colores (por ejemplo, En marcha = verde, Fallo = rojo)
• Las columnas de datos para marca de tiempo, valor de estado y nombre del activo

Mapa

Muestra datos geográficos en un mapa interactivo. Soporta marcadores circulares y líneas de seguimiento.

Cuándo usarlo: Mostrar ubicaciones de dispositivos, seguimiento de vehículos, posiciones de activos en campo.

Lo que configura:

• Estilo de mapa (claro u oscuro)
• Una o más series: círculos (marcadores de última posición) o líneas (recorridos de movimiento)
• Las columnas de datos para latitud y longitud
• Una columna pivote para dividir datos por dispositivo o activo

SCADA

Renderiza símbolos SVG industriales interactivos — bombas, válvulas, tanques, motores, tuberías, indicadores — de la biblioteca SCADA de ThingsBoard, con enlaces de datos en tiempo real y coloración basada en estados.

Cuándo usarlo: Diagramas de proceso y miméticos de planta — mostrando el estado en tiempo real de bombas, válvulas, tanques y flujos sobre un esquema.

Lo que configura:

• El tipo de símbolo a mostrar
• Los enlaces de datos que controlan el estado del símbolo (en marcha/detenido, abierto/cerrado, niveles de fluido)
• Colores de estado (en marcha, detenido, advertencia, crítico) y otros estilos por símbolo

Para construir pantallas de proceso completas, consulte SCADA.

Contenido y multimedia

Widgets para contenido estático y enriquecido — imágenes, texto con formato y páginas web embebidas.

Imagen

Muestra una imagen estática desde una URL. Útil para logotipos, diagramas o gráficos instructivos.

Superposición de imagen

Coloca valores de datos en tiempo real sobre una imagen de fondo — ideal para planos de planta, diagramas o esquemas.

Cuándo usarlo: Superponer temperaturas en un plano de fábrica, mostrar niveles de llenado en un diagrama de tanque.

Lo que configura:

• URL de la imagen de fondo
• Marcadores superpuestos: barras de progreso o etiquetas de texto posicionadas en coordenadas relativas sobre la imagen
• Columna de datos para cada marcador (valor en tiempo real o fijo)

Markdown

Renderiza Markdown (CommonMark y GitHub Flavored Markdown) con bloques de código resaltados por sintaxis e interpolación de variables en tiempo real.

Cuándo usarlo: Paneles de documentación, instrucciones o notas dinámicas que combinan texto con formato y valores de datos en tiempo real.

Lo que configura:

• El texto fuente en Markdown
• Variables referenciadas en el texto mediante {{variableName}}, cada una vinculada a una columna de datos o valor fijo

Etiqueta

Muestra una única etiqueta de texto configurable con control total sobre tipografía y alineación.

Cuándo usarlo: Títulos de sección, pies de foto, anotaciones estáticas o un único valor dinámico representado como texto.

Lo que configura:

• El texto a mostrar (se conservan los saltos de línea)
• Tamaño, color, peso y estilo de fuente
• Alineación horizontal y vertical, y color de fondo

Embeber

Inserta contenido web externo en un iframe aislado — una sola página, o varias organizadas en una cuadrícula adaptable.

Cuándo usarlo: Integrar paneles de terceros, documentación, herramientas externas o cualquier página web accesible dentro de un board.

Lo que configura:

• La URL a insertar (el sitio de destino debe permitir la inserción en iframe)
• Un título opcional mostrado encima del contenido
• Modo multi-inserción: varias URLs organizadas en una cuadrícula, con un espacio configurable

Entrada y control

Widgets que capturan entradas del usuario o envían comandos y filtros de vuelta a la plataforma.

Formulario

Un formulario de entrada de datos configurable que escribe la entrada del usuario de vuelta en el backend de datos de su app.

Cuándo usarlo: Captura manual de datos — registros de inspección, registros de mantenimiento, entrada de operarios, puntos de ajuste de parámetros.

Lo que configura:

• Campos de formulario de varios tipos: texto, número, casilla de verificación, área de texto, desplegable, fecha/hora
• Opciones por campo: etiqueta, obligatorio, valor predeterminado, validación, mín/máx y columna de datos de destino
• Título, subtítulo opcionales y si el formulario se abre en un diálogo

Interruptor

Uno o más interruptores de palanca Material Design que reflejan un valor en tiempo real y activan una acción del dispositivo al cambiar.

Cuándo usarlo: Encender/apagar equipos, alternar configuraciones binarias del dispositivo, enviar comandos de control desde el panel.

Lo que configura:

• Uno o más interruptores, cada uno leyendo una columna de datos
• Mapeo de estado para ENCENDIDO/APAGADO: valores exactos o comparaciones numéricas (por ejemplo, >50)
• La app, dispositivo y tema de acción de destino invocado al cambiar
• Etiqueta y colores de valor por interruptor

Desplegable de filtro

Un desplegable de opciones predefinidas que publica el valor seleccionado como parámetro de filtro para que otros widgets lo consuman.

Cuándo usarlo: Permitir a los usuarios filtrar todo un board por tipo de dispositivo, línea, ubicación o cualquier categoría.

Lo que configura:

• La etiqueta mostrada encima del desplegable
• La clave de parámetro que otros widgets referencian en sus consultas de datos
• La lista de opciones, cada una con etiqueta y valor

Calendario de filtro

Un selector de rango de fecha/hora — fecha única o rango — que almacena las marcas de tiempo seleccionadas como parámetros de filtro para otros widgets.

Cuándo usarlo: Paneles de series temporales, análisis histórico e informes con una ventana de tiempo seleccionable por el usuario.

Lo que configura:

• Las claves de parámetro de inicio y fin (use una para el modo de fecha única, ambas para un rango)
• El número de meses mostrados a la vez (1–3)
• La etiqueta de entrada

Navegación

Widgets para moverse entre las páginas y secciones de un board de múltiples páginas.

Barra de navegación

Una barra de navegación superior horizontal con un título o marca clicable y múltiples elementos con rutas.

Cuándo usarlo: Navegación de nivel superior entre las páginas de un board de múltiples páginas.

Lo que configura:

• El texto del título/marca y su ruta de destino
• Elementos de navegación, cada uno con etiqueta, icono Material y ruta
• Tamaño, peso y colores de fuente
• Segmentos de ruta dinámicos mediante sustitución de {{variable}}

Botón de navegación

Un único botón clicable que redirige a otra página o realiza la navegación hacia atrás en el navegador.

Cuándo usarlo: Botones de retroceso, enlaces de llamada a la acción o saltar a una vista específica del board.

Lo que configura:

• La etiqueta del botón y un icono Material opcional
• La ruta de destino (dejar en blanco para navegación automática hacia atrás)
• Tamaño y colores de fuente
• Segmentos de ruta dinámicos mediante sustitución de {{variable}}

Navegación lateral

Un menú lateral vertical con iconos Material y resaltado basado en rutas del elemento activo.

Cuándo usarlo: Navegación lateral persistente para paneles con varias secciones o vistas.

Lo que configura:

• Un título con ruta opcional
• Elementos de navegación, cada uno con etiqueta, icono Material y ruta
• Resaltado del elemento activo basado en la ruta actual
• Tamaño, peso y colores de fuente