Convert Optical Mouse into Arduino Web

Camera

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.

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.)

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:

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:

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: