Paste the bit array in the graphics.c file and save.
Ensure the File is in the Same Directory as your main code Conversion from Image to DataĬopy the generated bit array, and create a graphics.c file in the same Arduino project folder where the code will reside.
Image2Code is an easy-to-use, small Java utility to convert images into a byte array that can be used as a bitmap on displays that are compatible with the Adafruit-GFX or Adafruit TFTLCD (with little modification) library.Īll we have to do is to load the graphics into the software by clicking the “Choose file” button and it will automatically generate a byte array equivalent to the selected bitmap file. To do this, we will use the “Image2Code” Java utility developed by Adafruit. The next task is to convert the graphics into byte arrays so they can be used in the code. 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 done, save both files as. Just ensure the background is black and the fill color is white if you plan to change the color within your Arduino code. Your graphics could also include some text. For this example, the resolution of the display is 320 x 340, thus the resolution of the graphics was set to 195 x 146 pixels. The resolution of the graphics created should be smaller than the resolution of your display to ensure the graphics fit properly on the display. We will create the car on a black background and use a white fill so it’s easy for us to change the color later on.
There are several tools that can be used for creation/conversion of bitmap images including, Corel Draw and, but for this tutorial, we will use the.
Thus, our first task is to create a bitmap version of the graphics to be displayed or convert the existing image to a bitmap file. Preparing the Graphicsīefore an image is displayed on any of the Arduino screens, it needs to be converted to a C compatible hex file and that can only happen when the image is in bitmap form. With the screen connected, we then proceed to prepare the graphics images to be displayed. This means no special connection is required to display graphics. Not all Arduino displays are available as shields, so when working with any of them, connect the display as you would when displaying text (we recommend following the detailed tutorial for the display type you use of the above list). The 2.8″ TFT display comes as a shield which plugs directly into the Arduino UNO as shown in the image below. To demonstrate how things work, we will use the 2.8″ TFT Display. While having all of the displays listed above may be useful, you can use just one of them for this tutorial. To demonstrate how this works with different displays, you can use some of the most popular displays:Īs usual, each of the components listed above can be bought from the links attached to them. You should check those tutorials, as they will give you the necessary background knowledge on how each of these displays works.įor this tutorial, we will use the 2.8″ ILI9325 TFT Display which offers a resolution of 320 x 340 pixels and we will display a bitmap image of a car.
While these are the displays we have, and on which this tutorial was tested, we are confident it will work perfectly fine with most of the other Arduino compatible displays.įor each of the displays mentioned above, we have covered in past how to program and connect them to Arduino. Some of the displays on which this procedure works include: The procedure described in this tutorial works with all color displays supported by Adafruit’s GFX library and also works for displays supported by the TFTLCD library from Adafruit with little modification. Today’s tutorial will focus on how you can display graphics on most Arduino compatible displays. With this functionality, we can build projects that display our own logo, or display images that help users better understand a particular task the project is performing, providing an all-round improved User Experience (UX) for your Arduino or ESP8266 based project. Displaying a custom image or graphic on a LCD display is a very useful task as displays are now a premium way of providing feedback to users on any project.