Référence des widgets

Les boards IronFlock sont construits à partir de widgets. Chaque type de widget a une finalité spécifique — de l’affichage de données en direct à la capture de saisies utilisateur. Ajoutez n’importe quel widget en le glissant depuis le panneau de widgets sur le canevas de votre board, puis configurez-le via le panneau de paramètres.

Les widgets se répartissent en quatre groupes : Visualisation des données pour les graphiques et les affichages d’état, Contenu et médias pour le contenu statique et enrichi, Saisie et contrôle pour capturer les saisies et envoyer des commandes, et Navigation pour se déplacer entre les pages d’un board.

Visualisation des données

Widgets qui transforment les données en direct et historiques en graphiques, jauges et affichages d’état.

Graphique cartésien

Affiche des données de séries temporelles ou catégorielles sous forme de graphiques linéaires, à barres ou une combinaison des deux. Prend en charge plusieurs séries de données sur le même graphique.

Quand l’utiliser : Suivre l’évolution de valeurs de capteurs dans le temps, comparer plusieurs signaux côte à côte, afficher des totaux journaliers sous forme de barres.

Ce que vous configurez :

• Une ou plusieurs séries de données, chacune pointant vers une colonne de données de votre app
• Le type de graphique par série : ligne, barre ou bulle
• Le type d’axe X : temporel ou catégoriel
• L’étiquette de l’axe Y et la fenêtre temporelle (par ex. les 5 dernières minutes agrégées par minute)
• Les couleurs par série

Jauge

Une jauge radiale affichant une valeur unique en direct avec des zones de seuil colorées.

Quand l’utiliser : Température, pression, niveau de remplissage ou toute valeur pour laquelle vous voulez un statut visuel immédiat avec des zones vert/jaune/rouge.

Ce que vous configurez :

• La colonne de données à lire (affiche toujours la valeur la plus récente)
• L’unité et la précision décimale
• Les limites des zones de couleur (par ex. sûr : 0–60, avertissement : 60–80, critique : 80–120)
• Optionnel : moyenner les N dernières lectures pour lisser le bruit

Affichage de valeur

Affiche une ou plusieurs valeurs uniques avec des étiquettes et des unités. Épuré et minimal — idéal pour les tuiles de KPI.

Quand l’utiliser : Afficher la température actuelle, la durée de fonctionnement, le dernier événement ou toute métrique clé sous forme de nombre.

Ce que vous configurez :

• Une ou plusieurs colonnes de données, chacune avec une étiquette et une unité
• La précision décimale
• Les couleurs de texte par valeur

Signal

Indicateurs d’état compacts — cercles ou carrés — qui changent de couleur en fonction de la valeur actuelle, offrant un tableau de bord d’état visuel immédiat.

Quand l’utiliser : Tableaux de bord en ligne/hors ligne des appareils, états OK/avertissement/erreur sur de nombreux actifs, voyants d’état basés sur des seuils.

Ce que vous configurez :

• Un ou plusieurs signaux, chacun lisant une colonne de données
• Les règles de correspondance de couleur par signal : correspondances exactes (par ex. ONLINE) ou comparaisons numériques (par ex. >=70)
• La disposition (horizontale ou verticale) et la forme (cercle ou carré)
• Un titre et un sous-titre optionnels

Graphique en anneau

Un graphique circulaire affichant des segments proportionnels.

Quand l’utiliser : Afficher une répartition — par ex. appareils en ligne vs hors ligne, part de production par type de produit.

Ce que vous configurez :

• Les segments, chacun avec une étiquette, une couleur et une colonne de données (ou une valeur fixe)
• La taille de l’évidement (contrôle le diamètre du trou intérieur)

Tableau

Affiche des lignes de données au format tabulaire avec des colonnes configurables.

Quand l’utiliser : Afficher une liste de machines, d’événements récents, de rapports d’inspection ou tout jeu de données structuré.

Ce que vous configurez :

• Les colonnes, chacune avec un en-tête, une colonne de données et un type d’affichage
• La hauteur des lignes et la taille de police de l’en-tête
• Le nombre de lignes à afficher

Types d’affichage de colonne : texte brut, nombre, état (associe des valeurs à des couleurs), booléen, image ou bouton (lien cliquable).

Carte thermique

Une carte thermique en grille pour visualiser l’intensité sur deux dimensions.

Quand l’utiliser : Consommation d’énergie par heure et jour de la semaine, utilisation des machines par équipe, motifs d’anomalies dans le temps.

Ce que vous configurez :

• Les colonnes de l’axe X (par ex. l’heure de la journée) et de l’axe Y (par ex. le jour de la semaine)
• La colonne de valeur pour l’intensité thermique
• L’échelle min/max et l’utilisation d’un dégradé de couleur continu ou par paliers

Historique d’état

Une chronologie horizontale montrant quand les états ont changé au fil du temps, une ligne par actif.

Quand l’utiliser : Historique du statut des machines (en fonctionnement / arrêté / maintenance), journaux d’équipes, chronologies d’événements.

Ce que vous configurez :

• Les noms des états et leurs couleurs (par ex. En fonctionnement = vert, Panne = rouge)
• Les colonnes de données pour l’horodatage, la valeur d’état et le nom de l’actif

Carte

Affiche des données géographiques sur une carte interactive. Prend en charge les marqueurs circulaires et les lignes de suivi.

Quand l’utiliser : Afficher les emplacements des appareils, le suivi de véhicules, les positions d’actifs sur le terrain.

Ce que vous configurez :

• Le style de carte (clair ou sombre)
• Une ou plusieurs séries : cercles (marqueurs de dernière position) ou lignes (tracés de déplacement)
• Les colonnes de données pour la latitude et la longitude
• Une colonne pivot pour répartir les données par appareil ou par actif

SCADA

Affiche des symboles SVG industriels interactifs — pompes, vannes, réservoirs, moteurs, tuyauteries, jauges — issus de la bibliothèque SCADA de ThingsBoard, avec des liaisons de données en direct et une colorisation selon l’état.

Quand l’utiliser : Diagrammes de processus et synoptiques d’installation — afficher l’état en direct des pompes, vannes, réservoirs et flux sur un schéma.

Ce que vous configurez :

• Le type de symbole à afficher
• Les liaisons de données qui pilotent l’état du symbole (en marche/arrêté, ouvert/fermé, niveaux de fluide)
• Les couleurs d’état (en marche, arrêté, avertissement, critique) et les autres styles propres à chaque symbole

Pour créer des écrans de processus complets, consultez SCADA.

Contenu et médias

Widgets pour le contenu statique et enrichi — images, texte formaté et pages web intégrées.

Image

Affiche une image statique à partir d’une URL. Utile pour les logos, les diagrammes ou les visuels pédagogiques.

Superposition d’image

Place des valeurs de données en direct par-dessus une image d’arrière-plan — idéal pour les plans d’étage, les diagrammes ou les schémas.

Quand l’utiliser : Superposer des températures sur un plan d’usine, afficher les niveaux de remplissage sur le schéma d’un réservoir.

Ce que vous configurez :

• L’URL de l’image d’arrière-plan
• Les épingles de superposition : barres de progression ou étiquettes de texte positionnées à des coordonnées relatives sur l’image
• La colonne de données de chaque épingle (valeur en direct ou fixe)

Markdown

Affiche du Markdown (CommonMark et GitHub Flavored Markdown) avec des blocs de code mis en évidence syntaxiquement et une interpolation de variables en direct.

Quand l’utiliser : Panneaux de documentation, instructions ou notes dynamiques qui combinent du texte formaté et des valeurs de données en direct.

Ce que vous configurez :

• Le texte source Markdown
• Les variables référencées dans le texte via {{variableName}}, chacune liée à une colonne de données ou une valeur fixe

Étiquette

Affiche une seule étiquette de texte configurable avec un contrôle complet sur la typographie et l’alignement.

Quand l’utiliser : Titres de section, légendes, annotations statiques ou une valeur dynamique unique affichée sous forme de texte.

Ce que vous configurez :

• Le texte à afficher (les sauts de ligne sont préservés)
• La taille, la couleur, la graisse et le style de la police
• L’alignement horizontal et vertical, et la couleur d’arrière-plan

Intégration web

Intègre du contenu web externe dans un iframe isolé — une seule page ou plusieurs disposées dans une grille responsive.

Quand l’utiliser : Intégrer des tableaux de bord tiers, de la documentation, des outils externes ou toute page accessible sur le web dans un board.

Ce que vous configurez :

• L’URL à intégrer (le site cible doit autoriser l’intégration en iframe)
• Un titre optionnel affiché au-dessus du contenu
• Le mode multi-intégration : plusieurs URL disposées en grille, avec un espacement configurable

Saisie et contrôle

Widgets qui capturent les saisies utilisateur ou envoient des commandes et des filtres vers la plateforme.

Formulaire

Un formulaire de saisie de données configurable qui écrit les entrées utilisateur dans le backend de données de votre app.

Quand l’utiliser : Saisie manuelle de données — rapports d’inspection, journaux de maintenance, saisie opérateur, paramètres de consigne.

Ce que vous configurez :

• Les champs du formulaire de différents types : texte, nombre, case à cocher, zone de texte, liste déroulante, date/heure
• Les options par champ : étiquette, obligatoire, valeur par défaut, validation, min/max et colonne de données cible
• Un titre, un sous-titre optionnels et si le formulaire s’ouvre dans une boîte de dialogue

Interrupteur

Un ou plusieurs interrupteurs Material Design qui reflètent une valeur en direct et déclenchent une action sur l’appareil lorsqu’ils sont basculés.

Quand l’utiliser : Mettre des équipements en marche/arrêt, basculer des paramètres binaires d’un appareil, envoyer des commandes de contrôle depuis le tableau de bord.

Ce que vous configurez :

• Un ou plusieurs interrupteurs, chacun lisant une colonne de données
• La correspondance d’état pour MARCHE/ARRÊT : valeurs exactes ou comparaisons numériques (par ex. >50)
• L’app cible, l’appareil et le sujet d’action invoqué lors du basculement
• L’étiquette et les couleurs de valeur par interrupteur

Filtre liste déroulante

Une liste déroulante d’options prédéfinies qui publie la valeur sélectionnée comme paramètre de filtre à destination d’autres widgets.

Quand l’utiliser : Permettre aux utilisateurs de filtrer l’ensemble d’un board par type d’appareil, ligne, emplacement ou toute catégorie.

Ce que vous configurez :

• L’étiquette affichée au-dessus de la liste déroulante
• La clé de paramètre référencée par les autres widgets dans leurs requêtes de données
• La liste des options, chacune avec une étiquette et une valeur

Filtre calendrier

Un sélecteur de plage de dates/heures — date unique ou plage — qui stocke les horodatages sélectionnés comme paramètres de filtre pour les autres widgets.

Quand l’utiliser : Tableaux de bord de séries temporelles, analyses historiques et rapports avec une fenêtre temporelle sélectionnable par l’utilisateur.

Ce que vous configurez :

• Les clés de paramètre de début et de fin (utiliser l’une pour le mode date unique, les deux pour une plage)
• Le nombre de mois affichés simultanément (1–3)
• L’étiquette de saisie

Navigation

Widgets pour se déplacer entre les pages et sections d’un board multi-pages.

Barre de navigation

Une barre de navigation horizontale en haut avec un titre ou une marque cliquable et plusieurs éléments routés.

Quand l’utiliser : Navigation de premier niveau entre les pages d’un board multi-pages.

Ce que vous configurez :

• Le texte du titre/marque et sa route de destination
• Les éléments de navigation, chacun avec une étiquette, une icône Material et une route
• La taille, la graisse et les couleurs de la police
• Les segments de route dynamiques via la substitution {{variable}}

Bouton de navigation

Un seul bouton cliquable qui redirige vers une autre page ou effectue une navigation arrière dans le navigateur.

Quand l’utiliser : Boutons retour, liens d’appel à l’action ou accès à une vue spécifique d’un board.

Ce que vous configurez :

• L’étiquette du bouton et une icône Material optionnelle
• La route de destination (laisser vide pour une navigation arrière automatique)
• La taille et les couleurs de la police
• Les segments de route dynamiques via la substitution {{variable}}

Navigation latérale

Un menu latéral vertical avec des icônes Material et une mise en évidence basée sur la route de l’élément actif.

Quand l’utiliser : Navigation latérale persistante pour les tableaux de bord comportant plusieurs sections ou vues.

Ce que vous configurez :

• Un titre avec une route optionnelle
• Les éléments de navigation, chacun avec une étiquette, une icône Material et une route
• La mise en évidence de l’élément actif en fonction de la route actuelle
• La taille, la graisse et les couleurs de la police