Flash Bee: diseñar un panel para pantalla redonda en Lopaka

El dispositivo

Nos topamos con Flash Bee de gokux y tuvimos que detenernos a mirar la pantalla. Es un detector de rayos portátil, un radar de tormentas de bolsillo en una gruesa caja amarilla impresa en 3D. Engánchalo a tu mochila en una caminata y escucha el crujido electromagnético que lanzan los rayos, hasta a 40 km de distancia, y luego te dice a qué distancia están las descargas y si la tormenta se acerca o se aleja. Sin internet, sin aplicación del tiempo, solo el cielo leído directamente del aire.

Bajo el capó es un Seeed Studio XIAO ESP32-C3 que lee un sensor de rayos AS3935, con una pantalla redonda a color al frente. Detecta descargas tanto de nube a tierra como dentro de la nube, las cuenta, lee la intensidad de cada una y mantiene un historial continuo. La parte de la que queremos hablar es esa pantalla.

La pantalla

La pantalla es un panel redondo GC9A01: 240x240 píxeles, a todo color, la pantalla redonda para Seeed Studio XIAO. Las pantallas redondas son un rompecabezas de diseño propio. No hay esquinas donde esconder cosas, así que todo el diseño tiene que organizarse alrededor del centro, y Flash Bee clava el aspecto con un aire de grupo de instrumentos:

1. Distancia de la descarga. El valor protagonista, en el centro exacto, grande y en negrita: kilómetros hasta la descarga más cercana.
2. Indicador de energía de la descarga. Un arco brillante pegado al borde derecho que se llena con la intensidad de la última descarga.
3. Descargas y energía. Dos lecturas en una línea base debajo del centro, un contador de descargas y una cifra de energía.
4. Historial de energía. Una pequeña fila de barras a lo largo de la parte inferior que muestra el último puñado de descargas.

Un tenue barrido de radar y anillos guía se sitúan detrás de todo, que es lo que vende la sensación de «escanear la tormenta».

Diseñarlo en Lopaka

Toda la pantalla se montó en Lopaka, y un panel redondo es un gran escaparate para ello. Así se compone el diseño:

1. Proyecto nuevo. Abre lopaka.app, inicia un proyecto, elige TFT_eSPI como biblioteca y 240 x 240 para la pantalla redonda.
2. Centra al protagonista. Suelta una etiqueta de texto grande en el medio para la distancia, con un «km» más pequeño debajo. Ese número cambia constantemente, así que hazlo una variable con el botón make-variable del inspector.
3. Enmarca las lecturas. Agrega dos etiquetas de sección pequeñas, STRIKES y ENERGY, cada una con un valor variable debajo. Una fina línea base entre ellas y el centro mantiene todo ordenado.
4. Agrega los anillos. Dibuja un par de círculos concéntricos como tenues anillos guía para anclar la composición redonda.
5. Deja espacio para las partes vivas. El arco de energía, el barrido de radar y las barras del historial se animan desde los datos del sensor, así que esos se controlan en código sobre el diseño. Lopaka es dueño del marco fijo: etiquetas, anillos, posiciones y los valores que marcaste como variables.

Todo se coloca contra el centro, que es todo el truco con las pantallas redondas, y Lopaka te muestra los límites circulares mientras trabajas para que nada importante se deslice bajo el bisel.

El código

Al exportar, Lopaka convierte el diseño en llamadas de dibujo TFT_eSPI y te devuelve cada variable para que tu firmware la establezca. Una lectura central como esta sale más o menos así:

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

Aliméntala con valores en vivo en cada fotograma, envíala al panel, y el diseño que organizaste en el navegador es lo que aparece en la pantalla redonda.

Llévalo puesto

Todo el conjunto vive en una robusta caja impresa en 3D con un lazo para cordón y un clip, así que viaja en la correa de una mochila donde puedes echarle un vistazo. Una construcción real y terminada, no una protoboard.

Pruébalo

¿Quieres tu propio panel redondo? Abre lopaka.app, inicia un proyecto TFT_eSPI en 240 x 240 y diseña directamente sobre un lienzo circular. Es gratis y se ejecuta en tu navegador. La biblioteca de íconos y las animaciones de Lopaka son útiles para este tipo de aspecto de instrumento, y la galería está llena de pantallas para copiar una vez que te registres.

Créditos

Flash Bee de gokux, construcción completa con piezas y código en Instructables. Creado con un XIAO ESP32-C3 con un sensor AS3935 y una pantalla redonda GC9A01.