Didacticiel : Personnaliser le tableau de bord et gérer les appareils dans Azure IoT Central

Article
03/27/2024

Dans ce didacticiel, vous allez découvrir comment vous pouvez personnaliser le tableau de bord dans votre application d’analytique en magasin Azure IoT Central. Les opérateurs d’application peuvent utiliser le tableau de bord personnalisé pour exécuter l’application et gérer les appareils connectés.

Dans ce tutoriel, vous allez apprendre à :

Personnaliser les vignettes d’image sur le tableau de bord
Réorganiser les vignettes pour modifier la disposition
Ajouter des vignettes de télémétrie pour afficher les conditions
Ajouter des vignettes de propriété pour afficher les détails de l’appareil
Ajouter des vignettes de commande pour exécuter des commandes

Prérequis

Avant de commencer, suivez le tutoriel Créer une application d’analytique en magasin dans Azure IoT Central.

Modifier le nom du tableau de bord

Une fois que vous avez créé votre application de surveillance des conditions, vous pouvez modifier son tableau de bord par défaut. Vous pouvez également créer d’autres tableaux de bord.

La première étape de la personnalisation du tableau de bord de l’application consiste à modifier le nom :

Accédez à la page My apps d’Azure IoT Central.
Ouvrez l’application de surveillance des conditions que vous avez créée.
Sélectionnez Paramètres du tableau de bord, entrez un nom pour votre tableau de bord, puis sélectionnez Enregistrer.

Personnaliser les vignettes d’image sur le tableau de bord

Un tableau de bord d’application Azure IoT Central se compose d’une ou de plusieurs vignettes. Une vignette est un conteneur rectangulaire permettant d’afficher du contenu sur un tableau de bord. Vous associez différents types de contenu à des vignettes que vous faites glisser, déplacez et redimensionnez pour personnaliser la disposition d’un tableau de bord.

Il existe plusieurs types de vignettes pour afficher du contenu :

Les vignettes d’image contiennent des images, et vous pouvez y ajouter une URL permettant aux utilisateurs de sélectionner l’image.
Les vignettes d’étiquette affichent du texte brut.
Les vignettes Markdown contiennent du contenu formaté et vous permettent de définir une image, une URL, un titre et un code Markdown qui est rendu au format HTML.
Les vignettes de télémétrie, de propriété ou de commande affichent des données spécifiques à l’appareil.

Dans cette section, vous apprendrez à personnaliser les vignettes d’image sur le tableau de bord.

Pour personnaliser la vignette d’image qui affiche une image de marque sur le tableau de bord :

Sélectionnez Modifier dans la barre d’outils du tableau de bord.
Sélectionnez Modifier sur la vignette d’image qui affiche l’image de marque Northwind Traders.
Modifiez le Titre. Le titre apparaît lorsque vous survolez l’image.
Sélectionnez Image. Une fenêtre s’ouvre dans laquelle vous pouvez charger une image personnalisée ou, éventuellement, spécifier une URL pour l’image.
Sélectionnez Update.
Si vous le souhaitez, dans la vignette Documentation, sélectionnez Configurer, puis spécifiez une URL qui renvoie au contenu de support.

Pour personnaliser la vignette d’image qui affiche une carte des zones de capteurs dans le magasin :

Sélectionnez Configurer sur la vignette d’image qui affiche la carte des zones du magasin par défaut.
Sélectionnez Image et chargez une image personnalisée d’une carte de zones du magasin.
Sélectionnez Update.

La carte du magasin Contoso en exemple montre quatre zones : deux zones de caisse, une zone pour les vêtements et les soins personnels et une zone pour l’épicerie et le traiteur.

Dans ce tutoriel, vous associez des capteurs à ces zones pour fournir des données de télémétrie.

Réorganiser les vignettes pour modifier la disposition

Une étape clé de la personnalisation d’un tableau de bord consiste à réorganiser les vignettes pour créer un affichage utile. Les opérateurs d’application utilisent le tableau de bord pour visualiser les données de télémétrie des appareils, gérer des appareils et surveiller les conditions d’un magasin.

Azure IoT Central simplifie la tâche du générateur d’applications lors de la création d’un tableau de bord. Le mode d’édition du tableau de bord vous permet d’ajouter, de déplacer, de redimensionner et de supprimer rapidement des vignettes.

Le modèle d’application Analytique en magasin – caisse simplifie également la création d’un tableau de bord. Le modèle fournit une disposition de tableau de bord fonctionnelle, avec des capteurs connectés et des vignettes affichant les nombres de lignes de caisse et les conditions environnementales.

Dans cette section, vous réorganiserez les vignettes du tableau de bord dans le modèle d’application Analytique en magasin – Validation de l’achat pour créer une disposition personnalisée.

Pour supprimer les vignettes que vous n’envisagez pas d’utiliser dans votre application :

Sélectionnez Modifier dans la barre d’outils du tableau de bord.
Pour chacune des vignettes suivantes, que le tableau de bord du magasin Contoso n’utilise pas, sélectionnez les points de suspension (...), puis sélectionnez Supprimer :
- Revenir à toutes les zones
- Visiter le tableau de bord du magasin
- Réchauffer la zone de caisse
- Refroidir la zone de caisse
- Paramètres du capteur d’occupation
- Paramètres du thermostat
- Temps d’attente
- Conditions d’environnement
- Caisse 3 : les trois vignettes qui lui sont associées
Sélectionnez Enregistrer. La suppression des vignettes inutilisées libère de l’espace dans la page d’édition et simplifie l’affichage du tableau de bord pour les opérateurs.

Après avoir supprimé les vignettes inutilisées, réorganisez les vignettes restantes pour créer une disposition organisée. La nouvelle disposition inclut un espace pour des vignettes que vous ajoutez ultérieurement.

Pour réorganiser les vignettes restantes :

Sélectionnez Modifier.
Faites glisser la vignette Microprogramme de présence à droite de la vignette de batterie Présence.
Faites glisser la vignette Microprogramme du thermostat à droite de la vignette de batterie Thermostat.
Sélectionnez Enregistrer.
Affichez les modifications apportées à votre disposition.

Ajouter des vignettes de télémétrie pour afficher les conditions

Après avoir personnalisé la disposition du tableau de bord, vous êtes prêt à ajouter des vignettes pour afficher les données de télémétrie. Pour créer une vignette de télémétrie, sélectionnez un modèle d’appareil et une instance d’appareil, puis sélectionnez les données de télémétrie spécifiques à l’appareil devant être affichées dans la vignette. Le modèle d’application Analytique en magasin – Validation de l’achat comprend plusieurs vignettes de télémétrie dans le tableau de bord. Les quatre vignettes dans les deux zones de caisse affichent les données de télémétrie à partir d’une simulation du capteur de présence. La vignette Fréquentation affiche les nombres dans les deux zones de caisse.

Dans cette section, vous ajouterez deux vignettes de télémétrie supplémentaires pour afficher les données de télémétrie de l’environnement provenant des capteurs RuuviTag que vous avez ajoutés à l’aide du tutoriel Créer une application d’analytique en magasin dans Azure IoT Central.

Pour ajouter des vignettes afin d’afficher les données environnementales des capteurs RuuviTag :

Sélectionnez Modifier.
Dans la liste Modèle d’appareil, sélectionnez RuuviTag.
Sélectionnez l’Instance d’appareil de l’un des deux capteurs RuuviTag. Dans l’exemple du magasin Contoso, sélectionnez Ruuvi zone 1 pour créer une vignette de télémétrie pour la zone 1.
Dans la liste Télémétrie, sélectionnez Humidité relative et Température, les éléments de télémétrie affichés pour chaque zone de la vignette.
Sélectionnez Ajouter une vignette. Cette nouvelle vignette apparaît pour afficher les données de télémétrie combinées de l’humidité et de la température pour le capteur sélectionné.
Sélectionnez Configurer sur la nouvelle vignette pour le capteur RuuviTag.
Modifiez le Titre en Environnement zone 1.
Sélectionnez Update.
Répétez les étapes 1 à 8 afin de créer une vignette pour la deuxième instance de capteur. Pour le Titre, saisissez Environnement zone 2 puis sélectionnez Mettre à jour la configuration.
Faites glisser la vignette intitulée Environnement zone 2 sous la vignette Microprogramme du thermostat.
Faites glisser la vignette intitulée Environnement zone 1 sous la vignette Fréquentation.
Sélectionnez Enregistrer. Le tableau de bord affiche les données de télémétrie des zones dans les deux nouvelles vignettes.

Pour modifier la vignette Fréquentation afin d’afficher les données de télémétrie pour deux zones de caisse uniquement :

Sélectionnez Modifier.
Sur la vignette Fréquentation, sélectionnez Modifier.
Supprimez les données de télémétrie count3.
Sélectionnez Mettre à jour.
Sélectionnez Enregistrer. Le tableau de bord mis à jour affiche les nombres pour vos deux zones de caisse uniquement, lesquels sont basés sur la simulation du capteur de présence.

Ajouter des vignettes de commande pour exécuter des commandes

Les opérateurs d’application utilisent également le tableau de bord pour gérer les appareils en exécutant des commandes. Vous pouvez ajouter des vignettes de commande au tableau de bord qui exécutent des commandes prédéfinies sur un appareil. Dans cette section, vous ajouterez une vignette de commande pour permettre aux opérateurs de redémarrer la passerelle Rigado.

Pour ajouter une vignette de commande afin de redémarrer la passerelle :

Sélectionnez Modifier.
Dans la liste Modèle d’appareil, sélectionnez C500. Il s’agit du modèle pour la passerelle Rigado C500.
Sélectionnez l’instance de passerelle dans Instance d’appareil.
Sélectionnez la commande Redémarrer.
Sélectionnez Ajouter une vignette.
Sélectionnez Enregistrer.
Affichez votre tableau de bord Contoso terminé.
Si vous le souhaitez, sélectionnez la vignette Redémarrer pour exécuter la commande de redémarrage sur votre passerelle.

Nettoyer les ressources

Si vous ne prévoyez pas de suivre d’autres guides de démarrage rapide ou tutoriels IoT Central, vous pouvez supprimer votre application IoT Central :

Dans votre application IoT Central, accédez à Application > Gestion.
Sélectionnez Supprimer, puis confirmez l’opération.

Étape suivante

Exporter des données et visualiser des aperçus

Partage via