Librería de visualizaciones
Etiquetas
📌 ¿Qué son?
Las etiquetas actúan como indicadores visuales inmediatos mediante formas que se rellenan proporcionalmente al valor recibido. Están diseñadas para mostrar la magnitud de una variable de manera rápida e intuitiva, especialmente útil en entornos de operación o mantenimiento.
🔍 Funcionalidad destacada: permiten incluir un valor objetivo, que se representa como un fondo blanco, y se pueden configurar con umbrales de color, lo que facilita la detección visual de estados anómalos.

🎯 ¿Cuándo usarlas?
Cuando se necesita mostrar valores en tiempo real sin desplegar gráficos complejos.
En contextos donde es importante resumir información clave de forma compacta y legible.
Para asociar visualmente un valor a un objeto 3D o una ubicación específica dentro del gemelo digital.
Como refuerzo visual inmediato frente a desviaciones respecto a objetivos o condiciones fuera de rango.
🧠 Ventaja cognitiva: disminuyen la carga mental del usuario final al facilitar la interpretación contextual del dato (qué es, dónde está, qué significa).
📥 Formatos de Envío de Datos
▸ Desde dataset
Ejemplo de estructura:
Fecha | Temperatura | Temperatura Objetivo |
---|---|---|
17/04/2025 | 22 | 25 |
18/04/2025 | 20 | 25 |
19/04/2025 | 26 | 25 |
20/04/2025 | 17 | 25 |
El valor mostrado será el de la última fila.
Se define en el panel:
Value:
Temperatura
Value type:
Number
Popup:
Fecha
,Temperatura
,Temperatura Objetivo

▸ Desde MQTT
Etiquetas simples:
Etiquetas con objetivo:
🖥️ Visualización en la App
Las etiquetas se posicionan directamente sobre objetos 3D o ubicaciones del gemelo.
Se renderizan como formas coloreadas (círculo, barra, tarjeta, etc.).
En caso de configurar popup, se muestran detalles adicionales al hacer hover.
Si se configuran umbrales, el color de la forma se actualiza dinámicamente.
Cuando hay un objetivo, este se representa como un fondo blanco que muestra el grado de cumplimiento.Las etiquetas se pueden visualizar de la siguiente forma:


🛠️ Configuración de la visualización de la etiqueta (en App 3D)
Una vez que el KPI tipo etiqueta ha sido creado desde el Panel Admin, en la App de visualización 3D es posible ajustar su apariencia visual, comportamiento según umbrales y otros aspectos gráficos. Estos se agrupan en las siguientes secciones:
🔹 Estructura
Configuración del Nombre
Personalizar Nombre: permite cambiar el texto del KPI (en lugar del nombre del dato).
Ocultar Nombre: elimina el nombre visualmente del render.
Alineación del Nombre: alinear el nombre a la izquierda, centro o derecha.
Personalizar Tamaño del Nombre:
Activar/desactivar.
Escala numérica (ej:
0.8
).
Dimensiones
Ancho y Alto de la tarjeta/forma de la etiqueta.
Valores numéricos proporcionales (ej:
10
y8
).
🔹 Configuración de Etiqueta
Eje (valores de referencia para visualización proporcional)
Valor máximo: valor considerado 100% (relleno total).
Valor mínimo: valor considerado 0% (relleno vacío).
Color del valor correcto: se aplica si el valor está dentro del rango deseado.
Color del objetivo: representa visualmente el target con fondo blanco o barra secundaria.
Color del valor por encima del objetivo: para destacar si se supera el valor objetivo.
Datos (umbrales semánticos)
Umbral máximo / mínimo: definen el rango esperado del valor.
Color por encima del umbral: se activa si el dato sobrepasa el máximo.
Color por debajo del umbral: para valores anómalamente bajos.
🔹 Configuración de Unidades
Unidades separadas: muestra el valor seguido por la unidad (
25 °C
).Unidades unidas: permite unificar visualmente la presentación.
Unidades del valor: campo donde se introduce manualmente la unidad deseada (
kWh
,%
,bar
, etc.).
🔹 Otros
Tamaño de letra personalizado: habilita control sobre el tamaño tipográfico del valor.
Valor recomendado según proporción visual (
1.2
,1.5
, etc.).
Color del valor: define el color tipográfico del número mostrado.
Mostrar fondo: opción para habilitar o deshabilitar fondo visual detrás del valor.



✅ Buenas Prácticas
Recomendación | Por qué es importante |
---|---|
Asociar la etiqueta al objeto real | Contextualiza el dato y mejora comprensión situacional. |
Usar colores coherentes con estados | Refuerza la lectura semántica (verde = normal, rojo = alerta). |
Evitar saturación visual | Muchas etiquetas en una misma vista pueden dificultar la interpretación. |
Incluir unidad | Aumenta la claridad (ej. °C, %, kWh). |
Mantener popup informativo pero conciso | No sobrecargar con texto irrelevante. |