Show HN: JavaScript ile çalışan bir flip-disc ekranın yapım hikayesi

 (flipdisc.io)
2 puan yazan GN⁺ 2024-06-26 | 1 yorum | WhatsApp'ta paylaş
  • Parlak LED'ler yerine fiziksel olarak dönen diskler kullanarak ofis için etkileşimli bir duvar sanatı oluşturdu ve 9 AlfaZeta panelini 3x3 dizerek 84x42'lik bir ekran kurdu
  • Donanım tarafı 24V 10A güç kaynağı, 80/20 alüminyum çerçeve, RS485 kablolama ve Nvidia Orin Nano etrafında toplandı; yüksek kare hızı isteniyorsa RS485 hattı başına panel sayısını 6'nın altında tutmak gerekiyor
  • Yazılım, RS485 frame'lerini ve RLE sıkıştırmasını işleyen Node.js kütüphanesi flipdisc ile sahne kuyruğu, REST API, websocket ve render döngüsünü yöneten flipdisc-server olarak ikiye ayrılıyor
  • Render için PIXI, Three.js, Matter.js, GSAP, node-canvas ve node-gl kullanılıyor; MediaPipe jest tanıma ise Node içinden Python script'i çalıştırıp sonuçları ZeroMQ IPC üzerinden alıyor
  • 42x84 çözünürlükte 3x5 piksel yazı tipi ve Floyd-Steinberg ile Bayer dithering gibi düşük çözünürlüğe uygun ifade tasarımı, gerçek kullanılabilirliği belirliyor

Neden flip-disc?

  • Flip-disc, elektromanyetik darbeyle küçük bir diski iki renk arasında çeviren bir ekran teknolojisi; 80 yıldan uzun süre önce icat edilmiş olsa da temel prensibi bugün de büyük ölçüde aynı
  • Parlak ve pürüzsüz LED ekran hissi yerine, fiziksel hareketi ve sesi olan ofis tipi büyük bir etkileşimli duvar sanatı üretmek için bunu seçti
  • Yüksek okunabilirlik, uzun ömür, 25-60fps aralığında çalışma ve diskler dönerken çıkan yağmur sesine benzer akustik karakter öne çıkan özellikleri
  • Daha önce kod görselleştirme için yaptığı pixel knitting app ve Atom Editor için crafting tool çalışmalarına benzer biçimde, bunu da kod ile fiziksel ortamı birleştiren bir deney olarak ele aldı

Donanım yapısı

  • 9 adet Alfazeta panels 3x3 grid halinde yerleştirilerek 84x42 diskli bir ekran oluşturuldu
    • Her kart, 28x7 boyutunda 2 panelden oluşuyor
    • PCB üzerinde eski bir ATMEGA128 microcontroller, yüzlerce MELF diyot ve 2 DIP switch bulunuyor
    • DIP switch'lerden biri adresi, diğeri baud rate'i ayarlıyor
    • AlfaZeta kartlarıyla ilgili ayrıntılar manual içinde yer alıyor
  • Flip-disc kartları ve parçalarını bulmak zor; mevcut pazar, genel tüketiciden çok ulaşım sektörü gibi kurumsal talebe göre şekillenmiş durumda
    • Yeniden yapılsa kendi kart tasarımını denemek mantıklı olabilir
    • Firmware erişimi performans ayarı açısından avantaj sağlar
    • Panel maliyeti hızla arttığı için daha büyük boyutlara ölçeklemek zorlaşıyor
  • Dikkate değer tedarikçiler ve ürünler

Güç, çerçeve ve kablolama

  • Ekran, kart başına 24V 1A gerektiriyor; 9 kartın tüm noktalarını aynı anda çevirmek için toplam 9A gerekiyor
  • Çerçeve 80/20 aluminum extrusions ile yapıldı ve PCB standoff'ları doğrudan çerçeveye sabitlendi
    • Kartlar ve diskler çok hassas olduğundan montaj sırasında disk kaybetmek veya kırmak kolay
    • Diskler kelebek kanadı kadar narin sayılabilecek düzeyde hassas; bu yüzden kenarlardan tutup kartları tek tek dikkatle yerleştirmek gerekiyor
    • Tamamlanmış yapının fotoğrafları photos of the final build sayfasında bulunuyor
  • Kullanılan 80/20 parçaları
  • Kablolama, her kolonu seri bağlayıp ardından tüm yapıyı zincir şeklinde birleştiriyor
    • Veri hattı için RS485 blok terminalindeki +/- uçları kullanılıyor
    • Güç hattında 18AWG, veri hattında ise 22AWG shielded cable kullanılıyor
    • Yüksek kare hızı isteniyorsa bir RS485 hattına 6'dan fazla panel bağlanmamalı
    • Tüm ekran için 3 adet USB RS485 devices kullanıldı
    • İçeriği harici bir sunucudan vermek istenirse RS485 to ethernet servers da bir seçenek

İşlem birimi ve giriş/çıkış

  • Ses, video ve görüntü işlemek için makine öğrenmesi kullanıldığından, temel bir tek kart bilgisayar ya da mikrodenetleyiciden daha fazla işlem gücü gerekiyor
  • Gerçek kurulumda Nvidia Orin Nano kullanılıyor
  • Jetson 6.0 üzerinde dağıtım için bir Dockerfile hazırlandı; MediaPipe GPU desteğini etkinleştirmek için kaynak koddan derleme gerekiyor
  • Daha kolay bir yol olarak M2 Mac Mini öneriliyor; etkileşim gerekmiyorsa Raspberry Pi gibi daha ucuz seçenekler de yeterli olabilir

Kart iletişimi ve Node.js sürücüsü

  • Kart iletişimi için RS485 kullanılıyor ve frame formatı 0x80 0x83 0x01 imageData 0x8F yapısında
    • Her frame başlangıç baytı 0x80 ile başlıyor
    • Ardından flush 0x83 veya buffer 0x84, kart adresi, görüntü verisi ve bitiş baytı 0x8F geliyor
    • Görüntü verisi yalnızca iki durum kullanıyor: 0, 1
    • Aktarım frame'lerini sıkıştırmak için RLE kullanılıyor
  • Node.js için temel kütüphane olarak flipdisc geliştirildi; şu anda USB ve ethernet üzerinden AlfaZeta ve Hanover kartlarında çalışıyor
  • Bir canvas örneğinin ctx.getImageData(0, 0, width, height) verisi doğrudan gönderilebiliyor; piksel verisi luminance değerine göre 1 veya 0'a dönüştürülüyor
  • Kurulum ve dokümantasyon

Render, etkileşim ve sunucu mimarisi

  • Amaç, önceden render edilmiş asset'leri düşük güçte bir cihaza göstermek değil; kullanıcıdan doğrudan geri bildirim alan gerçek zamanlı görselleştirmeler üretmek
  • Render tarafında mevcut web teknolojileri kullanılıyor
    • PIXI: genel 2D render
    • Three.js: 3D render
    • Matter.js: fizik motoru
    • GSAP: animasyon
    • node-canvas ve node-gl: sunucu tarafı render
  • Etkileşim için Google MediaPipe libraries ve modelleri kullanılıyor
    • Jest tanıma demosu için Gesture Recognizing örneğine bakılabilir
    • Pek çok ML kütüphanesi Python kullandığı için Node içinden Python script'i çalıştırılıyor ve veriler ZeroMQ IPC ile geri alınıyor
    • İleride Python WASM da kullanılabilir
  • Görselleştirmeler ayrı ayrı scene olarak tanımlanıyor ve kuyruğa eklenebiliyor
    • Scene oynatma ve kuyruk yönetimi REST API üzerinden erişiliyor
    • Gerçek zamanlı oynatma verisi websocket ile aktarılıyor
    • useLoop function ile event'lere abone olunabiliyor veya render kuyruğuna ekleme yapılabiliyor
    • Her scene dosyası bir scene ve schema döndürmeli; isteğe bağlı olarak background task da içerebilir
    • Background task belirli aralıklarla çalışıyor ve başarılı olursa oynatma kuyruğuna scene ekliyor
  • Sunucu paketi ve örnekler
  • flipdisc-server tarafından yönetilen işlevler
    • Dizinden scene içe aktarma
    • Scene dosyaları için live reload
    • Kuyruğa scene ekleyen background task'ler
    • Metin, görsel ve liste için UI bileşenleri
    • Yoga tabanlı flex layout
    • pixi/three/matter için temel getter ve setup, ek modül bağlama
    • REST sunucusu ve gerçek zamanlı veri için websocket
    • Render döngüsü ve GLSL shader kullanımı

Kontrol uygulaması

  • Zaman geçince hangi komutların çalıştırılacağını unutup projeyi tekrar kullanmayı zorlaştırma sorununu önlemek için ayrıca kararlı bir arayüz oluşturuldu
  • Hızlı prototipleme için expo uygulaması seçildi
  • Uygulama üzerinden ekranın pause, start, skip ve previous işlevleri kontrol edilebiliyor
    • Scene değişkenleri ayarlanarak deneyim kişiselleştirilebiliyor
    • Ekran üzerine doğrudan serbest çizim yapılabiliyor
    • Uygulama App Store'da Flipdisc adıyla yer alıyor
  • Uygulama özellikleri
    • Scene duraklatma/oynatma
    • Kuyruğa ekleme veya çıkarma
    • Kuyrukta sonraki/önceki öğeye geçme
    • O anda ekranda gösterilen görüntüyü gerçek zamanlı izleme
    • Ekran üzerine serbest çizim
    • Her scene için configuration variable gönderme

Düşük çözünürlükte tasarım

Sonraki adımlar ve referans projeler

İlgili okumalar

1 yorum

 
GN⁺ 2024-06-26
Hacker News yorumları

  • “Neredeyse sonsuz ömür” demek, beklendiği kadar sonsuz olmayabilir. Disklerin düşmesi veya takılması oldukça sık oluyor; ama düzgün çalıştığında gerçekten harika ve özellikle sesi çok iyi.
    Eskiden flip-dot ekranı olan bir ofisteydim; daha sonra o ekranı söktük. Takılmış bir diskin nasıl göründüğünü gösteren bir fotoğrafım var: https://photos.app.goo.gl/onpHefUVL8oeP4si7

    • Kesinlikle öyle. Kelebek kanatlarına benziyor; diskler kolayca çıkıyor ya da kırılıyor. Yapım sırasında çocuklar dokunmayı sevdiği için düşen diskleri sürekli değiştirmek zorunda kaldım.
    • Tozun nasıl temizlendiğini merak ediyorum. Muhtemelen hasar o sırada oluşur.

  • İlginç bilgi: Texas Instruments DLP (Digital Light Processing), flip-disc ekranın minyatürleştirilmiş bir sürümüne biraz benziyor.
    Ancak flip-disc 180° dönerken DLP pikselleri ışığı soğutucuya yönlendirmek için yalnızca biraz eğilir; flip-disc’in iki yüzü farklı renktedir, DLP ise ayna piksellerden oluşur. Flip-disc’in ömrünün sınırlı olma ihtimali yüksek; DLP ise trilyonlarca çevrime dayanır ve mikrosaniye ölçeğinde çok hızlı tepki vererek gri tonlamayı duty cycle modülasyonu (PWM) ile uygular.

  • Breakfast Studio, flip-disc modüllerle harika sanat eserleri yapıyor.
    https://breakfaststudio.com/flip-discs

    • Eriyen kutup buzlarını gösteren bir çalışmaları var; enerji verimliliğinin ne düzeyde olduğunu merak ediyorum. Hiçbir şey çevrilmediğinde güç kullanmıyor gibi görünüyor ama yine de aklıma takılıyor.
    • Bir tarafı gümüş, diğer tarafı soyut ve nötr bir tasarım olarak bırakmanın etkisi çok iyi.
    • Bu stüdyonun işleri gerçekten mükemmel. Böyle şeylerden hoşlanıyorsanız Las Vegas’taki yeni Fontainebleu Hotel için yaptıkları Ocean gibi “brixels” çalışmalarına da bakmaya değer.

  • Yazarın panelleri tam olarak nasıl edindiğini merak ediyorum. Eskiden buna bakmıştım; eBay gibi yerler dışında bulmak pratikte imkânsızdı.
    Tabii endüstriyel miktarları endüstriyel fiyatlarla almaya istekli değilseniz. Nereden aldığını ve ne kadara mal olduğunu bilmek isterim.

    • Benimki eBay’den, ama aynı paneli AlfaZeta’dan da alabilirsiniz. Daha ucuz seçenekler de var: https://xqd-led.en.alibaba.com/productgrouplist-936470954-2/...
      Yazıda da bu tür panellerin hobi geliştiricileri için daha ucuz hâle gelmesini istediğimi yazdım. Bu konuda iş birliği yapmak isteyen varsa bana ulaşsın.
    • Yakın zamanda aynı paneli aldım ve yazının ikinci paragrafında geçen satın alma kaynağını da okudum; AlfaZeta ürünü.
      Polonya’da üretilip gönderiliyor; herkese açık bir fiyat listesi yok ama bir 7x28 panel yaklaşık 220 euro civarında. Pahalı, ama hâlâ bunları üreten çok yer yok. Yazıyı okumaya devam ederseniz AliExpress tarafı dâhil daha ucuz görünen başka üreticilere bağlantılar da var.
    • eBay’in ne sorunu var anlamıyorum.

  • Gerçekten harika. JavaScript’in böyle yerlerde kullanıldığını görmek hoşuma gidiyor.
    James Webb Telescope’un yerleşik işlevlerinin önemli bir kısmında özel bir JavaScript çalışma zamanı kullandığını öğrenince şaşırmıştım.

    • SpaceX Dragon kapsülünün dokunmatik ekranları da web bileşenleriyle (Polymer) yapılmış HTML/JS uygulaması olarak çalışıyor :D
    • O kadar şaşırdım ki araştırdım.
      https://news.ycombinator.com/item?id=19739454
      Yine de JavaScript’i neden seçtiklerini hâlâ pek anlamıyorum. Makaleye göre ticari bir JavaScript motoruymuş: https://ui.adsabs.harvard.edu/abs/2006SPIE.6274E..0AB/abstra...
    • Belirli bir dilin belirli bir amaç için kullanılmasını neden sevdiğinizi merak ediyorum. Çelik ya da ahşap yerine alüminyum ile bir şey yapıldığını görüp heyecanlanmaya benziyor.
    • Bu korkunç. JavaScript web sayfası olmayan hiçbir yere yaklaşmamalı; web sayfalarında bile aslında tartışmalı.

  • Bunun bir NOC monitörü olarak faydalı olabileceğini düşünüyorum. Çoğu zaman statik bir gösterim olur; ama bir şey ters giderse ekran güncellenir ve sesi doğal olarak dikkati çeker. Ayrı bir “alarm” gerekmez.

    • Bu fikir hoşuma gitti. Adrenalin patlaması olmadan bildirim verebilir.

  • Bu siyah-beyaz ekranda elbette olması gereken Touhou Bad Apple animasyonu nerede?

  • Güzel. Ben de flip-dot’ları seviyorum. Hanover otobüs ekranı için JavaScript denetleyicisiyle başlamıştım (https://engineer.john-whittington.co.uk/2017/11/adventures-f...); daha sonra 256x56’lık, yani 24 panel ölçeğinde bir denetleyici yapma talebi vesilesiyle Alfa-Zeta modüllerine kadar uzandı
    O zamanlar Python modülü (https://github.com/tuna-f1sh/flipdot) ile Python Flask/React tabanlı bir yönetim arayüzü ve SQLite DB’deki sekans bilgilerini kullanmıştım. Ortaya çıkan şey, önceden yüklenmiş geçiş efektleri ve elbette Hayat Oyunu da dahil olmak üzere bu uygulamaya benziyordu: https://engineer.john-whittington.co.uk/2020/04/game-of-life...
    Alfa-Zeta modülleri için FPGA tabanlı, doğrudan HDMI denetleyicisi yapmak proje TODO listemde. Yerleşik firmware’in yenileme hızı biraz hayal kırıklığı yaratıyor

  • Demo videosunun başları bana Ye Olde Wooden Mirror’ı hatırlattı
    https://www.smoothware.com/danny/woodenmirror.html
    Ya da daha yakın tarihli şu da aklıma geldi: https://tisch.nyu.edu/itp/news/spring-2024/daniel-rozin--itp...

    • Harika. Ahşap pikseller dönerek ışığı daha fazla veya daha az yansıtıyor ve birkaç kademeli “gri” ton oluşturuyor gibi görünüyor. Çok yaratıcı

  • “Flip-disc ekranlar biraz yabancı bir teknoloji” demektense niş teknoloji demek daha doğru olur bence. O niş de güneş ışığı altında okunabilirlikti
    Birkaç yıl öncesine kadar flip-disc ekranlar otobüslerde, trenlerde vb. oldukça yaygındı. Sonra LED’ler iyileşince o niş ortadan kalktı

    • Sonunda böyle olması kaçınılmazdı. Hareketli parçalara sahip bu tür flip ekranlar büyük olasılıkla bakım gerektiriyordu. Güç tüketimi de daha yüksek olmalıydı, ayrıca gürültü de vardı. Eskiden tren istasyonlarında ve havalimanlarında duyulan o sesi hâlâ hatırlıyorum