Smart PC Display นี้คืออะไร?

ตัว Project เป็น Display แบบ Ultra-wide สำหรับติดตั้งภายใน PC Cabinet โดยใช้ ESP32-P4 เป็นตัวขับจอโดยตรง แทนการต่อจอเป็น Monitor เพิ่มผ่าน HDMI

นั่นแปลว่า มันไม่ได้เป็น Windows Second Monitor ที่เราลากหน้าต่างไปวางได้ แต่เป็น Embedded Display ที่มี Firmware ของตัวเอง

ESP32-P4 รับผิดชอบ:

• อ่าน Animation จาก SD Card
• Decode JPEG Frame
• จัด Framebuffer
• ขับจอผ่าน MIPI DSI
• จัด Orientation
• รับ Button Input
• ใน Telemetry Edition รับข้อมูล PC ผ่าน Serial
• วาด HUD Overlay ลงบน Frame

Hardware ที่ต้องใช้ตาม Project

1920×480 กับ 480×1920 ต่างกันยังไง?

จอที่ใช้เป็น Bar Display ที่มี Physical Resolution:

480 × 1920 pixels

ถ้าวางในแนวตั้ง Firmware สามารถใช้ Frame 480×1920 ได้ตรงกับ Panel

แต่ใน PC Cabinet เรามักติดจอเป็นแนวยาว จึงมอง Content เป็น:

1920 × 480 pixels

ใน Horizontal Mode Source ระบุว่า Firmware หมุน Frame 90° ก่อนนำไปแสดงบน Panel Physical 480×1920

CAD Designing: ตัวจอจะสวยหรือรก ขึ้นกับ Housing ตรงนี้เลย

ผู้สร้างออกแบบ Enclosure ใน Fusion 360 โดยเลือกโครงสร้างแบบ Modular และแบ่งออกเป็น 3 ส่วนหลัก

Prototype ต้นฉบับ พิมพ์ทั้งสามชิ้นด้วย Black PLA เพื่อให้เข้ากับโทนของ PC Cabinet

เตรียม SD Card ก่อนประกอบ จะได้ไม่ต้องแกะเครื่องทีหลัง

Tutorial Hackster ให้ Download Animation Package แล้ว Copy Folder Vertical และ Horizontal ลง Root ของ SD Card

โครงสร้างใน Tutorial คือ:

หลัง Copy เสร็จ จึงนำ MicroSD ไปเสียบใน ESP32-P4

แต่ถ้าใช้ Current GitHub Firmware — SD Folder เปลี่ยนแล้ว

README ปัจจุบันของ Repository ใช้ Structure:

/Animations/Vertical/
/Animations/Horizontal/

และ Naming Convention เปลี่ยนเป็น:

a1.mjpeg, a2.mjpeg, a3.mjpeg และต่อไปตามลำดับ

Step 1: ยึด ESP32-P4 เข้ากับ Mounting Bracket

นำ:

• FireBeetle 2 ESP32-P4
• 3D-printed Mounting Bracket
• M2 Phillips Screws

จัดตำแหน่งรู Mounting ของ Board ให้ตรงกับ Bracket แล้วขันสกรูให้ Board อยู่กับที่

Step 2: ใส่ Bar Display ลง Main Housing

นำ Display มาจัดตำแหน่งกับ Main Housing แล้วเลื่อนจอเข้าหาด้านที่มี Display Holding Groove

ตรวจว่า Panel:

• นั่งอยู่ในร่องครบ
• ไม่บิด
• ได้รับการรองรับจาก Housing

จากนั้นนำ ESP32-P4 Mounting Assembly ใส่เข้าไปใน Housing

จุดที่ต้องเช็กคือ USB Type-C Port ต้องตรงกับช่องเปิด เพื่อให้เสียบสายได้หลังปิดฝา

Step 3: ต่อ MIPI DSI และไฟ 5V ให้ Display

Display เชื่อมกับ ESP32-P4 ผ่าน DSI Cable ที่มากับจอ

จากนั้น Source ให้ต่อ:

VCC บน ESP32-P4 → 5V Input ของ Display

Step 4: กด Back Cover แบบ Snap-fit เข้าที่

หลังตรวจ:

• Display
• ESP32-P4
• DSI Cable
• Power Wiring
• USB Type-C Opening

แล้วจึงนำ Back Cover กดเข้ากับ Main Housing จน Snap-fit ล็อกเข้าที่

ตรวจรอบขอบ ว่าไม่มี Gap และไม่มีสายถูกหนีบอยู่ระหว่าง Cover กับ Housing

Flash Firmware มี 2 ทาง: EasyFlash หรือ Build เอง

ทางง่าย — EasyFlash Web App

ใน Tutorial Hackster ผู้สร้างทำ EasyFlash Web App เพื่อให้ Flash Firmware โดยไม่ต้องติดตั้ง Arduino IDE

1. เปิด EasyFlash Web App
2. ต่อ ESP32-P4 ด้วย USB Type-C ที่ส่ง Data ได้
3. กด Connect & Flash
4. เลือก COM Port
5. รอ Firmware ถูก Download และ Flash

ผู้สร้างระบุว่า ใน Setup ของเขา ใช้เวลาไม่ถึงประมาณ 2 นาที

ทาง Maker — Compile Current Source เอง

README ปัจจุบัน มี Build Guide สำหรับ Arduino IDE 2.x และ ESP32 Core 3.0+

Repository แนะนำ Setting เช่น:

• ESP32-P4 Dev Module หรือ FireBeetle 2 ESP32-P4
• CPU Frequency 400 MHz
• Flash Mode QIO 80 MHz
• OPI PSRAM Enabled
• Serial Monitor 115200 baud

Firmware มีอะไรให้เลือก?

หน้า Hackster เน้นสอง Edition หลัก:

• Animation Player Edition
• Telemetry HUD Edition

แต่ Current GitHub Repository แยก Firmware ออกเป็น 3 ระดับ:

MJPEG Player ทำงานยังไง?

Animation ไม่ได้ถูกส่งเข้าจอเป็น MP4 โดยตรง

Source ใช้ Motion JPEG หรือ .mjpeg ซึ่งประกอบด้วย JPEG Frames ต่อกัน

อ่าน SD Card เป็น Block

Tutorial ระบุว่า Firmware อ่านไฟล์ MJPEG เป็น Block ขนาด 4096 bytes

หา JPEG Marker

โปรแกรมมองหา:

• FF D8 — JPEG Start
• FF D9 — JPEG End

ส่งเข้า Hardware Decoder

เมื่อพบ JPEG Frame จะส่งเข้า Hardware JPEG Decoder ของ ESP32-P4

Frame ที่ Decode แล้ว ถูกเก็บเป็น RGB565 ก่อน Copy ไปยัง Framebuffer

24 FPS

Tutorial Pace Playback ไว้ประมาณ 24 FPS และตรวจ Button Event ระหว่าง Frame เพื่อไม่ต้องรอ Video Clip เล่นจนจบ ก่อนเปลี่ยน Animation

Vertical กับ Horizontal ไม่ได้แค่เปลี่ยนชื่อ Folder

Vertical

Content 480×1920 สามารถ Copy ไปยัง Physical Frame ตาม Orientation ของ Panel ได้โดยตรง ตาม Logic ที่ Tutorial อธิบาย

Horizontal

Content 1920×480 ถูก Rotate 90° เพื่อให้พอดีกับ Physical Panel 480×1920

จำค่าหลัง Restart

Firmware เก็บ:

• Animation ล่าสุด
• Orientation ล่าสุด
• ใน Telemetry Firmware รวม HUD Layout ล่าสุดด้วย

ลง Non-volatile Storage ผ่าน Preferences / NVS ทำให้ Boot ครั้งถัดไป ไม่ต้องเริ่มใหม่ทั้งหมด

Telemetry HUD: จุดที่จอแต่งเคสเริ่มกลายเป็น Hardware Monitor

Telemetry Edition ใช้ Video Pipeline เดิม แต่เพิ่มขั้นตอนสำคัญ หลัง Decode Background Frame

Source อธิบายว่า Firmware จะเรียก Logic สำหรับ:

draw_telemetry_hud();

ทำให้ Pipeline กลายเป็น:

ค่า Telemetry ที่ Project ใช้ประกอบด้วย:

• CPU Temperature
• GPU Temperature
• CPU Usage
• GPU Usage
• Memory Usage
• Active Status
• Date
• Time

ESP32-P4 ไม่ได้อ่าน CPU/GPU จาก PC ได้เอง — มี Python Tool อยู่ฝั่ง Windows

Current Repository มี Tool:

tools/pc_telemetry/stream_telemetry.py

หน้าที่ของ Script คืออ่าน Hardware Sensor จาก PC แล้ว Stream ค่าเข้า ESP32-P4 ผ่าน Serial

Source ปัจจุบันใช้:

• LibreHardwareMonitor
• Fallback ไป WMI / CIM
• psutil สำหรับข้อมูลที่เกี่ยวข้อง

Repository ปัจจุบัน ส่ง Packet ประมาณ หนึ่งครั้งต่อวินาที

Telemetry Packet หน้าตาเป็นยังไง?

Current Repository ใช้ Packet แบบ CSV ที่ขึ้นต้นด้วย:

$TEL:

Field เรียงเป็น:

1. CPU Temperature
2. CPU Usage
3. GPU Temperature
4. GPU Usage
5. RAM Usage
6. Date
7. Time

Serial Speed: 115200 baud

Current Repository มี 15 Sci-Fi HUD Styles

Current README ระบุ Layout ทั้งหมด:

1. Cards
2. Dials
3. Sidebar
4. Top Bar
5. Bottom Bar
6. Corner Minimal
7. Concentric Rings
8. Left Rail
9. Right Rail
10. Diagonal Cascade
11. Targeting HUD
12. Split Bar
13. Circular Cluster
14. Matrix Grid
15. Cyberpunk Gauges

แล้ว /layout.json ล่ะ?

Hackster Revision ระบุว่า Telemetry Firmware สามารถอ่าน:

/layout.json

จาก SD Card เพื่อเปิด Custom Layout System หากไฟล์ Valid

แต่ Current Repository Documentation ที่ตรวจรอบนี้ เน้น 15 Built-in HUD Styles ดังนั้นถ้าจะใช้ layout.json ควรตรวจ Code ของ Firmware Revision ที่คุณกำลังใช้อยู่โดยตรง

GPIO32 Button: ปุ่มเดียวแต่ Control เปลี่ยนตาม Firmware Version

ผู้สร้างต่อ Button ระหว่าง:

GPIO32 ↔ GND

และในตัวเครื่องจริง ใช้ 2-pin LED/Button Connector จาก PC Cabinet แทนการเพิ่มปุ่มใหม่บน Housing

Hackster — Animation Player Edition

• Single Click → Next Animation
• Double Click → Vertical ↔ Horizontal
• Long Press ≥2 sec → Restart ESP32

Hackster — Telemetry HUD Edition

• Single Click → Next Animation
• Double Click → Next HUD
• Triple Click → Vertical ↔ Horizontal
• Long Press ≥2 sec → Restart ESP32

Current GitHub — Telemetry System

• Single Click → Next Animation
• Double Click → Next HUD Style
• Long Press 2 sec → Vertical ↔ Horizontal

แม้ Hardware List จะเรียก Panel ว่า Touch Display แต่ขั้นตอน Control ที่ Source อธิบายชัดใน Project นี้ ใช้ GPIO32 Push Button เป็นหลัก ดังนั้นบทความนี้จะไม่เพิ่ม Gesture หรือ Touch Control ที่ Source ไม่ได้ระบุ

Code Snippet: Current SD Structure + Telemetry Packet

ส่วนนี้ใช้ข้อมูลจาก Current Repository เพื่อให้เห็นว่า Firmware รุ่นล่าสุด คาดหวัง File Structure และ Telemetry Format แบบไหน

MicroSD Card Root/
└── Animations/
    ├── Horizontal/
    │   ├── a1.mjpeg
    │   ├── a2.mjpeg
    │   ├── a3.mjpeg
    │   └── ...
    └── Vertical/
        ├── a1.mjpeg
        ├── a2.mjpeg
        ├── a3.mjpeg
        └── ...

$TEL:<cpu_temp>,<cpu_usage>,<gpu_temp>,<gpu_usage>,<mem_usage>,<date>,<time>

Example:
$TEL:48.5,23,55.0,41,62,2026-08-26,16:05:00

python tools/pc_telemetry/stream_telemetry.py COM13

SD Card
→ MJPEG
→ JPEG Decoder
→ Framebuffer
→ DSI Display

Telemetry Edition:
SD Card
→ MJPEG
→ JPEG Decoder
→ draw_telemetry_hud()
→ Framebuffer
→ DSI Display

STL มีครบ Housing, Bracket และ Back Cover

Hackster แนบ STL ของชิ้นส่วนหลักไว้ครบ สามารถ Download ไปเปิดใน Slicer หรือนำไปปรับต่อใน Workflow ของตัวเองได้

ภาพ Animation, Assembly และ 3D Model เพิ่มเติม

เนื่องจาก Source มี Media จำนวนมาก หน้าแรกจึงแสดงเพียง Hero Image ส่วน Animation, รูปขั้นตอนประกอบ และ Sketchfab Models ถูกซ่อนไว้ใน View more แบบ Pure CSS

View more — ดู Media ทั้งหมด View less — ซ่อน Media

ตัวอย่าง Animation / Display Demo

ภาพขั้นตอนประกอบ Hardware

ภาพ Firmware, Button และตัวเครื่องเพิ่มเติม

ดู Housing แบบ 3D ผ่าน Sketchfab

Project นี้มีหลาย Revision — Build จริงควรเปิด Source ควบคู่ไปด้วย

บทความต้นฉบับ เหมาะกับการตามขั้นตอนตั้งแต่ CAD ถึง Assembly ขณะที่ GitHub ปัจจุบัน มี Documentation ทาง Software ลึกขึ้นมาก เช่น:

• Firmware Suite 3 แบบ
• Current SD Card Structure
• MJPEG Conversion Tools
• PC Telemetry Streamer
• Telemetry Protocol
• Current HUD Styles
• Troubleshooting

FAQ: ESP32-P4 Smart PC Display

นี่คือ PC Mod ที่ความว้าวไม่ได้มาจากจออย่างเดียว

สิ่งที่ทำให้ Project นี้น่าสนใจ ไม่ใช่เพียงการเอาจอยาว ไปแปะในเคส PC

แต่คือการประกอบหลายส่วนเข้าด้วยกัน:

CAD → 3D Print → ESP32-P4 → MIPI DSI → SD Card → MJPEG Decode → Framebuffer → PC Telemetry → HUD

ถ้าอยากได้แค่ภาพเคลื่อนไหว ก็ใช้ MJPEG Player ได้

ถ้าอยากให้จอมีประโยชน์เพิ่ม ก็เปิด Telemetry HUD แล้ว Stream CPU/GPU Data จาก PC เข้ามา

และถ้าอยากแก้รูปลักษณ์ Housing ก็มี STL ให้เอาไป Print หรือปรับต่อใน CAD

สำหรับ Maker Project นี้จึงเป็นตัวอย่างที่ดีว่า งาน PC Mod, Embedded System และ 3D Printing สามารถกลายเป็น Project เดียวกันได้ โดยไม่ต้องพึ่ง PC เป็นคน Render ทุก Pixel บนจอ

References / แหล่งข้อมูลต้นฉบับ

• Hackster — Build a Smart PC Display with ESP32-P4
• GitHub — MukeshSankhla/ESP32_P4_DSI
• Animation Files จาก Project ต้นฉบับ