Multitouch Display - Part Three
Table of Contents
(last update November 13th 2007)
Part One
Part Two
Part Three
Let's build it!
Let me see... if you are reading this page for the first time, probably you want just to understand how you can build a multitouch display. If this is correct I can save you time saying: it's easy to build it! Go to the section one and start!
If this is the second time you get this page ok, you are about to do it, I hope to give you all the informations you may need to build your multitouch display.
If this is the third or more time that you read this page.....bah, probably you're still in the first case but you want to be pretty sure to not to take a way too hard, ok, go on!
I will explain the build process resuming how I did mine, trying to explain also the decisions that I made along the path.
For my setup I decided for a size that was not as small as a normal computer monitor but not big enough to require help to move it. So I decided that a 72x54 cm was a good choice (4:3 aspect ratio).
Plexiglas
I found through Internet an industrial reseller of plastic materials that was selling also to private entities. There I asked to see different acrylic thickness to understand which one was suitable for me. Even if I thought that 8 mm were enough I went for a 10 mm thick piece because the price was so close and this way I thought I would be sure that the display won't bend at every finger touch.
At that time it was known that the edges had to be fine sanded to make them very clear and transparent, so my the first step was to sand the plexiglass edges with sanding paper ranging from 200 to 400 to 800 and then polishing the edges with normal silver polish.
Actually it seems that it is not required to sand the plexglas edges, last multitouch displays boxes made by Gravano from the NUIGroup were made without sanding the plexiglas edges and they work outstandingly! So, before loosing hours and getting tired in this task, give a try using the plexiglas as it is, without sanding it!
Alluminium frame
Another important step is choosing the alluminium profile to build the frame that will hold the plexiglas and the LEDs.
I used a "U" shape 10x10 mm profile but I was (and still I am) not too satisfied about this choice. Not for the shape itself but for it's dimensions because a depth of 10 mm is not enough to have a stable frame if it has to hold also the LEDs inside. You will have a more complete picture in the LEDs section and you'll understand why.
You can mount the LEDs inside the alluminium profile (like I did) or outside it drilling holes for the LEDs. If you're mounting them outside the profile a depth of 10 mm like the profiles I used is enough to keep the frame in place around the plexiglas.
If you're going for a solution with the LEDs inside the alluminium frame then it's bettere to choose a "U" profile at least 15-20 mm deep. The wideness of the "U", of course, has to be the same of the plexiglas thickness.
Once you've choosen the right profile you can cut it with 45° angles to build your frame:
IR Light
When ready with the plexiglas, you can proceed with the IR illuminators. I used 24 Osram SFH485P LEDs that have a 80 degrees beam angle and a flat head:
There are two main ways to hold your LEDs in place on the plexiglas edges:
To overcome this I thought to use a perfboard (a circuit board for experiments) to hold the LEDs, so I cutted the perfboard in stripes:
and I soldered the LEDs onto it:
At this point I had perf board stripes with the LEDs that were perfectly fitting the alluminium profile.
Unfortunately (as I was saying in the alluminium frame paragraph) the "U" profile that I choose were not deep enought to grab in a stable manner the plexiglas. So, at least for this reason, building a more robust wooden frame was a forced choice.
Here on the right you can see how my alluminium profile looked like with the LEDs stripe inside.
Another small problem I had was that I used perf board so I didn't decided the printed circuit lines. This means that, at the end of each 6 LED stripe I had to solder also a wire to bring the power in.
So, to be really honest, take those photos of the aliminium frame and the LED stripes just as an example of how to do it in a not very good way.
I think that the best way to do it is using printed circuit board, surface mounted LEDs and the right alluminium profile like Gravano did in one of his prototypes (please follow the link, it is really explanatory).
The Camera
As webcam I used an Unibrain Fire-i webcam, it is a firewire webcam and may be ordered with special optics, of course I've choosen optics withouth IR-block filter coat!
Compliant surface
If you ran your first test with the rear projection film or if you simply looked at the video above, you noticed that it requires quite an hard pressure of fingers in order to trigger the multitouch display action.
This may be corrected with a good compliant surface. If you're having doubt about how to prepare such layer you're lucky because you don't have to read so much in order to know how to do it, you just need to watch the following video!
Wooden frame
Depending on how much smart and lucky you was in finding the right alluminium profile now you should have finished or you can be just one step away to finish your multitouch hardware setup.
Last step may be to prepare a wooden frame to place around the alluminium one. This may be needed to give more stability to the alluminium frame like in my case or, why not, just for estetic reasons.
Anyway, nothing so special, just buy a wooden "L" profile and cut it with 45° angles like you did for the alluminium frame. Then glue all the pieces together.
In addition I used also a black plastic "L" profiles to give a better look to the display. Here is my result!
(last update November 13th 2007)
Part One
Part Two
Part Three
Let's build it!
Let me see... if you are reading this page for the first time, probably you want just to understand how you can build a multitouch display. If this is correct I can save you time saying: it's easy to build it! Go to the section one and start!
If this is the second time you get this page ok, you are about to do it, I hope to give you all the informations you may need to build your multitouch display.
If this is the third or more time that you read this page.....bah, probably you're still in the first case but you want to be pretty sure to not to take a way too hard, ok, go on!
I will explain the build process resuming how I did mine, trying to explain also the decisions that I made along the path.
For my setup I decided for a size that was not as small as a normal computer monitor but not big enough to require help to move it. So I decided that a 72x54 cm was a good choice (4:3 aspect ratio).
| Back to top |  |
Plexiglas
I found through Internet an industrial reseller of plastic materials that was selling also to private entities. There I asked to see different acrylic thickness to understand which one was suitable for me. Even if I thought that 8 mm were enough I went for a 10 mm thick piece because the price was so close and this way I thought I would be sure that the display won't bend at every finger touch.
At that time it was known that the edges had to be fine sanded to make them very clear and transparent, so my the first step was to sand the plexiglass edges with sanding paper ranging from 200 to 400 to 800 and then polishing the edges with normal silver polish.
Actually it seems that it is not required to sand the plexglas edges, last multitouch displays boxes made by Gravano from the NUIGroup were made without sanding the plexiglas edges and they work outstandingly! So, before loosing hours and getting tired in this task, give a try using the plexiglas as it is, without sanding it!| Back to top | |
Alluminium frame
Another important step is choosing the alluminium profile to build the frame that will hold the plexiglas and the LEDs.
I used a "U" shape 10x10 mm profile but I was (and still I am) not too satisfied about this choice. Not for the shape itself but for it's dimensions because a depth of 10 mm is not enough to have a stable frame if it has to hold also the LEDs inside. You will have a more complete picture in the LEDs section and you'll understand why.
You can mount the LEDs inside the alluminium profile (like I did) or outside it drilling holes for the LEDs. If you're mounting them outside the profile a depth of 10 mm like the profiles I used is enough to keep the frame in place around the plexiglas.
If you're going for a solution with the LEDs inside the alluminium frame then it's bettere to choose a "U" profile at least 15-20 mm deep. The wideness of the "U", of course, has to be the same of the plexiglas thickness.
Once you've choosen the right profile you can cut it with 45° angles to build your frame:
| Back to top | |
IR Light
When ready with the plexiglas, you can proceed with the IR illuminators. I used 24 Osram SFH485P LEDs that have a 80 degrees beam angle and a flat head:
There are two main ways to hold your LEDs in place on the plexiglas edges: - you can drill holes in the alluminium profile and block the LEDs in the holes, then the profile will keep the LEDs in place
- you can use a circuit board with an appropriate shape that will fit in the alluminium profile, then you will solder the LEDs on the circuit board that will keep them in place
To overcome this I thought to use a perfboard (a circuit board for experiments) to hold the LEDs, so I cutted the perfboard in stripes:
and I soldered the LEDs onto it:
At this point I had perf board stripes with the LEDs that were perfectly fitting the alluminium profile.
Unfortunately (as I was saying in the alluminium frame paragraph) the "U" profile that I choose were not deep enought to grab in a stable manner the plexiglas. So, at least for this reason, building a more robust wooden frame was a forced choice.
Here on the right you can see how my alluminium profile looked like with the LEDs stripe inside.
Another small problem I had was that I used perf board so I didn't decided the printed circuit lines. This means that, at the end of each 6 LED stripe I had to solder also a wire to bring the power in.
So, to be really honest, take those photos of the aliminium frame and the LED stripes just as an example of how to do it in a not very good way.
I think that the best way to do it is using printed circuit board, surface mounted LEDs and the right alluminium profile like Gravano did in one of his prototypes (please follow the link, it is really explanatory).
| Back to top | |
The Camera
As webcam I used an Unibrain Fire-i webcam, it is a firewire webcam and may be ordered with special optics, of course I've choosen optics withouth IR-block filter coat!
As low pass filter I used exposed photo films that are quite good as IR filter. When you put them behind the camera, the result is a black and white image very sensible to IR light.
Then I made some tests shooting at the LED stripe to understand how many layers I needed to have a good effect. In my case two layers were enough but probably it may vary standing to the camera sensitiveness and to the "hardness" of the photo film themselves.
In the following image was shoot during this test. I shooted with a photo camera the LED stripe powered and my computer monitor showing the image coming from the webcam with the exposed photo films behind.
You can see that the LEDs seems to be turned off to the photo camera's eye but they are pretty visible to the IR webcam as shown in the computer's monitor.
Once I defined the number of film layers, I drilled a hole in one of the webcam's optics cap, the I cutted the photo films in circle shapes and I put the inside the webcam's optics cap. This way I had a good and removable IR filter for the webcam.
First test
At this point you will have all the elements to start your first test and see the FTIR effect in action. If you already have also the rear projection film you can make a more complete test playing also with some application.
You need to find a even temporary way to keep your display and your webcam in place. You can use two chairs ad I did in this first test:
Ok, this was not a very stable setup but it worked out!!!
As you can see from the two pictures above, there was still a big offset beetween the points where my finger are touching the screen and the two red marks. Those marks are the representation of the points where the computer thinks that I'm touching. This offset is due primarily to the very unstable setup that I had at that time, it was not possible to fine adjust the webcam orientation because it was placed on two books and sticked in place with some adhesive tape. In addition I had (and still have) some problems with the calibration utility of the software I was using and the utility was crashig every time. So I was not able to correct the offset via software, anyway it was precise enough to have fun! You can also watch this short video of the multitouch display, it is from the first test I've done with it:
Then I made some tests shooting at the LED stripe to understand how many layers I needed to have a good effect. In my case two layers were enough but probably it may vary standing to the camera sensitiveness and to the "hardness" of the photo film themselves.
In the following image was shoot during this test. I shooted with a photo camera the LED stripe powered and my computer monitor showing the image coming from the webcam with the exposed photo films behind.
You can see that the LEDs seems to be turned off to the photo camera's eye but they are pretty visible to the IR webcam as shown in the computer's monitor.
Once I defined the number of film layers, I drilled a hole in one of the webcam's optics cap, the I cutted the photo films in circle shapes and I put the inside the webcam's optics cap. This way I had a good and removable IR filter for the webcam.| Back to top | |
First test
At this point you will have all the elements to start your first test and see the FTIR effect in action. If you already have also the rear projection film you can make a more complete test playing also with some application.
You need to find a even temporary way to keep your display and your webcam in place. You can use two chairs ad I did in this first test:
Ok, this was not a very stable setup but it worked out!!!As you can see from the two pictures above, there was still a big offset beetween the points where my finger are touching the screen and the two red marks. Those marks are the representation of the points where the computer thinks that I'm touching. This offset is due primarily to the very unstable setup that I had at that time, it was not possible to fine adjust the webcam orientation because it was placed on two books and sticked in place with some adhesive tape. In addition I had (and still have) some problems with the calibration utility of the software I was using and the utility was crashig every time. So I was not able to correct the offset via software, anyway it was precise enough to have fun! You can also watch this short video of the multitouch display, it is from the first test I've done with it:
| Back to top | |
Compliant surface
If you ran your first test with the rear projection film or if you simply looked at the video above, you noticed that it requires quite an hard pressure of fingers in order to trigger the multitouch display action.
This may be corrected with a good compliant surface. If you're having doubt about how to prepare such layer you're lucky because you don't have to read so much in order to know how to do it, you just need to watch the following video!
| Back to top | |
Wooden frame
Depending on how much smart and lucky you was in finding the right alluminium profile now you should have finished or you can be just one step away to finish your multitouch hardware setup.
Last step may be to prepare a wooden frame to place around the alluminium one. This may be needed to give more stability to the alluminium frame like in my case or, why not, just for estetic reasons.
Anyway, nothing so special, just buy a wooden "L" profile and cut it with 45° angles like you did for the alluminium frame. Then glue all the pieces together.
In addition I used also a black plastic "L" profiles to give a better look to the display. Here is my result!
 |
Previous page |
| Back to top | |
24 Comments
Leave a comment
Navigate this site!
|
|
|
|
 |
Hi BlaXwan,
First of all, great website! Extremely helpful and it looks neat too! :-) Nicely done.
Okay about the MultiTouch. It looks great and I can't believe it's that simple to built actually. But my question is, how do you connect the webcam to your computer in a way that it'll use it as the cursor, instead of the mouse you're normally using? And how will te computer react if it 'sees' two or more parts being active? I hope that you know what I mean and if not, feel free to send me an email. :-)
Thanks,
Guus
Hi Guus, thanx a lot!
Actually you got the hottest point of multitouch developement. All the camera image is processed via software and the output may be a series of "blob" (=finger touches) coordinates via a specific protocol. There are applications that will handle this output because they're specifically developed for this kind of applications. In this way the mouse is no more used. I suggest yout to take a look at the software section on NUIGroup Wiki at
http://nuigroup.com/wiki/Category:Software/
Thanks, I'm trying to install the software now.
I've got another question though. Would clear, (light)blue plexiglas do well or won't it work propperly then? I heard that blue won't let the unwanted light through, so you can use it with the lights in your room on. But idk if you can see the rear projection then, and if it will allow the IR light from your fingers to go through.
I'd be really cool if I could build one at home, although the plexiglas seems to be quite expensive.. ah well :P
Guus
k so does it go in this order? from bottom (where the projected image is being projected) to top
1. Rosco Grey Film Paper (or w/e your using)
2. Plexi Glass
3. Then the Compliant surface?
or does the film paper and compliant surface both sit on top and the projector just hits the plexiglass?
Hi Brendan,
no, from bottom (where the projector is) to top (where you put your fingers) the order is:
1 - plexyglas
2 - compliant surface
3 - sketch/tracing paper
4 - rear projection film (Rosco or Peroni)
Cheers
Hi Blaxwan,
I have a question.. I thought that the rosco gray and/or trace paper was suposed to be like this:
1.- Proyector
2.- Rosco gray/ Trace paper
3.- Plexiglass
4.- silicon rubber
5.- Fingers
Apparently not.. so the fingers touch directly the rosco gray, is it this a fragile material? will it handle hard traffic (water, scratching, burns, etc.) or what should i put as a protective layer?
Can all of the above can be changed for a templed glass or someting without affecting the blob tracking??..
Regards,
Monty
I have a question.. I thought that the rosco gray and/or trace paper was suposed to be like this:
1.- Proyector
2.- Rosco gray/ Trace paper
3.- Plexiglass
4.- silicon rubber
5.- Fingers
Apparently not.. so the fingers touch directly the rosco gray, is it this a fragile material? will it handle hard traffic (water, scratching, burns, etc.) or what should i put as a protective layer?
Can all of the above can be changed for a templed glass or someting without affecting the blob tracking??..
Regards,
Monty
Hi Monty,
the Rosco is used also to prevent that external IR light penetrate into the box, so it needs to be on top (externally) of the plexiglas. From this you'll understand that the silicone rubber is used to improve the coupling beetween the plexiglas and the Rosco. So, from bottom to top there is projector, plexiglass, silicone rubber (and eventually sketch paper), Rosco.
Your question is good, Rosco is not the ideal material for intensive use, someone in the NUIGroup is using also a protective plastic film ontop of the Rosco.
Glass is less transparent to IR than Plexiglas, so it would work very badly (or not work at all).
Why has no one thought do drill 5mm holes at say 15-25mm intervals deep enough for the IR leds to be inserted,then using some optical grade bonder,or just really clear epoxy,bond them into the edge of the plexiglas,it looks as though you are using 12mm plexi so plenty of room,that way you will get all of your IR light inside the plexi.Make your connections for the IRLEDS along the edge and cover with your black plastic U channel,bond on with silicone if required after testing.
By having the LEDS merely shining at the edge of the plexi you will loose allot of the light they give off,try it youll see how much difference it makes.
I'm also wondering if there is a better (optically) material than plexiglass to use out there,I'm trying to think of the plastic used in light tubes/rods,but for the life of me cant remeber it,try looking it up,
have fun,Stew.
Hi Stewart,
thanks for your comment.
I saw some guys in the NUIGroup that built their multitouch display like you suggest. The result is actually a better coupling beetween LEDs and plexyglas and more IR light in it. On the other side you have to consider that if one LED fails it would be really a pain to replace it.
Hi BlaXwan,
First of all great tutorial, i was just wondering how you manage to hold the Rosco Grey, on top of the surface (How have you attached it) cause from my understanding you need to have the Rosco pretty tightly stretched out so you dont get ripples in the screen.
Hi Apollo, thanks for your comment.
Infact the projection film needs to be really flat and stretched over the silicone rubber + acrylic surface. I did it using an additional frame (the black one you can see in the pictures) that is pressed and screwed on the main one keeping all the layers together. On the other side remember that silicone rubber sticks a little bit helping to keep the projection film in place.
Phenomenal work, BlaXwan!
I've been looking for a DIY project that would be fun and not "over the top" as far as complexity goes, to kind of get my feet wet with bigger stuff. This seems like a "big" endeavor, however just within my ability (hopefully) :)
Thank you!
Hello BlaXwan:
Nice work !
i just would like to know where you got the images zooming and light software you have used in you tests
Thanks
@Shawky
Thanks, the SW is Touchlib, you can find it looking at the NUIGroup website
Hello, Very Nice!!!!
A few questions
1. how can you make a high res interface for illustrating etc.
2. and is it possible to set it up with a Stylus or something. perhaps a pen with a silicon tip that it itself emits IR light, perhaps a stronger IR so as to be interpreted as a unique register on the multi touch, that way the Pen can be given special attributes?
What would happen with an IR injection as the "sylus"
Thanks,
RK
3. has anyone tried fiber optics for the image source? instead of projection?
@Rex
Thanks. Your ideas are very nice.
Basically if the FTIR display is well built you can use also a stylus in the same way you use your finge tips. Of course if your stylus is emitting IR by itself everything may be simpler and it would work also on a poor quality FTIR installation. The problem will be in the fact that the system will detect the stylus also when it is not touching the surface at all.
The resolution will depend exclusively from the webcam resolution and from processing speed. This is because in order to have a good response time you need to wokt at least at 30 frames per second that will correspond to an high amount of data being processed by the PC if you're running high resolution (800x600 and over). I didn't see any fiber optics installation, do you have any link pointing to this kind of projection technology?
Thanks,
Fabio
Thanks for the tutorial, started a week ago constructing one of these from a slightly different approach. I used 8 photo diodes to in place of a camera, created the visible light filter from an old floppy disc (took 3 layers to get any good results). Worked out real nice, got a nice slim 11 x 8.25 inch pad, it's barely thicker than a laptop display. For the display itself I used a real old laptop LCD that was just the right size to fit the surface (was the entire basis for having that surface size), was fun though peeling off the reflective tape on the back of the LCD which served to assist in back lighting it. It works at 1024 x 768, the native resolution of the LCD. The driver uses pixel shader 1.1 to process the image and return the actual block center/radius to the driver. Even made a pen (used a uniball pen and one of the leftover IR bulbs) which pulses using a 555 timer, the driver is set up to recognize that pulse and update the mouse position accordingly. Now if I can just find thin enough buttons to fit into the pen barrel I can completely eliminate my mouse all-together.
@Siferion
Wow, it seems a great solution! Please explain it better: from the photodiodes you have just an analogic value that indicates the intensity of the IR light seen from it, do you use interpolation beetween the 8 photodiodes to get the position of the blob on the screen? Which touch resolution you can have interpolating those 8 values? The result of the interpolation should change when a second finger touch is added, isn't it?
Please let us know!!!
Thanks :o)
Hey,
Nice guide you've made here.
I want to build my own multi touch screen, but how and where did you place the LEDs?
Ciao, ottimo blog e buona guida.
Devo ammettere che qualcosa è poco chiaro, peccato che sia solo in inglese!
Comunque settimana prossima comincerò la costruzione del multitouch, e ho deciso di seguire la tua guida.
Grazie, Ale
I was thinking that the silicone rubber layer could be added more homogenously by using the top plastic layer, a second sheet of plastic treated with teflon and some spacers of 1 mm. Then simply add the fluid with a suringe into the open slot in the top. Then allow it to harden. Theoretically it should come apart quite easily. It would also eliminate the risk of contamination and bubles.
Hello
Would that be possible to put the video screen on the bottom, so there would be nothing between the acrylic glass and your finger ?
or to make a kind of ground glass from another thin acrylic glass and stick it to the upper glass ? using real glass would even act as a IR filter while being transparent. only the strong IR blobs would pass.
Complimenti per la guida.
Volevo soltanto capire 2 cose:
1 - in merito alla disposizione degli strati dello schermo sensibile, a che cosa ti riferisci quando parli di Rosco projection film? Dove si pu� trovare? Ho visto su youtube che ci sono alcuni che hanno utilizzato come diluente del silicone del toluene, ma basta del diluente nitro? Il plexiglas non si scioglie con questa base chimica?
2 - per il discorso della proiezione, non si potrebbe utilizzare semplicemente del lucido da disegno, incollato SOTTO al plexiglas?
Infine, non capisco dove Elias Sorensen intenderebbe posizionare i fotodiodi: al posto della webcam, dentro nel box oppure sul bordo dello schermo, alternandoli ai led IR? In questo caso non sarebbe pi� necessaria la proiezione dell'immagine da dentro il box e lo schermo multitouch potrebbe essere banalmente applicato su un qualsiasi TV (magari un 40" LDC o Plasma...) trasformandolo in una simpatica idea regalo per Natale...! Tu sei riuscito a capirne qualcosa in pi�?
Che cosa usi per gestire i files? L'interazione sul sistema operativo (Win XP o VISTA) come risulta utlizzando il M.T. al posto del mouse?
Ciao e grazie.