บทความนี้ให้ภาพรวมของ UI (อินเทอร์เฟซผู้ใช้) ของส่วนขยาย Visual Studio Code VEX ส่วนขยายนี้รองรับการพัฒนาโปรเจ็กต์ C++ และ Python สำหรับแพลตฟอร์ม VEX IQ รุ่นที่ 2, EXP และ V5

เค้าโครง UI ส่วนขยาย VEX VS Code

UI ของส่วนขยาย VEX Visual Studio Code แบ่งออกเป็น 5 พื้นที่หลัก: แถบกิจกรรม แถบด้านข้าง ตัวแก้ไข แผงเทอร์มินัล และแถบเครื่องมือ

 

ภาพหน้าจอแสดงเค้าโครง UI ของ VEX VS Code อย่างสมบูรณ์ แถบกิจกรรมและแถบด้านข้างอยู่ทางด้านซ้ายของหน้าจอ แถบเครื่องมือและเทอร์มินัลอยู่ทางด้านล่างของหน้าจอ และส่วนแก้ไขข้อความจะ占据พื้นที่ส่วนที่เหลือของหน้าจอ

แถบกิจกรรม

Activity Bar มีไอคอนมากมายที่ให้เราสลับมุมมองต่างๆ และยังมีตัวบ่งชี้เฉพาะบริบทเพิ่มเติมสำหรับการพัฒนาโครงการ VEX อีกด้วย

 

แถบกิจกรรมของ VS Code ที่ติดตั้งส่วนขยาย VEX Robotics แล้ว แถบกิจกรรมมีไอคอนที่ช่วยให้สามารถดำเนินการต่างๆ ได้อย่างรวดเร็ว เช่น การค้นหา การจัดการส่วนขยาย การควบคุมเวอร์ชัน และอื่นๆ

ไอคอนทั่วไปที่ใช้ในการพัฒนาโครงการ VEX ใน VS Code ได้แก่:

  • ไอคอนมุมมองแบบ Explorer ไอคอนมุมมอง Explorer - เมื่อคลิกแล้ว มุมมอง Explorer จะเปิดขึ้นในแถบด้านข้าง
  • ไอคอนมุมมองส่วนขยาย ไอคอนมุมมองส่วนขยาย - เมื่อคลิกแล้ว มุมมองส่วนขยาย จะเปิดขึ้นในแถบด้านข้าง
  • ไอคอน VEX View ไอคอนมุมมอง VEX - เมื่อคลิกแล้ว ไอคอน มุมมอง VEX จะเปิดขึ้นในแถบด้านข้าง

แถบด้านข้าง

แถบด้านข้างประกอบด้วยมุมมองที่แตกต่างกันซึ่งทำให้เราสามารถใช้เครื่องมือแบบบูรณาการภายใน VS Code ได้ มุมมองแถบด้านข้างทั่วไปที่ใช้ในการดำเนินการงานสำหรับการพัฒนาโครงการ VEX ได้แก่ มุมมองส่วนขยาย , มุมมอง VEXและมุมมอง Explorer

มุมมองส่วนขยาย

มุมมองส่วนขยาย ใช้สำหรับติดตั้งและจัดการส่วนขยายใน VS Code ในการพัฒนาซอฟต์แวร์บนแพลตฟอร์ม VEX IQ รุ่นที่ 2, EXP และ V5 เราจำเป็นต้องติดตั้งส่วนขยาย VEX ส่วนขยาย C/C++ และส่วนขยาย Python

หากต้องการคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีการติดตั้งส่วนขยาย VEX, C/C++และ Python ใน VS Code โปรดดูบทความ

 

มุมมองส่วนขยายของ VS Code ที่แสดงรายการส่วนขยายที่ติดตั้งไว้ ส่วนขยายแต่ละตัวจะมีเมนูการตั้งค่าซึ่งสามารถเปิดได้ที่นี่ และยังมีแถบค้นหาเพื่อค้นหาและดาวน์โหลดส่วนขยายใหม่ๆ อีกด้วย


VEX มุมมอง

VEX View ช่วยให้เราสามารถพัฒนาโครงการสำหรับ VEX IQ 2nd Generation, EXP และ V5 ใน VS Code ได้ VEX View แบ่งออกเป็น 3 หมวดหมู่ ได้แก่ การดำเนินการของโครงการ, ข้อมูลอุปกรณ์ VEX, และ ข้อเสนอแนะ VEX

 

หน้าต่าง VS Code VEX View แสดงตัวเลือกสำหรับการสร้างและนำเข้าโปรเจ็กต์ด้านบน เมนูข้อมูลอุปกรณ์ VEX ด้านล่าง และเมนูแสดงความคิดเห็นที่ด้านล่างสุด

  • การดำเนินการโครงการ
    ปุ่มภายใต้ การดำเนินการโครงการ ใช้เพื่อสร้างโครงการ VEX ใหม่หรืออิมพอร์ตโครงการ VEXcode ที่มีอยู่
    สำหรับคำแนะนำโดยละเอียดในการสร้างโปรเจ็กต์ VEX ใน VS Code โปรดดูบทความ สำหรับ V5, บทความนี้สำหรับ EXPและ บทความนี้สำหรับ IQ (2nd)

ส่วน "การดำเนินการโครงการ" ในมุมมองส่วนขยาย VEX ในส่วนนี้มีปุ่มสองปุ่ม ได้แก่ ปุ่ม "สร้างโปรเจ็กต์ใหม่" และ "นำเข้าโปรเจ็กต์"

  • ข้อมูลอุปกรณ์ VEX
    หมวด ข้อมูลอุปกรณ์ VEX ให้ภาพรวมของ อุปกรณ์ VEX ที่เชื่อมต่อ - VEX Brain หรือ VEX Controller

    ส่วนข้อมูลอุปกรณ์ VEX ในมุมมองส่วนขยาย VEX จะแสดงรายชื่ออุปกรณ์ที่เชื่อมต่อทั้งหมด พร้อมข้อมูลเฉพาะเกี่ยวกับแต่ละอุปกรณ์ ในตัวอย่างนี้ จะแสดง V5 Brain และโปรแกรมที่ดาวน์โหลดมา


    หมวดหมู่นี้ระบุประเภทอุปกรณ์ VEX ที่เชื่อมต่อ และแสดงข้อมูลของระบบ Brain พอร์ตอนุกรม โปรแกรมที่ดาวน์โหลด และอุปกรณ์ที่เชื่อมต่อกับพอร์ตอัจฉริยะของ VEX Brain มันช่วยให้เราสามารถจับภาพหน้าจอ VEX Brain Screenได้ , , 3, ,, ,, , และ , 8,,
    และ
    เมื่อ VEX Brain เชื่อมต่อกับคอมพิวเตอร์ หมวดหมู่ VEX DEVICE INFO จะแสดงว่า VEX Controller เชื่อมโยงกับ VEX Brain หรือไม่ และช่วยให้เรา อัปเดต VEXos สำหรับ VEX Brain ได้ หากเวอร์ชัน VEXos ของ VEX Brain

    เมื่อเชื่อมต่อ VEX Controller เข้ากับคอมพิวเตอร์ หมวดหมู่ VEX DEVICE INFO จะแสดงว่า VEX Brain เชื่อมโยงกับ VEX Controller หรือไม่ และช่วยให้เรา อัปเดต VEXos สำหรับ VEX Controller ได้ หากเวอร์ชัน VEXos ของ VEX Controller

    หากต้องการคำอธิบายโดยละเอียดเกี่ยวกับข้อมูลอุปกรณ์และวิธีใช้คุณสมบัติภายใต้ ข้อมูลอุปกรณ์ VEXโปรดดู บทความนี้

  • ข้อเสนอแนะเกี่ยวกับ VEX
    เราสามารถส่งข้อเสนอแนะไปยัง VEX ได้โดยพิมพ์ข้อความในช่องข้อความใต้ ข้อเสนอแนะเกี่ยวกับ VEX และคลิกปุ่ม ส่ง
    สำหรับข้อมูลที่เป็นประโยชน์เกี่ยวกับการใช้ VEX FEEDBACK ใน VS Code โปรดดูบทความ
     

ส่วนแสดงความคิดเห็นของ VEX ในมุมมองส่วนขยาย VEX ในส่วนนี้มีแบบฟอร์มพร้อมตัวเลือกสำหรับการส่งข้อเสนอแนะไปยัง VEX

มุมมองการสำรวจ

มอง Explorer ใช้สำหรับเรียกดู เปิด และจัดการไฟล์และโฟลเดอร์โครงการ VEX ใน VS Code

 

มุมมอง Explorer ของ VS Code ช่วยให้ผู้ใช้สามารถสำรวจโฟลเดอร์และไฟล์ต่างๆ ในโปรเจ็กต์ VEX ของตนได้ ไฟล์แต่ละไฟล์จะมีไอคอนและประเภทไฟล์แสดงอยู่ ในตัวอย่างนี้ ไฟล์ Python ถูกเลือก และชื่อไฟล์คือ VEXcode Project.py

บรรณาธิการ

Editor คือพื้นที่หลักในการแก้ไขไฟล์ใน VS Code ส่วนขยาย VEX VS Code ช่วยให้สามารถใช้ Intellisense/Linting สำหรับทั้ง C/C++ และ Python ในพื้นที่ Editor เพื่อช่วยเหลือเราขณะพัฒนาโปรแกรม

 

หน้าต่างแก้ไขโค้ด VS Code ที่เปิดไฟล์ Python ซึ่งเป็นส่วนหนึ่งของโปรเจ็กต์ VEX สามารถเขียนและแก้ไขโค้ด Python หรือ C/C++ ได้ที่นี่ เพื่อสร้างโปรแกรมหุ่นยนต์ VEX เมื่อเชื่อมต่อกับ VEX Brain

ในพื้นที่ตัวแก้ไข เราสามารถเข้าถึงข้อมูลที่เป็นประโยชน์เกี่ยวกับฟังก์ชันเฉพาะได้โดยการเลื่อนเมาส์ไปเหนือข้อความของฟังก์ชัน หรือโดยใช้ VEX Command Help เพื่อเข้าถึงเอกสารสำหรับฟังก์ชันนี้ซึ่งรวมอยู่ใน C++ และ Python API (Application Programming Interface)

สำหรับคำแนะนำโดยละเอียดเกี่ยวกับการใช้ VEX Command Help ใน VS Code โปรดดู บทความนี้

แผงเทอร์มินัล

ส่วนขยาย VEX VS Code มีสองเทอร์มินัลเมื่อเริ่มต้นใช้งาน ได้แก่ เทอร์มินัลบันทึกและเทอร์มินัลโต้ตอบ 

  • Log Terminal - Log Terminal จะแสดงผลลัพธ์การสร้าง ข้อผิดพลาดในการสร้าง และผลลัพธ์การดาวน์โหลด
     

หน้าต่าง Log Terminal ของ VS Code VEX เปิดขึ้นและแสดงสถานะว่างเปล่าตามค่าเริ่มต้น โดยมีข้อความพิมพ์เพียงข้อความเดียวว่า "Log"

  • เทอร์มินัลแบบโต้ตอบ - เทอร์มินัลแบบโต้ตอบมีสองฟังก์ชัน คือ การแสดงบันทึกการพิมพ์และการส่งข้อมูลการกดแป้นพิมพ์ดิบกลับไปยังโปรแกรมของผู้ใช้

    VS Code VEX Interactive Terminal เปิดขึ้นและแสดงข้อความที่ระบุรายละเอียดสถานะการเชื่อมต่อ VEX Brain



    : ในการใช้งานเทอร์มินัลแบบโต้ตอบ จำเป็นต้องเชื่อมต่อ Brain หรือ Controller เข้ากับคอมพิวเตอร์ที่ใช้งานส่วนขยาย VEX VS Code
    หมายเหตุ: เอาท์พุตเทอร์มินัลแบบโต้ตอบจะถูกล้างตามค่าเริ่มต้นหลังจากสร้างและดาวน์โหลดโปรแกรมของผู้ใช้

แถบเครื่องมือ

แถบเครื่องมือมีไอคอนมากมายที่ช่วยให้เราโต้ตอบกับโปรเจ็กต์ส่วนขยาย VEX VS Code, VEX Brains และ VEX Controllers ได้อย่างรวดเร็ว

 

แถบเครื่องมือ VS Code พร้อมไอคอนส่วนขยาย VEX ที่สามารถใช้เพื่อโต้ตอบกับอุปกรณ์และโปรเจ็กต์ VEX ที่เชื่อมต่อได้อย่างรวดเร็ว คุณสมบัติของ VEX ประกอบด้วย ตัวเลือกอุปกรณ์ (Device Picker), ตัวเลือกสล็อต (Slot Selector), ไอคอนดาวน์โหลด Build & , ไอคอนเล่น (Play icon), ไอคอนหยุด (Stop icon), ตัวเลือกโปรเจกต์ (Project Selector) และตัวเลือกไฟล์ Python (Python File Selector)

หมายเหตุ: แถบเครื่องมือจะทำงานเฉพาะเมื่อมีการเปิดโครงการ VEX ที่ถูกต้องใน VS Code เท่านั้น 

หมายเหตุ: โปรเจ็กต์ VEX ที่ถูกต้องคือโปรเจ็กต์ที่ถูกสร้างหรือถูกนำเข้าโดยส่วนขยาย โปรเจ็กต์ VEXcode หรือ VEXcode Pro ที่เปิดในตัวแก้ไขจะไม่ถือเป็นโปรเจ็กต์ VEX ที่ถูกต้องและจะต้องนำเข้า

ไอคอนที่ปรากฏบนแถบเครื่องมือได้แก่:

  • ไอคอนตัวเลือกอุปกรณ์จะปรากฏบนแถบเครื่องมือของ VS Code ตัวเลือกอุปกรณ์ - ตัวเลือกอุปกรณ์จะแสดงไอคอนของอุปกรณ์ VEX ที่เชื่อมต่ออยู่ (ไอคอนสมอง Device Picker icon is highlighted on the VS Code toolbar. In this example it shows a Brain icon. หรือไอคอนตัวควบคุม Device Picker icon is highlighted on the VS Code toolbar. In this example it shows a Controller icon.)
    หมายเหตุ: หากตัวควบคุมเชื่อมต่อกับคอมพิวเตอร์ แต่ไม่มีการเชื่อมต่อทางวิทยุกับสมอง จะไม่มีชื่อสมองแสดงอยู่ถัดจากไอคอนตัวควบคุม
  • ไอคอนตัวเลือกสล็อต ไอคอนตัวเลือกสล็อต - ไอคอนตัวเลือกสล็อต ช่วยให้เราสามารถเลือกสล็อตที่ส่วนขยาย VEX จะดาวน์โหลดหรือเล่นโปรแกรมของผู้ใช้ได้ โดยการคลิกที่ไอคอนและเลือกหนึ่งในแปดสล็อตที่มีอยู่บน VEX Brain จากรายการตัวเลือก
  • ไอคอนสร้างและดาวน์โหลด  สร้างไอคอนดาวน์โหลด & - หากเชื่อมต่ออุปกรณ์ VEX ปรากฏบนแถบเครื่องมือ เมื่อคลิกแล้ว โปรเจ็กต์จะสร้างขึ้น และหากสำเร็จ โปรเจ็กต์จะดาวน์โหลดไปยังอุปกรณ์ VEX ที่เชื่อมต่อ
  • ไอคอนเล่น ไอคอนเล่น - เมื่อคลิกแล้ว ไอคอนเล่น จะเรียกใช้โปรแกรมผู้ใช้ที่ดาวน์โหลดมาในช่องที่เลือกบน VEX Brain
  • ไอคอนหยุด ไอคอนหยุด - เมื่อคลิก ไอคอนหยุด จะหยุดการทำงานของโปรแกรมผู้ใช้บน VEX Brain
  • ตัวเลือกโปรเจ็กต์จะปรากฏบนแถบเครื่องมือของ VS Code ในตัวอย่างนี้จะแสดงเป็น v5NewProject  ตัวเลือกโครงการ - ตัวเลือกโครงการ แสดงชื่อโครงการที่เลือก ไอคอนตัวเลือกโครงการ ช่วยให้เราสามารถสลับระหว่างโครงการ VEX ได้เมื่อมีโครงการหลายโครงการอยู่ในพื้นที่ทำงาน โดยการคลิกที่โครงการนั้นและเลือกโครงการจากรายการเลือก
  • ไอคอนตัวเลือกไฟล์ Python ปรากฏอยู่บนแถบเครื่องมือของ VS Code ในตัวอย่างนี้ จะอ่านว่า main.py  ตัวเลือกไฟล์ Python (เฉพาะ Python) - เมื่อเลือกโปรเจ็กต์ VEX Python แล้ว ตัวเลือกไฟล์ Python จะปรากฏในแถบเครื่องมือ ตัวเลือกไฟล์ Python จะแสดงชื่อไฟล์ Python ที่เลือก ปัจจุบัน Python สำหรับ VEX รองรับการดาวน์โหลดไฟล์เดี่ยวเท่านั้น

หากต้องการข้อมูลที่เป็นประโยชน์เกี่ยวกับวิธีใช้ฟีเจอร์แถบเครื่องมือใน VS Code โปรด บทความ

การตั้งค่าผู้ใช้ VEX

การตั้งค่าผู้ใช้ VEX ช่วยให้เราสามารถกำหนดค่าส่วนขยาย VEX ตามความต้องการของเราเอง การตั้งค่าผู้ใช้เป็นการตั้งค่าทั่วไปที่ใช้กับโครงการส่วนขยาย VEX VS Code ทุกโครงการ เราสามารถเข้าถึงการตั้งค่าผู้ใช้ VEX โดยคลิกไอคอนการตั้งค่าใน VS Code และเลือกไอเท็มที่เกี่ยวข้องในเมนู

 

เมื่อเปิดการตั้งค่าผู้ใช้ของ VS Code แล้ว จะพบกับหมวดหมู่ VEX ซึ่งสามารถปรับแต่งพฤติกรรมของส่วนขยาย VEX Robotics ได้

การตั้งค่าผู้ใช้ VEX สำหรับการกำหนดค่าส่วนขยายโค้ด VEX VS มีดังนี้:

  • ช่องควบคุม (เฉพาะตัวควบคุม V5) - ตั้งค่าช่องวิทยุของตัวควบคุม V5 เป็น ดาวน์โหลด หรือ พิท การตั้งค่านี้ใช้ได้กับลิงก์วิทยุ VEXnet เท่านั้น
  • Cpp Toolchain Path - กำหนดเส้นทางสำหรับ CPP Toolchain
  • เปิดใช้งานเทอร์มินัลผู้ใช้- เปิดใช้งานหรือปิดใช้งานส่วนขยายเพื่อเปิดและแสดงข้อมูลจากพอร์ตผู้ใช้
  • รายการบันทึก - กำหนดจำนวนรายการบันทึกที่จะอัพโหลดจาก VEX Brain
  • ประเภทการสร้างโครงการ - กำหนดว่าส่วนขยายจะสร้างโครงการ C++ อย่างไร
  • โปรเจ็กต์โฮม - กำหนดตำแหน่งเริ่มต้นสำหรับโปรเจ็กต์ใหม่
  • เรียกใช้หลังจากดาวน์โหลด - กำหนดว่าโปรแกรมผู้ใช้ควรเรียกใช้หลังจากดาวน์โหลดไปยัง VEX Brain หรือไม่
  • การกู้คืนระบบ DFU อัตโนมัติ - กำหนดว่าสมองจะต้องกู้คืนอัตโนมัติเมื่อตรวจพบ IQ2 หรือ EXP ในโหมด DFU
  • เปิดใช้งานเซิร์ฟเวอร์ Websocket - เปิดใช้งานหรือปิดใช้งานส่วนขยายเพื่อเริ่มต้นเซิร์ฟเวอร์ Websocket
  • ที่อยู่โฮสต์เซิร์ฟเวอร์ Websocket - ตั้งค่าที่อยู่โฮสต์ของเซิร์ฟเวอร์ Websocket
  • พอร์ตเซิร์ฟเวอร์ Websocket - กำหนดหมายเลขพอร์ตเซิร์ฟเวอร์ Websocket

สำหรับข้อมูลที่เป็นประโยชน์เกี่ยวกับวิธีการเข้าถึงและตั้งค่าการตั้งค่าผู้ใช้ VEX ดูบทความนี้

For more information, help, and tips, check out the many resources at VEX Professional Development Plus

Last Updated: