Desenvolvimento

12 jan, 2018

Node Red: Construindo Dashboard – Parte 01: instalação e configuração

Publicidade

Muitas vezes em nossas aplicações, sentimos a necessidade de uma ‘interface’ de interação e para isso criamos algumas telas, as famosas Dashboards. Com o Node Red não é diferente, porém, ele nos ajuda trazendo algumas ferramentas para criação, e é isso que iremos estudar nesta série de artigos.

Lembrando que, quem não possui o Node Red em alguma nuvem como Azure, AWS ou IBM Cloud também pode instalar em sua máquina particular seguindo o tutorial do link abaixo:

Como dito acima, todos os nodes que veremos aqui podem ser utilizados em nuvem ou no servidor local, basta fazer as instalações. Vamos utilizar o node-red-dashboard.

1. Instalação

Para fazer a instalação, inicie seu Node Red e clique na aba de configuração.

Em seguida, selecione manage pallete, clique em Install e pesquise por dashboard.

Você encontrará o node de dashboard, e para instala-lo, basta clicar em Install no canto inferior direito.

Aguarde alguns instantes, e os nodes de Dashboard serão instalados.

Os nodes são divididos em três tipos: Input, Output e Configure.

Nodes de Input:

  • Button
  • Dropdown
  • Switcht
  • Text input
  • Date Picker
  • Color Picker
  • Form

Nodes de Output

  • Text
  • Gaunge
  • Chart
  • Audio
  • Notification

Nodes de Configuração

  • UI Control
  • Template
  • link
  • tab
  • grup

2. Abas Dashboard

Quando instalamos os nodes de Dashboard, ele também habilita uma nova aba na sessão de informações do Node Red, a aba Dashboard, onde podemos configurar toda a interface do usuário.

Nessa tela, encontramos mais três sub abas.

Layout

Nessa aba conseguimos configurar nossa dashboard entre grupos e tabelas para alinhar a sua apresentação da melhor forma.

Theme

Em theme, nós podemos escolher entre dois temas padrões do Node Red ou customizar um próprio que se adeque à sua necessidade. Também podemos trocar as fontes do dashboard.

Site

Em “Site”, encontramos as configurações mais específicas da nossa tela de dashboard, como alteração de título e opções de edição das barras e tabelas. Encontramos também a configuração de data. O size é a configuração
de espaçamentos entre grupos e widgets que podem ser configurados manualmente.

 

No próximo artigo vamos conhecer um pouco mais dos nodes de input e como configura-los para obter maior precisão e conforto em nossa aplicação.