Introduction: Mini-Multitouch Interface
Multitouch interfaces are surfaces that can register multiple 'touch points' at the same time,
meaning users can use natural hand movements to manipulate digital objects. Most multitouch systems also project the screen image onto the touch surface, making interaction more intuitive.
Since big multitouch systems are expensive to build, this instructable teaches you how to build a simpler and smaller multitouch system for $50-150 using easy to find parts. A Mini-Multitouch.
Mini-Multitouch works by the same principles as larger systems, and is handy for all sorts of hack-ish or art-ish uses (think fingerpainting, music-by-touch, or other gesture-based interactions).
This Instructable is being submitted as part of the "Win a Laser Cutter" contest on behalf of Make:Philly, in the hope that we might be able to kick off the creation of our new community workspace with the introduction of a shiny new laser cutter :)
Enjoy!
Difficulty: Intermediate (or intrepid beginner). Requires basic knowledge of soldering, use of hacksaw and utility knife, software installation, and following software tutorials. Passing familiarity with these topics and a willingness to learn will get you through this Instructable!
Build Time: 8-10 hours for an expert in above topics; 16-20 hours for beginner/intermediate.
Step 1: Parts and Preparation
Step one: get your parts! Below, you will find recommendations on where to purchase items from the materials list.
Tools:
hacksaw
knife
cordless drill and drill bits
soldering iron
T-Square
Materials:
Webcam (Phillips SP900 Recommended) - Available for purchase on the web
Windows PC (sorry Atari, the vvvv toolkit is Windows-only.)
4.3 x 4.3 mm Infrared (aka nightvision) lens - Available for purchase on the web
Infrared LED's (SFH485 recommended) - available from digikey.
A power supply (output 3.3v DC at 220mA recommended) - Available at most hobby/craft shops
Fast setting crazy glew (any brand, and get it in a brush on bottle) - Available at most hobby/craft shops
Sandpaper, 400 grit and 800 grit - Available at hardware store
Brass Polish - Available at hardware store
8 x 10 sheet of Lexan standard thickness (0.85) - Available at hardware store
8ft strip of "Tile Divider" - Available at hardware store
A cardboard box, at least 1.5 feet tall on one side (we used 1.5' x 1' x 1') - Available at hardware store (or just laying around!)
Small bits of wire. If you don't have wire laying around, get a small spool of 20 or 22 gauge wire, in both red and black.- Available at most electronics/hobby shops
Step 2: Prepare the Webcam to Detect Infrared Light
This step describes the setup of the webcam used to record the blobs of infrared light emitted when you touch the touch surface.
This mini-multitouch display relies on four LED lights to shine light into a sheet of Lexan, where it will bounce around without escaping, due to the index of refraction. This is called Total Internal Reflection. When pressure (such as that from a finger) is applied to the Lexan, it compresses a little, changing the index of refraction, and allowing the light to escapes. The places where the light escapes will only be where the surface is compressed, making nice glowing blobs where something is pressing on the Lexan.
This is where the webcam comes in! You can watch the blobs with a webcam, and with special software use them as input into your computer, like a mouse or keyboard.
For this project (and most multitouch displays) the light being used for touch detection is in the infrared range and the webcam must be modified to see in the infrared range. This is easily done by exchanging your existing webcam lens for one which can 'see' infrared light..
The LED used by the mini-multitouch interface, at 880 nm frequency, is within the range of 'night vision' surveillance cameras. You can swap your existing webcam lens for a 'night vision' lens, and you'll be ready to go. If you are using the recommended SPC900NC, you can use any 4.3MM x 4.3 MM CCTV Camera IR lens. Try searching e-bay or a local security camera shop.
Before removing the existing lens on your webcam, install the webcam software on your PC and test the webcam, to make sure the camera works. Note: it is critical to do this BEFORE voiding your warranty by opening it up and changing the lens! Once you've successfully taken a few pictures and ensured that the webcam works nicely, you are ready to switch the lens.
To replace the lens on the SPC900 camera (or other comparable cameras), you first need to pry off the ring around the lens using a screwdriver. Once that ring is gone, it is easy to replace the regular lens with a 'surveillance' lens by carefully (but firmly) unscrewing the lens.
The ring is just for looks, so you can put it back on, or leave it off. I
After you've swapped the lens, check the webcam to make sure it still works using the webcam software. You may also need to adjust the focus of the new lens. The images you get back from the webcam won't look like they do with a regular lens, this only means that it is working as expected.
Finally, if the camera has a built-in light to shine on what it's filming, cover the light with some duct tape to block it. If you don't, it will add some light 'noise' and will make your display have 'ghost' touch points.
Step 3: Build the Touchsurface Frame
This step covers the building of the frame that will house the Lexan, as well as the preparation necessary to mount the LED lights in the frame.
The best material I found for the frame is 'Tile Divider', which comes in 6- to 8-foot strips and can be purchased in the molding section of most home repair stores. See the images below for a visual description (rather than try to explain here!).
The frame will fit the Lexan very closely, so you can cut the Tile Divider exactly to size: cut two 8-inch strips, and two 10-inch strips. Once the strips are cut, you should use a T-Square to cut the ends of the short strips to bevel inward at a 45% angle. This will make them fit neatly and snugly as a frame around the Lexan.
You will be mounting the four LED lights on one 8-inch side of the frame. They need to be mounted so they are touching the Lexan through holes in the strip, and spread out evenly along the edge.
It is important to place the holes near the top of the strip, as shown below, so that the light shines into the edge of the Lexan only, and NOT down onto the camera below. Mark the locations of the four holes at about 1-inch, 3-inch, 5-inch and 7-inch along the edge of one 8-inch Tile Divider strip.
Because the Tile Divider is made of soft plastic, you'll need to drill the holes in several incremental sizes to avoid bending or warping the plastic too much. First, drill a small hole (1/16"), then drill one a little larger (9/64"). Finally, drill a 3/16" hole, which is the ideal size for the LEDs to fit through.
Step 4: Prepare the Lexan Touchsurface
This step covers the sanding and polishing of the Lexan touchsurface, for maximum light distribution.
To get the most light into the touch surface, one of the 8-inch edges of the Lexan touchsurface must be made very smooth (this is where the LEDs will make contact with the touchsurface). Ideally, you'll use three materials: 400 grit sandpaper, 800 grit sandpaper, and brass polish. If you don't have brass polish available, you can use just the 400 and 800 grit sandpaper, but the results will be less than spectacular.
Fold a piece of 400 grit sandpaper over a block of wood (or even a small paperback book), and run it back and forth three or four times along one 8-inch edge of the Lexan touchsurface. You should see small white flakes coming off. Repeat this with the 800 grit sandpaper. After each pass with the sandpaper, you should be able to see that the scratches and blemishes on the edge of the Lexan are growing smaller and smaller: this indicates that you're doing a proper job (and isn't that encouraging!). After sanding down the blemishes and bumps, polish the edge of the Lexan (only the edge!) using your brass polish (follow the instructions on the brass polish container).
Admire how smooth and shiny your Lexan edge has become.
Step 5: Fit the Frame to the Touchsurface, Mount the LEDs
This step covers the installation of the Lexan touchsurface and LED lights into the frame built in Step 3 of this Instructable.
Before permanently affixing the frame to the Lexan, check to ensure the frame fits the 8-inch by 10-inch Lexan touchsurface by sliding the Tile Divider strips (from Step 3) onto the edges of the touchsurface: it should fit nice and snug in its happy new frame. Also, check to be sure that there are no plastic burrs left in the Tile Divider from drilling the LED holes, as these can make the frame fit poorly. Once you've checked the fit, it's time to glue the frame and the Lexan together into a single unit.
Remove the Tile Divider frame, and peel the protective covering back about one inch back from the edges of the Lexan, taking care not to remove it completely. Then, slide the frame back onto the Lexan, without the covering in between the two. Be sure that the frame section that has the LED holes is put on the Lexan edge that was polished smooth!
When all the sides of the frame are on adjusted to your liking, use some crazy glue (or any glue) to glue the corners of the frame to each other. Try to glue frame sections to each other not to the Lexan. If some glue gets on the Lexan, it's not a big deal and shouldn't affect your touchsurface.
Now that the frame is mounted to the Lexan, it's time to mount the LEDs to the frame.
Before permanently gluing the LEDs through the holes in the frame) try a few test runs to make sure you have them positioned properly. For best quality 'blobs' the LEDs shouldn't face straight into the edge of the Lexan, they need to be mounted at a slight angle to the edge of the Lexan: about 20-30 degrees angle off of horizontal (see image for more detail). The angle will help make the light the escapes where the Lexan is compressed brighter and clearer.
To position the LEDs for easier wiring later: be sure to mount all of the LEDs so they are rotated to have the ground pin (the longer pin) on the top.
Once you are satisfied with the angle and position of the LEDs, mount them permanently in the frame by holding the LED in place and applying crazy glue around the outside of the LED where it touches the frame. Hold those LEDs in place until they dry completely! (This is why we recommend using crazy glue).
Now that the LEDs are in place, it's time to start doing the wiring.
Step 6: Wiring the LEDs
This section covers all of the wiring you have to do, and covers connecting the LEDs to a power source.
We recommend using 1.5 V 100 mA LEDs, and for the purposes of this Instructable assume you are using a 200mA 3.3V DC power supply (such as a 'wall wort' or hobby power supply). You may need to adjust the wiring of your LEDs based on what power supply you have -- check with someone familiar with electronics if you are not sure how to adjust your wiring.
Solder the LEDs together as shown in the picture below... if you need some practice with soldering, do a test run using some LEDs that are NOT glued into the frame. To test the LED wiring, connect the power supply and point them towards the (IR-filtered) webcam. Run your webcam software: if the webcam is picking up the infrared light, you should see a bright red light on the webcam display (although you won't see any light coming from the LEDs themselves, cause it's infrared!).
Now back to the mini-multitouch display. Once you've wired up the LEDs using your soldering iron (according to the diagram below), point the IR-filtered webcam at the mini-multitouch box from above. Run your webcam software now if you do not already have it running: you should see a glow on the webcam display, along the frame when the infrared LEDs are mounted (but, again, you won't see any light from the actual LEDs!). If you can't see the glow you will need to check your wiring, and possibly consult someone familiar with electronics if you aren't sure how to fix the LED hookup.
A quick note: the glow described above is light-leak, and it is undesirable: we will be taking care of that in the next step so that the only infrared light emitted from the touchsurface is the light that comes from touching it. But, for now, it is a good way to check that your LEDs are wired correctly.
You are so close to having a mini-multitouch display!
Step 7: Finish the Touchsurface, Position the Webcam
This is the last step in the hardware build.
Some light from the LEDs will tend to glow upwards and downwards instead of directly into the Lexan, and that extra glow (light-leak) can cause problems. This extra light can bounce off nearby objects such as walls, screens, ceilings, etc., creating areas of infrared glow that will show up on your webcam display as false touch points. The best way to fix this problem is to add a little extra opaque material above and below the edges of the Lexan touchsurface to block this up-glow and down-glow.
Cut a flat 8-inch by 10-inch frame mat out of cardboard, approximately 1-inch thick and sized to fit just below the touch surface. The inside dimensions of this mat should be 6 by 8 inches, making it basically a rectanglular border 1-inch thick that fits snugly into the space right below the Lexan. If these directions are unclear, take a look at the expanded diagram in Step 5, which includes a drawing of this cardboard mat. This will take care of the down-glow.
Repeat the process on the top side of the touchsurface to block up-glow. If you have the time, it looks more professional to use something nicer looking (like some floor or ceiling edge molding) for the up glow blocker, but we just used a second cardboard mat and it works just fine! At this point, you have a touchsurface sandwich, with the Lexan and frame in the middle, and the up-glow and down-glow blockers on the top and bottom, fit snugly into place and held there by crazy glue if desired.
To finish your hardware setup, you just need to place the webcam. It needs to sit approximately 1.5 to 2 feet from the touch surface, pointing at the 'bottom' side of the Lexan (eg. the side not being touched). You can accomplish this by using a cardboard box. Stand the box up so that its height is 1.5 to 2 feet (which side you stand it on will depend on how big your box is). Your webcam will sit inside the box, and your touchsurface will sit on top of the box, so you will need to cut a hole in the top of the box that is approximately the size and shape of the exposed portion of the Lexan (only the exposed portion, not the entire frame!). See the image below for a visual example.
Run the webcam cord out of the box, set the touchscreen on top, and admire the beauty of your completed hardware setup! Now you can peel that protective coating off of the Lexan, if you haven't done so already.
Congratulations! You have finished the hardware for your Mini-Multitouch! If you run your webcam software, you should be able to see the touch surface light up where you put pressure on it, ideally with your fingers.
On to the last step: software.
Step 8: Set Up Vvvv Toolkit and Play!
This final step describes the software setup used to interact with your multitouch display.
Now it's time to start using your new mini-multitouch system! The easiest way to start is to work using the 'vvvv' graphics toolkit. The vvvv toolkit is available freely, for non-commercial uses. Unfortunately, because it is based on Microsoft's DirectX software (for speed), vvvv is only available for Windows. Our apologies!
To obtain a copy of the vvvv toolkit, go to the vvvv vvvv download page and unzip the package to a directory of your choice (I recommend c:\Program Files\vvvv as the prefect place).
vvvv has no install or setup program, you simply run vvvv.exe when you want to run vvvv. You will see a swaying tree demo by default upon running vvvv - this is where you can launch the tutorial and get a feel for what vvvv is capable of, and what it can be used for. We recommend starting with this tutorial! And, a bit of troubleshooting advice: if you get a 'dll error' when you try to run vvvv.exe, you probably need to upgrade DirectX on your machine to version 9.0c or newer.
Once you have run through the vvvv tutorial, follow the links below and do the first two (short) vvvv tutorials before continuing. The vvvv Tutorial Introduction and the Hello World Tutorial will teach you most of the basic skills you need for using vvvv, and are very highly recommended.
Once you've run those two tutorials, you have one last step before experiencing mini-multitouch magic! It's time to check that your webcam is working with vvvv. You can test whether or not vvvv automatically detects your webcam using the vvvv VideoIn Tutorial. This tutorial comes with instructions on how to test your webcam in vvvv: follow these instructions! Before going on to the final step, use the VideoIn Tutorial to make sure that you are getting images and that your camera is generally working with vvvv properly. If your camera is not working with vvvv, go to the vvvv forums and seek help with setup and configuration.
If you have gotten this far, you finally have all of the pieces working, built, and installed: it's time for the payoff. Download the Touch_demo_3.v4p file and robot_image.jpg (located at the bottom of this Instructables page) to your desktop: these two files are a simple mini-multitouch demo we created based on the hardware setup you've just built. If you already have vvvv running, you can run Touch_demo_3.v4p just by clicking on it. In Touch_demo_3, like in VideoIn Tutorial, just connect the VideoIn connector to run the program.
After connecting up the VideoIn, you should see two display windows in the vvvv user interface: one window will display the infrared 'blobs' that are emitted when you put pressure on the touchsurface, and the other window shows a video feed, where each blob has been replaced by an image (robot_image.jpg - the file you downloaded a few paragraphs back). You may want to start tinkering with vvvv and your mini-multitouch by replacing our robot image with an image of your own choosing, by editing the Image node in the vvvv interface.
Another troubleshooting note: if the window displaying the infrared 'blobs' appears all-black or all-white whether you are touching the touchsurface or not, change the threshold levels in input pin 2 on the Contour node of the vvvv interface (for this step, we assume you've done the vvvv tutorials, and both know where the Contour node is, and how to change the threshold. If you do not, go back and complete the tutorial!). Since vvvv runs in real-time, you can see your changes take place in the display windows immediately. This makes for quick and fun experimentation (hint, hint)!
'Tada! You now have a mini-multitouch interface. You can manipulate those infrared 'blobs' in your vvvv display to behave in myriad ways: the outputs from the vvvv Contour node give you all sorts of great 'blob' data to use in creating your own mini-multitouch toys.
