Show HN: Como foi criado um display flip-disc movido a JavaScript

 (flipdisc.io)
2 pontos por GN⁺ 2024-06-26 | 1 comentários | Compartilhar no WhatsApp
  • Em vez de LEDs brilhantes, o projeto usa discos que viram fisicamente para criar uma arte de parede interativa para escritório; 9 painéis AlfaZeta foram organizados em 3x3 para formar um display de 84x42
  • O hardware combina fonte de 24V 10A, estrutura de alumínio 80/20, cabeamento RS485 e Nvidia Orin Nano; para altas taxas de quadros, é preciso limitar a 6 painéis ou menos por linha RS485
  • O software é dividido na biblioteca Node.js flipdisc, que lida com frames RS485 e compressão RLE, e no flipdisc-server, responsável por fila de cenas, API REST, websockets e loop de renderização
  • PIXI, Three.js, Matter.js, GSAP, node-canvas e node-gl são usados na renderização; o reconhecimento de gestos com MediaPipe executa um script Python a partir do Node e recebe os resultados via IPC com ZeroMQ
  • Em resolução 42x84, um design de expressão adaptado à baixa resolução, como fonte de 3x5 pixels e dithering Floyd-Steinberg/Bayer, é o que determina a usabilidade real

Por que flip-disc

  • Flip-disc é um display que usa pulsos eletromagnéticos para virar pequenos discos entre duas cores; foi inventado há mais de 80 anos, mas seu princípio básico continua praticamente o mesmo
  • A escolha veio do objetivo de criar uma grande arte de parede interativa para escritório, com movimento físico e som, em vez da aparência brilhante e lisa de uma tela de LED
  • Suas características incluem alta legibilidade, longa vida útil, funcionamento na faixa de 25-60fps e um som parecido com chuva quando os discos viram
  • A abordagem foi um experimento de combinar código e mídia física, semelhante ao pixel knitting app criado anteriormente para visualização de código e à crafting tool para Atom Editor

Configuração de hardware

  • 9 Alfazeta panels foram organizados em uma grade 3x3 para criar um display de discos de 84x42
    • Cada placa é composta por dois painéis de 28x7
    • A PCB tem um antigo ATMEGA128 microcontroller, centenas de diodos MELF e dois DIP switches
    • Um DIP switch define o endereço, e o outro define o baud rate
    • Detalhes sobre as placas AlfaZeta podem ser vistos no manual
  • Placas e componentes flip-disc são difíceis de encontrar, e o mercado atual é mais voltado à demanda corporativa, como a indústria de transporte, do que a consumidores comuns
    • Se fosse refazer, valeria a pena experimentar projetar uma placa própria
    • Ter acesso ao firmware ajudaria no ajuste de desempenho
    • O custo dos painéis cresce rapidamente, dificultando a expansão para tamanhos maiores
  • Fornecedores e produtos de referência

Alimentação, estrutura e cabeamento

  • O display precisa de 24V 1A por placa; para virar todos os dots das 9 placas ao mesmo tempo, são necessários 9A no total
  • A estrutura foi feita com 80/20 aluminum extrusions, prendendo os espaçadores da PCB diretamente ao frame
    • As placas e os discos são muito frágeis; é fácil perder ou quebrar discos durante a montagem
    • Como os discos são frágeis a ponto de serem comparados a asas de borboleta, é preciso segurá-los pelas bordas e fixar as placas uma por uma com cuidado
    • Fotos da montagem final estão em photos of the final build
  • Peças 80/20 usadas
  • O cabeamento conecta cada coluna em série e depois encadeia tudo
    • As linhas de dados usam os terminais +/- do bloco RS485
    • As linhas de alimentação usam 18AWG, e os dados usam cabo blindado 22AWG
    • Para altas taxas de quadros, é preciso conectar 6 painéis ou menos a uma única linha RS485
    • O display completo usa 3 USB RS485 devices
    • Para fornecer conteúdo a partir de um servidor externo, RS485 to ethernet servers também são uma opção

Unidade de processamento e entrada/saída

  • Como o sistema usa machine learning para processar voz, vídeo e imagens, ele precisa de mais capacidade de processamento do que um computador de placa única básico ou um microcontrolador
  • A configuração real usa um Nvidia Orin Nano
  • Foi criado um Dockerfile para implantação no Jetson 6.0, e é necessário compilar a partir do código-fonte para ativar a GPU no MediaPipe
  • Como caminho mais simples, recomenda-se um M2 Mac Mini; se a interação for omitida, alternativas mais baratas como um Raspberry Pi também são possíveis

Comunicação com as placas e driver Node.js

  • A comunicação com as placas usa RS485, e o formato do frame segue a estrutura 0x80 0x83 0x01 imageData 0x8F
    • Cada frame começa com o byte inicial 0x80
    • Em seguida entram flush 0x83 ou buffer 0x84, o endereço da placa, os dados da imagem e o byte final 0x8F
    • Os dados de imagem usam apenas os dois estados 0 e 1
    • A compressão dos frames transmitidos usa RLE
  • Foi criada a biblioteca básica para Node.js flipdisc, que atualmente funciona com placas AlfaZeta e Hanover via USB e ethernet
  • É possível enviar diretamente os dados de ctx.getImageData(0, 0, width, height) de uma instância de canvas, e os dados de pixel são convertidos para 1 ou 0 conforme a luminance
  • Instalação e documentação

Renderização, interação e arquitetura do servidor

  • O objetivo não é exibir assets pré-renderizados em um dispositivo de baixo consumo, mas criar visualizações em tempo real que recebem feedback direto do usuário
  • A renderização aproveita tecnologias web existentes
    • PIXI: renderização 2D geral
    • Three.js: renderização 3D
    • Matter.js: motor de física
    • GSAP: animações
    • node-canvas e node-gl: renderização server-side
  • A interação usa as MediaPipe libraries e modelos do Google
    • Para a demonstração de reconhecimento de gestos, consulte Gesture Recognizing
    • Como muitas bibliotecas de ML usam Python, o Node executa um script Python e recebe os dados de volta via IPC com ZeroMQ
    • No futuro, Python WASM também pode ser usado
  • Cada visualização é representada como uma cena (scene) e pode ser adicionada a uma fila
    • A reprodução de cenas e o gerenciamento da fila são acessados por uma API REST
    • Dados de reprodução em tempo real são enviados por websockets
    • A useLoop function permite assinar eventos ou adicionar itens à fila de renderização
    • Cada arquivo de scene deve retornar uma scene e um schema, e opcionalmente pode ter uma background task
    • A background task é executada em um intervalo definido e, se tiver sucesso, adiciona a scene à fila de reprodução
  • Pacotes do servidor e exemplos
  • Funcionalidades tratadas pelo flipdisc-server
    • Importar scenes de um diretório
    • Live reload de arquivos de scene
    • Background task que adiciona scenes à fila
    • Componentes de UI para texto, imagens e listas
    • Flex layout baseado em Yoga
    • Getters e setup básicos para pixi/three/matter, além de conexão de módulos adicionais
    • Servidor REST e websockets para dados em tempo real
    • Loop de renderização e uso de GLSL shader

Aplicativo de controle

  • Para evitar o problema de, com o tempo, esquecer quais comandos executar e tornar o projeto difícil de usar novamente, foi criada uma interface estável separada
  • Para prototipagem rápida, foi escolhido um app em expo
  • Pelo app, é possível controlar pause, start, skip e previous do display
    • É possível definir variáveis de scene para personalizar a experiência
    • É possível desenhar livremente direto na tela
    • O Flipdisc está disponível na App Store
  • Funções do app
    • Pausar/reproduzir scene
    • Adicionar ou remover da fila
    • Avançar/voltar na fila
    • Ver em tempo real o que está sendo mostrado no display atual
    • Desenhar livremente na tela
    • Enviar configuration variable para cada scene

Design em baixa resolução

Próximos passos e projetos de referência

Leituras relacionadas

1 comentários

 
GN⁺ 2024-06-26
Comentários do Hacker News

  • Chamar de “vida útil quase infinita” talvez seja mais otimista do que a realidade permite. Discos caem ou travam com certa frequência, mas quando funciona direito é realmente muito legal, e o som em especial é ótimo
    Já trabalhei em um escritório que tinha um display flip-dot e depois desmontei esse display. Tenho uma foto mostrando como ficam os discos travados: https://photos.app.goo.gl/onpHefUVL8oeP4si7

    • Com certeza. É parecido com asa de borboleta, então os discos se soltam ou quebram com facilidade. Enquanto eu estava montando, as crianças adoravam mexer nisso, então eu precisava recolocar os discos que caíam o tempo todo
    • Fico curioso sobre como se remove a poeira. Imagino que seja aí que ocorram os danos

  • Curiosidade: o Texas Instruments DLP (Digital Light Processing) é parecido com uma versão miniaturizada de um display flip-disc
    Só que o flip-disc gira 180°, enquanto os pixels DLP apenas se inclinam um pouco para redirecionar a luz para um dissipador, e o flip-disc tem cores diferentes em cada lado, enquanto o DLP usa pixels espelhados. O flip-disc provavelmente tem vida útil finita, enquanto o DLP aguenta trilhões de ciclos, e o DLP responde extremamente rápido, na escala de microssegundos, implementando tons de cinza por modulação por ciclo de trabalho (PWM)

  • A Breakfast Studio está fazendo obras de arte incríveis com módulos flip-disc
    https://breakfaststudio.com/flip-discs

    • Há uma obra mostrando o gelo polar derretendo, e fico curioso sobre o nível de eficiência energética. Imagino que não consuma energia quando nada está virando, mas ainda assim isso me chama atenção
    • O efeito de deixar um lado prateado e o outro com um design abstrato e neutro ficou muito bom
    • O trabalho desse estúdio é realmente excelente. Se você gosta disso, também vale ver obras em “brixels” como Ocean, feita para o novo Fontainebleu Hotel em Las Vegas

  • Fico curioso sobre como o autor conseguiu os painéis exatamente. Já pesquisei isso antes e, fora lugares como o eBay, era praticamente impossível encontrar
    A menos que você estivesse disposto a comprar quantidade industrial por preço industrial. Queria saber onde comprou e quanto pagou

    • Eu comprei o meu no eBay, mas dá para comprar os mesmos painéis também pela AlfaZeta. Há opções ainda mais baratas: https://xqd-led.en.alibaba.com/productgrouplist-936470954-2/...
      Também escrevi no texto que gostaria que esses painéis ficassem mais acessíveis para hobbyistas. Se alguém quiser colaborar nisso, entre em contato
    • Comprei o mesmo painel recentemente e também li sobre o fornecedor mencionado no segundo parágrafo do texto; é um produto da AlfaZeta
      Eles fabricam e enviam da Polônia, e não há tabela pública de preços, mas um painel 7x28 sai por algo em torno de 220 euros. É caro, mas ainda não existem muitos lugares fabricando isso. Se continuar lendo o texto, também aparecem links para outros fabricantes que parecem mais baratos, incluindo vendedores no AliExpress
    • Não entendo qual é o problema com o eBay

  • Muito legal. Gosto de ver JavaScript sendo usado em algo assim
    Fiquei surpreso ao descobrir que o James Webb Telescope usa um runtime JavaScript customizado em boa parte das funcionalidades embarcadas

    • A touchscreen da cápsula SpaceX Dragon também roda um app HTML/JS feito com web components (Polymer) :D
    • Fiquei tão surpreso que fui pesquisar
      https://news.ycombinator.com/item?id=19739454
      Mesmo assim, ainda não entendo bem por que escolheram JavaScript. Segundo o artigo, é um engine JavaScript comercial: https://ui.adsabs.harvard.edu/abs/2006SPIE.6274E..0AB/abstra...
    • Fico curioso por que alguém gosta de ver uma linguagem específica sendo usada para certo tipo de coisa. Parece semelhante a ficar empolgado ao ver algo sendo feito de alumínio em vez de aço ou madeira
    • Isso é horrível. JavaScript não deveria chegar perto de nada que não fosse página web, e mesmo em página web isso já é discutível

  • Isso parece que poderia ser útil como monitor de NOC. Na maior parte do tempo seria uma exibição estática, mas quando algo desse errado a tela se atualizaria, e o som naturalmente chamaria atenção. Não seria necessário um “alarme” separado

    • Gostei dessa ideia. Dá para alertar sem um pico de adrenalina

  • Cadê a animação Touhou Bad Apple que obviamente deveria estar nesse display em preto e branco?

  • Legal. Eu também gosto de flip-dots. Comecei com um controlador em JavaScript para o display de ônibus Hanover(https://engineer.john-whittington.co.uk/2017/11/adventures-f...) e depois isso evoluiu até módulos Alfa-Zeta por causa de um pedido para criar um controlador para uma matriz de 256x56, ou seja, 24 painéis
    Na época, usei um módulo em Python(https://github.com/tuna-f1sh/flipdot), um administrador baseado em Python Flask/React e informações de sequência em um banco SQLite. O resultado era parecido com este app, com efeitos de transição pré-carregados e, claro, até Jogo da Vida: https://engineer.john-whittington.co.uk/2020/04/game-of-life...
    Está na minha lista de TODO do projeto fazer um controlador direto HDMI baseado em FPGA para módulos Alfa-Zeta. A taxa de atualização do firmware embarcado deixa um pouco a desejar

  • O começo do vídeo de demonstração lembra Ye Olde Wooden Mirror
    https://www.smoothware.com/danny/woodenmirror.html
    Ou também me fez lembrar isto, mais recente: https://tisch.nyu.edu/itp/news/spring-2024/daniel-rozin--itp...

    • Muito legal. Parece que os pixels de madeira giram e refletem mais ou menos luz para criar vários níveis de “cinza”. Genial

  • Em vez de dizer que “displays de flip-disc são uma tecnologia um tanto desconhecida”, acho que seria mais correto chamar de tecnologia de nicho. Esse nicho era a legibilidade sob luz solar
    Até poucos anos atrás, displays de flip-disc eram muito comuns em ônibus, trens e afins. Depois os LEDs melhoraram, e esse nicho desapareceu

    • No fim, era inevitável. Displays flip como esse, com peças móveis, provavelmente exigiam manutenção. O consumo de energia também deve ter sido maior, e ainda havia o ruído. Ainda me lembro daquele som que se ouvia em estações de trem e aeroportos