> 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-fr/kilo-iot-server/dashboards/adding-widgets/image-widget.md).
# Widget d’image
Épinglez des relevés de capteurs en direct sur n’importe quelle image — plan d’étage, photo de site, schéma d’équipement — avec le widget Image.
Le widget Image transforme une image en tableau de bord en direct. Importez une image — et elle peut être **n’importe quelle image**: un plan d’étage, un schéma d’équipement, un plan de site, une photo d’un bâtiment, une photo d’un équipement comme les silos ci-dessus — puis épinglez-y des relevés numériques en direct, chacun placé exactement là où se trouve son capteur.
C’est là toute l’idée : au lieu de lire une liste de noms d’appareils, vous regardez l’endroit ou la machine réel(le) et voyez ce que chaque élément fait en ce moment. Un responsable d’usine regarde la photo des silos et voit quel réservoir se vide ; un ingénieur de maintenance regarde un schéma d’équipement et voit quel composant est hors tolérance.
Importez un fichier image pris en charge — un PNG ou un JPG — de tout lieu, objet ou système que vous souhaitez surveiller. Chaque relevé épinglé affiche sa valeur actuelle, son unité et une icône, et sa couleur change selon les conditions déclenchées, de sorte que l’état soit visible d’un coup d’œil sur toute l’image.
## Configurer un widget Image
Voici une configuration complète pour un cas réel — la surveillance d’une rangée de silos à grains à partir d’une seule photo du site. Un capteur de niveau dans chaque silo indique son remplissage en pourcentage. Ceci n’est qu’un exemple : l’image peut être n’importe quoi, et les étapes sont les mêmes.
1. Ouvrez le tableau de bord en mode édition et cliquez sur **Widget Image** dans le sélecteur de widgets. Le panneau de paramètres s’ouvre — et, contrairement aux autres widgets, l’ **Apparence** onglet s’ouvre en premier, car vous devez importer l’image avant de pouvoir y placer quoi que ce soit.
2. Entrez un nom pour le widget — par exemple « Niveaux des silos ».
3. Le widget commence avec un calque, **Calque 1**, déjà créé. Donnez-lui un **Nom du calque** (« Cour du silo ») clair et importez l’image — une photo des silos. Les fichiers PNG et JPG sont acceptés.
4. Cliquez sur **Suivant** pour passer à l’ **Source de données** .
5. Sous le calque, cliquez sur **Ajouter une source de données** — cela crée un bloc de source de données vide. Dans le bloc, cliquez sur **Choisir un appareil** et sélectionnez le capteur de niveau du premier silo.
6. Cliquez sur **Ajouter une métrique**. Définissez **Type de données** sur **Télémétrie**, choisissez la mesure du niveau de remplissage sous **Métrique de l’appareil**, puis choisissez une **Icône**.
> **Vous ne trouvez pas votre métrique ?** Le widget Image n’épinglе que des métriques numériques. Si un relevé que vous attendez est manquant, la métrique est stockée en tant que String ou Boolean plutôt qu’Integer ou Float. Ouvrez **Appareils → Métriques**, trouvez la métrique et modifiez son stockage en Integer ou Float — à condition que l’appareil renvoie bien un nombre. Voir [Métriques](/kilo-docs-fr/kilo-iot-server/devices/metric-templates.md).
7. Cliquez sur **Conditions : N** pour ouvrir la fenêtre modale Conditions. Définissez une **Couleur par défaut**, puis pour chaque bande cliquez sur **Ajouter une condition** et remplissez la ligne — un **Nom de la condition**, **Type de données** défini sur **Nombre**, l’ **De** et **À** valeurs, et un **Couleur**. La couleur de l’épingle provient entièrement de ces conditions. Pour un niveau de remplissage de silo exprimé en pourcentage, ajoutez-en quatre :
* « Critique » — **De** 0, **À** 10 — bordeaux (un rouge profond)
* « À remplir maintenant » — **De** 10, **À** 30 — rouge
* « À remplir bientôt » — **De** 30, **À** 60 — jaune
* « Sain » — **De** 60, **À** 100 — vert
Cliquez sur **Enregistrer** pour fermer la fenêtre modale. L’épingle s’affiche désormais en vert lorsque le silo est bien rempli et passe par le jaune puis le rouge vers une mince bande bordeaux à mesure qu’il se vide — d’un simple coup d’œil à la photo, l’opérateur sait donc quel réservoir remplir.
8. L’épingle pour ce capteur apparaît sur l’image. **Faites-la glisser** sur le silo auquel elle appartient. Utilisez les commandes de zoom (+ / −) dans l’aperçu pour la placer précisément.
9. Répétez — **Ajouter une source de données** pour chaque capteur de silo restant, ajoutez sa métrique et ses conditions, puis faites glisser son épingle sur le bon réservoir. Un calque peut contenir plusieurs sources de données, et une source de données plusieurs métriques.
10. Cliquez sur **Enregistrer** pour ajouter le widget au tableau de bord.
Résultat : la photo du site avec une épingle colorée sur chaque silo, chacune affichant son pourcentage de remplissage en direct — toute la cour de stockage lisible d’un seul coup d’œil. Les mêmes étapes conviennent à n’importe quelle image ; seuls la photo, les appareils et les bandes de conditions changent.
## Ce que sont les calques
A **calque** est une vue d’image à l’intérieur du même widget Image — pas une superposition transparente sur une seule image. Chaque calque possède sa propre image importée et ses propres épingles. Lorsque le widget comporte plus d’un calque, un **sélecteur de calques** apparaît ; l’utilisateur clique dessus pour passer d’une vue à l’autre, de sorte que plusieurs images et jeux de capteurs cohabitent dans un seul widget.
Les calques prennent tout leur sens lorsqu’une image ne peut pas tout montrer. Prenez les silos — un seul silo peut comporter bien plus d’un capteur :
* **Calque 1 — « Cour du silo ».** La photo extérieure de tous les silos, avec un repère de niveau sur chacun. Cette vue répond à *quel silo a besoin d’attention*.
* **Calque 2 — « À l’intérieur du silo 1 ».** Lorsqu’un silo comporte une série de capteurs — par exemple un câble de température multipoint descendant à l’intérieur — importez une image ouverte en coupe de ce silo et épinglez-y chaque capteur interne. Cette vue répond à *ce qui se passe à l’intérieur de ce silo*.
Sur le tableau de bord, l’opérateur clique sur le sélecteur de calques pour passer de la vue d’ensemble de la cour au détail intérieur, sans quitter le widget ni ouvrir une liste d’appareils. Les calques suivants suivent le même schéma — une photo de la zone du convoyeur et de la pompe, un schéma du panneau de commande — chacun avec sa propre image et ses propres épingles.
Les calques conviennent tout aussi bien à un bâtiment à plusieurs étages. Donnez à chaque étage son propre calque — le rez-de-chaussée sur le Calque 1, les étages supérieurs sur les leurs — et épinglez la température, l’humidité ou l’occupation aux points HVAC de chacun. L’équipe des services généraux utilise le sélecteur de calques pour parcourir le bâtiment étage par étage depuis un seul widget, chaque étage respectant sa propre spécification.
Ici, un plan d’étage n’est simplement qu’une image plane : les plans architecturaux déjà disponibles sont importés tels quels, un par étage — rien n’a besoin d’être dessiné ou modélisé. Les deux sont des outils différents : le widget Image épingle des relevés en direct sur des plans 2D plats que vous possédez déjà, tandis que le [Jumeau numérique du bâtiment](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/digital-building-twin.md) sert à dessiner et à exploiter un modèle 3D complet de l’installation à partir de zéro.
**Calques ou widgets séparés ?** Utilisez des calques lorsque les images sont différentes vues du même lieu ou système. Utilisez des widgets Image séparés lorsque les images appartiennent à différentes parties du tableau de bord ou couvrent des systèmes sans rapport.
Pour travailler avec des calques : **Calque 1** est déjà là — renommez-le et importez son image. Cliquez sur **Ajouter un nouveau calque** uniquement lorsque vous voulez une autre vue d’image dans le même widget. **Chaque calque a besoin de sa propre image** — si vous ajoutez un calque et le laissez vide, **Suivant** ne pourra pas continuer. Dans l’ **Source de données** onglet, ajoutez chaque source de données et chaque métrique sous le calque auquel elle appartient, et faites glisser chaque épingle sur l’image propre à ce calque.
## Exemples pratiques
**Cour de silos à grains — niveaux de remplissage d’un coup d’œil** Une photo du site des silos avec un repère de niveau sur chaque réservoir ; conditions vertes au-dessus de 60 %, jaunes de 30 à 60 %, rouges de 10 à 30 %, bordeaux en dessous de 10 %. Un deuxième calque contient une vue en coupe du silo le plus actif avec ses capteurs de température internes épinglés le long du câble.
**Schéma d’équipement — relevés sur la machine** Un schéma d’une ligne de production, un relevé de vibration épinglé sur chaque moteur et palier — vert 0–7 mm/s, ambre 7–12, rouge au-dessus de 12. L’ingénieur voit quel composant tourne mal sans faire correspondre les noms des appareils aux machines.
**Bâtiment à plusieurs étages — un calque par étage** Le plan de chaque étage sur son propre calque, avec le CVC et la température épinglés par étage — un étage serveur sur une plage plus étroite que les bureaux.
L’image peut être tout ce que vous pouvez photographier ou dessiner — un parc de réservoirs, une salle de commutation, une chambre froide, un plan de site — alors considérez ces exemples comme des points de départ, pas comme des limites. Partout où un relevé prend plus de sens quand vous voyez *où* il se trouve, le widget Image l’y place.
## Ce que le widget affiche
Sur le tableau de bord, chaque calque affiche son image avec une épingle circulaire colorée à chaque position que vous définissez. Chaque épingle porte l’icône du capteur, sa valeur actuelle en direct et son unité, et se met à jour en temps réel au fil des relevés du capteur.
**La couleur de l’épingle provient entièrement des conditions.** La première condition correspondante l’emporte ; si aucune condition ne correspond, l’épingle utilise la couleur par défaut définie dans la fenêtre modale Conditions. Le widget Image visualise l’état — pour être averti lorsqu’un relevé franchit une limite, associez-le à un [Alarme](/kilo-docs-fr/kilo-iot-server/alarm.md).
Lorsqu’un widget comporte deux calques ou plus, le **sélecteur de calques** permet au spectateur de passer de l’un à l’autre. Si un calque n’a pas encore d’image, ou si aucun capteur n’est configuré dans le widget, cette zone affiche à la place un court message indicatif.
## Voir aussi
* [Conditions](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets/conditions.md) — Les règles de couleur qui déterminent la couleur de chaque épingle
* [Ajout de widgets](/kilo-docs-fr/kilo-iot-server/dashboards/adding-widgets.md) — Le mode édition et le sélecteur 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-fr/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.
