- สร้างงานวอลอาร์ตอินเทอร์แอ็กทีฟสำหรับออฟฟิศโดยใช้ ดิสก์ที่พลิกกลับได้จริง แทน LED ที่ส่องสว่าง และจัดวางแผง AlfaZeta 9 แผงแบบ 3x3 เพื่อประกอบเป็นจอแสดงผลขนาด 84x42
- ฮาร์ดแวร์ประกอบด้วย แหล่งจ่ายไฟ 24V 10A, โครงอะลูมิเนียม 80/20, การเดินสาย RS485 และ Nvidia Orin Nano โดยถ้าต้องการเฟรมเรตสูง ควรจำกัดไม่เกิน 6 แผงต่อสาย RS485 หนึ่งเส้น
- ซอฟต์แวร์แยกเป็นไลบรารี Node.js ชื่อ flipdisc สำหรับจัดการเฟรม RS485 และการบีบอัดแบบ RLE และ flipdisc-server สำหรับคิวฉาก, REST API, เว็บซ็อกเก็ต และลูปการเรนเดอร์
- ใช้ PIXI, Three.js, Matter.js, GSAP, node-canvas และ node-gl ในการเรนเดอร์ ส่วนการรู้จำท่าทางด้วย MediaPipe ทำโดยให้ Node เรียกสคริปต์ Python แล้วรับผลผ่าน ZeroMQ IPC
- ที่ความละเอียด 42x84 การออกแบบการแสดงผลให้เหมาะกับความละเอียดต่ำ เช่น ฟอนต์ 3x5 พิกเซล และการ dithering แบบ Floyd-Steinberg กับ Bayer เป็นตัวกำหนดความใช้งานได้จริงอย่างมาก
ทำไมต้องฟลิปดิสก์
- ฟลิปดิสก์ คือจอแสดงผลที่ใช้พัลส์แม่เหล็กไฟฟ้าพลิกดิสก์ขนาดเล็กไปมาระหว่างสองสี ถูกประดิษฐ์ขึ้นเมื่อกว่า 80 ปีก่อน แต่หลักการพื้นฐานส่วนใหญ่ยังคงเหมือนเดิมจนถึงปัจจุบัน
- เลือกใช้เพื่อสร้างวอลอาร์ตอินเทอร์แอ็กทีฟขนาดใหญ่สำหรับออฟฟิศที่มีการเคลื่อนไหวและเสียงจริง แทนความรู้สึกสว่างเรียบลื่นของจอ LED
- จุดเด่นคืออ่านง่าย อายุการใช้งานยาว ทำงานได้ในช่วง 25-60fps และมีเสียงคล้ายฝนตกเมื่อดิสก์พลิก
- แนวทางนี้คล้ายกับการทดลองก่อนหน้าอย่าง pixel knitting app ที่ทำเพื่อการแสดงภาพด้วยโค้ด และ crafting tool สำหรับ Atom Editor ซึ่งผสานโค้ดเข้ากับสื่อทางกายภาพ
โครงสร้างฮาร์ดแวร์
- วาง Alfazeta panels 9 แผงเป็น กริด 3x3 เพื่อสร้างจอแสดงผลฟลิปดิสก์ขนาด 84x42
- แต่ละบอร์ดประกอบด้วยแผง 28x7 จำนวน 2 ชิ้น
- บน PCB มี ATMEGA128 microcontroller รุ่นเก่า, ไดโอด MELF หลายร้อยตัว และ DIP switch 2 ตัว
- DIP switch ตัวหนึ่งใช้ตั้งค่า address และอีกตัวใช้ตั้งค่า baud rate
- รายละเอียดของบอร์ด AlfaZeta เพิ่มเติมดูได้ใน manual
- บอร์ดฟลิปดิสก์และชิ้นส่วนหาซื้อได้ยาก และตลาดปัจจุบันรองรับ ความต้องการระดับองค์กร อย่างอุตสาหกรรมขนส่งมากกว่าผู้บริโภคทั่วไป
- ถ้าทำใหม่อีกครั้ง การลองออกแบบบอร์ดเองก็น่าสนใจ
- หากเข้าถึงเฟิร์มแวร์ได้ จะได้เปรียบในการปรับแต่งประสิทธิภาพ
- ค่าแผงเพิ่มขึ้นอย่างรวดเร็ว ทำให้ขยายไปขนาดใหญ่กว่านี้ได้ยาก
- แหล่งจัดหาและผลิตภัณฑ์ที่น่าสนใจ
ไฟเลี้ยง โครง และการเดินสาย
- จอแสดงผลต้องใช้ 24V 1A ต่อบอร์ด และหากพลิกทุกจุดบนบอร์ดทั้ง 9 พร้อมกันจะต้องใช้รวม 9A
- ชุดจริงใช้ MEAN WELL HLG-240H-24 ขนาด 24V 10A
- โครงสร้างทำจาก 80/20 aluminum extrusions และยึด PCB standoff เข้ากับเฟรมโดยตรง
- บอร์ดและดิสก์เปราะมาก ทำให้ระหว่างประกอบมีโอกาสที่ดิสก์จะหลุดหรือแตกได้ง่าย
- ดิสก์บอบบางถึงขั้นเปรียบเหมือนปีกผีเสื้อ จึงต้องจับที่ขอบและติดบอร์ดทีละแผ่นอย่างระมัดระวัง
- ดูภาพประกอบเสร็จแล้วได้ที่ photos of the final build
- ชิ้นส่วน 80/20 ที่ใช้
- (7) 1010 - ตัดยาว 25.2 นิ้ว
- (2) 1010 - ตัดยาว 49.65 นิ้ว
- (12) 33460 Corner Connector
- (72) M3x16MM screws
- (72) M3x10MM spacer
- การเดินสายเชื่อมแต่ละคอลัมน์แบบอนุกรม แล้วต่อรวมทั้งหมดเป็นสาย chain
- สายข้อมูลใช้ขั้ว +/- ของ RS485 block terminal
- สายไฟใช้ 18AWG ส่วนข้อมูลใช้ 22AWG shielded cable
- ถ้าต้องการเฟรมเรตสูง ควรเชื่อม ไม่เกิน 6 แผงต่อสาย RS485 หนึ่งเส้น
- จอทั้งชุดใช้ USB RS485 devices จำนวน 3 ตัว
- ถ้าต้องการให้เซิร์ฟเวอร์ภายนอกส่งคอนเทนต์ได้ ก็มี RS485 to ethernet servers เป็นอีกทางเลือก
หน่วยประมวลผลและอินพุต/เอาต์พุต
- เนื่องจากใช้แมชชีนเลิร์นนิงเพื่อประมวลผลเสียง วิดีโอ และภาพ จึงต้องการ พลังประมวลผล มากกว่าคอมพิวเตอร์บอร์ดเดี่ยวหรือไมโครคอนโทรลเลอร์ทั่วไป
- ชุดจริงใช้ Nvidia Orin Nano
- Raspberry Pi ก็อาจใช้งานได้ แต่เฟรมเรตอาจลดลง
- กล้องที่ใช้คือ IMX708 camera
- อินพุต/เอาต์พุตเสียงใช้ Waveshare audio board
- ได้สร้าง Dockerfile สำหรับ deploy บน Jetson 6.0 และต้องคอมไพล์จากซอร์สเพื่อเปิดใช้ MediaPipe GPU
- หากต้องการเส้นทางที่ง่ายกว่า แนะนำ M2 Mac Mini และหากไม่ต้องมีการโต้ตอบ ก็สามารถใช้วิธีที่ถูกกว่าด้วย Raspberry Pi ได้
การสื่อสารกับบอร์ดและไดรเวอร์ Node.js
- การสื่อสารกับบอร์ดใช้ RS485 และรูปแบบเฟรมคือ
0x80 0x83 0x01 imageData 0x8F- แต่ละเฟรมเริ่มต้นด้วยไบต์เริ่ม
0x80 - ตามด้วย flush
0x83หรือ buffer0x84, address ของบอร์ด, ข้อมูลภาพ และไบต์สิ้นสุด0x8F - ข้อมูลภาพใช้เพียงสองสถานะคือ
0และ1 - ใช้ RLE สำหรับบีบอัดเฟรมที่ส่ง
- แต่ละเฟรมเริ่มต้นด้วยไบต์เริ่ม
- ได้สร้างไลบรารีพื้นฐานสำหรับ Node.js ชื่อ flipdisc ซึ่งปัจจุบันทำงานกับบอร์ด AlfaZeta และ Hanover ผ่าน USB และ ethernet
- สามารถส่งข้อมูลจาก
ctx.getImageData(0, 0, width, height)ของ canvas instance ได้โดยตรง และข้อมูลพิกเซลจะถูกแปลงเป็น1หรือ0ตาม luminance - การติดตั้งและเอกสาร
- Driver Documentation
npm install flipdisc
การเรนเดอร์ การโต้ตอบ และโครงสร้างเซิร์ฟเวอร์
- เป้าหมายไม่ใช่การแสดงแอสเซ็ตที่เรนเดอร์ล่วงหน้าบนอุปกรณ์พลังงานต่ำ แต่คือการสร้าง ภาพแบบเรียลไทม์ ที่รับฟีดแบ็กจากผู้ใช้โดยตรง
- ใช้เทคโนโลยีเว็บเดิมในการเรนเดอร์
- สำหรับการโต้ตอบ ใช้ MediaPipe libraries และโมเดลของ Google
- ดูเดโมการรู้จำท่าทางได้ที่ Gesture Recognizing
- เนื่องจากไลบรารี ML จำนวนมากใช้ Python จึงให้ Node รันสคริปต์ Python แล้วรับข้อมูลกลับผ่าน ZeroMQ IPC
- ในอนาคตอาจใช้ Python WASM
- ภาพแต่ละแบบถูกแสดงเป็น ฉาก (scene) และสามารถเพิ่มเข้าไปในคิวได้
- การเล่นฉากและจัดการคิวเข้าถึงผ่าน REST API
- ข้อมูลการเล่นแบบเรียลไทม์ส่งผ่านเว็บซ็อกเก็ต
- สามารถ subscribe event หรือเพิ่มเข้า render queue ได้ด้วย useLoop function
- ไฟล์ scene แต่ละไฟล์ต้องส่งคืน scene และ schema และอาจมี background task แบบไม่บังคับ
- background task จะรันตามช่วงเวลาที่กำหนด และหากสำเร็จจะเพิ่ม scene เข้า playback queue
- แพ็กเกจเซิร์ฟเวอร์และตัวอย่าง
- Server Documentation
- Scene Examples
npm install flipdisc-server
- ฟังก์ชันที่
flipdisc-serverดูแล- นำเข้า scene จากไดเรกทอรี
- live reload ของไฟล์ scene
- background task ที่เพิ่ม scene ลงในคิว
- UI component สำหรับข้อความ รูปภาพ และลิสต์
- flex layout ที่อิงกับ Yoga
- getter และ setup พื้นฐานสำหรับ pixi/three/matter รวมถึงการเชื่อมโมดูลเพิ่มเติม
- REST server และเว็บซ็อกเก็ตสำหรับข้อมูลเรียลไทม์
- ลูปการเรนเดอร์และการใช้ GLSL shader
แอปควบคุม
- เพื่อหลีกเลี่ยงปัญหาที่เวลาผ่านไปแล้วลืมว่าต้องรันคำสั่งอะไร จนกลับมาใช้โปรเจ็กต์ซ้ำได้ยาก จึงสร้าง อินเทอร์เฟซที่เสถียร แยกไว้ต่างหาก
- เลือกใช้แอป expo เพื่อทำต้นแบบอย่างรวดเร็ว
- ในแอปสามารถควบคุม pause, start, skip และ previous ของจอแสดงผลได้
- สามารถตั้งค่าตัวแปรของ scene เพื่อปรับประสบการณ์ให้เป็นแบบเฉพาะบุคคล
- สามารถวาดได้อย่างอิสระบนหน้าจอโดยตรง
- ดาวน์โหลด Flipdisc ได้จาก App Store
- ความสามารถของแอป
- หยุด/เล่น scene
- เพิ่มหรือลบออกจากคิว
- ไปฉากถัดไป/ก่อนหน้าในคิว
- ดูภาพที่กำลังแสดงบนจอแบบเรียลไทม์
- วาดบนหน้าจอได้อย่างอิสระ
- ส่ง configuration variable ไปยังแต่ละ scene
การออกแบบสำหรับความละเอียดต่ำ
- บนจอฟลิปดิสก์ขนาด 42x84 ต้องตัดสินใจว่าจะสื่อข้อมูลให้เรียบง่ายเพียงใดภายใต้จำนวนพิกเซลที่จำกัด ซึ่งใกล้เคียงกับ การออกแบบภายใต้ข้อจำกัด
- ฟอนต์พื้นฐานสำหรับการอ่านใช้ 3x5 pixel font
- ยังมีเวอร์ชัน 4x5 และ mono
- 3x3 fonts และ 3x4 nano fonts เล็กกว่านี้ แต่เห็นว่าอ่านยากเกินไปสำหรับการใช้งานจริง
- เมื่อเกิน 12 พิกเซลขึ้นไป ฟอนต์ส่วนใหญ่จะอ่านได้พอสมควร
- เนื่องจากไม่มีการเรนเดอร์ anti-aliasing ฟอนต์แบบ bitmap จึงเหมาะกับจอประเภทนี้มาก
- คลัง Bitmap designed fonts ก็น่าสนใจสำหรับนำมารวมใช้งาน
- สำหรับภาพ ใช้การผสมระหว่าง Floyd-Steinberg dithering และ Bayer 4x4 ordered dithering
- Floyd-Steinberg ให้การกระจายพิกเซลที่ดูเป็นธรรมชาติกว่าในภาพ จึงเป็นแบบที่ชอบมากกว่า
- Bayer สร้างแพตเทิร์นที่สม่ำเสมอ จึงเหมาะกับองค์ประกอบ UI มากกว่า
- แนะนำเนื้อหาที่เกี่ยวข้องคือ Ditherpunk — The article I wish I had about monochrome image dithering
- ได้สร้าง scene สำหรับออฟฟิศ เช่น New York Times RSS reader, Spotify client, weather app และ ชุด scene อื่น ๆ
ขั้นถัดไปและโปรเจ็กต์อ้างอิง
- เป้าหมายถัดไปคือการใช้มัลติโมดัลอินพุต/เอาต์พุตแบบใหม่ เพื่อสร้าง อินเทอร์เฟซเอเจนต์ที่โปร่งใส สำหรับ AI
- มีแผนจะเดินหน้าฟีเจอร์นี้หลังจากรอการเปิดตัวโมเดลรุ่นถัดไป
- ผู้เขียนหวังว่าฟลิปดิสก์จะเข้าถึงได้ง่ายขึ้นสำหรับสายทำของเป็นงานอดิเรก และขอให้ผู้ที่สนใจร่วมพัฒนาฮาร์ดแวร์ฟลิปดิสก์ราคาประหยัดติดต่อมา
- โปรเจ็กต์และแหล่งข้อมูลที่เป็นแรงบันดาลใจ
1 ความคิดเห็น
ความคิดเห็นจาก Hacker News
ถ้าจะบอกว่า “อายุการใช้งานแทบไม่จำกัด” อาจไม่ได้ไม่จำกัดอย่างที่คาดไว้ มีกรณีที่ ดิสก์หลุดหรือติดค้าง อยู่ไม่น้อย แต่เวลาทำงานได้ถูกต้องก็ดูเจ๋งจริง ๆ และโดยเฉพาะเสียงก็ดีมาก
เมื่อก่อนผมเคยอยู่ในออฟฟิศที่มีจอ flip-dot และภายหลังก็ได้รื้อจอนั้นออก มีรูปที่ถ่ายเก็บไว้ว่าดิสก์ที่ติดค้างมีหน้าตาเป็นอย่างไร: https://photos.app.goo.gl/onpHefUVL8oeP4si7
เกร็ดน่าสนใจ: Texas Instruments DLP (Digital Light Processing) คล้ายกับเวอร์ชันย่อส่วนของจอ flip-disc
เพียงแต่ flip-disc หมุน 180° ส่วนพิกเซล DLP เอียงเพียงเล็กน้อยเพื่อสะท้อนแสงไปยังฮีตซิงก์ และ flip-disc มีสีคนละด้าน แต่ DLP เป็นพิกเซลกระจก อายุการใช้งานของ flip-disc มีแนวโน้มจำกัด ขณะที่ DLP ทนได้ถึงระดับล้านล้านรอบ และ DLP ตอบสนองเร็วมากในระดับไมโครวินาที จึงสร้างโทนสีเทาด้วย การมอดูเลตแบบ duty cycle (PWM)
Breakfast Studio กำลังสร้างงานศิลปะเจ๋ง ๆ ด้วยโมดูล flip-disc
https://breakfaststudio.com/flip-discs
สงสัยว่าผู้เขียนได้แผงมาอย่างไรกันแน่ เมื่อก่อนเคยลองหาดู ของแบบนี้แทบจะหาไม่ได้เลยนอกจากตามที่อย่าง eBay
เว้นแต่คุณพร้อมจะซื้อจำนวนระดับอุตสาหกรรมในราคาระดับอุตสาหกรรม อยากรู้ว่าซื้อมาจากที่ไหนและราคาเท่าไร
ในบทความก็เขียนไว้ว่าอยากให้แผงแบบนี้ถูกลงสำหรับนักพัฒนาสายงานอดิเรก ถ้ามีใครอยากร่วมมือด้านนี้ก็ติดต่อมาได้
ผลิตและจัดส่งจากโปแลนด์ ไม่มีราคาสาธารณะ แต่แผง 7x28 หนึ่งแผงอยู่ราว ๆ 220 ยูโร แพงอยู่ แต่ก็ยังมีผู้ผลิตของแบบนี้ไม่มากนัก ถ้าอ่านต่อไปจะมีลิงก์ผู้ผลิตรายอื่นที่ดูถูกกว่า รวมถึงฝั่ง AliExpress ด้วย
เจ๋งมาก ชอบที่ได้เห็น JavaScript ถูกนำมาใช้กับอะไรแบบนี้
ผมแปลกใจที่รู้ว่า James Webb Telescope ใช้รันไทม์ JavaScript แบบกำหนดเองกับฟังก์ชันบนยานจำนวนมาก
https://news.ycombinator.com/item?id=19739454
ถึงอย่างนั้นก็ยังไม่ค่อยเข้าใจว่าทำไมถึงเลือก JavaScript ตามบทความวิชาการบอกว่าเป็นเอนจิน JavaScript เชิงพาณิชย์: https://ui.adsabs.harvard.edu/abs/2006SPIE.6274E..0AB/abstra...
คิดว่านี่น่าจะมีประโยชน์ในฐานะ มอนิเตอร์ NOC ส่วนใหญ่เป็นการแสดงผลคงที่ แต่ถ้ามีอะไรผิดปกติ หน้าจอก็จะอัปเดต และเสียงของมันจะดึงความสนใจได้เองตามธรรมชาติ ไม่ต้องมี “สัญญาณเตือน” แยกต่างหาก
แล้วแอนิเมชัน Touhou Bad Apple ที่ควรจะมีอยู่แล้วบนจอขาวดำแบบนี้อยู่ไหน?
วิดีโอต้นฉบับสำหรับคนที่ไม่รู้จัก: https://www.youtube.com/watch?v=FtutLA63Cp8
เวอร์ชันที่ผมชอบที่สุดคือวิดีโอนี้ที่ใช้วัตถุจริง: https://www.youtube.com/watch?v=lT-fdnIK0k0 (การสนทนาใน HN: https://news.ycombinator.com/item?id=39527559)
ดีเลย ผมเองก็ชอบ flip-dot เหมือนกัน เริ่มจากคอนโทรลเลอร์ JavaScript สำหรับ จอแสดงผลรถบัส Hanover (https://engineer.john-whittington.co.uk/2017/11/adventures-f...) แล้วต่อมาก็พัฒนาไปถึงโมดูล Alfa-Zeta จากงานว่าจ้างให้ทำคอนโทรลเลอร์ขนาด 256x56 หรือเท่ากับแผง 24 แผง
ตอนนั้นใช้โมดูล Python (https://github.com/tuna-f1sh/flipdot) กับหน้าจัดการที่ใช้ Python Flask/React และข้อมูลลำดับใน SQLite DB ผลลัพธ์ออกมาคล้ายแอปนี้ รวมถึงเอฟเฟกต์ทรานซิชันที่โหลดไว้ล่วงหน้า และแน่นอนว่า Game of Life ด้วย: https://engineer.john-whittington.co.uk/2020/04/game-of-life...
การทำคอนโทรลเลอร์ HDMI โดยตรงที่ใช้ FPGA สำหรับโมดูล Alfa-Zeta อยู่ในรายการ TODO โปรเจกต์ของผม ความเร็วรีเฟรชของเฟิร์มแวร์ในตัวน่าเสียดายนิดหน่อย
ช่วงต้นของวิดีโอเดโมทำให้นึกถึง Ye Olde Wooden Mirror
https://www.smoothware.com/danny/woodenmirror.html
หรืออันที่ใหม่กว่านี้ก็ผุดขึ้นมา: https://tisch.nyu.edu/itp/news/spring-2024/daniel-rozin--itp...
แทนที่จะบอกว่า “จอแสดงผล flip-disc เป็นเทคโนโลยีที่ค่อนข้างไม่คุ้นเคย” ผมว่าคำว่า เทคโนโลยีเฉพาะกลุ่ม น่าจะเหมาะกว่า ช่องว่างเฉพาะกลุ่มนั้นคือการอ่านได้ชัดเจนใต้แสงแดด
แค่ไม่กี่ปีก่อน จอแสดงผล flip-disc ยังพบได้ทั่วไปมากบนรถบัสหรือรถไฟ แต่พอ LED ดีขึ้น ช่องว่างนั้นก็หายไป