Instalação e utilização básica
Para instalar, vá no
Gerenciador de Paletas do Node-RED, depois em Install e instale o módulo @flowfuse/node-red-dashboard.Após concluída a instalação, note que aparece a paleta do
dashboard 2 na barra lateral esquerda (), com os nodes básicos do módulo.
Paleta de nodes básicos disponibilizados pelo módulo flowfuse dashboard.
Dica
Para se aprofundar nas funcionalidades do
Dashboard 2, recomenda-se acessar seu manual no link abaixo:Dashboard 2.0
Documentação e exemplos de uso do módulo Dashboard 2.0
Acessando o dashboard
Na paleta do Dashboard 2.0 (), a maioria dos nodes que aparecem são widgets que podem ser adicionados ao layout do dashboard.
Via de regra, os nodes de cor azul mais clara são para a entrada de dados (e.g., botões, sliders, entrada de texto, etc.) e os de tom mais escuro são para a exibição de informações (e.g., texto, gauge, som, notificação, etc.).
Ao arrastar algum destes módulos para o flow, eles são automaticamente adicionados ao layout do Dashboard.
Após esta inserção e o primeiro deploy, o dashboard já se torna acesível no path
/dashboard (e.g., http://localhost/dashboard).Exemplo 18·Criando o primeiro dashboard
Vamos criar um dashboard básico e acessá-lo pelo navegador.
Arraste para o flow os nodes
slider e gauge, ligando-os em sequência.
Note que ambos estão com o triângulo vermelho, indicando que há alguma configuração essencial que ainda não foi feita.
Para corrigir isto, abra as propriedades de cada um dos dois nodes e configure a opção
Group para [Page 1] Group 1.
Clique em
Done em ambos para salvar estas alterações e então clique em Deploy para salvar as alterações.
Então, na barra da direita do Node-RED, clique na seta para baixo e selecione a opção Dashboard 2.0 para acessar as propriedades gerais do dashboard.
Na aba que abrir, clique em
Open Dashboard para acessar o Dashboard pelo navegador.
O navegador irá abrir uma nova aba com o dashboard já em execução. Tente arrastar o slider e veja o que acontece com o gauge.
Perigo
Note que o dashboard fica automaticamente disponível em uma URI tão logo ele é criado, significando que qualquer pessoa com acesso à rede do computador que executa o Node-RED já é capaz de acessá-lo. Para proteger o dashboard, verifique a seção `HTTP Node security no conteúdo disponível [neste link](HTTP Node security)
Alterando o layout
O layout do dashboard é organizado hierarquicamente em
Páginas > Grupos > Widgets, com ilustrado na .
Na prática, cada página é uma tela do dashboard, podendo ser alterada através do menu superior-direito do dashboard; cada grupo é um conjunto de widgets que ficam posicionados próximos em uma mesma página.
Ilustração da cadeia hierárquica utilizada pelo Dashboard 2.0
Cada widget deve ser obrigatoriamente vinculado a uma
Página X - Grupo Y para ser renderizado corretamente.
Assim, logo que um novo componente de dashboard é adicionado ao flow, deve-se definir a qual Página - Grupoele pertence na opção Group em duas propriedades.Para alterar o layout do dashboard, vá no menu de propriedades do
Dashboard 2.0 na aba localizada na barra lateral direita do dashboard; passe o cursor do mouse sobre Page 1 (ou seja qual for o nome da página) para aparecer opções adicionais e clique no botão Layout editor.
O navegador abrirá um pop-up (atenção ao bloqueador de pop-ups do seu navegador) com a tela de edição de layout ().
Nela, é possível arrastar os widgets para uma posição desejada e/ou alterar os seus tamanhos.
Ao finalizar as modificações, clique no ícone de disquete verde na aba superior para salvar as alterações; irá aparecer uam janela confirmando as alterações, clique então em
Sim.
Você notará que as modificações são instantâneas e o dashboard já irá refletir o novo layout salvo.
Editor de layouts do dashboard.
Dica
Os grupos são alinhados horizontalmente na renderização no estilo
flex do CSS, o que significa que, caso não haja espaço lateral na viewport do navegador, os grupos serão então automaticamente empilhados verticalmente. Para uma experiência otimizada para dispositivos mobile, limite a largura máxima de cada grupo em até 8 blocos.Botão
O node
button cria um botão clicável no dashboard. Este componente se comporta similar ao nó input utilizado na programação dos flows ao injetaruma mensagem com payload e topic configuráveis cada vez o botão é clicado.
Parâmetros específicos principais:
Payload: Payload da mensagem que será gerada ao se clicar no botão. Note que as opções são similares à do nóinject.Topic: Nome do tópico da mensagem gerada.
Lista Dropdown
O node
dropdown cria uma lista selecionável. O componente injeta uma mensagem personalizável cada vez que um elemento da lista é selecionado.
Parâmetros específicos principais:
Placeholder: Mensagem padrão que aparece na lista quando nenhuma opção foi ainda selecionada.Options: Permite criar os elementos da lista, atribuindo a cada um um label que será exibido na lista e o payload a ser injetado.
Switch
O nó
switch cria um botão do tipo ON-OFF, com dois estados persistentes comutáveis a cada vez que o botão é clicado. O botão injeta uma mensagem cada vez que o componente é clicado no dashboard.
Parâmetros específicos principais:
On Payload: Valor do payload injetado quando o botão é comutado para a posição ON.Off Payload: Valor do payload injetado quando o botão é comutado para a posição OFF.
Button group
O node
button group permite criar um botão do tipo chave seletora entre diversas opções customizáveis.
Parâmetros específicos principais:
Options: Permite configurar todas as possíveis opções do botão, seus labels, ícone, e qual é o payload que será gerado ao clicá-lo.
Slider
O nó
slider cria um componente que injeta um valor numérico dentro de uma faixa configurável.
Parâmetros específicos principais:
Range: Faixa de valores do valor numérico injetado (min e max), bem como a resolução (step) dos números dentro desta faixa.Output: Permite configurar se os valores serão injetados continuamente à medida que o slider é alterado, ou se a injeção será realizada somente uma vez quando o mouse "soltar" o slider.
Number input
'Number input' é um node que permite inserir um valor numérico exato, também dentro de uma faixa de valores com ajuste de resolução (step). Uma mensagem é injetada cada vez que o botão de incrementar ou decrementar o valor é clicado.
Seus parâmetros principais são similares aos do node
slider.Entrada de texto
O nó
text input cria um campo de entrada digitável livre. Uma nova mensagem é injetada ao final de cada bloco de entrada digitada.
Parâmetros específicos principais:
Mode: Tipo do texto a ser inserido, comotext input,email address,password,number, etc.Delay: O tempo em milisegundos que a mensagem é injetada após o componente detectar que o usuário não está mais digitando.
Text (output)
Este nó permite apresentar uma mensagem livre na tela. Por padrão, todo o conteúdo de
msg.payload será printado na tela como uma string.
Parâmetros específicos principais:
Value format: Formatação da mensagem de entrada e como ela será exibida na tela.Layout: Disposição do label e do conteúdo da mensagem do componente renderizado.
Gauge
O nó
gauge apresenta um "mostrador" que indica o valor atual de uma variável numérica dentro de um range pré-definido. É possível configurar cores diferentes para o mostrador para diferentes faixas de valores.
Parâmetros específicos principais:
Units: Unidade do valor que está sendo apresentado na tela (e.g., Graus Celsius, m/s, etc).Range: Valores mínimo e máximo da faixa de valores apresentada pelo mostrador.Colour Gradient: Seleção das cores das três faixas de valores possíveis.Sectors: Definição dos valores das faixas intermediárias que serão considerados para alterar a cor do mostrador.
Chart
O nó
chart cria um gráfico do valor de uma variável no tempo. Note que os dados apresentados no gráfico não são persistente e portanto são perdidos todas vez que a aplicação é reiniciada a base de tempo extrapola o limite definido neste componente.
Parâmetros específicos principais:
Type: Tipo do gráficos (e.g., gráfico de linhas, de barras, pizza, radar, etc.).X-axis: Persistência dos dados no gráfico, podendo ser definido para uma faixa de tempo ou quantidade de pontos plotados.X-axis Label: Formatação do label apresntado no eixo X (e.g.,HH:mm:ss,Year-Month-Date, etc.).Y-axis: Define os valores mínimo e máximo dos valores plotados no eixo Y. Caso nada seja inserido, estes valores serão ajustados de acordo com os valores mínimo e máximo dos dados apresentados atualmente.
Saída de audio
O nó
audio out gera o som de uma voz a partir de uma string de entrada utilizando a tecnologia Text To Speech (TTS).
Parâmetros específicos principais:
TTS Voice: Permite selecionar a voz e linguagem que será utilizada. A mais popular é a voz do Google.
Notification
O nó
notification permite gerar mensagens de notificação ao usuário. É possível criar uma notificação temporária, desaparecendo automaticamente após um período de timeout pré-definido, ou pode-se gerar uma mensagem de pop-up que deve ser confirmada pelo usuário para ser dispensada.
Parâmetros específicos principais:
Layout: Tipo da notificação que será gerada.Default action label: Label do botão de ação padrão.Secondary action label: Label do botão de ação secundária.
Mapas
Embora não haja um widget específico para adicionar o mapa que aprendemos a criar na aula passada diretamente no dashboard, é possível fazê-lo indiretamente utilizando o node iframe.
Este node permite embutir qualquer outra página web dentro do dashboard a partir de sua URL, e pode ser instalada a partir da biblioteca do Node-RED sendo encontrada pelo nome
@flowfuse/node-red-dashboard-2-ui-iframe.Considerando que o módulo
worldmap já está instalado e o mapa já está disponível no path /worldmap (e.g., http://localhost:1880/worldmap), então basta dar 2x cliques no node iframe e configurar o parâmetro path para /worldmap (ou seja lá qual for o caminho do mapa da sua aplicação).
Pronto! Basta fazer deploy e ver o mapa sendo renderizado diretamente dentro do seu dashboard.
Problema 5·Monitoramento da temperatura global
Você está implementando um sistema de monitoramento de temperatura global que irá analisar os dados das seguintes cidades:
- Ouro Branco, BR
- Rio de Janeiro, BR
- Vancouver, CA
- Havana, CU
- Paris, FR
- New Delhi, IN
- Tokyo, JP
- Sydney, AU
O objetivo é criar uma tela de supervisão que mostre um gráfico com o histórico de temperatura e gauges com a temperatura atual de todas as cidades, como na imagem a seguir:
Características do dashboard:
- O dashboard deve atualizar as temperaturas de todas as cidades a cada minuto.
- Além disto, deve haver um botão "Atualizar" que também permite atualizar as temperaturas manualmente a qualquer momento.
- As temperaturas das cidades devem ser salvas em um banco de dados Mongo-DB.
- Os gauges apresentam as temperaturas instantâneas de cada cidade e possuem o seguinte código de cores por faixa:
- 0 °C a 15 °C: azul
- 15 °C a 30 °C: verde
- 30 °C a 40 °C: vermelho
- Uma notificação pop-up deve ser enviada ao usuário sempre que alguma cidade tiver a temperatura
15 °C ou 30 °C. A mensagem da notificação deve ser : A temperatura em <NOME-DA-CIDADE> está alta: <VAL-TEMPC> °C. - O gráfico mostra as temperaturas de todas as cidades simultaneamente em Fahrenheit a partir dos dados guardados no banco de dados.
- A conversão de graus Celsius para graus Fahrenheit pode ser feita pela fórmula
- A conversão de graus Celsius para graus Fahrenheit pode ser feita pela fórmula
- Resolva o gauge, o armazenamento em banco de dados e o gráfico primeiro para uma cidade somente. Depois de validada a programação, escale o programa para as outras cidades duplicando o que já foi feito e reaproveitando estruturas que são comuns a todos.