Custom Graphics on Nokia 5110 Display

Introduction: Custom Graphics on Nokia 5110 Display

About: 18 y/o guy with huge ambitions

Hey guys! Moxigen here. About 3 years ago, I shut down my personal site
(inKnowit.in) which had 30 blogs or so on it. I continued blogging here but I lost motivation very quickly and wrote only three blogs. After a lot of thought I have decided to continue blogging. I'd be posting very simple projects as of now. Since I have been fooling around with a Nokia 5110 display for quite a while, I have decided to write my fourth blog on interfacing this display with the Arduino MicroController board.

Step 1: Grab the Requisites!

For this instructable, you'd need:

1.A Nokia 5110 LCD display. You could salvage it from an old Nokia 5110, or you could buy it online. Here's a link which would help you purchase it:

Arduino 5110 display-Ebay

2.An Arduino board. [I've used NANO in this case]

3. (5 x [1000 ohm resistors])

4.( 1 x [330 ohm resistors])

5.A 10kohm potentiometer.

6.A bunch of jumper wires.

7.A breadboard.

Step 2: Wire It Up!

Since I couldn't find the Nokia 5110 component in the Fritzing library, I decided to sketch out the schematic myself. Remember to use the 1000 ohm resistors while connecting the RST, CE, DC, Din and CLK pin to the arduino board and the 380 ohm resistor with the potentiometer.

Step 3: Installing the Nokia 5110 Library

You'd need to install the Nokia 5110 library first. Here's the link to the library. Download it, unzip it and move it into the Arduino Libraries folder.

Nokia 5110 Library for Arduino

Step 4: Converting the Image

You'd need to convert the image you want to display into a bitmap file. Also you'd need to change the resolution of the image to 84*48, to suite the displays resolution. Here's a site that would help you to do that:

Online Convert

Step 5: Converting the Bitmap Image to C Array

Now, you'd have to use a software to convert the .bmp image to a C array.

Windows users can use LCDAssistant(File attached) and MacBook users can use LCDCreator(File Attached).

Once you convert the image, copy the array. I'll explain in further steps how exactly the array would be used.

Step 6: The Code.

#include <LCD5110_Graph.h> //Including library
LCD5110 myGLCD(8,9,10,12,11); //Creating LCD object

extern uint8_t graphic[]; //Including the graphics

void setup() {

myGLCD.InitLCD(); //Intializing LCD

}

void loop() {

myGLCD.clrScr(); //Clearing screen

myGLCD.drawBitmap(0, 0, graphic, 84, 48); //Drawing out bitmap

myGLCD.update(); //Updating the LCD

}

Create a seperate tab and name it as Graphics.C

Now for the custom graphic part.

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)[Enter this in the Graphics.C part];

#include
const unsigned char graphic [] PROGMEM= {

//Enter the C array you copied earlier over here

//Else, insert my graphics.c file which i have included

}


Step 7: You're All Done!

Upload the program to the arduino via usb cable, and you're good to go.

Here's another example where I have displayed StoneSour's logo on the Nokia 5110 display.

I'm open to criticism, so please feel free to comment your views on this instructable. Do message me if you have any problems related to this project.

Instagram- @moxigen

Facebook- Moksh Jadhav

Share

    Recommendations

    • Creative Misuse Contest

      Creative Misuse Contest
    • Tiny Home Contest

      Tiny Home Contest
    • Fix It! Contest

      Fix It! Contest

    Discussions