Wednesday, March 16, 2011

Make your own Surface Table!

Were you one of those easily excitable geeks that went gaga when Microsoft unveiled the surface table?

Well, I was. This was in times before touch-screen tablets became more common than a landline phone, and the idea of having this huge surface where you can manipulate digital information using your fingers was super cool.

Last year, I was enrolled in INFO 262 (Tangible UI Design) at Berkeley, and the project me and two of my friends wanted to do required a large surface which would display funky stuff that would react to "tokens" that we placed on the surface. We were trying to visualize project work-flows as streams of water that would flow as time progresses. Deadlines were represented as dams, and a stream would reach the dam right on the date of the deadline. If a "valve" didn't open the dam, announcing that the work due at the deadline has been completed, the river would flood. And so on.

Sounds like a call to Microsoft for a surface table, no?

Project due in 1 week + Undergraduate budget =

So, here is the way to hack together an almost surface table in an evening. This is to save the intersection of (i) the small set of people who read this blog, (ii) the smaller set of people who want to build something like this and (iii) the questionably small set of people who couldn't figure a better way for themselves.

SO, Let's get started.

Step 1: Find two people to work with (for?) you.

Team Member #1 -  Someone to do the work
Team Member #2 - someone to share the ancient video game system you just found in lab

Step 2: Scavenge
You need:
- 1 friend who is willing to loan you his large flat screen TV. Even better if he loans you his roommate's.
- A plate of plastic/glass so you don't ruin the flat screen TV
- Printouts of some Augmented Reality Markers (like these)
- An open-source software to recognize the markers. (ARToolkit, NyARToolkit etc. We used NyARToolkit for Processing).
- A laptop and a lot of patience to get the toolkit working. (Most of the documentation is in Japanese)
- A USB camera
- A way to mount the USB camera at a height of about 4 feet.
- A room with good lighting
- Tokens that you use to interact with the table. (we used small glass bottles)
- Some cheap force sensors, perhaps a potentiometer to make things interesting

Step 3: Install software
We used Processing 1.2 interfaced with NyARToolkit for Processing - pretty easy to prototype with!

Step 4: Setup:
-Lay the TV horizontal on a table, and place the glass plate on top. (Just make sure the TV doesn't overheat or anything - just in case)
-Glue some AR markers onto your tokens. Make sure each token has a different one, and that your AR software can actually recognize all your markers. We used small glass bottles as tokens.
-Calibrate the setup - move the markers around the table, and use the toolkit to overlay some simple shapes on top of the marker. (Most ARToolkit softwares have sample code to draw circles and cubes). You know you're good when the shape is perfectly below your marker.
-You can attach force sensors on the bottom of the tokens so you can detect when the token is pressed.

Step 5: Interface
Here are some helpful links:


Arduino + Processing:

NyARToolkit for Processing:

One night of hacking later .....
(starts at 3:19)

No comments:

Post a Comment

I'd like to hear your thoughts and opinions, and answer any questions you might have!