Building a Touch Table 101

5 05 2009

As promised, here is the article on how my team and I built our interactive kitchen table step by step with all the details from hardware to software. Note that this is just ONE of a few methods to build a touch table in your garage and other methods may be more suited for the purpose of your touch table. To learn more about the various different methods, I highly recommend joining the NUIGroup community who is always there to contribute to discussions and help you with any questions you have πŸ˜€

Alright, lets begin!

Methodology used: Diffused Illumination

Hardware Setup
Materials required:
1) Piece of glass / acrylic
– this is the surface you’d like to project your screen onto. My team chose to use glass instead of acrylic as acrylic is a bit soft and bendable, hence not very stable for a kitchen counter top where you’ll be messing around with your ingredients.

2) Stand to place your piece of glass/acrylic
– can be wooden, metal, self-made, as long as you have enough height to project your screen onto the surface from below.

3) Projector
4) Web camera
5) Piece of Mirror

Once you have the hardware needed, set it up such that the arrangement is similar to the image below. (Please excuse the illustration.. drew it in a hurry with no thought for the colours chosen haha!)

Adjust the mirror angle and projector settings until you get the size you want of the projected screen on the surface. Once you get the alignment right, position your web camera such that you are able to see the whole projected surface area. Note that you need not position the web camera where I placed it.

Alright that’s it for the hardware! Simple huh? Now lets move on to the software needed.

Software setup

1) TBeta by NUIGroup

This is the software needed to track shadows detected by the web cam and send the data retrieved from it to another channel or software. I highly recommend that you read the tutorial on how to adjust the different settings (e.g: Threshold, contrast, callibration, dynamic subtraction, etc). For our table, we took a while to get the settings right so that it will detect only shadows that were pressed on the surface.

What FLOSC does is that it takes values sent to it by Tbeta and sends it over to your interface application. For ours, we used it to send positional coordinate values to our application written in Flash.

TUIO will contain the code which you will need to add to your Flash ActionScript file so that your Flash application listens to data from the same port that FLOSC is sending data to. In other words, if FLOSC is sending data to port 3333, you set your Flash to listen to data from port 3333 using TUIO. You can then use TUIO to extract the necessary data for your application like the X and Y position of the shadows detected on the interface. Note that the TUIO API also has code which you can add to your Flash application to detect TouchEvents (e.g: TouchEvent.CLICK).

4) Adobe Flash
Thanks to the TUIO API, all you have to do is code your whole Flash application as per normal, add the necessary 2 or 3 lines of code to read the TUIO API and replace all your MouseEvents with TouchEvents :D! It is really that simple. The way I coded the interface was to do it fully using MouseEvents in Flash and then later changing it to TouchEvent when I wanted to test it out on the touch table.

Limitations of not having InfraRed Lasers
The limitations of our setup is that we didn’t have any InfraRed Lasers / Camera to detect the touch. We were using shadows and sometimes when the shadows can’t be seen clearly especially in areas where the background colour is not dark enough, it is not detected as a touch. Hence, I designed the interface such that all the buttons that will be pressed have dark-coloured backgrounds. If you used InfraRed lasers on the other hand, it would be very sensitive and accurate leading to a much more responsive table. The reason why we didn’t include the InfraRed gadgets was because we couldn’t find them here in Singapore and didn’t want to spend a bomb ordering them from overseas. If you do get the opportunity however, I highly recommend using InfraRed lasers.

Alright! So there you have it, my quick guide to building a touch table. If you find any parts of this tutorial unclear or have further questions, feel free to e-mail me or drop a comment here! Will reply and update this post accordingly as soon as I can πŸ˜€

And thanks for the very encouraging comments on the project guys! Really appreciate it! Enjoy hacking in your backyard! ^_~

Additional resources you might want to check out:
Discussions about building a touch table on NUIGroup
Build your own InfraRed Camera (thanks James!)
Quick tutorial on building a touch table using Total Frustrated Internal Reflection
Reactivision for tracking fiducial markers




11 responses

5 05 2009
Recipease: Interactive Kitchen Table « Bits & Bytes make a Bitbot

[…] The tutorial is done. Check it out here Possibly related posts: (automatically generated)The NUS Facebook Module: A student’s […]

5 05 2009

WOW….. cool stuff.

6 05 2009

I am impressed! The future lies here in what you are doing. Do let me know if you and your pals are going to launch anything. πŸ™‚

6 05 2009
» Energia Lunar Expedition The Gunther Corporation

[…] Building a Touch Table 101 Β« Bits & Bytes make a Bitbot […]

7 05 2009

Heres what you were looking for: how to make the camera see IR only,2

8 05 2009

@DK: Thanks!

@coolinsights: Thanks! Don’t think my peers and I will be commercializing this table for now though as the image recognition technology is still very primitive.. maybe when the technology gets more advanced / RFID tags becomes a norm then it’d be more functional

@James: THanks for link! Added it to the post

16 05 2009

Heyya, how about using IR leds and use the DSI method
I’m going to build one, and for this I have to get the ‘endlighten’ screen from NUS cause a chap there ordered massive amounts for us multitouch hobbyists.

Good luck!
And if you havent downloaded the current tbeta, download it now πŸ™‚

25 05 2009
65Bits Episode 120 : Building a Touch Table 101 : Singapore Entrepreneurs

[…] tips for the code::ExtremeApps, [9] Creative debuts the low cost Zen MX, Zen Mozaic EZ300, [10] Building a Touch Table ala Microsoft Surface 101 and the Byte of the Week: Twitter Business Cards. Do click and check out their […]

4 10 2009
Another Tutorial For Creating A Touch Table « Matthew Gardiner I-DAT

[…] Table Tutorial 1 Touch Table Tutorial 2 Touch Table Tutorial 3 Touch Table Tutorial 4 Possibly related posts: (automatically generated)Touch Pro 2 Tutorials […]

28 08 2010
touch tables… | solid

[…] above diagram comes from here and uses a regular […]

14 05 2011

I can’t seem to access this site from my droid!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: