Introduction: Color Tracking Using Intel Edison Development Kit

I set out to create an OpenCV project on Intel Edison using Node.js for tracking objects. OpenCV only has C++, C, Python and Java interfaces so how can you work with just JavaScript? OpenCV has never been ported to JavaScript in its entirety, but individual parts and algorithms have. Libraries such as JS-objectdetect, HAAR.js and tracking.js have feature detection capabilites based on Haar Cascades in JavaScript (Viola-Jones Algorithm). Other libraries include: OpenCVjs, opencvjs, ccv and headtrackr.

For this tutorial, I will be using tracking.js, which is a library that brings computer vision algorithms and techniques to the web browser.

I used edi-cam project, as a framework to set up a web server on the Edison and stream a video on the browser, for more information on it follow this link. Basically the edi-cam project enables live video streaming on Intel Edison using Node.js and WebSockets.

What you need:

  1. Intel Edison
  2. Arduino Breakout board
  3. A webcam which is UVC driver compatible
  4. Grove Strater Kit
  5. A power source (9V battery or Intel Galileo power cable)
  6. Install WinSCP and PuTTY

Step 1: ​Environment Set-up

  1. Set up a serial communication session with your Intel® Edison board (tutorial)
  2. Assemble the board and flash the firmware with the latest Yocto image
  3. Configure WiFi on the Edison
  4. Git clone the edi-cam repository and follow the setup instructions listed
root@edison:~# configure_edison --wifi
root@edison:~# git clone https://github.com/drejkim/edi-cam.git

Step 2: Add Code for Tracking Color

I edited the client Index.html from the edi-cam project to use tracking.js libraries to detect specific colors.

  1. Launch WinSCP and use this tutorial to get access to the files on the edison
  2. Navigate to edi-cam/web/client and open index.html, copy and paste the code attached.
  3. Download the following files from the tracking.js libraries and them to your index.html file in the client folder
<script src="js/tracking-min.js"> </script>
<script src="js/color_camera_gui.js"> </script>

Edit the wsUrl in web/client/index.html to your Edison's IP Address

// Change this to your the correct WebSocket Address
<br>var wsUrl = 'ws://myedison.local:8084/';

For example:

var wsUrl = 'ws://192.168.4.34:8084/';

If the Edison's IP Address is 192.168.4.34.

Step 3: Try It Out

Now that everything is set up, navigate to edi-cam/web/server and enter the node server.js in the terminal

root@edison:~# cd edi-cam/web/server
root@edison:~# node server.js

Open your browser (Mozilla preferably) then enter the address to your Edison at port 8080, for example

http://192.168.4.34:8080

You should see a video stream and try and put an object which is green in front of the webcam and it should detect the object!

Step 4: Display Text When Color Is Detected

UPM is a high level repository for sensors that use mraa and this is how to use it to display color and text on the Grove LCD Backlight RGB display in the Grove Sensor Kit

// Load lcd module on I2C
var LCD =  require ('jsupm i2clcd");
var myLcd = new LCD.Jhd1313m1 (0, 0x3E, 0x62); 
myLcd.setCursor(0,0);
myLcd.setColor(109,226, 41); 
myLcd.write('Hello Green');

So we set the LCD RGB module to light green and display "Hello Green!" when it detects a green object on the live video stream. Connect the base shield to the Edison and the LCD display to the I2C port on the base shield.

Update the code to the one attached and repeat step 3 and see try it out with a green object.