SSD1306 OLED with STM32 | I2C Display Tutorial for Beginners - video Dailymotion

ControllersTech

Learn how to interface the SSD1306 OLED display with an STM32 microcontroller using the I2C protocol, STM32CubeMX, and HAL libraries. In this step-by-step tutorial, you'll see how to configure I2C in CubeMX, write HAL-based code, and display text and bitmaps on a 128x64 OLED screen. This guide is perfect for beginners and embedded developers working on real-time display projects with STM32.   📌 Covered in this video:   - Wiring the OLED to STM32 (I2C)  - CubeMX I2C and GPIO setup  - HAL-based SSD1306 initialization  - Displaying text and images on OLED   ✅ Tested on STM32F103 (Blue Pill), but works with other STM32 MCUs.   📁 Source Code + Tutorial:  👉 https://controllerstech.com/oled-display-using-i2c-stm32/   🔔 Don’t forget to subscribe for more STM32 tutorials!   #STM32 #OLED #SSD1306 #CubeMX #I2C

Transcript

00:00Hello everybody. Welcome to Controllers Tech.

00:22Few months ago, I made a video about, how to interface SSD 1306, 128x64, OLED display with STM32.

00:35That video only covered the interfacing part, and some basic text display.

00:40Today in this video, we will use, some advanced display functions, in SSD 1306.

00:48I have modified the previous library.

00:52And now, we can display, lines, shapes, bitmaps, and also animations.

00:58You can also scroll text, and bitmaps on the screen, in different directions.

01:04I am starting my setup with CubeMX.

01:07I am using my usual F103 controller.

01:11Make sure you use the fast mode, at 400 kHz.

01:16Let's copy some library related files, in the project.

01:20Let's copy some library related files, in the project.

01:24Let's copy some library related files, in the project.

01:33Let's copy some library related files, in the project.

01:46Now, we need to include all those header files, that we copied.

02:08Now, we need to include all those header files, that we copied.

02:12Let's just quickly build it once.

02:25OK, let's see the list of functions, available for the programming.

02:38We will start by, initializing the display.

02:49Let me just print some string on the display.

02:52And it is the usual one, hello, world.

02:56You have to write, update screen function, every time you want something, to display on

03:01the screen.

03:03I want to keep this text for 2 seconds, and that explains the delay in the end.

03:08Let's check the list of functions again.

03:17We have scroll functions, to right and left, along with diagonal scrolling, and then,

03:22there is, stop scroll.

03:25We can also invert the display, or display bitmap.

03:29Let's start with scrolling the screen.

03:32I am going to scroll the text above.

03:34As you can see, this function takes 2 parameters.

03:38The first one is the row, where you want the scroll to start.

03:42The second one is the end row.

03:45Well, basically these are not the rows.

03:48These are the pages.

03:50This display have 7 pages.

03:52You can scroll however you want.

03:55As I want to scroll the entire screen, start page will be 0, and the end page will be 7.

04:02Providing delay, will keep the scrolling, for that amount of time.

04:07You should stop the scroll, or else, the screen will keep scrolling.

04:12Let's draw some bitmap now.

04:19I have this image right here, which I want to display on the screen.

04:24I am using GIMP to modify the image.

04:27It's free and open source, and it's good.

04:36Next thing we need to do is, resize the image to 128 by 64.

04:47Next we need to change the color index to, 1 bit, black and white only.

05:01And now, we can export this image, as a bitmap image, with BMP extension.

05:17Next, I am using LCD assistance, to convert it to the hex format.

05:25You can google it.

05:26It's easily available for download.

05:36Make sure, that the byte orientation is horizontal, and, the sizeendianness is big.

05:43After this, just save the file, and you will get you hex code.

06:02I am creating another file in the project, where I can store my bitmaps, and, I will name

06:07it bitmap itself.

06:25Just include it in the project, and we are good to go.

06:34Draw bitmap takes 6 parameters.

06:37The first 2 are the, x and y coordinates, where you want to start the draw from.

06:43Next is the pointer to the array.

06:45Then, the size of the image, and at last the color, it will remain 1 in our case.

06:51We still need to update the display, to print the image on the screen.

06:56I am going to keep the image for some time, and then, scroll the image in different directions.

07:03Note that, there is some delay after every scroll.

07:06Like I mentioned before, we need to give some delay, or else, we won't be able to see it

07:11scrolling.

07:13And at last, I am going to invert the display, and then, normalize it again.

07:18Let's compile the code, and download it to the controller, to see the results.

07:46As you can see, the text scrolling, the bitmap scrolling, and the invert display functions,

07:57are working properly.

07:58Now, let's see, how to display any animation on the screen.

08:03I have this horse running GIF here.

08:06You can just google them, they are available to download for free.

08:10Open it with GIMP.

08:20Look at the right side, we have 10 different frames for this animation.

08:25First thing we need to do is, scale our image to 128 by 64.

08:48And then, we need to change the color index to, 1 bit, black and white.

09:09Look at the picture.

09:10If I show each frame, one by one, you can actually see the animation.

09:15Next, we need to hide all other frames, and keep the first one.

09:22Then, export it to the BMP extension.

09:27Just like, we did in the bitmap.

09:31Then, open the LCD assistance, and convert it to the hex code.

09:41I will create another file, where I can keep this animation, and, I am naming it as, horseaneme.h.

09:59Go back to GIMP now, and delete the first frame, unhide the second frame, and repeat the same steps.

10:06You have to do this for all 10 frames.

10:26You have to do this for all 10 frames.

10:41Now, it's time to display this animation, on our screen.

10:45First, we need to include the file, we created, in our project.

10:50Next, in the while loop, clear the screen, draw the bitmap of the first frame, and update the screen.

10:58Repeat these steps for all other frames too.

11:01Move on.

11:04Toast quack for all other frames.

11:09Toast quack for the end, we FOKE 2 method 2 machine.

11:13Heat on the left.

11:16Move on.

11:18It's time to take your massage through all the files.

11:20Need to stop the freeze.

11:22The determinant of the perspective of the screen.

11:24Move on!

11:26Move on!

11:30Let's compile, download, and run.

11:45Yeah, so the horse is running good.

11:56I am only displaying the animation part here, rest as usual.

12:02I also ported some tests for the screen.

12:05If you open the test.c file, you will see the list of tests, we can perform.

12:11These includes, lines, rectangles, circles and triangles.

12:17Let's write them all.

12:38They all take, color, as the only parameter, except circles.

12:42It takes two parameters, one is radius, and other is color.

12:47Let's test them now.

13:16Let's test them now.

13:23Let's test them now.

13:27Let's test them now.

13:37everything works great hope you liked the video leave comments if you have any doubt

13:53you can download the code from the link in the description have a nice day

14:07you

SSD1306 OLED with STM32 | I2C Display Tutorial for Beginners

Category

Transcript

Be the first to comment

Recommended