ตั้งโฮสต์ Twin ใน VS Code ด้วย Bitstream Studio

หลักสูตร

พัฒนาเฟิร์มแวร์ร่วมกับ TESA Digital Twin บน VS Code · VS Code สำหรับพัฒนาร่วมกับ Twin

ระดับ

L3 ทำได้เอง

เวลาโดยประมาณ

75 นาที (แนวคิด 40 · ฝึก 25 · เช็กความเข้าใจ 10)

อุปกรณ์

BENTO Emulator (ไม่ต้องมีบอร์ด) · Dev Kit

ทักษะที่ฝึก

• ดิจิทัลทวิน ถึง L2
• การจำลองฮาร์ดแวร์และอีมูเลเตอร์ ถึง L2

ควรเรียนก่อน

• แล็บ: แผนที่สถาปัตยกรรม Twin

สถานะ

ทดลองใช้ (alpha)

• เปิดสไลด์
• ไฟล์ของบทเรียนบน GitHub

วิดีโอประกอบ

ดูบน YouTube (เปิดในแท็บใหม่)

• TESAIoT Digital Twin Studio สมาคมสมองกลฝังตัวไทย (TESA)
• BS-01: Introduction to Bitstream Studio ผศ.ดร.สันติ นุราช (KMUTT)
• BS-02: Install BitStream Studio ผศ.ดร.สันติ นุราช (KMUTT)
• BS-06: TESAIoT DevKit Twin ผศ.ดร.สันติ นุราช (KMUTT)

วิดีโอโดย สมาคมสมองกลฝังตัวไทย (TESA) · ผศ.ดร.สันติ นุราช ภาควิชาวิศวกรรมระบบควบคุมและเครื่องมือวัด คณะวิศวกรรมศาสตร์ มหาวิทยาลัยเทคโนโลยีพระจอมเกล้าธนบุรี (KMUTT) · ดูทั้งชุดใน playlist AIoT Foundation

Course 2 · Module 2
Suggested time: ประมาณ 3 ชั่วโมง (ติดตั้ง + ผูก workspace + เซสชันแรก)
Format: บทเรียนเชิงปฏิบัติ — ตั้งโฮสต์ Twin ใน VS Code แล้วเห็น telemetry แบบเรียลไทม์

Lab · Cheatsheet · ← Table of Contents · ← M01 · M03 →

---

เป้าหมาย (Learning Outcomes)

เมื่อเรียนจบ คุณควรทำได้ดังนี้:

1. ติดตั้งและตั้งค่า VS Code extension สำหรับ TESAIoT / Digital Twin — Bitstream Studio
2. จัด workspace และผูกโปรเจกต์เฟิร์มแวร์ (หรือ HEX แล็บ) เข้ากับ Twin host
3. Run / Link เซสชันแรก: โหมด Simulator และ/หรือ Bitstream (UART) พร้อมดูผลแบบเรียลไทม์
4. ใช้ Console / Logs / Visualization (Sensor Telemetry, Sensor Studio, สถานะ backend) เพื่อตรวจข้อมูล

โมดูลนี้พาคุณจากแผนที่สถาปัตยกรรมใน M01 ไปสู่ เครื่องมือพร้อมใช้ — บทถัดไป (M03) จะสร้าง Virtual Device และสคริปต์เหตุการณ์เอง

โฮสต์หลักของ Course 2
ในเอกสารหลักสูตรอาจเรียก TESA Digital Twin / VS Code Extension — ในแล็บ ติดตั้งและเปิด Bitstream Studio (Marketplace หรือ VSIX จาก Hackathon) เป็นจุดเข้าเดียวกัน

Read alongside this chapter

เอกสาร	ใช้เมื่อ
Bitstream Studio (Marketplace)	ติดตั้ง extension จาก Marketplace
TESAIoT_Hackathon	แพ็กแล็บ: vsix/, hex/, flasher/, web-app/
ternion-3d-assets-free	GLB / texture / cubemap / รูป — Free Loader หรือ browse assets/
Visual Studio Code	ตัวแก้ไข / host ของ extension
Course 1 M02 — ModusToolbox + VS Code	Build / flash เฟิร์มแวร์ (คู่กับโฮสต์ Twin)
M01 — Twin Architecture	ชั้น Communication / Visualization
TESAIoT Developer Hub	ตัวอย่างเฟิร์มแวร์ที่จะ bind ใน workspace

---

1. Why VS Code Is the Hub

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

ชิ้น	บทบาท
โปรเจกต์เฟิร์มแวร์	จาก Course 1 / ModusToolbox / โฟลเดอร์แล็บ
Bitstream Studio	Twin host — telemetry, Sensor Studio, MQTT, 3D
Bitstream Simulator (เสริม)	Virtual MCU เมื่อไม่มีบอร์ด
Backend services	Serial bridge, MQTT broker บน localhost
Visualization	กราฟ / แผง / dashboard

เป้าหมายของบทนี้: ติดตั้ง → ผูกโปรเจกต์ → Link เซสชันแรก → เห็นค่าขยับ ในสภาพแวดล้อมเดียว

[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 เฟิร์มแวร์ — Course 2 M02 สอน เปิดโฮสต์ Twin ให้คุยกับเฟิร์มแวร์หรือ Simulator

---

2. Install the Twin Extension

2.1 What to install

ชิ้น	จำเป็นเมื่อ
VS Code หรือ Cursor	เสมอ
Bitstream Studio (TERNIONDEV.bitstream-studio)	เสมอ — Twin host
Bitstream Simulator (companion VSIX)	เมื่อจะใช้โหมด Simulator ไม่มีบอร์ด
Hackathon pack	แนะนำ — VSIX/HEX/Flasher เวอร์ชันจับคู่

2.2 Path A — Visual Studio Marketplace

1. เปิด Extensions ใน VS Code
2. ค้นหา Bitstream Studio หรือเปิด หน้า Marketplace
3. Install → Reload เมื่อระบบขอ
4. Command Palette → Open Bitstream Studio

2.3 Path B — Hackathon VSIX (lab pack)

เหมาะเมื่อต้องการล็อกเวอร์ชันให้ตรงกับ HEX:

1. Clone หรือดาวน์โหลด TESAIoT_Hackathon
2. เปิดโฟลเดอร์ vsix/ เลือก bitstream-studio-<version>.vsix ตามเวอร์ชันที่ต้องการ
3. Extensions → … → Install from VSIX…
4. Reload → Open Bitstream Studio

ตัวอย่างจากเทอร์มินัล (เปลี่ยนชื่อไฟล์ตามเวอร์ชันที่ใช้):

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

(ใช้ cursor แทน code ถ้าใช้ Cursor)

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

2.4 Credentials / CA (when required)

บางชุดแล็บอาจมีขั้นตอนเชื่อถือใบรับรองหรือใส่ credentials สำหรับบริการเครือข่ายภายใน

• ถ้าคู่มือรอบนั้นมี — ทำก่อน Lab C และจดลง setup sheet
• ถ้าใช้เฉพาะ localhost bridge / Marketplace ทั่วไป — มักไม่ต้อง CA พิเศษ

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

2.5 Verify the extension is alive

หลังติดตั้ง ตรวจอย่างน้อยหนึ่งอย่าง:

ตรวจ	ผ่านเมื่อ
Command Palette มี Open Bitstream Studio	เห็นคำสั่ง
Status bar มีสถานะ Bitstream / backend	ไม่ error ค้าง
เปิด Studio แล้วมี toolbar (Bitstream / Simulator, Link)	UI โหลด

จดเวอร์ชัน extension ลง cheatsheet

2.6 Free 3D assets (models / textures / images)

เมื่อ Twin หรือ Sensor Studio ต้องการโมเดล GLB, cubemap, หรือรูปภาพ ให้ใช้แหล่งทางการ:

ternion-3d-assets-free — เนื้อหาอยู่ภายใต้ assets/ บน branch main

วิธี	เมื่อใช้
Command Palette → Download Free Assets from GitHub	ซิงก์เข้าเครื่องครั้งแรก / อัปเดตแพ็ก
Browse บน GitHub	หา models/, textures/, รูปภาพ
Online fallback ใน Studio	base …/main/assets (relative path เช่น models/…/*.glb)

ไม่ต้องคัดลอก asset จาก workspace ส่วนตัวของผู้อื่นมาใส่รายงาน

---

3. Workspace Structure and Binding Firmware

3.1 Recommended layout

ไม่บังคับชื่อโฟลเดอร์เป๊ะ — สำคัญคือแยกชัดและเปิดซ้ำได้:

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

ทางเลือกที่เน้นโฮสต์ก่อน:

my-course2-workspace/
  hackathon/         # clone TESAIoT_Hackathon (vsix + hex อ้างอิง)
  firmware/          # โปรเจกต์ที่แก้ไขจริง
  lab-notes/

3.2 What “binding” means in this course

ใน Bitstream Studio การผูกโปรเจกต์เข้ากับ Twin ไม่ได้แปลว่าต้องมีไฟล์ config ลับเฉพาะทุกครั้งเสมอ — ความหมายปฏิบัติคือ:

ขั้น	ทำอะไร
1	เปิดโฟลเดอร์ workspace ที่มีเฟิร์มแวร์ (หรืออย่างน้อยรู้ path ที่จะ build/flash)
2	เปิด Bitstream Studio ในหน้าต่างเดียวกัน
3	เลือกแหล่งข้อมูล: Simulator หรือ Bitstream + COM ที่ถูกต้อง
4	(ถ้ามีบอร์ด) flash HEX ที่จับคู่ VSIX แล้วเปิดพอร์ต
5	กด Link / Connect จนเห็นสตรีม

ถ้าใช้ ModusToolbox + VS Code สำหรับ debug บนคิต — เก็บ launch/tasks ตาม Course 1 M02 ไว้ใน .vscode/ ของโปรเจกต์เฟิร์มแวร์ แล้วใช้ Studio คู่กันเป็นจอ Twin

3.3 Device / profile selection

สถานการณ์	เลือก
ไม่มีบอร์ดวันนี้	Simulator + สตาร์ท Bitstream Simulator
มี DevKit + HEX ตรงเวอร์ชัน	Bitstream + เปิด COM (baud ตามเฟิร์มแวร์ — มัก 921600)
สลับโหมดกลางคัน	เปลี่ยน toolbar ทีละโหมด — อย่าผสม uart+sim ในหัว

จำจาก M01: มีได้ทีละ backend เดียว

---

4. Backend Services (What Starts Automatically)

เมื่อเปิด Bitstream Studio (VSIX) ระบบมัก auto-start backend บนเครื่องคุณ เช่น:

บริการ	พอร์ตที่พบบ่อย	บทบาท
Serial / WS bridge	9998	คุยระหว่าง webview ↔ UART / Simulator
MQTT broker (local)	1883 / 8883	ใช้ในแล็บ cloud ภายหลัง (M05)

คำสั่งที่มีประโยชน์ (Command Palette — ชื่ออาจขึ้นต้นด้วย Bitstream Studio:):

คำสั่งโดยประมาณ	เมื่อใช้
Open Bitstream Studio	เปิด UI หลัก
Start / Stop Bitstream Simulator	โหมดไม่มีบอร์ด
Start All / Shutdown Backend Services	แก้พอร์ตชน หรือสลับไป terminal dev
Download Free Assets from GitHub	ซิงก์โมเดล/texture จาก ternion-3d-assets-free
Open Connection Panel / Setup Checklist	กู้เซสชันแรก

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

---

5. First Run / Debug Loop with Live Results

5.1 Path — Simulator (recommended first)

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

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

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

5.2 Path — Bitstream (real board)

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 ไม่ว่าง

5.3 Firmware edit + observe (when building yourself)

วงจรที่ควรฝึกอย่างน้อยหนึ่งรอบ:

Edit firmware (VS Code / MTB)
  → Build + Flash (Course 1 skills)
  → Link in Bitstream Studio
  → Watch telemetry / logs
  → Change one variable or rate
  → Re-flash / reconnect → confirm UI changes

ถ้าวันนี้ใช้แต่ HEX สำเร็จรูป — ยังถือว่า Lab ผ่านได้เมื่อ host session สำเร็จ; การแก้โค้ดจะเน้นใน M04

5.4 What to watch on day one

ช่อง	ดูอะไร
Toolbar	Bitstream vs Simulator, Link state, MQTT chip (ถ้าเปิด)
Sensor Telemetry	กราฟ/ค่าล่าสุดขยับ
Sensor Studio	โหนด/พรีวิว (ถ้าเปิดใช้)
Output / extension logs	error ตอน start backend
UART console (ถ้ามี)	heartbeat จากเฟิร์มแวร์

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

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

---

6. Console, Logs, and Visualization

เครื่องมือ	ใช้เมื่อ
Bitstream Studio panels	หลัก — เห็น Twin / telemetry ทันที
VS Code Output / Developer Tools	ดีบัก extension / webview
Device UART terminal	ยืนยันว่าเฟิร์มแวร์พิมพ์ heartbeat
Hackathon web-app/	Dashboard ภายนอก (serve ตามคู่มือ) — เสริม visualization

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

รายละเอียด co-sim ลึก (timing/latency) อยู่ใน M04 — M02 ขอแค่ เซสชันแรกที่ทำซ้ำได้

---

Next Steps

1. ทำแล็บติดตั้งและเซสชันแรก: แล็บ
2. กรอกแผ่นตั้งค่า: vscode-twin-setup.md
3. เมื่อพร้อม ไปต่อ M03 — Virtual Device Modeling

---

References and Further Reading

1. Bitstream Studio
2. TESAIoT_Hackathon — vsix/, hex/, flasher/
3. Visual Studio Code
4. Course 1 M02 — ModusToolbox build/flash
5. M01 Twin Architecture · Course 2 TOC
6. TESAIoT Developer Hub
7. ternion-3d-assets-free

---

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

คำถามสั้นสามข้อใน quiz.yaml ผูกกับเป้าหมายของบทเรียนนี้ข้อละหนึ่งคำถาม ลองตอบเองก่อน แล้วค่อยเทียบกับเฉลยและคำอธิบายในไฟล์

แล็บ

ลงมือต่อที่ แล็บ: ติดตั้ง Twin บน VS Code และเซสชันแรก

Lab · Cheatsheet · ← Table of Contents · ← M01 · M03 →

คำถามทบทวน

ลองตอบเองก่อน แล้วค่อยเปิดดูเฉลย

1. ทำไมบทเรียนย้ำว่า VSIX กับ HEX ควรเป็นชุดเดียวกัน (เป้าหมายข้อ 1)

   1. เพราะ HEX ต้องติดตั้งผ่าน VS Code เท่านั้น
   2. เพื่อให้ใช้ Cursor แทน VS Code ได้
   3. เพื่อกันโปรโตคอลและ UI ไม่ตรงกัน ถ้าไม่แน่ใจให้ดู `latest` ใน firmware manifest
   4. เพราะ VSIX ใหญ่เกินจะติดตั้งแยก
   ดูเฉลย

   คำตอบ: C. เพื่อกันโปรโตคอลและ UI ไม่ตรงกัน ถ้าไม่แน่ใจให้ดู `latest` ใน firmware manifest

   กรอบ Version matching ในหัวข้อ 2.3

2. โหมดใดที่บทเรียนแนะนำให้ลองเป็นอย่างแรกเพื่อลดความเสี่ยงฮาร์ดแวร์ (เป้าหมายข้อ 2)

   1. Simulator
   2. Bitstream (UART)
   3. BLE
   4. MQTT broker
   ดูเฉลย

   คำตอบ: A. Simulator

   หัวข้อ 5.1 Path — Simulator (recommended first)

3. เรียงลำดับคำถามที่ควรถามเมื่อ UI ว่าง ตาม Key phrase ของบทเรียน (เป้าหมายข้อ 3)

   1. link?
   2. extension?
   3. correct panel?
   4. backend?
   5. source streaming?
   ดูเฉลย

   ลำดับที่ถูก: B. extension? → D. backend? → A. link? → E. source streaming? → C. correct panel?

   Key phrase ในหัวข้อ 6: extension? → backend? → link? → source streaming? → correct panel?

อ้างอิงบทเรียนนี้

ถ้านำบทเรียนนี้ไปสอน ทำสไลด์ หรือทำเอกสารต่อ ให้อ้างอิงด้วยข้อความนี้ ถ้าดัดแปลงเนื้อหา ให้เติม (ดัดแปลง)ต่อท้ายชื่อบทเรียน

"ตั้งโฮสต์ 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

ข้อความอ้างอิงภาษาอังกฤษ: "Setting up the Twin Host in VS Code with Bitstream Studio" from TESA Open Knowledge by the Thai Embedded Systems Association (TESA), https://github.com/tesaiot/tesa-qualification-program, licensed under CC BY-NC 4.0

ลิงก์บทเรียน: https://tesaiot.github.io/tesa-qualification-program/courses/digital-twin/m02-vscode-twin/l01-vscode-for-twin/

บทเรียนนี้ดัดแปลงจากต้นฉบับด้านล่าง เมื่ออ้างอิงให้คงเครดิตต้นฉบับไว้ด้วย
https://github.com/drsanti/TESAIoT-Courses/blob/287c21814ba8c75f693136616dcd270349a15966/C2/M02/README.md · Original content by Asst. Prof. Dr. Santi Nuratch (ผศ.ดร.สันติ นุราช), KMUTT. Course 2 (C2/) of drsanti/TESAIoT-Courses. TESA funded the work and holds the rights; published here under CC BY-NC 4.0. The upstream repository carries no licence file. Text kept faithful; structure, front matter, quizzes and notes added by TESA Open Knowledge.

วิธีอ้างอิง TESA ฉบับเต็ม