Building the Big Red Button

Metricfire's Big Red ButtonEveryone loves our giant red button. We’ve used it at three events so far – a Dublin Beta startup demo evening, our PyCon 2012 booth, and most recently as the most awesome slide advancing controller ever at the first Node.js meetup in Dublin.

We get a lot of questions about how we made it and how it talks to the computer. It’s about time we did a little show and tell, with lots of pictures and code!

Image from SparkFun.com - go buy one of their buttons!

The main element, the actual button, is one of SparkFun’s “Big Dome Push Button”¬†units. Two of these have been sitting in Charlie’s electronics parts boxes for a year or so, waiting for just the right project.

Inside the button

 

PCB from a small USB numeric keypad

The second major component is deceptively simple and cheap – the PCB from a small USB numeric keypad. Modern membrane keyboards have a row of contacts that mate with the flexible plastic sheets with conductive traces that form the key contact points.

After some trial and error with a piece of wire, you can identify the pair of contacts that correspond to any key on the keyboard. If you solder those up to a big push-to-make switch, you’re basically done. A press of the big button will cause the controller board to send a USB keyboard event to the OS.

 

1W white LED on a custom mount

A little poking around with a multimeter will find you a good point on the PCB to pull 5v to power the light inside the button. Though SparkFun now sell a version with an LED, our one used an older incandescent bulb, which requires 12v and would probably draw more power than the keyboard controller was designed for. Charlie built a suitably shonky mount for a 1W white LED and it replaced the incandescent bulb.

 

 

 

Vinyl sticker inside the button

How’d we get our logo in there? We had some spare vinyl stickers for the backs of our macbooks, and one just happened to fit perfectly inside the button. If you need excellent decals/stickers, talk to Jeff and Neece of SmartDecals and tell them Metricfire sent you!

After that, the easy bit was making a wooden case for the whole thing. A grotty concrete-encrusted wooden plank turned out to make a solid enclosure, once it was cleaned up a bit!

 

 

Where’s the code?

As promised, there’s some code involved here. Sometimes, having the button appear to the OS as a regular HID keyboard is undesirable. When we’re demoing our (almost) real-time graphs and dashboards at events like Dublin Beta and PyCon, we don’t want button presses to be interpreted by the browser running the demo. We need something a little deeper catching those button presses so we can generate metric events.

For this, we use Python, libusb, and some hardcoded magic numbers. The code:

So there you go. If you’d like a Big Red Button of your own, you have complete instructions and sample code. Quick, to the workshop!

2 thoughts on “Building the Big Red Button

    • Hmm… you’re right, that does look better. Well, this is what happens when two engineers try to design something. :D

      Thanks for the feedback! I’ll add a TODO item for this.