> For the complete documentation index, see [llms.txt](https://docs.kiloiot.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kiloiot.io/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets.md).
# Añadir widgets
Añade y configura widgets del panel de Kilo para datos en vivo, gráficos, controles, mapas, imágenes, texto y páginas incrustadas.
Los widgets son los componentes visuales de un panel. Los widgets de datos se conectan a dispositivos y convierten las lecturas en valores actuales, historial, mapas o estado. Los widgets de control envían comandos configurados. Los widgets de texto y iFrame añaden contexto sin conexión a un dispositivo. Una lectura de temperatura de 22 °C es normal en una oficina, pero una infracción de cumplimiento en almacenamiento en frío — los rangos, umbrales y condiciones permiten a los operadores ver ese contexto de un vistazo en lugar de interpretar ellos mismos el número bruto.
## Entrando en modo de edición
Los widgets solo se pueden agregar o modificar cuando el panel está en **modo de edición**.
1. Abra un panel desde la barra lateral.
2. Haga clic en el **menú de acciones** (tres puntos) en el encabezado y seleccione **Editar panel**.
En modo de edición, el encabezado cambia:
* El **Datos en vivo** indicador se reemplaza por un pequeño **icono de lápiz** para editar los metadatos del panel.
* Un **botón de más** aparece — esto abre el selector de widgets.
* **Cancelar** y **Guardar** los botones aparecen a la derecha.
Cualquier cambio que realice en modo de edición solo se guarda cuando hace clic en **Guardar**. **Cancelar** descarta todos los cambios y vuelve al modo de vista.
## El selector de widgets
Haga clic en el **botón de más** en el encabezado del modo de edición (o el **Agregar widget** botón en el estado vacío) para abrir el selector de widgets.
El selector muestra los tipos de widgets disponibles.
| Widget | Úselo cuando | Lo que muestra |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| **Últimos datos** | Los operadores necesitan el estado actual de una máquina, proceso o activo | Último valor recibido — en funcionamiento/detenido, nivel de llenado, temperatura actual |
| **Gráfico** | Necesita entender cómo cambió una lectura — historial de cumplimiento, deriva o comparación entre turnos | Gráfico histórico más la lectura actual en vivo |
| **Texto** | Un panel necesita encabezados, notas operativas o instrucciones | Texto con formato que no está conectado a un dispositivo |
| **Imagen** | El contexto de la ubicación importa — qué zona, piso o componente | Su propia imagen cargada — plano de planta, diagrama de máquina o distribución del sitio — con lecturas numéricas en vivo fijadas a ubicaciones |
| **Mapa** | La ubicación en vivo de algo que se mueve importa | Posición GPS actual en un mapa exterior interactivo, más un valor de sensor seleccionado en el marcador |
| **Control** | Un operador necesita enviar un comando configurado al equipo | Un interruptor, botón, entrada o deslizador conectado a un dispositivo controlable |
| **iFrame** | El contexto externo pertenece en la misma pantalla — un informe de BI, un mapa meteorológico, tráfico en vivo | Una página web externa en vivo de un servicio compatible, incrustada en el mosaico junto a los datos de su dispositivo |
| **Gemelo digital del edificio** | Quiere un modelo 3D de un edificio con sensores asignados a los objetos que supervisan | Un editor 3D integrado que convierte una instalación en una escena en vivo, recoloreada por las lecturas de los sensores |
## Elegir un tipo de widget
**Últimos datos** es su opción predeterminada para mostrar el estado operativo actual. Úselo cuando necesite mostrar el último valor de uno o más dispositivos en un solo panel — un número simple para una lectura rápida, un indicador de Anillo o Pastel cuando el valor tiene una escala significativa (llenado de un tanque, nivel de batería, porcentaje dentro de un rango). Se pueden combinar varios dispositivos en un solo widget.
**Gráfico** sirve para ver tendencias. Muestra una lectura actual grande en la parte superior y el gráfico histórico debajo — así ve dónde está la lectura ahora y cómo llegó allí. Elija un [Gráfico de líneas](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/chart-widget/line-chart.md) para una tendencia continua o un [Gráfico de barras](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/chart-widget/bar-chart.md) para comparar informes individuales. Una fuente de datos y una métrica por widget de gráfico.
**Texto** añade encabezados, instrucciones y notas operativas. Es un widget de contenido independiente y no pertenece a la familia de widgets de Control.
**Imagen** pone los datos en contexto físico. Cargue un plano de planta, un diagrama del sitio o un esquema del equipo, y luego fije las lecturas en vivo de los sensores en sus ubicaciones exactas. Úselo cuando la ubicación importa — monitoreo de zonas de almacén, estado del HVAC del edificio por piso, temperaturas de racks en la sala de servidores.
**Mapa** muestra dónde está ahora mismo un dispositivo equipado con GPS en un mapa exterior interactivo, con una métrica adicional en el marcador. Vehículos, equipos de campo, herramientas móviles, envíos, ganado — cualquier cosa que se mueva y reporte su ubicación puede mostrarse allí. Los controles de rango de fechas le permiten revisar el historial de rutas sin salir del panel.
**Control** envía un comando configurado al dispositivo a través de un interruptor, botón, entrada o deslizador. Es el único widget del nivel del selector cuyo propósito es controlar equipos; Gráfico, Texto, Imagen y Mapa son tipos de widget separados.
**Gemelo digital del edificio** es un modelo 3D de una instalación, creado y editado directamente en el panel. Dibuje el edificio, coloque objetos de un catálogo y vincule cada uno a un sensor — el modelo luego cambia de color en tiempo real, de modo que un operador lee el estado de la instalación espacialmente en lugar de hacerlo desde una lista. Consulte [Gemelo digital del edificio](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/digital-building-twin.md).
## Agregar un widget
Para cada tipo de widget, el flujo de configuración sigue el mismo patrón:
1. Haga clic en el **botón de más** o **Agregar widget** botón para abrir el selector.
2. Seleccione un tipo de widget.
3. Se abre el panel de configuración del widget seleccionado.
4. Para un widget basado en datos, elija su dispositivo y métrica en **Fuente de datos**, luego configure su presentación en **Apariencia**. Los widgets independientes, como Texto e iFrame, abren en su lugar sus propias opciones de contenido.
5. Haga clic en **Guardar** en el panel para agregar el widget.
Un **botón de cerrar** (icono X) en la esquina superior derecha cierra el panel sin guardar. El **Siguiente** botón navega de Fuente de datos a Apariencia. Los ajustes no se aplican hasta que haga clic en **Guardar** en el panel y luego **Guardar** en el encabezado del panel.
Para ver los detalles completos de configuración, consulte las páginas específicas de cada widget enlazadas abajo.
## Editar un widget existente
Para modificar un widget que ya está en el panel:
1. Entre en modo de edición.
2. Pase el cursor sobre el widget. Un **menú de tres puntos** aparece en la esquina superior derecha.
3. Haga clic en el menú:
* **Editar** — Abre el panel de configuración del widget con los valores actuales ya rellenados.
* **Duplicar** — Crea una copia del widget, con toda su configuración, en el mismo panel. Un aviso confirma **"Widget duplicado correctamente"**; si no se puede crear la copia, verá **"No se pudo duplicar el widget"**.
* **Mover al panel** — Mueve el widget a otro panel. Si no se puede completar el movimiento, verá **"No se pudo mover el widget"**.
* **Eliminar** — Marca el widget para eliminarlo. La eliminación solo se aplica cuando hace clic en **Guardar** en el encabezado del panel. Hacer clic en **Cancelar** restaura el widget.
El menú de tres puntos solo aparece en modo de edición.
**Duplicar** ahorra tiempo real en implementaciones repetitivas. Configure un widget exactamente como lo desea — rangos de valores, umbrales, tipo de visualización, condiciones — luego duplíquelo una vez por cada sensor idéntico y cambie solo el dispositivo en la pestaña Fuente de datos. Cincuenta unidades de almacenamiento en frío con la misma banda de cumplimiento son cincuenta copias de un widget, no cincuenta configuraciones creadas desde cero.
**Mover al panel** es para cuando una vista supera su hogar original — una métrica que agregó a un panel general del sitio resulta pertenecer al panel de cumplimiento, o un widget se creó por completo en el panel equivocado. Muévalo en lugar de reconstruirlo.
## El estado vacío del panel
Si un panel no tiene widgets, el centro de la pantalla muestra:
* **"No tiene widgets aquí"**
* **"Agregue su primer widget para construir su panel"**
* Un **Agregar widget** botón
## Personalización de un vistazo
Los widgets son configurables, no tarjetas fijas. Opciones clave disponibles en todos los tipos de widgets:
* **Tipos de visualización de Últimos datos** — Valor, Anillo, Pastel, Tubo, Medidor y Medidor radial
* **Tipos de gráfico** — Línea y Barras, con periodos de tiempo, ejes, umbrales y leyendas específicos del gráfico
* **Tipos de control** — Interruptor, Botón, Entrada y Deslizador; luego el Deslizador ofrece estilos Simple, Circular y Vertical
* **Rangos de valores** — Límites mínimo/máximo que establecen la escala del medidor o los límites del eje Y del gráfico
* **Umbrales** — Bandas con nombre (p. ej., "Conforme", "Advertencia", "Incumplimiento") con colores, rellenos y líneas — widget de gráfico
* **Condiciones** — Reglas de color por métrica basadas en el valor actual del sensor — widgets de Últimos datos e Imagen
* **Controles a nivel de métrica** — Tipo de datos, selector de métrica del dispositivo, icono y condiciones por sensor
## Guías de configuración de widgets
* [Widget de Últimos datos](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/last-data-widget.md) — Valores más recientes, tipos de medidor, rangos de valores y condiciones
* [Widget de gráfico](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/chart-widget.md) — Gráficos de series temporales con lectura actual en vivo y bandas de umbral
* [Widget de texto](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/text-widget.md) — Encabezados, instrucciones y notas sin una fuente de dispositivo
* [Widget de imagen](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/image-widget.md) — Cualquier imagen — un plano de planta, un esquema del equipo, una foto del sitio — con pines de datos en vivo arrastrables
* [Widget de mapa](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/map-widget.md) — Ubicación de un rastreador GPS con controles de historial de rutas
* [Widget de control](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/control-widget.md) — Interruptores, botones, entradas y deslizadores que envían comandos al dispositivo
* [Widget iFrame](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/iframe-widget.md) — Incruste una página web externa de un servicio compatible junto a los datos de su dispositivo
* [Condiciones](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/conditions.md) — Reglas de color por métrica para los widgets de Últimos datos e Imagen
## Páginas relacionadas
* [Creación de paneles](/kilo-docs-es/kilo-iot-server/dashboards/creating-dashboards.md) — Cree el panel antes de agregar widgets.
* [Organización de paneles](/kilo-docs-es/kilo-iot-server/dashboards/organizing-dashboards.md) — Administre carpetas y el orden de los paneles.
* [Datos en tiempo real](/kilo-docs-es/kilo-iot-server/dashboards/real-time-data.md) — Cómo llegan los datos en vivo de los sensores a sus widgets.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.kiloiot.io/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
