Introduction: Nokia 5110 Graphics Tutorial

By
About: Hello, My name is Samuel, I am a student. I love micro controllers like arduino, they are my favorite interest. I also do geocaching, a worldwide treasure hunt game. I hope you enjoy my instructables! Samuel

Okay, here's the deal. There are some tutorials on youtube showing how to get graphics to show on the nokia 5110 and that's great. If you just want a simple way to do that, go and watch them instead but there are a few problems I see,

1. There are none for mac. I am using a mac and everyone in the videos are using a windows.

2. Sometimes I just wanna go to the computer and search up how to make some graphics. When searching "Nokia 5110 graphics" on google, I found nothing but some libraries and some text.

In this tutorial I will show you how to connect the display, use the code and use some web-based and downloaded tools to create some awesome graphics YOU can customize however you want. Now, enough of me speaking, let's just begin.

Step 1: Connections

First let's connect the Nokia 5110 display. Remember that the LCD runs on 3.3V and although some people have connected it to 5V, it has worked but gave some weird effects, so I suggest connecting to the 3.3V output of the arduino. Next, the LIGHT pin on the LCD. It is the one pin which is controlling whether backlight is on or off. It will be on if the pin is connected through ground and off if it's connected through VCC. The display uses 3 mA when not backlit which is awesome. What I am trying to say is, if you are going to build something that is gonna stay on, do not use the backlight if not necessary. Here are my connections:

LCD -> Arduino:


VCC -> Arduino 3.3V

LIGHT -> Arduino GND (I am going to be using it on)

GND -> Arduino GND

CLK (SCLK) -> Arduino pin 7

DIN (MOSI) -> Arduino pin 6

DC -> Arduino pin 5

CE or CS -> Arduino pin 4

RST (RESET) -> Arduino pin 3


Next, let's go over to creating some bitmaps and converting that to C code etc.

Step 2: Creating a BMP File

BMP (bitmap) is a picture format. It consists of a square grid called pixels. We will save our image as a BMP file.

First we will have to create some graphics, I will be using pixlr editor for this. I think it is a great web-based software for creating images and of course, BMPs. When you are on the website I linked to, choose to create a new image. Be sure to make the size 84 by 48, or whatever size your display is and click OK. Then simply paint or creating something you want to display on the LCD. You might want to increase the zoom level, then do that in the down left corner, choose something like 900%, it works great.

Next save your image by pressing Cmd + S (mac) or Ctrl + S (windows) and now, be sure to save it as a BMP. Next step is to convert this into a code usable by the arduino.

Step 3: LCD Creator

As I am on mac, I will be using a software called LCD creator, which is created by portreathbeach, many thanks to him. On windows, there is a software known as LCD assistant which works the same. Downloads:

LCD creator here

LCD assistant here

I will only show you how to use LCD creator in this tutorial. If you wanna know how to use the LCD assistant further, go visit some youtube tutorial or search the web for it :)

Now, click the "Open .bmp image" and locate and select your image with the graphics. Next click the "Generate C code" and watch the hexadecimal values pop up below. Click the "Copy to clipboard" tab and then exit out of the software.

Next, open your preferred text editing software, create a new file with nothing in it, then simply save it as .c. If .c is not an option, it will most likely not be, then save it as a random file format and rename it to "thename.c" and use .c instead. Hope that made sense. :)

You will now have to open a new arduino sketch and close it again, remember to save it before you close it. Now, navigate to your arduino folder and open the folder your sketch is inside of. Move the C file inside of that folder and bam, you are pretty much done, not much left now. Open the empty arduino sketch and now you see a new "tab" in the upper part of the sketch (see pictures). Open that tab and paste the hexadecimal values you copied before. In the next step we will learn how to some memory.

Step 4: Saving RAM Usage

We will save the C code in the program emory instead of the SRAM as we always need small RAM usage. To do this we will have to include a library and a word like the pictures or like this: (We include the PROGMEM word and the library)

#include <avr/pgmspace.h>
const unsigned char graphic [] PROGMEM= {
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x80, 
	0x80, 0x80, 0x80, 0x80, 0x80, 0x80, 0x80, 0x80, 0x80, 0x80, 0x80, 0x80, 0x80, 0x80, 0x80, 0x80, 
	0x80, 0x80, 0x80, 0x80, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 
	0xC0, 0xC0, 0xE0, 0xF0, 0xF0, 0xF8, 0xF8, 0xFC, 0xFC, 0xF8, 0xFE, 0xFE, 0xFE, 0xFF, 0xFF, 0xFF, 
	0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 
	0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFC, 0xFE, 
	0xFE, 0xFE, 0xFC, 0xFC, 0xFC, 0xF8, 0xF8, 0xF0, 0xC0, 0xE0, 0xC0, 0xC0, 0x80, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xF0, 
	0xFC, 0xFE, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 
	0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 
	0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 
	0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 
	0xFF, 0xFF, 0xFE, 0xFC, 0xB0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x1F, 0x7F, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 
	0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 
	0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 
	0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 
	0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0x7F, 0x1F, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x03, 0x07, 0x07, 0x0F, 0x1F, 
	0x1F, 0x3F, 0x3F, 0x7F, 0x7F, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 
	0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 
	0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0x7F, 
	0x7F, 0x3F, 0x3F, 0x1F, 0x1F, 0x0F, 0x07, 0x07, 0x03, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x01, 0x01, 0x03, 0x03, 
	0x03, 0x03, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 
	0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x07, 0x03, 0x03, 0x03, 0x03, 0x01, 0x01, 0x01, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
	0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
};

Step 5: Code

Now we are all ready to code, here is the code, I have tried to comment everything to make it easier to understand. And I forget to say, do rename the object in the C code to "graphic". I am using the LCD5110_Graph library from Henning Karlsen. Thanks a lot to him. Here is the code, enjoy:

Download the library here. And here is the code:

#include <LCD5110_Graph>  //Including library
LCD5110 lcd(7,6,5,3,4); //Creating LCD object
extern uint8_t graphic[]; //Including the graphics
void setup() {
  lcd.InitLCD(); //Intializing LCD
}
void loop() {
  lcd.clrScr(); //Clearing screen
  lcd.drawBitmap(0, 0, graphic, 84, 48); //Drawing out bitmap
  lcd.update(); //Updating the LCD
}

Step 6: Finished

Thanks a lot for reading! If you have any questions please contact me or write a comment.

Have a great day,

Samuel