Criar interface com SquareLine Studio e VS Code

Fazer por partes me parece a melhor forma de ler exclusivamente a referência que se deseja. Nesse artigo veremos como criar interface com SquareLine Studio e VS Code. No próximo, veremos com implementar as funções de callback etc.

SquareLine Studio

No artigo anterior apresentei o SquareLine Studio, que é uma IDE para criação de interfaces, usando LVGL. A interface pode ser criada para múltiplas plataformas, mas especificamente para displays usados em MCUs, alguns critérios devem ser considerados.

Para esse exemplo, utilizarei o T-Display da TTGO, que não possui touch, mas é o suficiente para apresentação. Além disso, se não estiver utilizando display com touch, a interação pode ser feita através de botões físicos. Mostrarei isso em outro artigo.

Para fazer download da IDE, vá ao site do SquareLine.

Primeiro projeto

Após instalar e abrir a IDE, vá à aba Arduino. A opção disponível faz referência à TFT_eSPI. Ela será necessária como driver. No artigo anterior me expressei mal quando disse que "a configuração da TFT_eSPI é basicamente para o touch". O que quis dizer é que não utilizaremos a TFT_eSPI para desenhar na tela. O único recurso direto a ser utilizado é o touch, pois o desenho da interface fica por conta da LVGL. Porém, a biblioteca TFT_eSPI é fundamental, pois ela é o driver do display.

Ajustes iniciais ao criar o projeto

Temos 2 configurações importantes a fazer na tela de criação do projeto. Primeiro, a resolução, que deve casar com o display em que a interface será exibida. Segundo, a profundidade de cores, que por padrão aparece 32bits, mas para displays de MCU a profundidade de cores é de 16bits (RGB565). Tendo feitos essas escolhas, confirme a criação do projeto.

...E ao compor sua interface...

Esse artigo é exclusivamente para mostrar como colocar a interface no display, usando VS Code. Então, crie uma interface como desejar, sem se preocupar com a interação. Vamos primeiro fazer o necessário para que a interface apareça no display.

Exportar o projeto

O propósito da IDE é desenhar a interface. Tendo terminado essa etapa, clique em Export e então Create Template Project. Escolha o diretório de destino. Será criada uma estrutura como essa:

libraries

Dentro de libraries estará disposta essa estrutura:

Daqui copiaremos apenas ui e lv_conf.h

ui

Esse diretório conterá um sketch para iniciar a interface. É um sketch tradicional do Arduino, mas como vamos utilizar VS Code com PlatformIO, manipularemos o conteúdo. Coisa simples.

Crie seu projeto no PlatformIO

Crie um projeto para sua placa no PlatformIO no VS Code. Depois instale as bibliotecas TFT_eSPI e lvgl. Agora temos um projeto pronto para receber a interface que criamos.

Configurar a TFT_eSPI

As bibliotecas ficarão no diretório .pio/libdeps no VS Code. Dentro do diretório TFT_eSPI você encontrará o arquivo User_Setup.h, no qual deverá configurar o display. Basicamente, são defines, nada de código.

Para o T-Display, o arquivo ficou assim:

#define ST7789_DRIVER
#define TFT_WIDTH  135 
#define TFT_HEIGHT 240
#define CGRAM_OFFSET 

#define TFT_SDA_READ 
#define TFT_MOSI            19
#define TFT_SCLK            18
#define TFT_CS              5
#define TFT_DC              16
#define TFT_RST             -1      
#define TFT_BL              4 

Aqui temos a tradicional configuração do SPI e tamanho do display, além do tipo do display utilizado.

Se não está habituado com SPI, leia o próximo parágrafo. De outro modo, pule-o.

Configuração do barramento SPI

É necessário saber quais são os GPIOs do barramento SPI da sua placa. Basta procurar pelo pinout dela.

Dos GPIOs SPI, utilizaremos:

MOSI

MOSI ou COPI, dependendo de quem desenhou o pinout. Esse é o Master Out Slave In, ou seja, sai da MCU e entra no dispositivo controlado - no caso, o display.

SCLK

É o clock que sincroniza a comunicação no barramento

DC

É utilizado em displays, mas não é de fato parte do SPI, que é MISO, MOSI e SCLK. O DC é "Data/Command", utilizado para dizer ao display se ele está recebendo comandos ou se é para exibir algo. Para nós, é abstraído. o pino DC fica à sua escolha, desde que configurado adequadamente no arquivo de configuração User_Setup.h

CS

Esse é outro GPIO de livre escolha. O CS é utilizado para informar ao dispositivo que o comando é para ele. Podemos ter inúmeros dispositivos no barramento SPI. Para saber qual deles atuará, usa-se o pino CS. Também abstraído, mas necessário ser configurado para touch e display. Alguns displays não tem CS.

TFT_BL

Alguns displays também não tem esse pino. Esse é o "Back Light", que ocasionalmente pode ser necessário ligá-lo via software.

TFT_SDA_READ

Esse define é para dizer que o pino recebe entrada e saída no MOSI. Displays normalmente só recebem o dado e pronto. Só mantive esse define porque achei interessante discorrer sobre.

Configuração do LVGL

Para ficar mais simples, copie a estrutura ui e o arquivo lv_conf.h que estão dentro de libraries para dentro do diretório src, que contém o arquivo main.cpp em seu projeto no VS Code. Pronto.

Sketch

Lá no diretório que você salvou o projeto de interface, no mesmo nível de libraries tem também o diretório ui (de novo). Nele está um sketch, do qual podemos copiar todo o conteúdo para dentro de main.cpp. Após copiado, adicione o header do Arduino, pois é fundamental em um projeto criado no PlatformIO:

#include <Arduino.h>

No include do header ui, faça assim:

#include "./ui/ui.h"

Isso significa que o header ui.h está no diretório ui, que está no mesmo nível de diretório do arquivo main.cpp.

Suba o sketch para sua placa e a interface deve aparecer de forma semelhante à imagem de destaque desse artigo.

Considerando a possibilidade de alguma incompatibilidade de versão, caso haja alguma anomalia, considere substituir o conteúdo dos diretórios das bibliotecas instaladas pelo VS Code pelo conteúdo das bibliotecas geradas pelo SquareLine. Isso pode acontecer em algum momento, dependendo das mudanças que ocorrerem entre versões, então, atente-se a isso.

Implementação funcional

Agora basta implementar as funções que atuarão com a interação do usuário. Se não quiser esperar, procure por lvgl na caixa de busca rápida. Já tem diversas implementações que foram feitas manualmente (isto é, "sem" uma IDE de design de interface). Além disso, tem também essa playlist sobre LVGL, com bastante conteúdo.

Até o próximo artigo!