Convert Optical Mouse into Arduino Web Camera

[net3design]

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:

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.

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:

Source : Hack a Mouse

Edited January 22, 2014 by net3design

[Birkoff]

interesant, dar la ce ar folosi? ca scop didactic mi se pare fain, dar practic nu are nici o valoare (sau nu vad eu una practica)

ai facut proiectul? ce mouse ai folosit? eu am toate componentele mai putin mouse-ul dar nu stiu daca se merita sa fac asta...

[satanus]

@Birkoff valoarea practica ar fi daca s-ar duce proiectu mai departe si s-ar face un fel de OCR pentru cei care au probleme de vedere. Nu stiu cat de bine ar functiona acest proiect dar ar fi cel putin o idee. Sau un bar code reader ieftin.

[Menta]

interesant~~