Show HN : récit de la création d’un affichage à disques basculants piloté par JavaScript

 (flipdisc.io)
2 points par GN⁺ 2024-06-26 | 1 commentaires | Partager sur WhatsApp
  • Au lieu de LED lumineuses, le projet utilise des disques qui basculent physiquement pour créer une œuvre murale interactive de bureau, avec 9 panneaux AlfaZeta disposés en 3x3 pour former un affichage 84x42
  • Le matériel réunit une alimentation 24 V 10 A, un châssis en aluminium 80/20, un câblage RS485 et un Nvidia Orin Nano ; pour obtenir une fréquence d’images élevée, il faut limiter chaque ligne RS485 à 6 panneaux ou moins
  • Le logiciel est séparé entre la bibliothèque Node.js flipdisc, qui gère les trames RS485 et la compression RLE, et flipdisc-server, qui prend en charge la file de scènes, l’API REST, les websockets et la boucle de rendu
  • PIXI, Three.js, Matter.js, GSAP, node-canvas et node-gl sont utilisés pour le rendu ; la reconnaissance de gestes MediaPipe exécute un script Python depuis Node puis reçoit les résultats via IPC ZeroMQ
  • À une résolution de 42x84, des choix d’expression adaptés à la basse résolution, comme une police 3x5 pixels et le dithering Floyd-Steinberg ou Bayer, déterminent l’utilisabilité réelle

Pourquoi le flip-disc

  • Le flip-disc est un affichage qui fait basculer de petits disques entre deux couleurs au moyen d’impulsions électromagnétiques ; il a été inventé il y a plus de 80 ans, mais son principe de base reste aujourd’hui largement identique
  • Il a été choisi pour créer une grande œuvre murale interactive de bureau avec du mouvement physique et du son, plutôt que l’aspect lumineux et lisse d’un écran LED
  • Ses caractéristiques : une forte lisibilité, une longue durée de vie, un fonctionnement entre 25 et 60 fps, et un son semblable à la pluie lorsque les disques basculent
  • Comme pour la pixel knitting app créée auparavant pour visualiser du code, et le crafting tool pour Atom Editor, l’approche consiste à expérimenter l’association du code et d’un support physique

Configuration matérielle

  • 9 panneaux Alfazeta sont disposés en grille 3x3 pour créer un affichage à 84x42 disques
    • Chaque carte est composée de deux panneaux 28x7
    • Le PCB contient un ancien microcontrôleur ATMEGA128, des centaines de diodes MELF et deux interrupteurs DIP
    • Un interrupteur DIP définit l’adresse, l’autre le débit en bauds
    • Les détails sur les cartes AlfaZeta sont disponibles dans le manual
  • Les cartes flip-disc et les composants sont difficiles à trouver, et le marché actuel vise davantage la demande professionnelle, comme le secteur du transport, que le grand public
    • Si c’était à refaire, concevoir ses propres cartes vaudrait aussi la peine d’être expérimenté
    • Avoir accès au firmware serait un avantage pour optimiser les performances
    • Le coût des panneaux augmente rapidement, ce qui rend l’extension vers des tailles plus grandes difficile
  • Fournisseurs et produits à consulter

Alimentation, châssis et câblage

  • L’affichage nécessite 24 V 1 A par carte ; pour retourner tous les points des 9 cartes, il faut 9 A au total
  • Le châssis est construit avec des profilés en aluminium 80/20, et les entretoises de PCB sont fixées directement au châssis
    • Les cartes et les disques sont très fragiles : il est facile de perdre ou de casser des disques pendant l’assemblage
    • Les disques sont si fragiles qu’on les compare à des ailes de papillon ; il faut donc tenir les cartes par les bords et les fixer une par une avec précaution
    • Des photos du montage final sont disponibles ici : photos of the final build
  • Pièces 80/20 utilisées
  • Le câblage relie chaque colonne en série, puis chaîne l’ensemble
    • La ligne de données utilise les bornes +/- du bornier RS485
    • Les lignes d’alimentation utilisent du 18 AWG, et les données un câble blindé 22 AWG
    • Pour une fréquence d’images élevée, il faut connecter 6 panneaux ou moins sur une même ligne RS485
    • L’affichage complet utilise 3 périphériques USB RS485
    • Pour fournir le contenu depuis un serveur externe, des serveurs RS485 vers Ethernet sont aussi une option

Unité de traitement et entrées/sorties

  • Comme l’apprentissage automatique est utilisé pour traiter la voix, la vidéo et les images, il faut davantage de puissance de traitement qu’avec un ordinateur monocarte ou un microcontrôleur basique
  • La configuration réelle utilise un Nvidia Orin Nano
  • Un Dockerfile a été créé pour le déploiement sur Jetson 6.0, et il faut compiler depuis les sources pour activer le GPU avec MediaPipe
  • Pour une voie plus simple, le M2 Mac Mini est recommandé ; si l’on omet l’interaction, une approche moins coûteuse comme un Raspberry Pi est aussi possible

Communication avec les cartes et pilote Node.js

  • La communication avec les cartes utilise RS485, et le format de trame suit la structure 0x80 0x83 0x01 imageData 0x8F
    • Chaque trame commence par l’octet de début 0x80
    • Viennent ensuite flush 0x83 ou buffer 0x84, l’adresse de la carte, les données d’image et l’octet de fin 0x8F
    • Les données d’image n’utilisent que deux états, 0 et 1
    • La compression des trames transmises utilise RLE
  • La bibliothèque de base pour Node.js, flipdisc, a été créée et fonctionne actuellement avec des cartes AlfaZeta et Hanover via USB et Ethernet
  • Les données ctx.getImageData(0, 0, width, height) d’une instance canvas peuvent être envoyées directement, et les données de pixels sont converties en 1 ou 0 selon la luminance
  • Installation et documentation

Rendu, interaction et architecture serveur

  • L’objectif n’est pas d’afficher des assets pré-rendus sur un appareil basse consommation, mais de créer une visualisation en temps réel recevant directement les retours des utilisateurs
  • Le rendu s’appuie sur des technologies web existantes
    • PIXI : rendu 2D général
    • Three.js : rendu 3D
    • Matter.js : moteur physique
    • GSAP : animation
    • node-canvas et node-gl : rendu côté serveur
  • L’interaction utilise les bibliothèques MediaPipe et modèles de Google
    • La démo de reconnaissance de gestes s’appuie sur Gesture Recognizing
    • Comme beaucoup de bibliothèques ML utilisent Python, Node exécute un script Python et récupère les données via IPC ZeroMQ
    • Python WASM pourrait aussi être utilisé à l’avenir
  • Les visualisations sont chacune représentées par une scène (scene) et peuvent être ajoutées à une file
    • La lecture des scènes et la gestion de la file sont accessibles via une API REST
    • Les données de lecture en temps réel sont transmises par websocket
    • La useLoop function permet de s’abonner à des événements ou d’ajouter des éléments à la file de rendu
    • Chaque fichier de scene doit retourner une scene et un schema, avec éventuellement une background task
    • Une background task s’exécute à intervalle défini et, en cas de succès, ajoute une scene à la file de lecture
  • Package serveur et exemples
  • Fonctionnalités gérées par flipdisc-server
    • Importer des scenes depuis un répertoire
    • Live reload des fichiers de scene
    • Background task ajoutant des scenes à la file
    • Composants UI pour texte, images et listes
    • Mise en page flex basée sur Yoga
    • Getters et configuration de base pour pixi/three/matter, connexion de modules supplémentaires
    • Serveur REST et websockets pour les données temps réel
    • Boucle de rendu et utilisation de shaders GLSL

Application de contrôle

  • Pour éviter le problème d’oublier avec le temps quelles commandes exécuter, ce qui rendrait le projet difficile à reprendre, une interface stable séparée a été créée
  • Pour un prototypage rapide, une application expo a été choisie
  • Depuis l’application, on peut contrôler pause, start, skip et previous sur l’affichage
    • Il est possible de définir des variables de scene pour personnaliser l’expérience
    • On peut dessiner librement directement sur l’écran
    • L’application Flipdisc est disponible sur l’App Store
  • Fonctionnalités de l’application
    • Mettre en pause/lire une scene
    • Ajouter à la file ou retirer de la file
    • Passer à l’élément suivant/précédent dans la file
    • Vérifier en temps réel l’écran actuellement affiché
    • Dessiner librement sur l’écran
    • Envoyer des configuration variables à chaque scene

Design en basse résolution

Prochaines étapes et projets de référence

À lire aussi

1 commentaires

 
GN⁺ 2024-06-26
Avis Hacker News

  • Pour une durée de vie « presque infinie », ce n’est peut-être pas aussi infini qu’on l’espérait. Il arrive assez souvent que des disques tombent ou se coincent, mais quand ça fonctionne correctement, c’est vraiment chouette, et le son est particulièrement agréable
    J’ai travaillé autrefois dans un bureau qui avait un affichage à flip-dots, puis nous l’avons démonté par la suite. J’ai une photo montrant à quoi ressemble un disque coincé : https://photos.app.goo.gl/onpHefUVL8oeP4si7

    • C’est clair. C’est un peu comme des ailes de papillon : les disques se détachent ou se cassent facilement. Pendant que je le fabriquais, les enfants adoraient y toucher, donc je devais sans cesse remplacer les disques tombés
    • Je me demande comment on enlève la poussière. C’est probablement à ce moment-là que des dégâts surviennent

  • Fait amusant : le DLP de Texas Instruments (Digital Light Processing) ressemble à une version miniaturisée d’un affichage à flip-disks
    Cela dit, les flip-disks tournent à 180°, alors que les pixels DLP ne s’inclinent que légèrement pour renvoyer la lumière vers un dissipateur thermique ; les flip-disks ont deux faces de couleurs différentes, tandis que le DLP utilise des pixels miroirs. Les flip-disks ont très probablement une durée de vie limitée, alors que le DLP supporte des billions de cycles ; le DLP réagit très vite, à l’échelle de la microseconde, et produit les niveaux de gris par modulation du rapport cyclique (PWM)

  • Breakfast Studio crée de superbes œuvres d’art avec des modules à flip-disks
    https://breakfaststudio.com/flip-discs

    • Ils ont une œuvre montrant la fonte de la glace polaire, et je me demande quel est son niveau d’efficacité énergétique. J’imagine que ça ne consomme pas d’énergie quand rien ne bascule, mais ça m’interpelle quand même
    • L’effet obtenu avec un côté argenté et l’autre côté au design abstrait et neutre est très réussi
    • Les œuvres de ce studio sont vraiment excellentes. Si vous aimez ce genre de choses, les œuvres « brixels » comme Ocean, réalisées pour le nouveau Fontainebleu Hotel de Las Vegas, valent aussi le détour

  • Je me demande comment l’auteur s’est procuré le panneau exactement. J’avais regardé ça autrefois, et en dehors de plateformes comme eBay, c’était pratiquement impossible à trouver
    À moins d’être prêt à acheter des quantités industrielles à des prix industriels. J’aimerais savoir où il l’a acheté et combien ça a coûté

    • Le mien vient d’eBay, mais on peut aussi acheter le même panneau chez AlfaZeta. Il existe aussi des options moins chères : https://xqd-led.en.alibaba.com/productgrouplist-936470954-2/...
      Dans l’article, j’ai aussi écrit que j’aimerais que ce genre de panneaux devienne plus abordable pour les développeurs amateurs. Si quelqu’un veut collaborer sur ce sujet, qu’il me contacte
    • J’ai acheté récemment le même panneau et j’ai aussi lu, dans le deuxième paragraphe de l’article, l’endroit où il l’a acheté : c’est un produit AlfaZeta
      Il est fabriqué et expédié depuis la Pologne ; il n’y a pas de grille tarifaire publique, mais un panneau 7x28 coûte environ 220 euros. C’est cher, mais il n’y a pas encore beaucoup d’endroits qui fabriquent ce genre de chose. En lisant plus loin l’article, on trouve aussi des liens vers d’autres fabricants qui semblent moins chers, notamment du côté d’AliExpress
    • Je ne vois pas quel est le problème avec eBay

  • Vraiment cool. J’aime bien voir JavaScript utilisé pour ce genre de choses
    J’ai été surpris d’apprendre que le télescope James Webb utilise un runtime JavaScript personnalisé pour une bonne partie de ses fonctions embarquées

    • Les écrans tactiles de la capsule SpaceX Dragon fonctionnent eux aussi avec une application HTML/JS basée sur des composants web (Polymer) :D
    • J’ai trouvé ça tellement surprenant que je suis allé vérifier
      https://news.ycombinator.com/item?id=19739454
      Cela dit, je ne comprends toujours pas très bien pourquoi JavaScript a été choisi. D’après l’article scientifique, il s’agit d’un moteur JavaScript commercial : https://ui.adsabs.harvard.edu/abs/2006SPIE.6274E..0AB/abstra...
    • Je me demande pourquoi on peut se réjouir qu’un langage particulier soit utilisé pour tel ou tel usage. Ça me fait un peu penser à quelqu’un qui s’enthousiasmerait de voir quelque chose fabriqué en aluminium plutôt qu’en acier ou en bois
    • C’est horrible. JavaScript ne devrait pas s’approcher de quoi que ce soit qui ne soit pas une page web, et même sur les pages web, c’est déjà discutable

  • Je pense que ça pourrait être utile comme moniteur de NOC. La plupart du temps l’affichage serait statique, mais si quelque chose se passe mal, l’écran se mettrait à jour et le son attirerait naturellement l’attention. Pas besoin d’« alarme » séparée

    • J’aime bien cette idée. Ça permettrait de notifier sans provoquer de montée d’adrénaline

  • Où est l’animation Touhou Bad Apple qui devrait évidemment être présente sur cet affichage noir et blanc ?

  • Très bien. Moi aussi, j’aime les flip-dots. J’ai commencé avec un contrôleur JavaScript pour un afficheur de bus Hanover (https://engineer.john-whittington.co.uk/2017/11/adventures-f...), puis je suis passé aux modules Alfa-Zeta après une commande pour réaliser un contrôleur de 256x56, soit 24 panneaux
    À l’époque, j’utilisais un module Python (https://github.com/tuna-f1sh/flipdot), une interface d’administration basée sur Python Flask/React, et des informations de séquence dans une base SQLite. Le résultat ressemblait à cette application, avec des transitions préchargées et, bien sûr, le jeu de la vie : https://engineer.john-whittington.co.uk/2020/04/game-of-life...
    Créer un contrôleur HDMI direct basé sur FPGA pour les modules Alfa-Zeta est sur ma TODO list de projets. La vitesse de rafraîchissement du firmware intégré laisse un peu à désirer

  • Le début de la vidéo de démo m’a rappelé Ye Olde Wooden Mirror
    https://www.smoothware.com/danny/woodenmirror.html
    Ou aussi ce projet plus récent : https://tisch.nyu.edu/itp/news/spring-2024/daniel-rozin--itp...

    • Super. On dirait que les pixels en bois pivotent pour réfléchir plus ou moins de lumière et produire plusieurs niveaux de « gris ». Ingénieux

  • Plutôt que de dire que « les afficheurs à disques basculants sont une technologie assez méconnue », je dirais plutôt que c’est une technologie de niche. Cette niche, c’était la lisibilité en plein soleil
    Il y a encore quelques années, les afficheurs à disques basculants étaient très courants dans les bus, les trains, etc. Puis les LED se sont améliorées, et cette niche a disparu

    • C’était inévitable, au fond. Ces afficheurs à bascule, avec leurs pièces mobiles, devaient probablement nécessiter de la maintenance. Leur consommation électrique devait aussi être plus élevée, et ils faisaient du bruit. Je me souviens encore de ce son qu’on entendait autrefois dans les gares et les aéroports