XIAO IPS Display 3 รุ่นต่างกันยังไง?

ทั้งสามรุ่นในบทความของ Velxio ใช้ XIAO nRF52840 Plus เป็นคอมพิวเตอร์หลักเหมือนกัน แต่ Display และ I/O รอบ Board ต่างกัน ทำให้ Use Case ของแต่ละขนาดค่อนข้างชัด

0.96" — เล็กสุด 80 × 160

รุ่นเล็กสุดเหมาะกับงานที่ต้องการข้อมูลไม่มาก เช่น Battery Status, Sensor Value, Wearable UI หรือข้อความสั้น ๆ โดยยังมี IMU และ Microphone อยู่บน Platform เดียวกับรุ่นใหญ่

1.14" — เพิ่มพื้นที่จอและ Grove I2C

Grove I2C เป็นจุดต่างที่สำคัญ เพราะทำให้รุ่นนี้เหมาะกับการเพิ่ม Sensor ภายนอก โดยไม่ต้องเดินสาย I2C เองทั้งหมด

1.47" — Touch + microSD

ถ้าต้องการ UI ที่ผู้ใช้กดบนหน้าจอโดยตรง หรือ Project ที่ต้องอ่านไฟล์จาก Storage รุ่น 1.47" มี Hardware เพิ่มจากสองรุ่นเล็กชัดเจน

Hardware กลางของทั้งสามรุ่นคือ XIAO nRF52840 Plus

แม้หน้าจอจะต่างกัน แต่ Board กลุ่มนี้ใช้ Platform ฝั่ง nRF52840 Plus เหมือนกัน ทำให้ Firmware และ Peripheral Model หลายส่วนสามารถใช้แนวทางเดียวกันได้

Velxio จำลอง Board ใน Browser ยังไง?

สิ่งที่ทำให้เรื่องนี้น่าสนใจ คือ Velxio ไม่ได้เริ่มจากการทำ Animation เลียนแบบหน้าจอของ Seeed

Flow ที่ Source อธิบายคือ:

นี่ทำให้การลองเปลี่ยน Code มีความหมายมากกว่าการ Preview UI เพราะ Firmware ต้องผ่าน Hardware-facing Path หลายส่วนเหมือนที่ Code จริงคาดหวัง

ทำไมภาพบนจอถึงไม่ใช่ Mock-up?

สมมติ Sketch เรียก Graphics Library เพื่อวาด Rectangle

วิธีจำลองแบบง่ายอาจทำแค่:

เจอคำสั่ง drawRect → Browser วาด Rectangle

แต่ Velxio อธิบายว่าไม่ได้ทำแบบนั้น

Firmware ยังคง Configure SPI และ Shift Bytes ออกไป จากนั้น Display Model อ่าน Chip Select, Data/Command และข้อมูลที่ถูกส่งจริง

เริ่มง่าย ๆ ด้วย GraphicTest

Velxio แนะนำให้เริ่มจาก XIAO 1.14" GraphicTest เพราะเห็นผลตรงที่สุด: กด Run แล้วดู Panel ไล่วาด Primitive หลายชนิด

Official Seeed GraphicTest ที่ตรวจใน GitHub มีการทดสอบเช่น:

• Color Bars
• Lines
• Fast Lines
• Rectangles
• Filled Rectangles
• Circles
• Triangles
• Rounded Rectangles
• Text
• Pixel Gradient

แต่ละ Test ยังจับเวลาด้วย micros() และส่งผลออก Serial

ลอง XIAO IPS Display ผ่าน Live Simulation

Source มี Interactive Embed สำหรับเปิด Board และลองรัน Firmware ได้จาก Browser โดยตรง

สำหรับ GraphicTest โดยตรง Source ยังให้ Example ของ XIAO 1.14" ที่สามารถเปิดแล้วกด Run ก่อนแก้ Sketch และ Build ใหม่ได้

IMU ใน Browser ทำ Electronic Quicksand ได้ยังไง?

Demo ที่เห็นภาพชัดที่สุดตัวหนึ่งคือ Electronic Quicksand

Firmware สร้างเม็ดทรายจำนวนหนึ่งบนจอ แล้วใช้ Accelerometer Data จาก IMU เป็นทิศทางแรงโน้มถ่วง

ใน Velxio ผู้ใช้เปิด Sensors Panel แล้วลาก Tilt Control ด้วย Mouse เพื่อเปลี่ยน Orientation ของ Board

จากนั้น IMU Model ตอบค่ากลับไปยัง Firmware ผ่าน Interface ที่ Sketch คาดหวัง และเม็ดทรายจึงไหลไปตามทิศทางใหม่

Touch ของรุ่น 1.47" ถูกจำลองแบบไหน?

รุ่น 1.47" มี Capacitive Touch ซึ่งทำให้ Simulator ต้องจำลองมากกว่าการวาดภาพ

Main Source ระบุว่า Touch Controller Model ตอบ Report รูปแบบเดียวกับที่ Seeed Driver อ่าน และดึง Interrupt Line ลง ระหว่างที่มี Touch

เมื่อใช้ Mouse แตะจุดบน Virtual Display Firmware จึงได้รับ Coordinate แล้ว Demo อย่าง Touch Circle สามารถวาดวงกลมตรงตำแหน่งที่ผู้ใช้กด

microSD ของรุ่น 1.47" ก็อยู่ใน Simulation ด้วย

รุ่น 1.47" มี microSD slot และ Source ระบุว่า Card กับ Display แชร์ SPI Bus บน Hardware จริง

Velxio จึง Model Shared Bus และ Chip Select ของอุปกรณ์ทั้งสองเช่นกัน

ผู้ใช้สามารถใส่ File เข้า Virtual SD Card แล้วให้ Sketch Mount และอ่านไฟล์ได้จาก Browser

Battery Slider ไม่ได้แค่เปลี่ยนเลข Voltage บนหน้าจอ

Battery Demo มี Logic ที่น่าสนใจกว่าการอ่าน ADC แล้วแสดงเปอร์เซ็นต์ทันที

Official Code ที่ตรวจ อธิบายว่าเมื่อเสียบ USB Charger/VBAT Node สามารถมีค่า Voltage ที่ดูเหมือน Cell จริง แม้ไม่มี Battery

Firmware จึงใช้ State Machine ที่มีแนวคิดประมาณ:

• Boot
• เรียนรู้ USB-only Baseline
• Battery Insert Candidate
• Battery Present
• Battery Remove Candidate

Velxio ทำให้ผู้ใช้เลื่อน Battery Input แล้วสังเกตได้ว่า Firmware State Machine ตัดสินใจเมื่อไรว่า Battery ถูกเสียบหรือถอด

อะไรที่ Velxio ยังไม่ได้ Model?

Main Source ระบุช่องว่างไว้ชัดเจน ซึ่งเป็นข้อดีมากกว่าการทำ Simulator ที่เงียบเมื่อ Feature ไม่ทำงาน

มี 15 Examples ให้ลองอะไรบ้าง?

Main Source ระบุว่า Gallery มีทั้งหมด 15 Examples และ 14 ใน 15 ตัว ใช้ไฟล์ของ Seeed เป็นฐานโดยแก้เพียงเล็กน้อย เพื่อให้เข้ากับ Environment

จุดดีของ Gallery แบบนี้คือ Developer สามารถเริ่มจาก Example ที่ตรงกับ Peripheral ที่สนใจ ไม่จำเป็นต้องเริ่มจาก Firmware ใหญ่ทั้ง Board

การรัน Vendor Code ช่วยเจอปัญหาที่ซ่อนอยู่ได้ยังไง?

ส่วนที่น่าสนใจที่สุดของบทความ Velxio คือ Simulator ไม่ได้แค่พิสูจน์ว่า Board Model ทำงาน แต่ยังช่วยเปิดเผยปัญหาใน Software Stack ที่ใช้กับ Hardware จริงด้วย

Case-sensitive Include ใน Seeed_GFX2

ตอน Velxio ทำบทความวันที่ 13 กันยายน มีการรายงานว่า Seeed_GFX2 1.0.0 มีชื่อ File กับ #include บางจุดใช้ตัวพิมพ์ใหญ่/เล็กไม่ตรงกัน

ระบบอย่าง macOS หรือ Windows บาง Configuration อาจไม่เจอปัญหา แต่ Linux Compile Farm ที่ใช้ Case-sensitive Filesystem จะหยุด Build ด้วย Error ว่าไม่พบ File

1.14" RGB / BGR Color Order

Velxio ยังรายงานว่าระหว่างทดสอบ 1.14" พบความไม่ตรงกันของ Color Order ซึ่งทำให้ Red/Blue สามารถสลับกันได้เมื่อ Configuration ไม่ตรงกับ Panel

อย่างไรก็ตาม Current Official Source ที่ตรวจภายหลังมีการปรับ Library, Demo และ Panel Configuration หลายส่วน จึงไม่ควรเหมารวมว่า ทุก Revision ของ 1.14" มี Color Bug แบบเดียวกัน

ดู Code จาก Official Seeed GraphicTest

Official Display-Gadgets Repository มี GraphicTest ของ XIAO nRF52840 Plus 1.14" ที่ใช้ Seeed_GFX2 และเรียก Board/Panel Configuration โดยตรง

Code ด้านล่างเป็น Excerpt จาก Source จริง สำหรับ Initialize Display และตรวจขนาด Panel

if (!display.begin<Board_XIAO_1inch14_LCD<LCD_RST_PIN, LCD_BL_PIN>,
                   Config_Seeed_1inch14_LCD_ST7789>()) {
  Serial.println(display.lastResult().message);
  return;
}

display.fillScreen(TFT_BLACK);

Serial.print("LCD width: ");
Serial.println(display.width());
Serial.print("LCD height: ");
Serial.println(display.height());

Source เดียวกันยังใช้ Drawing API อย่าง Lines, Rectangles, Circles, Triangles, Text และ Pixel Gradient เพื่อทดสอบ Graphics Path

Simulator ช่วย Maker ตรงไหนก่อนมี Board จริง?

1. เช็กว่า Sketch Compile ไหม

ปัญหา Library, Include, Board Package หรือ API สามารถโผล่ก่อนที่ Hardware จะมาถึง

2. ทดลอง Layout ของ UI

ความละเอียด 80×160, 135×240 และ 172×320 ต่างกันมาก การเห็น UI บน Virtual Panel ช่วยตัดสินใจเรื่อง Text, Button และพื้นที่แสดงผลได้เร็วขึ้น

3. ทดสอบ Logic ที่พึ่ง Sensor

Demo อย่าง Electronic Quicksand แสดงให้เห็นว่า Sensor Input สามารถเปลี่ยนผ่าน Browser แล้วให้ Firmware ตอบสนองจริง

4. ทดสอบ Touch และ File Flow

รุ่น 1.47" สามารถทดลอง Touch Interaction และการอ่าน File จาก Virtual microSD ก่อนย้ายไป Hardware

5. เจอ Cross-platform Build Problem เร็วขึ้น

Case-sensitive Include เป็นตัวอย่างชัดว่า Code ที่ Compile บนเครื่อง Developer อาจพังเมื่อไปอยู่บน Linux Build Farm

FAQ: คำถามที่พบบ่อย

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

• Velxio — Seeed's new XIAO IPS Display boards, running in your browser days after launch
• Seeed-Projects — Display-Gadgets
• Seeed Studio — Seeed_GFX2
• Official XIAO nRF52840 Plus 1.14 GraphicTest Source
• Seeed Studio Wiki — XIAO Display Gadgets Series
• Seeed Studio — XIAO 0.96 Inch IPS Display Product Page
• Seeed Studio — XIAO 1.14 Inch IPS Display Product Page
• Seeed Studio — XIAO 1.47 Inch IPS Touch Display Product Page