Before reading this article, please review Getting Started with Vision to get an understanding of Vision's functionalities & requirements, and for instructions on how to setup your camera.

Color Detector Overview

Using the color detector, you can monitor pre-defined regions on your camera's stream to detect pre-specified colors in real-time. You can then use color detection events, to build logic within your app.

In this article you will learn...

  • How to setup a Color Detector

  • Using the Color Detector events in app triggers

  • How to adjust the Settings of a Color Detector

Setting up the Color Detector

After completing your camera configuration setup, you should see the video stream. To set-up the color detector, select the region that you want to monitor for colors. You may have to create a new region, by clicking and dragging on the picture to define your region:

Name the region with a short meaningful description. This name will be later used to trigger based on the region, so make sure it's a memorable name (prefer a name like "Widgets Bin" over "Region 1").

Next, create a Color Detector by clicking the Create Detector link. Name the detector and give a description (optional) and choose Color as the type of detector. Enable the color detector for this region using the toggle. You should be able to see that the Region in the camera stream now has a "Similarity: NN%" field overlaid on top of it.

The region boundary will turn green based on the "Begin color detection threshold". If this threshold is 50%, then the detected color in this region should be more than 50% similar to the color specified in the color detector region settings. It's at this point that an event will be triggered in the app that is using this Camera Configuration.

Color Detector Region Settings

You will likely need to adjust a region's settings to yield results that fit your use case appropriately. To edit your region's settings, click on your Camera Configuration and select the regions you wish to adjust.

The following settings are available:

Begin Color Detection Threshold

This is the percentage similarity between the detected and specified colors that is required to change for a 'Color Detection Began' event to occur. If you need the colors to be highly similar, you can set this threshold to a higher value like 75-80%. Any value above this threshold will trigger the Color Detection Began event if there was no color being detected previously.

End Color Detection Threshold

This is the percentage similarity between the detected and specified colors that is required to change for a 'Color Detection Ended' event to occur. If the colors are less similar, you can set the value to about 60-65%. Any value lower than this threshold will trigger the Color Detection Ended event if there was a color being detection previously.

Setting the Color for Detection

You can pick a color for detection using the "Set current region color" button, which automatically takes in the average color value of the selected region, or you can use the color picker tool to specify a color manually (by clicking on the color rectangle). This defines the color that you want to detect in the region.

Verify the color selection succeeded, by observing the similarity value increase to a high value such as 95%.

Using the Color Detector in an App

Switch over to your app editor, and create a new Device Output Trigger.

All Camera Configurations will appear under the sub-list of Specific device. Please select your Camera Configuration from the dropdown.

Note, that the Specific device section allows you to use multiple cameras in the same app. Any station that runs this app must have the specific Camera Configuration that you selected for the camera. Otherwise, a warning will be shown when the app runs.

Now you will see a dropdown of various events to run the trigger off of:

For this example, select Color Detection Began from the list of events.

If you have a video preview widget in your step, note the "Show Overlay" option allows you to disable showing the regions on top of the video. Enable the "COLOR DETECTOR" lay overlay to display color detection information.

Run the app at the station to which you assigned your Camera Configuration.

When opening the step with the Vision Camera Widget in your Player, you will see the video stream of the camera. When you move an object inside the region which has a similar color as specified in the settings, the region boundary will turn green, and the trigger action will take place.

You have now successfully set up the color detector in the camera configuration, as well as in an app.

Further Reading

Did this answer your question?