Touch Screen Coffee Table DIY With 32 TV and Low C

Download as pdf or txt
Download as pdf or txt
You are on page 1of 23

technology workshop craft home food play outside costumes

Touch Screen coffee table DIY with 32" TV and low cost CCD sensor
by jeanotP1314 on January 7, 2016

Table of Contents

Touch Screen coffee table DIY with 32" TV and low cost CCD sensor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Intro: Touch Screen coffee table DIY with 32" TV and low cost CCD sensor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Step 1: How does it work ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Step 2: Part list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Step 3: CCD Reverse engineering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

File Downloads . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Step 4: Building a touch screen : Basic electronic design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

File Downloads . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Step 5: Building the touch screen : find a precise X Y position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Step 6: Building a touch screen : Improve design and multi-point . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Step 7: Electronic connection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Step 8: Arduino Teensy software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

File Downloads . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Step 9: Speed optimization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Step 10: Raspberry Pi Python GUI Touch interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

File Downloads . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Step 11: Build the surface, playing with plexyglass and mirror . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Step 12: Build the wooden enclosure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Step 13: Final program, let's play! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Step 14: How to improve the project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Step 15: Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Related Instructables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Advertisements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Author:jeanotP1314 author's website
Born in the Alps, I love travelling, paragliding, trekking and, of course, designing projects. :) I learned a lot from open source project on the last few years, i
am very happy to inspire new people with my work now!

Intro: Touch Screen coffee table DIY with 32" TV and low cost CCD sensor
Hi and welcome to my third Instructable !

I have been reading about DIY touch screen table projects for a while now, and I find most of them very complicated. Often They imply using a videoprojector, reflection
mirror and IR camera. The result gives you a complete multi touch screen solution, but you need some depth for the videoprojector to have a big screen. Not the best
solution for a coffee table...

I made this tutorial to help people to build their own touch screen solution based on any flat screen TV. It uses light triangulation technology to read the coordinates.
This method is quite cheap ( the priciest part is the TV), with a good quality image and you can make the table almost as small and as thin as your TV is.

Of course, nothing is perfect and with this solution it's not possible to build a 100% multi-touch screen and it's hard to cover the entire screen area. But depending on the
way you make it you can have some interesting results. Plus, I am sure there are a lot of possibilities I haven't thought about to improve this.

Image Notes
1. In mouse mode, the cursor is following the finger.

Image Notes
1. The engraving from a laser cutting machine.

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Step 1: How does it work ?
This solution implies the use of light triangulation to read a very precise coordinate. Basically, it's like having a huge number of IR receptors with some IR LED. You turn
on every LED one by one and read the sensors. When one receptor can't see any light, it means that an object is blocking the light. With enough LED and sensors you
can get a much more precise solution.

But for this project, I was looking for something more suited for the reading. A CCD sensor, is in every scanner. In those devices, it's basically a black and white camera
which reads only one line of pixels. To scan a color document, a RGB LED blink in the three colors and the CCD reads all of them for every line of the document. Then it
can calculate the exact colors depending of the Red Green and Blue reaction.

Using a CCD sensor gives you access to 2700 light sensors on a 20cm line. Most people who take sensors and actuators from an old printer/scanners only take the
RGB LED and the light conductor from this part, as we can see here. If you like recycling, you could examine the possibilities of CCD. Not having found many DIY
projects on the internet using them, there are probably a lot of different ways with which you could use these sensors! In this tutorial I will also explain how to hack your
own scanner.

For this touch table, I used one CCD sensor with 24 IR LEDs. The object is detected on a 740x380mm surface by a Teensy board (which works under Arduino
environnement). This board turns the IR LED ON, reads the CCD and calculates the exact position of an object. Then it sends the coordinates to a Python program or
as a mouse on a Raspberry Pi which shows the interface through the HDMI on a 32" TV screen.

Step 2: Part list


When I am working on a project, I like to build things that are the most cost efficient possible but still of good quality. So even those on a tight budget can afford to build
their own. It's hard to give the exact amount of money spent, as many things are second hand or from the tip. Here is an approximation :

Electronic :

Raspberry Pi (41$). I built my project with a Pi 2, but the B+ should also be fast enough.

Teensy 3.X (20$). I love building projects with my Arduino UNO. But the specifications of this tiny Teensy board are really crazy! (32 bits cortex M4, 72MHz, 256K
Flash, 64K RAM, 34 digital PIN...). I think it's very useful to keep one at home. If one of your projects needs more PIN, more memory, more speed or just needs to
be smaller, you can easily switch as it's fully Arduino compatible! Just install the Arduino plug-in and keep developing! The only little thing you have to be careful
of is the access to the button to reprogram. I had to wire an external button when the table was built and I still needed to calibrate and debug.

The CCD sensor. You can easily get one from any old scanners which can be found everywhere :)

LED IR (0.1$). I used some 950nm.

The TV. It's hard to give a price, mine is a LG 32" that I bought second hand for 80$.
http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Wire

resistor

Computer Fan. You can find some in most old computers, you don't need to buy one.

Male and female headers

Some parts can be a bit difficult to solder, I recommend having a good soldering iron. At home I have been using a WS81 from Weller. A bit expensive to buy but it's
precise and you can keep it for 20 years ;-)

The wooden box and table :

This part is gonna depend on your TV screen. This is what I use to pack my 32" LG :

The TV box :

2 panels of medium wood 10mm for the sides : 140 x 845mm


2 panels of medium wood 10mm for the sides : 140 x 560mm
1 panel of medium wood 10mm for the top : 950 x 650mm
1 panel of medium wood 3mm above the top : 950 x 650mm
1 panel of Pine wood 18mm under the TV : 825 x 560mm
2 large Framing lumber supporting the TV : 37 x 54mm (300mm long)
Small Framing lumber to ease the screw 15 x 20mm
Screws

The Table under :

1 panel of medium wood 18mm for the top of table : 670 x 350mm
1 panel of medium wood 10mm for the layer under the table : 670 x 350mm
A very large framing lumber for the table's feet 37 x 54mm, 280mm long(2 for each feet)
Screws

Approximate cost of the wood 70$

I also used a Trotec laser cutting machine to engrave some characters on it and to cut several small parts of the wood. You can rent it for 25$ an hour from the Fablab
next to my place. As I often help them on electronic projects I can sometime have it for free :-)

Touch detection :
1 Plexyglass 5mm for the support : 750 x 460mm
2 Plexyglass 2.5mm, 735 x 12mm
1 Plexyglass 2.5mm, 430 x 12mm (protecting the sensor)
1 Plexyglass 5mm, 430 x 12mm (with the LED on it)
8 mirrors 150 x 15mm (approximately as it's hand cut)
To create a IR lighting paper filter I combined a 106 primary red paper filter with a 181 congo blue paper filter
black masking tape

Image Notes
1. Teensy Board

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Step 3: CCD Reverse engineering
As Wikipedia is way better than me on explaining :

"A charge-coupled device (CCD) is a device for the movement of electrical charge, usually from within the device to an area where the charge can be
manipulated, for example conversion into a digital value. This is achieved by "shifting" the signals between stages within the device one at a time. CCDs
move charge between capacitive bins in the device, with the shift allowing for the transfer of charge between bins.

The CCD is a major piece of technology in digital imaging. In a CCD image sensor, pixels are represented by p-doped MOS capacitors. These capacitors are
biased above the threshold for inversion when image acquisition begins, allowing the conversion of incoming photons into electron charges at the
semiconductor-oxide interface; the CCD is then used to read out these charges. Although CCDs are not the only technology to allow for light detection, CCD
image sensors are widely used in professional, medical, and scientific applications where high-quality image data is required. In applications with less
exacting quality demands, such as consumer and professional digital cameras, active pixel sensors (CMOS) are generally used; the large quality advantage
CCDs enjoyed early on has narrowed over time."

Basically, the CCD you find in a scanner doesn't read lights in two dimensions, but on one line. With the one I tried, there are 2700 different light detectors that we can
use as 2700 pixels on a X position.

As I couldn't find any tutorials explaining how they work on the internet, I tried to understand the logic by myself. I started by taking a printer scanner from the trash and
opening it. Please be very careful with these devices, they use 220V! Don't do it if you are not sure of what you are doing. Always manipulate them when it's
not plugged in and isolate any high power part.

By visually checking all the lines going from the control board to the CCD you can try to identify the 3 lines controlling the RGB LED, they are generally located at the
extremity of the CCD board. With a multimeter, you can check where those lines are going on the communication flex.

Then you can then check if some lines are bigger than others (it's probably going to be the power and the ground, you can verify which one it is with your oscilloscope
when the power is ON). Plug an oscilloscope between the other lines and the ground to understand what they are doing.

I tried two CCD sensors from different brands and they where both using the same communication protocol but not on the same "line order on the flex". When I turned the
scanner ON, I could see some data passing. It means that the device was probably testing the sensor when it is turned ON.

- One line was giving a perfect square signal, I deduced that it was a signal clock.

- One signal was turning ON and OFF at the beginning of the clock transmission, it's the Latch signal

- one signal was sending a lot of analog value. Those values changed when I was passed my hand next to the sensor. It is the values from the CCD.

So I made a test program the on a Arduino UNO board. You can download it at the end of the step

With this, you can read on the serial port 16 average values of 168 pixels of the sensor, so almost 2700 pixels. Just plug in the lines as explained at the beginning of the
above file on any Arduino board and read the data on the serial monitor.

Image Notes Image Notes


1. Reading the data on the CCD sensor 1. Reading the CCD with one small wire on it
2. Here the power part was well isolated

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Image Notes
1. The analog output. We can see the small wire from the picture before

File Downloads

CCD_Arduino_Serial.zip (882 bytes)


[NOTE: When saving, if you see .tmp as the file ext, rename it to 'CCD_Arduino_Serial.zip']
Step 4: Building a touch screen : Basic electronic design
Now we have a working CCD sensor with Arduino, we can start building our first touch screen:

You can take the glass from the scanner to use it as the surface. On one side you add the sensor and on the other side a IR LED. Power the LED (don't forget to add a
resistor depending on the spec!) and start reading the sensor, you will see that a part of the serial data will raise. On a 10 bit ADC like the one on Arduino, the range
value is 0 to 2^10=1024. On my test, my value is going to be between 550 to 980.

Two important things :


Any other light can disturb this experience, especially sunlight! So close your curtains, don't point any light directly to the sensor and ideally, add some black tape
around your sensor.

Most LED have a very small emitting angle (around 20°). Don't be to surprised if only a part of your sensor sees the light, it just means that the LED is too close!

To visualize this I made a little processing program that you can download at the bottom of this step. This program shows 20 different cluster of the CCD sensor. If the
average analog value of the zone is close to 1024, the cluster is white. If it is lower it gets darker. As Processing needs to communicate with "Serial.write" data and not
"Serial.print" like the Arduino Serial port, you need to upload this new Arduino code on your board.

Now, if you put your finger between the LED and the sensor, you should see the cluster getting darker. Congratulations! You have made your first touch interface!! Now
you can detect the area where your finger is, not very precise, but functional!

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Image Notes
1. Basic touch detection. The Three LEDs are all ON

Image Notes
1. With Processing we can see the result
2. With Processing we can see the result

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Image Notes
1. I made a lot of test on the sensor before building the project. Here was for the
distance
2. I made a lot of test on the sensor before building the project. Here was for the
distance
3. I made a lot of test on the sensor before building the project. Here was for the
distance

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Image Notes
1. The Arduino UNO was only here to power the LEDs

File Downloads

CCD_Arduino_Processing_Color.zip (4 KB)
[NOTE: When saving, if you see .tmp as the file ext, rename it to 'CCD_Arduino_Processing_Color.zip']
Step 5: Building the touch screen : find a precise X Y position
To improve the precision of the detection we are going to have to complexify the system by adding some LED on different digital ports of the board. As you can see on
the pictures, I now have 15 LEDs (choose as many as you want) wired in a plastic brown sticks. The distance between each LED is 5cm so the total distance is 70cm.

Now, how are we going to detect a very precise position?

1. we need to check if the system is detecting something. The method is gonna be :

Turn ON LED 1,

Read the sensor and check if something is blocking the light

If something is in the way store the pixels above calibration in a table

Turn OFF LED1

Turn ON LED 2

Read the sensor and check if something is blocking the light

if something is in the way store the pixels above calibration in a table

Turn OFF LED2

...(do this for every LED)

Now we have stored all the areas detecting something.

2. calculate the function

I know school is often far away and mathematics didn't seem very useful at the time. But do you remember the basic function Y = AX + B ?

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Here we are going to have a full application of this. We are going to calculate the function crossing the LED and the middle of the area the CCD sensor detected.

To simplify, we are going to set the XY origin of the graphic on the first LED called LED 1. We can then calculate B for every LED (in mm) :

LED 1 = 0, LED 2 = 50 (50mm distance), LED 3 = 100, LED 4 = 150...

The A is a bit more tricky, if Y = AX + B then A = (Y - B)/X

If we take the average of the pixels detected (in the program it's "(maxi + mini)/2") we can calculate the exact height (Y). We also need to transform the pixels in
dimension.

(NB_PIXELS-(maxi+mini)/2)*CCD_HEIGHT)/NB_PIXELS+(SCREEN_HEIGHT/2)-(CCD_HEIGHT/2)

and as we have Y, B and X we calculate A :

A = (Y - B)/X

Now we have A and B of all the lines going from every LED to the middle of the area they can't see on the sensor. We have function1 : Y = A1 X + B1 and Y = A2 X + B2

We can then calculate the crossing of those functions :

The coordinate X and Y of the crossing will be :

X = (B2 - B1) / (A1 - A2)

Y = (((A1*X) + B1) + ((A2*X) + B2)) / 2

The X and Y are the crossing coordinates. If you calculate all the functions crossing point and you average them you should have a good approximation of the central
position of the object.

I am currently working on a second algorithm for the multi-points. It's gonna be here in few weeks.

Image Notes Image Notes


1. Now I have 15 LEDs looking at the sensor to try to cover the sides 1. First test with the TV, happy :)
2. First test with the TV, happy :)

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Image Notes
1. The multi-touch cannot be perfect. But we can still make some precise detection

Step 6: Building a touch screen : Improve design and multi-point


As we can see on the picture, this method is not really perfect. With 15 LEDs on one side, you can see on picture 1 there are still many areas we cannot detect.

So how are we going to make the detection area bigger?


The easiest solution would be to add some LED which point to the sensors. This solution, which you can see on picture 2, would cover the entire central area but
not the one closest to the LED. It's not that good as It would need a lot of LEDs, which would make our system go slower.

The non detected areas are on the sides. An interesting solution could be to improve the distance between the LED and the sensor from the screen. This would
solve part of the problem in the non-detected areas as you can see on picture 3. But the further the LEDs are from the sensors, the more interference we are
going to have.

After a bit of testing, I decided to add some reflective mirrors on the two sides. With this solution, if you add just a few LEDs which point to the side through the
mirror you can cover a wide area. As you can see on picture 4.

We could imagine a mixed solution like on the picture 5

My final solution is a combination of the three previous points. My sensors and LEDs are a bit far away from the screen, some mirrors cover most of the UP and
DOWN sides. It's close to the picture 6. Still not perfect, but almost entirely covered!

What about the multipoint?

I am still working on implementing the multipoint on the table. On the test I have made, it works pretty well and I can sometimes see up to 10 points! But this system is
never going to make a perfect multipoint as every object will create a small shadow behind it and a second object in this zone could not be properly detected.

I will post the multitouch solutions in few days/weeks when I've finished! :-)

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Image Notes Image Notes
1. 1. Basic with LED on one side 1. 2. If the LEDs are around the table. Better detection except if you are too close
from the borders

Image Notes Image Notes


1. 3. Here, there is more distance between the LEDs and the sensor from the 1. 4. the results using mirror on the sides
screen

Image Notes Image Notes


1. Using mirrors, and LEDs on the side and more distance from the screen. 1. 6. My solution using Mirrors.

Step 7: Electronic connection


On the Fritzing picture, you can see how everything is connected.

A good thing about using a Teensy Board is you have 34 digital Input/Output. So we have enough free digital PIN to control 30 LEDs without the need of external LED
drivers. As only one LED is on at a time, we don't need much power either.

In this project we are going to use the following Pin :


RX/TX (digital Pin 0 - 1) for the serial communication

CCD sensor control (digital Pin 2 - 3)

CCD sensor read on analog (analog Pin 9)

direct LED control (digital Pin 6 - 22)

Indirect LED control digital Pin x - x)

The LEDs are powered on their Anode, which means you have to set your Pin Low to turn the LED ON. A 220ohm resistor is wired on the power line to avoid sending to
much power on the LED.

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Image Notes
1. The electronic of the circuit. For now the Teensy and the RP are connected on
USB.

Image Notes
1. Plug in LEDs trow Plexyglass

Image Notes
1. The hole for the fan
Image Notes
1. Wiring the LEDs, I use some header to be able to plug and unplug the board

Image Notes
1. The Raspberry Pi plugs are outside so we can easily wire a keyboard, mouse or
remotes
2. The Raspberry Pi plugs are outside so we can easily wire a keyboard, mouse or
remotes
3. This is the program button of the Teensy. Pretty useful to have it outside for
debugging

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Step 8: Arduino Teensy software
I have already talked about the great hardware specifications of the Teensy board. But combined with the Arduino software environment, the Teensy also offers some
great possibilities. But first let's install the plug-in

Now you should see a category "Teensy" when you choose your board. And if you select it, you have access to several other options like the "USB Serial Type" to
instantly transform your board into a USB keyboard or mouse (some possibilities can be found on Arduino Leonardo). The USB communication type is a "Full Speed"
which means it can communicate at 12Mb/s. You can also change the speed of the board (on this project I used the overclock at 92Mhz).

For now, all of my Arduino UNO codes have been successfully built on the Teensy which means the adaptation between the ARM Cortex M4 and the AVR Atmega328
have been very well made. I tried to write the code to be understandable. Here is the structure of the main loop :

A for loop from 0 to the number of LED

- Turn an LED on (as the LEDs are wired with the Anode on VCC and Cathode on the PIN, you have to give a LOW state to turn it ON)

- ClearCCD(), The sensor has to be cleared once before reading the value... I don't know why. If anyone has an idea of how I could speed up this part, I would very much
appreciate it.

- readCCD(), read the sensor, if a value is above the calibration it is stored and the function return 1. If something have been detected, the flag_detect is set to 1.

- Turn the LED off (HIGH state for OFF in this configuration)

If something has been detected, then the flag_detect is set to 1 and you enter the IF function. You can then choose your calibration between the following :

- OPTION 1; send Serial monitor.

Basic debugging : This option allows you to read the 16 clusters directly on the serial monitor.

- OPTION 2; calculate position + send Serial monitor

Debugging position : send the coordinates X and Y to the serial monitor

- OPTION 3; send Processing interface

Debugging visual : look at the CCD results on a Processing GUI. The interface is going to have to be adapted to the number of LED (15 default)

- OPTION 4; calculate position + send Python Pi interface

Send the position to the PyQT interface

- OPTION 5; calculate position + send mouse (only on Teensy)

Send the position as a USB mouse interface. To use this option you will have to go to "Tools" -> "USB Type" -> "Keyboard + Mouse + Joystick". (See the Warning at the
bottom of this Step)

- OPTION 6; calculate position + send Keyboard (only on Teensy)

Send the position as a USB keyboard interface. To use this option you will have to go to "Tools" -> "USB Type" -> "Keyboard + Mouse + Joystick".
You can eventually add a delay at the end of the loop(). Depending on the speed you need

WARNING: OPTION 5 uses the command mouse.mouveTo(X, Y) which doesn't work on a Linux station. If you want to do the same configuration as me with a Linux
Raspberry Pi you are going to need to use the UGLY HACK made by Paul Stoffregen who seems to be one of the developers of the Teensy Project. He is really good
and he helps a lot with debugging if you have any questions. Thank you Paul!

For this hack, you need to modify a part of the file name usb_desc.c It should be installed in your Arduino folder. The new configuration given by Paul is slightly different
but he makes it work! By then, the mouse.move() function is not working anymore.

File Downloads

Touch_Table_Final.zip (3 KB)

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
[NOTE: When saving, if you see .tmp as the file ext, rename it to 'Touch_Table_Final.zip']
Step 9: Speed optimization
I am still working on speed improvement, as of right now the Teensy OPTION 5 (as a mouse) has only around 20 Hertz of reactivity. My goal is to reach around 50Hz (so
one detection every 20ms)

To multiply by 2.5 the current speed here are my options :


Code calcul optimization (the calcul of X and Y positions are pretty heavy. I probably could save a bit of time on rewriting this part better)

Speed up the CCD sensor (Most of the time taken is from the CCD sensor reading. By optimizing the digitalWrite and the analog read I could save a lot of time. I
tried with digitalWriteFast() but it wasn't working, maybe it's to fast for the sensor...)

As I say before, to don't have to much LEDs would help going faster. But I would loose some screen detections areas. So I will keep 24 LEDs for now.

I could change the order of LEDs blinking. With only 5 or 6 LEDs I can probably cover 80% of the screen. So maybe blink more certain LEDs than others could be
interesting.

On the mono-point solution, we could only blink the LEDs around a detected point because we are not suppose to detect anything in other areas.

Step 10: Raspberry Pi Python GUI Touch interface


On the Raspberry Pi side, there are many different ways to show some data with a GUI. I choose to write a basic interface with PyQT following a friend's advice. Now, the
interface has a full screen picture, read the serial datas and write them on a little panel on the left of the screen and draws a cursor following the serial position received.

The program run on Python3.2 and Pyqt4 on the Raspberry Pi. You can easily find many tutorial to install them and run a program.

The code still has some bugs. I will write the final one soon.

Image Notes
1. The received serial data
2. Cursor following the movement

File Downloads

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Touch Table Python.zip (298 KB)
[NOTE: When saving, if you see .tmp as the file ext, rename it to 'Touch Table Python.zip']
Step 11: Build the surface, playing with plexyglass and mirror
Another tricky part was building the detection area. I didn't know which material to choose so I started with glass panels. But it was too fragile to manipulate and cut so I
moved to plexyglass.
A plexyglass panel of XxY, 5mm thick carried most of the detection parts (except the sensors and the Teensy because I wanted them to be lower).

From this first panel I cut a line 12mm height. I made some regular holes to insert the LED.

Then I bought another plexyglass panel 2.5mm thick and I cut it into a 12 mm line to make the other borders.

I fixed some black tape around the CCD sensor to isolate it from external light and set it at the good height.

For the reflective mirror, the shop next to my place couldn't cut smaller than 100mm. So I bought some 100x300 panel and a glass cutting knife. On internet there
are a lot of videos to learn how to cut glass. Still it's not very easy and I broke many... it's easier to buy smaller mirrors (like 100x150), but don't forget to buy more
than you need, as it's hard not to break any!

When everything is fixed and working. You can add some transparent glue above the surrounding plexyglass lines and around the LED to create an isolation if any liquid
falls on it.

Image Notes
1. After some bad experience playing with glass. I choose plexyglass...
2. After some bad experience playing with glass. I choose plexyglass...

Image Notes
1. A glass cutting knife. It's not easy but I succeed to cut my mirrors :)

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Step 12: Build the wooden enclosure
The wooden enclosure depends exclusively on the TV you have. I will only give the basic specification for mine, but I think the pictures are going to explain it better.

I used some 18mm thick Pine Wood to support the weight of the TV. I made several holes around the ventilation area of the TV.
Some large framing lumber to support the two sides of the TV so the back is not in direct contact with the wood panel behind.
Some small framing lumber all around to fix the decorative medium around it
Some laser engravings on the surrounding 10mm medium panels adding Pacman, Mario, Toad, the opening for the Raspberry Pi USB, the fan and the infrared
hole of the TV.
The box is closed with one 10mm panel and one 3mm panel with a big square hole the size of the touch screen.
I also added some brown varnish to give a more natural wooden color to the medium

The little table under is made with :

A medium 18mm panel on the top to support the structure.


4 feets, each of it made with two large framing lumber screwed together.
A layer made with a 10mm panel of medium to store the remote of the TV and a multi-socket powering TV and Raspberry Pi

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Image Notes Image Notes
1. Little area for the Pi 1. I used a laser cutting machine for cutting some part and for the engraving
2. The fan from an old computer

Image Notes
1. Laser engraving for the sides

Image Notes
1. My apartment is pretty small and the weather was bad, so I couldn't do it on the
balcony. Lot of cleaning!

Image Notes
1. Some testing for engraving Mario and Toad

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Image Notes
1. An old TV table was quiet useful as I made the feet later

Image Notes
1. Now, time to varnish the wood!

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Image Notes
1. The flax wasn't long enough, so I had to build a little adaptor

Image Notes
1. The little layer is quiet useful for the plugs and the remote

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Step 13: Final program, let's play!
Now we have everything fitting together, let's try a few games :)

With the keyboard option of the Teensy program you can emulate any mono-touch game. I made few test with the PyGame already on the Debian Pi like the game
squirrel.py. I am trying to find a Pacman because it can work with the same method.

When the multi-touch will be done, I will add pictures of Nintendo games working on the Pi (can't wait to play duck hunt and Mario Bros 3!!) ;-)

As we can easily access the usb port, it's also possible to plug a controller in and to emulate some games without a touch screen.

Image Notes
1. My plan is to have a good pacman on the table. I have to finish to code it Image Notes
1. The squirrel game from PyGame

Step 14: How to improve the project


Still a lot of thing to do, but now the all structure is made it's should go pretty quick :

First is to implement the touch screen. It's not going to be perfect, but way enough to play most of the games by defining some screen areas for each button.
Right now I am not fully satisfied by the speed (20Hz), I ll try to reach around 50Hz.
Probably adding some button on the table to switch more easily the options of the Teensy. But I am still not sure how to do the mouse and keyboard emulating
like this.
Implementing more games!!
Plug the UART of the Teensy directly on the Raspberry Pi. For now I have a USB cable going outside, it's not very good looking.
Improve the detection area, If I increase enough the speed I could add some LEDs and have a better detection on corners.
Build a nicer Python GUI which start directly when you turn the Raspberry Pi on.

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Step 15: Conclusion
I hoped you all enjoyed this Instructable and that it will inspire many other projects using CCD sensors or coffee tables!

As you can see in the last step, there are still many ways to improve it... If you have any ideas or any questions, I would be happy to work with other people on making it
more reliable, efficient and fun! ;-)

Image Notes
1. That's a happy face of "it's almost done"!

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/
Related Instructables

Ms. PacMan The LittleBox |


Gesture- Let's make a Arcade Machine Raspberry Pi A Raspberry Pi Mr.Engraver :
Controlled Pac game controller! (HOMEMADE) Arcade Table by PC by The Desktop
Man w/ Arduino by travershenry Aleator777 Laser Engraving
& Grove by mblicker SilverJimny
Machine by
Gesture Module Chitlange Sahas
by __loovee__

Advertisements

Comments

http://www.instructables.com/id/Touch-Screen-Coffee-Table-DIY-With-32-TV-and-Low-C/

You might also like