Guía de Usuario

🚀 Abrir el Dashboard

Tienes múltiples formas de acceder a Dashly según tus necesidades:

Desde el Menú de Unity

Accede a Dashly desde el menú principal o usando el atajo de teclado:

Tools > Latin Tools > ☰ Dashly Dashboard

💡 Atajo rápido: Pulsa Ctrl/Cmd + M (por defecto) para abrir el Dashboard.

Componente Dashboard Opener

Puedes abrir categorías directamente desde una escena en el Inspector:

1. Agrega el componente Dashboard Opener a cualquier GameObject.

2. Arrastra una DashlyCategory al campo o búscala directamente.

3. Haz clic en Open Dashboard para abrir instantáneamente la categoría seleccionada (puedes forzar abrirlo en una nueva ventana).

---

👤 Sistema de Perfiles

Dashly soporta múltiples Perfiles, ayudando a segmentar los datos de juego según el departamento (ej. Diseño, Arte, Audio) u otros contextos.

1. Al abrir Dashly, accede al Selector de Perfiles pulsando el botón de perfil o de configuración (⚙️) y la opción Change Profile.

   

2. Haz clic en Create New Profile o edita uno existente.

3. Puedes asignar un Nombre, Icono Emoji, Color Principal y asignarle las categorías correspondientes.

   

4. Escoge rápidamente entre los perfiles en el dashboard principal.

---

📁 Crear categorías

Método 1: Setup Screen

1. Haz click en el icono de Settings (⚙️) en el header.

2. Haz click en ➕ Add Category.

   

3. La categoria se agrega automaticamente a tu configuracion.

Método 2: Manual

1. En Project: Right-click > Create > Latin Tools > Dashly > Category.

2. Abre el asset DashlyConfiguration.

3. Agrega tu categoria en la lista Categories.

4. Guarda la configuracion.

Configurar categorías

Cada categoria admite:

Propiedad	Descripción
Name	Nombre mostrado en sidebar
Icon	Emoji para identificacion visual (📦, ⚙️, 👥, 🎮, etc.)
Description	Contexto adicional opcional
Sections	Estructura de contenido dentro de la categoria

Emojis sugeridos

• 📦 Inventario/Items
• ⚙️ Settings/Configuracion
• 👥 Personajes/NPCs
• 🎮 Mecánicas de juego
• 🎨 Arte/Visual
• 🔊 Audio/Sonido
• 🗺️ Niveles/Mapas
• 📊 Analitica/Data

---

🗂️ Gestionar secciones

Las secciones te ayudan a organizar ScriptableObjects dentro de cada categoria.

Agregar una sección

1. Selecciona una categoria en el Inspector.
2. Ve al bloque Content Sections.
3. Haz click en ➕ Add Section.
4. Asigna nombre a la seccion.
5. La nueva seccion aparece colapsada por defecto.

Editar una sección

Haz click en la flecha ▶ para expandir y:

• Renombrar la seccion.
• Agregar o quitar ScriptableObjects.
• Reordenar elementos.

Reordenar secciones

Usa el handle ⋮⋮ en el lateral izquierdo para reordenar con drag & drop.

Eliminar secciones

✕ Remove

Pulsa ✕ Remove en el header de la sección y confirma la eliminación.

---

➕ Agregar Contenido

Dashly te permite añadir dos tipos grandes de contenido en tus secciones: ScriptableObjects y Custom Content (contenido creado mediante código).

---

Agregar ScriptableObjects

Tienes tres formas de agregar tus datos de ScriptableObject:

1) Drag & Drop (recomendado)

1. Expande una seccion en el editor de categoria.

2. Arrastra ScriptableObject(s) desde la ventana Project.

3. Sueltalos en el Drop Area.

   

4. Puedes agregar multiples objetos en una sola accion.

2) Seleccion manual

1. Expande una seccion.

2. Haz click en + Add ScriptableObject.

3. Usa el object picker para seleccionar el asset.

4. Repite para agregar mas objetos.

Gestion por objeto

Para cada ScriptableObject agregado, puedes:

• 📍 Focus: resaltar el asset en la ventana Project.

• 🗑️ Remove: quitarlo de la seccion (sin borrar el asset).

• View Details: inspeccionar propiedades inline.

---

Agregar Custom Content (Avanzado)

Puedes integrar interfaces generadas por código directo a tus secciones Dashly (útil para herramientas custom).

1. Crea una clase C# que herede de DashlyContentData.

2. Agrégale el atributo [DashlyContent("Nombre", "Icono")] encima de la clase.

3. Define los métodos base, devolviendo el MethodInfo para renderizar el contenido.

4. Ve al Inspector de la Categoría y, en tu sección en Dashly, presiona + Add Custom Content.

5. Cualquier clase etiquetada con de esta forma será detectada automáticamente.

Ejemplo de Custom Content

A continuación te mostramos un bloque de código completo como base para crear una vista personalizada:

using UnityEngine;
using UnityEngine.UIElements;
using LatinTools.Dashly;
using System.Reflection;

// 1. Agrega el atributo para que Dashly lo reconozca
[DashlyContent("Herramienta de Prueba", "🔧", Description = "Mi panel personalizado.")]
public class MyTestCustomContent : DashlyContentData
{
    // 2. Sobrescribe la metadata de cómo se verá el componente en su cabecera
    public override Data GetData()
    {
        return new Data
        {
            Title = "Herramienta de Prueba",
            Icon = "🔧",
            Description = "Ajusta las variables maestras de esta sección.",
            // IMPORTANTE: Envía la referencia del método que dibujará la UI
            DrawContentFunc = GetMethodInfoOf(nameof(DrawContent)),
            AccentColor = new Color(0.15f, 0.65f, 0.9f)
        };
    }

    // 3. Define el contenido visual usando UI Toolkit
    public static void DrawContent(DashlyContentContext context)
    {
        var label = new Label("¡Hola mundo desde código!");
        label.style.fontSize = 16;
        label.style.color = new StyleColor(Color.white);
        label.style.marginBottom = 10;

        var notifyButton = new Button(() =>
        {
            Debug.Log("Lanzando acción desde herramienta!");
        })
        { text = "Oprimir Botón" };

        // Añade todo a la raíz asignada para tu sección
        context.RootElement.Add(label);
        context.RootElement.Add(notifyButton);
    }
}

---

🎨 Personalizar apariencia

Dashly permite personalizacion completa mediante el sistema de preferencias.

Theme y Layout settings

Grupo	Opciones
Color Theme	Primary Color, Secondary Color
Layout Settings	Sidebar Width (180-300px), Header Height (40-60px), Content Margin (8-32px)
System Settings	Configuración de elementos recientes máximos (Max Recent Items), y Auto-load Profile.
Home Banner	Elige o cambia el logo mostrado en la pantalla de bienvenida.

---

⚡ Funciones avanzadas

Pantalla de Inicio y Recientes (Home Screen)

Al iniciar, o sin tabs abiertos, encontrarás una pantalla rápida:

• Ofrece acceso rápido a Documentación y Soporte.
• Las Recent Categories (mantenidas por sesión) te permitirán volver al instante al trabajo.
• Puedes modificar el número límite de entidades mostradas en Preferencias.
• Es accesible al hacer clic en el título de DASHLY en el sidebar (incluso cuando lo estás visualizando minimizado).

Sistema de Notificaciones

Cualquier acción de guardado, carga de sección exitosa, error, u otras interacciones lanzará una notificación visual auto-descriptiva (verde, ámbar, rojo) temporal en el costado superior.

Usar notificaciones en Custom Content

Como parte de tu lógica personalizada (con el DashlyContentContext que recibes de parámetro en los métodos), tienes total acceso al sistema de notificaciones del Editor. Observa cómo integrar reportes de estado usando context.ShowNotification:

    public static void DrawContent(DashlyContentContext context)
    {
        var saveButton = new Button(() =>
        {
            // Ejecutar lógica...
            bool operationSuccess = true;

            if (operationSuccess) {
                // Notificación de Éxito (Mensaje, Tipo, Duración ms)
                context.ShowNotification("¡Datos guardados correctamente!", NotificationType.Success, 3000f);
            } else {
                // Notificación de Error
                context.ShowNotification("Error al procesar los datos.", NotificationType.Error, 3000f);
            }
        })
        { text = "Guardar y Notificar" };

        var warnButton = new Button(() =>
        {
            // Notificación de Advertencia
            context.ShowNotification("No te olvides de reiniciar la escena.", NotificationType.Warning, 4500f);
        })
        { text = "Aviso" };

        context.RootElement.Add(saveButton);
        context.RootElement.Add(warnButton);
    }

Multi-tab support

Trabaja con varias categorias en paralelo:

• Open in New Tab: click derecho sobre categoria.

• Switch Tabs: click en headers o usa Ctrl/Cmd + Tab y Ctrl/Cmd + Shift + Tab.
• Close Tab: boton ✕ o usa Ctrl/Cmd + W.
• Duplicate y otros: Haz uso del menú contextual superior sobre tu Tab para duplicar ventanas y cerrar los restantes de golpe.

Search functionality

1. Pulsa 🔍 Search en el header del sidebar.

2. Escribe tu termino.

3. Coincidencias en categorias/secciones se resaltan.

   

4. Elementos no coincidentes se ocultan.

5. Pulsa de nuevo 🔍 o limpia el campo para restaurar la vista.

Search highlights:

• Fondo amarillo indica coincidencias.
• Section navigators se expanden automaticamente cuando hay match.

Section Navigator

Cuando una categoria tiene varias secciones:

1. Se muestra el Section Navigator debajo de la categoria activa.

2. Haz click en el nombre de una seccion para saltar directamente.

   

3. El contenido se desplaza de forma fluida.

---

⌨️ Atajos de teclado

Atajo	Acción
Ctrl/Cmd + M	Abrir ventana Dashly Dashboard
Ctrl/Cmd + Tab	Cambiar a siguiente Tab abierto
Ctrl/Cmd + Shift + Tab	Cambiar a Tab anterior
Tab	Ocultar/Mostrar (Alternar) el estado del Sidebar
Click Central / Ctrl + Click	(En Categoría) Abrir categoría en nueva Tab

---

Recomendación final

Mantén categorías pequeñas y con nombres claros; esto mejora búsqueda, navegación y mantenimiento del dashboard a largo plazo.