Tutorial: Arduino and Colour LCD

This is chapter twenty-eight 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. Please note that the tutorials are not currently compatible with Arduino IDE v1.0. Please continue to use v22 or v23 until further notice. 

Welcome back fellow arduidans!

Today we are going to start using a colour LCD with our Arduino for data display and other fun and games. (The monochrome LCD article is here).  Although there are many colour LCDs on the market, the first one we examine is relatively inexpensive and easy to mount and use – the Sparkfun “Color LCD Shield“:

From a hardware perspective there isn’t much to do – only solder in some header pins (which, again, are not included) to enable use with out Arduino boards. The quickest way to solder them in is to insert the pins into another Arduino board or shield, place the LCD shield on top, check the alignment, and solder away. The shield pins used are D3~D5 for the three buttons, and D8, 9, 11 and 13 for the LCD interface. The shield takes 5V and doesn’t require any external power for the backlight. The LCD unit is 128 x 128 pixels, with nine defined colours (red, green, blue, cyan, magenta, yellow, brown, orange, pink) as well as black and white.

Hint – there is a huge database of shields and their details at http://shieldlist.org

From a software perspective, the first thing to do is download and install the library for the LCD shield. There are two versions of the library floating around. First of all, please try the original library from here if your shield was purchased before (around) July 2011. If the example sketches do not work, please try the new library from here. (Why? There are two versions of the shield using different controller chipsets. This was made known to me only recently [August 2011] The example sketches are written for the original library and shield. They may not work with the new library and shield. I don’t have a ‘new’ shield and cannot help you with it). Extract and copy the resulting folder into your ..\arduino-2x\libraries folder. Considering there are more parameters to consider as against using a monochrome LCD, there is nothing to worry about. This shield is easy to use and we will prove this in the following examples.

At the start of every sketch, you will need the following lines:

#include "LCD_driver.h"

#include <string.h>

#include <stdlib.h>

#include <stdio.h>

#include <ctype.h>

#include <avr/io.h>

#include <avr/interrupt.h>

#include <avr/pgmspace.h>

#include "WProgram.h"

#include "HardwareSerial.h"

as well as the following in void setup():

ioinit();

LCDInit(); or LCDInit(EPSON) or LCDInit(PHILLIPS) // depends on the chipset on your LCD - see below.

LCDContrast(45); // sets LCD contrast (value between 0~63)

With regards to LCDInit(), try it first without a parameter. If the screen doesn’t work, try PHILLIPS or EPSON instead. There are two versions of the LCD shield floating about each with a different controller chipset. If you have the PHILLIPS chipset, my example sketches may not work. This is out of my control, Sparkfun changed the chipset and some functions have not been defined in the new library. The contrast parameter is subjective, however 45 looks good and will be used in the forthcoming demonstrations. We will examine each function with a small example, then use the LCD shield in more complex applications.

Example 28.1 – Text display

The LCD can display 9 rows of 16 characters of text. The function to display text is:

LCDPutStr("text", y,x, foreground colour, background colour);

where x and y are the coordinates of the top left pixel of the first character in the string. Another necessary function is:

LCDClear(colour);

Which clears the screen and sets the background colour to the parameter colour.

(Please note – when referring to the X- and Y-axis in this article, they are relative to the LCD in the position shown below)

For example, to recreate the following display:

… use the following sketch:

/*  Example 28.1 - Colour LCD shield

tronixstuff.com/tutorials > chapter 28 CC by-sa */
// we need all these for the LCD

#include "LCD_driver.h"

#include <string.h>

#include <stdlib.h>

#include <stdio.h>

#include <ctype.h>

#include <avr/io.h>

#include <avr/interrupt.h>

#include <avr/pgmspace.h>

#include "WProgram.h"

#include "HardwareSerial.h"

void setup()

{

// following two required for LCD

ioinit();

LCDInit();

LCDContrast(45); // sets LCD contrast (value between 0~63)

}

void loop()

{

LCDClear(BLACK);

LCDPutStr("0123456789012345", 0,2, WHITE, BLACK);

LCDPutStr("0123456789012345", 13,2, WHITE, BLACK);

LCDPutStr("0123456789012345", 26,2, WHITE, BLACK);

LCDPutStr("0123456789012345", 39,2, WHITE, BLACK);

LCDPutStr("0123456789012345", 52,2, WHITE, BLACK);

LCDPutStr("0123456789012345", 65,2, WHITE, BLACK);

LCDPutStr("0123456789012345", 78,2, WHITE, BLACK);

LCDPutStr("0123456789012345", 91,2, WHITE, BLACK);

LCDPutStr("0123456789012345", 104,2, WHITE, BLACK);

delay(30000);

}

In example 28.1 we used the function LCDClear();, which unsurprisingly cleared the screen and set the background a certain colour. Let’s have a look at the various background colours in the following example. The LCDClear() function is helpful as it can set the entire screen area to a particular colour. As mentioned earlier, there are the predefined colours red, green, blue, cyan, magenta, yellow, brown, orange, pink, as well as black and white. Here they are in the following example:

Example 28.2

/*  Example 28.2 - Colour LCD shield

tronixstuff.com/tutorials > chapter 28 CC by-sa */

#include "LCD_driver.h"

#include <string.h>

#include <stdlib.h>

#include <stdio.h>

#include <ctype.h>

#include <avr/io.h>

#include <avr/interrupt.h>

#include <avr/pgmspace.h>\

#include "WProgram.h"

#include "HardwareSerial.h"

int del = 1000;

void setup()

{

ioinit();

LCDInit();

LCDContrast(45);

}

void loop()

{

LCDClear(WHITE);

LCDPutStr("White", 39,40, WHITE, BLACK);

delay(del);

LCDClear(BLACK);

LCDPutStr("Black", 39,40, WHITE, BLACK);

delay(del);

LCDClear(YELLOW);

LCDPutStr("Yellow", 39,40, WHITE, BLACK);  delay(del);

LCDClear(PINK);

LCDPutStr("Pink", 39,40, WHITE, BLACK);

delay(del);

LCDClear(MAGENTA);

LCDPutStr("Magenta", 39,40, WHITE, BLACK);

delay(del);

LCDClear(CYAN);

LCDPutStr("Cyan", 39,40, WHITE, BLACK);

delay(del);

LCDClear(BROWN);

LCDPutStr("Brown", 39,40, WHITE, BLACK);

delay(del);

LCDClear(ORANGE);

LCDPutStr("Orange", 39,40, WHITE, BLACK);

delay(del);

LCDClear(BLUE);

LCDPutStr("Blue", 39,40, WHITE, BLACK);

delay(del);

LCDClear(RED);

LCDPutStr("Red", 39,40, WHITE, BLACK);

delay(del);

LCDClear(GREEN);

LCDPutStr("Green", 39,40, WHITE, BLACK);

delay(del);

}

And now to see it in action. The colours are more livid in real life, unfortunately the camera does not capture them so well.

Now that we have had some experience with the LCD library’s functions, we can move on to drawing some graphical objects. Recall that the screen has a resolution of 128 by 128 pixels. We have four functions to make use of this LCD real estate, so let’s see how they work. The first is:

LCDSetPixel(COLOUR, Y, X);

This functions places a pixel (one LCD dot) at location x, y of colour COLOUR. Next is:

LCDSetLine(x0, y0, x1, y1, COLOUR);

Which draws a line of colour COLOUR, from position x0, y0 to x1, y1. Our next function is:

LCDSetRect(x0, y0, x1, y1, fill, COLOUR);

This function draws an oblong or square of colour COLOUR with the top-left point at x0, y0 and the bottom right at x1, y1. Fill is set to 0 for an outline, and 1 for a filled oblong. It would be convenient for drawing bar graphs for data representation. And finally, we can also create circles, using:

LCDDrawCircle(x, y, radius, COLOUR, type);

X and Y is the location for the centre of the circle, radius and COLOUR are self-explanatory. However type presents some more options – FULLCIRCLE, OPENSOUTH, OPENNORTH, OPENEAST, OPENWEST, OPENNORTHEAST, OPENNORTHWEST, OPENSOUTHEAST, OPENSOUTHWEST. These parameters determine how much of the circle’s circumference is drawn. FULLCIRCLE natuarlly generates a whole circle, OPENSOUTH generates the top-half of a circle, OPENNORTH generates the bottom half of a circle, and so on.

We will now use these graphical functions in the following demonstration sketch. For photographic reasons, I will stick with white on black for the colours. The sketch is quite long, so it can be downloaded from the following link – Example 28.3. And here is a short clip of the sketch in action:

That is all we have time for in this instalment. Now you have an explanation of the functions to drive the screen, only your imagination is holding you back. In a future instalment we will examine some another type of colour display – the TFT.

Have fun and keep checking into tronixstuff.com. Why not follow things on twitter, Google+, 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.