บทเรียน 2.1 — ตั้งโฮสต์ Twin ใน VS Code ด้วย Bitstream Studio

เป้าหมาย

เมื่อจบบทเรียนนี้ คุณจะ

1. ติดตั้ง Bitstream Studio ด้วยเส้นทาง Marketplace หรือ VSIX และเลือกเวอร์ชัน VSIX ให้ตรงกับ HEX
2. เปิดเซสชันแรกแบบ Simulator หรือ Bitstream (UART) จนเห็นค่าเซ็นเซอร์ขยับบนแผง telemetry
3. ไล่หาสาเหตุเมื่อ UI ว่างตามลำดับ extension → backend → link → source streaming → แผงที่ถูกต้อง

ก่อนเริ่ม

• ผ่าน บทเรียน 1.2 — แล็บ M01 มาแล้ว
• ต้องใช้ Visual Studio Code 1.75 ขึ้นไป (หรือ Cursor)
• ทำได้ด้วยโหมด Simulator (ไม่ต้องมีบอร์ด) หรือใช้บอร์ด TESAIoT PSoC Edge DevKit จริง

ดูของจริงก่อน — ทำไม VS Code เป็นศูนย์กลาง

ใน Course 2 Visual Studio Code ไม่ใช่แค่ตัวพิมพ์โค้ด — เป็นศูนย์กลางที่เชื่อม:

[VS Code]
   ├─ Firmware folder (edit / debug)
   ├─ Bitstream Studio webview  ← Twin UI
   ├─ Bridge :9998              ← Communication
   └─ (optional) Simulator VSIX ← Virtual device stream

Key phrase: บทเรียนก่อนหน้า (Course 1 M02) สอน สร้างและ flash เฟิร์มแวร์ — บทเรียนนี้สอน เปิดโฮสต์ Twin ให้คุยกับเฟิร์มแวร์หรือ Simulator

แนวคิด — ติดตั้ง extension สองเส้นทาง

code --install-extension vsix/bitstream-studio-0.1.8.vsix
code -r

Version matching: VSIX กับ HEX ควรเป็นชุดเดียวกัน — ดู latest ใน firmware manifest ของ Hackathon เมื่อไม่แน่ใจ

อย่า commit รหัสผ่านหรือ token ลงไฟล์ผลงาน

แนวคิด — จัด workspace และผูกเฟิร์มแวร์

my-course2-workspace/
  firmware/          # โปรเจกต์ C จาก MTB / TESA (หรือลิงก์ไปโปรเจกต์ Course 1)
  lab-notes/         # โน้ต / สกรีนช็อต / setup sheet
  .vscode/           # tasks / settings ของทีม (ถ้ามี)

"ผูกโปรเจกต์" หมายถึง:

จำจากโมดูล 1: มีได้ทีละ backend เดียว — อย่าผสม uart+sim

แนวคิด — backend services ที่เริ่มอัตโนมัติ

Multi-editor tip: เปิด VS Code กับ Cursor พร้อมกันได้ แต่ bridge มี owner เดียว — ถ้าพอร์ตติด ให้ Shutdown จากหน้าต่างที่เป็นเจ้าของ แล้วค่อยเปิดใหม่

ตัวอย่างสมบูรณ์ — เซสชันแรกแบบ Simulator (แนะนำก่อน)

ลำดับที่ลดความเสี่ยงฮาร์ดแวร์:

1. ติดตั้ง Bitstream Studio (+ Simulator ถ้าต้องการโหมดไม่มีบอร์ด)
2. Open Bitstream Studio
3. Toolbar → แหล่งข้อมูล Simulator
4. สตาร์ท Simulator / Streaming
5. กด Link / Connect
6. เปิด Sensor Telemetry

ผ่านเมื่อ: เห็นค่าเซ็นเซอร์จำลองขยับภายในไม่กี่วินาที และสถานะลิงก์ปกติ

ตัวอย่างสมบูรณ์ — เซสชันแรกแบบ Bitstream (บอร์ดจริง)

1. Flash HEX จาก Hackathon (hex/) ด้วย Flasher หรือ ModusToolbox — เวอร์ชันจับคู่ VSIX
2. เสียบ USB / เลือก COM
3. Toolbar → Bitstream
4. Link / Connect จน handshake สำเร็จ
5. ดู Telemetry / Sensor Studio

ผ่านเมื่อ: มีสตรีมจากบอร์ด (origin ฝั่ง uart) และ UI ไม่ว่าง

แนวคิด — ไล่ปัญหาเมื่อ UI ว่าง

แยกปัญหาเป็นชั้น (จากง่าย → ยาก):

1. Extension ยังไม่พร้อม / ไม่มีคำสั่ง
2. Backend พอร์ตชน
3. ยังไม่ Link หรือเลือกโหมดผิด
4. เฟิร์มแวร์/ Simulator ยังไม่สตรีม
5. Visualization คนละ workspace / ยังไม่เปิดแผง

Key phrase: ถ้า UI ว่าง ให้ถามตามลำดับ: extension? backend? link? source streaming? correct panel?

ฝึกเติม/แล็บ

แล็บ: ติดตั้ง Twin บน VS Code และเซสชันแรก

• ติดตั้ง Bitstream Studio ด้วยเส้นทางใดเส้นทางหนึ่ง
• จัด workspace แยกชัดและเปิดซ้ำได้
• เปิดเซสชันแรก (Simulator หรือ Bitstream) จนเห็น telemetry ขยับ
• ฝึกไล่ปัญหาตามลำดับ 5 ชั้นถ้า UI ว่าง

เช็กความเข้าใจ

1. ทำไมบทเรียนย้ำว่า VSIX กับ HEX ควรเป็นชุดเดียวกัน
2. โหมดใดที่บทเรียนแนะนำให้ลองเป็นอย่างแรกเพื่อลดความเสี่ยงฮาร์ดแวร์
3. เรียงลำดับคำถามที่ควรถามเมื่อ UI ว่าง จากรายการนี้: link? · extension? · correct panel? · backend? · source streaming?

ไปต่อ

• ติดตั้ง Bitstream Studio ได้ทั้งจาก Marketplace หรือ VSIX ที่จับคู่เวอร์ชันกับ HEX
• จัด workspace แยกชัด แล้วผูกเฟิร์มแวร์เข้ากับ Twin host
• เซสชันแรก: Simulator ก่อนเพื่อลดความเสี่ยง แล้วค่อยลอง Bitstream บนบอร์ดจริง
• พร้อมแล้วสำหรับ โมดูล 3 — การสร้างแบบจำลองอุปกรณ์เสมือน

บทเรียนโมดูล 3 →

แหล่งที่มา

"บทเรียน 2.1 — ตั้งโฮสต์ Twin ใน VS Code ด้วย Bitstream Studio" จาก TESA Open Knowledge โดยสมาคมสมองกลฝังตัวไทย
(Thai Embedded Systems Association: TESA) https://github.com/tesaiot/tesa-qualification-program
สัญญาอนุญาต CC BY-NC 4.0

เนื้อหาต้นฉบับโดย ผศ.ดร.สันติ นุราช ภาควิชาวิศวกรรมระบบควบคุมและเครื่องมือวัด คณะวิศวกรรมศาสตร์
มหาวิทยาลัยเทคโนโลยีพระจอมเกล้าธนบุรี (KMUTT) (https://github.com/drsanti) ภายใต้การสนับสนุนของสมาคมสมองกลฝังตัวไทย (TESA)
นำเข้าจาก drsanti/TESAIoT-Courses — C2 (commit 287c218) ภายใต้สัญญาอนุญาต CC BY 4.0

ไม่มีภาพจากบุคคลที่สามในสไลด์ชุดนี้