Show HN: Cómo construí una pantalla de discos flip impulsada por JavaScript

 (flipdisc.io)
2 puntos por GN⁺ 2024-06-26 | 1 comentarios | Compartir por WhatsApp
  • En vez de LEDs brillantes, creó arte mural interactivo para oficina usando discos que se voltean físicamente, y armó una pantalla de 84x42 con 9 paneles AlfaZeta en una disposición 3x3
  • El hardware combina una fuente de 24V 10A, un marco de aluminio 80/20, cableado RS485 y una Nvidia Orin Nano; si se quiere una alta tasa de cuadros, hay que limitarse a 6 paneles o menos por línea RS485
  • El software se divide en la biblioteca de Node.js flipdisc, que maneja frames RS485 y compresión RLE, y flipdisc-server, que se encarga de la cola de escenas, la API REST, WebSockets y el loop de renderizado
  • Para el renderizado usa PIXI, Three.js, Matter.js, GSAP, node-canvas y node-gl; para el reconocimiento de gestos con MediaPipe, ejecuta un script de Python desde Node y recibe los resultados mediante IPC con ZeroMQ
  • En una resolución de 42x84, el diseño expresivo adaptado a baja resolución, como fuentes de 3x5 píxeles y dithering Floyd-Steinberg/Bayer, determina la usabilidad real

Por qué discos flip

  • Un disco flip es una pantalla que usa pulsos electromagnéticos para voltear pequeños discos entre dos colores; fue inventada hace más de 80 años, pero el principio básico sigue siendo casi el mismo
  • Se eligió para crear una gran obra de arte mural interactiva para oficina, con movimiento físico y sonido, en lugar de la sensación brillante y pulida de una pantalla LED
  • Se caracteriza por su alta legibilidad, larga vida útil, funcionamiento en el rango de 25-60fps y un sonido parecido a la lluvia cuando los discos se voltean
  • Se abordó como un experimento que combina código y medios físicos, similar a la pixel knitting app creada antes para visualización de código y a una herramienta de crafting para Atom Editor

Configuración de hardware

  • Se colocaron 9 paneles Alfazeta en una cuadrícula 3x3 para crear una pantalla de 84x42 discos
    • Cada placa está compuesta por dos paneles de 28x7
    • La PCB incluye un antiguo microcontrolador ATMEGA128, cientos de diodos MELF y 2 interruptores DIP
    • Un interruptor DIP configura la dirección y el otro la velocidad en baudios
    • Los detalles sobre las placas AlfaZeta se pueden consultar en el manual
  • Las placas y piezas de discos flip son difíciles de conseguir, y el mercado actual está más orientado a la demanda empresarial, como la industria del transporte, que a consumidores generales
    • Si lo volviera a hacer, valdría la pena experimentar con el diseño de placas propias
    • Tener acceso al firmware ayudaría a ajustar el rendimiento
    • El costo de los paneles aumenta rápidamente, lo que dificulta escalar a tamaños mayores
  • Proveedores y productos de referencia

Energía, marco y cableado

  • La pantalla requiere 24V 1A por placa, y para voltear todos los puntos de las 9 placas se necesitan 9A en total
  • El marco se construyó con perfiles de aluminio 80/20 y los separadores de la PCB se fijaron directamente al marco
    • Las placas y los discos son muy frágiles, por lo que es fácil perder o romper discos durante el ensamblaje
    • Los discos son tan delicados que se comparan con alas de mariposa, así que hay que sujetar los bordes y montar las placas una por una con cuidado
    • Las fotos terminadas están en photos of the final build
  • Piezas 80/20 utilizadas
  • El cableado conecta cada columna en serie y luego encadena todo el conjunto
    • Las líneas de datos usan los terminales +/- del bloque RS485
    • Se usó cable 18AWG para energía y cable blindado 22AWG para datos
    • Si se quiere una alta tasa de cuadros, hay que conectar 6 paneles o menos por cada línea RS485
    • Para toda la pantalla se usaron 3 dispositivos USB RS485
    • Si se quiere servir contenido desde un servidor externo, los servidores RS485 a Ethernet también son una opción

Unidad de procesamiento y entrada/salida

  • Como usa machine learning para procesar voz, video e imágenes, necesita más capacidad de procesamiento que una computadora de placa única básica o un microcontrolador
  • La configuración real usa una Nvidia Orin Nano
  • Se creó un Dockerfile para desplegar en Jetson 6.0, y para habilitar la GPU en MediaPipe hay que compilar desde el código fuente
  • Como ruta más sencilla se recomienda una M2 Mac Mini; si se omite la interacción, también es posible una opción más barata como Raspberry Pi

Comunicación con la placa y driver en Node.js

  • La comunicación con las placas usa RS485 y el formato de frame tiene la estructura 0x80 0x83 0x01 imageData 0x8F
    • Cada frame empieza con el byte de inicio 0x80
    • Luego incluye flush 0x83 o buffer 0x84, la dirección de la placa, los datos de imagen y el byte de cierre 0x8F
    • Los datos de imagen solo usan dos estados, 0 y 1
    • Para comprimir los frames transmitidos se usa RLE
  • Se creó la biblioteca básica para Node.js flipdisc, que actualmente funciona con placas AlfaZeta y Hanover vía USB y Ethernet
  • Se pueden enviar directamente los datos de ctx.getImageData(0, 0, width, height) de una instancia de canvas, y los datos de píxeles se convierten en 1 o 0 según la luminancia
  • Instalación y documentación

Renderizado, interacción y estructura del servidor

  • El objetivo no es mostrar assets prerenderizados en dispositivos de bajo consumo, sino crear visualizaciones en tiempo real que reciban feedback directo de los usuarios
  • Para el renderizado se aprovechan tecnologías web existentes
    • PIXI: renderizado 2D general
    • Three.js: renderizado 3D
    • Matter.js: motor de física
    • GSAP: animación
    • node-canvas y node-gl: renderizado del lado del servidor
  • Para la interacción se usan modelos y bibliotecas MediaPipe de Google
    • Para una demo de reconocimiento de gestos, consultar Gesture Recognizing
    • Como muchas bibliotecas de ML usan Python, se ejecuta un script de Python desde Node y se devuelven los datos mediante IPC con ZeroMQ
    • En el futuro también podría usarse Python WASM
  • Cada visualización se expresa como una escena (scene) y se puede agregar a una cola
    • La reproducción de escenas y la administración de la cola se acceden mediante una API REST
    • Los datos de reproducción en tiempo real se transmiten por WebSockets
    • Con la función useLoop se pueden suscribir eventos o agregarlos a la cola de renderizado
    • Cada archivo de scene debe devolver una scene y un schema, y opcionalmente puede tener una background task
    • La background task se ejecuta a intervalos definidos y, si tiene éxito, agrega una scene a la cola de reproducción
  • Paquete del servidor y ejemplos
  • Funciones que maneja flipdisc-server
    • Importar scenes desde un directorio
    • Live reload de archivos scene
    • Background tasks que agregan scenes a la cola
    • Componentes de UI para texto, imágenes y listas
    • Flex layout basado en Yoga
    • Getters y configuración básica de pixi/three/matter, y conexión de módulos adicionales
    • Servidor REST y WebSockets para datos en tiempo real
    • Loop de renderizado y uso de shaders GLSL

App de control

  • Para evitar el problema de olvidar con el tiempo qué comandos ejecutar y que el proyecto se vuelva difícil de retomar, se creó una interfaz estable por separado
  • Para prototipado rápido se eligió una app con expo
  • Desde la app se puede controlar pause, start, skip y previous de la pantalla
    • Se pueden configurar variables de scene para personalizar la experiencia
    • Se puede dibujar libremente directo en la pantalla
    • La app Flipdisc está disponible en App Store
  • Funciones de la app
    • Pausar/reproducir scene
    • Agregar o quitar de la cola
    • Ir al siguiente/anterior en la cola
    • Ver en tiempo real lo que se muestra en la pantalla actual
    • Dibujar libremente en la pantalla
    • Enviar variables de configuración a cada scene

Diseño en baja resolución

Próximos pasos y proyectos de referencia

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-06-26
Opiniones en Hacker News

  • Puede que “vida útil casi infinita” no sea tan infinita como uno esperaría. Es bastante común que los discos se caigan o se traben, pero cuando funcionan bien se ven increíbles y, sobre todo, suenan genial.
    Antes trabajé en una oficina que tenía una pantalla flip-dot y más tarde la desarmé. Tengo una foto de cómo se ve un disco trabado: https://photos.app.goo.gl/onpHefUVL8oeP4si7

    • Totalmente. Son parecidos a alas de mariposa, así que los discos se salen o se rompen con facilidad. Mientras lo construía, a los niños les encantaba tocarlos, así que tenía que seguir reemplazando los discos caídos.
    • Me pregunto cómo se les quita el polvo. Probablemente ahí es cuando se producen daños.

  • Dato curioso: Texas Instruments DLP (Digital Light Processing) es parecido a una versión miniaturizada de una pantalla flip-disc.
    Eso sí, los flip-discs giran 180°, mientras que los píxeles DLP solo se inclinan un poco para desviar la luz hacia el disipador; los flip-discs tienen colores distintos en cada cara, mientras que DLP usa píxeles-espejo. Es muy probable que los flip-discs tengan una vida útil finita, mientras que DLP aguanta billones de ciclos; además, DLP responde muy rápido, en microsegundos, e implementa escala de grises mediante modulación por ciclo de trabajo (PWM).

  • Breakfast Studio está haciendo obras de arte increíbles con módulos flip-disc.
    https://breakfaststudio.com/flip-discs

    • Tienen una obra que muestra el deshielo de los polos, y me pregunto qué tan buena será su eficiencia energética. Supongo que no consume energía cuando no se voltea nada, pero igual me da curiosidad.
    • El efecto de dejar un lado plateado y el otro con un diseño abstracto y neutro es muy bueno.
    • Las obras de este estudio son realmente excelentes. Si te gusta esto, también vale la pena ver sus obras tipo “brixels”, como Ocean, hecha para el nuevo Fontainebleu Hotel de Las Vegas.

  • Me pregunto cómo consiguió exactamente el autor los paneles. Hace tiempo investigué esto y, fuera de lugares como eBay, era prácticamente imposible conseguirlos.
    A menos que estuvieras dispuesto a comprar cantidades industriales a precios industriales. Me gustaría saber dónde los compró y cuánto costaron.

    • El mío lo compré en eBay, pero también se puede comprar el mismo panel en AlfaZeta. Hay opciones más baratas: https://xqd-led.en.alibaba.com/productgrouplist-936470954-2/...
      En el artículo también escribí que me gustaría que estos paneles se volvieran más accesibles para desarrolladores aficionados. Si alguien quiere colaborar en esa dirección, que me contacte.
    • Hace poco compré el mismo panel y también leí el proveedor mencionado en el segundo párrafo del artículo: es de AlfaZeta.
      Lo fabrican y envían desde Polonia; no tienen una lista pública de precios, pero un panel de 7x28 cuesta aproximadamente 220 euros. Es caro, pero todavía no hay muchos lugares que fabriquen estas cosas. Si sigues leyendo el artículo, también aparecen enlaces a otros fabricantes que parecen más baratos, incluidos algunos de AliExpress.
    • No sé cuál es el problema con eBay.

  • Realmente genial. Me gusta ver JavaScript usado en cosas como esta.
    Me sorprendió enterarme de que el James Webb Telescope usa un runtime JavaScript personalizado para buena parte de sus funciones a bordo.

    • Las pantallas táctiles de la cápsula SpaceX Dragon también funcionan como una app HTML/JS hecha con Web Components (Polymer) :D
    • Me sorprendió tanto que lo busqué.
      https://news.ycombinator.com/item?id=19739454
      Aun así, todavía no entiendo bien por qué eligieron JavaScript. Según el paper, es un motor JavaScript comercial: https://ui.adsabs.harvard.edu/abs/2006SPIE.6274E..0AB/abstra...
    • Me da curiosidad por qué a alguien le gusta que cierto lenguaje se use para cierto propósito. Me parece parecido a emocionarse por ver algo hecho de aluminio en vez de acero o madera.
    • Eso es horrible. JavaScript no debería acercarse a nada que no sea una página web, y hasta en páginas web es cuestionable.

  • Creo que esto podría ser útil como monitor de NOC. La mayor parte del tiempo mostraría algo estático, pero si algo sale mal la pantalla se actualiza, y el sonido atraería la atención de forma natural. No hace falta una “alarma” aparte.

    • Me gusta esta idea. Puede dar avisos sin provocar una subida de adrenalina.

  • ¿Dónde está la animación de Touhou Bad Apple que obviamente debería estar en esta pantalla en blanco y negro?

  • Qué bueno. A mí también me gustan los flip-dot. Empecé con un controlador JavaScript para pantallas de autobuses Hanover (https://engineer.john-whittington.co.uk/2017/11/adventures-f...), y luego, a partir de un encargo para crear un controlador de 256x56, es decir, de 24 paneles, terminé llegando hasta los módulos Alfa-Zeta.
    En ese momento usé un módulo de Python (https://github.com/tuna-f1sh/flipdot), un administrador basado en Python Flask/React y la información de secuencias en una base de datos SQLite. El resultado se parecía a esta app, con efectos de transición precargados y, por supuesto, hasta el Juego de la vida: https://engineer.john-whittington.co.uk/2020/04/game-of-life...
    Tengo en mi lista de TODO del proyecto hacer un controlador HDMI directo basado en FPGA para módulos Alfa-Zeta. La velocidad de refresco del firmware integrado deja un poco que desear.

  • El inicio del video demo me hizo recordar a Ye Olde Wooden Mirror
    https://www.smoothware.com/danny/woodenmirror.html
    O también a este, más reciente: https://tisch.nyu.edu/itp/news/spring-2024/daniel-rozin--itp...

    • Genial. Parece que los píxeles de madera giran para reflejar más o menos luz y crear varios niveles de “gris”. Ingenioso.

  • Más que decir que “las pantallas flip-disc son una tecnología algo poco conocida”, creo que sería más correcto llamarlas una tecnología de nicho. Ese nicho era la legibilidad bajo la luz del sol.
    Hasta hace unos años, las pantallas flip-disc eran muy comunes en autobuses, trenes y similares. Luego los LED mejoraron y ese nicho desapareció.

    • Al final, tenía que terminar así. Es muy probable que este tipo de pantallas flip con partes móviles necesitaran mantenimiento. También habrán consumido más energía, y hacían ruido. Todavía recuerdo ese sonido que se oía antes en estaciones de tren y aeropuertos.