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!
