VEX VS Code Extension UI Overview

This article provides an overview of the VEX Visual Studio Code Extension UI(User Interface). The extension supports the development of C++ and Python projects for VEX IQ 2nd Generation, EXP, and V5 platforms.

VEX VS Code Extension UI Layout

The VEX Visual Studio Code Extension UI is divided into five main areas: Activity Bar, Side Bar, Editor, Terminal Panel, and Toolbar.

ui-image1.png

Activity Bar

The Activity Bar features an array of icons that lets us switch between views and gives us additional context-specific indicators for the VEX project development.

ui-image2.gif

The common icons used for developing a VEX project in VS Code are:

  • ui-image3.png Explorer View Icon - When clicked, the Explorer View opens in the Side Bar.
  • ui-image4.png Extensions View Icon - When clicked, the Extensions View opens in the Side Bar.
  • ui-image5.png VEX View Icon - When clicked, the VEX View opens in the Side Bar.

Side Bar

The Side Bar contains different views that enable us to use the integrated tools within VS Code. The common Side Bar views used to perform tasks for VEX project development are Extension View, VEX View, and Explorer View.

Extension View

The Extension View is used to install and manage the extensions in VS Code. For developing software on VEX IQ 2nd Generation, EXP, and V5 platforms, we need to install the VEX Extension, C/C++ Extension, and Python Extension.

For step-by-step instructions on how to install the VEX Extension, C/C++ Extension, and Python Extension in VS Code, please check out this article.

ui-image6.png


VEX View

The VEX View enables us to develop projects for VEX IQ 2nd Generation, EXP, and V5 in VS Code. There are three categories included in the VEX View: PROJECT ACTIONS, VEX DEVICE INFO, and VEX FEEDBACK.

ui-image7.png

ui-image8.png

  • VEX DEVICE INFO
    The VEX DEVICE INFO category provides us with an overview of the connected VEX device - a VEX Brain or a VEX Controller.

    ui-image9.gif


    This category indicates the connected VEX Device type and displays the information of the Brain system, serial port, downloaded program, and devices connected to the VEX Brain’s smart ports. It allows us to screenshot the VEX Brain Screen, view the VEX Brain Event Log, use the V5 Battery Medic, set the brain name and team number, and erase the user program from the VEX Brain.

    When a VEX Brain is connected to the computer, the VEX DEVICE INFO category shows if a VEX Controller is linked to the VEX Brain and enables us to update the VEXos for the VEX Brain if the VEX Brain’s VEXos version is out of date.

    When a VEX Controller is connected to the computer, the VEX DEVICE INFO category shows if a VEX Brain is linked to the VEX Controller and enables us to update the VEXos for the VEX Controller if the VEX Controller’s VEXos version is out of date.

    For a comprehensive description of the device information and how to use the features under VEX DEVICE INFO, please check out this article.
  • VEX FEEDBACK
    We can submit feedback to VEX by typing the message in the Text Box under VEX FEEDBACK and clicking the SEND button.
    For helpful information about using the VEX FEEDBACK in VS Code, please see this article.

ui-image10.gif

Explorer View

The Explorer View is used to browse, open, and manage the VEX project files and folders in VS Code.

ui-image11.png

Editor

The Editor is the main area to edit the files in VS Code. The VEX VS Code Extension enables Intellisense/Linting for both C/C++ and Python in the Editor area to assist us while developing the program.

ui-image12.png

In the Editor area, we can approach helpful information about a specific function by hovering the mouse over the text of the function or by using the VEX Command Help to access documentation for this function included in the C++ and Python API (Application Programming Interface).

For detailed instructions on using the VEX Command Help in VS Code, please see this article.

Terminal Panel

The VEX VS Code Extension provides two terminals on startup, the Log Terminal and the Interactive Terminal. 

  • Log Terminal - The Log Terminal displays build output, build error, and download results.

ui-image13.png

  • Interactive Terminal - The Interactive Terminal has two functions - displaying print logs and sending raw keystrokes back to a user program.

    ui-image14.png



    Note: To utilize the Interactive terminal, a Brain or Controller must be connected to a computer running the VEX VS Code Extension.
    Note: Interactive terminal output gets cleared by default after building and downloading a user program.

Toolbar

The Toolbar features an array of icons that provide us with a quick way to interact with VEX VS Code extension projects, VEX Brains, and VEX Controllers.

ui-image15.png

Note: The Toolbar is only active when a valid VEX project is open in VS Code. 

Note: A valid VEX project is a project that is created or imported by the extension. VEXcode or VEXcode Pro projects opened in the editor will not be considered a valid VEX Project and will need to be imported.

The icons featured on the Toolbar include:

  • ui-image16.png  Device Picker - The Device Picker displays the Icon of the connected VEX Device (a Brain Icon ui-image17.png or a Controller Icon ui-image18.png)
    Note: If a controller is connected to the computer, but does not have a radio link to a brain, no brain name will be displayed next to the Controller Icon.
  • ui-image19.png  Slot Selector Icon - The Slot Selector Icon allows us to pick which Slot the VEX Extension will download or play a user program on by clicking on it and selecting one of the eight available Slots on the VEX Brain from the pick list.
  • ui-image25.png  Build Icon- If a VEX Device is not connected, the Build Icon will show on the Toolbar. When clicked, the project will only build.
  • ui-image21.png  Download Icon - If a VEX Device is connected, the Download Icon will show on the Toolbar. When clicked, the project will build and if successful, will be downloaded to the connected VEX Device.
  • ui-image22.png  Play Icon - When clicked, the Play Icon runs the downloaded user program in the selected Slot on the VEX Brain.
  • ui-image23.png  Stop Icon - When clicked, the Stop Icon stops running the user program on the VEX Brain.
  • ui-image24.png  Project Selector - The Project Selector displays the name of the selected project. The Project Selector Icon allows us to switch between VEX projects when multiple exist inside the workspace by clicking on it and selecting a project from the pick list.
  • ui-image25.png  Python File Selector(Python Only) - When a VEX Python project is selected, the Python File Selector will appear in the Toolbar. The Python File Selector displays the name of the selected Python file. Python for VEX only supports single file downloads currently.

For helpful information about how to use the Toolbar features in VS Code, please check out this article.

VEX User Settings

The VEX User Settings allow us to configure the VEX Extension according to our own requirements. User Settings are global settings applied to every VEX VS Code extension project. We can access the VEX User Settings by clicking the Settings Icon in VS Code and selecting the corresponding items in the menus.

ui-image26.gif

The VEX User Settings for configuring the VEX VS Code Extension are:

  • Controller Channel (V5 Controller only) - Sets V5 Controller Radio Channel to Download or Pit. This setting applies to the VEXnet radio link only.
  • Cpp Toolchain Path - Sets the Path for the CPP Toolchain.
  • Enable User Terminal- Enables or disables the extension to open and display data from the user port.
  • Log Entries - Sets the number of log entries to upload from a VEX Brain.
  • Project Build Type - Sets how the extension will build a C++ project.
  • Project Home - Sets the default location for new projects.
  • Run After Download - Sets if the user program should run after it is downloaded to a VEX Brain.
  • System DFU Auto Recover - Sets if the Brain should auto recover when an IQ2 or EXP is detected in DFU mode.
  • Websocket Server Enable - Enables or disables the extension to start the Websocket Server.
  • Websocket Server Host Address - Sets the Host Address of the Websocket Server.
  • Websocket Server Port - Sets Websocket Server Port Number

For helpful information about how to access and set the VEX User Settings, check out this article.

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

Last Updated: