Touch and Graphical displays: Part 1- Basics

Introduction

This is the first in a series of 5 articles and videos on touch and graphical LCDs. In this series, we will address the following issues:

• Why touch and graphical displays are used and the trends in industry
• The kinds of displays on the market and their advantages and disadvantages
• How you can program touch and graphical displays
• How to easily build menu systems
• New touch screen devices on the market and the opportunities they bring

In this first article, we will look at the basic technologies and their trade-offs

Background

A lot of electronic products have displays. Sometimes 7-segment numerical displays, for simple systems, sometimes 2 lines by 16 characters, or more, LCD displays. In these systems, there are probably some user control switches, and perhaps potentiometers to set parameters in the system. In the past few years there has been a trend to move to touch screen displays for several reasons:

• They allow more sophisticated user features
• They provide more information about the status of a system
• There is often no longer a need for separate user controls
• They offer cost reduction of an electronic system
• They look great

Industries that are cost-sensitive have already moved over to touch screen displays – for example Automotive. It is hard to find new cars that don’t make use of touch screen technology.

Graphical LCD basics

If you want to make use of graphical displays in your electronic system you have four initial choices:

1. Buy a ‘raw’ screen and make your own touch screen PCB
2. Buy a ready made PCB with touch screen display and add a processor separately
3. Buy a PCB module with a processor built in (and then maybe add a further processor)
4. Buy a finished packaged module with processor and interface to it

Let's look at each of these in turn:

Option 1: Raw touch screens

Here is a typical ‘raw’ touch screen:

Figure 1 - 320 x 240 pixel colour touch screen, front

Figure 2 - 320 x 240 pixel colour touch screen, rear

Figure 3 - Touch screen rear with back can and lighting panel removed and glass-on-chip driver exposed

The touch screen consists of a glass liquid crystal display with many connections that are presented on a flexible printed circuit board. The connections are often gold-plated fingers on the flexible board itself. These plug into a multi-way flex connector mounted onto the host printed circuit board. Behind the glass is a layer of white LEDs that provide background lighting and a tin can.

In Figure 3 the LED panel and tin can have been removed and you can see the chip on glass graphical display chip which is built on to the glass of the display itself. This takes in serial data from the flexible printed circuit board and uses an XY grid system to control the colour of each individual pixel.

This particular display also has a capacitive touch sensor which is built into the glass of the display. This uses a separate ribbon cable as you can see in figure 1. This flexible circuit board has a touch processor and you can see that chip built into the flexible printed circuit board itself.

Some older displays use a resistive layer to provide a touch function. These are cheap but don’t work that well (you have to jab them with your fingernail) and are often provided with a stylus. Do the job properly - get a cap touch one.

Option 2: Ready-made modules

One difficulty with raw touch / graphical displays is that the flexible PCB compression connectors are a little tricky to work with: surface mounted and small pitch. For that reason manufacturers make touch screens built onto a PCB with standard 0.1” pins that are much easier to work with. They look something like this:

Figure 4 - PCB mounted touch screen - front

Figure 5 - PCB mounted touch screen - rear

These modules most often have an SD card reader built into them with a separate bus. This is so you can use an SD card with images on. This particular screen is a resistive touch screen. It uses an SPI bus for the touch screen and a separate SPI bus for the display information.

Using displays like this is tricky: manufacturers are typically in the far east and they provide very little information on the chips used for the display and the touch screen.

Option 3: PCB module with display built-in

The next choice is to buy a module with a processor built-in. Here is an example from Rowland Technology:

Figure 6 - 480 x 320 touchscreen module - front

Figure 7 - 480 x 320 touchscreen module with ESP32-S3 processor - note that you can see the flexi PCB board and connectors.

There are lots of modules available like this - most from the Far East and most (nearly all) based on ESP32 technology. When you buy a touch screen graphical display with processor built in you can either use a separate processor for the main function of your device, or you can use the processor built into the module itself: in this case an ESP32. The number of input output lines varies here but if your device is not complex then this is certainly an option.

Option 4: Buy a finished packaged module with processor and interface to it

The technology here is changing. A new range of finished packaged touch screen modules is becoming available: these are not components you build onto a circuit board. They are finished items that you build into your panel or system and they are electronic sub systems in their own right:

Figure 8 - M5stack Dial front

Figure 9 - M5stack Dial rear

The M5stack Dial is based on ESP32 technology and you can see the I/O connections in Figure 9.

Programming touch and graphical displays

When it comes to programming there are two things you need to understand: how to communicate to the display, how to communicate to the touch device, and the protocols that you need to use.

Communication with the display

The communication protocol will depend on which of the 4 display options you have chosen.

• ‘Raw’ displays usually have options: you can use many of the data lines and send the data in quickly, or you can use a serial bus - usually SPI - and send the data more slowly. Some displays have several possible modes of communication. So your specification needs may dictate how you need to program the display and may narrow your options for you.
• Ready-made modules tend to be slower as they don’t offer many pins. They usually use an SPI bus.
• Displays with a processor on board can use either fast parallel communication or serial communication. The Rowland Technology one shown uses fast parallel communication.
• Packaged modules can either use fast parallel or slower serial.

The communications protocol used will depend on the chip used in the display. Thankfully the display manufacturer will always quote the display chip used in the specification. Controller chips manufacturers include: ST / Sitronicx, STM / STMicro, SSD / Solomon Systech, and ILI / ILItek.

Communicating with the touch screen chip

Touch screen chips use SPI bus or I2C bus. Unfortunately display manufacturers often don’t quote the chip used. But they often refer to an Arduino library so you may need to look in the library code (often in the comments) to find out what chip is used. Touch screen controller chips include: FT / Focaltech, GT / Data display group, XPT / XPT.

Just to complicate this further some touch screens combine touch and display functions into one chip. STM supplies such devices.

Conclusion

There are a lot of options with touch and graphical display screens. Your choice will depend on your needs. If you are a beginner here then it sounds complex and it is. However software libraries can take care of much of this complexity for you and in the next few articles we will look at how you can program graphical display screens, use touch screens and develop touch screen-based menu systems for your electronic products.

In our next article, we look at how to program the graphical display.

Articles in the series:

• Touch and Graphical displays: Part 1- Basics (This article)
• Touch and Graphical displays: Part 2 - Display Programming
• Touch and Graphical displays: Part 3 - M5stack Dial programming
• Touch and Graphical displays: Part 4 - Graphics and Widgets
• Touch and Graphical displays: Part 5 - Menu system programming

You can find pre-written Flowcode programs on the Flowcode website at: https://www.flowcode.co.uk/app-developer/free-apps/

Flowcode 10 is now available from the RS website. A free version of Flowode allows users to create programs for selected PIC, Arduino, ESP and RPi devices. Flowcode for professional users is a paid-for licence which includes compilers for 500 embedded devices and professional user benefits.

Buy Flowcode: https://software.rs-online.com/product-category/software/