SquareLine Studio - Criar interface com LVGL

Além dos artigos relacionados à biblioteca LVGL, também dispus essa playlist de LVGL que fiz já há algum tempo. A biblioteca evoluiu e os novos recursos também precisam ser apreciados, mas o que achei mais interessante no momento foi o SquareLine Studio, usado para criar interface com LVGL.

O que é LVGL?

LVGL é o acrônimo de Light and Versatile Graphics Library. O resultado das interfaces criadas com essa biblioteca é estupendo! Ela possui diversos widgets, além de personalização de propriedades, incluindo animações.

O que é SquareLine Studio?

Esse é o primeiro parágrafo do overview, na documentação. Claro que ao bater o olho já se presume tudo; criaram uma forma mais eficiente para desenvolver interfaces usando LVGL - o que faz todo o sentido. Ter uma interface visual para criar interfaces visuais é no mínimo adequado. Nem tudo são flores.

SquareLine Studio é gratuito?

Para uso pessoal, sim, gratuito com limitações. Sequer cogitei usar a versão gratuita mesmo antes de instalar para experimentar. Porém, adotaram o modelo maldito de "aluguel de software". Como não há uma forma de licença perpétua, preferi fazer uso da versão gratuita.

Suporte para C++ e MicroPython

Basicamente, desenhamos a interface no SquareLine Studio e exportamos o projeto. Pode-se optar por C++ ou MicroPython, mas deve-se manter em mente que o SquareLine é uma IDE para desenvolvimento da interface. Depois de criada, é necessário implementar o backend. Se não conhece a LVGL, não será produtivo como deveria ser, portanto é uma boa ideia estudar previamente a biblioteca (sugiro os tutoriais em artigos e vídeos que produzi, claro).

Simulador

A IDE possui um simulador, mas no momento o recurso está limitado a poucas placas. Da ST, apenas uma, na versão atual. Também duas NXP, algumas Nuvoton, Espressif e tem dois outros menus que não me parecem estar no lugar certo. Provavelmente a interface do SquareLine Studio deverá ser reformulada.

Fluxo de desenvolvimento

As características mudam conforme a seleção do ambiente. Por exemplo, clicando no menu Arduino, a descrição da placa muda de Eclipse com SDL para uma série de placas e displays que suportam a TFT_eSPI. Escolhendo essa opção, o resultado do empacotamento incluirá ambas, a LVGL e TFT_eSPI.

Na hora de criar o projeto, deve-se ter atenção à profundidade de cores, que nos displays RGB que usamos tradicionalmente como ILI9341, ST7789 e GC9A01 são RGB16 (565), com ou sem swap.

Imagens

As imagens para o projeto devem ser guardardas no diretório Assets do projeto. Fontes precisam estar em Assets/Font. Esses recursos aparecerão disponíveis no painel Assets.

Widgets

Os widgets também ficam expostos no painel Widgets, que por padrão está do lado esquerdo. Clicando ou arrastando, eles são adicionados ao palco.

Simulador

Citei ele mais acima, mas vale tratar em outro parágrafo; além de desenhar a interface, dá pra fazer uns testes com ela, clicando em Play. Não é a mesma coisa que testar diretamente na placa, mas convenhamos que antes da IDE, o desenho do projeto estava exclusivamente em nossa mente e coração, até a primeira compilação.

Exportar o projeto

Ainda não vi como exportar em Python e nem sei se na versão gratuita tem a opção, mas tem um menu no topo da janela chamado Export, com duas opções. Tipicamente, o projeto é exportado uma vez e posteriormente os arquivos de UI são atualizados.

Estrutura do projeto

Em um projeto C++, a seguinte estrutura é criada:

• screens - diretório contendo um arquivo para cada tela do projeto.
• images - diretório contendo as imagens convertidas em array de bytes.
• fonts - diretório contendo as fontes convertidas em C.
• components - diretório contendo os arquivos C para cada componente.

Não confunda o diretório images com o diretório assets, descrito anteriormente.

Esse artigo que estou descrevendo é baseado na documentação e será utilizado por mim mesmo como referência, para os próximos artigos relacionados. É chato, mas é útil.

Arquivos especiais criados também

ui.c

É o principal arquivo da UI; o main da UI, que inicializa a tela, componentes, estilos, animações etc.

ui.h

O cabeçalho, que precisa ser incluído no projeto para que se tenha acesso aos componentes.

ui_helper.c ui_helper.h

Esses arquivos são utilizados internamente pela ui.c, não é algo para dar atenção e nem para ser removido do projeto.

ui_events.c

Esqueletos de funções usadas como evento de "chamada de função". A implementação das funções pode ser adicionada a esse arquivo.

components/ui_com_hook.c

Código customizado que será chamado ao fim da criação de componentes para customizar os componentes pode ser adicionado aqui.

CMakeList.txt

Pode ser usado no CMake para adicionar o diretório da UI. Aqui já é outra história, mas é bom saber que existe e em algum momento usaremos em algum projeto "diferente".

A recomendação é simplesmente adicionar add_subdirectory(ui) ao arquivo CMakefile.txt.

filelists.txt

Uma lista dos arquivos C, separados por \n. Pode ser usado para qualquer construtor, se necessário.

Para configurar uma UI C/C++

Pode estar parecendo um pouco estranho se você não está habituado com criação de interfaces, mas essa estrutura é bem usual. Claro, tem algumas características específicas também, devido ao propósito multiplataforma da IDE.

Para o projeto, segue-se meros 4 passos:

• incluir ui.h
• chamar lv_init();
• configurar os drivers de display e dispositivos de entrada
• chamar ui_init();

Para MicroPython tem uma diferença, mas deixemos para o momento oportuno.

Ao exportar o projeto feito com SquareLine

Tendo criado o projeto como algo para usar no framework do Arduino, o resultado dentro do diretório de destino será algo como uma biblioteca. Como já citado, estarão juntos os recursos utilizados, como TFT_eSPI e a lvgl. Então temos no primeiro nível:

libraries (diretório)
ui (diretório)
README.md    (arquivo)

E dentro de libraries:

lvgl (diretório)
TFT_eSPI (diretório)
ui (diretório)
lv_conf.h (arquivo)
readme.txt (arquivo)

A configuração da biblioteca para TFT_eSPI é basicamente para o touch. Se ainda não conhece a biblioteca, sugiro que dê uma pesquisada aí na caixa de Busca rápida por tft. A configuração é basicamente alguns parâmetros dentro do arquivo User_Setup.h. No arquivo lv_conf.h nada precisa ser feito, exceto tenha configurado algo errado na criação do projeto. Não achei um lugar visual para editar a profundidade de cores, que esqueci de trocar para 16. Logo, basta editar o arquivo de configuração da LVGL (lv_conf.h) e trocar o define. O arquivo está muito bem comentado e é instrutivo lê-lo.

Posteriormente achei onde editar os parâmetros de projeto: File > Project Settings.

Download do SquareLine Studio

Lembre-se das licenças supracitadas e sugiro fortemente que opte pela versão gratuita, exceto tenha necessidades específicas não supridas pela versão gratuita (por exemplo, limitação do número de telas). De qualquer modo, pode-se desenhar a interface e implementar à parte; ou seguir os tutoriais do blog e da playlist referida mais acima, escrevendo sua interface manualmente.

O link para download do SquareLine Studio é esse.

Possui versões para Linux, Mac e Windows.

Exige 4GB de RAM, 2GB de armazenamento e GPU com suporta a Vulcan ou OpenGL, para Linux.

Para Windows, exige DirectX ou OpenGL.

Para Mac, exige Metal ou OpenGL.

Documentação

Já citei ela nos primeiros parágrafos, mas o que gostaria de comentar a respeito é que a documentação é voltada totalmente à interface. Se não usou LVGL ainda e não tem nenhuma experiência anterior, a interface será de pouca ajuda. Se já usou LVGL, então seus projetos de interface vão decolar!