Tutorial: Arduino and TFT LCD
Welcome back fellow arduidans! Today we continue with experimenting with colour LCD units. In this article we will get started with a very clear and sharp unit – the 4D Systems 1.44″ TFT serial interface LCD: The LCD is an LED-backlit thin-film transistor type, resolution is 128 x 128 pixels, with an RGB colour range of 65536. As an aside, this is a very powerful piece of hardware. The module not only contains a 1.44″ square TFT LCD, there is also a dedicated graphics processor and a microSD card interface. One can program the display processor in the same manner as another microcontroller platform for incredibly interesting results. For more information, please visit here. However in the spirit of keeping things simple, this article will focus on driving the LCD directly using our Arduino or compatibleboards. There are two firmware versions of this module – the GFX and the SGC. We need to have the SGC firmware, as this allows control via the serial TX/RX pins from our Arduno board. If you have purchased the SGC module, you’re ready to go. Scroll down until you see “And we’re back…”. However if you have the GFX version, please read the following instructions on how to change your LCD’s firmware from GFX to SGC… Changing the firmware from GFX to SGC … and the following on your LCD: And we’re back… To control this LCD, it requires commands to be sent via Serial.write(), and such commands are in the form of hexadecimal numbers. (You see something new every day). You can download the reference book with all the commands: SGC Commands.pdf and bypass the library by directly writing the hexadecimal numbers directly to the module. However, to get up to speed as fast as possible we can use a library with more of the popular functions included. Kudos and thanks to Oscar Gonzalez for writing a very useful library. Download the library from here and install into your ../Arduino-002x/libraries folder, then re-start the Arduino IDE if you had it running. You may be wondering why the library is nameddisplayshield4d - the LCD manufacturer sells this LCD on an Arduino shield. Although that would be great for experimenting, one would need to purchase another standalone LCD if their project moved forward – myself included. So that’s why we’re using the bare LCD board. To connect the LCD to our Arduino is very simple: In the following examples we will demonstrate the various functions available in the library. As this is chapter 29, (when will this stop?) I will no longer explain the more basic functions or ideas that you should know by now, instead relying on comments within the sketch if it feels necessary. Firstly we will demonstrate text display. Initialising the display requires a few functions: The second line creates an instance of lcd to be used with the relevant functions. Next, within void setup(): To write text to the LCD, the following function is required: This line sets the font transparency. If we use the parameter OLED_FONT_TRANSPARENT the unused pixels in the character area will be transparent and continue to show what they were set to before the text was over-written with. You can also useOLED_FONT_OPAQUE, which blocks the item displayed “behind” the text. Whenever a function requires a colour parameter, we use: where x, y and z are numerical values (between 0 and 255) for the red, green and blue components of the required colour. If you need an RGB numerical reference, download this handy chart. Finally, to display some text we use the following: The parameters required are: Now let’s see this in action with the following sketch: Example 29.1. And a short video clip of the example in action:
As you can see the display update speed is much better than the LCD from the previous chapter. Although this example was short, don’t be afraid to try out your own parameters in the example sketch. Next we will demonstrate the various graphics functions in the library. Creating graphics isn’t rocket science, it just takes some imagination (something I admit to lacking) and following the parameters for each function. Our first is which places a pixel on the screen at location x,y of colour described using lcd.RGB(). Next we have which draws a line from x1, y1 to x2, y2 of colour rgb. One can also create rectangles and so on using This will create a rectangle with the top-left point at x,y; width is l pixels, height is h pixels, and a new parameter z. If z is 0, the function will draw a solid shape, if z is 1, it will display only a wire-frame rectangle with a pixel width of one. Circles are created using where x and y are the coordinates for the centre of the circle, r is the radius, and z is the solid/wireframe parameter. And finally – triangles: This will draw a triangle with the corners at the coordinate parameters; z again is the solid/wireframe parameter. However you need to order the corners in an anti-clockwise order. This will become evident in the example sketch: Example 29.2. In this example we run through the graphical functions described above. By following through the sketch you should gain an idea of how the graphical functions are used, in order to create your own displays.
So there you have it, another useful part and a very nice colour LCD to make use of. Stay tuned for upcoming Arduino tutorials by subscribing to this blog. If you have any questions about the processes or details in this article, please ask in our Google Group – dedicated to the projects and related items on this website. Sign up – it’s free, there is the odd competition or give-away – and we can all learn something. Otherwise, have fun, stay safe, be good to each other – and make something!
#include <displayshield4d.h> // include the LCD library
DisplayShield4d lcd;
Serial.begin(115200); // LCD speed is very high
lcd.Init(); // wake up LCD
lcd.Clear(); // clear the LCD, set background to black
lcd.setfontmode(OLED_FONT_TRANSPARENT); // set font background type
lcd.RGB(x,y,z);
lcd.drawstringblock(a, b, c, lcd.RGB(255, 255, 255), d, e, "Hello, world");
lcd.putpixel(x,y,lcd.RGB(r,g,b));
lcd.line(x1,y1,x2,y2,lcd.RGB(r,g,b));
lcd.rectangle(x,y,l,h,z,lcd.RGB(r,g,b));
lcd.circle(x,y,r,z,lcd.RGB(r,g,b);
lcd.triangle(x1,y1,x2,y2,x3,y3,z,lcd.RGB(r,g,b));
And here is the video of example 29.2 in action … brought to you by Mr Blurrycam:




