Arduino Tutorial: Bitmap graphics on an Arduino Touch Screen and other top Arduino Displays

Dear friends welcome to another video tutorial! Today we are going to learn how to display bitmap graphics on the color displays that use Adafruit’s libraries. There is a lot to cover so let’s get started! Hey guys, I am Nick and welcome to educ8s.tv a channel that is all about DIY electronics projects with Arduino, Raspberry Pi, ESP8266 and other popular boards. In this video we are going to learn how to load bitmap graphics on these color displays. As you can see, I have some color displays here, and each one displays some custom bitmap graphics. Loading bitmap graphics is a very useful functionality that Adafruit’s GFX library offers. With this functionality we can make our Arduino or ESP8266 projects much more fun and interesting! Let’s see how to achieve this result. The procedure that I am going to describe works with all the color displays that are supported by Adafruit’s GFX library and by the displays that use the TFTLCD library from Adafruit with a small modification. So from the displays I own I can use the color OLED display, the 1.8” ST7735 color TFT display, the 2.8” Color Touch Screen that I reviewed a few weeks ago and the 3.5” Color TFT display. You can find links for all the displays in a link in the description below. The GFX library from Adafruit offers a function which is called drawBitmap which displays 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 so with a little imagination we can create colorful graphics. If the display we use does not support the Adafruit GFX library but it is using the TFTLCD library we have to copy the code of the drawBitmap function in our sketch before we can use it. The drawBitmap function takes 6 arguments. The first two are the x and y coordinates of 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. 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. Now let’s see the procedure from the beginning. For this example I am going to use this 2.8” Touch Screen which offers a resolution of 320x240 pixels. We are going to create this graphic, a car bitmap with a text title in a custom font. At first we create the car bitmap. I am using Paint.net free software in order to create the graphics. We have to use black color for background and white color the car graphic. Of course the resolution of the graphic must be smaller than the displays resolution in order to fit in it. The resolution of this bitmap is 195x146 pixels. We also create the text title using any font and language we want. Again, the text must be in white the background black. We save both files as .bmp files with 24-bit color. Be careful, big bitmap files require a lot of memory so always make your graphics as small as possible. Next we have to convert the bitmap graphics into bit arrays in order to use them in our code. In order to achieve that we have to use a java utility that is developed by Adafruit. You can find a link for it below. All we have to do is to load each bitmap graphic and the array will be created automatically. Now in the Arduino Project folder I am going to create a new .c file and I am going to call it graphics.c . In this file I am going to paste the data arrays for each graphic. In this example we have two bitmaps to load so we have two data arrays. We declare the type of the data in the array as const unsigned char, we name the first array car and we save the data in the program memory of the Arduino. We follow the same procedure for the other bitmap as well. We name the second image title. We also have to include this line here in order to be able to use the program memory of the Arduino. We also have to declare these two data arrays as extern variables in the main Arduino Sketch like this. Now we are almost ready to load the bitmap on the display. Since the display we are using does not support the GFX library from Adafruit we need to copy the drawBitmap function in the main Arduino Sketch. Now all we have to do is the call the drawBitmap function. We first display the title. We set the x and y coordinates on the screen where we want the top left corner of the graphic to be. Next we say that we want to load the bitmap from the “title” variable and the resolution of it. The last argument is the color that we want for this bitmap. We follow the same procedure with the car bitmap as well but we set its color to green. That’s it, the graphics will be displayed on the screen! In this example sketch I am using the same bitmaps many times with different color combinations in order to demonstrate how it works. Cool, isn’t it? If we are using a display that supports the Adafruit GFX library we don’t need to copy the drawBitmap function in the code, we only need to call it. We call it like this, tft.drawBitmap where tft is the name of the object for the display. If we combine the drawBitmap function with the functions for the creation of simple shapes, like circles and rectangles we can create impressive icons with small memory usage. For example, all the weather icons of this example are created with the use of only three bitmaps. These are the icons for an upcoming project so stay tuned. For example the moon icon is just two circles, a Grey and a Black. You can find links for all the examples we saw today in a link in the description of the video. As you can see, following this procedure we can use bitmap graphics in our Arduino and ESP8266 projects. This way we make our projects more interesting and more user friendly. I am going to use this functionality a lot in the future so stay tuned. Of course we have to thank Adafruit for providing these libraries and the tools to achieve such impressive results. Thank you guys for the great work! If you like this video or if you find it useful please press the like button below it really helps! If this is your first time here, I would love to have you subscribed. In this channel I post videos about DIY projects every Saturday. I love making things and I believe that anyone can make things, anyone can become a maker. That’s why I created this channel, in order to share my knowledge with the community and learn from the community. I hope you will join us. Until next Saturday, Watch, Learn, Build! [ Translating these subtitles? Add your name here! ]

Channel: educ8s.tv

Views: 93,814

Keywords: Arduino, Arduino Color Display, Arduino Graphics, Arduino Bitmap, Arduino bitmap Array, Arduino GFX, Adafruit GFX, educ8s, educ8s.tv, Arduino ST7735, Arduino Touch Screen, Top Arduino Displays, Arduino Touch Screen tutorial, Arduino Color TFT, Arduino graphics, arduino drawBitmap, drawBitmap function, Arduino Color Graphics, Arduino Tutorial, Arduino Easy tutorial, arduino touch display, esp8266, wemos D1 mini, touch screen, tft touch screen, tft, lcd

Id: 7ER1fbDoc20

Length: 7min 21sec (441 seconds)

Published: Sat Dec 10 2016