Show HN: Chế tạo màn hình flip-disc chạy bằng JavaScript

 (flipdisc.io)
2 điểm bởi GN⁺ 2024-06-26 | 1 bình luận | Chia sẻ qua WhatsApp
  • Thay vì dùng LED phát sáng, tác giả tạo một tác phẩm wall art tương tác cho văn phòng bằng các đĩa lật vật lý, bố trí 9 tấm AlfaZeta theo dạng 3x3 để tạo thành màn hình 84x42
  • Phần cứng được ghép từ nguồn 24V 10A, khung nhôm 80/20, dây RS485 và Nvidia Orin Nano; nếu muốn tốc độ khung hình cao thì nên giới hạn không quá 6 panel trên mỗi đường RS485
  • Phần mềm được chia thành thư viện Node.js flipdisc để xử lý frame RS485 và nén RLE, cùng flipdisc-server phụ trách hàng đợi scene, REST API, websocket và vòng lặp render
  • PIXI, Three.js, Matter.js, GSAP, node-canvas và node-gl được dùng cho render; nhận diện cử chỉ MediaPipe chạy bằng cách gọi script Python từ Node rồi nhận kết quả qua ZeroMQ IPC
  • Ở độ phân giải 42x84, thiết kế biểu đạt phù hợp với độ phân giải thấp như font 3x5 pixel và dithering Floyd-Steinberg·Bayer quyết định đáng kể đến tính hữu dụng thực tế

Vì sao là flip-disc

  • Flip-disc là loại màn hình dùng xung điện từ để lật các đĩa nhỏ giữa hai màu; được phát minh từ hơn 80 năm trước nhưng nguyên lý cơ bản đến nay hầu như vẫn giữ nguyên
  • Tác giả chọn nó để tạo một tác phẩm wall art tương tác cỡ lớn cho văn phòng, có chuyển động vật lý và âm thanh, thay vì cảm giác sáng và mượt của màn hình LED
  • Đặc trưng của nó là độ dễ đọc cao, tuổi thọ dài, hoạt động trong khoảng 25-60fps và âm thanh như tiếng mưa khi các đĩa lật
  • Tương tự pixel knitting app từng làm để trực quan hóa mã, hay crafting tool cho Atom Editor, đây cũng là một thử nghiệm kết hợp code với vật liệu vật lý

Cấu hình phần cứng

  • Bố trí 9 Alfazeta panels theo lưới 3x3 để tạo thành màn hình 84x42 đĩa
    • Mỗi board gồm 2 panel 28x7
    • Trên PCB có ATMEGA128 microcontroller đời cũ, hàng trăm diode MELF và 2 công tắc DIP
    • Một công tắc DIP dùng để đặt địa chỉ, công tắc còn lại để đặt baud rate
    • Có thể xem thêm chi tiết về board AlfaZeta trong manual
  • Board và linh kiện flip-disc khá khó kiếm; thị trường hiện nay phù hợp hơn với nhu cầu doanh nghiệp như ngành vận tải thay vì người tiêu dùng phổ thông
    • Nếu làm lại, việc thử tự thiết kế board riêng cũng đáng cân nhắc
    • Nếu có quyền truy cập firmware thì sẽ thuận lợi hơn cho việc tinh chỉnh hiệu năng
    • Chi phí panel tăng rất nhanh nên khó mở rộng lên kích thước lớn hơn
  • Một số nhà cung cấp và sản phẩm đáng tham khảo

Nguồn điện, khung, đi dây

  • Màn hình cần 24V 1A cho mỗi board, và để lật toàn bộ dot của cả 9 board thì tổng cộng cần 9A
  • Khung được làm từ 80/20 aluminum extrusions và gắn trực tiếp các standoff PCB lên khung
    • Board và đĩa rất mỏng manh nên trong lúc lắp ráp rất dễ làm rơi hoặc gãy đĩa
    • Các đĩa mong manh đến mức được ví như cánh bướm, nên phải cầm ở mép và gắn từng board một cách cẩn thận
    • Có thể xem ảnh hoàn thiện tại photos of the final build
  • Các linh kiện 80/20 đã dùng
  • Đi dây bằng cách nối tiếp từng cột rồi xâu chuỗi toàn bộ lại
    • Đường dữ liệu dùng cực +/- của terminal block RS485
    • Đường nguồn dùng dây 18AWG, dữ liệu dùng cáp chống nhiễu 22AWG
    • Nếu muốn tốc độ khung hình cao thì nên nối không quá 6 panel trên một đường RS485
    • Toàn bộ màn hình dùng 3 USB RS485 devices
    • Nếu muốn cấp nội dung từ server bên ngoài thì RS485 to ethernet servers cũng là một lựa chọn

Thiết bị xử lý và vào/ra

  • Vì dùng machine learning để xử lý giọng nói, video và hình ảnh nên cần năng lực xử lý cao hơn các máy tính bo mạch đơn hay vi điều khiển cơ bản
  • Cấu hình thực tế dùng Nvidia Orin Nano
  • Tác giả đã tạo Dockerfile để triển khai trên Jetson 6.0, và để bật MediaPipe GPU thì phải biên dịch từ mã nguồn
  • Con đường dễ hơn được khuyên dùng là M2 Mac Mini; còn nếu bỏ qua tương tác thì có thể dùng phương án rẻ hơn như Raspberry Pi

Giao tiếp board và driver Node.js

  • Giao tiếp với board dùng RS485 và định dạng frame là 0x80 0x83 0x01 imageData 0x8F
    • Mỗi frame bắt đầu bằng byte mở đầu 0x80
    • Tiếp theo là flush 0x83 hoặc buffer 0x84, địa chỉ board, dữ liệu hình ảnh và byte kết thúc 0x8F
    • Dữ liệu hình ảnh chỉ dùng hai trạng thái 0, 1
    • Việc nén frame truyền dùng RLE
  • Tác giả đã tạo thư viện cơ bản cho Node.js là flipdisc, hiện chạy được với board AlfaZeta và Hanover qua USB và ethernet
  • Có thể gửi trực tiếp dữ liệu từ ctx.getImageData(0, 0, width, height) của canvas instance; dữ liệu pixel sẽ được chuyển thành 1 hoặc 0 theo luminance
  • Cài đặt và tài liệu

Render, tương tác và cấu trúc server

  • Mục tiêu không phải là hiển thị asset render sẵn trên thiết bị công suất thấp, mà là tạo trực quan hóa thời gian thực nhận phản hồi trực tiếp từ người dùng
  • Việc render tận dụng các công nghệ web quen thuộc
    • PIXI: render 2D thông thường
    • Three.js: render 3D
    • Matter.js: engine vật lý
    • GSAP: animation
    • node-canvas và node-gl: render phía server
  • Tương tác dùng các model và thư viện Google MediaPipe libraries
    • Có thể tham khảo demo nhận diện cử chỉ tại Gesture Recognizing
    • Vì nhiều thư viện ML dùng Python, nên Node sẽ chạy script Python rồi nhận dữ liệu trả về qua IPC ZeroMQ
    • Về sau có thể dùng Python WASM
  • Mỗi trực quan hóa được biểu diễn như một scene và có thể đưa vào hàng đợi
    • Việc phát scene và quản lý hàng đợi được truy cập qua REST API
    • Dữ liệu phát theo thời gian thực được gửi qua websocket
    • Có thể đăng ký sự kiện hoặc thêm vào hàng đợi render bằng useLoop function
    • Mỗi file scene phải trả về scene và schema, và có thể có thêm background task
    • Background task chạy theo khoảng thời gian định sẵn và nếu thành công sẽ thêm scene vào hàng đợi phát
  • Gói server và ví dụ
  • Những chức năng flipdisc-server xử lý
    • Import scene từ thư mục
    • Live reload file scene
    • Background task thêm scene vào hàng đợi
    • UI component cho văn bản, hình ảnh và danh sách
    • Flex layout dựa trên Yoga
    • Getter và phần thiết lập cơ bản cho pixi/three/matter, cùng kết nối thêm module
    • REST server và websocket cho dữ liệu thời gian thực
    • Vòng lặp render và sử dụng GLSL shader

Ứng dụng điều khiển

  • Để tránh việc sau một thời gian lại quên phải chạy lệnh nào, khiến khó quay lại sử dụng dự án, tác giả đã làm riêng một giao diện ổn định
  • Tác giả chọn ứng dụng expo để prototype nhanh
  • Trong app có thể điều khiển pause, start, skip, previous của màn hình
    • Có thể đặt biến scene để cá nhân hóa trải nghiệm
    • Có thể tự do vẽ trực tiếp lên màn hình
    • Có thể tải Flipdisc trên App Store
  • Tính năng của app
    • Tạm dừng/phát scene
    • Thêm hoặc xóa khỏi hàng đợi
    • Chuyển scene tiếp theo/trước đó trong hàng đợi
    • Xem trực tiếp nội dung hiện đang hiển thị trên màn hình
    • Tự do vẽ lên màn hình
    • Gửi biến cấu hình cho từng scene

Thiết kế ở độ phân giải thấp

Bước tiếp theo và các dự án tham khảo

  • Mục tiêu tiếp theo là tạo một giao diện tác tử minh bạch cho AI, tận dụng đầu vào và đầu ra đa phương thức mới
  • Tác giả dự định thúc đẩy tính năng này sau khi chờ các model thế hệ tiếp theo ra mắt
  • Tác giả hy vọng flip-disc sẽ trở nên dễ tiếp cận hơn với giới maker, và đề nghị ai quan tâm đến việc hợp tác làm phần cứng flip-disc giá rẻ thì hãy liên hệ
  • Các dự án và tài liệu truyền cảm hứng

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-06-26
Ý kiến trên Hacker News

  • Gọi là “tuổi thọ gần như vô hạn” thì có thể không vô hạn như kỳ vọng. Chuyện đĩa bị rơi ra hoặc kẹt xảy ra khá thường xuyên, nhưng khi hoạt động đúng thì thật sự rất ngầu, đặc biệt là âm thanh rất hay
    Trước đây tôi từng ở một văn phòng có màn hình flip-dot, và sau đó đã tháo dỡ màn hình đó. Tôi có chụp lại ảnh một đĩa bị kẹt trông như thế nào: https://photos.app.goo.gl/onpHefUVL8oeP4si7

    • Đúng là vậy. Nó giống cánh bướm nên đĩa rất dễ bung ra hoặc gãy. Trong lúc làm, bọn trẻ rất thích chạm vào, nên tôi cứ phải thay các đĩa bị rơi ra
    • Tôi tò mò không biết họ loại bỏ bụi bằng cách nào. Có lẽ lúc đó sẽ xảy ra hư hỏng

  • Sự thật thú vị: Texas Instruments DLP (Digital Light Processing) khá giống một phiên bản thu nhỏ của màn hình flip-disc
    Tuy nhiên flip-disc xoay 180°, còn pixel DLP chỉ nghiêng một chút để chuyển ánh sáng về phía tản nhiệt; flip-disc có hai mặt màu khác nhau, còn DLP là các pixel gương. Flip-disc nhiều khả năng có tuổi thọ hữu hạn, còn DLP chịu được hàng nghìn tỷ chu kỳ; DLP phản hồi rất nhanh ở mức micro giây nên triển khai thang xám bằng điều chế chu kỳ làm việc (PWM)

  • Breakfast Studio đang tạo ra những tác phẩm nghệ thuật rất ấn tượng bằng các mô-đun flip-disc
    https://breakfaststudio.com/flip-discs

    • Có một tác phẩm thể hiện băng vùng cực đang tan, tôi tò mò hiệu suất năng lượng của nó ở mức nào. Có lẽ khi không có gì lật thì nó không dùng điện, nhưng vẫn khiến tôi bận tâm
    • Hiệu ứng để một mặt màu bạc, mặt kia là thiết kế trừu tượng và trung tính trông rất hay
    • Tác phẩm của studio này thật sự xuất sắc. Nếu thích kiểu này thì cũng đáng xem các tác phẩm “brixels” như Ocean mà họ làm cho Fontainebleu Hotel mới ở Las Vegas

  • Tôi tò mò tác giả đã kiếm được tấm panel chính xác bằng cách nào. Trước đây tôi từng tìm hiểu những thứ như thế này, nhưng ngoài những nơi như eBay thì gần như không thể mua được
    Trừ khi bạn sẵn sàng mua số lượng công nghiệp với giá công nghiệp. Tôi muốn biết họ mua ở đâu và giá bao nhiêu

    • Cái của tôi mua trên eBay, nhưng bạn cũng có thể mua cùng loại panel từ AlfaZeta. Cũng có lựa chọn rẻ hơn: https://xqd-led.en.alibaba.com/productgrouplist-936470954-2/...
      Trong bài tôi cũng viết rằng hy vọng các panel như thế này sẽ rẻ hơn cho dân làm dự án hobby. Nếu ai muốn hợp tác theo hướng này thì hãy liên hệ
    • Gần đây tôi đã mua cùng loại panel, và cũng đọc nguồn mua được nêu ở đoạn thứ hai của bài; đó là sản phẩm của AlfaZeta
      Họ sản xuất và gửi hàng từ Ba Lan, không có bảng giá công khai, nhưng một panel 7x28 vào khoảng 220 euro. Đắt, nhưng hiện không có nhiều nơi còn sản xuất thứ này. Nếu đọc tiếp bài viết, bạn sẽ thấy liên kết tới các nhà sản xuất khác có vẻ rẻ hơn, bao gồm cả phía AliExpress
    • Tôi không hiểu eBay thì có vấn đề gì

  • Thật sự rất tuyệt. Tôi thích thấy JavaScript được dùng vào những việc như thế này
    Tôi đã ngạc nhiên khi biết James Webb Telescope dùng một runtime JavaScript tùy chỉnh cho khá nhiều chức năng trên tàu

    • Màn hình cảm ứng của khoang SpaceX Dragon cũng chạy bằng ứng dụng HTML/JS tạo bằng web components (Polymer) :D
    • Tôi ngạc nhiên quá nên đã tìm thử
      https://news.ycombinator.com/item?id=19739454
      Dù vậy tôi vẫn chưa rõ vì sao họ chọn JavaScript. Theo bài báo thì đó là một engine JavaScript thương mại: https://ui.adsabs.harvard.edu/abs/2006SPIE.6274E..0AB/abstra...
    • Tôi tò mò vì sao người ta lại thích việc một ngôn ngữ cụ thể được dùng cho một mục đích nào đó. Trông hơi giống việc hào hứng khi thấy thứ gì đó được làm bằng nhôm thay vì thép hay gỗ
    • Thế thì kinh khủng. JavaScript không nên bén mảng tới bất cứ nơi nào ngoài trang web, mà ngay cả trên trang web thì thật ra cũng còn đáng nghi

  • Cái này có vẻ hữu dụng làm màn hình NOC. Phần lớn thời gian chỉ hiển thị tĩnh, nhưng nếu có gì sai thì màn hình được cập nhật, và âm thanh đó tự nhiên sẽ thu hút sự chú ý. Không cần “chuông báo” riêng

    • Ý tưởng này hay. Nó có thể đưa ra thông báo mà không làm adrenaline tăng vọt

  • Trên màn hình đen trắng này, hoạt ảnh Touhou Bad Apple lẽ ra phải có đâu rồi?

  • Hay. Tôi cũng thích flip-dot. Tôi bắt đầu từ một bộ điều khiển JavaScript cho màn hình xe buýt Hanover (https://engineer.john-whittington.co.uk/2017/11/adventures-f...), rồi sau đó, nhờ một đơn đặt hàng làm bộ điều khiển cỡ 256x56, tức 24 tấm panel, mà tiếp tục đến các mô-đun Alfa-Zeta
    Khi đó tôi dùng mô-đun Python (https://github.com/tuna-f1sh/flipdot), phần quản trị dựa trên Python Flask/React, và thông tin sequence trong SQLite DB. Thành quả khá giống ứng dụng này, gồm cả các hiệu ứng chuyển cảnh được nạp sẵn và tất nhiên là cả Game of Life: https://engineer.john-whittington.co.uk/2020/04/game-of-life...
    Việc làm một bộ điều khiển HDMI trực tiếp dựa trên FPGA cho các mô-đun Alfa-Zeta đang nằm trong danh sách TODO dự án của tôi. Tốc độ refresh của firmware tích hợp hơi đáng tiếc

  • Phần đầu video demo làm tôi nhớ đến Ye Olde Wooden Mirror
    https://www.smoothware.com/danny/woodenmirror.html
    Hoặc cũng nhớ đến thứ gần đây hơn này: https://tisch.nyu.edu/itp/news/spring-2024/daniel-rozin--itp...

    • Tuyệt. Trông như các pixel gỗ xoay để phản xạ nhiều hoặc ít ánh sáng hơn, tạo ra nhiều mức “xám”. Rất sáng tạo

  • Thay vì nói “màn hình flip-disc là một công nghệ khá lạ lẫm”, có lẽ gọi là công nghệ ngách thì đúng hơn. Cái ngách đó là khả năng đọc được dưới ánh nắng
    Chỉ vài năm trước, màn hình flip-disc vẫn rất phổ biến trên xe buýt, tàu hỏa, v.v. Rồi khi LED tốt hơn, cái ngách đó biến mất

    • Rốt cuộc thì cũng tất yếu thôi. Những màn hình flip kiểu này có bộ phận chuyển động nên rất có thể cần bảo trì. Mức tiêu thụ điện chắc cũng cao hơn, và còn có tiếng ồn nữa. Tôi vẫn nhớ âm thanh đó ở các ga tàu và sân bay ngày xưa