Flash Bee: Projetando um painel para display redondo no Lopaka

O dispositivo

Nos deparamos com o Flash Bee, do gokux, e tivemos que parar e ficar olhando para a tela. É um detector de raios portátil, um radar de tempestades de bolso em uma caixa amarela robusta impressa em 3D. Prenda-o à sua mochila em uma trilha e ele escuta o estalo eletromagnético que os raios lançam, a até 40 km de distância, e depois diz a que distância estão as descargas e se a tempestade está se aproximando ou se afastando. Sem internet, sem aplicativo de clima, só o céu lido direto do ar.

Por dentro, é um Seeed Studio XIAO ESP32-C3 lendo um sensor de raios AS3935, com um display colorido redondo na frente. Ele capta tanto descargas nuvem-terra quanto descargas dentro da nuvem, conta cada uma, lê quão forte foi cada uma e mantém um histórico contínuo. A parte da qual queremos falar é essa tela.

A tela

O display é um painel GC9A01 redondo: 240x240 pixels, em cores plenas, o Round Display para Seeed Studio XIAO. Telas redondas são um quebra-cabeça de design por si só. Não há cantos para esconder coisas, então todo o layout precisa se organizar em torno do centro, e o Flash Bee acerta o visual com um clima de painel de instrumentos:

1. Distância da descarga. O valor principal, bem no centro, grande e em negrito: quilômetros até a descarga mais próxima.
2. Indicador de energia da descarga. Um arco brilhante junto à borda direita que se preenche com a força da última descarga.
3. Descargas e energia. Duas leituras em uma linha de base abaixo do centro, um contador de descargas e um valor de energia.
4. Histórico de energia. Um pequeno indicador de barras ao longo da parte inferior mostrando as últimas descargas.

Uma varredura de radar suave e anéis-guia ficam atrás de tudo, e é isso que vende a sensação de “escanear a tempestade”.

Projetando no Lopaka

A tela inteira foi montada no Lopaka, e um painel redondo é uma ótima vitrine para ele. Veja como o layout se encaixa:

1. Novo projeto. Abra lopaka.app, inicie um projeto, escolha TFT_eSPI como biblioteca e 240 x 240 para o display redondo.
2. Centralize o destaque. Insira um rótulo de texto grande no meio para a distância, com um “km” menor abaixo dele. Esse número muda o tempo todo, então torne-o uma variável usando o botão tornar-variável no inspetor.
3. Encaixe as leituras. Adicione dois pequenos rótulos de seção, STRIKES e ENERGY, cada um com um valor variável abaixo dele. Uma linha de base fina entre eles e o centro mantém tudo organizado.
4. Adicione os anéis. Desenhe alguns círculos concêntricos como anéis-guia suaves para ancorar a composição redonda.
5. Deixe espaço para as partes ao vivo. O arco de energia, a varredura do radar e as barras do histórico são animados a partir dos dados do sensor, então eles são comandados por código sobre o layout. O Lopaka cuida do quadro fixo: rótulos, anéis, posições e os valores que você marcou como variáveis.

Tudo é posicionado em relação ao centro, que é todo o truque das telas redondas, e o Lopaka mostra os limites circulares enquanto você trabalha, para que nada importante escorregue para baixo da moldura.

O código

Na exportação, o Lopaka transforma o layout em comandos de desenho TFT_eSPI e devolve cada variável para o seu firmware definir. Uma leitura central como esta sai mais ou menos assim:

tft.setTextDatum(MC_DATUM);
tft.setTextColor(TFT_YELLOW, TFT_BLACK);
tft.setTextSize(6);
tft.drawString(distance, 120, 90);    // variable: km to nearest strike
tft.setTextSize(3);
tft.drawString("km", 120, 122);

tft.setTextDatum(ML_DATUM);
tft.setTextSize(2);
tft.drawString("STRIKES", 40, 150);
tft.drawString(strikeCount, 40, 168); // variable

Alimente-o com valores ao vivo a cada quadro, envie para o painel, e o layout que você organizou no navegador é o que aparece no display redondo.

Para levar com você

O conjunto todo vive dentro de uma caixa robusta impressa em 3D, com argola para cordão e um clipe, para que ele ande em uma alça de mochila, onde você pode dar uma olhada nele. Uma montagem real e finalizada, não uma protoboard.

Experimente

Quer seu próprio painel redondo? Abra lopaka.app, inicie um projeto TFT_eSPI em 240 x 240 e projete direto sobre uma tela de desenho circular. É gratuito e roda no seu navegador. A biblioteca de ícones e as animações do Lopaka são úteis para esse visual de instrumento, e a galeria está cheia de telas para copiar depois que você se cadastrar.

Créditos

Flash Bee por gokux, montagem completa com peças e código no Instructables. Construído sobre um XIAO ESP32-C3 com um sensor AS3935 e um display GC9A01 redondo.