🖼️ Imagen · Propiedades del Widget
Objetivo Principal: Permite al usuario configurar el widget Imagen, utilizado para añadir imágenes estáticas, diagramas, logotipos o recursos visuales dentro de dashboards Analytics.
📸 Mapeo de Interfaz
🧩 Despiece de Elementos Funcionales
Los elementos marcados con — no aparecen señalados en la captura: existen en la versión 0.4.46 pero la imagen no los numera.
| # | Nombre del Elemento | Tipo | Destino / Acción | Descripción Funcional |
|---|---|---|---|---|
| 1 | Pestañas de configuración | Navegación interna | Cambia sección de propiedades | Permite alternar entre las distintas categorías de configuración del widget. Para utilizarlo, el usuario debe pulsar “Datos”, “Apariencia” o “Texto” según el apartado que quiera modificar. |
| 1.1 | Campo "Nombre del widget" | Campo de texto | Renombra el widget | Permite definir el nombre identificativo del widget de imagen dentro del dashboard. Para utilizarlo, el usuario debe escribir el nombre que quiera mostrar en la cabecera del widget. |
| 1.2 | Sección "Configuración de Imagen" | Configuración multimedia | Configura la imagen mostrada | Permite seleccionar y personalizar la imagen visualizada dentro del widget. Para utilizarlo, el usuario elige la fuente con "Subir imagen" o "URL externa", escribe una descripción en "Texto alternativo (accesibilidad)" para quien use un lector de pantalla, selecciona el "Ajuste de imagen" y ajusta "Opacidad", "Radio de bordes", "Sombra" y "Color de fondo". |
| 2 | Pestaña "Apariencia" | Configuración visual | Personaliza el contenedor | Permite acceder a las configuraciones visuales relacionadas con el aspecto externo del widget de imagen. |
| 2.1 | Sección "Contenedor" | Configuración visual | Ajusta estilo del widget | Permite modificar el estilo visual del contenedor del widget. Para utilizarlo, el usuario debe elegir el "Estilo de marco" y decidir con las casillas si oculta la cabecera, el borde, la ventana temporal o el conteo de variables. El selector de fondo y el deslizador de transparencia del contenedor sólo se ofrecen al configurar el widget desde una vista SCADA. |
| 3 | Pestaña "Texto" | Configuración textual | Configura textos auxiliares | Permite acceder a configuraciones relacionadas con textos adicionales mostrados junto a la imagen. |
| 3.1 | Sección "Textos adicionales" | Configuración textual | Añade información contextual | Permite añadir subtítulos y notas informativas dentro del widget de imagen. Para utilizarlo, el usuario debe rellenar los campos disponibles con el texto que quiera mostrar. |
| — | Puntos de conexión | Puntos de anclaje | Enganchan tuberías a la imagen | En una pantalla SCADA, la imagen ofrece cuatro puntos de conexión, uno centrado en cada lado, y los cuatro sirven igual de entrada que de salida para el extremo de una tubería; una vez enganchado, el trazo sigue a la imagen si después la mueves o la redimensionas. Solo se resaltan mientras dibujas una tubería y el cursor pasa cerca, y una imagen que forme parte de un grupo deja de ofrecerlos. |
💡 Guía de Uso
El widget Imagen está diseñado para añadir contenido visual estático dentro de dashboards y paneles Analytics.
Se utiliza principalmente para:
- Mostrar logotipos
- Insertar diagramas
- Añadir planos
- Mostrar imágenes informativas
- Representar recursos visuales
- Añadir contenido gráfico
- Complementar dashboards visualmente
Esos cuatro puntos de conexión, uno por lado, son lo que convierte a Imagen en el soporte habitual de un sinóptico sobre plano. Con ellos, la fotografía o el esquema de un equipo deja de ser una simple ilustración y pasa a comportarse como un elemento más del proceso: las tuberías se enganchan al lado que corresponda y acompañan a la imagen si más adelante la mueves o cambias su tamaño.
✅ Cómo configurar correctamente el widget Imagen
- Arrastra el widget al canvas.
- Selecciona el widget dentro del dashboard.
- Desde el panel de propiedades:
- Sube una imagen o introduce una URL.
- Ajusta tamaño y visualización.
- Configura opacidad y bordes.
- Personaliza el contenedor.
- Añade textos adicionales si es necesario.
- Guarda los cambios realizados.