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:
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.
For more detail: Nokia 5110 graphics tutorial