Show HN: Bau eines per JavaScript betriebenen Flip-Disc-Displays

 (flipdisc.io)
2 Punkte von GN⁺ 2024-06-26 | 1 Kommentare | Auf WhatsApp teilen
  • Statt leuchtender LEDs wurde eine physisch umklappende Scheibe verwendet, um ein interaktives Wandkunstwerk fürs Büro zu bauen; 9 AlfaZeta-Panels wurden in einem 3x3-Raster zu einem 84x42-Display angeordnet
  • Die Hardware besteht aus 24V-10A-Stromversorgung, einem 80/20-Aluminiumrahmen, RS485-Verkabelung und einem Nvidia Orin Nano; für hohe Framerates sollte man pro RS485-Leitung höchstens 6 Panels anschließen
  • Die Software ist aufgeteilt in die Node.js-Bibliothek flipdisc für RS485-Frames und RLE-Kompression sowie flipdisc-server für Szenen-Queue, REST-API, WebSockets und Rendering-Loop
  • Für das Rendering werden PIXI, Three.js, Matter.js, GSAP, node-canvas und node-gl genutzt; für die MediaPipe-Gestenerkennung startet Node ein Python-Skript und erhält die Ergebnisse per ZeroMQ-IPC zurück
  • Bei einer Auflösung von 42x84 entscheidet eine auf geringe Auflösung abgestimmte Darstellungsgestaltung wie 3x5-Pixel-Schriften und Floyd-Steinberg- bzw. Bayer-Dithering über die praktische Nutzbarkeit

Warum Flip-Disc?

  • Flip-Disc ist ein Display, bei dem kleine Scheiben per elektromagnetischem Impuls zwischen zwei Farben umklappen; es wurde vor über 80 Jahren erfunden, doch das Grundprinzip ist bis heute weitgehend gleich geblieben
  • Statt des hellen, glatten Eindrucks eines LED-Bildschirms fiel die Wahl darauf, ein großes interaktives Wandkunstwerk fürs Büro mit physischer Bewegung und Klang zu bauen
  • Kennzeichnend sind hohe Lesbarkeit, lange Lebensdauer, Betrieb im Bereich von 25–60 fps und ein regengeräuschähnlicher Klang beim Umklappen der Scheiben
  • Ähnlich wie bei der zuvor für Code-Visualisierung gebauten pixel knitting app und dem crafting tool für Atom Editor wird das Projekt als Experiment verstanden, das Code mit physischen Medien verbindet

Hardware-Aufbau

  • 9 Alfazeta panels wurden in einem 3x3-Raster angeordnet, um ein Flip-Disc-Display mit 84x42 Scheiben zu bauen
    • Jedes Board besteht aus zwei 28x7-Panels
    • Auf dem PCB sitzen ein älterer ATMEGA128 microcontroller, mehrere hundert MELF-Dioden und zwei DIP-Schalter
    • Ein DIP-Schalter setzt die Adresse, der andere die Baudrate
    • Details zu den AlfaZeta-Boards finden sich im manual
  • Flip-Disc-Boards und Komponenten sind schwer zu beschaffen; der aktuelle Markt ist eher auf gewerbliche Nachfrage wie den Transportsektor als auf normale Verbraucher ausgerichtet
    • Würde man es neu bauen, könnte sich auch ein eigenes Board-Design als Experiment lohnen
    • Mit Zugang zur Firmware wäre Performance-Tuning einfacher
    • Die Kosten der Panels steigen schnell an, was die Skalierung auf größere Formate erschwert
  • Mögliche Bezugsquellen und Produkte

Stromversorgung, Rahmen, Verkabelung

  • Das Display benötigt pro Board 24V 1A; um bei allen 9 Boards sämtliche Punkte umzuschalten, werden insgesamt 9A benötigt
  • Der Rahmen wurde aus 80/20 aluminum extrusions gebaut, und die PCB-Abstandshalter wurden direkt am Rahmen befestigt
    • Boards und Scheiben sind sehr fragil, sodass man beim Zusammenbau leicht Scheiben verlieren oder beschädigen kann
    • Die Scheiben seien so zerbrechlich wie Schmetterlingsflügel; daher sollte man die Kanten greifen und die Boards einzeln vorsichtig montieren
    • Fotos des fertigen Aufbaus gibt es unter photos of the final build
  • Verwendete 80/20-Komponenten
  • Die Verkabelung verbindet jede Spalte seriell und hängt dann alles zu einer Kette zusammen
    • Für die Datenleitungen werden die +/- der RS485-Blockklemmen genutzt
    • Für Strom kommt 18AWG zum Einsatz, für Daten ein abgeschirmtes 22AWG-Kabel
    • Für hohe Framerates sollten pro RS485-Leitung nicht mehr als 6 Panels angeschlossen werden
    • Für das gesamte Display wurden 3 USB RS485 devices verwendet
    • Soll Content von einem externen Server kommen, sind auch RS485 to ethernet servers eine Option

Recheneinheit und Ein-/Ausgabe

  • Da für die Verarbeitung von Sprache, Video und Bildern Machine Learning genutzt wird, wird mehr Rechenleistung benötigt als bei einem typischen Single-Board-Computer oder Mikrocontroller
  • Im realen Aufbau wird ein Nvidia Orin Nano verwendet
  • Es wurde ein Dockerfile für das Deployment auf Jetson 6.0 erstellt; für aktiviertes MediaPipe-GPU muss aus dem Quellcode kompiliert werden
  • Als einfacheren Weg wird ein M2 Mac Mini empfohlen; wenn man auf Interaktivität verzichtet, reicht eventuell auch eine günstigere Lösung wie ein Raspberry Pi

Board-Kommunikation und Node.js-Treiber

  • Für die Kommunikation mit den Boards wird RS485 verwendet; das Frame-Format hat die Struktur 0x80 0x83 0x01 imageData 0x8F
    • Jedes Frame beginnt mit dem Start-Byte 0x80
    • Danach folgen flush 0x83 oder buffer 0x84, Board-Adresse, Bilddaten und das End-Byte 0x8F
    • Die Bilddaten nutzen nur die beiden Zustände 0 und 1
    • Zur Kompression der übertragenen Frames wird RLE verwendet
  • Es wurde die grundlegende Node.js-Bibliothek flipdisc erstellt, die derzeit über USB und Ethernet mit AlfaZeta- und Hanover-Boards funktioniert
  • Die Daten aus ctx.getImageData(0, 0, width, height) einer Canvas-Instanz können direkt gesendet werden; anhand der luminance werden Pixel in 1 oder 0 umgewandelt
  • Installation und Dokumentation

Rendering, Interaktion und Server-Architektur

  • Ziel ist nicht, vorgerenderte Assets auf einem stromsparenden Gerät anzuzeigen, sondern Echtzeitvisualisierungen zu schaffen, die direkt auf Nutzer-Feedback reagieren
  • Für das Rendering werden bestehende Web-Technologien genutzt
    • PIXI: allgemeines 2D-Rendering
    • Three.js: 3D-Rendering
    • Matter.js: Physik-Engine
    • GSAP: Animation
    • node-canvas und node-gl: serverseitiges Rendering
  • Für die Interaktion werden Google-MediaPipe libraries und Modelle verwendet
    • Für die Demo zur Gestenerkennung siehe Gesture Recognizing
    • Da viele ML-Bibliotheken Python nutzen, startet Node Python-Skripte und erhält die Daten per ZeroMQ-IPC zurück
    • Künftig könnte auch Python WASM genutzt werden
  • Visualisierungen werden jeweils als Szene (scene) dargestellt und können einer Queue hinzugefügt werden
    • Zugriff auf Szenenwiedergabe und Queue-Verwaltung erfolgt über eine REST-API
    • Daten für die Echtzeitwiedergabe werden per WebSocket übertragen
    • Mit der useLoop function kann man Events abonnieren oder der Rendering-Queue Inhalte hinzufügen
    • Jede scene-Datei muss scene und schema zurückgeben und kann optional background tasks enthalten
    • Background tasks laufen in festgelegten Intervallen und fügen bei Erfolg eine scene zur Wiedergabe-Queue hinzu
  • Server-Paket und Beispiele
  • Funktionen von flipdisc-server
    • Import von scenes aus einem Verzeichnis
    • Live-Reload von scene-Dateien
    • Background tasks zum Hinzufügen von scenes zur Queue
    • UI-Komponenten für Text, Bilder und Listen
    • Flex-Layout auf Basis von Yoga
    • Standard-Getter und Setup für pixi/three/matter sowie Anbindung zusätzlicher Module
    • REST-Server und WebSocket für Echtzeitdaten
    • Rendering-Loop und Nutzung von GLSL-Shadern

Steuerungs-App

  • Um zu vermeiden, dass man mit der Zeit vergisst, welche Befehle auszuführen sind, und das Projekt deshalb schwer wieder aufnehmen kann, wurde separat eine stabile Schnittstelle gebaut
  • Für schnelles Prototyping fiel die Wahl auf eine expo-App
  • Über die App lassen sich pause, start, skip und previous des Displays steuern
    • Über scene-Variablen lässt sich das Erlebnis personalisieren
    • Man kann direkt auf dem Bildschirm frei zeichnen
    • Die App Flipdisc ist im App Store verfügbar
  • Funktionen der App
    • scene pausieren/abspielen
    • Zur Queue hinzufügen oder daraus entfernen
    • In der Queue zum nächsten/vorherigen Element wechseln
    • In Echtzeit sehen, was aktuell auf dem Display angezeigt wird
    • Frei auf dem Bildschirm zeichnen
    • Configuration variables an jede scene senden

Design bei niedriger Auflösung

Nächste Schritte und Referenzprojekte

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-06-26
Kommentare auf Hacker News

  • „Nahezu unbegrenzte Lebensdauer“ ist vielleicht nicht so unbegrenzt, wie man hoffen würde. Es kommt recht häufig vor, dass Disks herausfallen oder hängen bleiben, aber wenn sie richtig funktionieren, sind sie wirklich cool, vor allem wegen des Sounds.
    Früher war ich in einem Büro mit einer Flip-Dot-Anzeige, und später haben wir diese Anzeige zerlegt. Ich habe ein Foto davon, wie eine hängengebliebene Disk aussieht: https://photos.app.goo.gl/onpHefUVL8oeP4si7

    • Absolut. Sie sind ähnlich wie Schmetterlingsflügel, daher lösen sich die Disks leicht oder brechen ab. Während des Baus mochten die Kinder es, sie anzufassen, also musste ich immer wieder herausgefallene Disks ersetzen.
    • Ich frage mich, wie man Staub entfernt. Vermutlich kommt es genau dabei zu Beschädigungen.

  • Interessante Tatsache: Texas Instruments DLP (Digital Light Processing) ähnelt einer miniaturisierten Version eines Flip-Disk-Displays.
    Allerdings drehen sich Flip-Disks um 180°, während DLP-Pixel nur ein wenig gekippt werden, um das Licht in Richtung Kühlkörper zu lenken; außerdem haben Flip-Disks auf beiden Seiten unterschiedliche Farben, während DLP aus Spiegelpixeln besteht. Flip-Disks haben sehr wahrscheinlich eine begrenzte Lebensdauer, während DLP Billionen von Zyklen aushält. DLP reagiert im Mikrosekundenbereich extrem schnell und erzeugt Graustufen per Duty-Cycle-Modulation (PWM).

  • Breakfast Studio erstellt großartige Kunstwerke mit Flip-Disk-Modulen.
    https://breakfaststudio.com/flip-discs

    • Es gibt ein Werk, das schmelzendes Polareis zeigt, und ich frage mich, wie es um die Energieeffizienz steht. Wenn nichts umklappt, dürfte es zwar keinen Strom verbrauchen, aber es beschäftigt mich trotzdem.
    • Der Effekt, eine Seite silbern und die andere mit einem abstrakten, neutralen Design zu belassen, ist wirklich gelungen.
    • Die Arbeiten dieses Studios sind wirklich hervorragend. Wenn man so etwas mag, lohnt sich auch ein Blick auf ihre „brixels“-Arbeiten wie Ocean für das neue Fontainebleu Hotel in Las Vegas.

  • Ich frage mich, wie genau der Autor an die Panels gekommen ist. Ich hatte mich früher einmal danach umgesehen, aber außer über Orte wie eBay waren sie praktisch nicht zu bekommen.
    Es sei denn, man war bereit, industrielle Stückzahlen zu Industriepreisen zu kaufen. Ich wüsste gern, wo er sie gekauft hat und wie viel sie gekostet haben.

    • Meine habe ich bei eBay gekauft, aber dieselben Panels kann man auch bei AlfaZeta kaufen. Es gibt auch günstigere Optionen: https://xqd-led.en.alibaba.com/productgrouplist-936470954-2/...
      Im Artikel habe ich auch geschrieben, dass ich mir wünschen würde, solche Panels würden für Hobbyentwickler günstiger werden. Wer in diese Richtung zusammenarbeiten möchte, kann sich gern melden.
    • Ich habe kürzlich dasselbe Panel gekauft und auch die im zweiten Absatz des Artikels genannte Bezugsquelle gelesen; es ist ein Produkt von AlfaZeta.
      Es wird in Polen hergestellt und verschickt, es gibt keine öffentliche Preisliste, aber ein 7x28-Panel kostet ungefähr 220 Euro. Teuer, aber es gibt nicht viele Hersteller, die so etwas noch produzieren. Wenn man weiterliest, findet man auch Links zu anderen Herstellern, die günstiger erscheinen, darunter solche auf AliExpress.
    • Ich verstehe nicht, was an eBay das Problem sein soll.

  • Wirklich cool. Es gefällt mir, JavaScript in so einem Einsatz zu sehen.
    Ich war überrascht zu erfahren, dass das James-Webb-Teleskop für einen großen Teil seiner Onboard-Funktionen eine angepasste JavaScript-Runtime verwendet.

    • Die Touchscreens der SpaceX-Dragon-Kapsel laufen ebenfalls als HTML/JS-App mit Web Components (Polymer) :D
    • Das hat mich so überrascht, dass ich danach gesucht habe.
      https://news.ycombinator.com/item?id=19739454
      Trotzdem ist mir noch nicht ganz klar, warum JavaScript gewählt wurde. Laut Paper handelt es sich um eine kommerzielle JavaScript-Engine: https://ui.adsabs.harvard.edu/abs/2006SPIE.6274E..0AB/abstra...
    • Ich frage mich, warum man sich darüber freut, dass eine bestimmte Sprache für einen bestimmten Zweck verwendet wird. Es wirkt ähnlich, als würde man begeistert sein, wenn etwas aus Aluminium statt aus Stahl oder Holz gebaut wird.
    • Das ist schrecklich. JavaScript sollte sich von allem fernhalten, was keine Webseite ist, und selbst bei Webseiten ist es eigentlich fragwürdig.

  • Das könnte als NOC-Monitor nützlich sein. Meistens zeigt er etwas Statisches an, aber wenn etwas schiefläuft, wird die Anzeige aktualisiert, und das Geräusch zieht ganz natürlich Aufmerksamkeit auf sich. Ein separater „Alarm“ ist nicht nötig.

    • Gute Idee. So kann man Benachrichtigungen geben, ohne einen Adrenalinschub auszulösen.

  • Wo ist auf diesem Schwarz-Weiß-Display die obligatorische Touhou Bad Apple-Animation?

  • Schön. Ich mag Flip-Dots auch. Ich habe mit einem JavaScript-Controller für Hanover-Busdisplays angefangen (https://engineer.john-whittington.co.uk/2017/11/adventures-f...) und bin später über einen Auftrag für einen Controller im Format 256x56, also für 24 Panels, bis zu Alfa-Zeta-Modulen gekommen.
    Damals habe ich ein Python-Modul (https://github.com/tuna-f1sh/flipdot), ein Admin-Tool auf Basis von Python Flask/React und Sequenzinformationen aus einer SQLite-DB verwendet. Das Ergebnis ähnelte dieser App, inklusive vorab geladener Übergangseffekte und natürlich Game of Life: https://engineer.john-whittington.co.uk/2020/04/game-of-life...
    Auf meiner Projekt-TODO-Liste steht, einen FPGA-basierten direkten HDMI-Controller für Alfa-Zeta-Module zu bauen. Die Bildwiederholrate der eingebauten Firmware ist etwas enttäuschend.

  • Der Anfang des Demo-Videos erinnert mich an Ye Olde Wooden Mirror
    https://www.smoothware.com/danny/woodenmirror.html
    Oder auch an dieses neuere Beispiel: https://tisch.nyu.edu/itp/news/spring-2024/daniel-rozin--itp...

    • Cool. Es sieht so aus, als würden sich die Holzpixel drehen und dabei mehr oder weniger Licht reflektieren, um mehrere Abstufungen von „Grau“ zu erzeugen. Genial.

  • Statt „Flip-Disk-Displays sind eine eher unbekannte Technologie“ wäre Nischentechnologie wohl treffender. Diese Nische war die Lesbarkeit bei Sonnenlicht.
    Noch vor ein paar Jahren waren Flip-Disk-Displays in Bussen, Zügen usw. sehr verbreitet. Dann wurden LEDs besser, und diese Nische verschwand.

    • Am Ende musste es wohl so kommen. Solche Flip-Displays mit beweglichen Teilen dürften wartungsintensiv gewesen sein. Auch der Stromverbrauch dürfte höher gewesen sein, und laut waren sie auch. Ich erinnere mich noch an dieses Geräusch, das man früher in Bahnhöfen und Flughäfen gehört hat.