Hackeando o emblema da conferência GitHub Universe com tela colorida habilitada para WiFi

Hackeando o emblema da conferência GitHub Universe com tela colorida habilitada para WiFi

28 de outubro de 2025

estou em Universo GitHub esta semana (graças a um ingresso grátis da Microsoft). Ontem peguei meu crachá de conferência… que incorpora um Raspberry Pi completo Microcontrolador Raspberry Pi Pico com bateria, tela colorida, WiFi e bluetooth.

O GitHub Universe tem uma tradição de crachás de conferência hackeáveis ​​– o crachá do ano passado tinha um display eInk. A atualização deste ano é uma grande atualização – uma tela colorida e uma conexão Wi-Fi tornam este computador um pequeno computador genuinamente útil!

A única coisa que falta é um teclado – o dispositivo fornece cinco botões no total – para cima, para baixo, A, B, C. Pode ser possível fazer um teclado bluetooth funcionar, mas acredito que quando o vir – não há muito espaço neste dispositivo para um driver de teclado.

Tudo é escrito em MicroPython, e o dispositivo foi projetado para ser hackeável: conecte-o a um laptop com um cabo USB-C e você poderá começar a modificar o código diretamente no dispositivo.

Como configurar o selo

Pronto para uso, o emblema reproduzirá uma animação de abertura (implementada como uma sequência de quadros de imagem PNG) e, em seguida, mostrará uma tela inicial com seis ícones de aplicativos.

Os aplicativos padrão são, em sua maioria, demonstrações bacanas com o tema Octocat: um clone de flappy-bird, um animal de estimação no estilo tamagotchi, um aplicativo de desenho que funciona como um esboço, uma caça ao tesouro IR para o próprio local da conferência (essa coisa também tem um sensor IR!) e um aplicativo de galeria mostrando algumas imagens.

O sexto aplicativo é um aplicativo de crachá. Isso mostrará a imagem do seu perfil do GitHub e algumas estatísticas básicas, mas só funcionará se você desenterrar um cabo USB-C e fizer algumas edições diretamente nos arquivos do crachá.

Eu fiz isso em um Mac. Conectei um cabo USB-C ao crachá, o que fez com que o MacOS o tratasse como um volume de unidade conectado. Nessa unidade estão vários arquivos, incluindo secrets.py. Abra, confirme se os detalhes do WiFi estão corretos e adicione seu nome de usuário do GitHub. O arquivo deve ficar assim:

WIFI_SSID = "..."
WIFI_PASSWORD = "..."
GITHUB_USERNAME = "simonw"

O crachá vem com o SSID e a senha da rede WiFi GitHub Universe pré-preenchidos.

É isso! Desmonte o disco, aperte o botão de reinicialização na parte de trás do crachá e quando ele voltar a funcionar, o aplicativo do crachá deverá ficar parecido com isto:

Construindo seus próprios aplicativos

Aqui está a documentação oficial para construir software para o emblema.

Quando recebi o meu ontem, o repositório oficial ainda não havia sido atualizado, então tive que descobrir isso sozinho.

Copiei todo o código para o meu laptop, adicionei-o a um repositório Git e, em seguida, iniciei o Claude Code e disse:

Investigate this code and add a detailed README

Aqui está o resultadoo que foi muito útil para começar a entender como tudo funcionava.

Cada um dos seis aplicativos padrão reside em um apps/ pasta, por exemplo aplicativos/esboço/ para o aplicativo de desenho.

Há também um aplicativo de menu que alimenta a tela inicial. Isso mora em aplicativos/menu/. Você pode editar o código aqui para adicionar novos aplicativos criados a essa tela.

Eu disse ao Cláudio:

Add a new app to it available from the menu which shows network status and other useful debug info about the machine it is running on

Foi um pouco improvável, mas funcionou totalmente!

A primeira versão apresentou um erro:

Eu fiz o OCR daquela foto (com o aplicativo Apple Photos) e colei a mensagem no Claude Code e isso resolveu o problema.

Isso quase funcionou… mas a adição de um sétimo ícone à grade 2×3 significava que você poderia selecionar o ícone, mas ele não rolava para visualização. eu tinha o Cláudio conserte isso para mim também.

Aqui está o código para apps/debug/__init__.pye a transcrição completa do Código Claude criado usando meu aplicativo terminal para HTML descrito aqui.

Aqui estão as quatro telas do aplicativo de depuração:

Um editor de ícones

Os ícones usados ​​no aplicativo têm 24×24 pixels. Decidi que seria legal ter um aplicativo da web que ajudasse a construir esses ícones, incluindo a capacidade de começar criando um ícone a partir de um emoji.

Eu construí este usando artefatos de Claude. Aqui está o resultado, agora disponível em tools.simonwillison.net/icon-editor:

E um REPL

Percebi que o aplicativo de configuração de crachás do ano passado (que não consigo encontrar em github.com/badger/badger.github.io mais, acho que eles redefiniram o histórico naquele repositório?) Funcionou conversando com o MicroPython pela API Web Serial do Chrome. Aqui está minha cópia arquivada desse código.

Não seria útil ter um REPL em uma interface da web que você pudesse usar para interagir com o crachá diretamente por USB?

Apontei para Claude Code uma cópia desse repositório e disse:

Based on this build a new HTML with inline JavaScript page that uses WebUSB to simply test that the connection to the badge works and then list files on that device using the same mechanism

Demorou um pouco para cutucar (aqui está a transcrição), mas o resultado agora está disponível em tools.simonwillison.net/badge-repl. Funciona apenas no Chrome – você precisará conectar o crachá com um cabo USB-C e clicar em “Conectar ao crachá”.

Comece a hackear

Se você participa do GitHub Universe, espero que isso seja útil. O oficial texugo.github.io O site tem muito mais detalhes para ajudá-lo a começar.

Ainda não há uma maneira de obter esse hardware fora do GitHub Universe – eu sei que eles tiveram alguns desafios na cadeia de suprimentos apenas para conseguir crachás suficientes para os participantes da conferência!

É um dispositivo muito bacana, desenvolvido para GitHub por Pomerânia em Sheffield, Reino Unido. Uma versão deste deverá estar disponível no futuro sob o nome “Pimoroni Tufty 2350”.