So in this video, we're going to continue showing you how to draw to an O led screen.

So when you're dealing with basic LCD screens, all you can really do is simply print text to the screen.

A certain number of characters across a certain number rose.

You do a B C D E 123 you can you do exclamation points, that type of thing.

But you really cannot design a user interface to any great degree and basically just put text on an LCD screen.

The cool part about Oh led screen is that it essentially is just a very simple monitor when you draw to it or when you print to it, you can come up with your own unique interfaces for your users that are totally original to you so you can draw texture.

You can print text to know led screen not just printed but printed in different sizes.

You can print it in different funds.

You can print bit map invidious and what we're going to show you how to do today is you can actually draw shapes onto the screen in order to do things such as give your projects like little borders for the user interface, or basically be able to differentiate different components on the O led screen to make it easier for people to view.

Think about drawing shapes on an O led screen, much like CSS.

If you're dealing with a team, our Web pages, this is just simply a way to give a little a little about boom to your Arduino project and make it easier for people to understand what they're supposed to be looking at and what's going on.

So with that, let's go over the workbench, show you how this particular project was put together and then, more importantly, we reportedly will go to the code and then we'll bring it all together and show you how this works.

So we're using the standard 1 28 by 64 0 led screen that we've been using for most these projects.

And this is an eye to see or I squared, see, scream, so uses the eye to see communication protocol.

So for communication, all you need is to data wires.

You have S t a S T a.

Runs to a four on your Arduino board.

SCL runs to a five on your going aboard, and then we're pulling five volt power for the screen and then being connected to ground.

So this is all that's required to connect this screen for this particular project, the same basic thing we've done for all of these oh led screen projects.

So now let's dig into the code for how to draw shapes on an O led screen.

So basically, what we're going to be doing with this particular project is the first thing that we're going to do is we're going to draw a line, then we're going to draw a rectangle.

Then we're going to draw a circle.

Then we're going to draw a triangle and then to show you how you can layer all of the shapes on top of each other to create an image or even an animation, were then actually going to put multiple things on the screen at one time.

Let's go and take a look at what's required in order or to code for this project.

We're gonna need the wire dot age library so that is included with the artery.

No, I d.

E.

And then we need these to add a fruit like libraries at a fruit S s d 12306 So you can go to tools.

You go to manage libraries and you can add that from there and then the out of fruit gey FX again.

Do make sure when you're doing dealing with the projects that I'm showing you that you install the ad.

A fruit s s the 1306 library.

There are other SST one through six libraries out there, but the code that we're using only works with the at a free one.

So make sure you use those particular libraries then the next thing that we're going to do is we're going to define the O led with, and we're going to define the O l E D height.

So this is 100 and 28 pixel by 64 pixel screen.

So we define those there.

Then the next thing that we need to do is we need to define the O led address.

So again I to see or I squared.

C protocol is an addressable protocol.

What that means is you can have something like up to 100.

I think 127 devices using two wires for communication.

But the way that the Arduino differentiates between all those that devices is by their address.

So you do need to make sure you know the address of your oh led screen is you can use the eye to see scanner project that we did previously.

If you don't know what it is to find out what it is, So this particular ol lady is zero x three c.

We're gonna come down here.

I'm gonna use the ad of fruit underscore SSD 1306 And then we're going to create a display.

So this is the reference name you could call us.

Oh, led.

You could call this led display Goalless ability.

Underscore display.

This is simply how we're going to be a referencing the display when we start drawing tow it down here and then we're going to plug in the oily D with and the only the height.

So it knows what the size of the display is they know we're gonna do is come down here and we're going to set up the environment, and all we're going to be doing to set up the environment is where I knew display.

So we're referencing this display.

So whatever you've called this you put that here dot Begin.

So we now start beginning the service SST one through six underscore blow of law and then we give it the led address.

So we're going to dot Begin.

We're going to call this with this address, and then this will be essentially begin the led service, and that's all we're doing for the set up this particular project.

Now we're going to go into the loop.

The first thing we're gonna do in the loop is we're going to draw a line.

So to draw a line, what we need to do is we need to do display dot clear display.

So the clear display function.

This this takes everything off this play.

Basically, this deletes everything on the display.

Remember, you need to do this when you're dealing with with screens with an Arduino.

Because if you turn something on, you need to also turn it off.

Don't think things automatically happen, so you have to manually say that has to happen.

So we're gonna do is we're gonna clear to display.

We're gonna clear.

So it's just gonna be black, And then once it's black, they were gonna go display and then we use this function, Draw a line.

So the draw line function.

What this does is it draws a line from point A to point be when you see these four numbers here.

What these are These are the X and y axis.

This is the first point on the X and Y axis, and this is the second point.

So basically, we're going to go from this point to this point, draw a line from here to here.

So the X the X axis is across.

It is 100 and 28 pixels across.

So you can do from 0 to 1 27 Do you remember when you're dealing with with these screens where they're dealing with LCD screens or the old led screens, the first position is actually designated as position zero.

So if you have 100 and 28 pixels, that means you can designate between 0 to 1 27 01 27 equals 128.

So this is the X, and this is the wine, so you can go from 0 to 1 27 across and from 0 to 63 down.

So what we're simply going to say is in the first position in the upper left hand corner, start this line at zero across, zero down the very first position, up there, all the way up in the corner.

We want to start the line.

Then what we want to do is we want to go to the position, and that is a 90 pixels over 90 pixels to the right.

If you're looking at the screen and then 30 pixels down was gonna find where that position is, and then it is going to draw a line between these two places.

Uh, so you could go when you can go when you can play with this.

See, See, You know how to make different lines, make straight lines, make diagonal lines, but we're gonna be doing this is gonna be a diagonal line that goes about halfway down the screen just to kind of give you an idea of how this works.

Then you say, What color do you want?

The line to be drawn.

So if you're dealing with a monochrome screens the screen that we're dealing with today basically is a Monica Crumb string scream.

You either have black or white.

White basically means the pixel is lit up.

So whatever color that is, it's lit up.

Black means it's it's black, right?

So we're gonna say why?

So we're gonna have this going from the upper left hand corner and about the middle of the screen, and we want to print it in white.

Then the next thing that we need to do is display doctor display again.

This is the reference display.

This could be called oh, led or something else.

The main thing here is we're calling this display of function so all of this gets loaded into the ol Edie's memory, but it does not actually get written.

Trudy screen into you call this functions.

You have to call the dot display function or to run to the screen.

And then we're simply going to delay for 2000 milliseconds or two seconds to show you that little while they were gonna come down display dot clear display.

So we're going to erase the line that we put on the display on Ben.

We're going to draw a rectangle so display draw wrecked and So then we have to say where we're starting the rectangle.

So we say the second position across.

So we're gonna create, like a little border here.

So zero is the first position.

One is a second position.

So one So second position on the exact This is one second position on the Y axis, eyes down.

So so, basically to across to down is where we start the rectangle and then we're going to say what the wit is.

So with this cool little function here, going to display dot with and so this can actually tell us what the width of the display is And all we're going to do is we're going to simply say, display, not with minus two.

So it's going to figure out how how wide the old lady screen is.

So it's 128 and then it's simply going to subtract two.

So it's 126 s O.

That'll put it at 125th position.

So this will give us a nice little border.

And so we're gonna do is display dot with minus two.

So will be that that wide.

So I could put in 10 here.

I could put in 20 here, Could put in 50 here.

I'm just using this pretty or function and then display dot height minus two.

So this will figure out how tall how high the display is, and it will subtract two.

And so it will create a rectangle of that size.

And then, of course, we're going to print this out in white so it actually shows up.

Then we need to call the display display function.

It's really display function referencing whatever we've called the display and that will print out a rectangle onto the screen.

And then we will delay by 2000 milliseconds or two seconds.

Then we're gonna come down again.

Clear display.

Then we're going to display it dot draw circle, draw circles a little bit different.

So what this is is these 1st 2 numbers here, say where the center of the circle is?

So what we're gonna do is we're gonna say where the center of the circle is, and then we're gonna say what the radius of the circle will be.

So we're going to go 63 across.

We're going to go to the 60.

There are actually 2 64th position, right?

63 is actually the 64th position.

We're going to go on the X axis to the middle of the screen, and they were going to go down to the 32nd position, which is the middle of the screen for height.

So 63 across, 31 down, or and we're going to make a radius of 20 and so that will create a circle for us.

And then we're going to print that out and white again, and we're going to use display display delay for two seconds.

Then we're going to do that.

The triangles are not clear to this play again.

They're ready.

Display.

Draw.

Try angle functions.

Withdraw triangle function.

We then need to give three different coordinates.

So this is the top.

Coordinate.

This is the left Coordinate, And this is the right corner, and then it will draw lines in between.

So we want to go to position 63.

So this is 64 across.

So this is the middle of the screen, and we want to be among the first.

Why, in the middle of Scripture, basically is gonna print on the first pixel in the middle of the screen, so that's where the top of the triangle will be.

Then we'll go to the first position all the way down to the bottom corner of the screen.

So the 64th position 63.

So this will be on the bottom left hand corner, and then we're going to go to the bottom right hand corner and so that only 1 27 So it's 128 position across and in 63 which means 64 positions down.

So that will be the bottom right corner.

And then we will again print out and white.

We're going to use the display function to print this out on the display.

And so that's the basic, the basic shapes that we will be printing it with this particular project.

Then the next thing that I want to do is I want to show you how to a layer at these shapes on top of each other s so that you can get some kind of user interface design if you decide to do that for your particular project.

And so it is.

One of things you'll notice is that we only call clear display, Watts.

So we clear display.

So we were gonna delete the triangle up here, and then we're gonna draw these things all on top of each other.