Go Down

Topic: [How-To] LED Matrix | Display Bitmaps! (drawBitmap Function) (Read 14198 times) previous topic - next topic

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 http://manytools.org/hacker-tools/image-to-byte-array/
Upload your picture and it will show you something like this:
Code: [Select]
//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:

Code: [Select]
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

Code: [Select]

// 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:
Code: [Select]
{
// Add the Byte Array here!
 
};


It should look like this:

Code: [Select]
{
// 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):
Code: [Select]

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

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


Grumpy_Mike


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?

Quote
matrix 16x32
No. Not enough resolution.

https://en.wikipedia.org/wiki/QR_code#Storage

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

Quote
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.

AWOL

No, everyone knows that storks bring code.

Or is it butter?
"Pete, it's a fool (who) looks for logic in the chambers of the human heart." Ulysses Everett McGill.
Do not send technical questions via personal messaging - they will be ignored.
I speak for myself, not Arduino.

Go Up