Using the Vision Sensor in Web-based VEXcode EXP – VEX Library

The Vision Sensor allows your robot to collect visual data from a streaming video camera transmission. The Vision Sensor can collect information about the robot’s environment, including recognizing colors and color codes.

Adding a Vision Sensor Device

VEXcode EXP Toolbar with the Devices icon highlighted in between the Code Viewer and the Print Console icons.

Open the Devices window.

VEXcode EXP Devices menu with the Add a device button highlighted.

Select "Add a device".

VEXcode EXP Devices menu after the Add a device button has been selected. The Vision option is highlighted.

Select the Vision Sensor icon.

VEXcode EXP Select a Port menu where the specific port for the Vision Sensor can be selected.

Select the port in which the Vision Sensor is attached to the VEX EXP Brain. Ports that are already configured will be unavailable.

Once the port has been selected, you will see the Vision Sensor’s Configure screen. To Configure, follow the next set of steps.

Opening the Vision Utility

The Vision Sensor Settings panel in VEXcode EXP with the sensor labeled as Vision1. A large Vision Sensor icon is displayed, and beneath it, a blue button labeled Open Utility is highlighted.

Select "Open Utility" to open the Vision Utility in a new web browser tab.

Vision Utility menu is open with the Camera icon in the top left highlighted.

The web-based Vision Utility will open. Select the camera icon in the upper left corner to capture an image.

Note: The web-based Vision Utility is unable to store or load previous configuration data. Every time the web-based Vision Utility is loaded, all signatures will be cleared.

A browser prompt from vision.vexcode.cloud asking to connect to a Vision Sensor. The device named Vision Sensor is highlighted. Buttons labeled Connect and Cancel are shown at the bottom of the prompt.

A dialogue box will open, prompting you to choose the vision sensor. Select the Vision Sensor.

If no devices appear in this list, make sure your Vision Sensor is connected to your computer via the microUSB cable.

A browser prompt is asking to connect to a Vision Sensor. The device named Vision Sensor has been selected, and the Connect button is highlighted below.

Select connect.

Configuring Signatures

Vision Utility menu is open with the Camera icon in the top left highlighted.

Once the Vision Sensor is connected, an image will be captured.

You can select the camera icon again after the Vision Sensor is connected to capture a new image.

Note: Live streaming video from the Vision Sensor is not available with the web-based Vision Utility.

The live preview feed from the Vision Sensor Utility showing a VEX Robotics storage box. An area of the color blue on the box has been selected with a red square. The Set icons on the right next to the Signatures have turned green.

Select a colored area on the object that will be used to configure the color. The "Set" icons will turn green when a new signature is being configured.

The Set button next to the SIG_1 signature has been selected, and now the full area of blue on the box is highlighted and identified by the Vision Sensor.

Once the colored area has been selected, configure the color by selecting the "Set" button.

The SIG_1 signature has its name field selected to indicate that each signature can be renamed.

Type in the signature box to name the configuration.

Note: Make sure to capture any other necessary colors during this step.

The signature's custom configuration code is shown below the live preview. The Copy Config button is highlighted below.

The signature’s configuration code will appear in the box below. Select "Copy Config" to copy the code.

Important: Afterwards, make sure to close this page.

Vision Sensor menu is shown with additional features highlighted. Above, the Brightness display and slider is highlighted. To the right, each signature's Clear and Color Threshold Buttons are highlighted. Below the signatures, the Clear All button is highlighted.

Other functionality includes:

Brightness Slider - Use the slider at the top of the page to adjust the brightness of the image that the camera sees. It is important that this brightness remains consistent every time the Vision Sensor is used.
Color Threshold Slider - Click the arrows beside a signature box to adjust how close a color can be recognized as the specified color within the designated signature box.
Clear - Select "Clear" beside any of the signature boxes to clear that specific signature.
Clear All - Select "Clear All" at the bottom to clear all signature boxes.

The Vision Sensor Settings screen with a blue button that is highlighted and labeled Paste Config.

Return to VEXcode with the Devices Window open and select ‘Paste Config’.

You may get a browser security prompt asking for permission to paste the text - if so, please choose “Allow".

The Vision Sensor Settings screen with a custom configuration code pasted into the menu's text field.

The configuration code will appear in the window.

The same Vision Sensor Settings screen with the configuration code pasted into the text field. The Done button is highlighted in the bottom right.

Select "Done". Your vision sensor is now configured and ready to use.