Up next in 10
Interface 1.3" SH1106 I2C OLED Display with STM32 || Text || Bitmap || Gif
38 views
Aug 3, 2024
Purchase the Products shown in this video from :: https://controllerstech.store ________________________________________________________________________________________ Watch SSD1306 0.96" I2C OLED video :::: https://youtu.be/M5ddTjrcvEs Image tool :::: https://lvgl.io/tools/imageconverter STM32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8gga7xeUUJ-bRUbeChfTOOBd DOWNLOAD THIS PROJECT FROM :::: https://controllerstech.com/interface-sh1106-oled-display-with-stm32/ ________________________________________________________________________________________ ******* SUPPORT US BY DONATING****** https://paypal.me/controllertech *******Join the Membership******* https://www.youtube.com/channel/UCkdqtSMnhYuMsJkyHOxiPZQ/join Join the Discord Server https://discord.gg/D32JE5wKyD
View Video Transcript
0:09
hello and welcome to controllers Tech
0:12
few years ago I made a video covering a
0:15
0.96 in OLED display with SDM 32 the
0:20
display used the
0:22
ssd1306 IC and it was connected via the
0:26
i2c today I have another OLED display
0:29
with with me it is
0:32
s1106 based 1.3 in OLED display with i2c
0:37
pinout since the pins are as per the i2c
0:41
standard there are only four of them
0:43
available on the board the
0:46
ssd1306 library can be used with sh11 06
0:51
but with a very minor
0:53
modification here I have downloaded the
0:56
previous ol project and we will use most
0:59
of these files in this project here I
1:02
have the modified Library files for the
1:04
sh11 06 which we will use in our project
1:09
all right let's start the cube ID and
1:12
create a new project I am using stm32
1:16
f103 C8 for this
1:19
project give some name to the project
1:22
and click finish let's start with the
1:25
clock setup first I am enabling the
1:28
external Crystal to provide the clock
1:32
the blue pill has 8 MHz Crystal on it
1:34
and we will use the PLL to run the
1:36
system at a maximum 72 MHz clock also
1:41
make sure to enable the serial wire
1:43
debug now go to connectivity and enable
1:47
the I2 C1 you can see the pin pb6 and
1:51
pb7 got configured as the clock and data
1:54
pins in the parameter setting set the
1:57
i2c speed to fast mode as we need the
2:00
i2c clock at 400
2:02
khz that is all the configuration we
2:05
need click save to generate the project
2:08
let's check the connection before
2:10
proceeding further here you can see the
2:13
connection between the ol and the SDM
2:16
32 the OLED is powered with 3.3 volts
2:20
from the SDM 32 itself the clock pin is
2:24
connected to the pin pb6 and the data is
2:27
connected to the PIN pb7
2:30
now we will copy the sh11 06 Library
2:34
files to our project copy the C file in
2:37
the source directory and head a file in
2:40
the include directory we will use some
2:43
other files from the previous old
2:45
project as well let's copy these bitmap
2:48
fonts and animation files in the source
2:52
directory also copy the fonts header
2:54
file into the include
2:56
directory as I said the sh11 06 library
3:01
is very similar to
3:03
ssd1306
3:04
in fact I have only made changes here in
3:08
the initialization commands and removed
3:10
the scrolling function as this IC does
3:13
not have dedicated Hardware scrolling
3:16
features other than this the library is
3:19
exactly the same as the
3:21
ssd1306
3:23
in the beginning of this file you need
3:26
to define the i2c instance you are using
3:29
also in the sh11 06 header file Define
3:33
the olet
3:35
size the sh 11106 IC only supports 132
3:41
by 64 pixels so we need to make some
3:44
adjustments while writing the code even
3:47
the slave address for both ic's is the
3:49
same so we don't need to worry about
3:51
that part let's understand the function
3:54
available in this Library the init
3:57
function will initialize the display and
4:00
set the background to Black the update
4:03
screen function must be called to flush
4:05
the buffer to the display after writing
4:08
the text or drawing pictures this
4:10
function must be called to display the
4:12
updated data the tole invert function
4:16
will invert the display it will change
4:18
the black color to white and white to
4:20
black The Fill function will fill the
4:23
entire display with the respective color
4:26
if you take a look at the color
4:28
enumeration there are only only two
4:30
available black and white actually the
4:33
white can be even blue or yellow
4:35
depending on the color type of the old
4:38
display the draw pixel function will set
4:41
a pixel defined by the X and Y
4:44
coordinates the color parameter defines
4:46
the color of the pixel the go to
4:49
function sets the cursor at a location
4:51
defined by the X and Y
4:54
coordinates this function needs to be
4:56
called before printing a character or a
4:58
string on the display the puty function
5:02
prints a single character on the display
5:05
the second parameter of this function is
5:07
the fonts that you want to use the
5:10
character will be printed at a location
5:12
set by the function go to XY the puts
5:16
function prints an entire string on the
5:18
display next we have the functions to
5:21
draw lines rectangles triangles and
5:25
circles then the clear function will
5:27
fill the entire display with black color
5:30
the on and off functions are used to
5:33
turn the display on and off the invert
5:36
display function will invert the display
5:38
as per the parameter if the parameter is
5:41
zero the display will remain black
5:44
background with white text or if the
5:46
parameter is anything else the display
5:48
will change to white background with
5:50
black
5:51
text at last we have the function to
5:54
draw the bit map the drawing will start
5:57
from X and Y coordinates
6:00
the second parameter is the pointer to
6:02
the bit map that we want to
6:04
draw then we have the width and height
6:07
of the
6:08
image so these are all the functions
6:10
available in the library we will test
6:13
them one by one let's include the sh
6:17
11106 header file and the fonts header
6:20
file as well now in the main function
6:23
initialize the display
6:25
first then put the cursor at the
6:28
beginning of the display
6:30
note that the sh 11106 IC supports 132
6:35
by 64 pixels but here we have
6:38
128x 64 display so we need to Center our
6:43
data and therefore leave two pixels from
6:46
both ends on the
6:48
x-axis therefore you will always have an
6:50
offset of two on the
6:52
x-axis now we will print hello at the
6:55
beginning of the
6:56
display you can choose from the fonts of
6:59
available in the fonts
7:01
file I am choosing this 11 by8
7:05
font I will find ways to generate more
7:08
fonts and if I do find some I will
7:10
update the description of this video so
7:14
let's pass the address of the font 11
7:16
by8 here and the color will be one we
7:21
have passed the string to the display
7:23
buffer but to print it we need to call
7:25
the function update screen let's build
7:29
this
7:30
we don't have any errors so let's flash
7:32
it to the
7:37
board you can see the string hello is
7:40
printed on the display now let's print
7:43
another string first we will set the
7:45
cursor to zero in X and 30 in y then
7:49
print world at this location let's flash
7:52
it to the board again you can see both
7:55
the strings get printed at their
7:57
respective locations
7:59
so we are able to print the strings on
8:02
the display now we will see how to print
8:05
a number let's define a number first we
8:09
cannot print the number directly on the
8:11
display instead we need to print the
8:13
equivalent asy
8:15
characters this buffer will store the
8:17
equivalent aski data for the respective
8:20
number we will use S printf to convert
8:23
the integer value to the character
8:24
format the converted data will be stored
8:27
in the array now let's put the cursor at
8:30
x0 and y10 send the buffer using the
8:34
function puts and update the
8:39
screen let's build the project
8:43
once we need to include the standard IO
8:47
header file Also let's change the buffer
8:50
type to character type all right let's
8:53
flash it to the board now
9:00
you can see the number is printed on the
9:03
display similarly we can display the
9:05
float numbers as well you just need to
9:08
change the format in the S print F
9:10
function so we are able to print the
9:13
strings and numbers on the display now
9:16
we will see the bitmap the bitmap file
9:19
we copied from the old project already
9:21
has the bitmap array in it but I will
9:24
once again show how to generate the C
9:26
array for the bit map here I have a
9:29
black and white image of the logo let's
9:32
open it in the image editing
9:36
software we need to First resize the
9:39
image to
9:40
128x 64
9:48
pixels now export the image in the BMP
9:54
format the big map image is now ready so
9:58
we will convert it to the C array we
10:00
will use the image converter tool by
10:03
lvgl here select the lvgl version 8 then
10:08
select the image from the computer the
10:11
color format should be set to index one
10:13
bit output format should be the C array
10:17
and check the big endian format as well
10:20
click convert and a C file will
10:23
download this file is generated
10:25
according to the lvgl format but we are
10:28
only inter Ed in this array let's copy
10:31
it to our bitmap
10:34
file now remove all the lvgl defines
10:38
from here also remove these two lines we
10:42
now have the propery array for the bit
10:45
map image this is the name of the array
10:49
include the bitmap header file in the
10:51
main
10:55
file now inside the main function call
10:58
the draw bit map function we will draw
11:01
the image from the beginning of the
11:03
display pass the array name here and
11:06
then the size of the image Now call the
11:10
update screen function to display this
11:13
image let's build and Flash it to the
11:15
board you can see the bit map has been
11:18
printed on the display we can display
11:21
any bitmap image in the similar
11:25
way now let's see how to display a gif
11:29
we copied this horse animation file from
11:31
the old project this file contains 10
11:35
different CR arrays for the
11:37
bitmaps when we run these bit Maps one
11:40
after another they produce an animation
11:42
like effect we will see how to generate
11:45
these arrays from a gif file let's say I
11:49
want to display this GIF on the OLED
11:51
screen we need to first save this image
12:01
now open it with the image editing
12:04
software here you can see we have six
12:06
different images in this GIF we need to
12:10
extract these images one by one let's
12:13
resize the gift to 128x 64 pixels now
12:18
hide all the images leaving only one
12:22
then export the image in the bit map
12:24
format here you can see the first image
12:27
that we exported now hide the first
12:30
image and extract the second
12:35
one do the same for other images as well
12:39
now we have all six-bit maps so we will
12:42
generate the C arrays for them select
12:45
all the six images and click convert to
12:48
generate the C
12:56
files now copy the array content from
12:59
these files into a separate file
13:50
we now have the data for six different
13:52
bitmap
13:53
images let's include the header file in
13:56
our main file
14:01
after we draw the logo bit map give a
14:03
delay of 2 seconds inside the while loop
14:07
draw the bit map for the first
14:11
image but clear the display before that
14:14
and update the screen
14:18
afterwards now repeat this process for
14:21
the other bitmap images as well let me
14:24
uncomment this part also and five a
14:26
delay of 2 seconds after printing these
14:29
Rings all right let's build and Flash it
14:32
to the board so we have the text the
14:35
logo bit map and the horse GIF is
14:37
playing as
14:40
well this is not as smooth as I thought
14:43
it would
14:44
be let's display this one from the
14:47
previous old
14:51
project include the horse animation
14:54
header
14:56
file now in the while loop draw all 10
14:59
bit
15:10
maps all right let's build and Flash it
15:13
to the
15:22
board now you can see another GIF
15:25
containing another horse
15:29
so we were able to print the strings
15:31
display the bit maps and even managed to
15:34
display the GIF on the old display this
15:37
is it for the video I hope everything
15:40
was clear you can download the code from
15:43
the link in the description leave
15:46
comments in case of any doubt keep
15:49
watching and have a nice day ahead
#Consumer Electronics