Show HN: Membuat display flip-disc yang digerakkan oleh JavaScript

 (flipdisc.io)
2 poin oleh GN⁺ 2024-06-26 | 1 komentar | Bagikan ke WhatsApp
  • Alih-alih LED yang menyala, proyek ini memakai disk yang benar-benar dibalik secara fisik untuk membuat wall art interaktif untuk kantor, dengan 9 panel AlfaZeta disusun 3x3 menjadi display 84x42
  • Perangkat kerasnya disatukan dengan catu daya 24V 10A, rangka aluminium 80/20, kabel RS485, dan Nvidia Orin Nano; jika ingin frame rate tinggi, jumlah panel per jalur RS485 harus dibatasi maksimal 6
  • Perangkat lunaknya dibagi menjadi library Node.js flipdisc yang menangani frame RS485 dan kompresi RLE, serta flipdisc-server yang mengurus antrean scene, REST API, websocket, dan loop rendering
  • Rendering memanfaatkan PIXI, Three.js, Matter.js, GSAP, node-canvas, dan node-gl, sementara pengenalan gesture MediaPipe dijalankan dengan mengeksekusi skrip Python dari Node lalu menerima hasilnya lewat ZeroMQ IPC
  • Pada resolusi 42x84, perancangan ekspresi yang sesuai untuk resolusi rendah seperti font 3x5 piksel dan dithering Floyd-Steinberg maupun Bayer sangat menentukan kegunaan nyata

Mengapa flip-disc

  • Flip-disc adalah display yang membalik disk kecil di antara dua warna dengan pulsa elektromagnetik; ditemukan lebih dari 80 tahun lalu, tetapi prinsip dasarnya hingga kini sebagian besar tetap sama
  • Proyek ini dipilih untuk membuat wall art interaktif berukuran besar untuk kantor yang memiliki gerakan dan suara fisik, alih-alih kesan layar LED yang terang dan mulus
  • Ciri khasnya adalah keterbacaan tinggi, umur pakai panjang, operasi di kisaran 25-60fps, serta suara seperti rintik hujan saat disk-disknya dibalik
  • Seperti pixel knitting app untuk visualisasi kode dan crafting tool untuk Atom Editor yang pernah dibuat sebelumnya, proyek ini didekati sebagai eksperimen yang menggabungkan kode dan medium fisik

Susunan perangkat keras

  • 9 panel Alfazeta disusun dalam grid 3x3 untuk membuat display disk 84x42
    • Setiap papan terdiri dari 2 panel 28x7
    • PCB-nya memiliki mikrokontroler ATMEGA128 lawas, ratusan dioda MELF, dan 2 DIP switch
    • Satu DIP switch mengatur alamat, yang lain mengatur baud rate
    • Detail tentang papan AlfaZeta bisa dilihat di manual
  • Papan dan komponen flip-disc sulit didapat, dan pasar saat ini lebih cocok untuk permintaan perusahaan seperti industri transportasi daripada konsumen umum
    • Jika dibuat ulang, ada baiknya bereksperimen dengan desain papan sendiri
    • Jika memiliki akses ke firmware, penalaan performa akan lebih mudah
    • Biaya panel meningkat cepat sehingga sulit diperluas ke ukuran yang lebih besar
  • Pemasok dan produk yang layak dirujuk

Daya, rangka, dan kabel

  • Display memerlukan 24V 1A per papan, dan untuk membalik semua dot di seluruh 9 papan diperlukan total 9A
  • Rangkanya dibuat dari 80/20 aluminum extrusions dan standoff PCB dipasang langsung ke rangka
    • Papan dan disk sangat rapuh sehingga mudah kehilangan atau memecahkan disk saat perakitan
    • Disk sangat rapuh hingga diibaratkan seperti sayap kupu-kupu, jadi papan harus dipegang dari tepinya dan dipasang satu per satu dengan hati-hati
    • Foto hasil akhirnya ada di photos of the final build
  • Komponen 80/20 yang digunakan
  • Pengkabelan menghubungkan setiap kolom secara serial lalu seluruhnya dirangkai berantai
    • Jalur data memakai +/- dari terminal blok RS485
    • Jalur daya memakai 18AWG, data memakai kabel shielded 22AWG
    • Jika ingin frame rate tinggi, satu jalur RS485 harus menghubungkan maksimal 6 panel
    • Seluruh display menggunakan 3 perangkat USB RS485
    • Jika konten disajikan dari server eksternal, server RS485 ke ethernet juga bisa menjadi opsi

Unit pemrosesan dan input/output

  • Karena memakai machine learning untuk memproses suara, video, dan gambar, dibutuhkan daya komputasi lebih besar daripada komputer papan tunggal dasar atau mikrokontroler
  • Konfigurasi aktual memakai Nvidia Orin Nano
  • Dibuat Dockerfile untuk deployment ke Jetson 6.0, dan MediaPipe harus dikompilasi dari source untuk mengaktifkan GPU
  • Jalur yang lebih mudah adalah merekomendasikan M2 Mac Mini, dan jika interaksi dihilangkan maka pendekatan yang lebih murah seperti Raspberry Pi juga memungkinkan

Komunikasi papan dan driver Node.js

  • Komunikasi papan memakai RS485 dan format frame-nya adalah 0x80 0x83 0x01 imageData 0x8F
    • Setiap frame dimulai dengan byte awal 0x80
    • Lalu diikuti flush 0x83 atau buffer 0x84, alamat papan, data gambar, dan byte akhir 0x8F
    • Data gambar hanya memakai dua status, 0 dan 1
    • Kompresi untuk frame transmisi memakai RLE
  • Dibuat library dasar Node.js flipdisc, yang saat ini berjalan pada papan AlfaZeta dan Hanover lewat USB dan ethernet
  • Data ctx.getImageData(0, 0, width, height) dari instance canvas bisa dikirim langsung, dan data piksel dikonversi menjadi 1 atau 0 berdasarkan luminance
  • Instalasi dan dokumentasi

Rendering, interaksi, dan struktur server

  • Tujuannya bukan menampilkan aset yang sudah dirender sebelumnya pada perangkat berdaya rendah, melainkan membuat visualisasi real-time yang langsung menerima umpan balik pengguna
  • Rendering memanfaatkan teknologi web yang sudah ada
    • PIXI: rendering 2D umum
    • Three.js: rendering 3D
    • Matter.js: mesin fisika
    • GSAP: animasi
    • node-canvas dan node-gl: rendering sisi server
  • Untuk interaksi digunakan library dan model Google MediaPipe libraries
    • Demo pengenalan gesture bisa dilihat di Gesture Recognizing
    • Karena banyak library ML memakai Python, Node mengeksekusi skrip Python lalu menerima kembali data lewat IPC ZeroMQ
    • Ke depan, Python WASM juga bisa dipakai
  • Visualisasi direpresentasikan masing-masing sebagai scene dan bisa ditambahkan ke antrean
    • Pemutaran scene dan pengelolaan antrean diakses lewat REST API
    • Data pemutaran real-time dikirim lewat websocket
    • Dengan useLoop function, event bisa di-subscribe atau dimasukkan ke antrean rendering
    • Setiap file scene harus mengembalikan scene dan schema, dan secara opsional bisa memiliki background task
    • Background task dijalankan pada interval tertentu dan, jika berhasil, menambahkan scene ke antrean pemutaran
  • Paket server dan contoh
  • Fitur yang ditangani flipdisc-server
    • Mengimpor scene dari direktori
    • Live reload file scene
    • Background task yang menambahkan scene ke antrean
    • Komponen UI untuk teks, gambar, dan daftar
    • Flex layout berbasis Yoga
    • Getter dan setup dasar untuk pixi/three/matter, serta penyambungan modul tambahan
    • Server REST dan websocket untuk data real-time
    • Loop rendering dan penggunaan shader GLSL

Aplikasi kontrol

  • Untuk menghindari masalah lupa perintah apa yang harus dijalankan seiring waktu sehingga proyek sulit dipakai kembali, dibuat antarmuka yang stabil secara terpisah
  • Dipilih aplikasi expo untuk prototyping cepat
  • Dari aplikasi, display bisa dikontrol untuk pause, start, skip, dan previous
    • Variabel scene bisa diatur untuk mempersonalisasi pengalaman
    • Pengguna juga bisa menggambar bebas langsung di layar
    • Aplikasi Flipdisc tersedia di App Store
  • Fitur aplikasi
    • Pause/play scene
    • Menambah atau menghapus dari antrean
    • Pindah ke berikutnya/sebelumnya dalam antrean
    • Melihat secara real-time tampilan yang sedang ditunjukkan display
    • Menggambar bebas di layar
    • Mengirim configuration variable ke tiap scene

Desain pada resolusi rendah

Langkah berikutnya dan proyek referensi

Bacaan terkait

1 komentar

 
GN⁺ 2024-06-26
Pendapat di Hacker News

  • Untuk disebut “usia pakai hampir tak terbatas”, mungkin tidak setakterbatas yang diharapkan. Disk yang lepas atau macet cukup sering terjadi, tetapi saat berfungsi dengan benar tampilannya benar-benar keren, dan suaranya terutama bagus
    Dulu saya pernah berada di kantor yang punya display flip-dot, dan belakangan display itu dibongkar. Saya punya foto seperti apa disk yang macet: https://photos.app.goo.gl/onpHefUVL8oeP4si7

    • Memang begitu. Mirip sayap kupu-kupu, jadi disk mudah lepas atau patah. Saat membuatnya, anak-anak suka menyentuhnya, jadi saya harus terus mengganti disk yang jatuh
    • Saya penasaran bagaimana cara membersihkan debunya. Mungkin saat itulah kerusakan akan terjadi

  • Fakta menarik: Texas Instruments DLP (Digital Light Processing) mirip seperti versi miniatur dari display flip-disc
    Bedanya, flip-disc berputar 180°, sedangkan piksel DLP hanya dimiringkan sedikit untuk mengarahkan cahaya ke heatsink; flip-disc memiliki warna berbeda di kedua sisinya, sedangkan DLP adalah piksel cermin. Flip-disc kemungkinan besar punya umur pakai terbatas, sementara DLP mampu bertahan hingga triliunan siklus, dan DLP bereaksi sangat cepat dalam hitungan mikrodetik sehingga grayscale diwujudkan lewat modulasi duty cycle (PWM)

  • Breakfast Studio membuat karya seni keren dengan modul flip-disc
    https://breakfaststudio.com/flip-discs

    • Ada karya yang menampilkan es kutub yang mencair, dan saya penasaran seberapa baik efisiensi energinya. Sepertinya saat tidak ada yang dibalik, perangkat ini tidak memakai daya, tetapi tetap saja saya memikirkannya
    • Efek menempatkan satu sisi berwarna perak dan sisi lain dengan desain abstrak yang netral sangat bagus
    • Karya studio ini benar-benar luar biasa. Kalau suka hal seperti ini, karya “brixels” seperti Ocean yang mereka buat untuk Fontainebleu Hotel baru di Las Vegas juga layak dilihat

  • Saya penasaran bagaimana persisnya penulis mendapatkan panelnya. Dulu saya pernah mencari hal seperti ini, dan selain tempat seperti eBay, praktis mustahil mendapatkannya
    Kecuali kalau bersedia membeli dalam jumlah industri dengan harga industri. Saya ingin tahu membelinya di mana dan berapa harganya

    • Punya saya dibeli dari eBay, tetapi panel yang sama juga bisa dibeli dari AlfaZeta. Ada opsi yang lebih murah juga: https://xqd-led.en.alibaba.com/productgrouplist-936470954-2/...
      Di tulisan itu saya juga menulis bahwa saya berharap panel seperti ini menjadi lebih murah bagi pengembang hobi. Kalau ada yang ingin berkolaborasi ke arah ini, silakan hubungi saya
    • Saya baru-baru ini membeli panel yang sama, dan saya juga membaca tempat pembelian yang disebutkan di paragraf kedua tulisan itu; produknya dari AlfaZeta
      Dibuat dan dikirim dari Polandia, tidak ada daftar harga publik, tetapi satu panel 7x28 kira-kira sekitar 220 euro. Mahal, tetapi memang belum banyak tempat yang masih memproduksi hal seperti ini. Kalau membaca lebih lanjut, ada juga tautan ke produsen lain yang tampaknya lebih murah, termasuk dari AliExpress
    • Saya tidak mengerti apa masalahnya dengan eBay

  • Benar-benar keren. Senang melihat JavaScript digunakan untuk hal seperti ini
    Saya terkejut saat tahu bahwa James Webb Telescope memakai runtime JavaScript kustom untuk cukup banyak fungsi onboard-nya

    • Layar sentuh kapsul SpaceX Dragon juga berjalan sebagai aplikasi HTML/JS yang dibuat dengan web components (Polymer) :D
    • Karena terlalu mengejutkan, saya mencarinya
      https://news.ycombinator.com/item?id=19739454
      Meski begitu, saya masih belum terlalu paham mengapa mereka memilih JavaScript. Menurut makalahnya, itu adalah mesin JavaScript komersial: https://ui.adsabs.harvard.edu/abs/2006SPIE.6274E..0AB/abstra...
    • Saya penasaran mengapa orang senang melihat bahasa tertentu dipakai untuk suatu keperluan. Rasanya mirip seperti bersemangat melihat sesuatu dibuat dari aluminium alih-alih baja atau kayu
    • Itu mengerikan. JavaScript seharusnya tidak boleh mendekati apa pun selain halaman web, dan bahkan di halaman web pun sebenarnya patut dipertanyakan

  • Ini sepertinya bisa berguna sebagai monitor NOC. Sebagian besar tampilannya statis, tetapi saat ada yang bermasalah layar diperbarui, dan suaranya secara alami menarik perhatian. Tidak perlu “alarm” terpisah

    • Saya suka ide ini. Bisa memberi notifikasi tanpa lonjakan adrenalin

  • Di mana animasi Touhou Bad Apple yang sudah semestinya ada di display hitam-putih ini?

  • Bagus. Saya juga suka flip-dot. Saya memulainya dari controller JavaScript untuk display bus Hanover (https://engineer.john-whittington.co.uk/2017/11/adventures-f...), lalu berlanjut hingga modul Alfa-Zeta setelah mendapat pesanan membuat controller 256x56, yaitu skala 24 panel
    Saat itu saya memakai modul Python (https://github.com/tuna-f1sh/flipdot), admin berbasis Python Flask/React, dan informasi urutan dari DB SQLite. Hasilnya mirip dengan aplikasi ini, termasuk efek transisi yang sudah dimuat sebelumnya dan tentu saja Game of Life: https://engineer.john-whittington.co.uk/2020/04/game-of-life...
    Membuat controller HDMI langsung berbasis FPGA untuk modul Alfa-Zeta ada di daftar TODO proyek saya. Kecepatan refresh firmware bawaannya agak mengecewakan

  • Bagian awal video demo mengingatkan pada Ye Olde Wooden Mirror
    https://www.smoothware.com/danny/woodenmirror.html
    Atau juga teringat yang lebih baru ini: https://tisch.nyu.edu/itp/news/spring-2024/daniel-rozin--itp...

    • Keren. Sepertinya piksel kayunya berputar untuk memantulkan lebih banyak atau lebih sedikit cahaya, sehingga menghasilkan beberapa tingkat “abu-abu”. Brilian

  • Daripada “display flip-disc adalah teknologi yang agak asing”, sepertinya lebih tepat menyebutnya teknologi niche. Niche-nya adalah keterbacaan di bawah sinar matahari
    Beberapa tahun lalu display flip-disc sangat umum di bus, kereta, dan sebagainya. Lalu LED membaik, sehingga niche itu menghilang

    • Pada akhirnya memang pasti begitu. Display flip seperti ini, dengan komponen bergerak, kemungkinan besar perlu perawatan. Konsumsi dayanya juga mungkin lebih besar, dan ada suara bising. Saya masih ingat suara yang dulu terdengar di stasiun kereta dan bandara