How to Display a Custom Image on a Graphic LCD
Blaze Display Technology Co., Ltd. | Updated: Nov 27, 2018
Graphic LCD displays can be used to display a variety of information, including text, images, and graphs. This article will walk you through the steps to display custom images on a graphic LCD. We will start by creating the graphic in a graphics editor. Once the graphic is created, we must convert it into a format that the LCD display can understand. We can do this using a tool such as the LCD Assistant. Finally, we will write some code to display the graphic on the LCD display.
Hardware and Tools
l Arduino UNO
l Graphic LCD: NHD-14432WG-BTFH-V#T
l Single row pin header connector
l Breadboard
l Jumper wires
l Solder and soldering iron
l USB A male to B Male Cable (printer cable)
l Arduino IDE
l Image editing software such as MS Paint and GIMP (optional)
l LCD Assistant software to convert monochromatic bitmap images to image data arrays (optional)
Graphic LCD Pinout (Parallel Interface)
The Newhaven display NHD-14432WG-BTFH-V#T is a 144x32 pixel graphic LCD module with the ST7920 controller. It uses parallel communication and operates at a supply voltage of 5V.
This 16-pin character LCD is available with or without a pre-soldered 16-pin header and can be purchased here. The display data sheet can be viewed or downloaded here.
Circuit - Connection Diagram and Schematic
Connection diagram
Schematic
Create a Custom Graphic
To display a custom or pre-existing image on a graphic LCD, the image needs to be converted into a format compatible with the LCD, often in the form of a data array. Various graphic design tools, such as Microsoft Paint, GIMP, and Photoshop, can help with this task. However, for the scope of this tutorial, we will focus on using Microsoft Paint.
How to create a custom image for a graphic LCD
Open a new file in Microsoft Paint.
1. Go to File -> Properties.
2. Set the following properties:
l Units: Pixels
l Colors: Black and White
l Width: Number of pixels wide of your display (144 in our example)
l Height: Number of pixels high of your display (32 in our example)
4. Go to the “View” tab and check “Gridlines.”
5. Use the tools to create a custom graphic.
6. Go to File -> Save as, create a file name for your graphic and select Save as type: Monochrome Bitmap (*.bmp;*.dib).
In the image settings above, the color mode is set to monochrome for optimal compatibility and the image size of 144 x32 matches the LCD screen dimensions so the image fits perfectly in the screen.
Convert the Graphic to a Data Array Converting a graphic to a data array typically involves extracting the pixel color data from an image and representing it numerically in a data array. There are several methods and tools available for this conversion, such as programming libraries, custom software, and online tools. In this tutorial, we will be using the LCD Assistant software.
1. Open the LCD Assistant software: Download Here.
2. Set byte orientation to “Horizontal.”
3. Go to File -> Load Image and select the BMP file for your graphic.
4. Go to File -> Save Output and save the file name with a .h extension.
5. Open the .h file to copy the data array.
Whether you choose LCD Assistant or GIMP, the goal is to get a numerical representation of your image similar to the example for this tutorial.
Add the Image Data Array to the Example Code
There are two primary methods to incorporate the image data array into your Arduino sketch: directly embedding the data within the sketch or using a separate header file. For this tutorial, we will use a separate file in the same project directory. Your project folder should have the .h image data array file and the .ino file with the Arduino example code below.
Copy Example Code to Arduino IDE
Open the Arduino IDE and start a new Sketch. Clear any pre-existing code, then copy and paste the code.
Functions Overview:
l The command() function sends a command to the LCD.
l The data() function sends data to the LCD.
l The disp() function displays a 144x32 graphic on the LCD.
l The fill() function turns on all pixels of the LCD.
l The clear() function turns off all pixels of the LCD.
l The Initialization_Sequence() function sends the required instructions for initializing the LCD.
l The setup() function is the main function and is executed when the Arduino starts. The setup function calls the Initialization_Sequence() function, then turns on and off all the pixels on the LCD.
l The loop() function runs continuously after the setup() function is finished. The function calls the disp() function with the graphic data array as the argument.
Upload the Code to Arduino
1. Connect the Arduino to your PC with the USB-B cable.
2. In the Arduino IDE, select the board and port.
3. Click the “Upload” button to program the Arduino with your code.
Once the code is successfully uploaded, your custom image should appear on the LCD screen.
Conclusion
Displaying custom images on a graphic LCD can enhance the user experience and provide a more interactive interface. By following the steps outlined in this article, from graphic creation to code implementation, users can seamlessly integrate custom graphics into their LCD displays. Whether you're using an Arduino Uno or another microcontroller, the principles remain consistent, ensuring a smooth process for all.