> 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/image-widget.md).
# Widget de imagen
Fija lecturas de sensores en vivo sobre cualquier imagen — plano de planta, foto del sitio, esquema del equipo — con el widget de imagen.
El Widget de imagen convierte una foto en un panel en vivo. Carga una imagen — y puede ser **cualquier imagen**: un plano de planta, un esquema de equipo, un diagrama del sitio, una foto de un edificio, una foto de una pieza de equipo como los silos de arriba — luego fija sobre ella lecturas numéricas en vivo, cada una situada exactamente donde está su sensor.
Esa es toda la idea: dejas de leer una lista de nombres de dispositivos y, en cambio, miras el lugar o la máquina reales y ves qué está haciendo cada parte en este momento. Un gerente de planta mira la foto de los silos y ve qué tanque tiene el nivel bajo; un ingeniero de mantenimiento mira un esquema del equipo y ve qué componente está fuera de tolerancia.
Carga un archivo de imagen compatible — un PNG o JPG — de cualquier lugar, objeto o sistema que quieras supervisar. Cada lectura fijada muestra su valor actual, su unidad y un icono, y su color cambia a medida que se activan las condiciones, para que el estado sea visible de un vistazo en toda la imagen.
## Configurar un Widget de imagen
Aquí tienes una configuración completa para un caso real — supervisar una hilera de silos de grano a partir de una sola foto del sitio. Un sensor de nivel en cada silo informa su llenado como porcentaje. Este es solo un ejemplo: la imagen puede ser cualquier cosa, y los pasos son los mismos.
1. Abre el panel en modo de edición y haz clic en **Widget de imagen** en el selector de widgets. Se abre el panel de ajustes — y, a diferencia de los otros widgets, la **Apariencia** pestaña se abre primero, porque primero cargas la imagen antes de poder colocar nada sobre ella.
2. Escribe un nombre para el widget — por ejemplo "Niveles de los silos".
3. El widget comienza con una capa, **Capa 1**, ya creada. Dale un **Nombre de la capa** claro ("Patio de silos") y carga la imagen — una foto de los silos. Se aceptan archivos PNG y JPG.
4. Haz clic en **Después** para pasar a la **Fuente de datos** .
5. Debajo de la capa, haz clic en **Añadir fuente de datos** — esto crea un bloque de fuente de datos vacío. En el bloque, haz clic en **Elegir dispositivo** y selecciona el sensor de nivel del primer silo.
6. Haz clic en **Añadir métrica**. Define **Tipo de dato** en **Telemetría**, elige la lectura del nivel de llenado bajo **Métrica del dispositivo**, y selecciona un **Icono**.
> **¿No encuentras tu métrica?** El Widget de imagen solo fija métricas numéricas. Si falta una lectura que esperas, la métrica está almacenada como String o Boolean en lugar de Integer o Float. Abre **Dispositivos → Métricas**, encuentra la métrica y cambia cómo se almacena a Integer o Float — siempre que el dispositivo realmente informe un número. Consulta [Métricas](/kilo-docs-es/kilo-iot-server/devices/metric-templates.md).
7. Haz clic en **Condiciones: N** para abrir el modal de Condiciones. Establece un **Color predeterminado**, luego para cada banda haz clic en **Añadir condición** y completa la fila — una **Nombre de la condición**, **Tipo de dato** configurada con **Número**, el **Desde** y **Hasta** valores, y una **Color**.
* "Crítico" — **Desde** 0, **Hasta** 10 — granate (un rojo intenso)
* "Rellenar ahora" — **Desde** 10, **Hasta** 30 — rojo
* "Rellenar pronto" — **Desde** 30, **Hasta** 60 — amarillo
* "Saludable" — **Desde** 60, **Hasta** 100 — verde
Haz clic en **Guardar** para cerrar la ventana modal. El pin ahora muestra verde mientras el silo está bien abastecido y va pasando por amarillo y rojo hacia una franja granate a medida que se vacía — así que con una sola mirada a la foto el operador sabe qué tanque hay que llenar.
8. El pin correspondiente a ese sensor aparece en la imagen. **Arrástralo** sobre el silo al que pertenece. Usa los controles de zoom (+ / −) en la vista previa para colocarlo con precisión.
9. Repite — **Añadir fuente de datos** para el sensor de cada uno de los silos restantes, añade su métrica y sus condiciones, y arrastra su pin hasta el tanque correcto. Una capa puede contener varias fuentes de datos, y una fuente de datos varias métricas.
10. Haz clic en **Guardar** para añadir el widget al panel.
El resultado: la foto del sitio con un pin de color en cada silo, cada uno mostrando su porcentaje de llenado en vivo — todo el patio de almacenamiento legible de un vistazo. Los mismos pasos sirven para cualquier imagen; solo cambian la foto, los dispositivos y las bandas de condiciones.
## Qué son las capas
A **capa** es una vista de imagen dentro del mismo Widget de imagen — no una superposición transparente sobre una sola foto. Cada capa tiene su propia imagen cargada y sus propios pines. Cuando el widget tiene más de una capa, aparece un **selector de capas** en él; el visor hace clic en él para moverse entre las vistas, de modo que varias imágenes y conjuntos de sensores conviven en un solo widget.
Las capas resultan especialmente útiles cuando una sola imagen no puede mostrarlo todo. Tomemos los silos — un solo silo puede tener mucho más que un sensor:
* **Capa 1 — "Patio de silos".** La foto exterior de todos los silos, con un pin de nivel de llenado en cada uno. Esta vista responde *qué silo necesita atención*.
* **Capa 2 — "Interior del silo 1".** Cuando un silo lleva una hilera de sensores — por ejemplo, un cable de temperatura multipunto que desciende por su interior — carga una imagen abierta, en corte, de ese silo y fija en ella cada sensor interno. Esta vista responde *qué está pasando dentro de ese silo*.
En el panel, el operador hace clic en el selector de capas para pasar del resumen del patio directamente al detalle interior, sin salir del widget ni abrir una lista de dispositivos. Las capas siguientes siguen el mismo patrón — una foto de la zona de la cinta transportadora y la bomba, un diagrama del panel de control — cada una con su propia imagen y sus propios pines.
Las capas encajan igual de bien en un edificio de varias plantas. Dale a cada planta su propia capa — la planta baja en la Capa 1, las plantas superiores en las suyas — y fija la temperatura, la humedad o la ocupación en los puntos de HVAC de cada una. El equipo de instalaciones usa el selector de capas para recorrer el edificio planta por planta desde un solo widget, con cada planta ajustada a su propia especificación.
Aquí, un plano de planta es simplemente una imagen plana: los planos arquitectónicos que ya están archivados solo se cargan, uno por planta — no hace falta dibujar ni modelar nada. Son dos herramientas distintas: el Widget de imagen fija lecturas en vivo sobre planos 2D planos que ya tienes, mientras que la [Gemelo Digital del Edificio](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/digital-building-twin.md) sirve para dibujar y operar desde cero un modelo 3D completo de la instalación.
**¿Capas o widgets separados?** Usa capas cuando las imágenes sean distintas vistas del mismo lugar o sistema. Usa Widgets de imagen separados cuando las imágenes pertenezcan a distintas partes del panel o cubran sistemas no relacionados.
Para trabajar con capas: **Capa 1** ya está ahí — cámbiale el nombre y carga su imagen. Haz clic en **Añadir nueva capa** solo cuando quieras otra vista de imagen en el mismo widget. **Cada capa necesita su propia imagen** — si añades una capa y la dejas vacía, **Después** no continuará. En la **Fuente de datos** pestaña, añade cada fuente de datos y métrica bajo la capa a la que pertenece, y arrastra cada pin sobre la imagen propia de esa capa.
## Ejemplos prácticos
**Patio de silos de grano — niveles de llenado de un vistazo** Una foto del sitio de silos con un pin de nivel de llenado en cada tanque; condiciones verdes por encima del 60 %, amarillas del 30 al 60 %, rojas del 10 al 30 %, granates por debajo del 10 %. Una segunda capa contiene un corte del silo más activo con sus sensores internos de temperatura fijados a lo largo del cable.
**Esquema del equipo — lecturas sobre la máquina** Un esquema de una línea de producción, una lectura de vibración fijada en cada motor y cojinete — verde 0–7 mm/s, ámbar 7–12, rojo por encima de 12. El ingeniero ve qué componente está funcionando de forma áspera sin tener que asociar nombres de dispositivos con máquinas.
**Edificio de varias plantas — una capa por planta** El plano de cada planta en su propia capa, con HVAC y temperatura fijados por planta — una planta de servidores con un rango más estricto que las oficinas.
La imagen puede ser cualquier cosa que puedas fotografiar o dibujar — un parque de tanques, una sala de conmutación, una cámara frigorífica, un plano del sitio — así que tómalo como puntos de partida, no como límites. Siempre que una lectura signifique más cuando ves *dónde* está, el Widget de imagen la coloca ahí.
## Qué muestra el widget
En el panel, cada capa muestra su imagen con un pin circular de color en cada posición que definas. Cada pin lleva el icono del sensor, su valor actual en vivo y la unidad, y se actualiza en tiempo real a medida que el sensor informa.
**El color del pin proviene por completo de las condiciones.** La primera condición que coincida es la que prevalece; si no coincide ninguna condición, el pin usa el color Predeterminado establecido en la ventana modal de Condiciones. El Widget de imagen visualiza el estado — para activar una alerta cuando una lectura cruce un límite, combínalo con un [Alarma](/kilo-docs-es/kilo-iot-server/alarm.md).
Cuando un widget tiene dos o más capas, el **selector de capas** permite al espectador moverse entre ellas. Si una capa aún no tiene imagen, o el widget no tiene sensores configurados, esa área muestra en su lugar un breve mensaje de marcador de posición.
## Véase también
* [Condiciones](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets/conditions.md) — Las reglas de color que determinan el color de cada pin
* [Añadir widgets](/kilo-docs-es/kilo-iot-server/dashboards/adding-widgets.md) — Modo de edición y el selector de 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/image-widget.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.
