When you want to draw an image in a screen using Arduino you must convert the image to PROGMEM const unsigned char first. In order to achieve that, there are some tools available like image2code or LCD Assistant, but in this tutorial we will show an easier and friendlier way, using the GIMP image editor.

static unsigned char coconauts_bits[] = { 0x00, 0xc0, 0x7f, 0x00, 0xc0, 0xff, 0x00, 0x00, 0xf8, 0xff, 0x03, 0x20, 0xf0, 0x01, 0x00, 0xfe, 0xe0, 0x0f, 0x10, 0xc0, 0x01, 0x00, 0x7f, 0xc0, 0x1f, 0x7c, 0x80, 0x01, 0xc0, 0xff, 0xe0, 0x7f, 0xfc, 0x01, 0x01, 0xe0, 0xff, 0xff, 0xff, 0xf8, 0x01, 0x01, 0xf0, 0xff, 0xff, 0xff, 0xf1, 0xf1, 0x03, 0xf0, 0x83, 0x1f, 0xfc, 0xc1, 0xd9, 0x06, 0xf8, 0x01, 0x0f, 0xf8, 0x03, 0x9b, 0x04, 0xfc, 0x83, 0x1f, 0xfc, 0x07, 0xde, 0x0e, 0xfc, 0xff, 0xff, 0xff, 0x07, 0x78, 0x0b, 0xfe, 0xff, 0xff, 0xff, 0x0f, 0x08, 0x08, 0xfe, 0xff, 0xff, 0xff, 0x0f, 0x08, 0x08, 0xfe, 0xff, 0xff, 0xff, 0x0f, 0x10, 0x08, 0xff, 0xff, 0xff, 0xff, 0x1f, 0x10, 0x18, 0xff, 0xff, 0xff, 0xff, 0x1f, 0x10, 0x10, 0xff, 0xff, 0xff, 0xff, 0x1f, 0x20, 0x10, 0xff, 0xff, 0xff, 0xff, 0x1f, 0x20, 0x10, 0xff, 0xff, 0xff, 0xff, 0x1f, 0x20, 0x10, 0xff, 0xff, 0xff, 0xff, 0x1f, 0x20, 0x10, 0xff, 0xff, 0xff, 0xff, 0x1f, 0x20, 0x10, 0xff, 0xff, 0xff, 0xff, 0x1f, 0x20, 0x10, 0xff, 0xff, 0xff, 0xff, 0x1f, 0x20, 0x10, 0xfe, 0xff, 0xff, 0xff, 0x1f, 0x20, 0x10, 0xfe, 0xff, 0xff, 0xff, 0x1f, 0x10, 0x08, 0xfe, 0xff, 0xff, 0xff, 0x1f, 0x10, 0x08, 0xfc, 0xff, 0xff, 0xff, 0x0f, 0x10, 0x08, 0xfc, 0xff, 0xff, 0xff, 0x0f, 0x08, 0x08, 0xfc, 0xff, 0xff, 0xff, 0x07, 0x08, 0x04, 0xf0, 0xff, 0xff, 0xff, 0x01, 0x04, 0x04, 0xf0, 0xff, 0xff, 0xff, 0x01, 0x06, 0x02, 0xe0, 0xff, 0xff, 0xff, 0x00, 0x03, 0x02, 0xe0, 0xff, 0xff, 0x7f, 0x00, 0x01, 0x01, 0x20, 0xff, 0xff, 0x1f, 0x80, 0x80, 0x00, 0x40, 0xfe, 0xff, 0x0f, 0x60, 0x80, 0x00, 0x40, 0xf8, 0xff, 0x03, 0x20, 0x40, 0x00, 0x80, 0xf1, 0x7f, 0x00, 0x18, 0x20, 0x00, 0x00, 0xc1, 0x03, 0x00, 0x06, 0x10, 0x00, 0x00, 0x02, 0x1e, 0xf0, 0x01, 0x08, 0x00, 0x00, 0x0c, 0xf0, 0x1f, 0x00, 0x06, 0x00, 0x00, 0x10, 0x00, 0x00, 0x80, 0x01, 0x00, 0x00, 0xe0, 0x01, 0x00, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x07, 0x00, 0x38, 0x00, 0x00, 0x00, 0x00, 0x3c, 0x00, 0x07, 0x00, 0x00, 0x00, 0x00, 0xe0, 0xff, 0x00, 0x00, 0x00 };

We will start designing the image in black and white colors using GIMP (or just use whatever program you like, and then import the image into GIMP), so it looks like this:

Then, we will export the image to XBM format.

File > Export as... > name: image.xbm

Now, here comes the fun part. Open the image as text (using gedit, kate, sublime, notepad…), and you will see something like this:

1
2
3

#define bluetooth_width 6
#define bluetooth_height 11
static unsigned char bluetooth_bits[] = { 0x04, 0x0c, 0x14, 0x25, 0x16, 0x0c, 0x16, 0x25, 0x14, 0x0c, 0x04 };

All you need to do is add that code to Arduino ( you can add PROGMEM to it if you want) and draw the image using u8glib or Adafruit_GFX, e.g:

 #Adafruit_GFX
 display.drawBitmap(x, y, bluetooth_bits, bluetooth_width, bluetooth_height, BLACK);

 #U8glib
 display.drawXBMP(x,y, bluetooth_width,bluetooth_height,bluetooth_bits);

As simple as that.

Now you can open the same image in XBM format using GIMP to edit the image directly, without doing any conversion.