Esercitazione: Personalizzare il dashboard e gestire i dispositivi in Azure IoT Central

Questa esercitazione illustra come personalizzare il dashboard nell'applicazione di analisi in punti vendita di Azure IoT Central. Gli operatori potranno usare il dashboard personalizzato per eseguire l'applicazione e gestire i dispositivi collegati.

In questa esercitazione apprenderai a:

  • Personalizzare i riquadri di immagine nel dashboard
  • Disporre i riquadri per modificare il layout
  • Aggiungere riquadri di telemetria per visualizzare le condizioni
  • Aggiungere riquadri di proprietà per visualizzare i dettagli dei dispositivi
  • Aggiungere riquadri di comando per eseguire comandi

Prerequisiti

Prima di iniziare, completare l'esercitazione Creare un'applicazione di analisi nell'archivio in Azure IoT Central .

Modificare il nome del dashboard

Dopo aver creato l'applicazione di monitoraggio delle condizioni, è possibile modificare il dashboard predefinito. È anche possibile creare altri dashboard.

Il primo passaggio per personalizzare il dashboard dell'applicazione consiste nel modificare il nome:

  1. Passare alla pagina App personali di Azure IoT Central.

  2. Aprire l'applicazione di monitoraggio delle condizioni creata.

  3. Selezionare Impostazioni dashboard, immettere un nome per il dashboard e quindi selezionare Salva.

Screenshot del dashboard dell'applicazione di analisi in-store.

Personalizzare i riquadri di immagine nel dashboard

Il dashboard di un'applicazione di Azure IoT Central è costituito da uno o più riquadri. Un riquadro è un'area rettangolare per la visualizzazione del contenuto di un dashboard. È possibile associare vari tipi di contenuto ai riquadri ed è possibile trascinare, rilasciare e ridimensionare i riquadri per personalizzare il layout del dashboard.

Esistono diversi tipi di riquadri per la visualizzazione del contenuto:

  • I riquadri immagine contengono immagini ed è possibile aggiungere un URL che consente di selezionare l'immagine.
  • I riquadri etichetta visualizzano testo normale.
  • I riquadri Markdown contengono contenuto formattato e consentono di impostare un'immagine, un URL, un titolo e un codice Markdown che esegue il rendering come HTML.
  • I riquadri di telemetria, proprietà o comando visualizzano dati specifici del dispositivo.

In questa sezione si personalizzano i riquadri delle immagini nel dashboard.

Per personalizzare il riquadro che visualizza un'immagine di marchio nel dashboard:

  1. Selezionare Edit (Modifica) sulla barra degli strumenti del dashboard.

  2. Selezionare Modifica nel riquadro dell'immagine che visualizza l'immagine del marchio Northwind Traders.

  3. Modificare il valore di Title (Titolo). Il titolo viene visualizzato quando si passa il puntatore del mouse sull'immagine.

  4. Seleziona Immagine. Viene visualizzata una finestra in cui è possibile caricare un'immagine personalizzata o, facoltativamente, specificare un URL per l'immagine.

  5. Selezionare Aggiorna.

    Screenshot che mostra il riquadro immagine del marchio del marchio del dashboard dell'applicazione di analisi nello store.

  6. Facoltativamente, nel riquadro Documentazione selezionare Configura e quindi specificare un URL che collega al contenuto di supporto.

Per personalizzare il riquadro di immagine che visualizza una mappa delle zone dei sensori nel punto vendita:

  1. Nel riquadro immagine in cui viene visualizzata la mappa della zona di archiviazione predefinita selezionare Configura.

  2. Selezionare Immagine e quindi caricare un'immagine personalizzata di una mappa della zona di archiviazione.

  3. Selezionare Aggiorna.

Screenshot che mostra il riquadro della mappa dell'archivio dell'applicazione di analisi nello store.

La mappa di esempio del punto vendita Contoso mostra quattro zone: due zone delle casse, una zona per l'abbigliamento e i prodotti per la cura personale e una zona per i generi alimentari e la gastronomia.

In questa esercitazione si associano sensori a queste zone per fornire dati di telemetria.

Disporre i riquadri per modificare il layout

Un passaggio importante nella personalizzazione di un dashboard consiste nel ridisporre i riquadri in modo da configurare una visualizzazione utile. Gli operatori dell'applicazione usano il dashboard per visualizzare i dati di telemetria dei dispositivi, gestire i dispositivi e monitorare le condizioni ambientali in un punto vendita.

Azure IoT Central facilita il compito dello sviluppatore semplificando le attività da eseguire per creare un dashboard. Usando la modalità di modifica del dashboard, è possibile aggiungere, spostare, ridimensionare ed eliminare riquadri rapidamente.

La creazione del dashboard è ulteriormente facilitata dal modello di applicazione In-store analytics - checkout per il monitoraggio delle casse nel punto vendita. Il modello fornisce un layout del dashboard funzionante, con sensori connessi e riquadri che visualizzano i conteggi delle righe di estrazione e le condizioni ambientali.

In questa sezione si riorganizzerà i riquadri del dashboard nel modello di applicazione Analisi punti vendita - Checkout per creare un layout personalizzato.

Per rimuovere i riquadri che non si prevede di usare nell'applicazione:

  1. Selezionare Edit (Modifica) sulla barra degli strumenti del dashboard.

  2. Per ognuno dei riquadri seguenti, che il dashboard dell'archivio Contoso non usa, selezionare i puntini di sospensione (...) e quindi selezionare Elimina:

    • Torna a tutte le zone
    • Visita il dashboard dello Store
    • Area di pagamento per il riscaldamento
    • Area di pagamento ad accesso sporadico
    • Impostazioni del sensore di occupazione
    • Impostazioni termostato
    • Tempo di attesa
    • Condizioni dell'ambiente
    • Checkout 3: Tutti e tre i riquadri associati
  3. Seleziona Salva. La rimozione di riquadri inutilizzati libera spazio nella pagina di modifica e semplifica la visualizzazione dashboard per gli operatori.

Dopo aver rimosso i riquadri inutilizzati, riorganizzare i riquadri rimanenti per creare un layout organizzato. Il nuovo layout include spazio per i riquadri aggiunti in un secondo momento.

Per ridisporre i riquadri rimanenti:

  1. Seleziona Modifica

  2. Trascinare il riquadro Occupancy firmware (Firmware occupancy) a destra del riquadro Occupancy battery (Batteria occupancy ).

  3. Trascinare il riquadro firmware Thermostat a destra del riquadro Della batteria Termostato .

  4. Seleziona Salva.

  5. Visualizzare le modifiche apportate al layout.

Screenshot che mostra il layout del dashboard dell'applicazione di analisi nell'archivio.

Aggiungere riquadri di telemetria per visualizzare le condizioni

Dopo aver personalizzato il layout del dashboard, è possibile aggiungere riquadri per visualizzare i dati di telemetria. Per creare un riquadro di telemetria, selezionare un modello di dispositivo e un'istanza del dispositivo, quindi selezionare i dati di telemetria specifici del dispositivo da visualizzare nel riquadro. Il modello di applicazione Analisi punti vendita - Checkout include diversi riquadri di telemetria nel dashboard. I quattro riquadri nelle due zone delle casse visualizzano i dati di telemetria restituiti dal sensore di presenza simulato. Il riquadro People traffic mostra i valori relativi alle due zone delle casse.

In questa sezione si aggiungono altri due riquadri di telemetria per visualizzare i dati di telemetria ambientale dai sensori RuuviTag aggiunti nell'esercitazione Creare un'applicazione di analisi nei punti vendita in Azure IoT Central .

Per aggiungere riquadri per visualizzare i dati delle condizioni ambientali restituiti dai sensori RuuviTag:

  1. Seleziona Modifica

  2. Nell'elenco Modello di dispositivo selezionare RuuviTag.

  3. Selezionare uno dei due sensori RuuviTag in Device instance (Istanza del dispositivo). Nell'esempio di archivio Contoso selezionare Zona 1 Ruuvi per creare un riquadro di telemetria per La zona 1.

  4. Nell'elenco Telemetria selezionare Umidità relativa e Temperatura, gli elementi di telemetria visualizzati per ogni zona nel riquadro.

  5. Selezionare Aggiungi riquadro. Questo nuovo riquadro visualizza i dati di telemetria combinati di umidità e temperatura per il sensore selezionato.

  6. Nel nuovo riquadro per il sensore RuuviTag selezionare Configura.

  7. Modificare il valore di Title (Titolo) in Zona 1 environment.

  8. Selezionare Aggiorna.

  9. Ripetere i passaggi da 1 a 8 per creare un riquadro per la seconda istanza del sensore. Per Titolo immettere Area 2 ambiente e quindi selezionare Aggiorna configurazione.

  10. Trascinare il riquadro denominato Zona 2 environment (Ambiente zona 2) al di sotto del riquadro Firmware Thermostat .

  11. Trascinare il riquadro denominato Area 1 ambiente sotto il riquadro del traffico Persone.

  12. Seleziona Salva. Il dashboard visualizzerà i dati di telemetria delle zone nei due nuovi riquadri.

Screenshot che mostra i riquadri RuuviTag del dashboard dell'applicazione di analisi nei punti vendita.

Per modificare il riquadro People traffic in modo da mostrare i dati di telemetria solo per le due zone delle casse:

  1. Seleziona Modifica

  2. Nel riquadro Persone traffico selezionare Modifica.

  3. Rimuovere i dati di telemetria count3 .

  4. Selezionare Aggiorna.

  5. Seleziona Salva. Il dashboard aggiornato visualizzerà i conteggi solo per le due zone delle casse specificate, in base ai dati restituiti dal sensore di presenza simulato.

Screenshot che mostra il riquadro

Aggiungere riquadri di comando per eseguire comandi

Gli operatori dell'applicazione usano il dashboard anche per gestire i dispositivi eseguendo comandi. È possibile aggiungere riquadri dei comandi al dashboard che eseguono comandi predefiniti in un dispositivo. In questa sezione si aggiungerà un riquadro di comando per consentire agli operatori di riavviare il gateway Rigado.

Per aggiungere un riquadro di comando per riavviare il gateway:

  1. Seleziona Modifica

  2. Nell'elenco Modello di dispositivo selezionare C500. È il modello per il gateway Rigado C500.

  3. Selezionare l'istanza del gateway in Device instance (Istanza del dispositivo).

  4. Selezionare il comando Riavvia .

  5. Selezionare Aggiungi riquadro.

  6. Seleziona Salva.

  7. Visualizzare il dashboard di Contoso completato.

    Screenshot che mostra il dashboard dell'applicazione di analisi nell'archivio completato.

  8. Facoltativamente, selezionare il riquadro Reboot per eseguire il comando di riavvio sul gateway.

Pulire le risorse

Se non si prevede di completare altre guide introduttive o esercitazioni di IoT Central, è possibile eliminare l'applicazione IoT Central:

  1. Nell'applicazione IoT Central passare a Gestione applicazioni>.
  2. Selezionare Elimina e quindi confermare l'azione.

Passaggio successivo