Didacticiel : Personnaliser la vue de l’opérateur d’Azure IoT CentralTutorial: Customize the Azure IoT Central operator's view

Ce didacticiel vous montre, en tant que générateur, comment personnaliser la vue de l’opérateur de votre application.This tutorial shows you, as a builder, how to customize the operator's view of your application. Lorsque vous apportez une modification à l’application en tant que générateur, vous pouvez afficher un aperçu de vue de l’opérateur dans l’application Microsoft Azure IoT Central.When you make a change to the application as a builder, you can preview the operator's view in the Microsoft Azure IoT Central application.

Dans ce didacticiel, vous personnalisez l’application pour afficher des informations pertinentes sur le climatiseur raccordé pour un opérateur.In this tutorial, you customize the application to display relevant information about the connected air conditioner device to an operator. Vos personnalisations permettent à l’opérateur de gérer les climatiseurs raccordés à l’application.Your customizations enable the operator to manage the air conditioner devices connected to the application.

Ce tutoriel vous montre comment effectuer les opérations suivantes :In this tutorial, you learn how to:

  • Configurer le tableau de bord de votre appareilConfigure your device dashboard
  • Configurer la disposition des paramètres de votre appareilConfigure your device settings layout
  • Configurer la disposition des propriétés de votre appareilConfigure your device properties layout
  • Afficher un aperçu de l’appareil en tant qu’opérateurPreview the device as an operator
  • Configurer votre page d’accueil par défautConfigure your default home page
  • Afficher un aperçu de la page d’accueil par défaut en tant qu’opérateurPreview the default home page as an operator

PrérequisPrerequisites

Avant de commencer, vous devez effectuer les deux didacticiels précédents :Before you begin, you should complete the two previous tutorials:

Configurer le tableau de bord de votre appareilConfigure your device dashboard

En tant que générateur, vous pouvez définir les informations qui s’affichent sur le tableau de bord d’un appareil.As a builder, you can define what information displays on a device dashboard. Dans le didacticiel Définir un nouveau type d’appareil dans votre application, vous avez ajouté à un graphique linéaire et d’autres informations sur le tableau de bord Climatiseur raccordé-1.In the Define a new device type in your application tutorial, you added a line-chart and other information to the Connected Air Conditioner-1 dashboard.

  1. Pour modifier le modèle d’appareil Climatiseur raccordé, choisissez Explorer dans le menu de navigation gauche :To edit the Connected Air Conditioner device template, choose Explorer on the left navigation menu:

    Page Explorateur

  2. Pour commencer à personnaliser le tableau de bord de votre climatiseur raccordé, sélectionnez le modèle d’appareil Climatiseur raccordé (1.0.0).To start customizing your connected air conditioner device dashboard, select the Connected Air Conditioner (1.0.0) device template. Choisissez l’appareil Climatiseur raccordé-1 que vous avez créé dans le didacticiel Définir un nouveau type d’appareil dans votre application :Choose the Connected Air Conditioner-1 device you created in the Define a new device type in your application tutorial:

    Sélectionner le climatiseur raccordé

    Lorsque vous apportez une modification à un appareil, tel que Climatiseur raccordé-1, vous apportez une modification au modèle sous-jacent.When you make a change to a device, such as Connected Air Conditioner-1, you make a change to the underlying template. Pour plus d’informations, consultez Créer une nouvelle version de modèle d’appareil.For more information, see Create a new device template version.

  3. Pour modifier le tableau de bord, choisissez Tableau de bord :To edit the dashboard, choose Dashboard:

    Page du tableau de bord de modèle d’appareil

  4. Pour ajouter une vignette d’indicateur de performance clé au tableau de bord, choisissez KPI :To add a KPI tile to the dashboard, choose KPI:

    Ajouter un KPI

    Pour définir le KPI, utilisez les informations du tableau suivant :To define the KPI, use the information in the following table:

    ParamètreSetting ValeurValue
    NOMName Température maximaleMaximum temperature
    MesureMeasurement temperaturetemperature
    AgrégationAggregation MaximaleMaximum
    PériodeTime range 1 semaine précédentePast 1 week
  5. Choisissez Enregistrer.Choose Save. Vous pouvez maintenant voir la vignette du KPI sur le tableau de bord :You can now see the KPI tile on the dashboard:

    Vignette de KPI

  6. Pour déplacer ou redimensionner une vignette sur le tableau de bord, déplacez le pointeur de souris sur la vignette.To move or resize a tile on the dashboard, move the mouse pointer over the tile. Vous pouvez faire glisser la vignette vers un nouvel emplacement ou la redimensionner :You can drag the tile to a new location or resize it:

    Modifier la disposition du tableau de bord

Configurer la disposition de vos paramètresConfigure your settings layout

En tant que générateur, vous pouvez également configurer la vue de l’opérateur des paramètres d’appareil.As a builder, you can also configure the operator's view of the device settings. Un opérateur utilise la page des paramètres de l’appareil pour configurer un appareil.An operator uses the device settings page to configure a device. Par exemple, un opérateur utilise la page des paramètres pour définir la température cible du réfrigérateur.For example, an operator uses the settings page to set the target temperature for the refrigerator.

  1. Pour modifier la disposition des paramètres de votre climatiseur raccordé, choisissez Paramètres :To edit the settings layout for your connected air conditioner, choose Settings:

    Page Paramètres

  2. Vous pouvez déplacer et redimensionner les vignettes de paramètres :You can move and resize the settings tiles:

    Modifier la disposition des paramètres

Note

En mode Création, vous ne pouvez pas modifier les valeurs des paramètres.In Design Mode, you can't edit the values of the settings.

Configurer la disposition de vos propriétésConfigure your properties layout

En plus du tableau de bord et des paramètres, vous pouvez également configurer la vue de l’opérateur des propriétés de l’appareil.In addition to the dashboard and settings, you can also configure the operator's view of the device properties. Un opérateur utilise la page des propriétés de l’appareil pour gérer les métadonnées de l’appareil.An operator uses the device properties page to manage device metadata. Par exemple, un opérateur utilise la page des propriétés pour afficher le numéro de série d’un appareil ou mettre à jour les informations de contact du fabricant.For example, an operator uses the properties page to view a device serial number or update contact details for the manufacturer.

  1. Pour modifier la disposition des propriétés de votre climatiseur raccordé, choisissez Propriétés :To edit the properties layout for your connected air conditioner, choose Properties:

    Page Propriétés

  2. Vous pouvez déplacer et redimensionner les champs de propriétés :You can move and resize the properties fields:

    Modifier la mise en page des propriétés

Note

En mode Création, vous ne pouvez pas modifier les valeurs des propriétés.In Design Mode, you can't edit the values of the properties.

Afficher un aperçu du climatiseur raccordé en tant qu’opérateurPreview the connected air conditioner device as an operator

En mode Création, vous pouvez personnaliser les pages du tableau de bord, des paramètres et des propriétés pour un opérateur.In Design Mode, you can customize the dashboard, settings, and properties pages for an operator. Si vous quittez le mode Création, vous pouvez afficher l’application en tant qu’opérateur.If you switch Design Mode off, you can view the application as an operator.

  1. Pour afficher votre climatiseur raccordé en tant qu’opérateur, vous devez quitter le mode Création.To view your connected air conditioner device as an operator, you need to switch Design Mode off. Pour quitter le mode Création, désactivez le mode Création en haut à droite de la page.To switch Design Mode off, toggle off the Design Mode on the top right of the page.

  2. Pour mettre à jour le numéro de série de cet appareil, modifiez la valeur dans la vignette du numéro de série et choisissez Enregistrer :To update the serial number of this device, edit the value in the serial number tile and choose Save:

    Modifier une valeur de propriété

  3. Pour envoyer un paramètre à votre climatiseur raccordé, choisissez Paramètres, modifiez une valeur de paramètre dans une vignette, puis choisissez Mettre à jour :To send a setting to your connected air conditioner, choose Settings, change a setting value in a tile, and choose Update:

    Envoyer un paramètre à l’appareil

    Lorsque l’appareil accuse réception de la nouvelle valeur de paramètre, le paramètre s’affiche comme étant synchronisés sur la vignette.When the device acknowledges the new setting value, the setting shows as synced on the tile.

  4. En tant qu’opérateur, vous pouvez afficher le tableau de bord de l’appareil tel qu’il est configuré par le générateur :As an operator, you can view the device dashboard as configured by the builder:

    Vue de l’opérateur du tableau de bord de l’appareil

Configurer la page d’accueil par défautConfigure the default home page

Lorsqu’un générateur ou un opérateur se connecte à une application Azure IoT Central, il voit une page d’accueil.When a builder or operator signs in to an Azure IoT Central application, they see a home page. En tant que générateur, vous pouvez configurer le contenu de cette page d’accueil afin d’inclure le contenu le plus utile et pertinent pour un opérateur.As a builder, you can configure the content of this home page to include the most useful and relevant content for an operator.

  1. Pour personnaliser la page d’accueil par défaut, accédez à la page Accueil et passez en mode Création, en haut à droite de la page.To customize the default home page, navigate to the Home page and switch Design Mode on, on the top right of the page. Lors de l’activation du mode Création, un panneau glisse depuis la droite et présente une liste d’objets que vous pouvez ajouter à votre page d’accueil.Upon turning on Design Mode, a panel will slide out from the right with a list of objects you can add to your Homepage.

    Page Générateur d’applications

  2. Pour personnaliser la page d’accueil, ajoutez des vignettes à partir de la bibliothèque.To customize the home page, add tiles from the Library. Choisissez Link (Lier) et ajoutez les détails sur le site web de votre organisation.Choose Link, and add details of your organization's web site. Puis choisissez Enregistrer :Then choose Save:

    Ajouter un lien vers la page d'accueil

    Note

    Vous pouvez également ajouter des liens vers des pages de votre application Azure IoT Central.You can also add links to pages within your Azure IoT Central application. Par exemple, vous pouvez ajouter un lien vers le tableau de bord d’un appareil ou une page de paramètres.For example, you could add a link to a device dashboard or settings page.

  3. Si vous le souhaitez, choisissez Image et charger une image à afficher sur votre page d’accueil.Optionally, choose Image and upload an image to display on your home page. Une image peut inclure une URL à laquelle vous pouvez accéder lorsque vous cliquez dessus :An image can have a URL to which you navigate when you click on it:

    Ajouter une image à la page d’accueil

    Pour en savoir plus, consultez Préparer et charger des images dans votre application Azure IoT Central.To learn more, see How to prepare and upload images to your Azure IoT Central application.

Afficher un aperçu de la page d’accueil par défaut en tant qu’opérateurPreview the default home page as an operator

Pour afficher un aperçu de la page d’accueil en tant qu’opérateur, quittez le mode Création en haut à droite de la page :To preview the home page as an operator, switch Design Mode off on the top right of the page:

Activer/désactiver le mode Création

Vous pouvez cliquer sur le lien et des vignettes d’image pour accéder aux URL que vous avez définies en tant que générateur.You can click on the link and image tiles to navigate to the URLs you set as a builder.

Étapes suivantesNext steps

Dans ce didacticiel, vous avez appris à personnaliser la vue de l’opérateur de l’application.In this tutorial, you learned how to customize the operator's view of the application.

  • Configurer le tableau de bord de votre appareilConfigure your device dashboard
  • Configurer la disposition des paramètres de votre appareilConfigure your device settings layout
  • Configurer la disposition des propriétés de votre appareilConfigure your device properties layout
  • Afficher un aperçu de l’appareil en tant qu’opérateurPreview the device as an operator
  • Configurer votre page d’accueil par défautConfigure your default home page
  • Afficher un aperçu de la page d’accueil par défaut en tant qu’opérateurPreview the default home page as an operator

Maintenant que vous avez appris à personnaliser la vue de l’opérateur de l’application, les étapes suivantes suggérées consistent à :Now that you have learned how to customize the operator's view of the application, the suggested next steps are: