build your own multitouch surface computer

29
1/14/12 Build Your Own Multitouch Surface Computer 1/29 maximumpc.com/«/maximum_pc_builds_a_multitouch_surface_computer« Published on Ma[imum PC (http://www.maximumpc.com) Home > Build Your Own Multitouch Surface Computer Build Your OZn Multitouch Surface Computer Created 04/06/2009 - 9:00pm Build Your OZn Multitouch Surface Computer Posted 04/06/2009 at 9:00pm | by Alex Castle 193 Comments Print It all started while we were researching an article on future user interfaces. Touch interfaces are hardly futuristic at this point, but multi-touch hardware like the Microsoft Surface or the iPhone is just starting to become a big deal, and we decided to see what big things are going on in that field. What we found that surprised us the most wasn¶t anything about the future of multitouch; it was about something that people are doing right noZ . There is, it turns out, a whole community of very smart folks out there on the internet perfecting the art of building DIY multi-touch surfaces. The process isn¶t exactly simple, but the results we saw were stunning: multitouch surfaces with responsiveness rivaling Microsoft¶s $12,000 offering, built in a garage on a shoestring budget. “Future UI article be damned,” we thought, “we¶ve gotta build one of these for ourselves.” And so we did. We documented the whole process, from start to finish, so that you can try building one of your own, if you¶re so inspired. We¶re not going to claim to have done everything perfectly the first time, so think of this article as more of a build log than a definitive how-to. Still, we¶re very pleased with how the table turned out. We¶re so pleased, in fact, that we put together a video showing the table in motion. Check it out, and read on to find out how we did it!

Upload: curtis-burnett

Post on 22-Oct-2014

93 views

Category:

Documents


6 download

TRANSCRIPT

Page 1: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

1/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

Published on Maximum PC (http://www.maximumpc.com)

Home > Build Your Own Multitouch Surface Computer

Build Your Own Multitouch Surface ComputerCreated 04/06/2009 - 9:00pm

Build Your Own Multitouch Surface Computer

Posted 04/06/2009 at 9:00pm | by Alex Castle193Comments

Print

It all started while we were researching an article on future user interfaces. Touch interfaces are hardlyfuturistic at this point, but multi-touch hardware like the Microsoft Surface or the iPhone is just startingto become a big deal, and we decided to see what big things are going on in that field. What we foundthat surprised us the most wasn’t anything about the future of multitouch; it was about something thatpeople are doing right now.

There is, it turns out, a whole community of very smart folks out there on the internet perfecting the artof building DIY multi-touch surfaces. The process isn’t exactly simple, but the results we saw werestunning: multitouch surfaces with responsiveness rivaling Microsoft’s $12,000 offering, built in agarage on a shoestring budget. “Future UI article be damned,” we thought, “we’ve gotta build one ofthese for ourselves.”

And so we did. We documented the whole process, from start to finish, so that you can try building oneof your own, if you’re so inspired. We’re not going to claim to have done everything perfectly the firsttime, so think of this article as more of a build log than a definitive how-to. Still, we’re very pleased withhow the table turned out. We’re so pleased, in fact, that we put together a video showing the table inmotion. Check it out, and read on to find out how we did it!

Page 2: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

2/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

First, some acknowledgments are in order. Virtually all the techniques used to create this table werediscovered at the Natural User Interface Group website, which serves as a sort of repository forinformation in the multitouch hobbyist community. If you find the technology shown in this articleinteresting, you owe it to yourself to check out their forums, where you can participate in thedevelopment of multi-touch hardware and software.

The Theory

Before we can get into the actual, physical construction of the table, it’s important to understand justhow it works.

There are several different ways to make a multi-touch surface, but we’ll focus on the one that weemployed: the FTIR screen. An FTIR (short for Frustrated Total Internal Reflection) setup involves threevital components: a sheet of transparent acrylic, a chain of infrared LEDs, and a camera with an IRfilter. The LEDs are arranged around the outside of the sheet of acrylic so that they shine directly intothe thin side surfaces.

Page 3: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

3/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

Once the IR light is inside the acrylic, it strikes the top and bottom surfaces of the acrylic at a near-parallel angle, and is subject to the effect known as total internal reflection. This causes it to be whollymaintained in the acrylic. This is a little tough to describe in words, so we’ve made a simple diagram:

The net effect of the setup described above is a sheet of acrylic full of internally reflecting infrared light.When a finger is pressed against the acrylic, it causes some of the light to be reflected down, throughthe acrylic and into the cabinet, where it is detected by the webcam. This effect, called frustrated totalinternal reflection is a little complicated, and involves something called an evanescent wave, but youdon’t really need to understand why it happens, just that it does happen, as illustrated in this diagram:

The webcam, which has been modified to detect only infrared light, sees this reflected light as whitespots on the screen; something like this:

Page 4: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

4/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

From that picture, software running on a nearby computer extracts a map of where fingers have beenpressed on the screen, and uses that data to control multi-touch applications.

The Screen

An FTIR multi-touch table’s screen is comprised of three basic components: The acrylic sheet, theLED lighting, and the projection surface. Each one requires a bit of work, so we’ll discuss them one byone.

The Acrylic

Page 5: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

5/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

The foundation of the screen is the sheet of acrylic which serves as the medium for the infrared light.Why acrylic? Acrylic has several properties that make it a good fit for our project. First, it has the rightoptical properties, allowing for an excellent FTIR effect. Additionally, it’s lightweight, strong, and veryclear (more so than glass).

We constructed our screen from a 24” X 30” X 3/8” acrylic sheet, which we bought at local plasticsdealer TAP plastics. Acrylic can also be purchased on the web, although high shipping costs meanthat it’s best to try and find a local plastics dealer. For a 24” X 30” sheet, 3/8” is thick enough toprevent any noticeable sagging in the sheet, even when firm pressure is applied to the middle of thescreen. A larger screen would, of course, require thicker acrylic for stability.

Most acrylic comes with saw-cut edges, which are rougher and therefore more opaque. Because wewanted to shine infrared light into the acrylic from the sides, we needed to do something to guaranteea clear edge. We had two options:

1. Buy laser-cut acrylic. Most large plastics stores will have the capability to do this, though theygenerally charge extra. Because we here at Maximum PC always have our mind on our money andour money on our mind, we decided to go with option number 2:

2. Buy saw-cut acrylic, then polish the sides ourselves. To do this, we simply gave the edges athorough sanding with 200-grit sand paper, then went back over each edge with Dremel rotary toolusing the buffer attachment and a polishing agent. This certainly took a little while, and involvedinhaling more acrylic dust than is probably healthy, but the result was a nice, clear edge.

Page 6: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

6/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

Smoothing the edges with 200 grit sandpaper

Polishing to a sheen with a Dremel and buffer bit

Next Page: Soldering LEDs and spreading silicon

The Lights

The array of infrared LEDs is what floods the acrylic with light and creates the vital FTIR effect. Theexact construction of the array can differ greatly from one table to the next: which LEDs to use, how farapart to space them, how many sides of the screen to wire were all variables we had to consider. Forour table, we decided to cover all four sides with LEDs spaced just a little more than an inch apart.

Page 7: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

7/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

Like with the acrylic, there is an easy way and a hard way to connect the LEDS. The easy way is tobuy premade infrared LED ribbons. Right now, the only source for IR LED strips that we could findwas a company called Environmental Lights. These strips can be installed around the edges of theacrylic using an aluminum channel such as this one. Both the Ribbon and the channels run on thepricey side.

The hard way is to buy LEDs in bulk and solder them yourself. Once again, because we werecommitted to putting this project together on as tight a budget as possible, we opted to go for thecheaper option. We bought 110 IR LEDs (850nm wavelength, not 940nm—it’s easier for the camerato pick up) from www.digi-key.com for about 40 bucks, and whipped out the old soldering iron.

Now, we won’t lie to you, readers; soldering and wiring the LEDs was a pain in the ass. Not only issoldering 96 LEDs together tedious to begin with, but the LEDs’ leads had an unpleasant tendency tobreak under even slight force, requiring quite a bit of LED repair work. Also, even though our tableworked just fine in the end, we would probably try to use even more LEDs in a future build. Becausethe premade ribbons pack more LEDs per inch and are much easier to use, we would probably gowith those the second time around.

Because the voltage drop across each LED is 1.5V, and we’re using a 12V rail from a PC powersupply to run them, we soldered the LEDs in chains of 8 (for a total 12V drop), then wired 12 chains upin parallel (leaving us with a handful of spare LEDs, which is absolutely vital). To make it easier tosolder, we drilled 8 holes in a line in a piece of scrap wood, just big enough to hold the LEDs in placeas we soldered them together.

There are different ways the LEDs can be mounted around the acrylic. Some people choose to drillholes into an aluminum or wood strip in order to make a frame to hold the LEDs in place. Since wewere committed to doing things on the cheap, and also on a very tight schedule, we simply usedelectrical tape to hold all the LED chains in place, three on each side, shining into the acrylic. Sure, it’snot the prettiest solution in the world, but it was effective, and because the outer two inches of theacrylic are covered by wood, the tape doesn’t show up on the finished screen.

Page 8: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

8/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

The Surface

Now we’ve got our acrylic, and the LEDs are set up to shine into it, but our setup has still has twoproblems.

For one, acrylic is very clear. More so than glass, even. This is nice if you’re building a window out ofPlexiglas, but it also means that if we tried to project onto the acrylic the light would pass right through.To solve this problem we’re going to use a sheet of drafting vellum, which is essentially a high-quality,durable tracing paper. This will act as a reasonable projection surface, and is fairly cheap. We got a36” by 24” sheet for about 5 bucks at San Francisco art supply superstore FLAX. If you don’t live neara huge art store, you might have to do some calling around to find a sheet, or you can order themonline, usually in somewhat larger quantities.

In our experience, the vellum worked very well as a projection surface, but gave the surface a distinctly"papery" look and sound, and it was sometimes difficult to make it lay flat. In a future revision of thebuild, we would like to experiment with having the vellum laminated before using it as a constructionmaterial.

The other problem with the acrylic surface isn’t really noticeable until you turn on the lights and cameraand watch what happens when you actually touch the screen. On the bare acrylic, or the acrylic with thevellum, pressing your fingers down causes the FTIR effect to occur, reflecting light into the camera.However, if you try dragging your fingers on the screen, the effect gets much weaker, or disappearscompletely. To solve this problem, we need to create a “compliant surface” to enhance the FTIR effect.We made our compliant surface out of silicon sealant.

When it’s spread on with a foam roller, the silicon creates a thin coating of “microblobs,” with a veryrough, rubbery texture. This is ideal because it allows the vellum to lie lightly on top of the acrylic,silicon side down. When you press down on the vellum sheet, the silicon squishes onto the acrylic,momentarily bonding with the surface, which alter the way light bounces around inside the screen andallows more to escape down into the camera.

Page 9: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

9/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

To create the compliant surface, we first taped the vellum to a flat surface with painters tape, thenapplied silicon onto the sheet with a caulk gun in a loose grid. After that, we quickly used a densefoam paint roller to spread the silicon evenly across the vellum. We waited about an hour for the siliconto set, then repeated the process. We waited another hour, then applied a third and final layer. As anexperiment, we also readied an additional sheet of vellum with only a single coat of silicon. During ourtesting we found that the 3-coat compliant surface created a dramatically more responsive surface.

Next Page: Performing open-camera surgery on a Playstation 3 Eye

The Camera

In order for our setup to work, we needed a camera that senses infrared light, but not visible light. Itsounds expensive, but you’d be surprised. In this section, we’ll show you how we created an IRcamera with excellent resolution and frame-rate for only $35—the price of one PlayStation 3 Eyecamera. “But that’s not an IR camera,” you say? We’ll show you how to fix that.

As it turns out, most cameras are able to sense infrared light. If you want to see first-hand proof thatthis is the case, try this simple experiment: First, find a cheap digital camera. Most cell phonecameras are perfect for this. Next, point it at the front of your TV’s remote control. Then, while watchingthe camera’s display, press the buttons on the remote. You’ll see a bluish-white light that is invisible tothe naked eye. That’s the infrared light used by the remote to control the TV.

Page 10: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

10/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

However, for the sake of preserving an accurate color balance, most cameras have an IR filterapplied, which causes the camera to detect only visible light. It’s possible (and in the PS3 Eye’s case,reasonably easy) to open up a camera, remove the IR filter, and replace it with a visible light filter,making an infrared-only camera.

But before we could get at the PS3 Eye’s sweet, sweet IR filter, we had to crack it out of its shell. Todo this, we started by flipping it over and popping off the four little black disks glued over the screwwells. We had seen this done using an X-Acto knife in this excellent video, but when we tried torecreate the feat ourselves we didn’t manage to do anything except snap the tip off our X-Acto'sblade. Instead, we found that using the corner of a regular rectangular razor blade to pry the disks offwas more effective.

Once the covers are gone, the screws can be removed and the two halves of the shell pulled apart.This is a little easier said than done, though; the shell is glued together. To break it apart, we had touse a process that involved going around the seam that joins the two halves of the camera, inserting aflathead screwdriver and twisting every centimeter or so, until the halves separated.

Page 11: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

11/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

With the back half of the shell removed, the circuit board is exposed. First, we removed the twoscrews at the bottom, labeled (a), allowing us to removed the camera’s base, then we unscrewed thefive screws labeled (b) and separated the circuit board from the front casing. Finally, we removed thetwo smaller screws that had been hidden behind the camera's base, freeing the lens from the boardand making sure not to damage the sensor beneath it.

The infrared sensor is the innermost piece of glass on the lens assembly. When it catches the light, itlooks ruby red – a dead giveaway that this is the piece filtering out infrared light. In order to remove itwe simply used a razor blade to gouge out the plastic in a circle around the filter, allowing us to easilypop it out.

That red circle is the infrared filter

Page 12: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

12/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

The lens with IR filter carved out

So now the IR filter is gone, but we need a visible light filter to replace it with. You can buy fancy IRbandpass filters off the internet, which will give the best results, but it’s also possible to make a verypassable (no pun intended) filter out of the magnetic tape inside of a floppy disk, or a couple of piecesof exposed film negatives. We went with the magnetic tape method, and (after a few false starts) wereable to cut a square that fit nicely into the square space between the lens assembly and the imagesensor. We reassembled the PS3 eye, now converted into an IR-only camera.

Magnetic tape after several attempt to cut a filter

Page 13: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

13/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

PS3Eye lens enclosure with visible light filter added

The PS3 Eye camera has two focus settings, for a wide or narrow field of view, which can be selectedby twisting the plastic ring around the lense. It’s worth noting that the removal of the IR filter messes upthe focus of the PS3 Eye slightly, and we found out through trial and error that in order to get it to focussharply, we had to twist the focus ring very slightly, so that it was “balanced” between the two settingsthat it normally snaps to.

Next Page: Building the cabinet and installing the computer and projector

The Computer

For the build we used a small form factor computer we had laying around. With a Core 2 Duo and 2GB of memory, it's harrdly a beast of a system, but still this computer ran all the multitouch software wetried just fine, so most any computer from the last couple years probably would work as well.

Page 14: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

14/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

Note that we also could have run the cables for the PS3 Eye and the projector out of the cabinet, whichwould have allowed us to run the system off of a laptop, eliminating the need for a dedicated PC, butmaking the Multitouch display into more of a peripheral than a standalone system.

Inside the cabinet, we connected the screen’s LEDs to a 12 volt rail from the computer. To do this, wecut off one end of a 4-pin Molex connector, and attached the (yellow) +12v wire and one of the (black)ground wires to the LED wires with electrical tape. Then, we ran a 12v rail from the computers powersupply through an empty expansion slot and out of the case, plugging it in to the Molex connector.

Modifying the Molex connector

Page 15: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

15/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

Connecting the power supply to the LEDs

The Projector

Like the computer, the projector we used for the build was something we scavenged up. The majorconcern for a projector to use in this kind of system is throw distance—the ratio between projectiondistance and image size. Short-throw projectors, which are sold by all the major projector brands,work the best for this kind of project, because they can be set up at the bottom of the cabinet andaimed directly at the surface. Unfortunately, they also tend to be more expensive.

Ever thrifty, we went with a projector we could use for free: an older home-theater projector borrowedfrom a friend. Because of the longer throw distance on this model, we had to mount the projector nearthe top of the cabinet, facing down, and use a mirror to reflect the image up onto the screen. For thiswe ordered a front-side mirror (a mirror with the reflective surface on the front of the glass, rather thanbehind it) to eliminate any potential “ghosting” problems, caused by dual reflections from the front andback of the glass in an ordinary mirror.

Page 16: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

16/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

We also mounted a piece of heat absorbing glass in front of the projector. This piece of glass absorbsheat, which prevents the projector from warming up the acrylic, and also acts as a filter to removeinfrared radiation that might otherwise be seen by the camera. We bought both the front side mirrorand the heat-absorbing glass from Surplusshack.com for about $13 total.

The Cabinet

Finally, there’s the cabinet—the structure that holds everything else together. The cabinet really onlyneeds to do one thing: support the screen (including the acrylic, the lights, and the vellum surface) insuch a location that's accessible to both the projector and camera. In an FTIR setup, the cabinetdoesn’t even need to be closed.

Page 17: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

17/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

Our cabinet is—essentially—a wooden cube with a square hole in the top and a removable frontpanel. The screen sits over the hole, held in place by a lip. Then, a wooden frame is placed on top,covering the wiring and exposing only the part of the screen that’s meant to be touched. Our cabinet isconstructed from 3/8” MDF, with a stained hardwood frame on top.

Next Page: Using open source software to run the rig

Page 18: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

18/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

Software

So now we’ve completed the hardware section. The process of building a multi-touch computer is farfrom over, though, we need to get the software installed and configured so that we can actually use thething.

The central software that powered our rig is Touchlib, an open source library which takes the visualdata received by the camera and parses it into touch events, which can be used by other programs toprovide multi-touch control. Some programs implement this library directly, allowing for standalonemulti-touch apps, while others, such as those written in ActionScript, require an extra software layer toallow the program to receive touch input. In this section, we’ll explain how we got both up and running.

But, there’s something else we had to take care of first. The PS3 Eye, as we mentioned earlier, is afantastic fit for this project because of its high resolution, impressive framerate, and ease ofmodification. There’s just one problem: it’s meant to be used on a PlayStation 3, not a computer.

Fortunately, PC users are famously unconcerned with what things are “meant to” do, and enterprisingmulti-toucher Alex Popovich has written a driver that allows the PS3 eye to be used with a computer.To get it working, we followed these steps:

1. Download the PS3EyeSetup file here. The download link is a ways down the page, in red, justabove the comments section.

2. Make sure that the modified PS3 Eye isn’t plugged into the computer, and then run the executable.Plug the PS3 Eye back in. If the Windows found new hardware wizard pops up, tell it to search fordrivers manually, and point it to the folder we installed the drivers in (C:/Program Files/AlexP/Drivers).

3. Now, we’ll want to test to make sure that the drivers are working and that our computer can see thePS3 Eye. To do this, run the PS3Eye Test App included with the driver. Because we’ve alreadymodified the camera, you probably won’t see anything on the screen unless we point the camera at asource of infrared light, such as a light bulb or a sunny window.

Page 19: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

19/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

4. Now that we know the camera works, we need to check to see that the DirectShow filter works,which will allow other programs to access the PS3 Eye. There’s another program called AmCapinstalled with the drivers. Run it, and if the preview view shows what the camera is seeing, we’regolden. If it doesn’t, try unplugging the PS3 Eye and plugging it back in, as well as rebooting yourcomputer. For reasons unknown, the first time we tried, we got stuck at this stage. For us, running theuninstall program, then installing the drivers again fixed the problem.

Now we'd gotten our PS3Eye up and running. Next, we had to get Touchlib set up to handle our touchdetection. Touchlib can be found here, and doesn’t need to be installed. We simply extracted the filesto C:/Multitouch.

We had to replace certain Touchlib files with ones specifically designed to work well with the PS3Eye. We downloaded these files here, then extracted them to C:/Multitouch/touchlib, overwriting whenwe were prompted to do so.

Page 20: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

20/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

Now, at long last, we’ll get to see how our surface actually works. We ran ConfigApp.exe fromC:/Multitouch/Touchlib. This program launches a total of eight windows, six of which are the videostream from the PS3 Eye, at different stages of processing. It’s a little over whelming the first time, butit’s actually not that hard to use these to get Touchlib properly configured to do touch recognition onour setup.

The most important window is the one in the bottom right, with the slider marked “Rectify” is the onethat’s most significant. This window displays the “blobs” that will get passed as touch events. Whenthe touch surface is working properly, this window will be entirely black until we touch the screen, atwhich point a white blob will appear, hopefully without flickering. Starting with the window in the bottomleft, and moving right, we adjusted all the sliders so that we got the clearest blobs when you touch thescreen. Generally, we accomplished this by playing with each slider until we started to get backgroundnoise on the Rectify window, then scaled it back slightly. Once you’re happy with the sensitivity of yourscreen, it’s time to calibrate.

Calibration is necessary to sync up the projected image and the touch surface. To calibrate, we firstpressed the Enter key. This enables full screen mode, and displays a grid of green crosses. To begincalibration, we pressed the ‘c’ key. One of the crosses on the display turns red. By pressing on thedot, Touchlib is able to map that point in projector space to a point in camera space. The next crosswill turn red, and this continues until all crosses have been pressed. We learned the hard way thatwhen you’re done calibrating Touchlib, you must press the escape key. If you close the program any

Page 21: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

21/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

other way, it won’t update the config file with your changes.

Now our surface had been be properly configured (at least until we moved the camera or projector, orthe lighting conditions changed significantly). To test it out, we ran the smoke.exe app in the Touchlibfolder. With everything calibrated properly, colored “smoke” particle effects were displayed on oursurface everywhere we touched.

However, we didn’t let ourselves celebrate for too long, because many apps written for the multi-touchsurface are coded in the ActionScript language used by Adobe Flash. These programs are not set upto natively use multi-touch data, so we had to use a software layer to allow the flash-based apps towork properly. This is a three step process:

1. Change Flash’s global security settings to allow the flash apps access to the touch data. Go to thispage and click the “Edit locations…” dropdown box, then select “Add Location,” then “Browse forfolders.” Browse to the folder containing the flash programs you want to run, which by default isC:/Multitouch/Clients. This only has to be done once.

Page 22: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

22/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

2. Run OSC.exe from the touchlib folder. This is an implementation of a protocol called OpenSoundControl, which was originally designed to allow musical instruments to interface with computers, butcan also be used to (among other things) allow programs to access multi-touch input data. This needsto be run any time you want to use a multi-touch flash app.

3. Run FlashOSCv2.jar (requires the Java runtime environment) from C:/Multitouch/Clients/flosc. Andpress the “start” button on the window that pops up. This program simply allows flash programs toaccess OSC data. This also has to be run every time you run multi-touch flash apps.

With that done, we were finally ready to try out the whole array of apps that have been written for DIYmulti-touch tables. There aren’t a ton of apps available right, but we were able to find enough to have agood time with the table. Some apps come with Touchlib, in the C:/Multitouch/Clients folder, and wealso recommend the AudioTouch apps, available at Seth Sandler's blog and the Multitouch MediaApp, by Laurence Muller.

Next Page: Conclusion and Bonus Gallery

Conclusion

Page 23: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

23/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

We completed this project over the course of about two weeks’ work. All said and done, everythingworked out pretty well. We ended up with a fully functional, highly responsive multi-touch surface. Justbecause we like to show off, we've included some extra pictures of the table in action below, and ofcourse there's the full video that we mentioned at the start of the article.

Still, during the project we discovered a lot of ways that we could do better a second time around.We’ve tried to incorporate those into this article as we’ve gone, but it’s important to understand thatthis is the sort of thing that’s very difficult to get totally right the first time. Even with all the resourcesavailable on the internet, there’s a certain element of trial and error inherent in a DIY project of thismagnitude. In other words, if you’re inspired to try a build like this yourself, don’t let the little setbacksget you down; perseverance is the most important part of any DIY project.

Page 24: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

24/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

Page 25: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

25/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

Page 26: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

26/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

��

Page 27: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

27/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

1 2 3 4 5 6 » Next

Tags: DIY features Hardware how-tos multitouch Surface Features

Enter Email » Submit

Also, send me e-mail announcements and special offers from MaximumPC and trusted partners.

More like this

How to Build Your Own 3D Camera Rig for Under $20

Psst! Want to Hack Your Hardware? Here's How!

How To: Connect Your PC to Your Surround-Sound Audio System

How to Build Your Own Hackintosh

193

Page 28: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

28/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

Comments

+ Add a Comment

Source URL: http://www.maximumpc.com/article/features/maximum_pc_builds_a_multitouch_surface_computer

Links:[1] http://www.maximumpc.com/user/atcastle[2] http://www.maximumpc.com/article/features/maximum_pc_builds_a_multitouch_surface_computer[3] http://www.vimeo.com/4030910[4] http://www.nuigroup.com[5] http://www.nuigroup.com/forums[6] http://dl.maximumpc.com/galleries/multitouch/multitouch1003.png[7] http://dl.maximumpc.com/galleries/multitouch/multitouch1004.png[8] http://www.tapplastics.com/[9] http://dl.maximumpc.com/galleries/multitouch/multitouch1005.png[10] http://dl.maximumpc.com/galleries/multitouch/multitouch1006.png[11] http://dl.maximumpc.com/galleries/multitouch/multitouch1007.png[12] http://www.maximumpc.com/article/features/maximum_pc_builds_a_multitouch_surface_computer?page=0%2C1[13] http://dl.maximumpc.com/galleries/multitouch/multitouch1008.png[14] http://www.environmentallights.com/categories/1303_2334/led-ribbon-flex[15] http://www.environmentallights.com/products/12310/38_Aluminum_DEEP_Channel_98_in_long_nickel[16] http://www.digi-key.com[17] http://dl.maximumpc.com/galleries/multitouch/multitouch1009.png[18] http://dl.maximumpc.com/galleries/multitouch/multitouch1010.png[19] http://dl.maximumpc.com/galleries/multitouch/multitouch1011.png[20] http://dl.maximumpc.com/galleries/multitouch/multitouch1012.png[21] http://www.flaxart.com/[22] http://dl.maximumpc.com/galleries/multitouch/multitouch1013.png[23] http://dl.maximumpc.com/galleries/multitouch/multitouch1014.png[24] http://dl.maximumpc.com/galleries/multitouch/multitouch1015.png[25] http://www.maximumpc.com/article/features/maximum_pc_builds_a_multitouch_surface_computer?page=0%2C2[26] http://dl.maximumpc.com/galleries/multitouch/multitouch1016.png[27] http://vimeo.com/2939528[28] http://dl.maximumpc.com/galleries/multitouch/multitouch1017.png[29] http://dl.maximumpc.com/galleries/multitouch/multitouch10018.png[30] http://dl.maximumpc.com/galleries/multitouch/multitouch1019.png[31] http://dl.maximumpc.com/galleries/multitouch/multitouch1020.png[32] http://dl.maximumpc.com/galleries/multitouch/multitouch1021.png[33] http://cgi.ebay.com/NIR-Optical-Filter-850DF20-11-5mm-painted-edge_W0QQitemZ160324304157QQihZ006QQcategoryZ15220QQtcZphotoQQcmdZViewItemQQ_trksidZp1742.m153.l1262?_trksid=p1742.m153.l1262[34] http://dl.maximumpc.com/galleries/multitouch/multitouch1022.png[35] http://dl.maximumpc.com/galleries/multitouch/multitouch1023.png[36] http://www.maximumpc.com/article/features/maximum_pc_builds_a_multitouch_surface_computer?page=0%2C3[37] http://dl.maximumpc.com/galleries/multitouch/multitouch1024.png[38] http://dl.maximumpc.com/galleries/multitouch/multitouch1025.png[39] http://dl.maximumpc.com/galleries/multitouch/multitouch1026.png[40] http://www.maximumpc.com/files/u57670/frontsidemirror.png[41] http://www.surplusshack.com[42] http://www.maximumpc.com/files/u57670/heatglass.png[43] http://dl.maximumpc.com/galleries/multitouch/multitouch1027.png[44] http://dl.maximumpc.com/galleries/multitouch/multitouch1028.png[45] http://www.maximumpc.com/article/features/maximum_pc_builds_a_multitouch_surface_computer?page=0%2C4[46] http://www.nuigroup.com/touchlib/[47] http://www.maximumpc.com/files/u57670/smokedemo.png[48] http://alexpopovich.wordpress.com[49] http://alexpopovich.wordpress.com/2008/10/02/sony-ps3eye-camera-directshow-capture-source-filter/[50] http://dl.maximumpc.com/galleries/multitouch/multitouch2001.png

Page 29: Build Your Own Multitouch Surface Computer

1/14/12 Build Your Own Multitouch Surface Computer

29/29maximumpc.com/…/maximum_pc_builds_a_multitouch_surface_computer…

[51] http://dl.maximumpc.com/galleries/multitouch/multitouch2002.png[52] http://nuigroup.com/touchlib/downloads/[53] http://alexpopovich.wordpress.com/2008/10/17/sony-ps3eye-camera-touchlib-directshow-and-more/[54] http://dl.maximumpc.com/galleries/multitouch/multitouch2003.png[55] http://dl.maximumpc.com/galleries/multitouch/multitouch2004.png[56] http://dl.maximumpc.com/galleries/multitouch/multitouch2005.png[57] http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html[58] http://dl.maximumpc.com/galleries/multitouch/multitouch2007.png[59] http://dl.maximumpc.com/galleries/multitouch/multitouch2006.png[60] http://ssandler.wordpress.com/[61] http://www.multigesture.net/2007/09/17/multitouch-media-application-v2-release/[62] http://www.maximumpc.com/article/features/maximum_pc_builds_a_multitouch_surface_computer?page=0%2C5[63] http://dl.maximumpc.com/galleries/multitouch/multigallery1.png[64] http://dl.maximumpc.com/galleries/multitouch/multigallery2.png[65] http://dl.maximumpc.com/galleries/multitouch/multigallery3.png[66] http://dl.maximumpc.com/galleries/multitouch/multigallery4.png[67] http://dl.maximumpc.com/galleries/multitouch/multigallery5.png[68] http://dl.maximumpc.com/galleries/multitouch/multigallery6.png[69] http://dl.maximumpc.com/galleries/multitouch/multigallery7.png[70] http://dl.maximumpc.com/galleries/multitouch/multigallery8.png[71] http://dl.maximumpc.com/galleries/multitouch/multigallery9.png[72] http://www.maximumpc.com/article/features/build_perfect_pc_stepbystep_illustrated_howto_guide[73] http://www.maximumpc.com/article/howtos/how_to_build_a_nas_box[74] http://www.maximumpc.com/article/howtos/keep_your_pcxboxps3appletv_from_overheating_a_closed_cabinet[75] http://www.maximumpc.com/tags/diy[76] http://www.maximumpc.com/tags/features[77] http://www.maximumpc.com/tags/hardware[78] http://www.maximumpc.com/tags/howtos[79] http://www.maximumpc.com/tags/multitouch_0[80] http://www.maximumpc.com/tags/surface[81] http://www.maximumpc.com/articles/features[82] http://www.maximumpc.com/user/login?&commentfragment=comments_top_anchor