¶ Gestionar apariencias
El módulo de Apariencias permite crear, organizar y personalizar estilos visuales dentro de la plataforma. Desde esta pantalla, el usuario puede gestionar diferentes conjuntos de apariencia para adaptarlos a distintos entornos de trabajo o identidades corporativas.
La vista principal muestra el listado de apariencias existentes en la parte izquierda y una zona de previsualización en el área derecha, donde se visualizará cada apariencia seleccionada. Esta estructura facilita la gestión de todas las apariencias disponibles en el sistema.
¶ ¿Cómo añadir una apariencia?
Para crear una nueva apariencia, el usuario debe pulsar el botón
Añadir apariencia, situado en la parte inferior izquierda del listado de apariencias.
Al hacerlo, se abrirá una ventana emergente donde se debe introducir el nombre de la nueva apariencia. Esta acción es necesaria para registrarla dentro del sistema antes de poder editar sus colores o propiedades visuales.
Una vez introducido el nombre, el usuario puede:
- Aceptar: crea la apariencia y la añade al listado.
- Cancelar: cierra la ventana sin realizar cambios.
¶ Opciones generales
En la parte superior de la apariencia seleccionada se encuentran las opciones generales, desde donde se define el nombre de la apariencia y su favicon. Estos parámetros permiten identificar visualmente la apariencia dentro del sistema e incorporar un icono personalizado.
- Nombre: Campo donde se establece el nombre identificativo de la apariencia. Este nombre se muestra en el listado lateral.
- Favicon: Imagen que se utilizará como icono representativo de la apariencia. El archivo debe estar en formato .ico para aplicarse correctamente. Es importante asegurarse de que el nombre y la extensión son exactos antes de subirlo
¶ Editor de apariencias
Debajo de las opciones generales se encuentra el editor de apariencias, un panel completo que permite personalizar los colores y elementos visuales que componen la apariencia.
En la parte superior puede seleccionarse el tema claro o tema oscuro, y justo debajo aparecen las diferentes pestañas del editor.
¶ Colores base
La pestaña Colores permite definir los colores base que conforman el estilo visual de la apariencia. Estos colores afectan a fondos, textos y elementos destacados.
- Base: Color base principal del tema, utilizado como referencia general del fondo o superficie.
- Primario: Color principal que se aplica a elementos destacados o de mayor relevancia visual.
- Secundario: Color usado como apoyo del color base, destinado a secciones o elementos complementarios.
- Acento: Color destinado a resaltar elementos interactivos o llamativos dentro del tema.
¶ Colores generales
- Texto: Color principal usado para el texto general de la interfaz.
- Color de sombra: Color aplicado a sombras y profundidades visuales de elementos.
- Hover al pasar: Color aplicado cuando el usuario pasa el cursor por encima de un elemento interactivo.
- Atenuado: Color aplicado a elementos de baja relevancia o estados atenuados.
- Texto de error: Color utilizado para indicar errores o estados críticos.
- Fondo de error: Color de fondo que refuerza la señalización de un error.
- Éxito: Color utilizado para indicar operaciones correctas o mensajes de éxito.
- Inactivo: Color aplicado a elementos deshabilitados o no interactivos.
- Deshabilitado: Color de fondo/texto que refuerza visualmente un estado no disponible.
- Resultado: Color utilizado para mostrar resultados, valores calculados o salidas destacadas.
¶ Colores de elementos
- Botón: Color principal aplicado al fondo de los botones.
- Texto del botón: Color utilizado para el texto que aparece dentro de los botones.
- Botón del modal: Color del botón que se muestra dentro de los modales.
- Texto del botón del modal: Color del texto de los botones incluidos en modales.
- Botón del dropdown: Color del botón que despliega opciones en listas desplegables.
- Texto del botón del dropdown: Color del texto mostrado en botones de listas desplegables.
- Color del botón del campo: Color aplicado al botón asociado a los campos de entrada.
- Barra lateral: Color principal aplicado al fondo de la barra lateral.
- Hover de barra lateral: Color cuando el cursor pasa sobre elementos de la barra lateral.
- Elemento activo en la barra lateral: Color que indica qué elemento está activo o seleccionado en la barra lateral.
- Campo: Color del fondo de los campos de entrada.
- Botón activo: Color del botón cuando se encuentra en estado activo.
- Hover del botón activo: Color del botón activo cuando el usuario pasa el cursor por encima.
- Fondo del submenú: Color aplicado al fondo de los submenús o menús secundarios.
- Panel: Color de fondo usado en los paneles o contenedores.
- Panel de herramientas: Color utilizado en la zona de herramientas o contenedores de utilidades.
- Texto del panel: Color aplicado al texto dentro de los paneles.
- SVG: Color por defecto utilizado para iconos o gráficos SVG.
¶ Colores de alarma
- Alarma: Color asignado a las alarmas dentro de la interfaz.
- Texto de alarma: Color del texto que acompaña a los elementos de alarma.
- Evento: Color utilizado para marcar eventos dentro de la interfaz.
- Texto de evento: Color del texto correspondiente a los eventos.
- Aviso: Color usado para avisos o notificaciones de nivel medio.
- Texto de aviso: Color del texto asociado a los avisos.
¶ Colores de estados
- Desconectado: Color utilizado para representar estados desconectados o sin comunicación.
- Conectado: Color usado para indicar que un elemento o servicio está conectado y operativo.
- Fallido: Color que representa estados de error o fallos en la operación.
- Advertencia: Color que indica situaciones de advertencia o precaución.
- Evento: Color aplicado a eventos notificados por el sistema.
¶ Colores del visor
- Color principal: Color base utilizado en la interfaz del visor.
- Fondo del contenedor de error: Color de fondo aplicado cuando el visor muestra un error.
- Fondo de barra de progreso: Color aplicado al fondo de la barra de progreso del visor.
- Mezcla de barra de progreso: Color que se mezcla con el fondo para mostrar el avance en la barra de progreso.
- Fondo del icono de la barra de herramientas: Color de fondo aplicado a los iconos del panel de herramientas del visor.
- Hover al pasar el mouse en icono de barra de herramientas: Color que aparece cuando el cursor pasa sobre un icono del visor.
- Borde de la barra de herramientas: Color aplicado al borde de la barra de herramientas.
- Botón activado: Color del botón activado en el visor.
- Fondo del botón activado: Color de fondo cuando el botón esta activado.
- Hover del botón activo: Color mostrado al pasar el cursor sobre un botón que ya está activo.
- Separador: Color de los separadores que dividen elementos dentro del visor.
- Elemento del árbol: Color base aplicado a los elementos del árbol de navegación.
- Hover del elemento del árbol: Color aplicado al pasar el cursor sobre un elemento del árbol.
- Elemento del árbol seleccionado: Color aplicado cuando un elemento del árbol está seleccionado.
- Fondo del elemento del árbol seleccionado: Color de fondo para el elemento del árbol cuando está en estado seleccionado.
- Fondo del elemento lateral: Color aplicado al fondo de los elementos de la barra lateral dentro del visor.
- Borde del doorhanger: Color del borde del contenedor flotante (doorhanger) dentro del visor.
- Hover del doorhanger: Color aplicado cuando el cursor pasa sobre el contenedor flotante del visor.
¶ Colores de LED
- LED 1: Color aplicado al indicador LED 1 dentro del sistema.
- LED 2: Color utilizado para el indicador LED 2.
- LED 3: Color asignado al indicador LED 3.
- LED 4: Color correspondiente al indicador LED 4.
- LED azul: Color destinado al indicador LED azul del sistema.
¶ Colores de gradientes de LED
- Gradiente LED 1: Color aplicado al gradiente correspondiente al indicador LED 1.
- Gradiente LED 2: Color utilizado en el gradiente del indicador LED 2.
- Gradiente LED 3: Color asignado al gradiente del indicador LED 3.
- Gradiente LED 4: Color correspondiente al gradiente del indicador LED 4.
- Gradiente LED 5: Color del gradiente aplicado al indicador LED 5.
¶ Colores del árbol de categorías
- Divisor al arrastrar: Color utilizado para la línea que aparece al arrastrar elementos dentro del árbol de categorías.
- Elemento agregado: Color que se aplica a un elemento cuando ha sido añadido recientemente al árbol.
- Elemento editado: Color que se utiliza para resaltar un elemento que está siendo editado o modificado.
¶ Colores de OEE
- OEE verde: Color utilizado para indicar un estado de eficiencia alta o correcta en los indicadores OEE.
- OEE rojo: Color aplicado para representar estados críticos o de baja eficiencia.
- OEE naranja: Color usado para estados intermedios o advertencias dentro del OEE.
- OEE negro: Color destinado a representar estados no disponibles o sin datos en el indicador.
- Fondo de reportes: Color de fondo utilizado en las áreas donde se muestran reportes relacionados con OEE.
- Texto de reportes: Color del texto utilizado en los reportes asociados al OEE.
¶ Colores de gráficas estadísticas
- Líneas de cuadrícula: Color utilizado para dibujar las líneas de cuadrícula en las gráficas estadísticas.
¶ Tipografías
- Tamaño de fuente: Selector para definir el tamaño base de la fuente utilizada en la apariencia (por ejemplo: 16px).
- Nombre: Nombre de la tipografía principal que se aplicará en la interfaz (por ejemplo: Rubik).
¶ Peso de las fuentes
Puedes subir archivos de fuentes en formatos ttf, otf, woff y woff2.
Los nombres de los archivos deben coincidir exactamente con el peso que representan.
- Regular: Archivo de fuente correspondiente al peso regular.
- Medium: Archivo de fuente asociado al peso medio.
- Bold: Archivo de fuente correspondiente al peso negrita.
¶ Elementos
- Línea del borde: Define el estilo de borde aplicado a los componentes.
- Radio de las esquinas de los inputs: Determina el nivel de redondeo aplicado a las esquinas de los campos de entrada.
- Radio de las esquinas de los modales: Ajusta el grado de redondeo de las esquinas de las ventanas modales.
- Radio de las esquinas de los botones: Establece el redondeo aplicado a los botones de la interfaz.
- Sombra: Parámetro para definir la sombra utilizada en los elementos.
¶ Iconos
La pestaña Iconos permite configurar el estilo visual de los iconos utilizados en toda la aplicación.
Desde aquí es posible modificar el aspecto de cada icono individual, sustituyéndolo por un archivo propio para personalizar completamente la interfaz.
La pantalla se organiza en bloques que representan distintos conjuntos de iconos (por ejemplo: navegación, acciones, módulos, estado muted…).
Cada icono aparece como un elemento independiente, mostrando su archivo asociado (generalmente en formato .svg), y puede reemplazarse por otro para modificar la apariencia global de Dragsa.
Si un icono se modifica desde esta sección, el cambio se reflejará automáticamente en todas las partes de la aplicación donde dicho icono es utilizado.