Welcome to MOD-ED, the series where we take a look at modules that you can use in your
DIY projects. Today, we will be taking a look at this LCD module that can be easily used
with an Arduino. Here’s what we will be covering:
We will learn more about module itself, and how it works
We will then install the required Arduino libraries and test several demo example sketches,
which will include displaying images from the microSD card
We will then create a simple demo project that will allow us to control an external
LED by touching the buttons on screen Finally, we will look at some of the examples
that can be used as a source of inspiration
The module itself is very inexpensive. I purchased this one for about £8 on ebay and you can
also get it for much less elsewhere. The display has a resolution of 480x320 pixels and it
also has a resistive touchscreen which means that we can use it as an input device.
If you look carefully at the side of module then you will see two glass panels and two
flexible cables. The one at the bottom is the actually LCD panel that gives us the display
and the one at the top is the touchscreen panel which is place on top of the LCD panel.
We have taken a quick look at LCD displays in last week’s video but in summary: they
have a bright light source which is called a backlight along with several polarizing
filters and the liquid crystal itself which makes up something called a pixel.
The number of pixels depend on the screen resolution and this one has 480 pixels this
way and 320 the other way. Each pixel is made up of a sub-pixel that is coloured red, green
or blue.
The liquid crystal that is present within the pixel can be controlled using electrical
charge and by doing this we can control the amount of light that flows through the display
panel. By adjusting the amount of red, green or blue light, we can produce millions of
colours which make up the final image we seen on screen.
For the touch input, it uses a 4-wire resistive
configuration and this can be seen by these 4 lines which are present here. Two of them
are connected at these two ends while the remaining two are connected at the other ends.
The touchscreen is made up of resistive material which means that the resistance across the
panel will change when you touch it. The simplest way for me to explain how this can be used
to obtain the input is by using something like the following:
Say you have the 4 wires or terminal as shown here. Lets apply 5V to terminal 4 and 0V or
GND to terminal 2. Now, if I touch my finger at this position, it will change the resistance
such that a voltage divider network will form between these two points. Terminal 3 can be
used to read this voltage and it will be the same no matter where we are along this line
shown here. This way, we can obtain the position of the touch point along one axis, let’s
call it X-axis. Terminal 1 is not used in this situation.
Now, we can set terminal 1 to 5V, and terminal 3 to GND. By doing this, we can use terminal
4 to sense the voltage along the Y axis. By knowing both these values, we can determine
the location at which we touched the display. If you are interested in learning more, then
I will leave a link to this page which goes into more detail and talks about the construction
of the different layers and so on. It will give you a good understanding about how the
touch screen works.
On the bottom side we have two chips which are octal bus transceivers or buffers in other
words. We also have a microSD card slot that can be used to store images for instance.
In fact, we will learn how to read and display images from it later on. So that is a bit
about how the module works. It is designed to be an Arduino shield, which means that
you can plug it into an Arduino UNO or Mega 2560 board without having to wire anything
else.
In order to use the module we first need to install an Arduino library so open up the
Arduino IDE and then head over to the library manager. Search for MCUfriend and then install
the library that shows up. We also need the Adafruit GFX library so search for that and
install it as well. Close the window when done.
Lets try out a few demos to make sure the LCD module is working as it should. Open up
the GLUE_Demo_480x320 example sketch. This will demonstrate some of the capabilities
of the module. Everything is preconfigured for us so we do not need to make any changes.
Plug in the board and use the tools menu to select the correct board along with the COM
port. Once done, click the upload button to upload the code.
Wait for it to complete and you will then be able to view different examples to give
you an idea of the things that you can draw.
The sketch is well commented so you can analyse the code to understand how it all works and
use it to create your own examples. Another interesting example is the graphicstext_kbv
sktech that consists of a lot of functions which can be used to create several geometrical
patterns. It also displays a penguin logo which is stored in program memory as a hexadecimal
representation.
The touchscreen capabilities can be tested by using the touch shield example sketch.
This will show you the XY co-ordinates as you touch the screen. If you exit this screen,
then you will be taken to the drawing screen where you can draw things using your finger
or stylus. You can even change the draw colour and so on.
In my case, the touch panel seems to be working correctly, but if it doesn’t work properly
for you then you can calibrate it using an example sketch. Open up this calibration sketch
and upload it to the board. I’d recommend opening up the serial monitor before proceeding.
Then, touch the screen to start the calibration process. You need to press and hold the cross-hair
cursor that is highlighted and you need to release it when the text tells you to release
it. You will need to repeat this for each of the cursors and you will finally be presented
with the calibration values on screen which need to be used to update the calibration.
These are also provided on the serial terminal and can be copied from there.
Next we will display images from a microSD card. First, you need to reformat the microSD
card in the FAT file system. This can be done by using a USB card reader to access the card
contents.
You then need to right click the drive, select the format option and then the FAT file system
option shown here. Click format and wait for it to complete. Then, copy the images that
you want to display to the microSD card. They have to be in the BMP format and it is advisable
to resized them to the display resolution which is 480x320 in our case.
Once done, insert the microSD card into the module and then power it ON. Open up the showBMP
example sketch as seen here and upload it to the board. The images will automatically
start being displayed with a 5 second interval between each image. You will notice that the
images are getting cropped a bit and this is because by default, they are displayed
in the portrait mode starting from this corner.
The simplest way to fix this is by inserting the microSD card into your computer and then
rotating the images as seen here. Now, if you plug it back in and power ON the board,
they will get displayed correctly.
If you want to update the display duration, then you can navigate to line 76 and update
the delay shown here. Let’s make it 2 seconds for instance. The images will now cycle through
much faster.
By default, all the images from the root directory will get displayed, but you can update the
sketch to only display images that contain a particular word in the file name. For example,
I will only display the images which have the word pcb in their name. You can even
specify the directory if you want but I will simply use the root for now. If I upload this
sketch then you will see that it will only display the pcb images. You can use this sketch
to create a digital photo frame for instance, among other things.
It is now time to interact with the display using the touch interface. Open up the button_simple
example sketch and upload it to the board.
You will obtain something like this on the display – two buttons and a red rectangle.
When I touch the ON button, the colour of the rectangle will change to green. When I
touch the OFF button, it will switch back to red.
The sketch itself is pretty easy to understand. We draw the two buttons along with a rectangle
and we than take the necessary action when a button is pressed. You can analyse this
code to understand how it works at a deeper level and this can be used as a starting point
for you to create some interactive programs with the Arduino Uno.
As an example. I am going to configure the built-in LED and switch it ON based on the
button that is pressed. I will upload this sketch to the board. Since the shield covers
the LED, I will solder an external LED to pin 13 which is the same pin as the built-in
LED. Now, when I touch the ON button, the rectangle will change colour and the LED will
switch ON. Similarly, it will switch OFF when the OFF button is touched. This way, you can
trigger a lot of different things and send serial commands for instance, which will allow
you to interact with your program and devices.
Before we move on, I would like to point you to this guide which shows you some of the
possibilities with this display along with examples. It starts by giving you a better
understanding about how the display works and uses the same library that we have used
in this video. You can use this post as a quick reference to learn how to draw different
lines, geometries, display text and so on. There are also predesigned templates that
you can use to speed up your project, these include a loading template, logo presentation,
a dot chart, some more visual representation screens, music control, an instrument cluster
and finally a nice looking calendar.
All in all, I think this is a very easy way by which you can take your Arduino projects
to a whole new level. Most of the work has already been done for you so it’s all about
integrating whatever you like to create the end result. I do hope this has been of some
use to you. We will continue learning about new modules as we go along, so don’t forget
to like, share and subscribe if you haven’t already. Thank you for watching and I will
see you in the next one!