Welcome back.

So in this video, we're going to take an Arduino Oh, no WiFi board and ID and along temperature sensor, and we're going to create a visual alert temperature system.

Basically, what we want to do is we want to be able to see what the temperature is in a certain environment, and then we want to be alerted if there's a problem.

So what's gonna happen is we're going to be able to go to the i.

P.

Address of the art we know, you know, WiFi board.

When we go there using a Web browser, we're going to simply see a very large number, and that's going to be at the temperature at the analog sensor is currently reading.

So we're going to make that in a very large fund.

Now, if the temperature is under 76 degrees, we're going to make that number green.

So this is the number.

It's green.

So it's good evens above 76 degrees but below 82 degrees where I want to see that very large number and it's going to be yellow.

So it's going to show us the number is gonna show us the yellow to say, Hey, there might be a problem.

Maybe not.

Maybe not.

Maybe you know what's going on, but you might want to take a look into it and it's about 82 degrees.

We're gonna see that large number, and it's going to be in red now.

One of the things that we have to do with this system is when we go to a normal Web page that went page on.

Lee refreshes when we tell it to refresh.

So that's a problem that you can get into when you're using a Web page in order to look at readings coming in from a sensor is it only refreshes when you tell it to refresh, so you know you first turn it on.

You first opened that page and the number is good, and then you walk away and you think all day that the number is good because you've never refresh the page and so you don't have to manually go over and refresh the page.

And so one of the things that we're also going to dio with this particular project is we're going to add metadata that forces the page to automatically refresh itself every five seconds.

So every five seconds, it will refresh.

The Web page is being presented by the art.

We know who you know, WiFi board.

And so as the temperature goes up and as the temperature goes down, that page will dynamically refresh so that we're always looking at relatively recent data.

And, you know, our server room isn't overheating, but we're sitting there looking at the screen that was literally created five hours ago.

So this project we're gonna be using the Arduino, you know, born a simple analog temperature sensor.

Gonna throw this on a bread board and show you how this works.

So with that, let's go over to the work bench.

I can show you howto build the physical components of this project.

Then I'll show you the code and I'll show you how all this comes together.

So these are the only components we need for this particular project.

Got a bread board.

We've got our Arduino, you know, with WiFi and we've got an along temperature sensor.

We should the analog temperature sensor into the bread board.

We plug in the ground, we plug in the V C C, the power, the 50 power and we plugged in the sensor.

So those are the only connections we're gonna need to make this project work.

From there, we bring this over, we plug the power the BCC into the five old we plug ground into one of the ground connections on the way no more.

And we plugged the sensor.

We're going to be using a zero again.

This is an analog sensor.

We're gonna use one the analog connections, and we plug that into a zero.

And with that, that is literally other than plugging this thing in.

That is all you need to do again.

I will remind you when you're using something like the WiFi board on, especially when you're gonna be accessing it through a I P address or such, you do not have to have this connected to the computer.

Once everything is set up again, you can plug in a little USB power supply like this, you can plug in a power adapter, whatever.

This could be 100% separated from a computer and continue doing whatever it is you've told it to do.

So with that, let's go over to the computer and I can show you the code how to build this thing.

So here's the sketch for this particular project.

Now it's going to start to see him a little bit more complicated than other sketches that we've done in the past.

But if you just break it down to its core components, you will realize that it's rather simple.

One of the big things with this particular sketch is that we're gonna be coding for the Arduino.

Plus, we're going to be using HTML, and we're going to be using CSS.

So this is one thing where a lot of people ask me, Eli, what's the best programming language I should learn?

What programming language should I learn as if it's an individual thing on what you find in the real world is many times you're going to be using multiple languages even to do something relatively simple.

Literally.

All we're going to be doing is showing, you know, that the number, the number for the temperature reading and a changing the color and size of it, and to do that.

We're gonna be coding for all we know and are going to be using HTML.

And we're going to be doing CSS even for a project as simple as this.

So let's go up and start taking a look at this, eh?

So the first thing we need to do is we need to include the libraries that are required for the WiFi connection.

So this is for the WiFi and the communications protocols.

We're going to include SP.

I got eight library and WiFi Naina dot h library.

This simply gives us what we need to be able to connect to a WiFi network and be a bit communicate.

Then the next thing we're going to do, since this is a temperature project is we need to define the sensor pen, so But what pin?

What analog pin is tthe e the analog temperature sensor on.

And so we're going to call this sensor pin, define sensor pen, and we're going to set back to a zero.

From there, we're going to go down, and we're going to set up the WiFi information.

So Char s s idea.

So, basically, what is E.

S s I d I've set up a guest network on my system called Test.

So the SS ideas test the jar past.

This is where the password.

I've set this to blank because my network I've said it to blank.

So I don't have to doing troubleshooting while I'm doing these videos.

If you have a password, plug that in there, then we have any key and next.

So if you're using different keys on your WiFi network and you need to give the index number, this is where you would do it.

We don't have that, so it is simply set to zero.

The next thing we have to do is we have to create a variable for the status for the wireless connections we create and status equals.

W l underscore.

Idol understood, underscore status.

So this simply creates that variable, and it's that's the value to.

Basically Idol will use that for the connection and then WiFi server, and then we're going to set the server to poor 80.

So this is the http pork that we'll be using, so we're just kind of plug in 80.

You can modify that port number here if you want Thio the next thing we're gonna do is we're going to create two variables for the if else else.

If else statement that we're going to be dealing with us faras the temperature is alert, it's concerned.

So basically, when we're dealing with this, there's two numbers that we care about.

What is the high temperature?

What is the Oh, no.

This is way too hot tempered cure.

And that's the variable high temp that we're gonna set that to 82 degrees.

And then what's the good temperature?

What's the temperature is as long as it's under that we're happy.

And so I just simply set that to 76.

So I have created these variables, and I've set these variables here to make life easier if we need to modify it so we can If I need to modify these numbers in the future, I can simply come back to this one place and modify the number versus having to go through here and change it multiple times.

Remember, the more time you have to modify something, the more likely it is.

You will mess it up so I could just simply write the code down here I can secure simply say temperature F is greater or equal to high temp, and so that's the value of that variable.

Now, instead of having to go through and modify the number five or six times, I can simply modify that one place up here with these two variables then we're gonna do is we're gonna come down here and we're going to set up the environment to the first thing that we're gonna do is cereal dot again 9600.

So we're starting a serial monitor.

The next thing that we're going to do is we're actually going to start the WiFi connection.

So while status does not equal W l connected serial, it's gonna print out to the serial monitor attempting to connect to network named and then it's going to give the name test.

Then the status equals and we're using the function WiFi not begin s s I.

D on pass.

So it's gotta feed the s s I d and the password of dysfunction, and it's going to try to connect to the WiFi network, think when delay for 10,000 milliseconds or 10 seconds.

So while it's not connected, it's just looping through this when it finally connects.

Then these little server begins.

It will actually begin the server service.

Then it'll serial about print S s i d with E s s i d is.

And then this is how you get the i.

P.

Address and printed out.

So print out the s s I d and print out the I P.

Address again.

This is the kind of thing you need on these types of projects because you need to know what the hell d I p addresses.

You can code all this perfectly, but you don't know where the I P addresses.

Then it's gonna be impossible to access.

And that's now the environment that's set up now we're gonna go into a loop.

The first part of loop.

This is how we are able to obtain the temperatures.

So we done analog temperature sensors 1000 times.

At this point, I'm not gonna go into this, But basically the important thing to understand here is this is how we get the value for either temperature, see, temperature Celsius, or this is how we get the value for temperature f temperature Fahrenheit.

And that is what we're gonna be testing against and the If else if else statement, then we're gonna come down and we've got all this code right here again has get written out on.

Basically, this is for the communication between the Web browser and the Arduino.

Again, we're coating this out so we actually have to tell the art we know how the communication happens.

You know who contacts who first, who gets to talk someone so forth.

And so this simply says WiFi client Equal server available So the server is available.

If there's a client, it's got a serial monitor print.

It's got burnt down serum.

I'll tow new client, and that is going to do while client is connected.

If client is available, basically, what this means is going to print out the the client information.

So when your Web browser can next to the yard, we know it's going to print out that information on the serial monitor and then when it gets to a new line, So if C equals new line and basically, if current line dot length equal zero, then we start actually sending stuff to the client to the Web browser on.

This is where we get to the meat and potatoes of the pride that really project that we're doing today.

So the first thing that we have to do here before we get to the F else if else statement is we're going to actually print out some made of data on what this is for is tohave the web page auto refresh itself again.

One of things have to be thinking about when you display information is how often is that information going t be refreshed.

So if it only gets refreshed every hour, that means literally it might be what you're seeing.

Maybe 59 minutes old when you're seeing it.

And so again, especially for something like a temperature sensor or a temperature alert system you anything about how often you're going to refresh and do you want a manually refresher?

You want to have it be automatically refreshed for this, since all we're doing is literally were simply printing out a number in a pretty color.

Then I want this to auto refresh on its own.

Have it having the pig itself.

Auto refresh is a useful thing.

And so what we're gonna be doing here is we do client dot print line head Meta http.

Hyphen equals equals refresh.

So there's a saying refresh content every five seconds.

So basically doing this, it refreshes the content every five seconds.

Now you'll see these backs slashes here.

So basically, if you normally, if you're writing this in CSS, this right here is what it will look like.

But the problem is, is when you're when you're writing this code, you have to be able to tell the Arduino What code should the Arduino care about?

What code is a Web browser gonna care about?

Right.

So since we print everything between the double quotation marks, if we don't escape out, that's what a backslash is that we don't escape out.

Essentially, what's gonna happen is the yard we know is simply going to send this right.

Send everything between the double quotation marks, sir.

Yes, sir.

And so it's literally gonna do what he told her to do, which is that that's not useful.

So what you want to do is you put in the back slash you put in the back slash and escapes out characters that you don't want the yard we know to interpret.

So basically, what happens is the Arduino will get Thio that backslash and we don't know the next character.