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

  • Artigo

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

Neste tutorial, você aprenderá como:

  • Personalizar blocos de imagem no painel
  • Organizar blocos para modificar o layout
  • Adicionar blocos de telemetria para exibir condições
  • Adicionar blocos de propriedade para exibir detalhes do dispositivo
  • Adicionar blocos de comando para executar comandos

Pré-requisitos

Antes de começar, conclua o tutorial Criar um aplicativo de análise na loja no Azure IoT Central.

Alterar o nome do painel

Depois de criar seu aplicativo de monitoramento de condições, você pode editar seu painel padrão. Você também pode criar mais painéis de controle.

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

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

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

  3. Selecione Configurações do painel, insira um nome para o seu painel e selecione Salvar.

Captura de tela mostrando o painel do aplicativo de análise na loja.

Personalizar blocos de imagem no painel

Um painel de aplicativo do Azure IoT Central é formado por 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 arrasta, solta e redimensiona blocos para personalizar um layout de painel.

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

  • Os blocos de imagem contêm imagens e você pode adicionar uma URL para permitir que os usuários cliquem na imagem.
  • Os blocos de rótulo exibem texto sem formatação.
  • Os blocos de markdown contêm conteúdo formatado e permitem definir uma imagem, uma URL, um título e um código de markdown que é renderizado como HTML.
  • Os blocos de telemetria, propriedade ou comando exibem dados específicos do dispositivo.

Nesta seção, você aprenderá como personalizar blocos de imagem no painel.

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

  1. Escolha 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 aparece quando um usuário passa o cursor do mouse sobre a imagem.

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

  5. Selecione Atualizar.

    Captura de tela mostrando o bloco da imagem de marca do painel do aplicativo de análise na loja.

  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 abrangidas pelo sensor na loja:

  1. Selecione Configurar no bloco de imagem que exibe o mapa de zona padrão da loja.

  2. Escolha Imagem e carregue uma imagem personalizada de um mapa de zona da loja.

  3. Selecione Atualizar.

Captura de tela mostrando o bloco de mapa da loja do painel do aplicativo de análise na loja.

O mapa da loja Contoso de exemplo mostra quatro zonas: duas zonas de finalização de compras, uma zona de vestuário e cuidados pessoais e uma zona de mercearia e rotisseria.

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

Organizar blocos para modificar o layout

A reorganização dos blocos para a criação de uma exibição útil é uma etapa fundamental da personalização de um painel. Os operadores de aplicativos usam o painel para visualizar a telemetria do dispositivo, gerenciar dispositivos e monitorar condições em uma loja.

O Azure IoT Central simplifica a tarefa do construtor de aplicativos de criação de um painel. O modo de edição do painel permite adicionar, mover, redimensionar e excluir blocos rapidamente.

O modelo de aplicativo Análise na loja – finalizar compra também simplifica a tarefa de criação de 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 no aplicativo:

  1. Escolha 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 para todas as zonas
    • Visitar 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
    • Check-out 3: todos os três blocos associados a ele

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

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

Para reorganizar os blocos 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. Escolha o bloco Firmware do termostato e arraste-o para a direita do bloco de bateria Termostato.

  4. Clique em Salvar.

  5. Exiba as alterações do layout.

Captura de tela mostrando o layout do painel do aplicativo de análise na loja.

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, escolha um modelo e uma instância do dispositivo e escolha a telemetria específica do dispositivo para exibir 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 mostrar a telemetria do ambiente dos sensores RuuviTag adicionados no tutorial Como criar um aplicativo de análise na loja no Azure IoT Central.

Para adicionar blocos para exibir dados sobre o ambiente a partir dos sensores RuuviTag:

  1. Selecione Editar.

  2. Na lista Modelo de dispositivo, selecione RuuviTag.

  3. Escolha uma Instância do dispositivo de um dos dois sensores RuuviTag. No exemplo da loja da Contoso, escolhaZona 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. Um novo bloco é mostrado para exibir a telemetria combinada da umidade e temperatura do sensor escolhido.

  6. Selecione Configurar no novo bloco para o sensor RuuviTag.

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

  8. Selecione Atualizar.

  9. Repita as etapas de um a oito para criar um bloco para a segunda instância do sensor. Defina o Título como Ambiente da Zona 2 e, em seguida, escolha Atualizar configuração.

  10. Arraste o bloco intitulado Ambiente da Zona 2para abaixo do bloco Firmware do termostato.

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

  12. Clique em Salvar. O painel exibe a telemetria da zona nos dois novos blocos.

Captura de tela mostrando os blocos RuuviTag do painel do aplicativo de análise na loja.

Para editar o bloco Tráfego de pessoas para exibir a telemetria para apenas duas zonas de finalização de compras:

  1. Selecione Editar.

  2. No blocoTráfego de pessoas, selecioneEditar.

  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.

Captura de tela mostrando o bloco

Adicionar blocos de comando para executar comandos

Os operadores de aplicativos também usam o painel gerenciar dispositivos por meio da execução de comandos. Você pode adicionar ao painel de controle blocos de comando que executarão comandos predefinidos em um dispositivo. Nesta seção, você adicionará um bloco de comando para permitir que os operadores reinicializem o gateway Rigado.

Para adicionar um bloco de comando para reinicializar o gateway:

  1. Selecione Editar.

  2. Na lista Modelo de dispositivo, selecione C500. Este é o modelo para o gateway Rigado C500.

  3. Escolha a instância do gateway em Instância do dispositivo.

  4. Selecione o comando Reinicializar.

  5. Selecione Adicionar bloco.

  6. Clique em Salvar.

  7. Exiba seu painel completo da Contoso.

    Captura de tela mostrando o painel do aplicativo de análise na loja completo.

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

Limpar os recursos

Se você não pretende concluir outros guias de início rápido nem tutoriais do IoT Central, pode excluir seu aplicativo do IoT Central:

  1. No aplicativo IoT Central, navegue até Aplicativo > Gerenciamento.
  2. Selecione Excluir e confirme a sua ação.

Próxima etapa

Exportar dados e visualizar insights