Overview:
Liquid crystal displays (LCDs) are commonly used for displaying data in devices such as calculators, microwave, printers and other electronics devices.
In this first tutorial on a 3-part series on using the 128 x 64 LCD module, we will interface the LCD to our Arduino board while controlling its contrast using a Potentiometer. We will also display some text as well as your favorite image of a chosen character.
Hardware used:
128 x 64 LCD module
10K Potentiometer
Breadboard
Jumpers
Software Used:
Arduino IDE
MS Paint
GNU Image Manipulation Program
Application Discussion:
The 128 x 64 LCD module is a 20-pin device used for monitoring data from common devices to electronics projects. It is quite different from the Ordinary LCDs, regular LCD like the 1602 LCD module is limited and can only print simple text, numbers and fixed sized data. However, in 128 x 64 LCD module, we have 128 * 64 that equates to 1024 pixels, so apart from simple text and numbers, we can put images and even play classic games!
128 x 64 LCD display Module
If you want to explore and try a variety of LCDs for your future projects, purchase it now at CreareLabz Store!
Specifications
- Operating voltage: 5 V
- LCD Character: 128*64
- Screen Color: Blue and Green
- Operating temperature: -20 + 70 Celsius
- Size: 92 x 69 x 13 mm
- Weight: 69 g
Potentiometer
Potentiometers are variable resistors and they function to change its resistance while twisting its knob. You have probably used one before by adjusting the volume of your radio or dimming the lights in your room.
In this project, we will control the contrast between the text and the picture you have selected. For further clarification and in-depth discussion of the Potentiometer, refer to THIS PROJECT as it also uses the same concept of manipulating a component by means of a Potentiometer.
Hardware Setup
This is the breadboard connection of the project. All the components are available at CreateLabz Store.
This project only uses 9 pins from the 128 x 64 LCD display module. Pin numbers below are for the 128 x 64 LCD.
Pin 1 Ground Terminal
Pin 2 Input supply voltage (2.7v to 5.5v)
Pin 3 LCD contrast
Pin 4 Register Select RS = 0: Instruction Register RS = 1: Data Register
Pin 5 Read/Write control
Pin 6 Enable
Pin 15 Interface selection
Pin 19 Backlight positive supply
Pin 20 Backlight Negative supply
For the potentiometer, connect the first lead to +5 V, the middle lead to pin 3 on the LCD connector, and the third lead to the ground.
The potentiometer is used on the LCD to change the bias level of the LCD or simply its contrast. Make sure the voltage is optimized for the best appearance, twisting the knob is how it is usually done.
Don’t worry! the remaining pins will have their own moment on the upcoming tutorials, so stick with us. :D
Software Setup
Before we get into the code, let us first discuss the Image, libraries, and software needed for this project.
Image
First, pick your image either from google or your own artwork. I chose Squidward from SpongeBob SqaurePants since it has been my mood for the entire year and basically the summary of 2020.
Save it as JPEG or PNG and open it on your MS Paint from your PC or Laptop.
Next, click resize and replace with a horizontal of 128 pixels and Vertical of 68 pixels to fit perfectly on your LCD.
Make sure to save it as Monochrome Bitmap with your chosen File name.
Download GNU Image Manipulation Program or GIMP.
GIMP is a cross-platform image editor available for GNU/Linux, OS X, Windows and more operating systems. It is FREE software where you can change its source code and distribute your changes.
Next, Open GIMP and Export the photo from previous step with X Bitmap Image.
After exporting the file, you will get the file in “.xbm” format.
Open xbm file from NOTEPAD and you will get the HEX code as shown in picture below. Keep this aside as we will be needing this for our codes later.
Code
Here is our Arduino code for the system. You can download it here or copy the code below.
#include
u8g(10);
const uint8_t rook_bitmap[] U8G_PROGMEM = { Paste Hex Code Here };
void draw() {
u8g.setFont(u8g_font_osb18);
u8g.drawStr( 03, 27, "Createlabz");
u8g.drawStr( 36, 52, "Store");
}
void picture() {
u8g.drawXBMP( 0, 0, 128, 64, rook_bitmap);
}
void next() {
u8g.setFont(u8g_font_unifont);
u8g.drawStr( 07, 18, "Interfacing");
u8g.drawStr( 07, 38, "128 X 64 LCD");
u8g.drawStr( 07, 58, "with Arduino");
}
void clearLCD(){
u8g.firstPage();
do {
} while( u8g.nextPage() );
}
void setup() {
if ( u8g.getMode() == U8G_MODE_R3G3B2 ) {
u8g.setColorIndex(255); // white
}
else if ( u8g.getMode() == U8G_MODE_GRAY2BIT ) {
u8g.setColorIndex(3); // max intensity
}
else if ( u8g.getMode() == U8G_MODE_BW ) {
u8g.setColorIndex(1); // pixel on
}
else if ( u8g.getMode() == U8G_MODE_HICOLOR ) {
u8g.setHiColorByRGB(255,255,255);
}
}
void loop() {
u8g.firstPage();
do {
u8g.drawFrame(1,2,126,62);
draw();
} while( u8g.nextPage() );
delay(2000);
clearLCD();
u8g.firstPage();
do {
u8g.drawFrame(1,2,126,62);
next();
} while( u8g.nextPage() );
delay(2000);
clearLCD();
u8g.firstPage();
do {
picture();
} while( u8g.nextPage() );
delay(2000);
clearLCD();
// rebuild the picture after some delay
delay(50);
} }
Code Breakdown
setup()
setup() is called when a sketch starts. it used to initialize variables, pin modes, and even start using the libraries you have inserted.
loop()
loop() function does precisely what its name suggests, and loops consecutively, allowing your program to change and respond.
The Arduino can be expanded by the use of libraries, much like most of the programming platforms. Libraries have additional features for use in sketches, such as hardware or data manipulation. In this tutorial we will use the U8GLIB library.
#include <U8glib.h>
First we need to define the U8GLIB library used for the 128 x 64 LCD Module. You can download and install this library from this link. If you want to know how to insert Libraries to your Arduino code follow these simple steps here from our previous projects.
u8g(10);
const uint8_t rook_bitmap[] U8G_PROGMEM = { Paste Hex Code Here };
Here, ‘u8g(10)’ is defining the connection of Register Select pin of the 128 x 64 LCD display module and for displaying the image, we need to place the Hex code generated from GIMP tool above.
u8g.drawStr( x, y, "insert text")
x and y are the position coordinates in the LCD where the content will be printed and ‘insert text’ is the content to be displayed.
Output
Here are the images, text, and video of the project where we can see how the potentiometer controls the contrast.
Conclusion:
LCDs are great for graphic display. It is convenient, affordable and reliable to use in a variety of projects. Now that we've got a glimpse of what a 128 x 64 LCD display is, let's explore more on the next tutorials!
References:
Interfacing Graphical LCD (ST7920) with Arduino (circuitdigest.com)
Arduino Temperature and Humidity Sensor using DHT11 and 1602 LCD Modul – CreateLabz Store
