[How-To] LED Matrix | Display Bitmaps! (drawBitmap Function)

[opti3000]

Hi all,

First of all i am totally new to programming, arduino and LED matrices. But since i saw LED matrices on the net and how
awesome their lightshows can be i ordered a arduino mega, LED matrix 32 x 16 and now im sitting here cheering like a little
boy everytime something works.

Back to topic im gonna show you quick how to display bitmaps on your LED Matrix with the help of the "drawBitmap Function".

What you need:

- Photoshop (or any other similar program)
- Your Arduino and your LED Matrix of any size

Step 1:

Open photoshop and create a new template with the size of your LED Matrix. If you have a LED Matrix with the size of 32 x 16 or
64 x 32 or 8 x 8 you need to create a new file with the exact same size!

Step 2:

Draw your bitmap pixel per pixel. Your picture needs to be in grayscale (black and white) Here is an example what i made:

Now safe it to .jpg or .png it doesnt matter.

Step 3:

Go to this site where you can convert your Image to a Byte Array Image to C++ Byte array (for Arduino & thermal printer)
Upload your picture and it will show you something like this:

//Byte array of bitmap of 32 x 16 px:
		
img [] = { 
0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x3, 0x80, 0x0, 0x0, 0x7, 0xf0, 
0x0, 0x0, 0xd, 0xa0, 0x0, 0x0, 0x1c, 0xf0, 0x0, 0x0, 0x1f, 0x90, 0x0, 0x0, 0x7, 
0xe0, 0x0, 0x0, 0xe, 0x40, 0x0, 0x0, 0x1a, 0x70, 0x0, 0x0, 0x19, 0x98, 0x0, 0x0, 
0x1f, 0xf8, 0x0, 0x0, 0x6, 0x60, 0x0, 0x0, 0xe, 0x70, 0x0, 0x0, 0x0, 0x0, 0x0, 
0x0, 0x0, 0x0, 0x0, 
 }

The only part we need is this one:

0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x3, 0x80, 0x0, 0x0, 0x7, 0xf0, 
0x0, 0x0, 0xd, 0xa0, 0x0, 0x0, 0x1c, 0xf0, 0x0, 0x0, 0x1f, 0x90, 0x0, 0x0, 0x7, 
0xe0, 0x0, 0x0, 0xe, 0x40, 0x0, 0x0, 0x1a, 0x70, 0x0, 0x0, 0x19, 0x98, 0x0, 0x0, 
0x1f, 0xf8, 0x0, 0x0, 0x6, 0x60, 0x0, 0x0, 0xe, 0x70, 0x0, 0x0, 0x0, 0x0, 0x0, 
0x0, 0x0, 0x0, 0x0,

Safe it in a textfile somewhere or just leave the website open to copy it later.

Step 4:

Now open Arduino and create a new sketch. Copy this into your sketch:
By the way i used a Arduino Mega so you will probably need to change Ports in the code if you use an Arduino Uno or
something else

// Create some cool bitmaps on your Matrix
// For 16x32 RGB LED matrix.

#include <Adafruit_GFX.h>   // Core graphics library
#include <RGBmatrixPanel.h> // Hardware-specific library

#define CLK 11  // MUST be on PORTB!
#define LAT A3
#define OE  9
#define A   A0
#define B   A1
#define C   A2
RGBmatrixPanel matrix(A, B, C, CLK, LAT, OE, false);

#define LOGO16_GLCD_HEIGHT 16
#define LOGO16_GLCD_WIDTH  32

const unsigned char PROGMEM bitmap[] =


{ 
// Add the Byte Array here!
  
};



void setup() 

{

matrix.begin();
   
// miniature bitmap display

matrix.drawBitmap(0, 0,  bitmap, 32, 16, matrix.Color333(7,3,1));


}


void loop() {
  // do nothing
}

Step 5:

Now copy your Byte array and paste it in the sketch where it says:

{ 
// Add the Byte Array here!
  
};

It should look like this:

{ 
// Add the Byte Array here!
0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x3, 0x80, 0x0, 0x0, 0x7, 0xf0, 
0x0, 0x0, 0xd, 0xa0, 0x0, 0x0, 0x1c, 0xf0, 0x0, 0x0, 0x1f, 0x90, 0x0, 0x0, 0x7, 
0xe0, 0x0, 0x0, 0xe, 0x40, 0x0, 0x0, 0x1a, 0x70, 0x0, 0x0, 0x19, 0x98, 0x0, 0x0, 
0x1f, 0xf8, 0x0, 0x0, 0x6, 0x60, 0x0, 0x0, 0xe, 0x70, 0x0, 0x0, 0x0, 0x0, 0x0, 
0x0, 0x0, 0x0, 0x0,   
};

Its done! Now upload your sketch to your arduino and you can see your bitmap on the LED Matrix

Result:

The next thing i want to try is how to play animations with bitmaps like showing one bitmap after bitmap to create an
illusion of animation.

[mohitsachan33]

could you help me to generate the QR code on led board

[nehalda]

No idea about the QR code. Sorry!

But for the animation I might be able to help you out. Try putting all of the x coordinates (of the object) into one array and all of the y coordinates into another array. Then, depending on what direction you want the object to move in, you would use a loop in which you increment each value of each array by a certain amount.

Example (if you are moving the object up 1 "pixel") (Note: values are just made up here):

xcoordinates = [1, 2, 3, 4, 5]
ycoordinates = [1, 2, 3, 4, 5]
n = 0
void setup{
// needed bitmap code
// needed display code for first frame
}
void loop{
if (n<5){
xcoordinates[n] = xcoordinates[n] + 1
n = n + 1
}
// needed display code for second frame
}

Unfortunately, if it goes off the matrice, I don't know what will happen. If you want that to not happen, you can put another statement in the loop section to counter this effect.

[Grumpy_Mike]

mohitsachan33:
could you help me to generate the QR code on led board

Your LED board has not got enough resolution to generate a QR code.

[jhom123]

how can I do it with arduino uno and matrix p10

[Grumpy_Mike]

matrix p10

Link to one please.

[jhom123]

how can I do it with arduino uno and matrix p10 matrix 16x32

[Grumpy_Mike]

What part of "Link to one please" are you having trouble understanding?

matrix 16x32

No. Not enough resolution.

QR code

[tarbear123]

i set up the gifs i want (see pictuers)

how do i show them all one at a time on a led matrix?

[shkib2005]

Hello friends
I want to run this project with Arduino Uno. Help me to connect the bases.

[vamshidhar628]

Did anyone find the code and connections to use with Arduino UNO??

[Grumpy_Mike]

Did anyone find the code

Despite what many beginners may think you do not find code, in the same way that babies are not found under gooseberry bushes. Some effort is needed in creating both.

[system]

No, everyone knows that storks bring code.

Or is it butter?

[Danuyahya]

can i do this to led p10 ?

[system]

Do what?

[Danuyahya]

display a picture or bitmap in led p10 use this method .