Nokia 5110 Graphics Tutorial

103,237

439

36

Posted

Introduction: 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

3 People Made This Project!

Recommendations

  • Microcontroller Contest

    Microcontroller Contest
  • Science of Cooking

    Science of Cooking
  • Pocket-Sized Contest

    Pocket-Sized Contest
user

We have a be nice policy.
Please be positive and constructive.

Tips

Questions

30 Comments

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

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

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?

photo6062261002055034811.jpg

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

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

i get this error

What is the use of the update function?

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 ?

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.

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.