A little mouse hack

A major theme of the upcoming Firefox 4 release is improving speed and responsiveness, especially in the user interface. It’s easy to see issues where responsiveness is on the order of seconds (like waiting for an update to apply, or the length of time to respond to a modal dialog), but how do you examine and measure UI changes that happen over a period of just milliseconds?

One could instrument the code and get nanosecond-level precision — but it’s difficult to know where to insert probes, and you still may not be measuring what the user is actually seeing. A more direct “ground truth” would be to use a camera to record what’s displayed on the screen, and then examine the resulting video frame-by-frame to obtain data… I dabbled with this briefly last year when working on a Windows CE bug about slow-opening windows and menus. But more recently, Alex Faaborg has started a investigation of the Firefox UI using a significantly refined technique.

A problem Alex quickly ran into, though, is that it’s hard to look at a video and know exactly when the user clicked a mouse button. If only there was some visual indication of the mouse button state… Hmm! That was enough to start the wheels turning in my head, yadda yadda, and one weekend later I had complete a nice little hack that added some LEDs to a mouse so you could see the button states.

Some pictures… (See Flickr for the whole set.)

First, you’ve got to drill a nice hole (*)… I cringe every time I see someone mention doing some hack with a Dremel, because most of the time the result looks like something a drunk monkey with a chainsaw would produce.

Next, tap into the mouse’s microswitches (which are tied to ground) and the USB’s +5V.

Finally, route things nicely. Behold, the four-as… err, two-wired mouse!

This is the business end of the extra wire now attached to the mouse. 2 LEDs (and a couple of resistors) wrapped up in some heat-shrink tubing. When a mouse button is clicked, one of them lights up — red for right, (ye)llow for left.

This is a pretty simple little hack, but it was especially fun it’s not often us software guys get to do hardware stuff. And, hey, it even worked on the first try!

Sadly, there is one little problem… While the hacked mouse worked flawlessly for me, it immediately failed to work for Alex — the OS didn’t see mouse clicks, even though the LEDs lit up. Oh no! Luckily I had made the LED tail detachable (not shown here), as it turns out that if the mouse is plugged into the computer with the LED tail attached, it doesn’t work. But if it’s plugged in without the LED tail, and then the tail is plugged in afterwards, it works fine. I’m guessing that I just need to add some decoupling capacitor where I tapped into the switches, as the mouse’s IC was ok with the short traces to the switches but not the new 4-foot wires hanging off it. Or maybe a pull-up resistor? Both? Dunno exactly what the problem is yet — this is why I’m a software guy. ;-) What say you?

About Justin Dolske

Mostly harmless.
This entry was posted in Firefox, PlanetFirefox, PlanetMozilla. Bookmark the permalink.

7 Responses to A little mouse hack

  1. This makes me a special kind of hot. I think I didn’t know you were a tinkerer. If I had, I would have tried to flaunt my Make: credits more, to impress. Nice one.

  2. The LEDs changed the impedance of the circuit, and you’re having unreliability problems. You need a probe circuit that isolates the LEDs from the rest of the mouse electronics. Some kind of buffer would be perfect.

  3. Marco Bonardo says:

    You could try to decouple with a couple of discrete bjt transistors (one per switch). I did something similar to attach a bunch of leds to the hard drive status line. When your switch closes only a small amount of current will go to the transistor, and sizing input resistors correctly you should be able to have it switch ON/OFF your leds (5v are too much for one led though, you should put a couple per line).

  4. Adrian says:

    Would installing a hook be more precise than doing this? You would then be able to effectively log any messages and UI state changes.

  5. lolz says:

    This is the most ridiculous thing I’ve ever seen. A mouse hook with logfiles + timestamps and putting a log+timestamps on the UI would be a much better solution than a crazy camera + LEDs.

    And these are the people that implement Firefox?

  6. lolz: I think you’ve completely missed the point of why people do hacks, it’s not just about finding the best solution!

    You also failed to read the bit about wanting to measure the delays the user is actually seeing — we’ve already found at least one instance of the OS being slow (dozens of milliseconds) to respond to a click. Software logging is great for most things, but for what we’re doing it’s also important to have a physical indication to prove how accurate (or not) that logging actually is.

  7. Tony says:

    This is a wonderful hack. I’ve done something like this before, where the physical input lit up an LED, the software put a black box on the screen when it was done, and then recorded the whole mess with a high-speed (1000fps) camera. Works like a charm.

Comments are closed.