Introduction: Add a Touchscreen to Your Project
- Display true-color images
- Create a dynamic user interface
- Show data with gauges and dials
- Use touchscreen input in your project
Step 1: Example: Webcam Viewer
The Propeller connects to the Internet, grabs the webcam image and caches it on an SD card. Then, it updates the touchscreen every minute or so with the most current webcam image. Here's the sourcecode with usage notes.
Step 2: Example: Program Chooser
The chooser is stored on EEPROM and other programs are stored on the SD card. When you make a selection the chooser loads up whatever program was selected. The loaded program can be anything, whether it uses a screen or not. Here's the code for this project.
Step 3: Assembly
PartsYou can grab a kit that includes everything you'll need, or gather the parts yourself;
- 320x240 ILI9325-based touchscreen module with ADS7843 compatible reader
- Touchscreen breakout board
- 1x 47 Ohm Resistor
- 40x Straight pin headers
- 40x Right angle pin headers
- 40x Pin sockets
There is no standard for interfacing with touchscreens but the ILI9325 is a fairly common controller, so that's what we'll use. If you want to follow along with your own touchscreen, make sure it uses the same controller. Same deal with the ADS7843 reader.
I designed a breakout board to make it a lot easier to connect the touchscreen — It's got headers to attach the screen directly to the board along with headers to attach a standard 40-pin IDE ribbon cable. The breakout board comes with the kit, but you can etch it yourself with the design files (diptrace). You might also find the schematic (pdf) handy.
AssemblyStart by adding the 47 ohm resistor to the breakout board. You've got a choice here; if you add the resistor to R1, the backlight on the touchscreen will always be powered on. If you add it to R2, you'll connect the backlight to P6 on the QuickStart. That way, you can control the brightness of the backlight or turn it off.
Add the right angle headers on top of the breakout board;
Add the pin sockets pin headers to the board;
Now, the 40 pin header that connects the board to QuickStart. An easy way to add this is by first inserting it into the QuickStart;
Then, drop the Quick Touch board on top and solder it to the headers;
Finally, slide the touchscreen into the female sockets and slide the completed module into your QuickStart;
Done with the assembly!
Step 4: Installing the Screen
There are two sets of headers on the breakout board;
Use the set labelled 'Direct Connect' when connecting the screen directly to the board. This works in a pinch, but can be a little flimsy. Another way is to connect the touchscreen with a standard 40-wire IDE cable. When using the IDE cable, connect it to the set of headers labelled 'Ribbon Cable'.
The ribbon cable method is very handy because it lets you mount the screen separately from the QuickStart board and breakout. Whatever works best for your project!
Step 5: Using It: Display
Displaying Basic Text
Creating a text display with the Propeller doesn't take a lot of code or memory. First, make sure the Propeller Tool is installed on your computer (Instructions for Mac/Linux/Windows), then unzip this file into a new folder on your desktop.
Make a blank file in the folder you just created called 'text.spin'. Plug your QuickStart board into your computer and open text.spin in the Propeller Tool. Enter this program;
The first two lines (
dira := 1and
outa := 1) turn on the backlight, you only need to do this if you've connected the backlight to pin 6.
The next line starts the display and the PSM_TV_Text object documents all of the functions available; You've got
text.strto display a string,
text.newlineto move the cursor to the next line, and so on.
The TV_Text object is great for displaying text, and the TV_Graphics is useful for drawing shapes and polygons on the screen. You can use it to display data, make little videogames (like Asteroids, above) or do animations.
Setup is a little more complicated, though. First, grab this file and unzip it into a new folder on your desktop. Then, download this file and put it in your new directory. Open it up in The Propeller Tool — here's the main code for a simple display program;
We're doing a little simple animation by incrementing the variable
tri. Once it gets above 60, we reset it to 0 to keep the animating triangle on the screen. Then, we set the color and width of the line we're about to draw with
gr.colorwidth(1,1). The first argument sets the color, the second sets the width.
gr.tridraws a solid triangle on the screen. The first two arguments are the x and y coordinates for the first point, the second two are x and y for the second point, and the third pair of arguments set the final point in the triangle.
Finally, when we're done setting up the next frame,
tv.UpdateLcd(true)updates the LCD with our new frame. the Graphics object includes methods to draw;
Single pixels with
text strings with
- boxes, polygons, and more
Step 6: Using It: Touchscreen
- If the screen has been touched
- The X position (vertical) of the touch
- The Y position (horizontal) of the touch
first, start the touchscreen object with
touch.start. Then, whenever
touch.wastouchedis true, you know there's been a touch event.
touch.getystore the X and Y position of the touch.
Step 7: Using It: SD Card
The touchscreen contains a handy SD card slot, it's connected to P0...P3 on the QuickStart. You can use any standard SD / SDHC memory card, too. We did full tutorials on writing to and reading from SD cards, but here's a quick guide to get you started;
Download the filesYou'll need the fsrw object to read/write SD cards. Unzip it to a new directory on your desktop. Also included is some dummy data - copy data.txt to your SD card and insert the card into the touchscreen
Reading from SDHere's a sample program;
Our program starts by setting the clockspeed of the Propeller - 80Mhz. Then, we make sure to include the fsrw library in the OBJ section. Now our program begins;
sdfat.mount(0)attempts to mount an SD card connected on P0..P3. If it's successful, it returns
falseis returned. Our program ignores the result, but we could use that to trigger some error message like 'No SD Card Found'.
sdfat.popen(string("data.txt"), "r")opens a file stored in the root directory of our SD card with the name 'data.txt'. The "r' tells fsrw that we want to open the file in read-only mode. This also returns
trueon success and
falseon failure, so we could trigger an error message if the file is not found.
sdfat.pgetcreturns the next character in the currently open file. In this instance, we're storing the character returned in the variable 'r'. Every time we call
sdfat.pgetc, the file pointer goes to the next character.
When we've read through the whole file,
sdfat.pgetcwill return -1. That's why we check in this repeat loop if any number under 0 is returned. Then we know we've reached the end of file and we can move on.
sdfat.pclosecloses the currently open file. Once it's closed, we can open up another file by calling
sdfat.popenand specifying the new file. Or we can unmount the SD card with
Write to an SDHere's our sample program
Both programs have a lot in common - first we set the clock speed of the Propeller, mount the SD card and open a file. The first difference is we use
sdfat.popen(string("data.csv", "w"), the 'w' switch tells fsrw that we're opening the file in write mode and we want to store data in the file. If data.csv isn't on the root directory of the SD card, fsrw will create it.
To write data, we use
sdfat.pputs(data). When we're done writing to the file, we can close it with
sdfat.unmountunmounts the SD card.
Step 8: Next Steps
A touchscreen can really makes a project easier to use and more intuitive. When you combine it with the Propeller, you've still got plenty of I/O and memory for the rest of your project. Here are a few ideas on using your touchscreen;
Data DisplayThe touchscreen can display text and graphical data using the graphics object - you can display real-time data like the status of sensors switches, or LED's. Data can be logged on the SD card, too.
User MenuThe program chooser is a single level user menu, but you can build more complex menus using the graphics object or TV_Text.
Remote ViewerThere's enough I/O on the Propeller to run an Ethernet connection - using the same principle as the webcam viewer, you can use the touchscreen to display images.
Whatever you do, have fun with your touchscreen!