Introduction

Touchscreen displays are everywhere! Phones, tablets, self-serve kiosks, bank machines and thousands of other devices we interact with make use of touchscreen displays to provide an intuitive user interface.

Today we will learn how touchscreens work, and how to use a common inexpensive resistive touchscreen shield for the Arduino.  Future videos and articles will cover capacitive touchscreens, as well as a touchscreen HAT for the Raspberry Pi.

Before we discuss how these devices work, let’s first look at their history.

Touchscreen Display with Arduino

History of the Touchscreen

Although touchscreens seem to be everywhere these days we tend to forget that just a few decades ago these devices were just science fiction for most of us. For many people, the touchscreen concept was introduced 30 years ago in the television series Star Trek: The Next Generation.

Eric A Johnson, a researcher at the Royal Radar Establishment in Malvern UK is credited for describing and then prototyping the first practical touchscreen. HIs device was a capacitive touchscreen, and it’s first commercial use was on air traffic control screens. However, the touchscreens used then were not transparent, instead, they were mounted on the frame of the CRT display.

In 1972, a group at the University of Illinois filed for a patent on an optical touchscreen. This device used a 16×16 array of LEDs and phototransistors, mounted on a frame around a CRT display. Placing your finger, or another solid object, on the screen would break two of the light beams, this was used to determine the position and respond accordingly. 

The first transparent touchscreen was developed at CERN in 1973. CERN is also home to the Large Hadron Collider, and this is where Tim Berners-Lee invented the World Wide Web.

The first resistive touchscreen was developed by American inventor George Samuel Hurst in 1975, although the first practical version was not produced until 1982.

In 1982 the University of Toronto’s Input Research Group developed the first multi-touch touchscreen, a screen that could interpret more than one touch at the same time.  The original device used a video camera behind a frosted piece of glass. Three years later the same group developed a multi-touch tablet that used a capacitive touchscreen instead.

The first commercial product to use a touchscreen was a point-of-sale terminal developed by Atari and displayed at the 1986 COMDEX expo in Las Vegas. The next year Casio launched the Casio PB-1000 pocket computer with a touchscreen consisting of a simple 4×4 matrix.

LG created the world’s first capacitive touchscreen phone, the LG Prada used a capacitive touchscreen and was released in early 2007. A few weeks later Apple released its first iPhone.

How Touchscreens Work

Although there have been many technologies used to create touchscreens the two most prevalent are Resistive and Capacitive touchscreens.

Most early touchscreen devices were resistive, as this technology is generally less expensive than capacitive screens. However, nowadays capacitive screens are more common, being used in the majority of smartphones and tablets.

Each technology has its advantages and disadvantages, which I will describe below.

Resistive Touchscreens

Although they were invented after capacitive touchscreens, resistive touchscreens are probably the most common type used by hobbyists. The reason for that is the price and performance, resistive touchscreens are cheaper than capacitive ones and they are generally more accurate.

Resistive Touchscreen-1

A resistive touchscreen consists of two thin layers of material, separated by a tiny gap.  Spacers are used to maintain the gap and keep the two sheets apart.

Both sheets have a conductive side, and they are arranged so that the conductive sides face one another.  The top sheet is both flexible and transparent. The bottom one is also transparent, however, it is usually solid.

In operation, the resistance between the two sheets is measured at different points. Pressing down upon the tip sheet will change that resistance, and by comparing the measurement points it can be determined where the screen was pressed.  Essentially, it creates a pair of voltage dividers.

Resistive Touchscreen-2

Resistive touchscreens come in a number of different configurations:

4-Wire Analog

In a 4-Wire Analog touchscreen, there are two electrodes or “busbars” on each of the conductive layers.  On one layer these electrodes are mounted on the two X-axis sides, the other layer has them on the two y-axes. 

Each layer has wires connected to the busbars. The top ones are the X+ and X- connections, the bottom ones are labeled Y+ and Y-.

This is the most inexpensive method of designing a resistive touchscreen. The touchscreen display that we will be working with today uses this arrangement.

5-Wire Analog

In a 5-Wire Analog touchscreen, there are four wires, one connected to a circular electrode on each corner of the bottom layer. A fifth wire is connected to a “sensing wire”, which is embedded in the top layer.

Touching any point on the screen causes current to flow to each of the bottom electrodes, measuring all four electrode currents determines the position that the screen was touched.

With fewer components and a simpler design, the 5-Wire Analog touchscreen is considered to be a bit more durable than other designs.

8-Wire Analog

This 8-Wire Analog touchscreen uses an arrangement of electrodes identical to the 4-Wire variety. The difference is that there are two wires connected to each electrode, one to each end.

While this is the most expensive arrangement it is considered to be more reliable.

Resistive Touchscreens – Advantages & Disadvantages

  • Resistive touchscreens are less expensive than capacitive touchscreens.
  • Resistive touchscreens work with a finger or a stylus.
  • You can use a resistive touchscreen while wearing gloves
  • The display is not as bright as the resistive overlay tends to dull it.
  • Resistive displays are more easily scratched or damaged.

 

Capacitive Touchscreens

Capacitive touchscreens are actually older technology than resistive displays.  They are commonly used in phones and tablets, so you’re probably familiar with them.

The capacitive touchscreen makes use of the conductivity of the human body. The touchscreen itself consists of a glass plate that has been treated with a conductive material.

Capacitive Touchscreen

There are two common types of capacitive touchscreens.

Surface Capacitive

The surface capacitive touchscreen is the most inexpensive design, so it is widely used. It consists of four electrodes placed at each corner of the touchscreen, which maintain a level voltage over the entire conductive layer.

When your finger comes in contact with any part of the screen, current flows between those electrodes and your finger. Sensors positioned under the screen sense the change in voltage and the location of that change.

Projected Capacitive

This is a more advanced touchscreen technique. In a projected capacitive touchscreen transparent electrodes are placed along the protective glass coating and are arranged in a matrix.

One line of electrodes (vertical) maintain a constant level of current. Another line (horizontal) are triggered when your finger touches the screen and initiates current flow in that area of the screen.  The electrostatic field created where the two lines intersect determine where it was touched.

This is a very sensitive screen that can even be triggered by just bringing your finger near the glass, without actually touching it.

Capacitive Touchscreens – Advantages & Disadvantages

  • Capacitive Touchscreens are generally more durable than resistive ones.
  • Capacitive Touchscreens are clearer, as there is no outer membrane.
  • Capacitive Touchscreens allow for multi-touch sensing.
  • Capacitive Touchscreens can be vulnerable to accidental touches
  • They are not as precise as their resistive counterparts.

Resistive vs Capacitive Touchscreens

Arduino Touchscreen Module

The module we will be experimenting with today is a very common Arduino Shield, which is rebranded by many manufacturers. You can easily find these on Amazon, eBay or at your local electronics shop.

<INSERT LCD TS SHIELD>

There are also many different resistive touchscreen modules with similar features to this one and you can use one of them if you like.

Module Components

The LCD touchscreen shield is actually three components in one, so you’ll actually be coding for more than one interface.

You can also just use the shield as an LCD display and ignore the two other components, however, if you intend on doing that it would be cheaper just to buy an LCD display without any touchscreen features.

Let’s examine the components of the Arduino LCD Touchscreen Shield.

TFT LCD Display

The most obvious component on the shield is the display itself. 

This is a TFT or Thin Film Transistor device that uses liquid crystals to produce a display.  These displays can produce a large number of colors with a pretty decent resolution. 

You do need to be looking directly at the display for best color accuracy, as most of these inexpensive LCD displays suffer from distortion and “parallax error” when viewed from the side. But as the most common application for a device like this is as a User Interface (UI) this shouldn’t be a problem.

Touchscreen Membrane

The touchscreen membrane is the set of resistive elements that sit on top of the display. 

This shield uses a 4-wire analog resistive touchscreen, as described earlier.  Two of the wires (one X and one Y) are connected to a couple of the analog inputs on the Arduino. The analog inputs are required as the voltage levels need to be measured to determine the position of the object touching the screen.

microSD Card 

The display shield also has a microSD card socket. 

The microSD card socket is a convenience, it’s normally used for holding images for the display but it can also be used for program storage.  This can be handy for holding things like calibration settings and favorite selections.

You should note that the microSD card uses the SPI interface and is wired for the Arduino Uno. While the rest of the shield will function with an Arduino Mega 2560, the SPI connections on the Mega are different, so the microSD card will not work.

Choosing an Arduino Board – UNO or Mega?

The last paragraph regarding the microSD card may make you think that an Arduino Uno is the best choice for the Touchscreen Display Shield.  And it you require the microSD card then it probably is a good choice.

But using an Arduino Uno with this shield does have one big disadvantage – a limited number of free I/O pins.  In fact there are only three pins left over once the card has been plugged in:

  • Analog pin A5. This can also be used as a digital pin.
  • Digital pins 0 and 1. These pins are used by the USB interface on the Arduino, so using them is a bit tricky.

If your product is self-contained and doesn’t need many (or any) I/O pins then you’ll be fine. But if you need more pins to interface with then an Arduino Mega 2560 is a much better choice. It has a lot of additional analog and digital pins.

So if you don’t require the microSD card, or are willing to hook up a separate microSD card, then the Arduino Mega 2560 is a better choice for most applications.

Libraries and Example Code

Although it is possible to work directly with the LCD display and touchscreen it is a lot simpler to use libraries.

As there are three devices on the shield you will need libraries for each of the ones you want to use.  The SD Library is already installed in your Arduino IDE, so you will just need libraries for the display and touchscreen.

For the LCD you will have a lot of choices in libraries. Most of these shields come with a CD ROM with some sketches and libraries, so you can use the LCD libraries there. Bear in mind however that code on these CD ROMs tends to be a little dated, you may have better lick on the vendors website. 

The touchscreen will also require a library, again the CD ROM is one possible source for this.

There is another great source online where you can get all of your libraries, as well as sample code and data sheets.

Obtaining Touchscreen Libraries, Data Sheets and Code

To obtain libraries, sample code and specification sheets a great source is the LCD Wiki

LCD Wiki Website

This useful resource contains code, libraries and datasheets for a wealth of LCD displays, both touchscreen and non-touchscreen. You’ll also find code for some common OLED displays as well.

The site also has code for some Raspberry Pi HATs, so it’s not just restricted to Arduino code. You can download everything in convenient ZIP files.

Sample Code

I ran my touchscreen through all of the code samples I obtained from the LCD Wiki. It’s an interesting exercise, and by examining the sketch for each demo you can learn a lot about programming the display.

Here is a brief rundown of each of the demo sketches:

Example 01 – Simple Test

The first example is a very simple color “sweep” test. Navigate to the Example_01_Simple_test folder and open the folder for your Arduino controller.  Navigate down until you find the “ino” file and load it.

Demo 1-simple-test

This test does not make use of any of the extra libraries, it drives the LCD directly. It is only a test of the LCD display, it does not make use of the touchscreen membrane.

Example 02 – Clear Screen

You’ll find this example in the Example_02_clear_screen folder, the same clear_Screen.ino example is used for both the Uno and Mega so there are no separate folders.

Demo 2-clear-screen

This example does use the custom libraries, and is a very good way to learn how to use them.  You’ll note that the LCDWIKI_GUI.h library is loaded, which is the graphics library for the LCD display.

Another library, LCDWIKI_KBV.h, is loaded as well. This is a hardware-specific “helper” library that provides an interface to the actual hardware for the other libraries. 

The example includes a note on how to use the code with a different display, by specifying the resolution manually.

When you run this example the results will be similar to the first one, a series of colors will sweep across the screen. In this case the colors are different, and they vary in speed.

A look at the loop will show how this is done. The LCDWIKI_GUI.h library has a “Fill_Screen” method that fills the screen with an RGB color. You can specify the color in both hexadecimal or decimal format, the example illustrates both ways.

You can experiment with changing the color values and observing the effect on the display.

Example 03 – Comprehensive Test

In this example we really give our display a workout. As with the previous example, this one requires the graphics and helper libraries.  

Demo 3-comprehensive

The example itself is in a folder labeled “Example_03_colligate_test” and the code itself is in the colligate_test.ino file. I suspect a translation error resulted in the name!

This sketch uses a number of functions from the LCDWIKI_GUI.h library, along with some custom functions to draw geometric shapes. It then displays a cycle of graphs, shapes, and patterns on the LCD display.

When the sequence finishes it displays some statistics and then repeats itself.

Once again the sample code is really good at illustrating how to draw patterns on the LCD display.

Example 04 – Display Graphics

In many respects this is a lot like the previous sketch, it draws a variety of patterns and text on the display.

Demo 4-display-graphics

One way in which this sketch differs is that most of the graphics routines are executed in the Setup function, so they only run once. The loop then displays some text with a selection of colors and fonts. The orientation is changed as it cycles through the loop.

Example 05 – Display Scroll

This example makes use of a second file that contains fonts. The Display Scroll sketch illustrates a number of different methods of scrolling characters, in different fonts, colors and even languages.

Demo 5-display-scroll

One interesting thing about this test is that it illustrates how to display text in different “aspects”, Portrait and Landscape, Right side up and Reversed.

Example 06 – Display String

If you are trying to understand how to display text strings on the LCD display then this example will serve you well. 

Demo 6-display-string

Unlike the previous examples that put the text in with a number of graphics, this example is a pretty simple one with just a block of text in different sizes and colors.  This makes it very simple to understand how the text is positioned on the display.

Example 07 – Read Pixel

The incorrectly spelt read_piexl.ino sketch is described as “a test for reading pixel color values”.

Demo 7-read-pixel

The purpose of this one is a bit hard to comprehend until you look at the screen from a distance.  

The result of running the sketch is the display screen fills with rows of hexadecimal values while the background alternates between blue and black and the orientation (or “aspect”) changes.  If you stand back to see the “big picture” you’ll note that the color values form “number patterns”. 

Example 08 – Display Phone Call

At last we finally come to a sketch that uses the touchscreen function!

Demo 8-display-phone

The Display Phone Call sketch draws a mockup telephone keypad. Pressing one of the keys will display the result on a line of text at the top.  There is also a key to delete your entries, as well as ones to send and disconnect the call – the latter two are “dummy” functions of course as it’s only a demo.

In addition to the graphics and “helper” libraries that have been used in the previous examples this sketch also uses the TouchScreen library to read screen interaction.  This was one of the libraries included in the original ZIP file.

Example 09 – Show BMP Picture

As its name would imply, this sketch displays a bitmap image on the display. The images need to be placed onto the root of a microSD card, which in turn is plugged into the socket on the display shield.

Note that this demo will only work on the Arduino Uno, as the microSD card uses the SPI bus and is wired to the Arduino Uno SPI port. The Arduino Mega 2560 board uses different pins for SPI.

Demo 9-show-bmp

The image needs to be in bitmap format as this format defines several bytes for each individual pixel in the image. There are four 320×480 sample images included in the code sample, you can also use your own if you (a) keep them the same size and (b) give them the same names.

The images will show off the display resolution, which is reasonably impressive. You’ll also note that to see them at their best, you need to be directly in front of the display, viewing the display at an angle causes the display to distort colors.

Another thing you will notice is the speed at which the images draw, which is not particularly impressive. The clock speed of the Arduino has a lot to do with this, as does the method used to extract each individual pixel from the image. 

The code sample itself is quite easy to read and makes an excellent reference for displaying your own images.

Example 10 – Switch Test

This example draws some small “switches” on the display. The switches are active and respond to touch.  There are slide switches, a push button, some radio buttons and some text-based expandable menus to test with.

Demo 10-switch-test

Since the switches are so tiny I found it easier to use the stylus included with the display shield to activate them.

Again this is a good code example for those who want to create their own interface.

Example 11 – Touch Pen

The Touch Pen example is actually a pretty decent little drawing application. You can draw whatever you want on the main screen area. A set of buttons allow you to set the stylus color and pen width. 

Demo 11-touch-pen

While the sample code is a bit difficult to follow it’s worth the effort, as it shows you how to create a dynamic menu system. Touching the stylus color button, for example, will open a new menu to select colors.  This is a handy technique that you’ll need to know when developing your own user interfaces.

Touchscreen Calibration

The Calibration utility lets you calibrate the resistive touchscreen.  It achieves this by placing a number of crosses on the screen. You can calibrate the screen by using the stylus to touch the center of one of the crosses as accurately as you can.

Demo 12-calibration

After you touch one of the cross points the sketch runs through a calibration sequence, during which time you need to continue to touch the cross point. You’ll be informed when it is finished.

After calibration, the sketch will display a number of calibration values for the resistive touchscreen. These values can be used in your future sketches to make the touchscreen more accurate.

For the best accuracy, you should repeat the test several times using different cross points, noting the results each time. You can then average those results and use the values in your sketches.

Programming your Own Controls

The examples are a great way to demonstrate the capabilities of your touchscreen. But to really put your interface to work you’ll need to write your own interface code.

Writing a touchscreen interface can be challenging. I would suggest that you start by modifying one of the example codes, one that is closest to your desired interface.

By reverse-engineering the code you’ll learn a lot about using the display and touchscreen libraries.

I did exactly that, using the code for a phone display to create a simple interface with three buttons. Here is how I did it:

Arduino Hookup

For my experiment, I will be using an Arduino Mega 2560 to drive three LEDs. I used a Red, Green and Blue LED but really any colors will work – I just wanted my LED colors to match my button colors.

Arduino Mega touchscreen hookup

The digital I/O connector at the back of the Mega is still accessible even when the touchscreen display shield is installed, so I used three of those connections for the LEDs. I hooked up each LED anode through a 220-ohm dropping resistor and connected them as follows:

  • Red to pin 44
  • Green to pin 45
  • Blue to pin 46

Of course you can use other pins, just remember to change the sketch to match.  The pins I selected happen to all be PWM-capable, but in this simple interface I’m not dimming the LEDs. 

Arduino Interface Sketch

Our simple interface will just consist of three buttons, one for each LED. Pressing a button will toggle the LED on and off.

The sketch is based upon the telephone keypad sketch. I modified it to eliminate the other functions and just display three buttons.  Then I added code to toggle the LEDs.

Here is the sketch:

 

We begin by including four libraries.

The Adafruit GFX Library is a comprehensive graphics library that can be used in a variety of display applications.  It is a “core library”, meaning that it is called by other Adafruit libraries.

The Adafruit TFTLCD Library is used. It uses the previous library to provide an easy method of drawing on the LCD display.  It works with LCD displays that use driver chips like the ILI9325 and ILI9328.

Both Adafruit libraries are best installed from your Library Manager within the Arduino IDE. 

The TouchScreen library comes in the code that you downloaded from the LCD Wiki or from the CD ROM included with your touchscreen shield.  As its name implies it is used to interface with the touchscreen.

The MCUFRIEND_kbv library is also included in the software you obtained for your display shield. It takes care of supplying the correct hardware information for your display shield to the other libraries.

We start by defining a number of the pins used by the touchscreen shield.

We also define some “human-readable” colors to use within our code, it’s a lot simpler and more intuitive than providing RGB values.  I’ve includes all of the colors from the phone sketch I used as the basis for this code, so if you want to change button or background color you can easily do it.

Next, we define some touchscreen parameters. You can ‘fine-tune” your code here by using parameters from your own display, which you can obtain from the Calibration Sketch we ran from the sample code.  Otherwise, just use the values here and you should be fine.

We then define the LED outputs, so if you connected your LEDs to different pins these lines are the ones you’ll need to modify.

Some booleans are defined to represent the toggle state of each of the three LEDs.

Now onto the button definitions.  These are set up using arrays, which is a great technique to use for multiple buttons with similar dimensions and properties. If you want to change the button colors or text this is the place to make your changes.

Finally, we set up objects to represent both the LCD display and the touchscreen surface. Then we move onto the Setup.

In Setup, we initialize the serial monitor, which we can use to monitor the button press and release events.  We also set up the three LED pins as outputs.

Next, we reset the display and try to identify it. This will run through a list of display chip drivers in the MCUFRIEND_kbv library and will attempt to select the correct one.

Now, still in the Setup, we set up the LCD display rotation and fill the background in black. Next step is to draw our buttons. Once we are done that the Setup is finished, and our screen should be displaying the three buttons on a black background.

Now to the Loop!

The loop is where we will be monitoring the screen for keypresses. If we get one, and if its position corresponds to a button location, then we need to toggle the correct LED.

We start by triggering the touchscreen, which is done by toggling pin 13 on the Arduino high. If something is touching the screen we read it and assign it to a TSPoint object named “p”.

We then need to reset the pin modes for two of the touchscreen pins back to outputs. This is done as these pins get shared with other LCD display functions and get set as inputs temporarily.

Now we check to see if the pressure on the screen was within the minimum and maximum pressure thresholds we defined earlier.  If it makes the grade then we determine where exactly the screen was pressed.

Now that we know where the screen was pressed we need to see if the pressure point corresponds to one of our buttons.  So we cycle through the button array and check to see if the pressure point was within 10 pixels of our button location.  

If we find a corresponding button we let it know it has been pressed, this lets the button respond visually to the keypress.  We then look at the button ID number to see which LED we need to control. We reverse the value of the toggle boolean and then drive the LED appropriately – 1 for on, 0 for off.

We then check to see if the button has been released. Once it is we redraw the button in its normal, “unpressed” state.

Both button press events are written to the serial monitor so you can observe them, along with the LEDs.

After a tiny debouncing delay we run through the loop again.

Testing the Interface

Load the code into your Arduino IDE and upload it to your Arduino Mega 2560. Make sure you have the correct processor-type set in your Arduino IDE, especially if you are used to working with the Uno!

Touch Test 01

Testing the script is as simple as it gets – just press a button and observe the LEDs!  You can also watch the serial monitor and note that each button press actually triggers two events – a press and release event.

Touch Test 02

This is a pretty simple demo but it does illustrate how to create a simple IDE. You can expand upon it to add more buttons, or to change the button colors or shapes. And, of course, you don’t have to light LEDs with your buttons, they can control anything that you can connect to your Arduino.

Conclusion

Touchscreen interfaces are used in a number of products, and now you can design your own devices using them. They can really make for an intuitive and advanced display and will give your project a very professional “look and feel” if done correctly.

This is not the only time we will look at touchscreen displays. Next time we’ll examine a capacitive touchscreen and we’ll explore the Adafruit Graphics libraries further to create some very fancy displays with controls and indicators.

Until then start working with your own touchscreen interface using this inexpensive resistive display.

And please keep in touch!

Touchscreen Display with Arduino
Summary
Touchscreen Display with Arduino
Article Name
Touchscreen Display with Arduino
Description
Let's learn how to use a touchscreen with the Arduino. We will examine the different types of touchscreens and will then create a simple interface using an inexpensive Arduino touchscreen shield.
Author
Publisher Name
Dronebot Workshop
Publisher Logo
Tagged on:

2
Leave a Reply

newest oldest most voted
John

Thank you for another excellent video and article! Very detailed, very professional, complete.
Small typo in RGB pin numbers 44, 45, 46 while code is for 51, 49, 47.
Can you also do some STM32 with TM1637 at some stage please? I have not found this combination yet.
Keep up the excellent work!

Jean-Guy

HI nice video, one small problem it will not compile as is seems to be related to the TFT library … other problems im having issues with the mcurfriend ili9338 there is no wiki for it, and most nice demos will not work with the 9341 driver or others…. or should I just get a 9341 chipped one. thanks. j.g