STM32 + OLED = Display Anything

hi today i'm gonna show you how to display anything you want using oled display and a microcontroller i will tell you about oled display from zero up to a working project with a code examples and a theory behind i will be using stm32 nuclear board to drive the display but the knowledge you get from this video can be transferred to any other platform for example arduino also every component and a website used in this video is in the description the video is divided into two parts short theoretical and practical enjoy so before we start coding it's necessary to say couple words about a led matrix structure its benefits why you want to use it in your projects to understand benefits of oled technology let's compare it with a well-known lcd what lcd display has that oled hasn't a backlight polarizers liquid crystals color filter all that technology doesn't have all this which makes it simpler and thinner also a led display doesn't need a backlight because organic leads produce light by themselves due to the ability to control each pixel individually while led displays have perfect black color perfect contrast ratio and superior power consumption and due to a thinner structure wide view angles and the last but not least a led displays can be flexible flexible devices aren't popular so far due to their price and mechanical challenges but in the future who knows now we know something about the oled structure and its benefits let's look at exact display i have it has resolution of 128 by 64 which means there are 8192 oleds which needs to be controlled but how do we control thousands of diets to control that amount we need 192 legs of a microcontroller in such case we can control it as a matrix but that's a lot of mcu legs what if we don't have that much the answer is the display controller that allows to reduce microcontroller pins needed to control the display to only four in case of this oled display it's ssd 1306 which significantly is job for us but don't worry most of these plays already have such a controller integrated in their structure and you don't need to buy it so in towards how it works display controller receives data from a mcu in series and can output it in parallel controlling rows and columns of oled matrix of course serial transmitting requires time and data must be stored somewhere until it can be processed further for that purpose controller has a buffer memory basically it collects bits transferred from mcu until they form a full frame then this frame can be transmitted to the oled matrix so in total for one frame we need 8192 bits in the buffer memory or 1 bit per pixel to have a refresh rate of 24 frames per second you need to transfer 8 192 bits 24 times per second which is around 200 kilobits per second communication between microcontroller and display established via the i2c interface it's serial synchronous interface because it's serial interface it's cheap simple and requires only four wires but from the drawbacks it's slow here's connection scheme between display and nuclear board serial data serial clock power supply and ground if you have the same oled display i have it already has pull up resistors and protection against reverse polarity on power pins so you don't need to bother having them on a breadboard just connect everything with the four wires and you're ready to program so that's actually all i wanted to say about the theory and now we can start practice part to write the program i will be using stm32 cube ide don't worry that's a free software you can download it from a official website without problems so first of all we need to create a new project press file new stm32 project in the window that pops up click board selector tab and choose board you are using i have nucleol 152 re so i select it next write a name of the project and change nothing more in here initialize all peripherals with their default modes yes please for the first time it might take time because it downloads all the libraries and stuff it needs to create a project and here is the mcu that my development board has with all the pins and their connections gray means nothing connected to them and green and yellow are used for samsung now we need to set up two pins of mcu to be able to communicate with a display controller using i2c that's pretty easy all we need to do is in categories click connectivity i2c1 this mcu can have two i2c in interfaces we select first one because we'll be transferring images at 24 frames per second we need more than 100 kilohertz clock you remember we calculated that we need approximately 200 kilobits per second so we select here a fast mode these are all settings we need to do here now press ctrl save do you want to generate code yes please and now we have our project id generated all necessary header and c files for us to the mcu and i2c interface just like that in a blink of an eye if you try to do same manually it would take eternity in main c file you see all the includes files init functions pin setup etc so basically ide created a template for us with a minimal functionality that we will use now so what do we do now with that we can waste hours of our lives writing tons of functions to communicate with the display or we can use ready-made libraries that we download from the github and save time i think choices obvious i will use library for stm32 but you can google and find same libraries for arduino platform again all links are in the description press code download zip at this library we are interested in several files readme license we don't care examples no and ssd 1306 that is the folder we are interested in here is the header and c files all they must be included in the project go to the stm cube ide and as a project explorer click core and click inc and src we need to copy all libraries files in here so go back to file location and while holding control select all c files press ctrl c click on src folder in project explorer and press ctrl v here we go do the same with the header files copy and paste them now we need to build the project to check if everything works click project build all and yes always we have some errors at the project explorer we see the file switch causes the problems let's open and look at them here we go fonts file includes ssd 1306 conf dot h file but from the library we copied conf template to fix this open converting plate file by double clicking on it so this conf file is designed for different stm32mcus here you can find lines that define different families of stm32 currently f0 is selected but nuclear board i have uses another one so we need to change this a little bit recommend by double slash f0 version and uncomment which one we use to find out which mcu your board uses look at the specification or look at the ink files names in the project explorer here i can see that i have stm32l1 so i need to uncomment stm32l1 additionally there are some lines about communication possibilities like i2c or spi interface we use i2c1 so change nothing in here what we need to do at last is to right click on the templates file and rename it to ssd 1306 conf dot h without team plate world now we again press project build all and here we go zero errors zero warnings beautiful now we are ready to display something we will be writing code in the main c file so first of all we need to include some header files right below it there is a command that says user code begin includes and code end includes we need to write include ssd 1306 dot ash just between these two commands now we need to initialize display controller by writing ssd 1306 underscore in it and close the brackets we need to put it after i2c1 in it after that press project build all to check if we did everything right now to display something there is a file called ssd 1306 underscore test.c we open it by double clicking and scroll down to look for a function that we can use to check the display there is a function called test all which basically tests all other functions in this file for now we're gonna use this function it includes different functions like test draw bitmap polyline arc circle rectangle like basically everything this file has so just copy the name of the function then go to main.c file and paste it into the while function between the commands press ctrl save to save everything then again project build all zero errors but one warning oh yeah that's because we haven't included test.h file just copy the name of a test header file and include it as we did earlier and try again project build all yeah zero errors zero warnings great finally we can connect development board with the display to the computer every time i connect a nuclear board to the computer window pops up with a link for a this exact board specification here i can find full description of the board with connections and different stuff we need 4 wires to connect display to the board power ground sda data and stl clock to find out where are they on the board we can simply go back to stm cube ide to ioc file and look at the pins of mcu it's written that i2c sda is a pin pb7 and pb6 is stl now go back to the website and look where resource pb6 and pb7 connect them according to your board so we have the board and display connected we have board connected to the laptop only one thing left to program the board so to program the mcu click on the arrow near green bug then debug configuration double click on stm32 cortex c c plus plus application go to debugger tab st-link and press scan serial number must appear now click apply and debug if you have any warnings errors or something doesn't work at this stage watch my previous video where i show you what might cause the problem and how to fix it also i tell other things about stm32id and how to use buttons for example ok in our case everything works fine diet at the board start blinking the only thing left is to click resume and here we go mcu displays everything what was in the test function letters figures and pictures you can display these pictures individually you can shift text and pictures rotate them basically everything but what i want to show you is how to display any picture you want at animated for example how to display a gif let's say i want to display a neon cat i simply google nyan cat give 128 by 64 resolution and pick first picture 320 by 240 pixels that's actually too much for our display but there are some blue background and we can easily crop it and save it anywhere you want basically gif consists of several images that change each other at a certain time and this creates a moving effect so first of all we need to split our gif into these images to split the gif into frames we can use an online service at the same website we can fix the resolution to make it 128 by 64. how to do it first of all grab the gift to the size you want to i think i will crop most of the background so the cat takes almost all the frame like that and press crop image now press resize widths 128 hate 64. and here we go cropped and resized for our display image now download it finally we can split it to frames upload cropped and resized image again and press split as you can see this particular gif consists of 12 frames download all of them somewhere and extract because we have a monochrome display which can display only blue color and black of course when oled is off we need to convert this image into a black and white so we can display them without errors there are two ways to do it first one is using graphic editor i will be using photoshop because i just have it on my pc so open photoshop press create new with 128 hate 64. press alt and scroll wheel to zoom it and simply drag the first nyan cat frame to the photoshop then select layer in the layers menu press select color range and select menu choose shadow and here you need to shift fuzziness to zero because in case of non-zero value we will have gray colors which we don't need and here you need to play with the color range to find the pictures that you think look the best maybe one skinny ugly or fat cat who knows i think for me 90 is fine so press ok now press ctrl j to create a new layer from selected delete previous layer and change the background to black to do so click on the background in layers menu press here solid color and black click again on the layer we just created and press ctrl u and drag lightness to maximum so now we have a white cat on a black background now press file export click export spng save it as a zero frame and here is the fun part you need to do it with every frame you got so again color range change parameters ctrl j delete old one control plus u lightness to maximum file quick export spng i'm gonna speed up the process so we don't wait till i make this 12 frames also what is the benefits of using a graphic reductor because you can draw anything you want to display in here any picture any font anything your imagination comes with now we need to convert our images into a dataset for a microcontroller for that we go to a image2cppservice so simply select all frames of our image open 128x64 for all them background color black and here is a second method actually you can put here colored images we got after give splitting and don't use the photoshop it will automatically convert them into black and white images but sometimes it terribly distorts the pictures and also you cannot draw or change anything in here like you can do it in photoshop so the photoshop is more universal thing in which you can modify everything but the website is faster so maybe try without a photoshop look at preview and if it's good don't waste your time on doing it manually so add the output let it be arduino code and press generate code as you can see it generated data sets automatically for all frames copy all of them and where do we put them now go back to stm32 cube ide to test dot c file and paste it here we need to change it a little bit by deleting proc main word in each array and i want to say several words about these datasets and how to understand them if you simply count the number of elements of the array you will have 64 rows and 16 columns which gives us 124 elements each element contains 8 bits so 1024 elements with 8 bits each gives us 8192 bits and yeah that's one bit per one oled so this data set is nothing else than the state of individual oleds that must be turned on or off okay now check everything project build all zero errors zero warnings nice now we can finally display it go to the test draw bitmap function delete everything except fill draw bitmap and update screen function at the fill function write black because we created a black background behind the neon cat here we want to draw a cat with white so right white here is a resolution of the image we want to display with this function dot change it zero zero is a starting coordinates don't change them either um so all we need to change is a data set the data set that was here and paste name of nanket dataset and also the update screen function to display the image now when we use test draw bitmap function in a main.c file we must see first frame of the give on the display so let's try it press project build all now just press run button and wait a little bit and here we go cat is on the display but we haven't finished yet we want to animate it now remember give are just images that follow each other so basically what we need to do is to change the first frame with the second and second by third and so on so how do we do it let's go back to the test draw bitmap function images must follow one another with some delays at match 24 frames per second so we copy the hull delay function which delays program for milliseconds specified in brackets we want to have 24 frames per second that means that we need approximately 40 milliseconds delay between each frame so write 40 in brackets and then just duplicate these four lines for all 12 frames i know that there are more elegant ways of doing it but for educational purpose that's enough now we change names of frames to 0 1 2 3 etc so let's build the project program mcu and see what we have got and finally we got our gif animation on the display that's great so that's how you can display basically everything you want very easily in your projects now you can start using oled displays whenever you want thanks for watching bye oh yeah don't forget to subscribe

Channel: Nick Electronics

Views: 17,441

Keywords: stm32, oled, ssd1306 stm32, ssd1306, stm32 display, display anything, stm32 tutorial, stm32 nucleo oled, arduino, stm32 display tutorial, stm32 tutorial for beginners, oled lcd display 128x64, 128x64 oled, 128x64 oled i2c, adafruit oled, i2c oled display module, stm32 nucleo, oled display control, how to use oled, oled display animation, stm32 lcd, stm32 lcd i2c, stm32 128x64, stm32cubeide tutorial, stm32 projects, stm32 programming, stm32 display example, stm32 oled display

Id: 97_Vyph9EzM

Length: 18min 0sec (1080 seconds)

Published: Sun Aug 21 2022