1. Thư viện VEX
  2. CHỈ SỐ THÔNG MINH
  3. Tiện ích mở rộng mã VS
  4. Giao diện người dùng và cài đặt trong VS Code Extension

Tổng quan về giao diện người dùng của tiện ích mở rộng VEX VS Code

Bài viết này cung cấp tổng quan về Giao diện người dùng (UI) của tiện ích mở rộng VEX Visual Studio Code. Tiện ích mở rộng hỗ trợ phát triển các dự án C++ và Python cho nền tảng VEX IQ thế hệ thứ 2, EXP và V5.

Giao diện người dùng của tiện ích mở rộng VEX VS Code

Giao diện người dùng của tiện ích mở rộng VEX Visual Studio Code được chia thành năm khu vực chính: Thanh hoạt động, Thanh bên, Trình chỉnh sửa, Bảng điều khiển đầu cuối và Thanh công cụ.

Ảnh chụp màn hình hiển thị toàn bộ giao diện người dùng VEX VS Code. Thanh hoạt động và Thanh bên nằm ở phía bên trái màn hình, Thanh công cụ và Terminal nằm ở phía dưới màn hình và trình soạn thảo chiếm phần còn lại của màn hình.

Thanh hoạt động

Thanh hoạt động có một loạt các biểu tượng cho phép chúng ta chuyển đổi giữa các chế độ xem và cung cấp cho chúng ta các chỉ báo ngữ cảnh cụ thể bổ sung để phát triển dự án VEX.

Thanh hoạt động VS Code có cài đặt tiện ích mở rộng VEX Robotics. Thanh hoạt động có các biểu tượng cung cấp các thao tác nhanh hữu ích, như tìm kiếm, quản lý tiện ích mở rộng, kiểm soát phiên bản, v.v.

Các biểu tượng phổ biến được sử dụng để phát triển dự án VEX trong VS Code là:

  • Biểu tượng Explorer View. Biểu tượng chế độ xem Explorer - Khi nhấp vào, chế độ xem Explorer sẽ mở ra trong Thanh bên.
  • Biểu tượng Xem phần mở rộng. Biểu tượng chế độ xem tiện ích mở rộng - Khi nhấp vào, chế độ xem tiện ích mở rộng sẽ mở ra trong Thanh bên.
  • Biểu tượng VEX View. Biểu tượng VEX View - Khi nhấp vào, VEX View sẽ mở ra trong Thanh bên.

Thanh bên

Thanh Side Bar chứa các chế độ xem khác nhau cho phép chúng ta sử dụng các công cụ tích hợp trong VS Code. Các chế độ xem Thanh bên phổ biến được sử dụng để thực hiện các tác vụ phát triển dự án VEX là Chế độ xem mở rộng, Chế độ xem VEXvà Chế độ xem trình khám phá.

Mở rộng Xem

Chế độ xem tiện ích mở rộng được sử dụng để cài đặt và quản lý các tiện ích mở rộng trong VS Code. Để phát triển phần mềm trên nền tảng VEX IQ thế hệ 2, EXP và V5, chúng ta cần cài đặt tiện ích mở rộng VEX, tiện ích mở rộng C/C++ và tiện ích mở rộng Python.

Để biết hướng dẫn từng bước về cách cài đặt VEX Extension, C/C++ Extensionvà Python Extension trong VS Code, vui lòng xem bài viết này.

VS Code Extension View hiển thị danh sách các tiện ích mở rộng đã cài đặt. Mỗi tiện ích mở rộng đều có menu cài đặt có thể mở tại đây và có thanh tìm kiếm để tìm và tải xuống tiện ích mở rộng mới.


Xem VEX

VEX View cho phép chúng ta phát triển các dự án cho VEX IQ thế hệ thứ 2, EXP và V5 trong VS Code. Có ba danh mục được bao gồm trong VEX View: PROJECT ACTIONS, VEX DEVICE INFO, và VEX FEEDBACK.

VS Code VEX View hiển thị các tùy chọn để tạo và nhập dự án ở trên, menu Thông tin thiết bị VEX ở bên dưới và menu phản hồi ở phía dưới.

Phần Hành động dự án của Chế độ xem mở rộng VEX. Phần này có hai nút là Dự án mới và Nhập dự án.

  • THÔNG TIN THIẾT BỊ VEX
    mục THÔNG TIN THIẾT BỊ VEX cung cấp cho chúng ta tổng quan về thiết bị VEX được kết nối - VEX Brain hoặc Bộ điều khiển VEX.

    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 IQ (2nd gen) Brain and its downloaded programs are shown.


    Danh mục này cho biết loại Thiết bị VEX được kết nối và hiển thị thông tin của hệ thống Brain, cổng nối tiếp, chương trình đã tải xuống và các thiết bị được kết nối với các cổng thông minh của VEX Brain. Nó cho phép chúng ta chụp ảnh màn hình VEX Brain Screen, xem VEX Brain Event Log, sử dụng V5 Battery Medic, đặt tên cho brain và số hiệu nhóm, và xóa chương trình người dùng khỏi VEX Brain

    Khi VEX Brain được kết nối với máy tính, danh mục VEX DEVICE INFO hiển thị nếu Bộ điều khiển VEX được liên kết với VEX Brain và cho phép chúng ta cập nhật VEXos cho VEX Brain nếu phiên bản VEXos của VEX Brain đã lỗi thời.

    Khi Bộ điều khiển VEX được kết nối với máy tính, danh mục VEX DEVICE INFO hiển thị nếu Bộ điều khiển VEX được liên kết với VEX Controller và cho phép chúng ta cập nhật VEXos cho Bộ điều khiển VEX nếu phiên bản VEXos của Bộ điều khiển VEX đã lỗi thời.

    Để biết mô tả toàn diện về thông tin thiết bị và cách sử dụng các tính năng trong VEX DEVICE INFO, vui lòng xem bài viết này.
  • PHẢN HỒI VEX
    Chúng ta có thể gửi phản hồi tới VEX bằng cách nhập tin nhắn vào Hộp văn bản bên dưới PHẢN HỒI VEX và nhấp vào nút GỬI
    Để biết thông tin hữu ích về cách sử dụng PHẢN HỒI VEX trong VS Code, vui lòng xem bài viết này.

Phần phản hồi VEX của chế độ xem mở rộng VEX. Phần này có một biểu mẫu với các tùy chọn để gửi phản hồi tới VEX.

Chế độ xem Explorer

Explorer View được sử dụng để duyệt, mở và quản lý các tệp và thư mục dự án VEX trong VS Code.

VS Code Explorer cho phép người dùng điều hướng các thư mục và tệp trong dự án VEX của họ. Các tệp có biểu tượng và loại tệp tương ứng được hiển thị, trong ví dụ này, tệp Python được chọn và tiêu đề là main.py.

Biên tập viên

Trình chỉnh sửa là khu vực chính để chỉnh sửa các tập tin trong VS Code. Tiện ích mở rộng VEX VS Code cho phép sử dụng Intellisense/Linting cho cả C/C++ và Python trong vùng Editor để hỗ trợ chúng ta trong khi phát triển chương trình.

VS Code Editor với tệp Python được mở như một phần của dự án VEX. Có thể viết và chỉnh sửa mã Python hoặc C/C++ tại đây để tạo chương trình robot VEX khi kết nối với VEX Brain.

Trong vùng Biên tập, chúng ta có thể tiếp cận thông tin hữu ích về một hàm cụ thể bằng cách di chuột qua văn bản của hàm hoặc bằng cách sử dụng VEX Command Help để truy cập tài liệu về hàm này có trong C++ và Python API (Giao diện lập trình ứng dụng).

Để biết hướng dẫn chi tiết về cách sử dụng VEX Command Help trong VS Code, vui lòng xem bài viết này.

Bảng điều khiển thiết bị đầu cuối

Phần mở rộng VEX VS Code cung cấp hai thiết bị đầu cuối khi khởi động, Thiết bị đầu cuối nhật ký và Thiết bị đầu cuối tương tác. 

  • Log Terminal - Log Terminal hiển thị kết quả dựng, lỗi dựng và kết quả tải xuống.

VS Code VEX Log Terminal được mở và hiển thị trạng thái trống mặc định với chỉ một thông báo được in ra là đọc Log.

  • Thiết bị đầu cuối tương tác - Thiết bị đầu cuối tương tác có hai chức năng - hiển thị nhật ký in và gửi các lần nhấn phím thô trở lại chương trình người dùng.

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



    Lưu ý:     Để sử dụng Thiết bị đầu cuối tương tác, phải kết nối Bộ não hoặc Bộ điều khiển với máy tính đang chạy Phần mở rộng VEX VS Code.
    Lưu ý: Theo mặc định, đầu ra của thiết bị đầu cuối tương tác sẽ bị xóa sau khi xây dựng và tải xuống chương trình người dùng.

Thanh công cụ

Thanh công cụ có một loạt các biểu tượng giúp chúng ta tương tác nhanh chóng với các dự án mở rộng VEX VS Code, VEX Brains và VEX Controllers.

Thanh công cụ VS Code với các biểu tượng mở rộng VEX có thể được sử dụng để tương tác nhanh với các thiết bị và dự án VEX được kết nối. Các tính năng của VEX bao gồm Trình chọn thiết bị, Trình chọn khe, biểu tượng Tải xuống bản dựng & , biểu tượng Phát, biểu tượng Dừng, Trình chọn dự án và Trình chọn tệp Python.

Lưu ý: Thanh công cụ chỉ hoạt động khi có một dự án VEX hợp lệ được mở trong VS Code. 

Lưu ý: Một dự án VEX hợp lệ là dự án được tiện ích mở rộng tạo hoặc nhập. Các dự án VEXcode hoặc VEXcode Pro được mở trong trình soạn thảo sẽ không được coi là Dự án VEX hợp lệ và cần phải được nhập.

Các biểu tượng có trên Thanh công cụ bao gồm:

  • Biểu tượng Device Picker được hiển thị trên thanh công cụ VS Code. Bộ chọn thiết bị - Bộ chọn thiết bị hiển thị Biểu tượng của Thiết bị VEX được kết nối (Biểu tượng Não Device Picker icon is highlighted on the VS Code toolbar. In this example it shows a Brain icon and it reads IQ Brain(IQ). hoặc Biểu tượng Bộ điều khiển Device Picker icon is highlighted on the VS Code toolbar. In this example it shows a Controller icon and it reads IQ Controller.)
    Lưu ý: Nếu bộ điều khiển được kết nối với máy tính nhưng không có liên kết vô tuyến với não, thì sẽ không có tên não nào được hiển thị bên cạnh Biểu tượng Bộ điều khiển.
  • Biểu tượng Chọn khe. Biểu tượng chọn khe - Biểu tượng chọn khe cho phép chúng ta chọn khe mà Tiện ích mở rộng VEX sẽ tải xuống hoặc phát chương trình của người dùng bằng cách nhấp vào khe đó và chọn một trong tám khe có sẵn trên VEX Brain từ danh sách chọn.
  • Biểu tượng xây dựng và tải xuống. Bản dựng & Biểu tượng tải xuống - Nếu Thiết bị VEX được kết nối, Biểu tượng tải xuống sẽ hiển thị trên Thanh công cụ. Khi nhấp vào, dự án sẽ được xây dựng và nếu thành công, sẽ được tải xuống Thiết bị VEX được kết nối.
  • Biểu tượng phát. Biểu tượng phát - Khi nhấp vào, Biểu tượng phát sẽ chạy chương trình người dùng đã tải xuống trong Khe đã chọn trên VEX Brain.
  • Biểu tượng dừng. Biểu tượng dừng - Khi nhấp vào, Biểu tượng dừng sẽ dừng chạy chương trình người dùng trên VEX Brain.
  • Trình chọn dự án được hiển thị trên thanh công cụ VS Code. Trong ví dụ này, nó đọc là IQ_Test. Trình chọn dự án - Trình chọn dự án hiển thị tên của dự án đã chọn. Biểu tượng Chọn dự án cho phép chúng ta chuyển đổi giữa các dự án VEX khi có nhiều dự án trong không gian làm việc bằng cách nhấp vào dự án đó và chọn một dự án từ danh sách chọn.
  • Biểu tượng Python File Selector được hiển thị trên thanh công cụ VS Code. Trong ví dụ này, nó đọc là main.py. Bộ chọn tệp Python (Chỉ dành cho Python) - Khi một dự án Python VEX được chọn, Bộ chọn tệp Python sẽ xuất hiện trên Thanh công cụ. Bộ chọn tệp Python hiển thị tên của tệp Python đã chọn. Hiện tại Python cho VEX chỉ hỗ trợ tải xuống từng tệp đơn.

Để biết thông tin hữu ích về cách sử dụng các tính năng của Thanh công cụ trong VS Code, vui lòng tham khảo bài viết này.

Cài đặt người dùng VEX

Cài đặt người dùng VEX cho phép chúng ta cấu hình Phần mở rộng VEX theo yêu cầu của riêng chúng ta. Cài đặt người dùng là cài đặt chung được áp dụng cho mọi dự án mở rộng VEX VS Code. Chúng ta có thể truy cập Cài đặt người dùng VEX bằng cách nhấp vào Biểu tượng cài đặt trong VS Code và chọn các mục tương ứng trong menu.

Cài đặt người dùng VS Code được mở đến danh mục VEX, nơi có thể tùy chỉnh hành vi của Tiện ích mở rộng VEX Robotics.

Cài đặt người dùng VEX để cấu hình Tiện ích mở rộng VEX VS Code là:

  • Kênh điều khiển (chỉ dành cho Bộ điều khiển V5) - Đặt Kênh vô tuyến của Bộ điều khiển V5 thành Tải xuống hoặc Pit. Thiết lập này chỉ áp dụng cho liên kết vô tuyến VEXnet.
  • Đường dẫn của Cpp Toolchain - Đặt đường dẫn cho CPP Toolchain.
  • Kích hoạt Thiết bị đầu cuối người dùng- Bật hoặc tắt tiện ích mở rộng để mở và hiển thị dữ liệu từ cổng người dùng.
  • Mục nhập nhật ký - Đặt số mục nhập nhật ký để tải lên từ VEX Brain.
  • Kiểu xây dựng dự án - Thiết lập cách tiện ích mở rộng sẽ xây dựng dự án C++.
  • Trang chủ dự án - Đặt vị trí mặc định cho các dự án mới.
  • Chạy sau khi tải xuống - Thiết lập xem chương trình người dùng có chạy sau khi được tải xuống VEX Brain hay không.
  • Hệ thống DFU Tự động phục hồi - Thiết lập xem Não có nên tự động phục hồi khi phát hiện IQ2 hoặc EXP ở chế độ DFU hay không.
  • Websocket Server Bật - Bật hoặc tắt tiện ích mở rộng để khởi động Websocket Server.
  • Địa chỉ máy chủ Websocket - Đặt Địa chỉ máy chủ của Máy chủ Websocket.
  • Websocket Server Port - Thiết lập số cổng Websocket Server

Để biết thông tin hữu ích về cách truy cập và thiết lập Cài đặt người dùng VEX, hãy xem bài viết này.

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

Last Updated: