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 aplicativos podem usar o painel personalizado para executar o aplicativo e gerenciar os dispositivos conectados.
Neste tutorial, irá aprender a:
- 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.
A primeira etapa na personalização do painel do aplicativo é alterar o nome:
Vá para a página Meus aplicativos do Azure IoT Central.
Abra o aplicativo de monitoramento de condições que você criou.
Selecione Configurações do painel, insira um nome para o painel e 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 exibir 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.
Existem vários tipos de blocos para exibir conteúdo:
- Os blocos de imagem contêm imagens e você pode adicionar um 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 definir uma imagem, uma URL, um título e um código Markdown que é renderizado como HTML.
- A telemetria, a propriedade ou os blocos de 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:
Selecione Editar na barra de ferramentas do painel.
Selecione Editar no bloco de imagem que exibe a imagem da marca Northwind Traders.
Altere o título. O título aparece quando você passa o mouse sobre a imagem.
Selecione Imagem. Abre-se uma janela onde pode carregar uma imagem personalizada ou, opcionalmente, especificar um URL para a imagem.
Selecione Atualizar.
Opcionalmente, no bloco Documentação , selecione Configurar e 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:
No bloco de imagem que exibe o mapa de zona de armazenamento padrão, selecione Configurar.
Selecione Imagem e, em seguida, carregue uma imagem personalizada de um mapa de zona da loja.
Selecione Atualizar.
O mapa de loja da Contoso de exemplo mostra quatro zonas: duas zonas de checkout, uma zona para vestuário e cuidados pessoais e uma zona para mantimentos e delicatessen.
Neste tutorial, você associa sensores a essas zonas para fornecer telemetria.
Organizar blocos 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 aplicativos usam o painel para visualizar a telemetria do dispositivo, gerenciar dispositivos e monitorar as condições em uma loja.
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 de análise na loja - checkout também simplifica a tarefa de criar um painel. O modelo fornece um layout de painel de trabalho, com sensores conectados e blocos que exibem contagens de linhas de checkout e condições ambientais.
Nesta seção, você reorganiza os blocos do painel no modelo de aplicativo de análise na loja - check-out para criar um layout personalizado.
Para remover blocos que você não planeja usar em seu aplicativo:
Selecione Editar na barra de ferramentas do painel.
Para cada um dos seguintes blocos, que o painel da loja Contoso não usa, selecione as reticências (...) e selecione Excluir:
- Voltar a todas as zonas
- Visite o painel da loja
- Zona de check-out de aquecimento
- Zona de checkout de arrefecimento
- Configurações do sensor de ocupação
- Configurações do termostato
- Tempo de espera
- Condições ambientais
- Checkout 3: Todos os três blocos associados a ele
Selecione Guardar. 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 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 posteriormente.
Para reorganizar os blocos restantes:
Selecione Editar.
Arraste o bloco Firmware de ocupação para a direita do bloco Bateria de ocupação .
Arraste o bloco do firmware do termostato para a direita do bloco da bateria do termostato.
Selecione Guardar.
Veja 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 de dispositivo e, em seguida, selecione telemetria específica do dispositivo para exibir no bloco. O modelo de aplicativo de análise na loja - checkout inclui vários blocos de telemetria no painel. Os quatro blocos nas duas zonas de checkout exibem telemetria do sensor de ocupação simulado. O bloco de tráfego Pessoas mostra as contagens nas duas zonas de checkout.
Nesta seção, você adiciona mais dois blocos de telemetria para exibir a telemetria ambiental dos sensores RuuviTag adicionados no tutorial Criar um aplicativo de análise na loja no Azure IoT Central .
Para adicionar blocos para exibir dados ambientais dos sensores RuuviTag:
Selecione Editar.
Na lista Modelo de dispositivo, selecione RuuviTag.
Selecione uma instância de dispositivo de um dos dois sensores RuuviTag. No exemplo de armazenamento da Contoso, selecione Zona 1 Ruuvi para criar um bloco de telemetria para a Zona 1.
Na lista Telemetria, selecione Humidade relativa e temperatura, os itens de telemetria que são exibidos para cada zona no bloco.
Selecione Adicionar bloco. Este novo mosaico apresenta a telemetria combinada de humidade e temperatura para o sensor selecionado.
No novo bloco do sensor RuuviTag, selecione Configurar.
Altere o Título para o ambiente da Zona 1.
Selecione Atualizar.
Repita as etapas 1 a 8 para criar um bloco para a segunda instância do sensor. Em Título, insira Ambiente de Zona 2 e selecione Atualizar configuração.
Arraste o mosaico intitulado Ambiente da Zona 2 para baixo do mosaico do firmware do termostato.
Arraste o bloco intitulado Ambiente de Zona 1 para abaixo do bloco de tráfego Pessoas.
Selecione Guardar. O painel exibe a telemetria de zona nos dois novos blocos.
Para editar o bloco Tráfego de pessoas para mostrar a telemetria de apenas duas zonas de check-out:
Selecione Editar.
No bloco Tráfego de pessoas, selecione Editar.
Remova a telemetria count3 .
Selecione Atualizar.
Selecione Guardar. O painel de instrumentos atualizado conta apenas para as suas duas zonas de checkout, que se baseiam no sensor de ocupação simulado.
Adicionar blocos de comando para executar comandos
Os operadores de aplicativos também usam o painel para gerenciar dispositivos executando comandos. Você pode adicionar blocos de comando ao painel que executam comandos predefinidos em um dispositivo. Nesta seção, você adiciona um bloco de comando para permitir que os operadores reiniciem o gateway Rigado.
Para adicionar um bloco de comando para reinicializar o gateway:
Selecione Editar.
Na lista Modelo de dispositivo, selecione C500. É o modelo para o gateway Rigado C500.
Selecione a instância do gateway em Device instance.
Selecione o comando Reiniciar .
Selecione Adicionar bloco.
Selecione Guardar.
Exiba seu painel da Contoso concluído.
Opcionalmente, selecione o bloco Reinicializar para executar o comando de reinicialização no gateway.
Clean up resources (Limpar recursos)
Se você não planeja concluir mais tutoriais ou inícios rápidos do IoT Central, pode excluir seu aplicativo do IoT Central:
- Em seu aplicativo IoT Central, navegue até Gerenciamento de Aplicativos>.
- Selecione Excluir e confirme sua ação.