Interface Nokia 5110 Graphic LCD Display with Arduino

Remember the pre-iPhone days when cell phones had buttons and you only touched that tiny black and white screen if you needed to clean it? Nokia used these little LCDs in their 3310 and 5110 cell phones.

As technology changed, these displays finally found their new place in the world of DIY. Soon they became popular among hobbyists as these displays are small(only about 1.5″), inexpensive, easy to use, fairly low power and can display text as well as bitmaps.

PCD8544 LCD Driver

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

The chip is designed to drive a graphic display of 84×48 pixels. It interfaces to microcontrollers through a serial bus interface similar to SPI.

Thanks to the PCD8544 controller’s versatility, it includes on-chip generation of LCD supply and bias voltages which results in low power consumption making it suitable for power sensitive applications. In a normal state, the LCD consumes as low as 6 to 7mA only.

As per datasheet, this chip operates in the range of 2.7 to 3.3 V and has 3v communication levels. So, for any 5V logic microcontroller like Arduino, some sort of logic level shifting is required (otherwise display may get damaged).

LCD Backlight

The LCD also comes with a backlight in different colors viz. Red, Green, Blue & White.

The backlight is nothing but four LEDs spaced around the edges of the display.

If you want to change the backlight of the LCD, just remove the LCD off the board by pushing the metal clips at the back side. When the screen comes off, you will notice the four LEDs soldered around the edges of the display. Just replace the LEDs with desired color LEDs.

Nokia 5110 LCD Memory Map

The PCD8544 LCD driver has a built-in 504 bytes Graphic Display Data RAM (GDDRAM) for the screen which holds the bit pattern to be displayed. This memory area is organized in 6 banks (from 0 to 5). Each bank contains 84 columns/segments (from 0 to 83). And each column can store 8 bits of data (from 0 to 7). That surely tells us we have

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

The whole memory map with banks, segments and data is highlighted below.

Each bit represents particular pixel on the screen which can be turned ON or OFF programmatically.

Here are the complete specifications:

Nokia 5110 LCD Display Module Pinout

Before diving into hookup and example code, let’s first take a look at its Pinout.

RST pin resets the display. It’s an active low pin meaning; you can reset the display by pulling it low. You can also connect this pin to the Arduino reset so that it will reset the screen automatically.

CE(Chip Enable) pin is used to select one of many connected devices sharing same SPI bus. It’s an active low pin as well.

D/C(Data/Command) pin tells the display whether the data it’s receiving is a command or displayable data.

DIN is a serial data pin for SPI interface.

CLK is a serial clock pin for SPI interface.

VCC pin supplies power for the LCD which we connect to the 3.3V volts pin on the Arduino.

BL(Backlight) pin controls the backlight of the display. To control its brightness, you can add a potentiometer or connect this pin to any PWM-capable Arduino pin.

GND should be connected to the ground of Arduino

Wiring Nokia 5110 LCD display module to Arduino Uno

Before we get to uploading code and sending data to the display, let’s hook the display up to the Arduino.

Connections are fairly simple. As we are implementing software SPI, we have flexible pin options. You can connect data transmission pins to any digital I/O pin. In our case the serial clock(CLK), serial data(DIN), data/command(DC), chip enable(CE) and reset(RST) pins are connected from pin 7 all the down to pin 3 on Arduino.

But unfortunately, the LCD has 3v communication levels, so we cannot directly connect these pins to the Arduino. We need some protection. This can be done by shifting levels.

One of the cheap and easiest way to shift levels is to add resistors inline with each data transmission pin. Just add 10kΩ resistors between the CLK, DIN, D/C, and RST pins and a 1kΩ resistor between CE.

Finally, The backlight(BL) pin is connected to 3.3V via 330Ω current limiting resistor. You can add a potentiometer or connect this pin to any PWM-capable Arduino pin, if you wish to control its brightness.

The following diagram shows you how to wire everything.

With that, you’re now ready to upload some code and get the display printing.

Installing Library for Nokia 5110 LCD Module

The PCD8544 LCD controller has flexible yet complex drivers. Vast knowledge on memory addressing is required in order to use the PCD8544 controller. Fortunately, Adafruit’s PCD8544 Nokia 5110 LCD library was written to hide away all the complexities so that we can issue simple commands to control the display.

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

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

This library is a hardware-specific library which handles lower-level functions. It needs to be paired with Adafruit GFX Library to display graphics primitives like points, lines, circles, rectangles etc. Install this library as well.

Arduino Code – Displaying Text

Now comes the interesting stuff!

The following test sketch will print ‘Hello World!’ message on the display. It also includes

• Displaying Inverted text
• Displaying Numbers
• Displaying Numbers with base (Hex, Dec)
• Displaying ASCII symbols
• Rotating Text

This will give you complete understanding about how to use the Nokia 5110 LCD display and can serve as the basis for more practical experiments and projects. Try the sketch out and then we will dissect it in some 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() {}

The sketch starts by including three libraries viz. SPI.h, Adafruit_GFX.h and Adafruit_PCD8544.h. Next, we need to create an LCD object. This object takes 5 parameters and specifies which Arduino pins are connected to the LCD’s CLK, Din, D/C, CE and RST pin. We also defined rotatetext variable which will make sense a little later.

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

// 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 setup function: we need to initialize the LCD object using begin() function. We also need to set the contrast of the display using setContrast(value) function with value can be anywhere between 0-100. However, value between 50-60 gives great results.

Next, we clear the buffer before printing our first message on 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();

For displaying text on the screen, we need to set the font size. This can be done by calling setTextSize() and passing font size (starting from 1) as a parameter.

Next, we need to set the font color by calling function setTextColor(). Pass parameter BLACK for the dark background and pass WHITE for bright background. Now before printing the message we need to set the cursor position by calling function setCursor(X,Y).

Pixels on the screen are addressed by their horizontal (X) and vertical (Y) coordinates. The coordinate system places the origin (0,0) at the top left corner, with positive X increasing to the right and positive Y increasing downward.

We can use simple print(" ") or println(" ") function to print the message on the screen just like we print data on serial monitor. Remember, println() will move the cursor to the new line.

In order for the library to perform extremely fast mathematical operations on the screen buffer (more than 100 frames per second), calls to the print functions do not immediately transfer the contents of screen buffer to the PCD8544 controller. A display() command is required to instruct the library to perform the bulk transfer from the screen buffer in the ATmega328P to the internal memory of the PCD8544 controller. As soon as the memory is being transferred, the pixels corresponding to the screen buffer will show up on the LCD display.

Displaying Inverted Text

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

For displaying inverted text, we will call setTextColor(FontColor,BackgroundColor) function again. If you are paying attention, you know we passed only one parameter to this function earlier, but now we are passing two parameters. This is possible because of something called function overloading. Function overloading is the ability to create multiple functions of the same name but with different set of parameters. Calls to an overloaded function will run a specific implementation of that function depending upon the parameters passed.

In our case passing setTextColor(BLACK, WHITE) will render black text on 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 called setTextSize() function to set font size and passed 1 as parameter. You can use this function to scale the font by passing any non-negative integer.

Characters are rendered in the ratio of 5:7. Meaning, passing font size 1 will render the text at 5×7 pixels per character; passing 2 will render 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();

Numbers can be displayed on the LCD display by just calling print() or println() function. An overloaded implementation of these functions accepts 32-bit unsigned int, so you can only display numbers 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() & println() functions has optional second parameter that specifies the base (format) to use; permitted values are BIN (binary, or base 2), OCT (octal, or base 8), DEC (decimal, or base 10), HEX (hexadecimal, or base 16). For floating point numbers, this parameter specifies the number of decimal places to use. For example:

• print(78, BIN) gives “1001110”
• print(78, OCT) gives “116”
• print(78, DEC) gives “78”
• print(78, HEX) gives “4E”
• println(1.23456, 0) gives “1”
• println(1.23456, 2) gives “1.23”
• println(1.23456, 4) gives “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() & println() functions send data to the display as human-readable ASCII text while write() function sends binary data to the display. So, you can use this function to display ASCII symbols. In our example sending number 3 will display 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 calling setRotation() function. It allows you to view your display in portrait mode, or flip it upside down.

The function accepts only one parameter that corresponds to 4 cardinal rotations. This value can be any non-negative integer starting from 0. Each time you increase the value, the contents of the display are rotated 90 degrees counter clockwise. For example:

• 0 – Keeps the screen to the standard landscape orientation.
• 1 – Rotates the screen 90° to the right.
• 2 – Flips the screen upside down.
• 3 – Rotates the screen 90° to the left.

Arduino Code – Basic Drawings

In this example, we’re going to try some basic drawings. This sketch demonstrates many drawing functions, including rectangles, round rectangles, circles and triangles. Try the sketch out and then we will dissect it in some 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() {}

Most of the code (Including libraries and initializing display) is same as above code example, except following code snippets to draw basic drawings.

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();

You can draw rectangle on the display by using drawRect() function. The function takes five parameters viz. X coordinate, Y coordinate, Width, Height and color. Actually this function draws hollow rectangle with 1 pixel border. You can draw filled rectangle using fillRect() function.

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();

You can draw round rectangle on the display by using drawRoundRect() function. This function takes same parameters as drawRect() function except one additional parameter – Radius of corner rounding. Actually this function draws hollow round rectangle with 1 pixel border. You can draw filled round rectangle using fillRoundRect() function.

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();

You can draw circle on the display by using drawCircle() function. The function takes four parameters viz. X coordinate of center, Y coordinate of center, radius and color. This function draws hollow circle with 1 pixel border. You can draw filled circle using fillCircle() function.

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();

You can draw triangle on the display by using drawTriangle() function. The function takes seven parameters viz. 3 X & Y coordinates (x0, y0, x1, y1, x2 & y2) of vertices of triangle and color. (X0,y0) represents top vertex, (x1,y1) represents left vertex and (x2,y2) represents right vertex.

This function draws hollow triangle with 1 pixel border. You can draw filled triangle using fillTriangle() function.

Arduino Code – Displaying Bitmap

This last example shows how to draw bitmap images to the Nokia 5110 LCD Display. This is useful for creating splash screens of company logos, making sprites or just creating fun graphics for displaying information. Copy the following code, paste it into the Arduino IDE and click upload.

#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 how the output looks like.

To show bitmap image on the Nokia 5110 LCD display we need to call drawBitmap() function. It takes six parameters viz. Top left corner X coordinate, top left corner Y coordinate, byte array of monochrome bitmap, width of bitmap in pixels, height of bitmap in pixels and Color.

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

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

But, before we can call the drawBitmap() function, we first need an image to draw. Remember, the screen resolution of Nokia 5110 LCD display is 84×48 pixels, so images larger than that will not display correctly. To get a correctly sized image, you can use your favorite drawing programs like Inkscape, Photoshop, Paint, etc., setting the canvas size to 84×48 pixels.

We took laughing Marilyn Monroe image as an example and converted into 84×48 pixels using Paint and saved as .bmp.

Once you have a bitmap, it’s time to convert it into an array that the PCD8544 controller can understand. This can be done using two ways: Online method using image2cpp and Offline method using LCD Assistant.

Online Bitmap Array Generator – image2cpp

There’s an online application called image2cpp – http://javl.github.io/image2cpp/ which can convert your image into an array. Image2cpp is newer and much more powerful than LCD Assistant (later solution). It will allow 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

This tool is so powerful that it can work offline as well. Simply save the page to your PC and open it in your browser. Thanks to Jasper van Loenen for his excellent contribution.

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

The dimensions of your image will populate in Canvas size option under Image settings. If you have selected bigger image than 84×48, change it to 84×48 and select proper Scaling option. You can view the output in Preview section.

You can change the Background color or Invert image colors if necessary.

Finally, change the most important option – Brightness threshold as per your requirement. Setting threshold will make pixels above this level white and below black. In our case we have set it to 171 to get nice details of Marilyn Monroe.

This little preview reflects whatever changes you make in your settings. You can change settings while keeping eye on it.

Once you are satisfied with the outcome, you can proceed generating the data array. Simply select Code output format as Arduino Code and click on Generate code button.

Just for your information, there’s an option called Draw mode. It actually creates image according to the scanning patter of the display. If your image looks all messed up on your display, try changing the mode.

That’s it. The byte array of your bitmap will be generated. You can use the output directly with our example code. Just be sure to name it appropriately. Then call your array inside the drawBitmap() function.

Offline Bitmap Array Generator – LCD Assistant

There’s another application called LCD assistant – http://en.radzio.dxp.pl/bitmap_converter/which can convert your bitmap image into data array. It’s not as powerful as image2cpp but still popular among hobbyists.

To start with, you need to convert you image into 84×48 1-bit monochrome bitmap. You can use your favorite drawing programs like Inkscape, Photoshop, Paint, etc. to do it, just like we did in MS paint.

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

Now, save your file as bitmap. While saving the file choose Save as type : Monochrome Bitmap(*.bmp;*.dib). This will generate 1-bit/binary bitmap image that has only two possible values for each pixel i.e. 0 (black) or 1 (white).

The only downside here is that you cannot set brightness threshold level. It is set to 50% by default and cannot be changed.

Anyways now, download LCD assistant program. Open the executable and load your bitmap from File menu.

There’s nothing much you can do with this tool. So, just go to File menu and click on Save output option. Save the file as text file.

Just for your information, there’s an option called Byte Orientation. It actually creates image according to the scanning patter of the display. If your image looks all messed up on your display, try changing the mode.

That’s it. With your array created, paste it into your code. Just be sure to name it appropriately. Then call your array inside the drawBitmap() function.