Arduino drawing a bitmap on nokia 5110 lcd

Question

Hello I finally got my nokia 5110 lcd working, I have tested it by displaying bitmap images other people have made. I made my own image and then used lcd assistant to turn it into an array. First look at my code.

#include "U8glib.h"

U8GLIB_PCD8544 u8g(8, 4, 7, 5, 6); // CLK=8, DIN=4, CE=7, DC=5, RST=6

int x = 5; int y = 5;

int level = 5;

const uint8_t rook_bitmap[] U8G_PROGMEM = { 0x7E, 0x82, 0x04, 0x8E, 0x7A, 0x42, 0xB4, 0x24, 0x08, 0xD8, 0x48, 0x08, 0x08, 0x0C, 0x02, 0x22, 0xD9, 0x07, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x1E, 0x11, 0x21, 0x22, 0x14, 0x3B, 0xD4, 0x25, 0x29, 0x68, 0xA8, 0xA8, 0x74, 0x0C, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x01, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, };

void draw(void) { // graphic commands to redraw the complete screen should be placed here
u8g.drawBitmapP( 5, 5, 3,18, rook_bitmap);

}

void setup(void) {

}

void loop(void) { // picture loop u8g.firstPage();
do { draw(); } while( u8g.nextPage() );

// y++; // rebuild the picture after some delay delay(1000); }

The part that goes wrong is at u8g.drawBitmapP(5,5,21,18, rook_bitmap); I know it is to do with the 21 and 18 being wrong because I don't know where to get those numbers. Is it the width and height of the image when it is in paint.net or what is it?

Answer 1

The 21 and 18 are the dimensions of the image. It's not just pixels though.

The first number (21) is the number of bytes in a row of the image - that is one eighth of the width in pixels. The width must be a multiple of 8.

The second number is the number of rows in the image - basically the height in pixels.

The two numbers, when multiplied together, must equal the number of bytes in your array.

From the documentation:

Description

Draw a bitmap at the specified x/y position (upper left corner of the bitmap). Parts of the bitmap may be outside the display boundaries. The bitmap is specified by the array bitmap. A cleared bit means: Do not draw a pixel. A set bit inside the array means: Write pixel with the current color index. For a monochrome display, the color index 0 will usually clear a pixel and the color index 1 will set a pixel.

Arguments:

• u8g : Pointer to the u8g structure (C interface only).
• x: X-position (left position of the bitmap).
• y: Y-position (upper position of the bitmap).
• cnt: Number of bytes of the bitmap in horizontal direction. The width of the bitmap is cnt*8.
• h: Height of the bitmap.

---

It would appear your image data is complete gibberish. This is what I decode it to be:

 ###### # # # 
 ### # # #### # # 
 # ## # # # # 
 ## ## # # # 
 # ## # 
 # # # ## ##### 
 # #### 
# # # # # # 
 # # ## ### # # ##
# # # # # # # ## 
 # # # # # # # ### 
 ## ## 

• user2279603: so how do I find the width 21/ 8 because that isn't a multiple of 8
• Majenko: You will have a multiple of 8 regardless. The extra bits will be padded with 0 (or they should be if the converter you used is any good). Count the number of bytes in your array, divide it by the number of pixels your image is high, and that is the value to use. If your source image is 21 pixels wide I would put money on the answer being 3. 3x8 = 24, so 21 + three blank pixels for padding.
• user2279603: ok I'm a little confused what number do I put into u8g.drawBitmapP(x,y,?,8); do I put 3 or 24
• Majenko: 3 since that is the number of bytes that would make up a row. 3x8 should equal the size of your array.
• user2279603: I don't know why it dosnt work heres what ive done