Criando dashboard para Arduino no Node-RED 9

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:

• Primeiros Passos com o Node-Red e Arduino Uno
• Usando o Node-Red para ler portas do Arduino
• Criando aplicações Node-Red com Arduino

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.

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.

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.

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.

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/):

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:

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).

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.

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.

Assim, nosso painel ficará da seguinte forma:

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.

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

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).

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.

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.

Confira na figura abaixo como ficou o slider no painel:

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.

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.

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

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.

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.

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

Veja como ficou este passo:

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.

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:

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

Dashboard finalizada!

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

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.