Using OLED displays with Arduino/ESP8266

adding a display to your arduino or esb based projects is a really convenient way to get quick and easy information at a glance today i'll show you how to use these one-inch mini oled displays with your existing arduino or esp base board and we'll look at some coding examples on how to integrate with existing projects let's dive in okay so here are the parts for this build so first up we have our development board so i'm going to use an esp8266 for this and you can use any arduino board or any other similar board as long as they support the i2c protocol next we have our one inch oled display this is a one inch mini oled display and it they come in different resolutions or different pixel counts this is a 128 by 64 pixels and you get 128 by 32 pixels um and there's also various other sizes but those are most two the two most common sizes that you get and then all that we need other than that is a simple breadboard and some jumper wires so let's go ahead and get that wired up okay so with that out of the way and wired up let's take a closer look at the display itself so these are a one inch mini oled display and they run on the i2c protocol so the i2c protocol allows for multiple devices to be used on the same two wires and each device is programmed from the factory with an address which allows the arduino to differentiate between multiple devices on the same two wires you can see here it uses the scl and sda pins which are the same as the corresponding pins on your board and these accept 3.3 to 5 volts but just double check your own particular device matches up with that the eagle eyed among you might have noticed i wired up these two wires the wrong way around so go ahead and fix that just now the best way is to look up your pin out for your specific board and then match the scl and the sda pins um to the scl and sda pins on your display okay so those wires are now the correct way around so let's um jump into some software let's go ahead and open up a new sketch within the arduino ide and the first thing we need to do is add a couple of libraries so if you head up to tools and then manage libraries and when the box opens there is four libraries in total that we're going to add so in the search box go ahead and type adafruit ssd1306 and in the search bar that pops up if we go ahead and install the top one this adafruit ssd1306 just click install once that's installed go ahead and search for adafruit boss io and install the adafruit boss io library from there there's one more adafruit library that we're going to install and that is the adafruit gfx library and go ahead and install the gfx library the final library on the list is actually one to help us figure out the i2c address that our display uses so if you go ahead and search for i2c detect and install the i2c detect library once that's done go ahead and close the box and the next thing you want to do is set up the board and within the environment so head up to tools board and then go down and set up whichever board you're using so i'm using a nodemcu board so i'm going to select the nodemcu and then i am going to select the com port so i just need to plug that in then we also want to select our com port i'm also going to change the upload speed just to make it a little bit faster also from there you'll want to go to file example and then head down the list until you find the i2c detect library and load up the i2c example the i2c detect example is going to help us identify the address that our display uses we can just upload the default sketch so just press upload and we'll just wait for that to upload once uploaded you'll want to go to tools and open the serial monitor you can see that the i2c program is now printing out a list of all the addresses that it's found with the display being on 0x3c make sure to take a note of that information because we'll need it in the next step you can now go ahead and close down this program and we're going to head back to file and then examples this time we're going to load up the adafruit ssd1306 and i'm going to choose the 128x64 i2c example if you have a 32 pixel display then make sure to choose the correct one with that loaded up there is two lines of code that we need to change the first one being the oled reset make sure to change this to -1 since we don't have a reset pin on our display then head down to the setup and we're going to change the address that's listed here from 0x 3d to the address that we got earlier so that would be 0x 3c in my case from there we can go ahead and load this onto the board and you'll see that the board then starts cycling through different animations once uploaded you'll see the display now start to cycle through the animations there is quite a few animations and this is good it just makes sure that the display is working as it should be and there are no dead pixels you'll also see it start to do some text and then eventually finishing on some snowflakes the last animation the snowflakes will just continue on um it does demonstrate how easy the display is to work with and how many animations you can actually use with it so it's pretty cool now using the example code is all well and good but how do we actually put this into practice and use it with our existing arduino project so what we'll do is we'll take a look at one of the simplest examples which is the so if you look down here you can see that when the program starts up it it goes through various different animations and these are these functions that are listed down here the test draw styles is actually a really easy function to work with so what i'm going to do is i'm going to get rid of all the surrounding code and then we'll take a closer look at the that example okay so i've got rid of all the other existing functions except from the test draw styles function so let's upload that and just make sure our code works and you can see the exact animation that happens and as you can see there are three lines of text printed on the display so we have a hello world we have 3.14 which is an inverted color and then we have a string or a hex um code that's in a larger font so this shows three different ways of working with fonts um let's take a closer look at that function so you can see the first line is a display.clear display which is pretty self-explanatory it just clears everything that's on the display then the next two lines are to work with the text so we have a set text size to one which is a one-to-one um scale so that's normal text height and then where it sets the text color to white which is also the default so the next line is a set cursor and this tells the display which position we want to start putting text in you can configure the set cursor to make the text start in the middle or at the end or any position on the display that you like the next line is the print line which actually writes the text to the display you'll notice it's very similar to the serial function so serial.printline and it works just the same way you can also do display.print which prints a text without a line return at the end and then from there on we have a couple of different examples of the same code that we've already used so this sets the text to black and the background to white and then prints 3.14 and then the next one sets the s the text size to a two time scale and also sets the text to white you'll notice at the very end display dot display noted here this is required for any of the changes you've actually made to appear on the display without this line nothing will actually appear on the on the display with even with everything that we've put in here so that display dot display is actually required to draw to the display you can call this at the very end once you've made all of your changes just like we've done here and you don't need to call it after each line so hopefully that's given you a basic example of how to work with text using the adafruit library let's do another function of our own just to show how you can move text around the display okay so now that we have looked at some text basic text examples let's look at how to move text around the display in different positions this is useful for just kind of drawing an interface if you wanted to layout different stats [Music] obviously we know that we can use the display dot print line that'll just add a new line every time but what about if we want to actually manually control the position of the text so let's go ahead and do that now so what i'm going to do is i'm going to get rid of everything in this function and we'll just replace replace the text in there so go ahead and get rid of that i'm going to keep the top bit just for quickness and so what we'll do is we'll set the we're going to go ahead and set uh the cursor to the first position so if we set display dot set cursor zero zero and then we're gonna do a display dot print and we'll say start next from there oh sorry we'll add uh so we actually want to just to draw to the display so we're going to hit display dot display as we mentioned before you have to call that every time you actually want to output to the display or draw to the display and then we're going to add in a delay just so we can see it working next we will do um another we'll change the position of the cursor so display dot set cursor um and this time we're gonna do so we know the height of the display is 64 pixels high and 128 wide and so the first number that we need to enter is the um first pixel width so we're going to go ahead and enter 50 that'll set it 50 along from the left hand side and then the second number is the height so we're going to hit 27. so you'll notice these are roughly half of the pixel height and or the display height and display width minus a little bit for the text to actually um be displayed obviously text isn't one pixel by one pixel it's it's a little bit higher than that as you'll see so um so we're gonna have to go ahead and enter that and then we're gonna um display dot print and we're gonna hit middle and display dot display so that we actually draw to the display and then delay 2000 just so we can see it working next we're going to do display dot set cursor and this time we are going to try and to put it in the bottom right hand corner or the end position so we're going to do 100 and then 55 and again display dot print and display dot display to draw and then do a next we're going to do the bottom left-hand corner so we're going to hit all five positions in the display obviously there's more than five positions but we're gonna hit all four corners and then the center so go ahead and set display dot set cursor and this time the first number is zero because it's all the way to the left and then the second number is 55 because we want to use the full height of the display dot print and we're gonna hit bottom left display this way and then delay 2000 and finally the top right hand corner and then we're going to hit for the width we're going to hit 72 that just gives us enough um pixels to display the text that we want without hitting the end of the line and then zero because the we want it on the first line oh and i just noticed that missed out a quote there and then top top right and there we go so if we go ahead and upload this oh yeah my mistake we don't put any numbers in there i'll just upload that again oh not done done the exact same thing on the bottom the one above typing too fast okay okay third time lucky so this time when the sketch is uploaded when the program starts you'll see it hits the top left hand corner then there's a two second delay prints in the middle two second delay prints at the bottom right two second delay bottom left two second delay top right and you can see that going through there now so that gives you a basic idea of how to manipulate text around the display obviously you can use the text sizes and the text color as you wish this is just kind of a basic example on how to use the set cursor function let's take a look at one final practical example so i've created this program that will simulate a temperature sensor so you can see in the main loop here i just have a couple of lines of code that will just generate a random number a random float between 18 and 25 and then it sends that to the display temp function and sends the temperature and then in the display temp function you can see i'm passing in my temperature from the loop and then we are setting the text size creating a title at the top and then a divider here and from there we are setting the cursor to the middle of the screen the font size or scale to three and then i print my temperature and that will just keep repeating every two seconds as is the delay in the loop so you can see how that looks on screen it just goes through and refreshes the temperature every couple of seconds so that just gives you an idea of how to simulate a temperature sensor and how it would look and there we go guys hope you find this video useful if you did make sure to hit the like button hit subscribe and let me know your feedback down below as well as any other topics you want me to cover in the future also down below you can find the links to support the channel on patreon if you wish to do so and you'll find the links to all the github code that we covered in this topic today we'll catch in the next one

Channel: Everything Smart Home

Views: 41,132

Keywords: ssd1306, ssd1306 oled display, oled display arduino, oled display esp8266, oled display iot, ssd1306 oled, arduino, oled, arduino ssd1306, arduino i2c display, arduino display, arduino lcd, arduino screen, esp8266 display, esp8266 lcd, esp8266 i2c display, esp8266 i2c, arduino i2c, i2c

Id: YF6NAjq0044

Length: 19min 11sec (1151 seconds)

Published: Thu Jul 30 2020