Convert Optical Mouse into Arduino Web Camera

Posted on by

Optical mouse uses a small camera that records surface to calculate movements of the mouse.
In this tutorial I will show you how to display video signal of this camera in your browser.

The mouse I took apart was an old Logitech RX 250 which contains ADNS-5020 optical sensor.
This sensor records 15x15 pixel images in grayscale. It also calculates X-Y movements of the mouse.

Arduino Web Camera

To get the things running you will need:
- arduino
- ethernet shield
- optical mouse with ADNS-5020 sensor
- 10K ohm resistor

Connect everything together

Make sure that pins (NRESET, NCS, DSIO, SCLK) of the sensor don't connect to anything on the mouse board.
If they do, cut the traces. (I removed the main chip and some resistors to achieve the same thing.)

ADNS-5020 mouse sensor

Solder 10K ohm resistor between NRESET and +5V. Then solder wires (approx. 20cm) to pins NCS, DSIO, SCLK, +5V, GND.
This is a scheme that you should end with:

Arduino ADNS5020 scheme

Put Ethernet shield on arduino and connect it to local network.
Then connect mouse sensor to arduino like this:
+5V -------------- Arduino +5V
GND -------------- Arduino GND
NCS -------------- Arduino digital pin 7
SDIO -------------- Arduino digital pin 6
SCLK -------------- Arduino digital pin 5

Arduino sketch

In the sketch below replace receiverIP value (in my case 192, 168, 1, 102) to IP of your computer.
Then upload the sketch to arduino.

#include <SPI.h>
#include <Ethernet.h>
#include <EthernetUdp.h>

byte arduinoMac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress arduinoIP(192, 168, 1, 177); // desired IP for Arduino
unsigned int arduinoPort = 8888; // port of Arduino

IPAddress receiverIP(192, 168, 1, 102); // IP of udp packets receiver
unsigned int receiverPort = 6000; // port to listen on my PC

EthernetUDP Udp;

int SCLK = 5;
int SDIO = 6;
int NCS = 7;

void setup() {
Serial.begin(9600);
Ethernet.begin(arduinoMac,arduinoIP);
Udp.begin(arduinoPort);

pinMode(SCLK, OUTPUT);
pinMode(SDIO, OUTPUT);
pinMode(NCS, OUTPUT);

mouse_reset();
delay(10);
}

void loop() {
char img[225];
for (int i=0;i<225;i++){
img[i]=readLoc(0x0b);
img[i] &= 0x7F;
img[i]+=1;//if there is 0 value, part of udp package is lost
Serial.print(img[i], DEC);
Serial.print(",");
delay(2);
}
Serial.println();
Udp.beginPacket(receiverIP, receiverPort); //start udp packet
Udp.write(img); //write mouse data to udp packet
Udp.endPacket(); // end packet

delay(500);
}

void mouse_reset(){
// Initiate chip reset
digitalWrite(NCS, LOW);
pushbyte(0x3a);
pushbyte(0x5a);
digitalWrite(NCS, HIGH);
delay(10);
// Set 1000cpi resolution
digitalWrite(NCS, LOW);
pushbyte(0x0d);
pushbyte(0x01);
digitalWrite(NCS, HIGH);
}

unsigned int readLoc(uint8_t addr){
unsigned int ret=0;
digitalWrite(NCS, LOW);
pushbyte(addr);
ret=pullbyte();
digitalWrite(NCS, HIGH);
return(ret);
}

void pushbyte(uint8_t c){
pinMode(SDIO, OUTPUT);
for(unsigned int i=0x80;i;i=i>>1){
digitalWrite(SCLK, LOW);
digitalWrite(SDIO, c & i);
digitalWrite(SCLK, HIGH);
}
}

unsigned int pullbyte(){
unsigned int ret=0;
pinMode(SDIO, INPUT);
for(unsigned int i=0x80; i>0; i>>=1) {
digitalWrite(SCLK, LOW);
ret |= i*digitalRead(SDIO);
digitalWrite(SCLK, HIGH);
}
pinMode(SDIO, OUTPUT);
return(ret);
}

Open serial window and you should see data flow from mouse:

Serial window

Install Node.js and Socket.IO

To display data in browser we need to have node.js and socket.io installed on computer.
Install node.js from here: nodejs.org then go to windows command prompt and run:
npm install socket.io

Node.js and and website code

In the code below we configure node.js to listen to udp traffic from arduino, send all data to browser with socket.io and setup a basic web server.

var dgram = require("dgram");
var server = dgram.createSocket("udp4");

var io = require('socket.io').listen(8000); // server listens for socket.io communication at port 8000
io.set('log level', 1); // disables debugging. this is optional. you may remove it if desired.

server.on("message", function (msg, rinfo) { //every time new data arrives do this:
//console.log("server got: " + msg + " from " + rinfo.address + ":" + rinfo.port);
//console.log("server got:" + msg);
io.sockets.emit('message', msg);
});

server.on("listening", function () {
var address = server.address();
console.log("server listening " + address.address + ":" + address.port);
});

server.bind(6000); //listen to udp traffic on port 6000

var http = require("http"),
url = require("url"),
path = require("path"),
fs = require("fs")
port = process.argv[2] || 8888;

http.createServer(function(request, response) {

var uri = url.parse(request.url).pathname
, filename = path.join(process.cwd(), uri);

var contentTypesByExtension = {
'.html': "text/html",
'.css': "text/css",
'.js': "text/javascript"
};

fs.exists(filename, function(exists) {

if(!exists) {
response.writeHead(404, {"Content-Type": "text/plain"});
response.write("404 Not Found\n");
response.end();
return;
}

if (fs.statSync(filename).isDirectory()) filename += '/index.html';

fs.readFile(filename, "binary", function(err, file) {
var headers = {};
var contentType = contentTypesByExtension[path.extname(filename)];
if (contentType) headers["Content-Type"] = contentType;
response.writeHead(200, headers);
response.write(file, "binary");
response.end();
});
});
}).listen(parseInt(port, 10));

console.log("Static file server running at\n => http://localhost:" + port + "/\nCTRL + C to shutdown");

Just save the code as: code.js

Now we need to create a website which will convert data from socket.io into 15x15 image.
This is it:

<html>
<head>
<style>
#wrapper { width:300px; height:300px; }
div div { width:20px; height:20px; float:left; }
</style>
<script type="text/javascript" src="//localhost:8000/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost:8000');
socket.on('connect', function () {
socket.on('message', function (msg) {
document.getElementById('wrapper').innerHTML = '';
for (var i = 0; i < 225; i++) {
pixDraw(Math.round((msg[i])*2.4));
}
});
});
function pixDraw(clr) {
var pixDiv = document.createElement('div');
pixDiv.style.backgroundColor = "rgb("+clr+","+clr+","+clr+")";
document.getElementById("wrapper").appendChild(pixDiv);
}
</script>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>

Save it as index.html

Run it!

If you are on windows then just download zip file below and run the runme.bat file.
If you are on linux then run the command node code.js in the shell.

Now open the address http://localhost:8888/ in a web browser and you should see a realtime image from mouse:

video in browser

Video

Download files

All files are in this zip: mousecamera.zip

Franci KapelFranci is an experienced web developer who spends most of his free time hacking gadgets. Site frenki.net was made to help others with their projects. Connect with Franci on Google+