Primeiros passos com o framework TouchGFX

TouchGFX da ST
Este post faz parte da série TouchGFX da ST. Leia também os outros posts da série:

Neste artigo mostro como criar uma aplicação gráfica básica com o Framework TouchGFX da ST.

 

As etapas do desenvolvimento consistem em criar um novo projeto, criar sua interface arrastando os widgets, simular e fazer o upload para a memória flash do dispositivo. O processo de compilação e upload para o target, será feito pela IDE. Posteriormente também compilaremos pela linha de comando com utilizando o MinGW para realizar o processo de build no gcc com o make.

 

É de grande importância aprender a compilar na linha de comando, pois vamos precisar alterar o projeto futuramente, quando formos mexer com o código para interagir com o hardware. Assim não limitaremos este artigo a apenas uma IDE, seja livre para usar qualquer editor de texto.

 

Ao adentrar no TouchGFX designer, preencha o campo APPLICATION NAME com o nome do seu projeto:  "PrimeiraApp". Na janela APPLICATION TEMPLATE vamos clicar em change para selecionar a nossa placa e logo em seguida, clicar em CREATE para criar o projeto.

 

A lista de templates é bem extensa e atende toda a linha de evalboards com display touch da ST. A escolha da placa não importa muito, você conseguirá acompanhar perfeitamente os passos da aplicação se estiver utilizando outra. A principal diferença está apenas no tamanho da tela e da memória disponível, porém, nossa primeira aplicação não ocupará muito espaço.

 

Figura 1: Criando o projeto.

 

Com o projeto criado, nosso ambiente de trabalho é este da figura abaixo, vamos dar início ao nosso design utilizando os recursos que o framework tem a oferecer.

 

A começar pelo background, nossas opções são: colocar uma imagem de fundo, usar uma caixa com cor sólida, ou usar uma imagem de textura. Para adicionar qualquer Widget, basta dar um clique duplo ou clicar nele e arrastar para o local na tela, onde você deseja posiciona-lo. Todos os widgets ficam no menu lateral esquerdo e organizados por campo.

 

Usaremos o widget Tiled image que é um campo com imagem que contém texturas. A lista de texturas padrões oferece uma variedade muito bacana e que vale a pena ser explorada posteriormente por você, caro leitor.

 

Dê um duplo clique em Tiled image e no menu direito, selecione a propriedade Iron Grip no menu STYLE. Para redimensionar o tamanho do Widget para que ocupe a tela toda, use os vértices da imagem para arrastar-los até os vértices da tela.

 

Figura 2: Setando o background da aplicação.

 

Agora é hora de adicionar uma imagem na nossa tela, escolhi aqui o logo do Embarcados que você pode encontrar no cabeçalho página em formato PNG. Adicione o widget Scalable Image e clique no menu Image do lado direito para adicionar a imagem.

 

Figura 3: Adicionando o widget de imagem.

 

No menu Image clique no ícone selecionado na figura abaixo. O resultado será uma janela do seu explorador de arquivos, navegue até o local da imagem em seu computador e a selecione.

 

Figura 4: Adicionando imagem personalizada.

 

Após selecionar a imagem, ela se encontrará em sua lista de imagens adicionadas. Selecione-a e ela aparecerá no seu layout, agora é só posicionar corretamente e ajustar seu tamanho arrastando os vértices.

 

Figura 5: Ajustando o tamanho.

 

Vamos adicionar uma área de texto com o Widget Text Area. Na propriedade Text digite a frase que deseja colocar na sua tela e a posicione. 

 

Este será um elemento que o usuário poderá arrastar pela tela e reposicionar a partir de sua posição original, portanto selecione a caixa Draggable, para habilitar a propriedade.

 

Figura 6: Adicionando texto.

 

Aparentemente a aplicação está pronta e pronta para ser testada! Para isso utilizaremos o emulador clicando no Botão Run Simulator, que fica na parte superior. Logo após algum tempo se abrirá uma janela com o nosso aplicativo rodando, observem que o nome da janela contém o nome que damos ao nosso projeto.

 

Figura 7: Emulando a aplicação.

 

Com o nosso aplicativo testado e funcionando agora é o momento de gravar a nossa placa com a aplicação. O processo não poderia ser mais simples! Assim como para emular, para gravar a placa, você só precisa apertar um botão. Clique no botão Run Target e aguarde o processo de compilação e upload, em poucos segundos você verá o resultado em seu display e poderá testar na prática.

 

Figura 8: Fazendo o upload para a placa.

 

Veja o resultado na figura abaixo.

 

TouchGFX da ST
Figura 9: Resultado final.

 

Abaixo podemos ver todo o log, onde contém instruções executadas, erros do compilador e mensagens da aplicação. Para ver essa janela basta clicar em "Detailed Log" ao lado direito da barra inferior.

 

Figura 10: Log de eventos.

 

 

Utilizando o TouchGFX environment

 

Agora é hora de aprender a utilizar a linha de comando para compilar, simular e fazer upload dos nossos projetos!

 

Você deve estar se perguntando "pra que compilar manualmente se o framework abstrai toda essa parte pra gente?". A resposta é tão simples quanto a pergunta: assim não ficamos reféns de IDE's para modificar a nossa aplicação.

 

Ao abrir o TouchGFX environment, navegue até o diretório da sua aplicação "C:\TouchGFXProjects\PrimeiraApp\Project\gcc", dentro desta pasta haverá o arquivo Makefile. O arquivo Makefile será responsável por "linkar" os arquivos no processo de build.

 

O que disse acima se resume neste comando: "cd /c/TouchGFXProjects/PrimeiraApp/Project/gcc".

 

Neste momento você já deve estar na pasta que contém o arquivo Makefile. Para ter certeza digite "ls" e digite enter e veja se o arquivo está listado no diretório.

 

O próximo passo é executar o Make para compilar nosso código.

 

"make -f Makefile -j4

 

O parâmetro "-j4" passado para o make é o paralelismo da compilação, significa que ele abrirá 4 threads para a compilação. Colocar um número muito alto pode não ser muito satisfatório pois a troca de contexto entre uma thread e outra acaba comprometendo o processamento. No meu caso coloquei 4 pois o meu processador é um quad core e intuitivamente espera-se que o sistema operacional maneje cada tarefa para um núcleo diferente.

 

Após isso nosso código já foi compilado, agora é rodar o simulador que se encontra no diretório "C:\TouchGFXProjects\PrimeiraApp\Project\TouchGFX\build\bin", para isso execute o comando abaixo:

 

"cd /c/TouchGFXProjects/PrimeiraApp/Project/TouchGFX/build/bin"

 

Agora é só executar o arquivo simulator.exe: Digite "./simulator.exe"

 

O resultado esperado é o da figura abaixo: a imagem com a tela do simulador abrirá mostrando a aplicação.

 

Figura 11: Simulando com o TouchGFX environment

 

Agora vamos fazer a compilação e upload para a placa, para isso acesse o diretório que se encontra o makefile "C:\TouchGFXProjects\PrimeiraApp\Project\gcc".

 

 "cd /c/TouchGFXProjects/PrimeiraApp/Project/gcc"

 

Agora vamos executar o mesmo comando que foi utilizado para compilar, porém adicionaremos mais um parâmetro, o "intflash" que será responsável por gravar o arquivo na memória flash da nossa placa.

 

"make -f Makefile -j4 intflash"

 

TouchGFX da ST
Figura 12: Upload com o TouchGFX environment

 

Pronto, o resultado será a sua placa com a aplicação! 

 

Gostou do framework? Tem sugestões? Quer aprender outras coisas relacionadas? Deixe seu comentário! Seu feedback é muito importante para mim.

 

Saiba mais

 

GUIX Studio: crie interfaces gráficas (GUI) com a Plataforma Renesas Synergy™

Criando interfaces gráficas com Electron para Linux Embarcado

Espressif anuncia suporte para bibliotecas gráficas no ESP32

 

 

Referências

 

TouchGFX site

TouchGFX youtube channel 

 

Outros artigos da série

<< Conheça o framework TouchGFX
Este post faz da série TouchGFX da ST. Leia também os outros posts da série:
NEWSLETTER

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

Obrigado! Sua inscrição foi um sucesso.

Ops, algo deu errado. Por favor tente novamente.

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

Muriel Costa
Técnico em mecatrônica, Graduando em Engenharia da informação pela Federal do ABC. Entusiasta da área, adoro frequentar espaços colaborativos e estar engajado com a comunidade. Em minhas escassas horas vagas gosto de organizar meu laboratório, desenvolver projetos, assistir séries e apreciar um bom churrasco.

Deixe um comentário

avatar
 
  Notificações  
Notificar