CLOCK-SAT V1: diseñar la interfaz de un reloj de escritorio de tinta electrónica en Lopaka

El dispositivo

CLOCK-SAT V1 es un reloj de escritorio de Maxime Loiseau, aunque «reloj de escritorio» realmente se queda corto. Un módulo de papel electrónico de 1,02 pulgadas flota dentro de un delgado marco de alambre de latón con pequeñas alas de células solares, así que todo el conjunto parece un diminuto satélite que se posó en tu escritorio. Indica la hora, la fecha y la humedad y la temperatura de la habitación, y luego se guarda en una pantalla «durmiente» cuando se apagan las luces.

Por qué es divertido desarmarlo: la pantalla es todo pixel art colocado a mano (cada dígito, etiqueta e ícono), y toda la interfaz se creó en Lopaka.

La pantalla

Es un panel de papel electrónico de 1,02 pulgadas: 80x128 píxeles, un bit cada uno, blanco y negro puros, controlado por GxEPD2. La tinta electrónica sigue dos reglas. No hay escala de grises ni desvanecimientos detrás de los que esconderse, así que tu diseño tiene que impactar en blanco y negro. Pero mantiene una imagen con energía cero, y ese es todo el truco detrás de la pantalla nocturna: el reloj deja de actualizarse, el panel sigue mostrando el último fotograma y la batería apenas se entera.

CLOCK-SAT tiene tres pantallas:

1. Reloj. Hora grande, una línea de ubicación, un bloque de fecha y tarjetas de humedad/temperatura.
2. Durmiente. Un ícono de luna con «Sleeping until the light come back...»
3. Cuenta atrás para dormir. «Sleep between two ray of light...» con el tiempo restante.

Reconstruiremos la pantalla 1 paso a paso. Las otras dos son el mismo truco con píxeles diferentes.

Diseñarlo en Lopaka

Esta es la única idea que importa: la pantalla está llena de datos en vivo (hora, fecha, tiempo), así que no estás escribiendo valores finales, estás colocando campos y conectando los que cambian a variables. Haz clic en un elemento de texto, pulsa el botón make-variable en el inspector, y el valor se convierte en un marcador que pasa a ser una variable en el código exportado, lista para que tu firmware introduzca el número real en tiempo de ejecución. Así que trata cada valor de ejemplo siguiente como un sustituto.

1. Proyecto nuevo. Abre lopaka.app, crea un proyecto, elige GxEPD2 como biblioteca y 80 x 128 como tamaño de pantalla.
2. Hora. Agrega una etiqueta de texto grande en la parte superior con la fuente GFX Org_01 (los pesados dígitos de píxel; impórtala en los ajustes de fuentes). La hora se actualiza cada minuto, así que haz de este valor una variable en lugar de texto fijo.
3. Línea de ubicación. Agrega una etiqueta más pequeña debajo de la hora para la ubicación y el desplazamiento, también una variable.
4. Bloque de fecha. Agrega un rectángulo relleno como tarjeta de fecha, un número de día grande y tres etiquetas apiladas junto a él: mes, día de la semana y año. Estos vienen de tu RTC, así que haz de cada uno una variable.
5. Tarjetas de sensores. Agrega una línea divisoria horizontal y luego divide la parte inferior en dos tarjetas, humedad y temperatura. Cada una tiene una etiqueta de título fija y un valor variable debajo. Una línea vertical entre ellas mantiene limpia la división.
6. Pantallas 2 y 3. Dos pantallas más. La pantalla 2 es una luna creciente sobre una línea de texto ajustada, y no tienes que dibujar la luna punto por punto: la biblioteca de íconos de Lopaka tiene una lista para colocar. La pantalla 3 es la misma receta: un encabezado, una línea y un valor de cuenta atrás (una variable, naturalmente).

Sin colores con los que lidiar, así que todo el juego es la posición, el tamaño, la fuente y decidir qué valores son variables.

Ambas pantallas de sueño son solo un ícono y algo de texto. Los mismos bloques, otro ambiente:

El código

Pulsa Export, elige GxEPD2 / Adafruit_GFX, y Lopaka escupe las llamadas de dibujo, agrupa la fuente Org_01 y reúne cada valor que marcaste en su propia variable que puedes establecer desde tu firmware. ¿Quieres la cosa real y completa? Tómala directamente del proyecto: CLOCK-SAT V1 en Lopaka.

Esta es la exportación real, recortada para su lectura. La inclusión repetida de la fuente se deduplicó y los quince rectángulos idénticos de la barra de batería se cortaron, pero cada llamada es exactamente lo que generó Lopaka:

#include "Org_01.h"

// pixel-art bitmaps
static const unsigned char PROGMEM image_POINT_DEGR__bits[] = {0xe0,0xa0,0xe0};
static const unsigned char PROGMEM image_STATUT_CHARGE_bits[] = {0x10,0x38,0x7c,0xfe,0x38,0x38,0x38,0x38,0x38};

// the values you marked as variables; your firmware sets these
const char* CHARGE___text  = "78%";
const char* Clock_2_text   = "Delhi-12:25";
const char* Date_text      = "08";
const char* Day_text       = "Saturday";
const char* Hours_text     = "20";
const char* Minutes_text   = "34";
const char* Month_text     = "MAY";
const char* Num_humid_text = "56";
const char* Num_temp_text  = "23";
const char* Year_text      = "2026";

void drawScreen_1(void) {
    display.fillScreen(GxEPD_WHITE);

    // hours : minutes, in the Org_01 pixel font
    display.setTextColor(GxEPD_BLACK);
    display.setTextSize(3);
    display.setFont(&Org_01);
    display.setCursor(3, 35);  display.print(Hours_text);
    display.setCursor(39, 35); display.print(":");
    display.setCursor(45, 35); display.print(Minutes_text);

    // location line + date card + sensor cards
    display.setTextSize(1);
    display.setCursor(17, 49); display.print(Clock_2_text);
    display.fillRect(3, 58, 29, 26, GxEPD_BLACK);
    display.setTextColor(GxEPD_WHITE);
    display.setTextSize(2);  display.setFont();
    display.setCursor(7, 78); display.print(Date_text);
    // ...month, weekday, year, Humid/Temp values, battery bar...

    display.display();
}

Suelta esa función en tu bucle de dibujo de GxEPD2, pásale tus valores en vivo, y lo que ajustaste en una pestaña del navegador aparece en el panel.

Resultado

Los mismos píxeles, del navegador al marco de latón.

Pruébalo

Crear un proyecto es gratis y se ejecuta directamente en tu navegador, sin instalación, solo lopaka.app y un lienzo GxEPD2 en blanco. ¿Quieres hacer una copia del propio CLOCK-SAT? Está guardado en la galería (un registro rápido te da acceso). Y echa un vistazo mientras estás allí: Lopaka hizo crecer una gran biblioteca de íconos, animaciones y un montón de juguetes más desde que se creó este relojito.

Créditos

CLOCK-SAT V1 de Maxime Loiseau (@maxime_loiseau_labs, reel). Diseñado en Lopaka, exportado a GxEPD2.