Building a Touch Table 101

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.

2) FLOSC
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.

3) TUIO
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 ! 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

The Prosperity Garden!

Hey guys! Sorry I haven’t been updating much. Before I know it, its been almost a whole month since I wrote anything. Yup, I’ve been busy with school work, particularly with my assignments for this module I’m taking at NUS called CS3216: Software Development on Evolving Platforms. To spare you the jargon, its a module where we develop Facebook applications for homework. Even though its been consuming a lot of my time, its the most fun module I’ve taken at NUS so far.

So what is The Prosperity Garden? It is a Facebook application my group and I developed as homework for our 2nd assignment (and also my first publicly released Facebook app). The theme for the assignment was “The Wall” but we didn’t want to make a variation of typical walls that never fail to make your profile look cluttered. We wanted to create a “wall” that profile owners could customize and call their own which was neat, flexible and interactive. Hence, we came up with the concept of a garden which friends could decorate with a gift everytime they sent you a message. At the same time, profile owners can choose to rearrange the gifts they receive so as to decorate their garden to their tastes and liking. And! Since CNY was around the corner, we decided to create a “Prosperity Garden” filled with auspicious CNY items which you could give your friends like ang pows (red packets with money), gold ingots, red lotus flower, firecrackers and etc.

The learning experience was definitely much more fun when we started getting feedback from users, (We got a few initial users who stared at the app and didn’t know what the app was for despite the instructions!), but I’ll save it for another blog post. In the meantime, do check out the app and feel free to drop me any comments / e-mails on feedback, bugs, errors, or even suggestions to further improve the app! ^_~

P.S: I do accept requests for specific gifts to be included in the app, like a blooded dagger for your enemies hehe!! Just send me a request and I’ll illustrate one for the app!