¶ Elemento Imagen Vectorial en el Módulo de Paneles
El módulo de paneles de Dragsa ofrece un elemento de tipo imagen vectorial que permite al usuario incorporar imágenes vectoriales en forma de cajas dentro de un panel. Este recurso es ideal para la creación de gráficos o montajes con imágenes de alta resolución, ya que facilita su escalado sin pérdida de calidad.
Este elemento es altamente personalizable y permite al usuario ajustar tanto el formato como el comportamiento de la imagen vectorial de acuerdo con diversas condiciones o parámetros definidos. Gracias a esta flexibilidad, se adapta a necesidades específicas de monitoreo y visualización, facilitando la rápida interpretación de datos y una respuesta ágil ante cambios en tiempo real.
¶ ¿Cómo añadir un elemento tipo Imagen Vectorial?
Al ingresar al modo de edición de un panel en Dragsa, el usuario puede agregar un elemento tipo Imagen Vectorial desde la sección de elementos del editor de paneles.
Para incluir el elemento Imagen Vectorial, el usuario simplemente debe hacer clic en el elemento y arrastrarlo hasta el lugar deseado en el panel. Mientras arrastra, se muestra un rectángulo punteado que guía al usuario, indicando la ubicación de inserción en el panel.
¶ Personalizar el elemento tipo Imagen Vectorial
Cada elemento en el módulo de paneles es personalizable mediante una ventana emergente que aparece automáticamente una vez el usuario suelta el elemento en el panel.
En el caso del elemento Imagen Vectorial, la ventana emergente permite ajustar diversos parámetros para adaptar la visualización del modelo a necesidades específicas.
En la pestaña Ajustes del elemento Imagen Vectorial, el usuario puede configurar los siguientes parámetros:
- Título: Define el título que aparecerá encabezando el elemento de imagen vectorial.
- Archivo SVG: Permite al usuario elegir el archivo SVG que utilizará el elemento.
- Nombre: Asigna un nombre al elemento para facilitar su identificación.
- Color de fondo: Permite seleccionar el color de fondo del elemento.
- Color de texto: Define el color del texto que se mostrará en el elemento.
- Opción de transparencia: Permite especificar si el elemento será transparente o no.
- Opción de sombra: Permite determinar si el elemento tendrá sombra o no.
- Opción de bloqueo: Permite configurar si el elemento estará bloqueado o no, impidiendo su edición o movimiento accidental.
En la pestaña Acciones del elemento Imagen Vectorial, el usuario tiene 2 apartados
-
Grupos del SVG: Al cargar un archivo SVG en el panel, se despliega un listado desglosado de todos sus elementos. Este listado cuenta con un buscador para localizar fácilmente los elementos específicos dentro del SVG. Cuando el usuario selecciona un elemento, este se marca en la vista previa y, si tiene una acción asociada, aparecerá en el listado de acciones justo debajo.
-
Listado de acciones por elemento: En esta sección, se muestran todas las acciones asociadas con los elementos seleccionados del SVG. Desde aquí, el usuario puede modificar o agregar nuevas acciones. Si el usuario opta por gestionar una acción, se abre una ventana emergente con los siguientes parámetros configurables:
- Tipo de acción: El usuario selecciona el tipo de acción a aplicar entre las opciones: parpadeo, asignar valor de atributo, valor de tag, valor de tag a atributo, o redirigir a otro panel.
- Atributo del grupo SVG: Permite elegir los distintos atributos que están asociados con el grupo SVG.
- Variable: Asocia una variable del sistema a la acción seleccionada.
- Condición: El usuario puede definir una condición bajo la cual la acción se activa. Las opciones de condición incluyen: "tag igual que", "tag distinta que", "tag mayor que", "tag menor que", "tema claro activo" o "tema oscuro activo".
- Valor de la condición: Define el valor de referencia para activar la condición.
- Valor por defecto de la condición: Establece el valor predeterminado en caso de que no se cumpla la condición.
- Valor cuando se cumple la condición: Define el valor que adopta el atributo o acción al cumplirse la condición.
- Formato: Permite configurar el formato de visualización, seleccionando entre numérico, digital, fecha/hora o contador de tiempo. El usuario también puede ajustar el número de decimales y decidir si se muestran o no las unidades.
Estas configuraciones aseguran que el usuario pueda adaptar cada elemento del SVG a necesidades específicas de monitoreo y respuesta en tiempo real dentro de Dragsa.
En la pestaña Visibilidad, el usuario encuentra opciones para ajustar la visibilidad del elemento en función del valor de una variable y una condición específica.
Esta funcionalidad es muy útil para reemplazar un elemento por otro en pantalla o para ocultar el elemento de imagen cuando se cumple una condición determinada.
Para obtener más información sobre la opción Visibilidad, haz clic en el siguiente enlace:
El widget cuenta con un sistema de selección de idioma, el usuario encuentra opciones para ajustar el idioma del elemento en función de la necesidad de trabajar en un idioma u otro.
Esta funcionalidad es muy útil para adaptarse a entornos multilingües, facilitando el acceso a los datos y la interacción con el sistema en el idioma que mas convenga al usuario.
Para obtener más información sobre el selector de Idioma, haz clic en el siguiente enlace:
¶ Previsualización en tiempo real
Durante la creación o edición del elemento imagen vectorial, el usuario puede visualizar una previsualización de cómo se renderizará el elemento en pantalla.
A medida que el usuario ajusta el formato durante la edición, tiene a su disposición una sección de Vista Previa que muestra los cambios en tiempo real.
Esta vista previa proporciona una representación precisa de cómo se verá el elemento cuando el panel esté en Modo runtime .