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! ]
