Show HN: JavaScript से चलने वाला flip-disc display बनाने की कहानी

 (flipdisc.io)
2 पॉइंट द्वारा GN⁺ 2024-06-26 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • चमकदार LED की जगह भौतिक रूप से पलटने वाली डिस्क का उपयोग करके ऑफिस के लिए एक इंटरैक्टिव wall art बनाया गया, और 9 AlfaZeta panels को 3x3 में रखकर 84x42 display बनाया गया
  • हार्डवेयर को 24V 10A power, 80/20 aluminum frame, RS485 wiring, और Nvidia Orin Nano से जोड़ा गया; ऊंचा frame rate चाहिए तो एक RS485 line पर 6 से कम panels रखने चाहिए
  • सॉफ्टवेयर को RS485 frames और RLE compression संभालने वाली Node.js library flipdisc, और scene queue, REST API, websocket, rendering loop संभालने वाले flipdisc-server में बांटा गया है
  • rendering के लिए PIXI, Three.js, Matter.js, GSAP, node-canvas, node-gl का उपयोग किया गया, और MediaPipe gesture recognition के लिए Node से Python script चलाई जाती है, फिर ZeroMQ IPC से result लिया जाता है
  • 42x84 resolution पर 3x5 pixel font और Floyd-Steinberg, Bayer dithering जैसे low-resolution के हिसाब से expression design असली उपयोगिता तय करते हैं

flip-disc ही क्यों

  • flip-disc एक display है जो electromagnetic pulse से छोटी डिस्क को दो रंगों के बीच पलटता है; इसका आविष्कार 80 साल से भी पहले हुआ था, लेकिन इसका मूल सिद्धांत आज भी लगभग वैसा ही है
  • चमकीले और स्मूथ LED screen के बजाय, भौतिक movement और sound वाला ऑफिस के लिए बड़ा interactive wall art बनाने के लिए इसे चुना गया
  • इसकी खासियतें हैं उच्च readability, लंबी उम्र, 25-60fps रेंज में काम करना, और डिस्क पलटते समय बारिश जैसी आवाज़
  • पहले code visualization के लिए बनाए गए pixel knitting app और Atom Editor के crafting tool की तरह, इसे code और physical medium को जोड़ने वाले एक experiment की तरह लिया गया

हार्डवेयर संरचना

  • 9 Alfazeta panels को 3x3 grid में रखकर 84x42 डिस्क display बनाया गया
    • हर board में 28x7 panel के 2 हिस्से हैं
    • PCB पर पुराना ATMEGA128 microcontroller, सैकड़ों MELF diodes, और 2 DIP switches हैं
    • एक DIP switch address सेट करता है, दूसरा baud rate
    • AlfaZeta board की विस्तृत जानकारी manual में है
  • flip-disc boards और parts मिलना मुश्किल है, और मौजूदा market आम consumers की बजाय transport industry जैसी enterprise demand के लिए ज़्यादा अनुकूल है
    • दोबारा बनाया जाए तो अपनी board design भी आज़माई जा सकती है
    • firmware access हो तो performance tuning आसान होगी
    • panels की लागत तेज़ी से बढ़ती है, इसलिए बड़े size तक scale करना मुश्किल है
  • देखने लायक suppliers और products

power, frame, wiring

  • display को हर board पर 24V 1A चाहिए, और 9 boards के सारे dots पलटने के लिए कुल 9A चाहिए
    • असली setup में 24V 10A MEAN WELL HLG-240H-24 इस्तेमाल किया गया
  • frame को 80/20 aluminum extrusions से बनाया गया और PCB standoffs को frame पर सीधे लगाया गया
    • boards और discs बहुत नाज़ुक हैं, इसलिए assembly के दौरान discs खोना या तोड़ना आसान है
    • discs तितली के पंख जितनी नाज़ुक हैं, इसलिए किनारे पकड़कर boards को एक-एक करके बहुत सावधानी से लगाना पड़ता है
    • पूरी build की तस्वीरें photos of the final build में हैं
  • इस्तेमाल किए गए 80/20 parts
  • wiring में हर column को serial में जोड़ा गया और फिर सबको chain किया गया
    • data lines के लिए RS485 block terminal के +/- का उपयोग किया गया
    • power line के लिए 18AWG और data के लिए 22AWG shielded cable उपयोग की गई
    • ऊंचा frame rate चाहिए तो एक RS485 line पर 6 से कम panels रखने चाहिए
    • पूरे display में USB RS485 devices 3 इस्तेमाल किए गए
    • अगर content किसी external server से देना हो तो RS485 to ethernet servers भी विकल्प हैं

processing device और input/output

  • voice, video, image processing के लिए machine learning इस्तेमाल होने से बेसिक single-board computer या microcontroller से ज़्यादा processing power चाहिए
  • वास्तविक setup में Nvidia Orin Nano इस्तेमाल किया गया
    • Raspberry Pi भी चल सकता है, लेकिन frame rate कम हो सकता है
    • camera के लिए IMX708 camera इस्तेमाल किया गया
    • audio input/output के लिए Waveshare audio board का उपयोग किया गया
  • Jetson 6.0 पर deploy करने के लिए Dockerfile बनाया गया, और MediaPipe GPU enable करने के लिए source से compile करना पड़ता है
  • आसान रास्ते के तौर पर M2 Mac Mini की सिफारिश की गई है, और अगर interaction छोड़ दिया जाए तो Raspberry Pi जैसा सस्ता विकल्प भी संभव है

board communication और Node.js driver

  • board communication के लिए RS485 इस्तेमाल होता है और frame format 0x80 0x83 0x01 imageData 0x8F है
    • हर frame शुरूआती byte 0x80 से शुरू होता है
    • उसके बाद flush 0x83 या buffer 0x84, board address, image data, और ending byte 0x8F आता है
    • image data में सिर्फ दो states 0, 1 इस्तेमाल होती हैं
    • transmission frame compression के लिए RLE इस्तेमाल किया जाता है
  • Node.js के लिए बेसिक library flipdisc बनाई गई, जो फिलहाल USB और ethernet के जरिए AlfaZeta और Hanover boards पर चलती है
  • canvas instance के ctx.getImageData(0, 0, width, height) data को सीधे भेजा जा सकता है, और pixel data को luminance के आधार पर 1 या 0 में बदला जाता है
  • install और documentation

rendering, interaction, server structure

  • लक्ष्य pre-rendered assets को low-power device पर दिखाना नहीं, बल्कि user feedback सीधे लेने वाला real-time visualization बनाना है
  • rendering में मौजूदा web technologies का उपयोग किया गया
    • PIXI: सामान्य 2D rendering
    • Three.js: 3D rendering
    • Matter.js: physics engine
    • GSAP: animation
    • node-canvas और node-gl: server-side rendering
  • interaction के लिए Google MediaPipe libraries और models इस्तेमाल किए गए
    • gesture recognition demo के लिए Gesture Recognizing देखें
    • कई ML libraries Python पर आधारित हैं, इसलिए Node से Python script चलाई जाती है और ZeroMQ IPC से data वापस लिया जाता है
    • आगे चलकर Python WASM भी इस्तेमाल हो सकता है
  • visualizations को अलग-अलग scene के रूप में व्यक्त किया जाता है और queue में जोड़ा जा सकता है
    • scene playback और queue management को REST API से access किया जाता है
    • real-time playback data websocket से भेजा जाता है
    • useLoop function से events subscribe किए जा सकते हैं या rendering queue में जोड़ा जा सकता है
    • हर scene file को scene और schema return करना चाहिए, और वैकल्पिक रूप से background task भी हो सकता है
    • background task तय interval पर चलता है और सफल होने पर playback queue में scene जोड़ देता है
  • server package और examples
  • flipdisc-server जिन features को संभालता है
    • directory से scenes import करना
    • scene files का live reload
    • queue में scene जोड़ने वाले background tasks
    • text, image, list के लिए UI components
    • Yoga आधारित flex layout
    • pixi/three/matter के base getter और setup, साथ में extra modules जोड़ना
    • REST server और real-time data के लिए websocket
    • rendering loop और GLSL shader का उपयोग

control app

  • समय के साथ कौन सा command चलाना है यह भूल जाने और project को फिर से इस्तेमाल करना मुश्किल हो जाने की समस्या से बचने के लिए अलग से एक स्थिर interface बनाया गया
  • तेज़ prototyping के लिए expo app चुना गया
  • app में display का pause, start, skip, previous control किया जा सकता है
    • scene variables सेट करके experience personalize किया जा सकता है
    • screen पर सीधे freehand drawing की जा सकती है
    • App Store से Flipdisc डाउनलोड किया जा सकता है
  • app features
    • scene pause/play
    • queue में add या remove
    • queue में next/previous पर जाना
    • display पर इस समय क्या दिख रहा है, उसे real-time में देखना
    • screen पर freehand drawing
    • हर scene को configuration variables भेजना

low-resolution पर design

  • 42x84 size के flip-disc display में सीमित pixels के भीतर जानकारी को कितना सरल बनाना है, यह तय करना पड़ता है, और यह constraint-based design के करीब है
  • बेसिक reading font के लिए 3x5 pixel font इस्तेमाल किया गया
    • 4x5 और mono variants भी हैं
    • 3x3 fonts और 3x4 nano fonts और छोटे हैं, लेकिन वास्तविक उपयोग के लिए readability बहुत कम मानी गई
    • 12 pixels से ऊपर जाएं तो ज़्यादातर fonts किसी न किसी हद तक पढ़े जा सकते हैं
    • anti-aliasing render नहीं होता, इसलिए bitmap font ऐसे display के लिए अच्छी तरह फिट बैठते हैं
    • Bitmap designed fonts archive भी integration के लिए दिलचस्प है
  • images के लिए Floyd-Steinberg dithering और Bayer 4x4 ordered dithering का मिश्रण इस्तेमाल किया गया
    • Floyd-Steinberg image में ज़्यादा natural pixel distribution देता है, इसलिए इसे पसंद किया गया
    • Bayer एक consistent pattern बनाता है, इसलिए UI elements के लिए ज़्यादा उपयुक्त है
    • संबंधित सामग्री में Ditherpunk — The article I wish I had about monochrome image dithering की सिफारिश की गई
  • ऑफिस scenes के रूप में New York Times RSS reader, Spotify client, weather app, और अन्य scene collection बनाए गए

अगले कदम और संदर्भ project

  • अगला लक्ष्य नए multimodal input/output का उपयोग करके AI के लिए पारदर्शी agent interface बनाना है
  • यह feature अगली पीढ़ी के models आने के बाद आगे बढ़ाई जाएगी
  • उम्मीद है कि flip-disc hobby makers के लिए अधिक accessible बने, और सस्ते flip-disc hardware collaboration में रुचि हो तो संपर्क करने का अनुरोध किया गया
  • प्रेरणा देने वाले projects और materials

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-06-26
Hacker News की राय

  • “लगभग अनंत जीवनकाल” कहना शायद उम्मीद जितना अनंत न हो। डिस्क का गिर जाना या अटक जाना काफी होता है, लेकिन जब यह ठीक से काम करता है तो वाकई शानदार लगता है, खासकर इसकी आवाज़
    पहले मैं एक ऐसे ऑफिस में था जहां flip-dot display था, और बाद में उस display को खोलकर अलग किया था। अटकी हुई डिस्क कैसी दिखती है, इसकी एक फोटो मेरे पास है: https://photos.app.goo.gl/onpHefUVL8oeP4si7

    • बिल्कुल ऐसा ही है। यह तितली के पंख जैसा है, इसलिए डिस्क आसानी से निकल जाती है या टूट जाती है। बनाते समय बच्चों को इसे छूना बहुत पसंद था, इसलिए गिरी हुई डिस्क को बार-बार बदलना पड़ता था
    • सोच रहा हूं धूल कैसे हटाते होंगे। शायद उसी समय टूट-फूट हो जाती होगी

  • मजेदार तथ्य: Texas Instruments DLP (Digital Light Processing) कुछ-कुछ flip-disc display के छोटे रूप जैसा है
    हालांकि flip-disc 180° घूमता है, जबकि DLP pixel रोशनी को heat sink की तरफ मोड़ने के लिए बस थोड़ा सा झुकता है; flip-disc के दोनों तरफ अलग-अलग रंग होते हैं, जबकि DLP mirror pixel होता है। flip-disc का जीवनकाल सीमित होने की संभावना ज्यादा है, जबकि DLP खरबों cycles भी झेल सकता है, और DLP microseconds के स्तर पर बहुत तेज प्रतिक्रिया देता है, इसलिए grayscale को duty cycle modulation (PWM) से लागू करता है

  • Breakfast Studio flip-disc modules से शानदार कला-कृतियां बना रहा है
    https://breakfaststudio.com/flip-discs

    • इनके पास पिघलती ध्रुवीय बर्फ दिखाने वाला एक काम है, और मैं सोच रहा हूं इसकी energy efficiency कितनी होगी। जब कुछ भी flip नहीं हो रहा हो तो शायद power इस्तेमाल नहीं होती, लेकिन फिर भी चिंता होती है
    • एक तरफ चांदी जैसा रंग और दूसरी तरफ abstract, neutral design रखने का प्रभाव बहुत अच्छा है
    • इस studio का काम वाकई बेहतरीन है। अगर आपको ऐसी चीजें पसंद हैं, तो Las Vegas के नए Fontainebleu Hotel के लिए बनाए गए Ocean जैसे “brixels” काम भी देखने लायक हैं

  • लेखक ने panel ठीक-ठीक कैसे हासिल किया, यह जानने की उत्सुकता है। पहले मैंने ऐसी चीजें देखी थीं, लेकिन eBay जैसी जगहों के अलावा इन्हें पाना लगभग असंभव था
    जब तक आप industrial quantity को industrial price पर खरीदने को तैयार न हों। जानना चाहूंगा कि इसे कहां से खरीदा और कितना खर्च हुआ

    • मैंने अपना eBay से खरीदा था, लेकिन वही panel AlfaZeta से भी खरीदा जा सकता है। सस्ते विकल्प भी हैं: https://xqd-led.en.alibaba.com/productgrouplist-936470954-2/...
      पोस्ट में भी लिखा है कि काश ऐसे panels hobby developers के लिए और सस्ते हो जाएं। इस दिशा में सहयोग करना चाहने वाला कोई हो तो संपर्क करे
    • हाल ही में मैंने वही panel खरीदा, और लेख के दूसरे paragraph में दिए गए source के बारे में भी पढ़ा; यह AlfaZeta का product है
      यह Poland में बनता और ship होता है, public price list नहीं है, लेकिन एक 7x28 panel करीब 220 euros का है। महंगा है, लेकिन अभी भी इसे manufacture करने वाली जगहें ज्यादा नहीं हैं। लेख आगे पढ़ेंगे तो AliExpress वाले सहित कुछ और manufacturers के links मिलते हैं, जो सस्ते लगते हैं
    • समझ नहीं आता eBay में क्या समस्या है

  • वाकई शानदार। ऐसी चीज में JavaScript का इस्तेमाल देखना अच्छा लगता है
    मुझे यह जानकर हैरानी हुई कि James Webb Telescope अपने onboard features के एक बड़े हिस्से के लिए custom JavaScript runtime इस्तेमाल करता है

    • SpaceX Dragon capsule के touchscreens भी web components (Polymer) से बने HTML/JS app पर चलते हैं :D
    • यह इतना हैरान करने वाला था कि मैंने खोजा
      https://news.ycombinator.com/item?id=19739454
      फिर भी मुझे अभी तक ठीक से समझ नहीं आया कि JavaScript क्यों चुना गया। paper के अनुसार यह commercial JavaScript engine है: https://ui.adsabs.harvard.edu/abs/2006SPIE.6274E..0AB/abstra...
    • सोच रहा हूं कि किसी खास भाषा को किसी उपयोग में देखकर लोग खुश क्यों होते हैं। यह कुछ वैसा लगता है जैसे steel या wood के बजाय aluminium से कुछ बनते देखकर उत्साहित होना
    • यह तो डरावना है। JavaScript को webpages के अलावा कहीं पास भी नहीं जाना चाहिए, और webpages में भी असल में सवाल है

  • यह NOC monitor के रूप में काम आ सकता है। अधिकतर समय display static रहेगा, लेकिन कुछ गलत होने पर screen update होगी, और उसकी आवाज़ स्वाभाविक रूप से ध्यान खींच लेगी। अलग “alarm” की जरूरत नहीं

    • यह idea अच्छा है। adrenaline rush के बिना notification दे सकता है

  • इस black-and-white display पर जो Touhou Bad Apple animation जाहिर तौर पर होनी चाहिए, वह कहां है?

  • बढ़िया। मुझे भी flip-dot पसंद हैं। मैंने Hanover bus display के लिए JavaScript controller से शुरुआत की थी (https://engineer.john-whittington.co.uk/2017/11/adventures-f...), और बाद में 256x56, यानी 24 पैनलों के controller बनाने के commission के जरिए Alfa-Zeta modules तक पहुँचा
    उस समय मैंने Python module (https://github.com/tuna-f1sh/flipdot), Python Flask/React आधारित admin, और SQLite DB की sequence जानकारी इस्तेमाल की थी। नतीजा इस app जैसा था, जिसमें पहले से loaded transition effects और जाहिर तौर पर Game of Life भी शामिल था: https://engineer.john-whittington.co.uk/2020/04/game-of-life...
    Alfa-Zeta modules के लिए FPGA आधारित direct HDMI controller बनाना मेरी project TODO list में है। built-in firmware की refresh speed थोड़ी निराश करती है

  • demo video की शुरुआत ने Ye Olde Wooden Mirror की याद दिला दी
    https://www.smoothware.com/danny/woodenmirror.html
    या फिर यह ज्यादा recent वाला भी याद आया: https://tisch.nyu.edu/itp/news/spring-2024/daniel-rozin--itp...

    • शानदार। लगता है लकड़ी के pixels घूमकर ज्यादा या कम रोशनी reflect करते हैं और “grey” के कई levels बनाते हैं। कमाल की सोच है

  • “flip-disc displays कुछ अनजानी technology हैं” कहने के बजाय niche technology कहना ज्यादा सही लगता है। वह niche धूप में readability था
    कुछ साल पहले तक flip-disc displays bus और train वगैरह में काफी आम थे। फिर LEDs बेहतर हो गए और वह niche खत्म हो गया

    • आखिरकार ऐसा होना ही था। moving parts वाले ऐसे flip displays को maintenance की जरूरत पड़ती रही होगी। power consumption भी ज्यादा रहा होगा, और noise भी था। train stations और airports पर पहले जो आवाज आती थी, वह आज भी याद है