บทความนี้ให้ภาพรวมของ 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 ไอคอนมุมมอง 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 (รุ่นที่ 2), EXP และ V5 ใน VS Code ได้ VEX View แบ่งออกเป็น 3 หมวดหมู่ ได้แก่ การดำเนินการของโครงการ, ข้อมูลอุปกรณ์ VEX, และ ข้อเสนอแนะ VEX

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

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

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

    VEX Device Info section of the VEX Extension View is shown, with a list of all connected devices and specific info about each one. In this example, an EXP Brain and its downloaded programs are shown.


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

    เมื่อ 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

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

บรรณาธิการ

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

VS Code Editor ที่มีไฟล์ 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 จะแสดงผลลัพธ์การสร้าง ข้อผิดพลาดในการสร้าง และผลลัพธ์การดาวน์โหลด

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

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

    VS Code VEX Interactive Terminal is opened and shows messages that detail the VEX Brain connection status.



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

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

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

แถบเครื่องมือ VS Code พร้อมไอคอนส่วนขยาย VEX ที่ใช้โต้ตอบกับอุปกรณ์และโปรเจ็กต์ VEX ที่เชื่อมต่อได้อย่างรวดเร็ว ฟีเจอร์ VEX ได้แก่ ตัวเลือกอุปกรณ์ ตัวเลือกสล็อต ไอคอนดาวน์โหลด Build & ไอคอนเล่น ไอคอนหยุด ตัวเลือกโครงการ และตัวเลือกไฟล์ Python

หมายเหตุ: แถบเครื่องมือจะทำงานเฉพาะเมื่อมีการเปิดโครงการ 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 Extension ได้โดยการคลิกที่ช่องนั้นและเลือกช่องใดช่องหนึ่งจากแปดช่องที่พร้อมใช้งานบน VEX Brain จากรายการเลือก
  • ไอคอนสร้างและดาวน์โหลด สร้าง & ไอคอนดาวน์โหลด - หากเชื่อมต่ออุปกรณ์ VEX ปรากฏบนแถบเครื่องมือ เมื่อคลิกแล้ว โปรเจ็กต์จะสร้างขึ้น และหากสำเร็จ โปรเจ็กต์จะดาวน์โหลดไปยังอุปกรณ์ VEX ที่เชื่อมต่อ
  • ไอคอนเล่น ไอคอนเล่น - เมื่อคลิกแล้ว ไอคอน เล่น จะรันโปรแกรมผู้ใช้ที่ดาวน์โหลดมาในช่องที่เลือกบน VEX Brain
  • ไอคอนหยุด ไอคอนหยุด - เมื่อคลิก ไอคอนหยุด จะหยุดการ ของโปรแกรมผู้ใช้บน VEX Brain
  • ตัวเลือกโครงการจะปรากฏบนแถบเครื่องมือ VS Code ในตัวอย่างนี้อ่านว่า v5NewProject ตัวเลือกโครงการ - ตัวเลือกโครงการ จะแสดงชื่อของโครงการที่เลือก ไอคอนตัวเลือกโครงการ ช่วยให้เราสามารถสลับระหว่างโครงการ VEX ได้เมื่อมีโครงการหลายโครงการอยู่ในพื้นที่ทำงาน โดยการคลิกที่โครงการนั้นและเลือกโครงการจากรายการเลือก
  • ไอคอนตัวเลือกไฟล์ Python จะปรากฏบนแถบเครื่องมือ VS Code ในตัวอย่างนี้อ่านว่า main.py ตัวเลือกไฟล์ Python (เฉพาะ Python) - เมื่อเลือกโครงการ VEX Python ตัวเลือกไฟล์ จะปรากฏในแถบเครื่องมือ ตัวเลือกไฟล์ Python จะแสดงชื่อไฟล์ Python ที่เลือก ปัจจุบัน Python สำหรับ VEX รองรับการดาวน์โหลดไฟล์เดี่ยวเท่านั้น

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

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

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

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

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

  • Cpp Toolchain Path - กำหนดเส้นทางสำหรับ CPP Toolchain
  • เปิดใช้งานเทอร์มินัลผู้ใช้- เปิดใช้งานหรือปิดใช้งานส่วนขยายเพื่อเปิดและแสดงข้อมูลจากพอร์ตผู้ใช้
  • รายการบันทึก - กำหนดจำนวนรายการบันทึกที่จะอัพโหลดจาก VEX Brain
  • ประเภทการสร้างโครงการ - กำหนดว่าส่วนขยายจะสร้างโครงการ C++ อย่างไร
  • โปรเจ็กต์โฮม - กำหนดตำแหน่งเริ่มต้นสำหรับโปรเจ็กต์ใหม่
  • เรียกใช้หลังจากดาวน์โหลด - กำหนดว่าโปรแกรมผู้ใช้ควรเรียกใช้หลังจากดาวน์โหลดไปยัง VEX Brain หรือไม่
  • ระบบ DFU กู้คืนอัตโนมัติ - ตั้งค่าว่าสมองจะกู้คืนอัตโนมัติเมื่อตรวจพบ IQ (รุ่นที่ 2) หรือ 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: