Interface Nokia 5110 Graphic LCD Display with Arduino

Think back to the pre-iPhone era, when the only time you touched your phone’s tiny black-and-white LCD screen was to wipe it clean. Back then, Nokia’s 3310 and 5110 cell phones used these tiny LCDs.

As technology progressed, these displays found a new place in the world of DIY. They quickly gained popularity among hobbyists due to their small size (about 1.5″), low cost, ease of use, low power consumption, and ability to display text as well as bitmaps.

Hardware Overview

PCD8544 LCD Driver

At the heart of the module is a powerful single-chip low power CMOS LCD driver controller from Philips – PCD8544.

The PCD8544 uses an SPI-like serial bus interface to communicate with microcontrollers and is designed to operate an 84×48 pixel graphic display.

The PCD8544 controller’s on-chip LCD supply and bias voltage generation reduces power consumption, making it suitable for power-sensitive applications. The LCD normally consumes only 6 to 7 mA.

According to the datasheet, this chip operates in the 2.7 to 3.3 V range and has 3V communication levels. Therefore, in order to interface it with a 5V logic microcontroller such as Arduino, some sort of logic level shifting is required.

LCD Backlight

The LCD has a backlight that is available in four different colors: red, green, blue, and white.

The backlight is made up of four LEDs spaced around the display’s edges. To change the LCD’s backlight, remove the LCD from the board by pushing the metal clips on the back side. You’ll notice four LEDs soldered around the display’s edges. Simply replace the LEDs with the desired color LEDs.

Nokia 5110 LCD Memory Map

The PCD8544 LCD driver includes 504 bytes of Graphic Display Data RAM (GDDRAM) that stores the bit pattern to be displayed on the screen. This memory area is divided into 6 banks (from 0 to 5). Each bank has 84 columns/segments (from 0 to 83). And each column can store 8 bits of data (from 0 to 7). That certainly proves that we have:

6 banks x 84 segments x 8 bits of data = 4032 bits = 504 bytes

The entire memory, including banks, segments, and data, is highlighted below.

Each bit represents a single pixel on the screen that can be turned ON or OFF programmatically.

Technical Specifications

Here are the specifications:

Nokia 5110 LCD Display Module Pinout

The Nokia 5110 LCD display module has the following pinout:

RST pin is used to reset the display. It is an active low pin, which means that by pulling it low, the display can be reset. By connecting this pin to the Arduino’s reset, the screen will be automatically reset.

CE (Chip Enable) pin is used to select one of several connected modules that share the same SPI bus. It’s also an active low pin.

D/C (Data/Command) is used by the library to separate the commands (such as setting the cursor to a specific location, clearing the screen, etc.) from the data.

DIN is a serial data pin.

CLK is a serial clock pin.

VCC pin supplies power to the LCD, and it should be connected to 3.3V.

BL (Backlight) pin controls the backlight of the display. By connecting this pin to any PWM-capable Arduino pin or by using a potentiometer, the brightness can be controlled.

GND is the ground pin.

Wiring a Nokia 5110 LCD Display to an Arduino

Let’s connect the LCD to an Arduino.

Connections are straightforward. The serial clock(CLK), serial data(DIN), data/command(DC), chip enable(CE) and reset(RST) pins are connected from pin 7 to pin 3 on the Arduino.

Unfortunately, the LCD has a maximum input voltage of 3.6V, so we can’t connect it directly to a standard 5V Arduino. We need to shift levels.

One of the simplest ways to shift levels is to add resistors in-line with data pins. Simply add 10k resistors in-line with the CLK, DIN, D/C, and RST pins, as well as a 1k resistor in-line with the CE pin.

Finally, the backlight(BL) pin is connected to 3.3V through a 330Ω current limiting resistor. If you want to control the brightness, add a potentiometer or connect this pin to any PWM-capable Arduino pin.

The following table lists the pin connections:

The following diagram shows the wiring.

Library Installation

The PCD8544 LCD controller has flexible but complex drivers. To use the PCD8544 controller, extensive knowledge of memory addressing is required. Fortunately, the Adafruit PCD8544 Nokia 5110 LCD library was written to hide the complexities of the PCD8544 controller, allowing us to control the display with simple commands.

To install the library, navigate to Sketch > Include Library > Manage Libraries… Wait for the Library Manager to download the library index and update the list of installed libraries.

Filter your search by typing ‘nokia‘. There should be a few entries. Look for Adafruit PCD8544 Nokia 5110 LCD library. Click on that entry, and then choose Install.

This library is a hardware-specific library that handles lower-level functions. To display graphics primitives such as points, lines, circles, and rectangles, it must be paired with the Adafruit GFX Library. Install this library as well.

Internally, the Adafruit PCD8544 library makes use of the Adafruit Bus IO Library. So, look for Adafruit BusIO in the library manager and install it as well.

Arduino Example Code 1 – Displaying Text

Now comes the exciting part! Here’s a simple sketch that will do the following:

• Display simple text
• Display Inverted text
• Display Numbers
• Display Numbers with base (Hex, Dec)
• Display ASCII symbols
• Rotate Text

This sketch will provide you with a thorough understanding of how to operate the Nokia 5110 LCD display and can serve as the foundation for more practical experiments and projects. Try out the sketch, and then we’ll go over it in detail.

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_PCD8544.h>

// Declare LCD object for software SPI
// Adafruit_PCD8544(CLK,DIN,D/C,CE,RST);
Adafruit_PCD8544 display = Adafruit_PCD8544(7, 6, 5, 4, 3);

int rotatetext = 1;

void setup()   {
	Serial.begin(9600);

	//Initialize Display
	display.begin();

	// you can change the contrast around to adapt the display for the best viewing!
	display.setContrast(57);

	// Clear the buffer.
	display.clearDisplay();

	// Display Text
	display.setTextSize(1);
	display.setTextColor(BLACK);
	display.setCursor(0,0);
	display.println("Hello world!");
	display.display();
	delay(2000);
	display.clearDisplay();


	// Display Inverted Text
	display.setTextColor(WHITE, BLACK); // 'inverted' text
	display.setCursor(0,0);
	display.println("Hello world!");
	display.display();
	delay(2000);
	display.clearDisplay();

	// Scaling Font Size
	display.setTextColor(BLACK);
	display.setCursor(0,0);
	display.setTextSize(2);
	display.println("Hello!");
	display.display();
	delay(2000);
	display.clearDisplay();

	// Display Numbers
	display.setTextSize(1);
	display.setCursor(0,0);
	display.println(123456789);
	display.display();
	delay(2000);
	display.clearDisplay();

	// Specifying Base For Numbers
	display.setCursor(0,0);
	display.print("0x"); display.print(0xFF, HEX); 
	display.print("(HEX) = ");
	display.print(0xFF, DEC);
	display.println("(DEC)"); 
	display.display();
	delay(2000);
	display.clearDisplay();

	// Display ASCII Characters
	display.setCursor(0,0);
	display.setTextSize(2);
	display.write(3);
	display.display();
	delay(2000);
	display.clearDisplay();

	// Text Rotation
	while(1)
	{
	display.clearDisplay();
	display.setRotation(rotatetext);  // rotate 90 degrees counter clockwise, can also use values of 2 and 3 to go further.
	display.setTextSize(1);
	display.setTextColor(BLACK);
	display.setCursor(0,0);
	display.println("Text Rotation");
	display.display();
	delay(1000);
	display.clearDisplay();
	rotatetext++;
	}
}

void loop() {
}

This is what the output looks like.

Code Explanation:

The sketch begins with the inclusion of three libraries: SPI.h, Adafruit_GFX.h, and Adafruit_PCD8544.h.

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_PCD8544.h>

The next step is to create an object of Adafruit_PCD8544.h. The Adafruit_PCD8544 constructor accepts five Arduino pin numbers, which are connected to the display’s CLK, DIN, D/C, CE, and RST pins. There is also a rotatetext variable defined, the significance of which will become clear in a moment.

// Initialize LCD object for software SPI
// Adafruit_PCD8544(CLK,DIN,D/C,CE,RST);
Adafruit_PCD8544 display = Adafruit_PCD8544(7, 6, 5, 4, 3);

int rotatetext = 1;

In the setup function, we initialize the LCD object using the begin() function. We also set the contrast of the display using the setContrast(value) function, where value can range from 0 to 100. However, a value of 50-60 produces excellent results.

After that, we clear the buffer before printing our first message to the screen.

//Initialize Display
display.begin();

// you can change the contrast around to adapt the display for the best viewing!
display.setContrast(57);

// Clear the buffer.
display.clearDisplay();

Displaying simple Text (Hello World)

// Display Text
display.setTextSize(1);
display.setTextColor(BLACK);
display.setCursor(0,0);
display.println("Hello world!");
display.display();
delay(2000);
display.clearDisplay();

To display text on the screen, we must first set the font size. This can be accomplished by calling setTextSize() and passing a non-negative number (starting from 1) as a parameter.

Next, we set the font color by calling the function setTextColor(). Pass BLACK for a dark background and WHITE for a bright one.

Before printing the message, we must first set the cursor position by calling the setCursor(X,Y) function. Pixels on the screen are referenced by their horizontal (X) and vertical (Y) coordinates. The origin (0,0) is located in the upper left corner, with positive X increasing to the right and positive Y increasing downward.

To print the message on the screen, we can use the print(" ") or println(" ") functions, similar to how we print data on the serial monitor. Keep in mind that println() will move the cursor to the next line.

The final step is to use the display() command to instruct the library to bulk transfer the screen buffer to the PCD8544 controller’s internal memory and display the contents on the LCD.

Displaying Inverted Text

// Display Inverted Text
display.setTextColor(WHITE, BLACK);
display.setCursor(0,0);
display.println("Hello world!");
display.display();
delay(2000);
display.clearDisplay();

To display inverted text, we use the setTextColor(FontColor, BackgroundColor) function. If you’ve been paying attention, you’ll notice that we previously passed only one parameter to this function, but now we’re passing two. This is possible due to function overloading.

In this case, using setTextColor(BLACK, WHITE) results in black text on a filled background.

Scaling Font Size

// Scaling Font Size
display.setTextColor(BLACK);
display.setCursor(0,0);
display.setTextSize(2);
display.println("Hello!");
display.display();
delay(2000);
display.clearDisplay();

Earlier in this tutorial, we used the setTextSize() function to set the font size. You can scale the font by passing any non-negative integer to this function.

Characters are rendered in a 5:7 ratio. In other words, passing font size 1 renders the text at 5×7 pixels per character, passing font size 2 renders the text at 10×14 pixels per character, and so on.

Displaying Numbers

// Display Numbers
display.setTextSize(1);
display.setCursor(0,0);
display.println(123456789);
display.display();
delay(2000);
display.clearDisplay();

The print() or println() functions can be used to display numbers on the LCD. Because an overloaded implementation of these functions accepts 32-bit unsigned int values, you can only display numbers ranging from 0 to 4,294,967,295.

Specifying Base For Numbers

// Specifying Base For Numbers
display.setCursor(0,0);
display.print("0x"); display.print(0xFF, HEX); 
display.print("(HEX) = ");
display.print(0xFF, DEC);
display.println("(DEC)"); 
display.display();
delay(2000);
display.clearDisplay();

The print() and println() functions have an optional second parameter that specifies the base (format); valid values are BIN (binary, or base 2), OCT (octal, or base 8), DEC (decimal, or base 10) and HEX (hexadecimal, or base 16). For floating-point numbers, this parameter specifies the number of decimal places to use. For instance:

• print(78, BIN) prints “1001110”
• print(78, OCT) prints “116”
• print(78, DEC) prints “78”
• print(78, HEX) prints “4E”
• println(1.23456, 0) prints “1”
• println(1.23456, 2) prints “1.23”
• println(1.23456, 4) prints “1.2346”

Displaying ASCII Symbols

// Display ASCII Characters
display.setCursor(0,0);
display.setTextSize(2);
display.write(3);
display.display();
delay(2000);
display.clearDisplay();

The print() and println() functions send data to the display as human-readable ASCII text, whereas the write() function sends binary data to the display. This function can thus be used to display ASCII symbols. For example, sending 3 displays a heart symbol.

Text Rotation

// Text Rotation
while(1)
{
	display.clearDisplay();
	display.setRotation(rotatetext);
	display.setTextSize(1);
	display.setTextColor(BLACK);
	display.setCursor(0,0);
	display.println("Text Rotation");
	display.display();
	delay(1000);
	display.clearDisplay();
	rotatetext++;
}

You can rotate the contents of the display by using the setRotation() function. It allows you to view your display in either portrait or landscape mode.

This function takes only one parameter, which corresponds to four cardinal rotations. This can be any non-negative integer beginning with 0. When you increase the value, the display’s contents rotate 90 degrees anticlockwise. For example:

• 0 – Maintains the screen’s standard landscape orientation.
• 1 – Rotates the screen 90 degrees to the right.
• 2 – Flips the screen upside down.
• 3 – Rotates the screen 90 degrees to the left.

Arduino Example Code 2 – Basic Drawings

Here’s a simple sketch that demonstrates how to draw basic shapes like rectangles, circles, and triangles. Try out the sketch, and then we’ll go over it in detail.

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_PCD8544.h>

// Declare LCD object for software SPI
// Adafruit_PCD8544(CLK,DIN,D/C,CE,RST);
Adafruit_PCD8544 display = Adafruit_PCD8544(7, 6, 5, 4, 3);

void setup()   {
	Serial.begin(9600);

	//Initialize Display
	display.begin();

	// you can change the contrast around to adapt the display for the best viewing!
	display.setContrast(57);

	// Clear the buffer.
	display.clearDisplay();

	// Draw Rectangle
	display.drawRect(0, 0, 60, 40, BLACK);
	display.display();
	delay(2000);
	display.clearDisplay();

	//Draw Filled Rectangle
	display.fillRect(0, 0, 60, 40, BLACK);
	display.display();
	delay(2000);
	display.clearDisplay();

	//Draw Round Rectangle
	display.drawRoundRect(0, 0, 60, 40, 8, BLACK);
	display.display();
	delay(2000);
	display.clearDisplay();

	//Draw Filled Round Rectangle
	display.fillRoundRect(0, 0, 60, 40, 8, BLACK);
	display.display();
	delay(2000);
	display.clearDisplay();

	//Draw Circle
	display.drawCircle(20, 20, 20, BLACK);
	display.display();
	delay(2000);
	display.clearDisplay();

	//Draw Filled Circle
	display.fillCircle(20, 20, 20, BLACK);
	display.display();
	delay(2000);
	display.clearDisplay();

	//Draw Triangle
	display.drawTriangle(20, 0, 0, 40, 40, 40, BLACK);
	display.display();
	delay(2000);
	display.clearDisplay();

	//Draw Filled Triangle
	display.fillTriangle(20, 0, 0, 40, 40, 40, BLACK);
	display.display();
	delay(2000);
	display.clearDisplay();
}

void loop() {
}

This is what the output looks like.

Most of the code (setting up the display) is the same as the above code example, except for the following code snippets that draw basic shapes.

Drawing Rectangle

// Draw Rectangle
display.drawRect(0, 0, 60, 40, BLACK);
display.display();
delay(2000);
display.clearDisplay();


//Draw Filled Rectangle
display.fillRect(0, 0, 60, 40, BLACK);
display.display();
delay(2000);
display.clearDisplay();

The drawRect() function can be used to draw a rectangle on the screen. This function accepts five parameters: X and Y coordinates, width, height, and color. This function actually draws a hollow rectangle with a 1 pixel border. The fillRect() function can be used to draw a filled rectangle.

Drawing Round Rectangle

//Draw Round Rectangle
display.drawRoundRect(0, 0, 60, 40, 8, BLACK);
display.display();
delay(2000);
display.clearDisplay();


//Draw Filled Round Rectangle
display.fillRoundRect(0, 0, 60, 40, 8, BLACK);
display.display();
delay(2000);
display.clearDisplay();

The drawRoundRect() function can be used to draw a round rectangle on the screen. This function accepts the same parameters as drawRect(), with the exception of one additional parameter – the radius of corner rounding. This function actually draws a hollow round rectangle with a 1 pixel border. The fillRoundRect() function can be used to draw a filled round rectangle.

Drawing Circle

//Draw Circle
display.drawCircle(20, 20, 20, BLACK);
display.display();
delay(2000);
display.clearDisplay();

//Draw Filled Circle
display.fillCircle(20, 20, 20, BLACK);
display.display();
delay(2000);
display.clearDisplay();

The drawCircle() function can be used to draw a circle on the screen. This function accepts four parameters: the X coordinate of the center, the Y coordinate of the center, the radius, and the color. This function draws a hollow circle with a 1 pixel border. The fillCircle() function can be used to draw a filled circle.

Drawing Triangle

//Draw Triangle
display.drawTriangle(20, 0, 0, 40, 40, 40, BLACK);
display.display();
delay(2000);
display.clearDisplay();


//Draw Filled Triangle
display.fillTriangle(20, 0, 0, 40, 40, 40, BLACK);
display.display();
delay(2000);
display.clearDisplay();

The drawTriangle() function can be used to draw a triangle on the screen. This function accepts seven parameters: three X and Y coordinates (x0, y0, x1, y1, x2 & y2) of triangle vertices, and a color. (X0, y0) is the top vertex, (x1, y1) is the left vertex, and (x2, y2) is the right vertex.

This function draws a hollow triangle with a 1 pixel border. The fillTriangle() function can be used to draw a filled triangle.

Arduino Example Code 3 – Displaying Bitmap

Our last example shows how to draw bitmap images on the Nokia 5110 LCD display. This comes in handy when displaying things like logos, sprites, infographics, or icons.

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_PCD8544.h>

// Declare LCD object for software SPI
// Adafruit_PCD8544(CLK,DIN,D/C,CE,RST);
Adafruit_PCD8544 display = Adafruit_PCD8544(7, 6, 5, 4, 3);

// 'Marilyn Monroe 84x48', 84x48px
const unsigned char MarilynMonroe [] PROGMEM = {
	0x00, 0x00, 0x00, 0x7f, 0x00, 0x02, 0xfe, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xbe, 0x00, 
	0x00, 0x1f, 0xe0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x20, 0x00, 0x00, 0x3f, 0x80, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0xf0, 0x00, 0x00, 0x1f, 0xe1, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0xc0, 
	0x00, 0x00, 0x0f, 0xf1, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0e, 0xd8, 0xe0, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x1f, 0x80, 0x00, 0x07, 0xe0, 0x70, 0x00, 0x00, 0x00, 0x00, 0x03, 
	0x3f, 0xe0, 0x00, 0x07, 0xf0, 0x78, 0x00, 0x00, 0x00, 0x00, 0x01, 0xe0, 0x70, 0x00, 0x0f, 0xee, 
	0x7c, 0x00, 0x00, 0x00, 0x00, 0x03, 0xc0, 0x00, 0x00, 0x0f, 0xf7, 0x1c, 0x00, 0x00, 0x00, 0x00, 
	0x07, 0x80, 0x00, 0x0f, 0xc7, 0xf3, 0x1e, 0x00, 0x00, 0x00, 0x00, 0x07, 0xc0, 0x00, 0x0f, 0xf3, 
	0xdf, 0x7f, 0x80, 0x00, 0x00, 0x00, 0x07, 0xfe, 0x00, 0x08, 0x7d, 0xef, 0xff, 0xc0, 0x00, 0x00, 
	0x00, 0x7f, 0xff, 0x80, 0x30, 0x0f, 0xfc, 0xe0, 0xc0, 0x00, 0x00, 0x01, 0x9e, 0x73, 0xc0, 0xe0, 
	0x07, 0xf8, 0xc1, 0xc0, 0x00, 0x00, 0x03, 0xfc, 0x00, 0x01, 0xc0, 0x0f, 0xfd, 0xe1, 0x80, 0x00, 
	0x00, 0x03, 0xf8, 0x00, 0x01, 0x9c, 0x0f, 0xff, 0xc1, 0xc0, 0x00, 0x00, 0x02, 0xc0, 0x00, 0x01, 
	0x9f, 0xbf, 0xfe, 0x01, 0x40, 0x00, 0x00, 0x02, 0x60, 0x00, 0x03, 0x07, 0xef, 0xff, 0x01, 0x40, 
	0x00, 0x00, 0x00, 0x60, 0x00, 0x07, 0x01, 0xf7, 0xff, 0x80, 0xc0, 0x00, 0x00, 0x00, 0x50, 0x01, 
	0xdf, 0x00, 0x7f, 0xff, 0x1c, 0x80, 0x00, 0x00, 0x00, 0x40, 0x01, 0xff, 0x00, 0x1f, 0xff, 0x1e, 
	0xe0, 0x00, 0x00, 0x02, 0x08, 0x00, 0x3f, 0x80, 0x07, 0xef, 0x03, 0xe0, 0x00, 0x00, 0x06, 0x08, 
	0x00, 0x03, 0xc0, 0x07, 0xdf, 0x07, 0xc0, 0x00, 0x00, 0x06, 0x08, 0x0f, 0x81, 0x80, 0x1f, 0xdf, 
	0x1f, 0x80, 0x00, 0x00, 0x03, 0x08, 0x1f, 0x98, 0x00, 0x3f, 0xfe, 0x19, 0x80, 0x00, 0x00, 0x18, 
	0x08, 0x3f, 0xfe, 0x00, 0x7f, 0xfe, 0x3f, 0x00, 0x00, 0x00, 0x08, 0x08, 0x30, 0x3f, 0x00, 0xff, 
	0xff, 0x3f, 0x00, 0x00, 0x00, 0x01, 0xe0, 0x76, 0x0f, 0x89, 0xff, 0xff, 0x9f, 0x00, 0x00, 0x00, 
	0x03, 0xe0, 0x7f, 0xc3, 0x81, 0xff, 0xfe, 0x9f, 0x80, 0x00, 0x00, 0x03, 0xf0, 0x7f, 0xf3, 0xc3, 
	0xff, 0xfe, 0x1f, 0x00, 0x00, 0x00, 0x03, 0xf0, 0x7f, 0xfd, 0xc3, 0xff, 0xfe, 0x5e, 0x00, 0x00, 
	0x00, 0x03, 0xf0, 0x7f, 0xff, 0xc3, 0xff, 0xf3, 0x1e, 0x00, 0x00, 0x00, 0x03, 0xf0, 0x71, 0xff, 
	0x87, 0xff, 0xe3, 0xff, 0x00, 0x00, 0x00, 0x07, 0xf0, 0x7c, 0x3f, 0x87, 0xff, 0xe3, 0xfe, 0x00, 
	0x00, 0x00, 0x0f, 0xf0, 0x3c, 0xff, 0x05, 0xff, 0xf3, 0xfc, 0x00, 0x00, 0x00, 0x0f, 0xf0, 0x0f, 
	0xfe, 0x09, 0xff, 0xf7, 0xfc, 0x00, 0x00, 0x00, 0x08, 0xf8, 0x01, 0xfc, 0x19, 0xff, 0xff, 0xf8, 
	0x00, 0x00, 0x00, 0x0c, 0x78, 0x00, 0x00, 0x13, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x0e, 0x78, 
	0x00, 0x00, 0x23, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x0e, 0xf8, 0x00, 0x00, 0x47, 0xff, 0xff, 
	0xf0, 0x00, 0x00, 0x00, 0x0c, 0xfa, 0x00, 0x01, 0x8f, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x00, 0x08, 
	0x7b, 0x00, 0x03, 0x3f, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x00, 0x0c, 0x3b, 0xf8, 0x0f, 0xff, 0xff, 
	0xff, 0xe0, 0x00, 0x00, 0x00, 0x0f, 0xbb, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 
	0x07, 0xfb, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x71, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xe0, 0x00, 0x00, 0x00, 0x00, 0x41, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x00, 0x00
};

void setup()   {
	Serial.begin(9600);

	//Initialize Display
	display.begin();

	// you can change the contrast around to adapt the display for the best viewing!
	display.setContrast(57);

	// Clear the buffer.
	display.clearDisplay();

	// Display bitmap
	display.drawBitmap(0, 0,  MarilynMonroe, 84, 48, BLACK);
	display.display();

	// Invert Display
	//display.invertDisplay(1);
}

void loop() {
}

This is what the output looks like.

Code Explanation:

The drawBitmap() function is used to display a bitmap image on the LCD. This function accepts six parameters: the top left corner X coordinate, the top left corner Y coordinate, the monochrome bitmap byte array, the bitmap width in pixels, the bitmap height in pixels, and color.

The bitmap image in our example is 84×48 in size. So, the X and Y coordinates are set to 0, while the width and height are set to 84 and 48.

// Display bitmap
display.drawBitmap(0, 0,  MarilynMonroe, 84, 48, BLACK);
display.display();

But, before we can use the drawBitmap() function, we need an image to draw. Remember that the display’s screen resolution is 84×48 pixels, so images larger than that will not display properly. To get a properly sized image, open your favorite drawing program, such as Inkscape, Photoshop, or MS Paint, and set the canvas size to 84×48 pixels.

We used a picture of Marilyn Monroe as an example. We changed it to 84×48 pixels in MS Paint and saved it as a .bmp file.

Once you have a bitmap, you must convert it into an array that the PCD8544 controller can understand. This can be accomplished in two ways: with image2cpp (online) or with LCD Assistant (offline).

Online Bitmap Array Generator – image2cpp

There’s an online tool called image2cpp that can turn your image into an array. This tool allows you to:

• Convert multiple images simultaneously.
• Scale your image file – Stretch/Scale to fit/Original
• Adjust the Brightness threshold between black and white.
• Re-center the image vertically and / or horizontally.
• Reverse image colors

To begin with, open image2cpp in your browser and select an image to display on the screen.

The dimensions of your image will be displayed in the Canvas size option under Image Settings. If your image is larger than 84×48, change it to 84×48 by selecting the appropriate scaling option. You can see the result in the Preview section.

If necessary, you can change the background color or invert the image colors.

Lastly, change the most important setting, the brightness threshold. When you set a threshold, pixels above this level will be white and pixels below it will be black. In our case, we set it to 171 to get some nice details.

This preview reflects any changes you make to your settings. You can make changes while keeping an eye on it.

When you are satisfied with the results, you can proceed to generate the data array. Simply select Arduino Code as the code output format and press the Generate code button.

For your information, there is a setting called “Draw Mode”. It actually generates images based on the scanning pattern of the display. If your image appears distorted on your screen, try changing the mode.

That’s all. Your bitmap’s byte array will be created. You can use the output directly with our example code. Just make sure to give it a proper name. Then, within the drawBitmap() function, use your array.

Offline Bitmap Array Generator – LCD Assistant

There’s also a Windows application called LCD assistant that can turn your bitmap image into a data array. It is not as powerful as image2cpp, but it is still widely used by hobbyists.

To begin, convert your image into a 84×48 1-bit monochrome bitmap. You can do it in your favorite drawing program, such as Inkscape, Photoshop, or MS Paint, just like we did in MS Paint.

Open MS Paint and resize your file to 84×48 pixels.

Now, save your file as a bitmap. When saving the file, select Monochrome Bitmap (*.bmp;*.dib). This will produce a 1-bit/binary bitmap image with only two possible values for each pixel: 0 (black) or 1 (white).

The only drawback of this approach is that you cannot set the brightness threshold level. It is by default set to 50% and cannot be changed.

Now, download the LCD Assistant program. Open the executable and select your bitmap from the File menu.

Simply go to the File menu and select the Save output option. Save the file as a text document.

For your information, there is a setting called Byte Orientation. It actually generates images based on the scanning pattern of the display. If your image appears distorted on your screen, try changing the mode.

That’s all. After you’ve created your array, copy and paste it into your code. Just make sure to give it a proper name. Then, within the drawBitmap() function, use your array.