Librería de visualizaciones

Table of Content

Table of Content

Table of Content

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 y 8).

🔹 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.