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.