¶ Módulo de Paneles (Modo diseño)
Documentación actualizada 18/10/2024
El módulo de paneles ofrece un sistema de diseño innovador, accesible y fácil de usar, pensado para que cualquier usuario u operario pueda modificar y personalizar los elementos de un panel.
¶ Entrar en modo diseño
Para entrar en el modo diseño de un panel, existen dos formas:
Desde el módulo de paneles, desplegando las opciones y seleccionando Entrar en modo diseño.
Desde el menú lateral inferior, haciendo clic en Ir al modo diseño cuando el usuario ya se encuentra dentro de un panel en modo runtime.
Solo se puede entrar en el modo diseño para paneles ubicados en categorías donde se tenga permisos de escritura.
El modo Diseño exclusivamente se podrá usar desde un ordenador.
¶ Editar un panel
Al acceder al modo diseño de un panel vacío, se mostrará una rejilla donde se pueden colocar los elementos.
Los elementos y herramientas se encuentran en la parte derecha del panel, permitiendo guardar cambios y personalizar diversas opciones.
¶ Personalizar el panel y guardar cambios
El usuario tiene las siguientes opciones para personalizar y gestionar el panel en Dragsa:
-
Guardar el panel: El botón de guardado se habilita automáticamente en cuanto se realiza algún cambio en el panel, permitiendo al usuario guardar la configuración actual.
-
Mostrar u ocultar la rejilla: Esta opción permite alternar la visibilidad de la rejilla en el panel, facilitando el alineado de los elementos o dejando un espacio más limpio si se prefiere trabajar sin ella.
-
Ajustar elementos a la rejilla: Con esta función, el usuario puede decidir si los elementos se alinean automáticamente a la rejilla o si se pueden mover libremente sin restricciones.
-
Editar propiedades del panel: Abre una ventana emergente donde el usuario puede ajustar:
- Color de fondo: Con un botón para desplegar una paleta de colores y otro para eliminar cualquier color de fondo previamente seleccionado.
- Propiedades de la rejilla: Permite ajustar el tamaño de las celdas de la rejilla y la opacidad de las líneas, para una mejor visibilidad o personalización según las necesidades del usuario.
¶ Añadir y eliminar zoom
El módulo incluye herramientas para cambiar el zoom del panel, lo que permite al usuario observar los elementos con mayor detalle.
Estas opciones están en la sección Zoom del panel de herramientas.
El usuario puede ajustar el zoom con los botones de incremento y disminución, o seleccionar un nivel de zoom específico a través de un menú desplegable.
¶ Edición de elementos
El usuario puede personalizar los elementos del panel mediante las acciones agrupadas en la sección Edición del panel de herramientas.
Algunas de estas acciones incluyen:
- Rehacer o deshacer cambios: Permite revertir o recuperar cambios recientes.
- Cambiar la posición del elemento: Mueve un elemento hacia adelante o atrás en la superposición.
- Eliminar: Elimina los elementos seleccionados.
- Cortar, copiar y pegar: Permite transferir elementos dentro de un panel o entre diferentes paneles.
- Propiedades del elemento: Abre una ventana para editar las propiedades del elemento seleccionado.
Estas opciones también están disponibles en un menú contextual, accesible al hacer clic derecho sobre un elemento.
Las acciones se habilitan o deshabilitan automáticamente según los elementos seleccionados en el panel.
¶ Añadir elementos
Para agregar elementos al panel, el usuario debe arrastrar el elemento deseado desde el grupo Elementos en la sección de herramientas hacia la rejilla.
Al pasar el cursor sobre cada elemento, aparece un indicador flotante que muestra el tipo de elemento. Para añadirlo, solo es necesario arrastrarlo a la rejilla, donde se dibujará un rectángulo en la posición deseada.
Para añadir el elemento al panel se debe arrastrar el icono del elemento sobre el panel. El sistema se encargará de dibujar un rectangulo sobre las coordenadas donde el usuario situa el elemento.
Al soltar el elemento sobre el panel, se añade en la posición donde lo ha soltado y se abrirá una ventana de propiedades del elemento donde el usuario podrá rellenar los parámetros necesarios y personalizar el elemento a su gusto.
Una vez finalizada la personalización, el elemento se renderizará en pantalla. El usuario puede volver a personalizarlo haciendo doble clic sobre el elemento, haciendo clic derecho y seleccionando "Propiedades del elemento" en el menú contextual, o utilizando el icono de propiedades en la sección de Edición.
Además, el elemento puede ser reposicionado libremente en el panel, ya sea ajustándolo a la rejilla o moviéndolo sin restricciones. Para esto último, basta con desactivar la opción "Ajustar los elementos del panel a la rejilla".
¶ Ver lista de elementos
El sistema incluye una sección de listado de elementos que muestra todos los elementos registrados en el panel.
Esta lista facilita la identificación y selección de los elementos, permitiendo al usuario visualizar cada uno de ellos de manera ordenada.
Además, el usuario puede hacer doble clic en cualquier elemento de la lista para abrir su ventana de propiedades y personalizar sus parámetros según sea necesario.
¶ Propiedades de los elementos
En esta sección, el usuario puede visualizar un resumen de las propiedades básicas de uno o varios elementos seleccionados.
Esta funcionalidad permite editar directamente las propiedades sin necesidad de abrir la ventana de propiedades del elemento.
Cuando se seleccionan varios elementos a la vez,se muestran las propiedades que coinciden entre ellos. Dado que cada elemento puede tener propiedades únicas, solo aparecerán en esta vista aquellas que sean comunes entre los elementos seleccionados.
Si hay varios elementos seleccionados, cualquier cambio en las propiedades desde esta lista se aplicará a todos los elementos seleccionados.
¶ Seleccion multiple de elementos
El sistema incluye un gestor de selección múltiple que permite al usuario seleccionar varios elementos utilizando el teclado o el cursor.
Los elementos seleccionados tendrán los bordes resaltados en blanco, indicando que están seleccionados.
¶ Selección múltiple con el teclado
- Ctrl + Clic: Manteniendo pulsada la tecla Ctrl mientras se hace clic en los elementos, el usuario puede ir seleccionando uno a uno los elementos deseados.
- Shift + Clic: Al mantener pulsada la tecla Shift y hacer clic en otros elementos, se realiza una selección global desde el elemento seleccionado hasta el siguiente clic.
El orden de selección sigue el orden de creación de los elementos, aunque este puede ser modificado desde la sección "Lista de elementos" en el panel de herramientas a la derecha de la pantalla.
¶ Selección múltiple con el cursor
- Arrastrar y seleccionar: El usuario también puede seleccionar un grupo de elementos manteniendo el clic y arrastrando el cursor dentro del visor de elementos.
¶ Personalizar elementos
Todos los elementos que se renderizan en un panel tienen una serie de parámetros que deben rellenarse obligatoriamente y otros opcionales para añadir aún más personalizacion.
Explicación detallada de como construir y personalizar cada uno de los elementos de un panel
Ver másSin embargo, hay algunos parámetros genéricos que coinciden todos los elementos de un panel, estos son: Parámetros generales y Visibilidad.
¶ Parámetros generales en los elementos
En los elementos creados en el panel, se muestran una serie de parámetros que puedes personalizar y editar a tu gusto.
En la tercera pestaña, encontrarás opciones para ajustar la apariencia del elemento.
Modificar estos parámetros cambiará cómo se visualiza el elemento, desde el color del contenido y del fondo hasta la aplicación de efectos como sombras.
- Nombre: Permite cambiar el nombre de la variable del elemento, ofreciendo una descripción diferente en la lista de elementos.
- Color de fondo: Puedes seleccionar un color utilizando su nombre en inglés, código RGB o código hexadecimal. También puedes hacer clic en el icono de la paleta para abrir una ventana emergente con una gama más amplia de opciones de color.
- Color de texto: Establece un color personalizado para el texto de la caja. Este cambio se aplicará tanto al encabezado como al cuerpo del contenido.
- Transparente: Decide si el elemento de texto debe incluir una caja de fondo o si debe renderizarse como un elemento libre (sin caja).
- Sombra: Puedes optar por añadir una sombra a la caja del elemento de texto si lo deseas.
- Bloqueado: Al seleccionar esta opción, el elemento de texto no podrá desplazarse ni editarse directamente desde el panel al hacer doble clic.
Para desbloquear el elemento, simplemente accede a la lista de elementos y haz doble clic en el elemento que deseas desbloquear.
Tanto el color de fondo como el color del texto ofrecen la opción de abrir una ventana con una paleta de colores predefinida y dos selectores para elegir entre una gama más amplia.
Los colores predefinidos mostrados en la ventana se pueden guardar en el apartado Colores favoritos clicando en un color y pulsando en el icono
Además, la paleta de colores ofrece otra forma de seleccionar colores: Modo canvas.
Al pulsar en el icono del cuentagotas la paleta de colores cambiará a un nuevo formato aportando una mayor flexibilidad al usuario a la hora de seleccionar un color.
¶ Visibilidad
El sistema ofrece una funcionalidad global para todos los elementos de un panel denominada Visibilidad. Esta característica permite que un elemento cambie su estado de visibilidad (mostrarse u ocultarse) en función de una condición específica.
La visibilidad de un elemento depende de una combinación de tipo de condición y el valor de una variable seleccionada.
Si el operario personaliza la visibilidad de un elemento, este permanecerá oculto hasta que se cumpla la condición especificada. Una vez que el sistema detecte que la variable seleccionada cumple la condición, el elemento se mostrará. De lo contrario, volverá a ocultarse.
Al configurar esta función, se presenta una lista de variables disponibles para seleccionar, seguida de la especificación de una condición.
Para saber más sobre las variables en Dragsa puede visitar la sección de Variables o Editor de variables
La condición a seleccionar puede ser una de las siguientes:
- Variable igual que (x): El elemento se muestra si la variable es igual a x.
- Variable diferente que (x): El elemento se muestra si la variable es diferente a x.
- Variable mayor que (x): El elemento se muestra si la variable es mayor que x.
- Variable menor que (x): El elemento se muestra si la variable es menor que x.
- Tema claro: El elemento se muestra cuando el sistema está en modo claro.
- Tema oscuro: El elemento se muestra cuando el sistema está en modo oscuro.
El valor de la variable debe ser ingresado manualmente utilizando el teclado, y este valor será el que determine si la condición se cumple, activando o desactivando la visibilidad del elemento según corresponda.