Multitouch is all the craze these days and it is becoming more commercially available with products such as the HTC Touch Diamond, Microsoft Surface and the iPhone. Since multitouch allows for direct manipulation and gesture recognition, it opens up the opportunity for designers to explore new interfaces that are natural and intuitive for users. A classic example is the zoom gesture that has become a table-stake in multitouch experiences; i.e., zooming in and out using two corner touch points that move in opposite directions on a photo or a map, for example.
Bill Buxton recently visited us and shared his thoughts on designing and prototyping for these types of experiences (check out the article here). One of his points was to “MAKE experiences” by live prototyping during the concept and design phase. This isn’t exactly a new lesson to be learned, but a great one to remember. In the business of designing new multitouch experiences, our role is to be experts and the best way to do this is to develop a platform that allows us to explore and communicate our ideas to each other.
With this in mind, us Artefactians set out to join the do-it-yourself craze to investigate ways to build our own multitouch table on the cheap that we can use as a testing platform for multitouch experiments. Our goal was to build a table as quickly and cheaply as possible that would recognize multiple fingers and blobs simultaneously so we can get started with our investigations. Here’s where we’re at…
Experiment One: The $1 version
To begin our quest to build a cheap multitouch table, we did some research on available opensource software and inexpensive hardware solutions. We kept an eye on what the folks over at NUI Group were doing and decided to try their open source multitouch software to get us going. installing this software was a breeze. Here’s what we did and how to DIY…
 |
 |
 |
- Step 1: Find a cardboard box, piece of glass, and a web cam that is collecting dust under one of your desks. Cut a hole in the cardboard to feed the web cam’s cord through it and position the web cam with tape so that it points straight up.
- Step 2: Place a piece of glass on top of the box opening and taped a piece of large paper that can be purchased for less than a buck over it to defuse the light.
- Step 3: Once your table is constructed, run the software, which comes with demos such as paint, streams, and photo manipulation, and, voila!, you’ve got a working multitouch table.
OUTCOMES
The test was easy, cheap and got us detecting multiple fingers and blobs quickly. However, we were limited to viewing the display on the computer monitor since there wasn’t a way to project it back onto the surface of the glass. We needed a more robust hardware solution that would allow us to project back onto the surface of the table so that we could directly manipulate the content.
Experiment Two: The $1000 version
After a bit of research into multi-touch displays, we decided to build one that implements the frustrated total internal reflection method. Here’s how it works: light from infra red LED’s is aimed into the edges of a thick sheet of plexiglass. Due to some blend of magic and physics, the IR light remains mostly trapped inside the plex. But when a finger comes into contact with the top of the plexiglass sheet, the IR is no longer trapped. It reflects off the finger, and this reflection is captured by an IR camera below the sheet of plexiglass. Easy breezy, right? Well not so fast, there are actually quite a few steps involved. As a result, we put together step-by-step directions on how you can build your own multitouch table:
 |
 |
 |
- Step 1: Make a frame. Make it the right dimensions for your projector and plexiglass. Reinforce frame because the first version you built was sort of wobbly.
- Step 2: Wire up an array of LED’s. Test each strip in the array. Power on the full set. Rewire three strands that worked in the first test, but stopped working in the second test. Realize two sets are wired into the array backwards. Rewire them correctly. Break the fragile metal connector on several LEDs. Curse the man who invented electrical tape. Test again. Rewire some more. Break the metal connector on a couple resistors. Replace then rewire several more broken LED’s. Test again. It works! Now don’t touch.
- Step 3: Mix and pour a a thin (6-8 mm) layer of special-order silicone rubber on top of your plexiglass. Let it dry overnight. This layer reduces the amount of finger pressure necessary to generate a blob.
 |
 |
 |
- Step 4: Order a second batch of the silicone rubber mix because the first pour was too fast and the layer had too many bubbles. Re-pour, slowly, and from a distance of 3 feet.
- Step 5: Aim a projector at a mirror so that the image is reflected up towards the base of the plexiglass. Throw a sheet of rosco grey (an inexpensive diffusion material) on top of the plex. Now you have a screen.
- Step 6: Break apart a cheap camera and remove the high-pass IR filter installed at the factory. Attach exposed (or a bandpass filter tuned to your IR LEDs) to the top of your camera to prevent visible light from being sensed as touch data. Attach it to the base of the frame.
 |
 |
 |
- Step 7: Start up the software, calibrate the software with the camera. Test for touch blob detection. Hmm. Not working. Re-calibrate the software fifty times. It still doesn’t work. Somehow discover you have to press the “C” key in step 4 of calibration to make the software work correctly.
- Step 8: Move the whole apparatus into a dark room because it’s still not really working.
- Step 9: Test again. It works, it really works!!!
OUTCOMES
The final table worked pretty well, although, the response time wasn’t amazing. When we did these tests last May, new developments in DIY multi-touch technology were occurring on a daily basis over at the nuigroup.com forums. If you want to build your own, we recommend heading over to the forums to see what’s working well these days. We have also provided a list of where to purchase components and materials to build your table. Good luck!
Resources
Bill Buxton
Bill Buxton visits artefact
Multitouch article
The guide we roughly followed
Van Der Veen’s A solid resource Main forum
NUI Group
Parts and marterials
IR LEDs
Filter
LED wizard
Silcone Rubber