Arduino Nokia 5110 Bitmap Graphics Tutorial

Want to load Bitmap Graphics on your Nokia 5110 LCD display using Arduino? Then, this Arduino tutorial is for you. We are going to design our own bitmap graphics using Paint.net and then learn how to load them using the Arduino IDE. Let’s get started!

Intro to the Arduino Nokia 5110 Bitmap Graphics Tutorial

Today, I’m going to show you how to load your custom graphics into a Nokia 5110 LCD display. We are going to use an Arduino Mega today and a Nokia 5110 LCD display. In order to see how to connect the Nokia 5110 LCD display, watch our previous videos, it’s very easy. Now let’s go to the computer and see how I made those custom graphics.

——————–
WHERE TO BUY
——————–

1. Nokia 5110 LCD display: https://educ8s.tv/part/NOKIA5110

2. Arduino Mega: https://educ8s.tv/part/ArduinoMega

3. Small Breadboard: https://educ8s.tv/part/SmallBreadboard

4. Wires: https://educ8s.tv/part/Wires

Full disclosure: All of the links above are affiliate links. I get a small percentage of each sale they generate. Thank you for your support!

[adsense]

In order to load our own custom graphics into Arduino, we are going to use the LCD Assistant software. It is a simple program that all it does is convert a bitmap image into a data array, in order to use it with Arduino or any other microcontroller. As you can see, it loads a BMP image and converts it to a data array. You can find the link for this download in the description of the video The other software that we’re going to use is the Paint.Net software which is a great tool in order to create your own graphics. It is easy and free to use, but you can use PhotoShop if you prefer it. So, let’s start.

——————–
SOFTWARE
——————–

? LCD ASSISTANT: http://en.radzio.dxp.pl/bitmap_converter/

? PAINT.NET: http://www.getpaint.net/

First, let’s create a simple bitmap image in Paint.Net and then load it into the Nokia 5110 display. First, we are going to File, New and create a new document, the dimensions are 84 pixels and 48. These are the dimensions of the Nokia 5110 LCD display. That’s the new document. As you can see, it is very very small we have to zoom in with Ctrl + in order to be able to work with it. So, let’s now create some simple saves. I’m going to use the shape tool here, you can use any tool you like from this amazing software and I’m going to draw some simple shapes. Be sure that anti-aliasing is disabled and you can click here and choose any shape you like. Let’s click Shift, hold down Shift and draw a shape like this. We can move it around, then I have to deselect it and next to it I’m going to draw a gear. Click Shift and click. I can move it around as well and now we are ready to save this document. We are going to save it as a bitmap, NOT png be careful, bitmap and we can give it any name we want for example icons.bmp and save. Okay, it is now saved.

Let’s now open LCDAssistant software. Okay, that’s the software. All we have to do is to go to File, Load image and load the bitmap that we have just created. That’s the bitmap that we have created, the dimensions are correct and all we have to do is to save the output as icons.c for example. Any name you like. Pressing OK, and a new file has been created. Icons.c. If I open it with Notepad++ you can see the data array that it had created for this bitmap image All I have to do is to use this code for my Arduino project. Let’s see how to do it. Okay, I have now created a new Arduino project and a new .c file named graphics.c, which is empty. All we have to do is to copy the data array from the LCDAssistant into the new file, the graphics.c file and that’s it. Now, for better performance, we can save the data array in the program memory instead of SRAM of the Arduino because we always need smaller RAM usage and in order to do that, we have to include this word here and include a library here.

——————–
LIBRARIES
——————–

? Nokia 5110 Library: http://www.rinkydinkelectronics.com/library.php?id=48

Okay. Now we can use the data array in our Arduino sketch. Let’s see. In this sketch, all we do is draw three bitmaps. The pi symbols, the icon symbols and the cube symbols. This is the simple sketch. All it does, it uses the draw bitmap command which has some parameters, this the bitmap name, where we start drawing from. This is pixels the top left corner for example, and this is the dimension of the bitmap. So, we clear the screen, we draw the bitmap, we update the lcd and we wait for 2 seconds. And this is the graphics.c file we have created earlier and i have loaded in it the three bitmap files, the icons, the pi symbol and the cube. That’s how easy it is to use it. You can find links for the code in the description of the video. The library that we are using is the LCD5110_Graph.h library that we have talked about in the past as well. Watch our previous videos in order to see how to use it. That’s it.