Tutorial: Personalizar o painel e gerenciar dispositivos no Azure IoT Central

Neste tutorial, você aprenderá a personalizar o painel em seu aplicativo de análise na loja do Azure IoT Central. Os operadores de aplicativo podem usar o painel personalizado para executar o aplicativo e gerenciar os dispositivos anexados.

Neste tutorial, você aprenderá como:

Pré-requisitos

Antes de começar, conclua o tutorial Criar e implantar um modelo de aplicativo de análise na loja .

Alterar o nome do painel

Depois de criar seu aplicativo de monitoramento de condição, você pode editar seu painel padrão. Você também pode criar mais dashboards.

A primeira etapa na personalização do painel do aplicativo é alterar o nome:

1. Vá para a página Meus aplicativos do Azure IoT Central .

2. Abra o aplicativo de monitoramento de condição que você criou.

3. Selecione as configurações do Painel, insira um nome para o painel e, em seguida, selecione Salvar.

Personalizar blocos de imagem no painel

Um painel de aplicativo do Azure IoT Central consiste em um ou mais blocos. Um bloco é um contêiner retangular para exibição de conteúdo em um painel. Você associa vários tipos de conteúdo a blocos e pode arrastar, soltar e redimensionar blocos para personalizar o layout do painel.

Há vários tipos de blocos para exibir conteúdo:

• Os blocos de imagem contêm imagens e você pode adicionar uma URL que permite selecionar a imagem.
• Os blocos de rótulo exibem texto sem formatação.
• Os blocos markdown contêm conteúdo formatado e permitem que você defina uma imagem, uma URL, um título e um código Markdown que é renderizado como HTML.
• Os blocos de telemetria, propriedade ou comando exibem dados específicos do dispositivo.

Nesta seção, você personaliza blocos de imagem no painel.

Para personalizar o bloco de imagem que exibe uma imagem de marca no painel:

1. Selecione Editar na barra de ferramentas do painel.

2. Selecione Editar no bloco de imagem que exibe a imagem da marca Northwind Traders.

3. Altere o Título. O título é exibido quando você passa o mouse sobre a imagem.

4. Selecione Imagem. Uma janela é aberta onde você pode carregar uma imagem personalizada ou, opcionalmente, especificar uma URL para a imagem.

5. Selecione Atualizar.

   

6. Opcionalmente, no bloco Documentação , selecione Configurar e, em seguida, especifique uma URL vinculada ao conteúdo de suporte.

Para personalizar o bloco de imagem que exibe um mapa das zonas do sensor na loja:

1. No bloco de imagem que exibe o mapa de zona do repositório padrão, selecione Configurar.

2. Selecione Imagem e carregue uma imagem personalizada de um mapa de zona do repositório.

3. Selecione Atualizar.

O exemplo de mapa da loja Contoso mostra quatro zonas: duas zonas de checkout, uma zona para vestuário e cuidados pessoais, e uma zona para mantimentos e deli.

Neste tutorial, você associa sensores a essas zonas para fornecer telemetria.

Organizar pastilhas para modificar o layout

Uma etapa fundamental na personalização de um painel é reorganizar os blocos para criar uma exibição útil. Os operadores de aplicativo usam o painel para visualizar a telemetria do dispositivo, gerenciar dispositivos e monitorar condições em um repositório.

O Azure IoT Central simplifica a tarefa do construtor de aplicativos de criar um painel. Usando o modo de edição do painel, você pode adicionar, mover, redimensionar e excluir blocos rapidamente.

O modelo de aplicativo análise na loja - checkout também simplifica a tarefa de criar um painel. Ele fornece um layout de painel funcional, com sensores conectados e blocos que exibem as contagens das linhas de finalização de compras e as condições do ambiente.

Nesta seção, você reorganizará o painel no modelo de aplicativo Análise na loja - finalizar compra para criar um layout personalizado.

Para remover blocos que você não planeja usar em seu aplicativo:

1. Selecione Editar na barra de ferramentas do painel.

2. Para cada um dos seguintes blocos, que o painel do repositório da Contoso não usa, selecione as reticências (...) e, em seguida, selecione Excluir:

   • Voltar a todas as zonas
   • Acessar o painel da loja
   • Aquecer zona de check-out
   • Esfriar zona de check-out
   • Configurações do sensor de ocupação
   • Configurações de termostato
   • Tempo de espera
   • Condições de ambiente
   • Checkout 3: Todos os três blocos associados a ele

3. Clique em Salvar. A remoção de blocos não utilizados libera espaço na página de edição e simplifica o modo de exibição do painel para operadores.

Depois de remover os blocos não utilizados, reorganize os blocos restantes para criar um layout organizado. O novo layout inclui espaço para blocos que você adiciona mais tarde.

Para reorganizar os tiles restantes:

1. Selecione Editar.

2. Escolha o bloco Firmware de ocupação e arraste-o para a direita do bloco de bateria Ocupação.

3. Arraste o bloco de firmware do termostato para a direita do bloco da bateria do termostato.

4. Clique em Salvar.

5. Exiba as alterações de layout.

Adicionar blocos de telemetria para exibir condições

Depois de personalizar o layout do painel, você estará pronto para adicionar blocos para exibir a telemetria. Para criar um bloco de telemetria, selecione um modelo de dispositivo e uma instância do dispositivo e selecione a telemetria específica do dispositivo a ser exibida no bloco. O modelo de aplicativo Análise na loja - finalizar compra inclui vários blocos de telemetria no painel. Os quatro blocos nas duas zonas de finalização de comprar exibem a telemetria do sensor de ocupação simulada. O bloco Tráfego de pessoas mostra contagens nas duas zonas de finalização de compras.

Nesta seção, você adicionará mais dois blocos de telemetria para exibir a telemetria ambiental dos sensores RuuviTag adicionados no tutorial Criar e implantar um modelo de aplicativo de análise na loja .

Para adicionar blocos para exibir dados ambientais dos sensores RuuviTag:

1. Selecione Editar.

2. Na lista de modelos de dispositivo , selecione RuuviTag.

3. Selecione uma instância de dispositivo de um dos dois sensores RuuviTag. No exemplo de repositório Contoso, selecione Zona 1 Ruuvi para criar um bloco de telemetria para a Zona 1.

4. Na lista Telemetria , selecione Umidade relativa e Temperatura, os itens de telemetria exibidos para cada zona no bloco.

5. Selecione Adicionar bloco. Este novo bloco exibe telemetria combinada de umidade e temperatura para o sensor selecionado.

6. No novo bloco do sensor RuuviTag, selecione Configurar.

7. Altere o Título para ambiente da Zona 1.

8. Selecione Atualizar.

9. Repita as etapas de 1 a 8 para criar um bloco para a segunda instância do sensor. Para Título, insira o ambiente da Zona 2 e selecione Atualizar configuração.

10. Arraste o azulejo intitulado Ambiente de Zona 2 para debaixo do azulejo de firmware do Termostato.

11. Arraste o bloco intitulado Ambiente de Zona 1 para abaixo do bloco de tráfego de pessoas.

12. Clique em Salvar. O painel exibe a telemetria de zona nos dois azulejos novos.

Para editar o bloco de tráfego de pessoas para mostrar telemetria para apenas duas zonas de checkout:

1. Selecione Editar.

2. No bloco Tráfego de pessoas, selecione Editar.

3. Remova a telemetria count3.

4. Selecione Atualizar.

5. Clique em Salvar. O painel atualizado exibe contagens apenas para as duas zonas de finalização de compras, que se baseiam no sensor de ocupação simulada.

Adicionar blocos de comando para executar comandos

Os operadores de aplicativo também usam o painel para gerenciar dispositivos executando comandos. Você pode adicionar blocos de comando ao painel que executa comandos predefinidos em um dispositivo. Nesta seção, você adicionará um bloco de comando para permitir que os operadores reinicializem o gateway do Rigado.

Para adicionar um bloco de comando para reinicializar o gateway:

1. Selecione Editar.

2. Na lista de modelos de dispositivo , selecione C500. É o modelo para o gateway do Rigado C500.

3. Selecione a instância do gateway na instância do dispositivo.

4. Selecione o comando Reinicializar .

5. Selecione Adicionar bloco.

6. Clique em Salvar.

7. Exiba seu painel completo da Contoso.

   

8. Opcionalmente, selecione o bloco Reinicializar para executar o comando de reinicialização no gateway.

Limpar os recursos

Se você não planeja concluir mais guias de início rápido ou tutoriais do IoT Central, poderá excluir seu aplicativo do IoT Central:

1. Em seu aplicativo do IoT Central, navegue até o Gerenciamento de Aplicativos>.
2. Selecione Excluir e confirme sua ação.

Próxima etapa