Hey guys, Nick here. welcome to educ8s.tv a channel dedicated to DIY electronics projects with Arduino, Raspberry Pi, ESP8266 and other popular boards. In today’s Arduino tutorial, we are going to learn how to display custom bitmap graphics on most of the popular screens/displays that are compatible with the Arduino using the Adafruit GFX library and/or the Adafruit TFTLCD library.

Being able to display a personal/customized bitmap graphics on a display is a very useful functionality that Adafruit’s GFX library offers. With this functionality, we can build projects that display our own logo, or that helps users better understand a particular task the project is performing, providing an all-round improved User experience for your Arduino or ESP8266 based project.

The procedure that I am going to describe in this tutorial works with all the color displays that are supported by Adafruit’s GFX library and it also works for displays that use the TFTLCD library from Adafruit with a little modification. Some of the displays which I own on which this procedure works include the color OLED display, the 1.8” ST7735 color TFT display, the 2.8” Color Touch Screen which I reviewed a few weeks ago and the 3.5” Color TFT display. For each of the screen mentioned above, I have at one time or the other in the past cover how to connect them in an Arduino tutorial and you should check those tutorials out as it may give you a better background knowledge into how each of this displays works.

For this tutorial, we will be using the 2.8″ TFT Display which offers a resolution of 320 x 340 pixels resolution and we will display bitmap image of a car as shown in the image below.

2.8″ TFTLCD Display

As earlier mentioned and can be seen from the video, this procedure works with other screens which are compatible with the AdafruitGFX library or the Adafruit TFTLCD library.

Component/Parts and Where to Buy

The following components/parts listed below are needed to build this project and they can each be bought via the link in front of them.

  1. Color OLED ▶ http://bit.ly/ColorOLED
  2. 1.44″ TFT  ▶ https://educ8s.tv/part/LCD144
  3. 1.8″ TFT ST7735  ▶ https://educ8s.tv/part/7735
  4. 2.8″ Touch Screen  ▶ https://educ8s.tv/part/TouchScreen28
  5. 3.5″ Color TFT  ▶ https://educ8s.tv/part/ColorTFT35
  6. Arduino Uno  ▶ https://educ8s.tv/part/ArduinoUno

Full disclosure: All of the links above are affiliate links. I get a small percentage of each sale they generate. Thank you for your support!

[adsense]

Arduino Bitmap Graphics Tutorial –

Schematics

The 2.8″ TFT display used for this tutorial comes as a shield and it plugs in directly to the Arduino as shown in the image below

Display Mounted on the Arduino

Thus, there is no need for jumper wires and no real need for us to bother about the connection. howbeit, when using other displays, like the OLED, no special connection mode is required other than the way they are connected to display ordinary text.

Arduino Bitmap Graphics Tutorial –

Preparing the Graphics

Before putting the bitmap on a display we will need to create them or convert an already existing image into a bitmap image after which we will convert the bitmap image into a hex file which can then be used in our Arduino code. There are several tools which can be used for the creation of bitmap images, the likes of Corel draw and paint.net to mention a few, but for this tutorial, we will be using the paint.net software.

The first thing we do is to create the car graphics, we will be using a black color for the background and white color for the car itself so the color of the car can be changed easily.

Car Bitmap

The resolution of the graphics should be smaller than that of the display so the graphics can fit into it. For this example, the resolution of the graphics is 195 x 146 pixels.

set the resolution within the boundaries of the screen’s resolution

We can also create a text-based bitmap for the title, using any font and any language, we only need to make sure that background of the text is black and the text itself is white for easy display.

Car Title

We then save both files as .bmp with 24bits color, it is important to keep in mind that large bitmaps use up a lot of memory and may prevent your code from running properly so always keep the bitmaps as small as possible.

With the graphics ready, the next task is for us to convert the graphics into bit arrays so they can be used in the code. To do this, we will be using the Image to LCD bitmap converter Java utility developed by Adafruit.

All we have to do is to load the graphics into the software and it will automatically generate the required bit array.

copy the generated bit array, and create a graphics.c file in the same Arduino project folder where the code will reside.

Paste the copied data array in the graphics.c file and save. Since we have two graphics for this tutorial, paste the data array for the two graphics in the file, separating them with their names. Don’t forget to declare the type of data in the data array as cont unsigned char and to add PROGEM in front of it (as shown in the image below) to store the data in the program memory of the Arduino.

At the top of the graphics.c file, it is important to include the avr/pgmspace header file as the c file won’t be stored in the program memory without it.

The Java utility software for converting the images to code can be downloaded from the link below.

?Image2Code Java Utility: https://github.com/ehubin/Adafruit-GFX-Library/tree/master/Img2Code

With all this done, we are now ready to write the code for this project.

Arduino Bitmap Graphics Tutorial – The Code

As earlier mentioned, this functionality can be achieved by using the Adafruit GFX library or making a slight modification to the Adafruit TFTLCD library. so we will need these libraries for this tutorial and they can be downloaded from the link below.

LIBRARIES

? Adafruit GFX Library: https://github.com/adafruit/Adafruit-GFX-Library

The GFX library from Adafruit offers a function called drawBitmap, which enables the display of a monochrome bitmap image on the display. We can’t load multicolor graphics with this function just single color graphics but we can change the color of the bitmap image itself and thus display our graphics in different colors.  If the display you have does not support the Adafruit GFX library but supports the Adafruit TFTLCD library we will have to make a modification to the Arduino sketch which involves copying the code of the drawBitmap function from the GFX library and pasting it in our Arduino sketch so it becomes a user-defined function.

The drawBitmap function is the key ingredient to writing the code for this project and every other part of the code has been covered at one time or the other in other tutorials on this website. The drawBitmap function takes 6 arguments as shown in the code snippet below;

void drawBitmap(int16_t x, int16_t y,const uint8_t *bitmap, int16_t w, int16_t h, uint16_t color)

The first two are the x and y coordinates of a point on the screen where we want the image to be displayed. The next argument is the array in which the bitmap is loaded in our code, in this case, it will be the name of the car and the text array located in the graphics.c file. The next two arguments are the width and height of the bitmap in pixels, in other words, the resolution of the image. The last argument is the color of the bitmap, we can use any color we like. The bitmap data must be located in program memory since Arduino has a limited amount of RAM memory available. The function is used as shown in the code snippet below:

void drawBitmap(int16_t x, int16_t y,const uint8_t *bitmap, int16_t w, int16_t h, uint16_t color)

Since using the TFTLCD library to achieve the goals of this project is more complex, it’s probably better to do a full explanation of how to write the code using the procedure. Howbeit, the code for the two procedures is included in the folder under the download section.

As usual, to begin the code, we include the libraries to be used for the project, in this case, the TFTLCD library.

#include <Adafruit_TFTLCD.h>

With that done, we then declare the pins of the Arduino to which the LCD is connected.

#define LCD_CS A3 
#define LCD_CD A2 
#define LCD_WR A1 
#define LCD_RD A0 
#define LCD_RESET A4

Next, we create the colors to be used specifying the matching hex values, after which we create an instance of the TFTLCD library.

#define BLACK   0x0000
#define BLUE    0x001F
#define RED     0xF800
#define GREEN   0x07E0
#define CYAN    0x07FF
#define MAGENTA 0xF81F
#define YELLOW  0xFFE0
#define WHITE   0xFFFF
#define GREY     0xD6BA

Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET);

Next, we declare the name of the graphics which will be used; car and title, at this stage, you should have added the bit array for this two bitmaps in the graphics.c file and the file should be located in the same sketch folder as this code.

extern uint8_t car[];
extern uint8_t title[];

Next, we write the void setup function. All we do here is to initialize the screen and rotate it to a preferred orientation.

void setup() {
  Serial.begin(9600);
  Serial.print("Starting...");
  
  tft.reset();
  tft.begin(0x9325);
  tft.setRotation(1);
  

}

Next, is the void loop function, under the loop function, we call the drawbitmap function to display the car and the text bitmap using different colors.

void loop() 
{  
  tft.fillScreen(BLACK);
  tft.drawRect(0,0,319,240,WHITE); //Draw white frame

  drawBitmap(30, 10, title, 275, 31,WHITE);
  drawBitmap(65, 70, car, 195, 146,GREEN);
  delay(2000);
  drawBitmap(30, 10, title, 275, 31,BLUE);
  drawBitmap(65, 70, car, 195, 146,RED);
  delay(2000);
  drawBitmap(30, 10, title, 275, 31,RED);
  drawBitmap(65, 70, car, 195, 146,BLUE);
  delay(2000); 
  tft.fillScreen(WHITE); //Make screen white
  drawBitmap(30, 10, title, 275, 31,BLACK);
  drawBitmap(65, 70, car, 195, 146,BLACK);
  delay(2000);
}

The last section of the code is the drawBitmap function itself, as earlier mentioned, to use the drawbitmap function with the Adafruit TFTLCD library, we need to copy the function’s code and paste into the Arduino sketch.

void drawBitmap(int16_t x, int16_t y,const uint8_t *bitmap, int16_t w, int16_t h, uint16_t color) {

  int16_t i, j, byteWidth = (w + 7) / 8;
  uint8_t byte;

  for(j=0; j<h; j++) {
    for(i=0; i<w; i++) {
      if(i & 7) byte <<= 1;
      else      byte   = pgm_read_byte(bitmap + j * byteWidth + i / 8);
      if(byte & 0x80) tft.drawPixel(x+i, y+j, color);
    }
  }
}

The complete code for the project can be downloaded from the link below.

——————–

CODE OF THE PROJECT
——————–

 

 

 

That’s it for this tutorial guys, thanks for watching and(or) reading. Did you make any cool and interesting modifications or you have any questions, just drop the comment. Also, subscribe to our youtube channel by clicking the link below, that way, you won’t miss new tutorials which are posted every week.

——————–

SUBSCRIBE ON YOUTUBE

——————–

Never miss a video: Subscribe to educ8s.tv