12:29 AM
endsofuniverse
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 now.
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!
First, some acknowledgments are in order. Virtually all the techniques used to create this table were discovered at the Natural User Interface Group website, which serves as a sort of repository for information in the multitouch hobbyist community. If you find the technology shown in this article interesting, you owe it to yourself to check out their forums, where you can participate in the development 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 just how it works.
There are several different ways to make a multi-touch surface, but we’ll focus on the one that we employed: the FTIR screen. An FTIR (short for Frustrated Total Internal Reflection) setup involves three vital components: a sheet of transparent acrylic, a chain of infrared LEDs, and a camera with an IR filter. The LEDs are arranged around the outside of the sheet of acrylic so that they shine directly into the thin side surfaces.
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 wholly maintained 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, through the acrylic and into the cabinet, where it is detected by the webcam. This effect, called frustrated total internal reflection is a little complicated, and involves something called an evanescent wave, but you don’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 white spots on the screen; something like this:
From that picture, software running on a nearby computer extracts a map of where fingers have been pressed 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, the LED lighting, and the projection surface. Each one requires a bit of work, so we’ll discuss them one by one.
The Acrylic
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 right optical properties, allowing for an excellent FTIR effect. Additionally, it’s lightweight, strong, and very clear (more so than glass).
We constructed our screen from a 24” X 30” X 3/8” acrylic sheet, which we bought at local plastics dealer TAP plastics. Acrylic can also be purchased on the web, although high shipping costs mean that it’s best to try and find a local plastics dealer. For a 24” X 30” sheet, 3/8” is thick enough to prevent any noticeable sagging in the sheet, even when firm pressure is applied to the middle of the screen. 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 we wanted to shine infrared light into the acrylic from the sides, we needed to do something to guarantee a clear edge. We had two options:
1. Buy laser-cut acrylic. Most large plastics stores will have the capability to do this, though they generally charge extra. Because we here at Maximum PC always have our mind on our money and our 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 a thorough sanding with 200-grit sand paper, then went back over each edge with Dremel rotary tool using the buffer attachment and a polishing agent. This certainly took a little while, and involved inhaling more acrylic dust than is probably healthy, but the result was a nice, clear edge.
The Lights
The array of infrared LEDs is what floods the acrylic with light and creates the vital FTIR effect. The exact construction of the array can differ greatly from one table to the next: which LEDs to use, how far apart to space them, how many sides of the screen to wire were all variables we had to consider. For our table, we decided to cover all four sides with LEDs spaced just a little more than an inch apart.
Like with the acrylic, there is an easy way and a hard way to connect the LEDS. The easy way is to buy premade infrared LED ribbons. Right now, the only source for IR LED strips that we could find was a company called Environmental Lights. These strips can be installed around the edges of the acrylic using an aluminum channel such as this one. Both the Ribbon and the channels run on the pricey side.
The hard way is to buy LEDs in bulk and solder them yourself. Once again, because we were committed to putting this project together on as tight a budget as possible, we opted to go for the cheaper option. We bought 110 IR LEDs (850nm wavelength, not 940nm—it’s easier for the camera to 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 is soldering 96 LEDs together tedious to begin with, but the LEDs’ leads had an unpleasant tendency to break under even slight force, requiring quite a bit of LED repair work. Also, even though our table worked just fine in the end, we would probably try to use even more LEDs in a future build. Because the premade ribbons pack more LEDs per inch and are much easier to use, we would probably go with 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 power supply to run them, we soldered the LEDs in chains of 8 (for a total 12V drop), then wired 12 chains up in parallel (leaving us with a handful of spare LEDs, which is absolutely vital). To make it easier to solder, we drilled 8 holes in a line in a piece of scrap wood, just big enough to hold the LEDs in place as we soldered them together.
There are different ways the LEDs can be mounted around the acrylic. Some people choose to drill holes into an aluminum or wood strip in order to make a frame to hold the LEDs in place. Since we were committed to doing things on the cheap, and also on a very tight schedule, we simply used electrical tape to hold all the LED chains in place, three on each side, shining into the acrylic. Sure, it’s not the prettiest solution in the world, but it was effective, and because the outer two inches of the acrylic are covered by wood, the tape doesn’t show up on the finished screen.
The Surface
Now we’ve got our acrylic, and the LEDs are set up to shine into it, but our setup has still has two problems.
For one, acrylic is very clear. More so than glass, even. This is nice if you’re building a window out of Plexiglas, 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 a 36” by 24” sheet for about 5 bucks at San Francisco art supply superstore FLAX. If you don’t live near a huge art store, you might have to do some calling around to find a sheet, or you can order them online, 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 the build, we would like to experiment with having the vellum laminated before using it as a construction material.
The other problem with the acrylic surface isn’t really noticeable until you turn on the lights and camera and watch what happens when you actually touch the screen. On the bare acrylic, or the acrylic with the vellum, 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 disappears completely. 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 very rough, 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 and allows more to escape down into the camera.
To create the compliant surface, we first taped the vellum to a flat surface with painters tape, then applied silicon onto the sheet with a caulk gun in a loose grid. After that, we quickly used a dense foam paint roller to spread the silicon evenly across the vellum. We waited about an hour for the silicon to set, then repeated the process. We waited another hour, then applied a third and final layer. As an experiment, we also readied an additional sheet of vellum with only a single coat of silicon. During our testing we found that the 3-coat compliant surface created a dramatically more responsive surface.
The Camera
In order for our setup to work, we needed a camera that senses infrared light, but not visible light. It sounds expensive, but you’d be surprised. In this section, we’ll show you how we created an IR camera with excellent resolution and frame-rate for only $35—the price of one PlayStation 3 Eye camera. “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 that this is the case, try this simple experiment: First, find a cheap digital camera. Most cell phone cameras are perfect for this. Next, point it at the front of your TV’s remote control. Then, while watching the camera’s display, press the buttons on the remote. You’ll see a bluish-white light that is invisible to the naked eye. That’s the infrared light used by the remote to control the TV.
However, for the sake of preserving an accurate color balance, most cameras have an IR filter applied, 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. To do this, we started by flipping it over and popping off the four little black disks glued over the screw wells. We had seen this done using an X-Acto knife in this excellent video, but when we tried to recreate the feat ourselves we didn’t manage to do anything except snap the tip off our X-Acto's blade. Instead, we found that using the corner of a regular rectangular razor blade to pry the disks off was 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 to use a process that involved going around the seam that joins the two halves of the camera, inserting a flathead screwdriver and twisting every centimeter or so, until the halves separated.
With the back half of the shell removed, the circuit board is exposed. First, we removed the two screws at the bottom, labeled (a), allowing us to removed the camera’s base, then we unscrewed the five screws labeled (b) and separated the circuit board from the front casing. Finally, we removed the two smaller screws that had been hidden behind the camera's base, freeing the lens from the board and 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, it looks ruby red – a dead giveaway that this is the piece filtering out infrared light. In order to remove it we simply used a razor blade to gouge out the plastic in a circle around the filter, allowing us to easily pop it out.
So now the IR filter is gone, but we need a visible light filter to replace it with. You can buy fancy IR bandpass filters off the internet, which will give the best results, but it’s also possible to make a very passable (no pun intended) filter out of the magnetic tape inside of a floppy disk, or a couple of pieces of exposed film negatives. We went with the magnetic tape method, and (after a few false starts) were able to cut a square that fit nicely into the square space between the lens assembly and the image sensor. We reassembled the PS3 eye, now converted into an IR-only camera.
The PS3 Eye camera has two focus settings, for a wide or narrow field of view, which can be selected by twisting the plastic ring around the lense. It’s worth noting that the removal of the IR filter messes up the focus of the PS3 Eye slightly, and we found out through trial and error that in order to get it to focus sharply, we had to twist the focus ring very slightly, so that it was “balanced” between the two settings that it normally snaps to.
The Computer
For the build we used a small form factor computer we had laying around. With a Core 2 Duo and 2 GB of memory, it's harrdly a beast of a system, but still this computer ran all the multitouch software we tried just fine, so most any computer from the last couple years probably would work as well.
Note that we also could have run the cables for the PS3 Eye and the projector out of the cabinet, which would have allowed us to run the system off of a laptop, eliminating the need for a dedicated PC, but making 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, we cut 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 power supply through an empty expansion slot and out of the case, plugging it in to the Molex connector.
The Projector
Like the computer, the projector we used for the build was something we scavenged up. The major concern for a projector to use in this kind of system is throw distance—the ratio between projection distance 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 and aimed 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 borrowed from a friend. Because of the longer throw distance on this model, we had to mount the projector near the top of the cabinet, facing down, and use a mirror to reflect the image up onto the screen. For this we ordered a front-side mirror (a mirror with the reflective surface on the front of the glass, rather than behind it) to eliminate any potential “ghosting” problems, caused by dual reflections from the front and back of the glass in an ordinary mirror.
We also mounted a piece of heat absorbing glass in front of the projector. This piece of glass absorbs heat, which prevents the projector from warming up the acrylic, and also acts as a filter to remove infrared radiation that might otherwise be seen by the camera. We bought both the front side mirror and 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 only needs to do one thing: support the screen (including the acrylic, the lights, and the vellum surface) in such a location that's accessible to both the projector and camera. In an FTIR setup, the cabinet doesn’t even need to be closed.
Our cabinet is—essentially—a wooden cube with a square hole in the top and a removable front panel. 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 is constructed from 3/8” MDF, with a stained hardwood frame on top.
Software
So now we’ve completed the hardware section. The process of building a multi-touch computer is far from over, though, we need to get the software installed and configured so that we can actually use the thing.
The central software that powered our rig is Touchlib, an open source library which takes the visual data received by the camera and parses it into touch events, which can be used by other programs to provide multi-touch control. Some programs implement this library directly, allowing for standalone multi-touch apps, while others, such as those written in ActionScript, require an extra software layer to allow 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 a fantastic fit for this project because of its high resolution, impressive framerate, and ease of modification. 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 enterprising multi-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, just above 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 for drivers 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 the PS3 Eye. To do this, run the PS3Eye Test App included with the driver. Because we’ve already modified the camera, you probably won’t see anything on the screen unless we point the camera at a source of infrared light, such as a light bulb or a sunny window.
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 AmCap installed with the drivers. Run it, and if the preview view shows what the camera is seeing, we’re golden. If it doesn’t, try unplugging the PS3 Eye and plugging it back in, as well as rebooting your computer. For reasons unknown, the first time we tried, we got stuck at this stage. For us, running the uninstall 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 touch detection. Touchlib can be found here, and doesn’t need to be installed. We simply extracted the files to C:/Multitouch.
We had to replace certain Touchlib files with ones specifically designed to work well with the PS3 Eye. We downloaded these files here, then extracted them to C:/Multitouch/touchlib, overwriting when we were prompted to do so.
Now, at long last, we’ll get to see how our surface actually works. We ran ConfigApp.exe from C:/Multitouch/Touchlib. This program launches a total of eight windows, six of which are the video stream from the PS3 Eye, at different stages of processing. It’s a little over whelming the first time, but it’s actually not that hard to use these to get Touchlib properly configured to do touch recognition on our setup.
The most important window is the one in the bottom right, with the slider marked “Rectify” is the one that’s most significant. This window displays the “blobs” that will get passed as touch events. When the touch surface is working properly, this window will be entirely black until we touch the screen, at which point a white blob will appear, hopefully without flickering. Starting with the window in the bottom left, and moving right, we adjusted all the sliders so that we got the clearest blobs when you touch the screen. Generally, we accomplished this by playing with each slider until we started to get background noise on the Rectify window, then scaled it back slightly. Once you’re happy with the sensitivity of your screen, it’s time to calibrate.
Calibration is necessary to sync up the projected image and the touch surface. To calibrate, we first pressed the Enter key. This enables full screen mode, and displays a grid of green crosses. To begin calibration, we pressed the ‘c’ key. One of the crosses on the display turns red. By pressing on the dot, Touchlib is able to map that point in projector space to a point in camera space. The next cross will turn red, and this continues until all crosses have been pressed. We learned the hard way that when you’re done calibrating Touchlib, you must press the escape key. If you close the program any 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, or the lighting conditions changed significantly). To test it out, we ran the smoke.exe app in the Touchlib folder. With everything calibrated properly, colored “smoke” particle effects were displayed on our surface everywhere we touched.
However, we didn’t let ourselves celebrate for too long, because many apps written for the multi-touch surface are coded in the ActionScript language used by Adobe Flash. These programs are not set up to natively use multi-touch data, so we had to use a software layer to allow the flash-based apps to work 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 this page and click the “Edit locations…” dropdown box, then select “Add Location,” then “Browse for folders.” Browse to the folder containing the flash programs you want to run, which by default is C:/Multitouch/Clients. This only has to be done once.
2. Run OSC.exe from the touchlib folder. This is an implementation of a protocol called OpenSound Control, which was originally designed to allow musical instruments to interface with computers, but can also be used to (among other things) allow programs to access multi-touch input data. This needs to 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. And press the “start” button on the window that pops up. This program simply allows flash programs to access 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 DIY multi-touch tables. There aren’t a ton of apps available right, but we were able to find enough to have a good time with the table. Some apps come with Touchlib, in the C:/Multitouch/Clients folder, and we also recommend the AudioTouch apps, available at Seth Sandler's blog and the Multitouch Media App, by Laurence Muller.
Conclusion
We completed this project over the course of about two weeks’ work. All said and done, everything worked out pretty well. We ended up with a fully functional, highly responsive multi-touch surface. Just because we like to show off, we've included some extra pictures of the table in action below, and of course 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 that this is the sort of thing that’s very difficult to get totally right the first time. Even with all the resources available on the internet, there’s a certain element of trial and error inherent in a DIY project of this magnitude. In other words, if you’re inspired to try a build like this yourself, don’t let the little setbacks get you down; perseverance is the most important part of any DIY project.
0 comments:
Post a Comment