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

Dans ce tutoriel, vous allez apprendre à 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 attachés.

Dans ce tutoriel, vous allez apprendre à :

Prerequisites

Avant de commencer, suivez le didacticiel Créer et déployer un modèle d’application d’analytique dans le magasin .

Modifier le nom du tableau de bord

Après avoir 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 :

1. Accédez à la page Mes applications Azure IoT Central .

2. Ouvrez l’application de surveillance des conditions que vous avez créée.

3. Sélectionnez Paramètres du tableau de bord, entrez un nom pour votre tableau de bord, puis sélectionnez Enregistrer.

Personnaliser des vignettes d’image sur le tableau de bord

Un tableau de bord d’application Azure IoT Central se compose d’une ou 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, et vous pouvez faire glisser, déposer et redimensionner des vignettes pour personnaliser la disposition du tableau de bord.

Il existe plusieurs types de vignettes pour afficher le contenu :

• Les vignettes d’image contiennent des images et vous pouvez ajouter une URL qui vous permet de sélectionner l’image.
• Les vignettes d’étiquette affichent du texte brut.
• Les vignettes Markdown contiennent du contenu mis en forme et vous permettent de définir une image, une URL, un titre et un code Markdown qui s’affiche en tant que code 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 personnalisez 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 :

1. Sélectionnez Modifier dans la barre d’outils du tableau de bord.

2. Sélectionnez Modifier sur la vignette d’image qui affiche l’image de marque Northwind Traders.

3. Modifiez le titre. Le titre s’affiche lorsque vous pointez sur l’image.

4. 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.

5. Sélectionnez Mettre à jour.

   Capture d’écran montrant la vignette de l'image de marque sur le tableau de bord de l'application d'analyse en magasin.

6. Si vous le souhaitez, dans la vignette Documentation , sélectionnez Configurer, puis spécifiez une URL qui lie au contenu de prise en charge.

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

1. Sur la vignette d’image qui affiche la carte de zone de magasin par défaut, sélectionnez Configurer.

2. Sélectionnez Image, puis chargez une image personnalisée d’une carte de zone de magasin.

3. Sélectionnez Mettre à jour.

L’exemple de carte de magasin Contoso 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 déli.

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

Organiser les vignettes pour modifier la disposition

Une étape clé dans la personnalisation d’un tableau de bord consiste à réorganiser les vignettes pour créer une vue 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 les appareils et surveiller les conditions dans un magasin.

Azure IoT Central simplifie la tâche du générateur d’applications de création d’un tableau de bord. En utilisant le mode d’édition du tableau de bord, vous pouvez rapidement ajouter, déplacer, redimensionner et supprimer 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éorganisez les vignettes du tableau de bord dans le modèle de l'application Analytique en magasin - passage en caisse pour créer une disposition personnalisée.

Pour supprimer des vignettes que vous ne prévoyez pas d’utiliser dans votre application :

1. Sélectionnez Modifier dans la barre d’outils du tableau de bord.

2. 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
   • Accéder/Consulter le tableau de bord du magasin
   • Zone de vérification préliminaire
   • 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

3. Cliquez sur Enregistrer. La suppression de vignettes inutilisées libère de l’espace sur 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 les tuiles que vous ajoutez ultérieurement.

Pour réorganiser les tuiles restantes :

1. Sélectionnez Modifier.

2. Faites glisser la vignette Microprogramme de présence à droite de la vignette de batterie Présence.

3. Faites glisser la vignette du microprogramme du thermostat à droite de la vignette de la batterie du thermostat.

4. Cliquez sur Enregistrer.

5. Affichez vos modifications de 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 la télémétrie spécifique à l’appareil à afficher 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 tuiles des deux zones de paiement affichent les données de télémétrie du capteur d’occupation simulé. La vignette Fréquentation affiche les nombres dans les deux zones de caisse.

Dans cette section, vous allez ajouter deux vignettes de télémétrie supplémentaires pour afficher les données de télémétrie environnementales à partir des capteurs RuuviTag que vous avez ajoutés dans le didacticiel Créer et déployer un modèle d’application d’analytique en magasin .

Pour ajouter des vignettes pour afficher des données environnementales à partir des capteurs RuuviTag :

1. Sélectionnez Modifier.

2. Dans la liste des modèles d’appareil , sélectionnez RuuviTag.

3. Sélectionnez une instance d’appareil de l’un des deux capteurs RuuviTag. Dans l’exemple de magasin Contoso, sélectionnez Zone 1 Ruuvi pour créer une vignette de télémétrie pour la zone 1.

4. 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.

5. Sélectionnez Ajouter une vignette. Cette nouvelle vignette affiche les données de télémétrie combinées d’humidité et de température pour le capteur sélectionné.

6. Dans la nouvelle vignette du capteur RuuviTag, sélectionnez Configurer.

7. Remplacez le titre par l’environnement zone 1.

8. Sélectionnez Mettre à jour.

9. Répétez les étapes 1 à 8 pour créer une vignette pour la deuxième instance de capteur. Pour Titre, entrez l’environnement Zone 2, puis sélectionnez Mettre à jour la configuration.

10. Faites glisser la vignette intitulée Environnement Zone 2 sous la vignette du microprogramme Thermostat .

11. Faites glisser la vignette intitulée Environnement Zone 1 sous la vignette Flux de personnes.

12. Cliquez sur Enregistrer. Le tableau de bord affiche les données de télémétrie de zone 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 :

1. Sélectionnez Modifier.

2. Dans la vignette Trafic de personnes, sélectionnez Modifier.

3. Supprimez la télémétrie count3 .

4. Sélectionnez Mettre à jour.

5. Cliquez sur 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 ajoutez une vignette de commande pour permettre aux opérateurs de redémarrer la passerelle Rigado.

Pour ajouter une tuile de commande pour redémarrer la passerelle :

1. Sélectionnez Modifier.

2. Dans la liste des modèles d’appareil , sélectionnez C500. Il s’agit du modèle de la passerelle Rigado C500.

3. Sélectionnez l’instance de passerelle dans l’instance d’appareil.

4. Sélectionnez la commande Redémarrer .

5. Sélectionnez Ajouter une vignette.

6. Cliquez sur Enregistrer.

7. Affichez votre tableau de bord Contoso terminé.

   

8. 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 n’envisagez pas de suivre d’autres guides de démarrage rapide ou didacticiels IoT Central, vous pouvez supprimer votre application IoT Central :

1. Dans votre application IoT Central, accédez à Gestion des applications>.
2. Sélectionnez Supprimer , puis confirmez votre action.

Étape suivante