บทความนี้ให้ภาพรวมของ UI (อินเทอร์เฟซผู้ใช้) ของส่วนขยาย Visual Studio Code VEX ส่วนขยายรองรับการพัฒนาโปรเจ็กต์ C++ และ Python สำหรับแพลตฟอร์ม VEX IQ 2nd Generation, 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 - เมื่อคลิกแล้ว มุมมอง จะเปิดขึ้นในแถบด้านข้าง

แถบด้านข้าง

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

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

มุมมองส่วนขยาย ใช้สำหรับติดตั้งและจัดการส่วนขยายใน VS Code เพื่อพัฒนาซอฟต์แวร์บนแพลตฟอร์ม VEX IQ 2nd Generation, 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 ได้ มี 3 หมวดหมู่ที่รวมอยู่ใน VEX View: การดำเนินการของโครงการ, ข้อมูลอุปกรณ์ VEX, และ ข้อเสนอแนะ VEX

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

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

  • คำติชม VEX
    เราสามารถส่งคำติชมไปยัง VEX ได้โดยการพิมพ์ข้อความในกล่องข้อความใต้ คำติชม VEX และคลิกปุ่ม ส่ง
    สำหรับข้อมูลที่เป็นประโยชน์เกี่ยวกับการใช้ คำติชม VEX ใน 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 Help เพื่อเข้าถึงเอกสารสำหรับฟังก์ชันนี้ซึ่งรวมอยู่ใน C++ และ Python API (Application Programming Interface)

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

แผงขั้วต่อ

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

  • เทอร์มินัลบันทึก - เทอร์มินัลบันทึกจะแสดงผลลัพธ์การสร้าง ข้อผิดพลาดในการสร้าง และผลลัพธ์การดาวน์โหลด

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 and it reads IQ Brain(IQ). หรือไอคอนตัวควบคุม Device Picker icon is highlighted on the VS Code toolbar. In this example it shows a Controller icon and it reads IQ Controller.)
    หมายเหตุ: หากตัวควบคุมเชื่อมต่อกับคอมพิวเตอร์แต่ไม่มีลิงก์วิทยุไปยังสมอง จะไม่มีชื่อสมองปรากฏถัดจากไอคอนตัวควบคุม
  • ไอคอนตัวเลือกสล็อต ไอคอนตัวเลือกสล็อต - ไอคอนตัวเลือกสล็อต ตัวเลือกสล็อต ช่วยให้เราเลือกสล็อตที่ VEX Extension จะดาวน์โหลดหรือเล่นโปรแกรมผู้ใช้ได้โดยการคลิกที่สล็อตนั้นและเลือกสล็อตใดสล็อตหนึ่งจากแปดสล็อตที่พร้อมใช้งานใน VEX Brain จากรายการเลือก
  • ไอคอนสร้างและดาวน์โหลด สร้าง & ไอคอนดาวน์โหลด - หากเชื่อมต่ออุปกรณ์ VEX แล้ว ไอคอนดาวน์โหลด จะปรากฏบนแถบเครื่องมือ เมื่อคลิกแล้ว โปรเจ็กต์จะสร้าง และหากสำเร็จ โปรเจ็กต์จะดาวน์โหลดไปยังอุปกรณ์ VEX ที่เชื่อมต่อ
  • ไอคอนเล่น ไอคอนเล่น - เมื่อคลิกแล้ว ไอคอน เล่น จะรันโปรแกรมผู้ใช้ที่ดาวน์โหลดมาในสล็อตที่เลือกบน VEX Brain
  • ไอคอนหยุด ไอคอนหยุด - เมื่อคลิก ไอคอนหยุด จะหยุดการรันโปรแกรมผู้ใช้บน VEX Brain
  • ตัวเลือกโครงการจะปรากฏบนแถบเครื่องมือ VS Code ในตัวอย่างนี้อ่านว่า IQ_Test ตัวเลือกโครงการ - ตัวเลือกโครงการ จะแสดงชื่อของโครงการที่เลือก ไอคอนตัวเลือกโครงการ ช่วยให้เราสามารถสลับระหว่างโครงการ 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 มีดังนี้:

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