How to create a bmp

[automatsound]

How to create a bmp

[robertgallup]

Hi. I might be able to help. What program do you use to make graphics? (Adobe? Gimp? Or another one?) No matter which one you use, you need to create a 1-bit (b/w) .bmp file. (I don't think the SSD1306 supports any grayscale) Also, what platform are you using? Arduino? And, do you have sample code you're trying to use?

[automatsound]

Hello Robert, fristly thanks a lot for your quick answer.

I'm trying with Adobe illustrator, Paintbrush, i have Gimp but i don't try it, anyway in my first attemps i try to convert any existing image, converting to BMP to use with your program, my problem is i have dont idea about how configure it for obtain the correct parameters; size (resize to 128x64 px I think), 1 bit (minimum option i can select is 4 bit). I'm using Arduino and my code example is from ssd1306SimpleDemo from esp8266-oled-ssd1306 library.
This is what Terminal return with my example "logo.bmp" (and i need to restart):

`struct GFXMeta {
unsigned int width;
unsigned int height;
unsigned int bitDepth;
int baseline;
uint8_t *pixel_data;
};

PROGMEM uint8_t const LOGO_PIXELS[] = {`

Thanks for your attention.

Regards.

[robertgallup]

Do you have Adobe Photoshop? If so, you can import the illustrator version and get the correct type of BMP file from Photoshop. Also, what command line are you using?

[automatsound]

Ok, i will try it with Photoshop, i expect that i can put the correct parameters. I type this command line "python bmp2hex.py -n -w 12 logo.bmp". Image in the same folder.

Regards.

[robertgallup]

In Photoshop, you can create a bitmap mode image (Depending on if you have a color Illustrator file to import, you might have to start with RGB, then change to Grayscale, THEN to Bitmap). Finally, if you use "Save as..." and make sure BMP is the format, 1-bit bitmap will be the only option. Also, make sure that Windows format is selected rather than OS/2.

Your command line looks correct.

[automatsound]

Finally i can get the hex array working with Illustrator (i expect all is correct).
Solution: just i need to wait a little bit that your program make the magic (I have an old MacBook Pro), my apologies for that.

Now my problem is that i can't get a recognizible image in the display, i don't know what i need to do.

I get a jpeg picture, then resize to 128x64 px (as ssd1306) and "Export As" to bmp, i can't get 1bit bitmap with grey scale, then i choose "Color model: Bitmap" "Resolution: 72ppp" "Smoothed: none"

I see a little irreconogzible image on the display. I dont know how many rows i need to put or if is an important question. I try with some numbers and with your examples. I'm very lost.

Regards.

[robertgallup]

OK. One step closer. :) Do you know what is the value of the bitdepth variable in your file's output? Also, one thing you might try is using the sample file soba.bmp to see if you can get that to work. Then, it might be easier to see what's going on with your file...

[automatsound]

Yes, step by step!!.

Sorry but i don't know how to see the bitdepth. My last tries i do with your archive and same problem.
This is the demo code for the demo image:

#define WiFi_Logo_width 60
#define WiFi_Logo_height 36
const uint8_t WiFi_Logo_bits[] PROGMEM = {
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xF8,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0xFF, 0x07, 0x00, 0x00, 0x00,
0x00, 0x00, 0xE0, 0xFF, 0x1F, 0x00, 0x00, 0x00, 0x00, 0x00, 0xF8, 0xFF,
0x7F, 0x00, 0x00, 0x00, 0x00, 0x00, 0xFC, 0xFF, 0xFF, 0x00, 0x00, 0x00,
0x00, 0x00, 0xFE, 0xFF, 0xFF, 0x01, 0x00, 0x00, 0x00, 0x00, 0xFF, 0xFF,
0xFF, 0x03, 0x00, 0x00, 0x00, 0xFC, 0xFF, 0xFF, 0xFF, 0xFF, 0x00, 0x00,
0x00, 0xFF, 0xFF, 0xFF, 0x07, 0xC0, 0x83, 0x01, 0x80, 0xFF, 0xFF, 0xFF,
0x01, 0x00, 0x07, 0x00, 0xC0, 0xFF, 0xFF, 0xFF, 0x00, 0x00, 0x0C, 0x00,
0xC0, 0xFF, 0xFF, 0x7C, 0x00, 0x60, 0x0C, 0x00, 0xC0, 0x31, 0x46, 0x7C,
0xFC, 0x77, 0x08, 0x00, 0xE0, 0x23, 0xC6, 0x3C, 0xFC, 0x67, 0x18, 0x00,
0xE0, 0x23, 0xE4, 0x3F, 0x1C, 0x00, 0x18, 0x00, 0xE0, 0x23, 0x60, 0x3C,
0x1C, 0x70, 0x18, 0x00, 0xE0, 0x03, 0x60, 0x3C, 0x1C, 0x70, 0x18, 0x00,
0xE0, 0x07, 0x60, 0x3C, 0xFC, 0x73, 0x18, 0x00, 0xE0, 0x87, 0x70, 0x3C,
0xFC, 0x73, 0x18, 0x00, 0xE0, 0x87, 0x70, 0x3C, 0x1C, 0x70, 0x18, 0x00,
0xE0, 0x87, 0x70, 0x3C, 0x1C, 0x70, 0x18, 0x00, 0xE0, 0x8F, 0x71, 0x3C,
0x1C, 0x70, 0x18, 0x00, 0xC0, 0xFF, 0xFF, 0x3F, 0x00, 0x00, 0x08, 0x00,
0xC0, 0xFF, 0xFF, 0x1F, 0x00, 0x00, 0x0C, 0x00, 0x80, 0xFF, 0xFF, 0x1F,
0x00, 0x00, 0x06, 0x00, 0x80, 0xFF, 0xFF, 0x0F, 0x00, 0x00, 0x07, 0x00,
0x00, 0xFE, 0xFF, 0xFF, 0xFF, 0xFF, 0x01, 0x00, 0x00, 0xF8, 0xFF, 0xFF,
0xFF, 0x7F, 0x00, 0x00, 0x00, 0x00, 0xFE, 0xFF, 0xFF, 0x01, 0x00, 0x00,
0x00, 0x00, 0xFC, 0xFF, 0xFF, 0x00, 0x00, 0x00, 0x00, 0x00, 0xF8, 0xFF,
0x7F, 0x00, 0x00, 0x00, 0x00, 0x00, 0xE0, 0xFF, 0x1F, 0x00, 0x00, 0x00,
0x00, 0x00, 0x80, 0xFF, 0x07, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xFC,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
};

I just change all between "{" and "};"

[robertgallup]

One thing I notice is that you said your logo was 128x64, but the width in your example is 60 and the height is 36. Is that right?

If you use soba.bmp in your example, the width is 40 and the height is 32. Incorrect sizes can result in a mixed up image.

[automatsound]

Yes, is that right, i see it too while waiting your answer and I change it to correct size, the image looks "better" but still unrecognizable. Looks like partially duplicate image in the display:

[robertgallup]

I just checked the esp8266-oled-ssd1306 sample code. It looks like it is expecting XBM format data. It also looks like the main thing about that format is that it expects the bit order of each byte to be reversed (first bit of image is on the right of the first byte).

That said, I just pushed an update to bmp2hex that adds the "-x" parameter to output bytes in the XBM format. Give it a try and let me know if that works. :)

[automatsound]

Oh, very nice, I do not expected that XBM format was the problem.

Thanks a lot for your update, now works perfectly with your .bmp example !! :)

Just i need add "," in the last line of hex in my code and works:

0x00, 0x00, 0x80, 0xff, 0x01, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00

Please can you tell me some tips about choose the correct parameters? i write "python bmp2hex.py -n -x -w 8 soba.bmp" but i don't have any idea if i need to type "-n" or "4", "8" ... in "-w" parameter, etc.

Now i need to work with my own images because i am still seeing a little wrong: with background, not smooth edges ...

Anyway thanks to you I do a big step! 😃

Thanks again for your help and attention my friend!

Regards.

[robertgallup]

Excellent! Glad that problem is solved. And now there's another feature in the utility. :)

As for which options to use, "-w" only determines output formatting, not content. So, it is whatever you prefer. If you leave it off, the default is 16 bytes per line.

You definitely need the "-x" option for the XBM format, but everything else isn't necessary if you know how to copy the pixel data output to your sample code. So, the easiest command for you would be:

python bmp2hex.py -x "your-file.bmp"

where "your-file.bmp" is whatever your file name is (without the quote marks).

For bmp files, I have found that a pixel editor like Photoshop is better than a vector editor like Illustrator.

I hope this helps.

[robertgallup]

BTW. I just pushed another update with slightly improved XBM support (bmp2hex now outputs correctly formatted define statements for height and width and for the bits.)

[automatsound]

Ok, finally i design my image with Photoshop and works perfect, even i can retouch the final design with pencil and eraser features adding or removing pixels from the final design.

Your last version tested and works perfectly.

It's not an important issue but, maybe... can you add the final "," in the last hex line of the array, then user can copy, paste and done.

Regards (and thanks for all again!! 😃)

[robertgallup]

Glad it worked. Can you explain what you mean by the final ","? (I looked at the output and the last line doesn't look like it requires a comma after the last value).

BTW, I added a "const" to the PROGMEM to fix an Arduino compile error I didn't notice before.

[automatsound]

This is an example, the final 4 lines:

0x00, 0x00, 0x00, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80

The last line needs a "," in the end, the Arduino program need it.

EDIT: Ok, forget it, works without the last ",".

[robertgallup]

OK. Thanks for checking! :-)

I just pushed a "final" version of XBM support with the "const" keyword.
I'm closing this issue for now. If you have any more issues, let me know.

[automatsound]

Thanks to you, for all!

Regards!!