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);
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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.jsNow 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:
