Nokia 5110 Graphics Tutorial

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

Comments

[rockbroke3]

Hi, nice tutorial. First i got blank output from LCD Assistant software. Then I changed 'size endianness' from 'Little' to 'Big'. Then everything worked perfect, and i got the array. At last I've even printed my friends face on it. cool

[Thomas1953]

Unzipping the LCDAssistant file . . . . makes my virus scanner very nervous

[GopalakrishnanK2]

I have two working condition Nokia-5110 LCD but it has a foam connector on it, is there anyway i can connect it to arduino?

[sandeep jagdev]

Thanks ,all work well but led assistant gives blank output so i use mikro c bitmap editor

[IbrahimH25]

LCD5110_Graph.cpp:828: undefined reference to `graphic'

i get this error

[AireshB]

What is the use of the update function?

[JunsenS]

the other file is const unsigned char name [] PROGMEM , but the one in arduino is uint8_t , and it doesnt pick up the reference . also when i changed the graphic type to uint8_t it runs but prints weirdly . any help ?

[taifur]

Nice

[lneves]

Very good instructable, a lot of information in just one place!
I am not 100% sure, but maybe, in step 4, more memory could be saved if the code was declared as byte instead of char.

[rutcorn]

Hi,

I'm sorry for replying to an old comment, but this could be useful for other readers.

Byte and unsigned char are basically the same, both using 1 byte of memory. For clarity in the code it might be preferable to use byte over unsigned char, so that it's immediately clear that the array doesn't hold ASCII character codes but some number. Memory-wise it doesn't make any difference.

[lneves]

You're right, I haven't realized this detail, both char and byte are 8 bits size. Thanks for the reply.

[samuel123abc]

Hello Ineves,

Sorry for my late reply, either way, thanks for your feedback! And yes, it would probably save more memory if you say so :) I am not a genius in technology and arduino :) Have a great day!

Samuel

[JesperK]

Hi! This is a very fine tutorial, ad easy to understand, there is one little thing, the link to the "Henning Karlsen Library" do not work, due to the site do not allow "deep linking" to their site and is advising the user to tell the Administrator to fix the error. Hereby done.

Keep up the good tutorials, they are a great help.

Merry Christmas! 2015 Greetings from Denmark to everybody.

[brightled]

Hello my friend,Get your degree in Electrical Engineering first,then you can be a pilot with knowledge of what is actually going on in the cockpit and in the rest of the aeroplane , also you will be able to get a real good job when you get tired of flying as you will find flying very very boring...rem the first astronaughts were monkeys.

[IamSpiderman]

Very good and simple tutorial, my only confusion was when you said to rename the object in the C code to graphic. What did you mean by that?

[samuel123abc]

Hello,

In this line:

const unsigned char something [] PROGMEM= {

Just change your "something" to graphic so it matches the code. Hope this helps,

Samuel

[Mic100]

Great instructable

I use a 5510 as alyseur logic that operates with an ATmega8 the main power supply is 5 volts but the 5510 is supplied with 3 V 3 through 1N4007 diode in series with Vdc (3 x 0.6 V = 1.8 V 5 V = -1.8 V 3.2Volts) I do not have a problem in this way.

Here is the author's website with the schema and the program:

http://www.serasidis.gr/circuits/mini_logic_analyzer/miniLogicAnalyzer.htm

[ChrisHerman]

friends don't let friends use Nokia 5110!
Most eBay sold displays are reconditioned. The foam that makes the connection between glass and circuit board is a single point of failure.
If your display remains dark. Try pressing/lifting glass and board. You might have to take it apart and clean contacts. I had 1:5 success rate, rest were throw always. You get higher resolution OLED displays for same money, often requiring many fewer connections.
My advice: avoid

[samuel123abc]

Hello ChrisHerman,

These LCDs are in my experience very high quality, I buy mine from aliexpress and I have never had any problem, they are also cheaper than oleds, have a great day!

Samuel

[ChrisHerman]

Yes, they are nice when they work and they are quite inexpensive. Good to know there is better quality out there than i found.
BTW great job on your article in general - most comprenhensive work on 5110s.