CLOCK-SAT V1: Projetando uma UI de relógio de mesa e-ink no Lopaka

O dispositivo

O CLOCK-SAT V1 é um relógio de mesa de Maxime Loiseau, embora “relógio de mesa” realmente faça pouco jus a ele. Um módulo de papel eletrônico de 1,02 polegada flutua dentro de uma moldura fina de arame de latão com pequenas asinhas de célula solar, então o conjunto todo parece um satélite minúsculo que pousou na sua mesa. Ele mostra a hora, a data e a umidade e a temperatura do ambiente, e depois se recolhe a uma tela de “dormindo” quando as luzes se apagam.

Por que é divertido desmontá-lo: o display é todo pixel art posicionado à mão (cada dígito, rótulo e ícone), e toda a UI foi construída no Lopaka.

A tela

É um painel de papel eletrônico de 1,02 polegada: 80x128 pixels, um bit cada, preto e branco puros, comandado por GxEPD2. O e-ink joga com duas regras. Não há escala de cinza ou transições para se esconder atrás, então seu layout precisa acertar em cheio em preto e branco. Mas ele mantém uma imagem com consumo zero de energia, e esse é todo o truque por trás da tela noturna: o relógio para de atualizar, o painel continua mostrando o último quadro e a bateria quase não percebe.

O CLOCK-SAT tem três telas:

1. Relógio. Hora grande, uma linha de local, um bloco de data e cartões de umidade/temperatura.
2. Dormindo. Um ícone de lua com "Sleeping until the light come back..."
3. Contagem regressiva para dormir. "Sleep between two ray of light..." com o tempo restante.

Vamos reconstruir a Tela 1 passo a passo. As outras duas são o mesmo truque com pixels diferentes.

Projetando no Lopaka

Aqui está a ideia que importa: a tela está cheia de dados ao vivo (hora, data, clima), então você não está digitando valores finais, você está posicionando campos e conectando os que mudam a variáveis. Clique em um elemento de texto, clique no botão tornar-variável no inspetor, e o valor vira um espaço reservado que se transforma em uma variável no código exportado, pronto para o seu firmware inserir o número real em tempo de execução. Então trate cada valor de exemplo abaixo como um substituto.

1. Novo projeto. Abra lopaka.app, crie um projeto, escolha GxEPD2 como biblioteca e 80 x 128 como tamanho do display.
2. Hora. Adicione um rótulo de texto grande no topo, na fonte GFX Org_01 (os dígitos pesados em pixel; importe-a nas configurações de fonte). A hora é atualizada a cada minuto, então torne esse valor uma variável em vez de texto fixo.
3. Linha de local. Adicione um rótulo menor abaixo da hora para o local e o deslocamento, também uma variável.
4. Bloco de data. Adicione um retângulo preenchido como cartão de data, um número grande do dia e três rótulos empilhados ao lado dele: mês, dia da semana e ano. Eles vêm do seu RTC, então torne cada um uma variável.
5. Cartões de sensores. Adicione uma linha divisória horizontal e, depois, divida a parte inferior em dois cartões, umidade e temperatura. Cada um tem um rótulo de título fixo e um valor variável abaixo dele. Uma linha vertical entre eles mantém a divisão limpa.
6. Tela 2 e 3. Mais duas telas. A Tela 2 é uma lua crescente sobre uma linha de texto quebrada, e você não precisa desenhar a lua ponto a ponto: a biblioteca de ícones do Lopaka tem uma pronta para inserir. A Tela 3 segue a mesma receita: um título, uma linha e um valor de contagem regressiva (uma variável, naturalmente).

Sem cores para domar, então o jogo todo é posição, tamanho, fonte e decidir quais valores são variáveis.

As duas telas de sono são apenas um ícone e um pouco de texto. Os mesmos blocos de construção, clima diferente:

O código

Clique em Exportar, escolha GxEPD2 / Adafruit_GFX, e o Lopaka entrega os comandos de desenho, inclui a fonte Org_01 e coloca cada valor que você marcou em sua própria variável, que você pode definir a partir do seu firmware. Quer a coisa real e completa? Pegue direto do projeto: CLOCK-SAT V1 no Lopaka.

Aqui está a exportação real, cortada para leitura. O include repetido da fonte foi deduplicado e os quinze retângulos idênticos da barra de bateria foram cortados, mas cada chamada é exatamente o que o Lopaka gerou:

#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();
}

Coloque essa função no seu loop de desenho GxEPD2, passe seus valores ao vivo e aquilo que você ajustou em uma aba do navegador aparece no painel.

Resultado

Os mesmos pixels, do navegador à moldura de latão.

Experimente

Criar um projeto é gratuito e roda direto no seu navegador, sem instalação, basta lopaka.app e uma tela de desenho GxEPD2 em branco. Quer fazer cópia do próprio CLOCK-SAT? Ele está guardado na galeria (um cadastro rápido libera o acesso). E aproveite para dar uma espiada enquanto estiver por lá: o Lopaka ganhou uma grande biblioteca de ícones, animações e um monte de outras coisas desde que este reloginho foi construído.

Créditos

CLOCK-SAT V1 por Maxime Loiseau (@maxime_loiseau_labs, reel). Projetado no Lopaka, exportado para GxEPD2.