Criando dashboard para Arduino no Node-RED 2

Nos nossos últimos três posts apresentamos quais devem ser os procedimentos para realizar uma série de aplicações no Node-RED para manipular uma placa Arduino. Demonstramos como efetuar a comunicação entre os mesmos, realizar acionamentos e adquirir dados provenientes de fontes externas, como por exemplo, sensores. Desta vez, elaboramos um post com o objetivo de ensinar como elaborar um dashboard, para que seja possível monitorar as variáveis de entrada e também atuar sobre as variáveis de saída.

Se você não acompanhou os posts anteriores sobre Node-Red com Arduino, acesse os links abaixo:

INSTALAÇÃO DO PACOTE PARA DESENVOLVIMENTO DE DASHBOARDS

Como dito anteriormente, no Node-RED é possível criar uma infinidade de aplicações devido à imensa gama de tipos de nós disponíveis. Alguns deles são instalados juntamente com a ferramenta. Enquanto outros só podem ser obtidos através de um processo de instalação manual. Este é o caso dos nós necessários para a criação de dashboards.

Para instalar os nós citados, deve-se clicar sobre o menu, no canto superior direito da tela e em seguida selecionar a opção Manage Palette.

Manage Pallete

Após este procedimento, deve-se selecionar o campo install, escrever a palavra Dashboard no campo de pesquisa e clicar para instalar o pacote node-red-dashboard.

ACIONAMENTO ON/OFF DAS PORTAS DIGITAIS

Neste momento iremos demonstrar como desenvolver a implementação de um painel para que seja possível realizar o acionamento de dispositivos através das portas digitais do Arduino UNO. Portanto, dispositivos on/off. Basicamente, existem duas maneiras de cumprir com o objetivo proposto, onde, a primeira delas consiste na utilização de um botão e a segunda de um switch (uma chave).

Primeiramente, para criarmos um botão de acionamento, devemos selecionar o elemento button, que encontra-se localizado na barra de nós, e trazê-lo para o ambiente de desenvolvimento.

Botão

Em seguida, com um duplo-clique sobre o mesmo, devemos selecionar a opção Add new ui_group no campo group. Este passo é necessário para que possamos colocar todos os elementos referente ao tipo de acionamento que estamos fazendo em um mesmo grupo. Após isso clicar no ícone localizado à direita deste campo. Após estes procedimentos, basta escolher um nome para o grupo criado e clicar em update para confirmar as mudanças e voltar para a janela de configurações do botão.

Edit Group

Neste ponto, deve-se configurar alguns parâmetros do botão criado. Primeiramente, define-se um tamanho para o mesmo. Neste post utilizamos o tamanho 2 x 1. Posteriormente, deve-se determinar o texto que aparecerá no botão (basta preencher o campo Label com o nome desejado). E também a cor de fundo (as cores são definidas no campo background através do seus respectivos códigos em hexadecimal). Neste caso, utilizamos #2E8B57 para a cor verde. Como este é um botão de acionamento, queremos que, ao apertarmos o mesmo no painel, uma determinada saída do Arduino UNO seja colocada em nível alto, portanto, deve-se definir o campo payload como true.

Edit button node

Após realizar os procedimentos citados anteriormente, o painel estará desta maneira (para acessar o dashboard que está sendo desenvolvido, basta abrir uma nova aba no navegador e digitar http://localhost:1880/ui/):

Detalhe botão

Para criar um botão capaz de fazer o inverso do botão desenvolvido anteriormente, ou seja, um botão que quando pressionado faça com o que o Arduino UNO coloque uma determinada saída em nível baixo, basta seguir os mesmos procedimentos apresentados. Exceto pelo campo payload, o qual, deve ser preenchido como false. Além disso, também não é necessário criar um grupo novo, pois, utilizaremos o criado anteriormente. Veja como ficou o painel após estes passos:

Detalhe botão liga/desliga

Neste momento, basta criar o fluxo necessário para que os botões funcionem adequadamente. Suponha que o objetivo dos botões criados seja manipular o pino 3 do Arduino UNO. Neste ponto, caso o leitor tenha dificuldade, sugerimos que o leitor acesse nosso primeiro post sobre os primeiros passos com o Node-RED).

Fluxo liga/desliga

Observe que também é possível utilizar alguns recursos para melhorar a organização e a estética do painel elaborado. Como por exemplo, o botão de texto.

Botão texto

Vamos utilizar este elemento para escrever um título de referência para os botões criados. Para realizar este procedimento, deve-se arrastar o botão text da barra de nós para o ambiente de desenvolvimento, definir o grupo no qual o mesmo estará. Neste caso, será o mesmo grupo dos botões. Definir também o tamanho (2 x 1) e o texto que será exibido, através do campo Label.

Edit text node

Assim, nosso painel ficará da seguinte forma:

Painel Liga/Desliga

Como foi dito anteriormente, o segundo elemento utilizado para manipular as saídas digitais do Arduino UNO será o switch.  Que por sua vez, consiste apenas em uma chave com dois estados definidos. Para adicionar um switch no Dashboard deve-se primeiramente trazê-lo da barra de nós para o ambiente de desenvolvimento.

Botão Switch

Em nossa aplicação, os parâmetros foram definidos da seguinte maneira:

Painel

Veja como ficou nosso Dashboard até este momento:

Para que este elemento seja funcional, devemos criar o fluxo adequado para que ao movimentarmos o switch entre os dois estados definidos (on/off),  o Arduino  UNO possa alterar o estado de um determinado pino de saída digital (neste exemplo, utilizaremos o pino 5).

Fluxo switch

Os procedimentos apresentados nesta seção podem ser replicados pelo leitor com as modificações que o mesmo julgar serem necessárias para atender ao projeto que está sendo desenvolvido. Para este tutorial, incrementamos o Dashboard produzido nesta seção para mostrar um pouco mais o que pode ser feito, confira:

UTILIZANDO PWM NAS PORTAS DIGITAIS

Agora que já aprendemos como proceder para realizar acionamentos on/off com o Arduino UNO através do Dashboard do Node-RED, vamos apresentar os passos para prosseguir com a utilização de um sinal PWM, também pelo dashboard. Nesta seção iremos apresentar três elementos com os quais é possível atingir o objetivo proposto, onde o primeiro deles será o slider.

O slider consiste em um cursor móvel que pode ser deslocado sobre uma linha horizontal, de acordo com a posição do mesmo. Um determinado valor será disponibilizado para o elemento seguinte do fluxo. Para adicionar um slider, basta selecioná-lo na barra de nós e trazê-lo para o ambiente de desenvolvimento.

Botão slider

Neste elemento, criamos um novo grupo através do mesmo procedimento utilizado anteriormente e chamamos o mesmo de Acionamentos com PWM. Para configurar este elemento basta estabelecer os valores mínimo e máximo que o cursor poderá atingir e também deve-se determinar qual será o passo, ou seja, o espaço entre dois valores consecutivos contidos no intervalo definido.

Edit slider node

Confira na figura abaixo como ficou o slider no painel:

Painel Slider

Como sabemos, para que tudo funcione corretamente, devemos criar o fluxo adequado para que o Arduino UNO consiga proporcionar o sinal PWM em uma de suas saídas específicas para tal, neste caso, o pino 9. Não se esqueça de configurar o nó de saída do Arduino corretamente para trabalhar com PWM.

O segundo elemento que será apresentado aqui será o nó de controle numérico, que por sua vez, disponibiliza dois botões para o usuário, onde, um é responsável por incrementar uma determinada variável e o outro é responsável por realizar o decremento da mesma. Para utilizar este nó, basta arrastá-lo da barra de nós para o ambiente de desenvolvimento.

Botão numérico

A configuração dos parâmetros deste nó é muito parecida com a do nó anterior, de modo que, basta que o usuário indique o passo a ser incrementado ou decrementado a cada aperto de um dos botões e os intervalos mínimo e máximo.

Edit numeric node

Neste caso, iremos utilizar este nó para definir o valor do PWM a ser utilizado no pino 10.

Painel com nó numérico

Por último, utilizaremos um campo para a entrada de texto para que seja possível definir valor referente ao sinal PWM disponibilizado na saída.

REALIZANDO A LEITURA DE ENTRADAS DIGITAIS E ANALÓGICAS

Para realizar a leitura de variáveis analógicas temos duas possibilidades bem interessantes. Primeiramente começaremos com os gráficos, de modo que, para adicionar um gráfico ao dashboard que está sendo criado, deve-se selecionar o nó correspondente e transferir o mesmo para o ambiente de desenvolvimento.

Botão gráfico

Na página de propriedades do elemento adicionado anteriormente, primeiramente criamos um novo grupo para organizarmos todos os elementos referentes às entradas analógicas. Além disso, deve-se também determinar o tipo de gráfico que deve ser criado (neste caso utilizamos um simples gráfico de linha) e outras configurações secundárias.

Editar botão gráfico

Por último, basta criar o fluxo adequado para que seja possível construir um gráfico a partir das informações recebidas

Fluxo botão gráfico

Veja como ficou este passo:

Gráfico entrada analógica

O segundo elemento utilizado para apresentar o comportamento de variáveis analógicas é o Gauge. Este elemento tem o funcionamento semelhante a um velocímetro, que por sua vez, consiste na movimentação de um ponteiro percorrendo um ângulo de 180 graus. Para utilizar este nó, deve-se selecionar o mesmo e trazê-lo para o ambiente de desenvolvimento.

Botão Gauge

As configurações deste nó se resumem basicamente a definir o grupo em que será inserido este elemento e também o intervalo de representação do mesmo (neste caso, utilizamos 0 e 1023 em virtude de os valores de entrada estarem dentro deste intervalo)

Veja como ficou este elemento no dashboard:

Painel Gauge

Por último, deve-se elaborar o fluxo específico para o funcionamento desta parte:

Fluxo Gauge

Dashboard finalizada!

Confira como ficou nossa aplicação depois de pronta:

Dashboard completa

Este foi mais um conteúdo que preparamos com bastante cuidado para você. Esperamos que tenha gostado deste artigo. Deixe seu comentário logo abaixo. Em caso de dúvidas, caso queira trocar uma ideia, ou até mesmo dividir seu projeto, acesse nosso Fórum!

Posts Relacionados

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

2 Comentários

  1. Sem comentários ficou muito bonita a aplicação essa eu vou querer montar para futuros projetos!Parabéns.

    Daniel Mendes de Carvalho
  2. Uooowwwww….

    A layout só não impressiona mais do que a facilidade… Excelente.