Criando um dashboard de automação industrial

Este artigo tem como objetivo desenvolver uma GUI com baixo consumo de recursos para raspberry pi (linux arm) usando java através do framework TotalCross.

Quando se começa a aprender a programar, uma das primeiras coisas que as pessoas dizem é: desenvolver interfaces gráficas (GUI) é difícil. E de fato isto é uma grande verdade. Ainda mais quando performance é uma preocupação. Mas também é verdade que está ficando cada vez mais fácil construir interface gráficas, vistos os novos frameworks que estão surgindo.

O objetivo deste artigo é mostrar como eu, um estudante de Engenharia de Controle e Automação, criou uma interface de painel para automação industrial.

O framework escolhido para este projeto foi o TotalCross, seguindo o padrão de arquitetura que ele orienta (para melhorar a manutenção/ajustes no código no futuro). 

Criando o projeto

O primeiro passo é efetuar o login usando o plug-in VSCode e criar um novo projeto. Para aqueles que ainda não tenham um registro neste framework, devem acessar o Get Started no site do TotalCross.

Os campos devem ser preenchidos da seguinte maneira: 

  • GroupId: com.totalcross.sample.showData
  • Nome: showData

Dentro do projeto, deve-se acessar path>src> main> java> com> totalcross>sample>showData e criar as pastas ui e util. Sendo que:

  • pasta ui: onde ficam todas as classes de interface do usuário (GUI)
  • pasta util: onde vão as classes de constantes que serão usadas durante o desenvolvimento.

Em seguida, deve-se acessar projeto> src> main e criar as pastas de resources. Os arquivos que serão usados ​​na interface gráfica (fontes, cores e imagens) estarão nesta pasta .

Util

Conforme comentado, nesta pasta vão as classes que serão usadas para criar as constantes que iremos usar no projeto, como fontes, imagens e cores. Criar uma classe para cada um desses tipos de constantes é uma prática que o próprio framework orienta (clique aqui para ler mais). O TotalCross orienta esse padrão para concentrar todas as imagens e cores em uma única classe. Desta forma, todas as imagens e cores são referenciadas em uma mesma classe, evitando ter várias classes onde a cor de background é afetada várias vezes. Isto facilita bastante a manutenção do código, pois uma simples mudança de cores de interface necessitará acessar apenas uma classe ao invés de várias.

De volta ao código, nesta pasta util deve-se criar 3 arquivos: Colors.java, Fonts.java e MaterialConstants.java. Eles adicionam as respectivas bibliotecas e bibliotecas adicionais para modificar as variáveis que precisam ser alteradas, devido a alguma especificidade da aplicação.

Por exemplo, o código Colors.java:

A constante BLUE, biblioteca nativa Colors, não possui o tom de azul que queremos e por isso vamos colocar o valor hexadecimal logo após o padrão 0x  do TotalCross (0x<valor_hexadecimal>).
As constantes GREY e DARK_GRAY nesse tom, também não existem e como serão utilizadas (e muito!), deve-se usar o método Color.getRGB(r,g,b) para colocar a cor que queremos.
A cor branca já está na biblioteca Color, não necessitando nenhuma ação adicional.
Basicamente esta é a forma de setar cores utilizando TotalCross. 

Para acessar o código dos outros dois arquivos (Fonts e Images), clique aqui.

(G)UI

Todas as classes de interface com o usuário devem ser criadas nesta pasta. 

O arquivo ShowMainDataWindow.java, deve ser colocado dentro desta pasta, será o arquivo principal, onde colocamos o estilo de interface e, caso queira publicar sua aplicação para Android ou iOS, é nesta classe onde você estabelece os padrões. Nesta classe também que são chamadas a interface principal. 

Estas duas classes também devem ser criadas:

  • ShowDataContainer.java: : o arquivo onde se encontram os containers que serão exibidos na interface principal;
  • TimerContainer.java: Parte da interface onde as informações do temporizador são mostradas
  • ActuatorContainer.java: Parte da interface onde são exibidos o estado dos atuadores (outputs).
  • SensorContainer.java: Parte da interface onde as informações de sensores.

Para saber melhor o que é container, basta clicar aqui.

Obs: Cada parte do aplicativo usa os componentes Hbox e Vbox, Edit, Label, Button e Scroll Container.

Timer Container

Esta é a classe onde vamos criar o container o container que ficará no meio da interface da sua aplicação onde você poderá definir o horário de início e término do confinamento para um dos pinos GPIO, acender um led em uma determinada saída e excluir qualquer uma dessas configurações.

Este tipo de aplicação é utilizada em diversos cenários, como controle de alimentadores de animais e programa de irrigação de plantações.

O código abaixo faz parte do código do TimerContainer. A mesma estrutura é usada em outras partes do código. 

Primeiro, os componentes são criados e algumas características são definidas. Depois são adicionados a um Hbox que é adicionado à tela centralizada. Portanto, não é necessário adicionar cada componente individualmente, o que torna a interface mais limpa e facilita a alocação de componentes.

image1

Acesse o código completo aqui.

Actuator Container

Este container mostra o estado atual dos atuadores, o valor e permite disparar e alterar os pinos de GPIO, que foram definidos como a saída.

Normalmente isso é usado para unidades digitais, como acender uma lâmpada ou abrir um portão. E com a alteração manual do valor é possível, por exemplo, definir a intensidade de iluminação de uma lâmpada ou a velocidade de rotação de um motor.

A maior mudança nesse container é que, usando o Vbox, é possível colocar todos os componentes com o mesmo tamanho em um único Vbox. Adicionar cada conjunto à tela fica mais fácil e o código ainda fica menor do que o do formulário usado no TimerContainer.

O código a seguir mostra melhor a diferença:

image5

Acesse o código completo clique aqui.

Sensor Container

O SensorContainer permite ver o estado/valor atual dos sensores, se estiver recebendo dados, mas pode também vinculá-lo a um atuador (output). O usuário pode definir um valor de acionamento e desacionamento para o pino e então, quando houver uma alguma entrada que atenda aos requisitos indicados pelo usuário, ative ou desative o atuador.


Este é um processo de trabalho comum usado para termostatos.

Essa tela tem as mesmas características que a anterior, com componentes verticais semelhantes no Vbox e componentes horizontais no Hbox.

image3


Clique aqui para acessar o código completo.

Show data container

E por último, a classe que reúne todos os containers anteriores e os exibe ​​para o usuário. Para chamar os containers, basta tratá-los como objeto da lib ScrollContainer, pois foram criados como extensão dela. Veja abaixo:

ShowDataMainWindow

Este arquivo é onde as características básicas do aplicativo são definidas, como pode ser visto no código a seguir.

Os componentes seguem o estilo FLAT_UI, pois devido ao seu design simples, reduz o consumo de RAM da aplicação. Se não houver limitações de consumo de memória,outros conjuntos de componentes com estilos mais elaborados poderão ser usados, como MATERIAL_UI e ANDROID_UI.

Essa foi a última classe necessária para montar a interface de painel para automação industrial. 

Se deseja fazer o download da aplicação para testar, basta baixar no GitHub da TotalCross.

Resultados

O resultado final do projeto pode ser encontrado nas imagens abaixo:

image2

Devido a simplicidade, o plug-in Vscode foi usado para rodar a aplicação. Com o simulador da TotalCross é possível ajustar a resolução e a densidade de pixels, podendo assim verificar previamente o resultado antes de rodar no aparelho.

Nas imagens abaixo você pode conferir o resultado já no Raspberry PI 3:

image4

A imagem acima é de um RPI, mas é possível rodar em outras SBCs e computadores em módulos.

Conclusão

Este exemplo demonstra o que seria um “front end” (GUI) para uma aplicação embarcada que acessa o GPIO. É possível aproveitar a lógica aplicada nesse exemplo de maneiras bem variadas, dependendo da necessidade de informação, do design da aplicação e o do quanto de memória pode-se consumir. Vale bastante a pena testar com material UI, pois o aumento de memória não é tão significativo (o que planejo publicar sobre no futuro).

Referências

Notificações
Notificar
guest
0 Comentários
Inline Feedbacks
View all comments

WEBINAR

Imagens de Ultrassom: Princípios e Aplicações

DATA: 26/10 ÀS 19:30 H