TouchGFX é uma estrutura de desenvolvimento de interface gráfica do usuário (GUI) fornecida pela STMicroelectronics, projetada para o desenvolvimento de sistemas com microcontroladores STM32 (MCU). Ela oferece a capacidade de projetar interfaces baseadas em objetos, auxiliando os usuários de STM MCU na criação de páginas de interface suaves, atrativas e diversificadas.

O exemplo a seguir utiliza a versão 4.23.2 do TouchGFX como referência:

Figura 1: Tela inicial do TouchGFX mostrando opções como Example, Demo, Create Board chip, etc.

Visão Geral da Estrutura do TouchGFX

A arquitetura do programa TouchGFX adota o padrão Model-View-Presenter (MVP), conforme ilustrado na Figura 2, com as seguintes vantagens:

Separação de responsabilidades (Separation of Concerns): A manutenção do código varia conforme os estágios, facilitando que os usuários escrevam as interfaces e se comuniquem com as camadas inferiores, resultando em estruturas claras e reutilizáveis.

Teste unitário (Unit Testing): A camada de visualização pode interagir diretamente com o código gerado pelo GFX, facilitando a validação de resultados de forma independente.

Figura 2: Diagrama de relacionamento dos componentes do TouchGFX (MVP)

View: A principal página de exibição gerada pelo GFX, projetada para representar a interface. Geralmente, atua como a extremidade passiva da camada superior do MVP, lidando com todas as informações de design da interface e exibindo as telas correspondentes com base nas propriedades dos objetos utilizados.

Model: Serve como o núcleo de processamento e envio de dados. Alguns pacotes de comunicação são avaliados ou processados aqui e, em seguida, enviados para a View por meio do Presenter para alterar o conteúdo exibido e o estado dos objetos.

Presenter: Atua como o canal de comunicação entre View e Model, permitindo a solicitação de dados ao Model e possibilitando o reuso de funções.

Devido à filosofia de design do firmware, que enfatiza o Model como o núcleo de processamento de comandos, pode-se ilustrar o seguinte diagrama (Figura 3).

Por meio do processamento em nível inferior para diferentes interfaces (como CAN bus, RS485, UART, Bluetooth, Wi-Fi), os dados são encaminhados ao Model para comunicação e, em seguida, transmitidos à View via Presenter, permitindo a alteração de estado dos objetos.

Figura 3: Comunicação entre múltiplas interfaces e a arquitetura MVP

Dois exemplos podem ilustrar o método de troca de dados:

Exemplo 1: Suponha que o Host envie um comando CANopen para o dispositivo (Figura 4).

O protocolo CANopen recebe os pacotes por meio da porta IF, possivelmente descriptografa os dados via tarefa CAN, e então encaminha o conteúdo para o Model. Após o Model atualizar o banco de dados e executar o comando correspondente, ele envia o resultado para a View por meio do Presenter para atualizar a página.

Figura 4: Exemplo de envio de comando pelo Host

Exemplo 2: Se um usuário tocar em um objeto da interface no dispositivo, um pacote de evento de toque será reportado de volta ao Host (Figura 5).

Quando o usuário clica em um objeto interativo, a View gera um evento de clique, que é transmitido ao Model por meio de um Evento de Usuário via Presenter. O Model responde com base na interface atualmente utilizada, enviando o código de volta à tarefa CAN e, finalmente, envia um pacote TX para notificar o Host.

Figura 5: Evento de toque do usuário enviado de volta ao Host

Visão Geral do Conhecimento sobre Páginas de View

No ambiente TouchGFX, desenhar N páginas irá gerar N conjuntos correspondentes de View e Presenter, mas apenas um Model controlará todas as páginas de view.

Quando um usuário projeta um cenário de interface (gráficos, aparência, coordenadas e exibição de texto), pressionar "Generate Code" irá gerar o código na página de visualização com o nome correspondente.

As pastas geradas são divididas entre ..\generated\ e ..\gui\. A pasta ..\generated\ contém o código básico para exibição da página projetada, enquanto a pasta ..\gui\ contém a lógica de interação entre objetos.

Podemos usar essas informações para posicionar objetos nas páginas correspondentes e referenciar o código utilizável.

Veja abaixo uma explicação simples, passo a passo, do processo descrito acima:

Por exemplo:

1. Abra um projeto em branco e clique em "Create New" para iniciar um novo projeto (Figura 6).

Figura 6: Tela de abertura do projeto no TouchGFX

2. No TouchGFX, a tela padrão "Screen1" estará disponível. Adicionamos um novo objeto botão, selecionamos a imagem desejada e executamos "Generate Code" (Figura 7).

Figura 7: Demonstração da criação de botão

3. Em seguida, ao navegar até a pasta do projeto, aparecem duas novas pastas: gui e generated (Figura 8):

Figura 8: Conteúdo da pasta do projeto

A pasta generated contém o código básico dos componentes de "Screen1", gerado automaticamente pelo TouchGFX e que não pode ser modificado diretamente. Se o estado de algum objeto na página for alterado e o código reiniciado, o conteúdo da pasta generated será atualizado.

De forma semelhante, após clicar em "Generate Code", o TouchGFX cria o arquivo Screen1ViewBase.cpp dentro da pasta ..\generated\gui_generated\src\screen1_screen (Figura 9).

Figura 9: Localização do arquivo Screen1ViewBase.cpp

Ao abrir o arquivo Screen1ViewBase.cpp no Notepad++ (Figura 10), é possível observar as propriedades e conteúdos relacionados à página "Screen1" e os dados do botão:

- Definir coordenadas do botão:
button1.setXY(63, 109);

- Definir ID da imagem do botão:
button1.setBitmaps(TouchGfx::Bitmap(BITMAP_BUTTON_00_00_ID),TouchGfx::Bitmap(BITMAP_BUTTON_00_00_ID));

- Adicionar o objeto botão à página:
Add(button1);

Figura 10: Conteúdo de Screen1ViewBase.cpp

O código presente nos arquivos com o sufixo XXXBase.cpp será reconstruído toda vez que "Generate Code" for executado, refletindo quaisquer mudanças nos dados dos atributos. Assim, ajustes na posição do botão, imagem, etc., serão atualizados automaticamente.

Quanto à pasta gui, ela é o local onde o TouchGFX permite ao usuário escrever a lógica do programa (Figura 8). É também onde a arquitetura MVP é montada (Figuras 11 e 12), permitindo estruturar a comunicação de código necessária para implementar a interface do usuário.

Figura 11: Caminho do Model

Figura 12: Caminhos de Presenter e View

4. Criando um cenário simples para demonstrar o design gerado e a interface:

- Escrever uma lógica de controle para interação entre um botão e uma área de texto.
- Quando o botão for clicado, o valor do texto aumenta.

Veja como implementar essa funcionalidade:

Passo 1:

Arraste dois objetos: um botão (button1) e uma área de texto (textArea1) (Figura 13).

Figura 13: Projeto de interface com controle de botão

Passo 2:

Selecione a ação de interação na lateral direita, adicione um evento de clique no botão e defina a função add_number para ser chamada quando o evento ocorrer (Figura 14).

Figura 14: Adicionando o evento Interaction1

Passo 3:

Abra Screen1ViewBase.cpp (Figura 15) e localize o código das propriedades que cria button1 e textArea1.

Com a interação configurada, é gerado o buttonCallbackHandler para tratar o evento de toque no botão. Ao ser clicado, chama a função add_number via callback.

Figura 15: Arquivo Screen1ViewBase.cpp

Conteúdo de Screen1ViewBase.hpp (Figura 16).

Figura 16: Conteúdo de Screen1ViewBase.hpp

Passo 4:

No diretório gui, adicione os arquivos Screen1View.cpp e Screen1View.hpp.
Implemente a função add_number para usar um contador count (Figuras 17 e 18).

Use Unicode: snprintf(textArea1Buffer, TEXTAREA1_SIZE, "%02d", count) para atualizar o valor na textArea1.

Em seguida, chame textArea1.invalidate() para refrescar a exibição.

Figura 17: Conteúdo de Screen1View.cpp

Figura 18: Conteúdo de Screen1View.hpp

Depois de executar o simulador, confirma-se que sempre que o button1 é tocado, a textArea1 (valor do contador) incrementa a partir de 0 (Figura 19).

Figura 19: Exibição do resultado no simulador

Isso confirma que a definição das propriedades dos objetos é feita na pasta gerada, enquanto a lógica é escrita na seção gui.

Exemplos de Propriedades de Objetos do TouchGFX e do Builder

O Smart Display GUI Builder fornecido pela Winstar é uma ferramenta de design de interface para UI/UX com funcionalidade de arrastar e soltar, oferecendo aos clientes um serviço de desenvolvimento sem código, adaptado para o desenvolvimento rápido e design de produtos baseados em ST MCU. Construído como uma extensão do framework TouchGFX, o GUI Builder incorpora as funcionalidades originais dos widgets TouchGFX, com a principal diferença sendo o suporte a várias interfaces de sistema e protocolos de comunicação. Isso permite que os usuários observem diretamente como os comandos afetam o controle e as mudanças nos widgets.

Aqui está a introdução ao Builder:
https://www.winstar.com.tw/pt/video/play/142.html

A filosofia de design do Smartdisplay está relacionada à funcionalidade das configurações do TouchGFX, incluindo o firmware escrito usando o STM32 MCU como base para MVP. Os objetos internos são projetados usando itens existentes combinados com lógica.

Portanto, entre os objetos abertos pelo GUI Builder, alguns itens podem ser implementados usando componentes UI existentes do TouchGFX para alcançar os resultados de exibição correspondentes.

*Segmento de Explicação Complementar

Aqui está um exemplo simples usando o slider do Builder (Figura 20):

Figura 20: Página de propriedades do slider do Builder

As propriedades do Slider do Builder são as seguintes:

Size:
- Width: 618
- Height: 20

Positions:
- Background Position (X): 0
- Background Position (Y): 4

Indicator Position:
- Min: 0
- Max: 580
- Pos: 0

 

Estes parâmetros correspondem às configurações do Componente Slider no TouchGFX (Figura 21).

Figura 21: Propriedades do Slider do TouchGFX

As propriedades do Slider do TouchGFX são as seguintes:

Location:
- Width: 618
- Height: 20

Positions:
- Background Position (X): 0
- Background Position (Y): 4

Indicator Position:
- Min: 0
- Max: 580
- Y: 0

Os usuários podem ajustar o valor Inicial no GFX para simular os resultados no Builder (Figura 22).
Se o valor for definido como 100, ele poderá simular o mesmo resultado no Builder (Figura 23).

Figura 22: Ajustando Start = 100 no TouchGFX

Figura 23: Ajustando Test Value = 100 no Builder

Se observarmos o arquivo Screen1ViewBase.cpp gerado pelo GFX (Figura 24):

Figura 24: Função em Screen1ViewBase.cpp

Podemos entender como os parâmetros mencionados acima podem ser usados e modificados no código. Esses números estão diretamente relacionados ao design do projeto GFX. Quando o Builder envia o projeto, ele redefine os parâmetros iniciais para o Slider do dispositivo.

Se o Host enviar um comando para alterar o valor do Slider, será executado slider1.setValue() na view para completar a alteração do objeto (Figura 25).

Figura 25: Host envia comando para o slider

Esta é uma explicação simples da relação entre os objetos do Builder e do TouchGFX.

Extensões Futuras e Avaliação do Desenvolvimento de Objetos do Builder

Com a recente atualização para a versão 4.24.0 do TouchGFX, novos objetos e funcionalidades estão disponíveis. Se precisarmos avaliar se o Builder pode ser integrado, podemos primeiro testar usando os exemplos padrão do GFX para demos e pesquisas (Figura 26):

Figura 26: Vários projetos de exemplo

 

Como a versão 4.24.0 suporta novos objetos, como código QR, podemos avaliar os parâmetros e funções que poderiam ser usados caso o Builder seja integrado.

Exemplo usando Código QR:

1. Selecione BlankUI.
2. Arraste o Container do código QR.
3. Observe as propriedades configuráveis (Figura 27):
Location: (X, Y)
Configuration:
- QRVersion
- Scale
- Text
- Error Correction Code…

Figura 27: Tela de propriedades do código QR

Esses parâmetros do código QR podem ser consultados no site oficial (Figura 28).

Figura 28: Explicação no site oficial

Na função gerada em Screen1ViewBase.cpp, confirme os parâmetros e configurações disponíveis (Figura 29):

1. Definir coordenadas: qrCode1.setXY(208, 224);
2. Definir versão do QR code: qrCode1.setQRCodeVersion(3);
3. Definir escala do QR: qrCode1.setScale(5);
4. Inserir texto para gerar o código QR:
qrCode1.convertStringToQRCode("https://www.winstar.com.tw/zh-tw/");

Figura 29: Código gerado em Screen1ViewBase.cpp

Caso a função do código QR seja integrada ao Builder futuramente, permitirá que os usuários configurem esses parâmetros ajustáveis.

Referências:

https://support.touchgfx.com/docs/category/introduction
https://www.eettaiwan.com/20200203np21/
https://en.wikipedia.org/wiki/STMicroelectronics
https://www.winstar.com.tw/pt/video/smartdisplay.html