Tag Archive | "touch"

Tutorial – Arduino and TFT Color Touch Screen

Learn how to use an inexpensive TFT colour  touch LCD shield with your Arduino. This is chapter twenty-nine of our huge Arduino tutorial series.

Updated 07/02/2014

There are many colour LCDs on the market that can be used with an Arduino, and in this tutorial we’ll explain how to use a model that is easy to use, has a touch screen, doesn’t waste all your digital output pins – and won’t break the bank. It’s the 2.8″ TFT colour touch screen shield from Tronixlabs:

Arduino TFT colour touch shield front

And upside down:

Arduino TFT colour touch shield back

As you can imagine, it completely covers an Arduino Uno or compatible board, and offers a neat way to create a large display or user-interface.  The display has a resolution of 320 x 240 pixels, supports up to 65536 colours and draws around 250mA of current from the Arduino’s internal 5V supply. 

And unlike other colour LCDs, this one doesn’t eat up all your digital output pins – it uses the SPI bus for the display (D10~D13), and four analogue pins (A0~A3) if you use the touch sensor. However if you also use the onboard microSD socket more pins will be required. 

With some imagination, existing Arduino knowledge and the explanation within you’ll be creating all sorts of displays and interfaces in a short period of time. Don’t be afraid to experiment!

Getting started

Setting up the hardware is easy – just plug the shield on your Arduino. Next, download the library bundle from here. Inside the .zip file is two folders – both which need to be copied into your …\Arduino-1.0.x\libraries folder. Then you will need to rename the folder “TFT_Touch” to “TFT”. You will notice that the Arduino IDE already contains a library folder called TFT, so rename or move it.

Now let’s test the shield so you know it works, and also to have some quick fun. Upload the paint example included in the TFT library – then with a stylus or non-destructive pointer, you can select colour and draw on the LCD – as shown in this video. At this point we’d like to note that you should be careful with the screen – it doesn’t have a protective layer.

Afraid the quality of our camera doesn’t do the screen any justice, however the still image looks better:

Arduino TFT colour touch shield paint demonstration

Using the LCD 

Moving on, let’s start with using the display. In your sketches the following libraries need to be included using the following lines before void setup():

… and then the TFT library is initialised in void setup()

Now you can use the various functions to display text and graphics. However you first need to understand how to define colours.

Defining colours

Functions with a colour parameter can accept one of the ten ten predefined colours – RED, GREEN, BLUE, BLACK, YELLOW, WHITE, CYAN, BRIGHT_RED, GRAY1 and GRAY2, or you can create your own colour value. Colours are defined with 16-but numbers in hexadecimal form, with 5 bits for red, 6 for green and 5 for blue – all packed together. For example – in binary:

These are called RGB565-formatted numbers – and we use these in hexadecimal format with our display. So black will be all zeros, then converted to hexadecimal; white all ones, etc. The process of converting normal RGB values to RGB565 would give an aspirin a headache, but instead thanks to Henning Karlsen you can use his conversion tool to do the work for you. Consider giving Henning a donation for his efforts.

Displaying text

There are functions to display characters, strings of text, integers and float variables:

In each of the functions, the first parameter is the variable or data to display; x and y are the coordinates of the top-left of the first character being displayed; and colour is either the predefined colour as explained previously, or the hexadecimal value for the colour you would like the text to be displayed in – e.g. 0xFFE0 is yellow.

The drawFloat() function is limited to two decimal places, however you can increase this if necessary. To do so, close the Arduino IDE if running, open the file TFTv2.cpp located in the TFT library folder – and search for the line:

… then change the value to the number of decimal places you require. We have set ours to four with success, and the library will round out any more decimal places. To see these text display functions in action,  upload the following sketch:

… which should result in the following:

Arduino TFT colour touch shield text

To clear the screen

To set the screen back to all black, use:

Graphics functions

There are functions to draw individual pixels, circles, filled circles, lines, rectangles and filled rectangles. With these and a little planning you can create all sorts of images and diagrams. The functions are:

The following sketch demonstrates the functions listed above:

… with the results shown in this video.

Using the touch screen

The touch screen operates in a similar manner to the other version documented earlier, in that it is a resistive touch screen and we very quickly apply voltage to one axis then measure the value with an analogue pin, then repeat the process for the other axis.

You can use the method in that chapter, however with our model you can use a touch screen library, and this is included with the library .zip file you downloaded at the start of this tutorial.

The library does simplify things somewhat, so without further ado upload the touchScreen example sketch included with the library. Open the serial monitor then start touching the screen. The coordinates of the area over a pixel being touch will be returned, along with the pressure – as shown in this video.

Take note of the pressure values, as these need to be considered when creating projects. If you don’t take pressure into account, there could be false positive touches detected which could cause mayhem in your project.

Now that you have a very simple method to determine the results of which part of the screen is being touched – you can create sketches to take action depending on the touch area. Recall from the example touch sketch that the x and y coordinates were mapped into the variables p.x and p.y, with the pressure mapped to p.z. You should experiment with your screen to determine which pressure values work for you.

In the following example, we don’t trigger a touch unless the pressure value p.z is greater than 300. Let’s create a simple touch-switch, with one half of the screen for ON and the other half for OFF. Here is the sketch:

What’s happening here? We divided the screen into two halves (well not physically…) and consider any touch with a y-value of less than 160 to be the off area, and the rest of the screen to be the on area. This is tested in the two if functions – which also use an and (“&&”) to check the pressure. If the pressure is over 300 (remember, this could be different for you) – the touch is real and the switch is turned on or off.

… and a quick demonstration video of this in action.

Displaying images from a memory card

We feel this warrants a separate tutorial, however if you can’t wait – check out the demo sketch which includes some example image files to use.


By now I hope you have the answer to “how do you use a touch screen LCD with Arduino?” and had some fun learning with us. You can get your LCD from Tronixlabs. And if you enjoyed this article, or want to introduce someone else to the interesting world of Arduino – check out my book (now in a third printing!) “Arduino Workshop”.

visit tronixlabs.com

Have fun and keep checking into tronixstuff.com. Why not follow things on twitterGoogle+, subscribe  for email updates or RSS using the links on the right-hand column, or join our forum – dedicated to the projects and related items on this website. Sign up – it’s free, helpful to each other –  and we can all learn something.

Posted in arduino, LCD, TFT, touch screen, tronixlabs, tronixstuff, tutorial

Tutorial – Arduino and ILI9325 colour TFT LCD modules

Learn how to use inexpensive ILI9325 colour TFT LCD modules in chapter fifty of a series originally titled “Getting Started/Moving Forward with Arduino!” by John Boxall – A tutorial on the Arduino universe. The first chapter is here, the complete series is detailed here.


Colour TFT LCD modules just keep getting cheaper, so in this tutorial we’ll show you how to get going with some of the most inexpensive modules we could find. The subject of our tutorial is a 2.8″ 240 x 320 TFT module with the ILI9325 LCD controller chip. If you look in ebay this example should appear pretty easily, here’s a photo of the front and back to help identify it:

There is also the line “HY-TFT240_262k HEYAODZ110510” printed on the back of the module. They should cost less than US$10 plus shipping. Build quality may not be job number one at the factory so order a few, however considering the cost of something similar from other retailers it’s cheap insurance. You’ll also want sixteen male to female jumper wires to connect the module to your Arduino.

Getting started

To make life easier we’ll use an Arduino library “UTFT” written for this and other LCD modules. It has been created by Henning Karlsen and can be downloaded from his website. If you can, send him a donation – this library is well worth it. Once you’ve downloaded and installed the UTFT library, the next step is to wire up the LCD for a test.

Run a jumper from the following LCD module pins to your Arduino Uno (or compatible):

  • DB0 to DB7 > Arduino D0 to D7 respectively
  • RD > 3.3 V
  • RSET > A2
  • CS > A3
  • RW > A4
  • RS > A5
  • backlight 5V > 5V
  • backlight GND > GND

Then upload the following sketch – Example 50.1. You should be presented with the following on your display:

If you’re curious, the LCD module and my Eleven board draws 225 mA of current. If that didn’t work for you, double-check the wiring against the list provided earlier. Now we’ll move forward and learn how to display text and graphics.

Sketch preparation

You will always need the following before void setup():

and in void setup():

with the former command, change orientation to either LANDSCAPE to PORTRAIT depending on how you’ll view the screen. You may need further commands however these are specific to features that will be described below. The function .clrScr() will clear the screen.

Displaying Text

There are three different fonts available with the library. To use them add the following three lines before void setup():

When displaying text you’ll need to define the foreground and background colours with the following:

Where red, green and blue are values between zero and 255. So if you want white use 255,255,255 etc. For some named colours and their RGB values, click here. To select the required font, use one of the following:

Now to display the text use the function:

where text is what you’d like to display, x is the horizontal alignment (LEFT, CENTER, RIGHT) or position in pixels from the left-hand side of the screen and y is the starting point of the top-left of the text. For example, to start at the top-left of the display y would be zero. You can also display a string variable instead of text in inverted commas.

You can see all this in action with the following sketch – Example 50.2, which is demonstrated in the following video:

Furthremore, you can also specify the angle of display, which gives a simple way of displaying text on different slopes. Simply add the angle as an extra parameter at the end:

Again, see the following sketch – Example 50.2a, and the results below:

Displaying Numbers

Although you can display numbers with the text functions explained previously, there are two functions specifically for displaying integers and floats.

You can see these functions in action with the following sketch – Example 50.3, with an example of the results below:


Displaying Graphics

There’s a few graphic functions that can be used to create required images. The first is:.

which is used the fill the screen with a certain colour. The next simply draws a pixel at a specified x,y location:

Remember that the top-left of the screen is 0,0. Moving on, to draw a single line, use:

where the line starts at x1,y1 and finishes at x2,y2. Need a rectangle? Use:

where the top-left of the rectangle is x1,y1 and the bottom-right is x2, y2. You can also have rectangles with rounded corners, just use:

instead. And finally, circles – which are quite easy. Just use:

where x,y are the coordinates for the centre of the circle, and r is the radius. For a quick demonstration of all the graphic functions mentioned so far, see Example 50.4 – and the following video:

Displaying bitmap images

If you already have an image in .gif, .jpg or .png format that’s less than 300 KB in size, this can be displayed on the LCD. To do so, the file needs to be converted to an array which is inserted into your sketch. Let’s work with a simple example to explain the process. Below is our example image:


Save the image of the puppy somewhere convenient, then visit this page. Select the downloaded file, and select the .c and Arduino radio buttons, then click “make file”. After a moment or two a new file will start downloading. When it arrives, open it with a text editor – you’ll see it contains a huge array and another #include statement – for example:


Past the #include statement and the array into your sketch above void setup(). After doing that, don’t be tempted to “autoformat” the sketch in the Arduino IDE. Now you can use the following function to display the bitmap on the LCD:

Where x and y are the top-left coordinates of the image, width and height are the … width and height of the image, and name is the name of the array. Scale is optional – you can double the size of the image with this parameter. For example a value of two will double the size, three triples it – etc. The function uses simple interpolation to enlarge the image, and can be a clever way of displaying larger images without using extra memory. Finally, you can also display the bitmap on an angle – using:

where angle is the angle of rotation and cx/cy are the coordinates for the rotational centre of the image.

The bitmap functions using the example image have been used in the following sketch – Example 50.5, with the results in the following video:

Unfortunately the camera doesn’t really do the screen justice, it looks much better with the naked eye.

What about the SD card socket and touch screen?

The SD socket didn’t work, and I won’t be working with the touch screen at this time.


So there you have it – an incredibly inexpensive and possibly useful LCD module. Thank you to Henning Karlsen for his useful library, and if you found it useful – send him a donation via his page.


In the meanwhile have fun and keep checking into tronixstuff.com. Why not follow things on twitterGoogle+, subscribe  for email updates or RSS using the links on the right-hand column? And join our friendly Google Group – dedicated to the projects and related items on this website. Sign up – it’s free, helpful to each other –  and we can all learn something.

Posted in arduino, bitmap, display, ILI9325, LCD, lesson, mega, TFT, tronixstuff, tutorialComments (45)

mbed and the Freescale FRDM-KL25Z development board

In this article we examine the mbed rapid prototyping platform with the Freescale FRDM-KL25Z ARM® Cortex™-M0+ development board.


A while ago we looked at the mbed rapid prototyping environment for microcontrollers with the cloud-based IDE and the NXP LPC1768 development board, and to be honest we left it at that as I wasn’t a fan of cloud-based IDEs. Nevertheless, over the last two or so years the mbed platform has grown and developed well – however without too much news on the hardware side of things. Which was a pity as the matching development boards usually retailed for around $50 … and most likely half the reason why mbed didn’t become as popular as other rapid development platforms.

And now we have another powerful yet inexpensive board to use with mbed  – the Freescale FRDM-KL25Z

It’s a move in the right direction for both mbed and Freescale. It allows educators and interested persons access to a very user-friendly IDE and dirt-cheap development boards.

What is mbed anyway?

mbed is a completely online development environment. That is, in a manner very similar to cloud computing services such as Google Docs or Zoho Office. However there are some pros and cons of this method. The pros include not having to install any software on the PC – as long as you have a web browser and a USB port you should be fine; any new libraries or IDE updates are handled on the server leaving you to not worry about staying up to date; and the online environment can monitor and update your MCU firmware if necessary. However the cons are that you cannot work with your code off-line, and there may be some possible privacy issues. Here’s an example of the environment:


As you can see the IDE is quite straight-forward. All your projects can be found on the left column, the editor in the main window and compiler and other messages in the bottom window. There’s also an online support forum, an official mbed library and user-submitted library database, help files and so on – so there’s plenty of support. Code is written in C/C++ style and doesn’t present any major hurdles. When it comes time to run the code, the online compiler creates a downloadable binary file which is copied over to the hardware via USB.

And what’s a Freedom board?

It’s a very inexpensive development board based on the Freescale ARM® Cortex™-M0+ MKL25Z128VLK4 microcontroller.

Features include  (from the product website):

  • MKL25Z128VLK4 MCU – 48 MHz, 128 KB flash, 16 KB SRAM, USB OTG (FS), 80LQFP
  • Capacitive touch “slider,” MMA8451Q accelerometer, tri-color LED
  • Easy access to MCU I/O
  • Sophisticated OpenSDA debug interface
  • Mass storage device flash programming interface (default) – no tool installation required to evaluate demo apps
  • P&E Multilink interface provides run-control debugging and compatibility with IDE tools
  • Open-source data logging application provides an example for customer, partner and enthusiast development on the OpenSDA circuit

And here it is:


In a lot of literature about the board it’s mentioned as being “Arduino compatible”. This is due to the layout of the GPIO pins – so if you have a 3.3 V-compatible Arduino shield you may be able to use it – but note that the I/O pins can only sink or source 3 mA (from what I can tell) – so be careful with the GPIO . However on a positive side the board has the accelerometer and an RGB LED which are handy for various uses.

Getting started

Now we”ll run through the process of getting a Freedom board working with mbed and creating a first program. You’ll need a computer (any OS) with USB, an Internet connection and a web browser, a USB cable (mini-A to A) and a Freedom board. The procedure is simple:

  1. Order your board from tronixlabs.com
  2. Download and install the USB drivers for Windows or Linux from here.
  3. Visit mbed.org and create a user account. Check your email for the confirmation link and follow the instructions within.
  4. Plug in your Freedom board – using the USB socket labelled “OpenSDA”. It will appear as a disk called “bootloader”
  5. Download this file and copy it onto the “bootloader” drive
  6. Unplug the Freedom board, wait a moment – then plug it back in. It should now appear as a disk called “MBED”, for example :


There will be a file called ‘mbed’ on the mbed drive – double-click this to open it in a web browser. This process activates the board on your mbed account – as shown below:


Now you’re ready to write your code and upload it to the Freedom board. Click “Compiler” at the top-right to enter the IDE.

Creating and uploading code

Now to create a simple program to check all is well. When you entered the IDE in the previous step, it should have presented you with the “Guide to mbed Online Compiler”. Have a read, then click “New” at the top left. Give your program a name and click OK. You will then be presented with a basic “hello world” program that blinks the blue LED in the RGB module. Adjust the delays to your liking then click “Compile” in the toolbar.

If all is well, your web browser will present you with a .bin file that has been downloaded to the default download directory. (If not, see the error messages in the area below the editor pane). Now copy this .bin file to the mbed drive, then press the reset button (between the USB sockets) on the Freedom board. Your blue LED should now be blinking.

Moving forward

You can find some code examples that demonstrate the use of the accelerometer, RGB LED and touch sensor here. Here’s a quick video of the touch sensor in action:

So which pin is what on the Freedom board with respect to the mbed IDE? Review the following map:


All the pins in blue – such as PTxx can be referred to in your code. For example, to pulse PTA13 on and off every second, use:

The pin reference is inserted in the DigitalOut assignment and thus “pulsepin” refers to PTA13. If you don’t have the map handy, just turn the board over for a quick-reference:


Just add “PT” to the pin number. Note that the LEDs are connected to existing GPIO pins: green – PTB19, red – PTB18 and blue – PTB.

Where to from here? 

It’s up to you. Review the Freedom board manual (from here) and the documentation on the mbed website, create new things and possibly share them with others via the mbed environment. For more technical details review the MCU data sheet. And to order your own Freedom board, visit tronixlabs.com


The Freedom board offers a very low cost way to get into microcontrollers and programming. You don’t have to worry about IDE or firmware revisions, installing software on locked-down computers, or losing files. You could teach a classroom full of children embedded programming for around $20 a head (a board and some basic components). Hopefully this short tutorial was of interest. We haven’t explored every minute detail – but you now have the basic understanding to move forward with your own explorations.

visit tronixlabs.com

Have fun and keep checking into tronixstuff.com. Why not follow things on twitterGoogle+, subscribe  for email updates or RSS using the links on the right-hand column, or join our forum – dedicated to the projects and related items on this website. Sign up – it’s free, helpful to each other –  and we can all learn something.

Posted in 1 hz, arm cortex, education, FRDM-KL25Z, freedom, freescale, lesson, M0+, mbed, MKL25Z128VLK4, MMA8451Q, opensda, part review, tronixlabs, tronixstuff, tutorialComments (0)

Tutorial: Arduino and the DS touch screen

Use inexpensive touch-screens with Arduino in chapter twenty-three of a series originally titled “Getting Started/Moving Forward with Arduino!” by John Boxall – A tutorial on the Arduino universe.  The first chapter is here, the complete series is detailed here.

[Updated 19/01/2013]

Today we are going to spend some time with a touch screen very similar to the ones found in a Nintendo DS gaming unit. In doing so, we can take advantage of a more interesting and somewhat futuristic way of gathering user input. Please note that in order to use the screen without going completely insane, you will need the matching breakout board, as shown in the following image:


The flimsy flexible PCB runner is inserted into the plastic socket on the breakout board – be careful not to crease the PCB nor damage it as it can be rather easy to do so. (The screen can be easy to break as well…) However don’t let that put you off. You will most likely want to solder in some header pins for breadboard use, or sockets to insert wires. For this article it is being used with pins for a breadboard.

Before we start to use the screen, let’s have a quick investigation into how they actually work. Instead of me trying to paraphrase something else, there is a very good explanation in the manufacturer’s data sheet. So please read the data sheet then return. Theoretically we can consider the X and Y axes to be two potentiometers (variable resistors) that can be read with the analogRead() function. So all we need to do is use two analog inputs, one to read the X-axis value and one for the Y-axis value.

However, as always, life isn’t that simple. Although there are only four wires to the screen, the wires’ purpose alters depending on whether we are measuring the X- or Y-axis. Which sounds complex but is not. Using the following example, we can see how it all works.

Example 23.1

In this example, we will read the X- and Y-axis values returned from the touch screen and display them on an LCD module. (Or you could easily send the values to the serial monitor window instead). From a hardware perspective, you will need:

  • Arduino Uno or 100% compatible board
  • DS touch screen and breakout board ready for use
  • Solderless breadboard and some jumper wires
  • Arduino-ready LCD setup. If you are unsure about using LCDs, please revisit chapter 24 of my tutorials.

Connection of the touch screen to the Arduino board is simple, Arduino analog (yes, analog – more on this later) pins A0 to Y1, A1 to X2, A2 to Y2 and A3 to X1 – as below:


Mounting the rest for demonstration purposes is also a simple job. Hopefully by now you have a test LCD module for easy mounting 🙂


I have mounted  the touch screen onto the breadboard with some spare header pins, they hold it in nicely for testing purposes. Also notice that the touch screen has been flipped over, the sensitive side is now facing up. Furthermore, don’t forget to remove the protective plastic coating from the screen before use.

From a software (sketch) perspective we have to do three things – read the X-axis value, the Y-axis value, then display them on the LCD. As we (should) know from the data sheet, to read the X-axis value, we need to set X1 as 5V, X2 as 0V (that is, GND) and read the value from Y2. As described above, we use the analog pins to do this. (You can use analog pins as input/output lines in a similar method to digital pins – more information here. Pin numbering continues from 13, so analog 0 is considered to be pin 14, and so on). In our sketch (below) we have created a function to do this and then return the X-axis value.

The Y-axis reading is generated in the same method, and is quite self-explanatory. The delay in each function is necessary to allow time for the analog I/O pins to adjust to their new roles as inputs or outputs or analog to digital converters. Here is our sketch:

Next, let’s have a look at this example in action. The numbers on the LCD may be not what you expected…

The accuracy of the screen is not all that great – however first take into account the price of the hardware before being too critical. Note that there are values returned even when the screen is not being pressed, we could perhaps call these “idle values”. Later on you will learn tell your sketch to ignore these values if waiting for user input, as they will note that nothing has been pressed. Furthermore, the extremities of the screen will return odd values, so remember to take this into account when designing bezels or mounting hardware for your screen.

Each touch screen will have different values for each X and Y position, and that is why most consumer hardware with touch screens has calibration functions to improve accuracy. We can now use the X and Y values in sketches to determine which part of the screen is being touched, and act on that touch.

In order to program our sketches to understand which part of the screen is being touched, it will help to create a “map” of the possible values available. You can determine the values using the sketch from example 23.1, then use the returned values as a reference for designing the layout of your touch interface. For example, the following is a map of my touch screen:


Example 23.2

For the next example, I would like to have four “zones” on my touch screen, to use as virtual buttons for various things. The first thing to do is draw a numerical “map” of my touch screen, in order to know the minimum and maximum values for both axes for each zone on the screen:


At this point in the article I must admit to breaking the screen. Upon receiving the new one I remeasured the X and Y points for this example and followed the  process for defining the numerical boundaries for each zone is completed by finding average mid-points along the axes and allowing some tolerance for zone boundaries.

Now that the values are known, it is a simple matter of using mathematical comparison and Boolean operators (such as >, <, &&, etc)  in a sketch to determine which zone a touch falls into, and to act accordingly. So for this example, we will monitor the screen and display on the LCD screen which area has been pressed. The hardware is identical to example 23.1, and our touch screen map will be the one above. So now we just have to create the sketch.

After reading the values of the touch screen and storing them into variables x and y, a long if…then…else if loop occurs to determine the location of the touch. Upon determining the zone, the sketch calls a function to display the zone type on the LCD. Or if the screen is returning the idle values, the display is cleared. So have a look for yourself with the example sketch:

And see it in operation:

So there you have it, I hope you enjoyed reading this as much as I did writing it. Now you should have the ability to use a touch screen in many situations – you just need to decide how to work with the resulting values from the screen and go from there.


Have fun and keep checking into tronixstuff.com. Why not follow things on twitterGoogle+, subscribe  for email updates or RSS using the links on the right-hand column, or join our Google Group – dedicated to the projects and related items on this website. Sign up – it’s free, helpful to each other –  and we can all learn something.

Posted in arduino, BOB-09170, education, hardware hacking, LCD-08977, lesson, microcontrollers, nintendo ds, touch screen, tutorialComments (14)

Subscribe via email

Receive notifications of new posts by email.

The Arduino Book

Arduino Workshop

Für unsere deutschen Freunde

Dla naszych polskich przyjaciół ...

Australian Electronics!

Buy and support Silicon Chip - Australia's only Electronics Magazine.

Use of our content…

%d bloggers like this: