Criando um dashboard de automação industrial

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.

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:

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.


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:

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:

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

Licença Creative Commons Esta obra está licenciada com uma Licença Creative Commons Atribuição-CompartilhaIgual 4.0 Internacional.

Receba os melhores conteúdos sobre sistemas eletrônicos embarcados, dicas, tutoriais e promoções.

Linux Embarcado » Criando um dashboard de automação industrial
Comentários:
Notificações
Notificar
guest
0 Comentários
Inline Feedbacks
View all comments
Talvez você goste:

Séries

Menu