Welcome back.

So in the past, people have asked me what the difference between Arduino and Raspberry Pi is.

And I've said that artery knows they're good for doing things like creating a sensors or being able to trigger physical events.

But if you're gonna do something like Renee, a Web server, then you should really use a raspberry pi.

And of course, as things go in the technology world, you actually can't kinda sorta can do a Web server off guard.

We know.

So today I'm going to show you using an Internet shield how to run a website off of your do we know.

So basically, you have an Internet shield that's connected to your Arduino, and that Ethernet shield has a micro SD card slot on that C.

You can put a micro SD in their and essentially read from the micro SD in order to present a website to whoever will be going to the I P address of your Do we know now?

I will say what will say more or less, more or less, I still stick.

By my previous opinion, I'm gonna be running a Web server.

Uh, at least I would want is a raspberry pi.

But, you know, for some reason there might be a reason that you would want to use an Arduino in order to deliver a website from from simple, simple things, such as it's harder to hack something like an Arduino.

Since an artery no doesn't have a full fledged operating system, since it doesn't have my speak wheeler PHP or any of that kind of stuff.

It's not necessarily as large oven attack risk as something like a raspberry pi might be.

But on the other hand, you know you can only do what you could do with this.

So basically, when you're using an Internet shield in order to deliver a Web Page two clients, what this will allow you to do is it allow you to send any type of Web page type stuff that would be client side interpreted.

So what I mean by that is a t m l right.

So it sends the HTML text, and then your Web browser turns that HTML into a website JavaScript Java script is a client side scripting language.

So it sends the text to your client and then your client parses what to do with it.

So you could again.

Obviously, you can use HTML.

You can use CSS.

You can use JavaScript, those type of languages using are we know if you really want Thio.

But do you realize any kind of server side scripting language is we're talking about python PHP, ruby.

Any of that type of thing?

Uh, you shouldn't try to run off on.

Aren't we know again?

That is, that is one of those at least a raspberry pi.

So why don't I show you how to do today is we're going to use a We're going to create a simple text website.

So this will be an HTML website, and on that I will embed an image from fail normal dot com and I will also embed a video from YouTube s O that shows you how to basically do a simple website and be ableto embed assets from other Web properties.

Whether it's YouTube, whether it's like anger or website, something like that.

Now you can to be clear.

You actually can host host pictures and such on the micro SD and be able to present them on a website.

But that gets a little bit convoluted, and I think it gets to be a little bit complicated.

So for this this particular video, all we're going to be doing is a simple text website where all of the assets are hosted.

Somewhere else again, YouTube or fail normal dot com something like that.

So with that, let's go over to the work bench so I can show you how to assemble this little project and then I'll show you the code that's involved and then bring it all together.

So for this project, we're easy in our standard Arduino, you know, bored like we use for most projects.

And we're actually using the standard Ethernet shield from Arduino itself.

So this is the Internet shield on purpose from Artemis no dot cc.

Now, as with many of these different products, there are clone boards out there.

So this is a sane, smart board, and as you can see, there's a little bit of difference between the two.

So if you're going to do something like try to build a little Web server like I am just realized if your deal dealing with a different Internet shield, you may run into some some different issues that you have to deal with.

So the shield that I am using is the actual reference model that comes from hard.

We know.

So what we do here is we just, uh, wine all this up.

Slot these together, and then that's that's our little package.

So this is our little Web server.

Then we've got a micro SD, so I got the micro SD.

We simply slot that into the back, and there we go.

This is going to be our little are doing a Web server for the project, so let's go over and take a look at the code.

So before we take a look at the Arduino sketch, let's take a look at the Micro SD card and the HTML file that we're going to be saving there.

So the first thing to realize is that the Internet Shield is not able to read the NT F s file system, the AP F s file system or even the X fat file system.

It can only read the fat file system so fat 16 or fat 32.

Now, if you're using a micro SD card that you you've put into any kind of modern camera or camcorder, it will most likely have formatted your micro SD card to X fat so you can put the index dot HTM HTM file onto an X factor micro SD card.

But the Internet shield will simply not be able to read any of that.

The first thing you need to dio is if you're using Mac, we're gonna go to the disk utility.

If you're using Windows or Lennox, you would do diversion over there.

And basically, we're What we're gonna do is we're gonna go down Disk utility.

Open this up.

We're gonna take a look at the file system for untitled so we can see untitled, and we can see this is m s dot fat 32.

So that is what we want.

This says something else especially says X fat, which is what most likely say.

All you would do is you would format or if you're on Mac, you erase, and then you make sure that you make the M s dos fat file system the one that you select.

So again, this is one does that that could be very difficult.

Like, Oh, it has X fat.

Let me just go through here and you're fat.

Finger it or you go through too quickly.

You'll put the Mac OS extended or whatever journal file system onto the micro SD card, and then the Arduino still simply won't be able to read it.

So one way or the other, you do have to form at the micro SD card for fact, then past that we can go and we can take a look at the code that is on the I hate to say code or you let us a code tags came out.

Let's take a look at the HTML.

That's only the index s We're gonna call this index dot HTM And so we're actually going to reference this name within the Arduino scare a script sketch.

So if you change us to a different name, then we just have to change that name in the sketch.

Let's take a look at this.

And as you can see right here where I'm just using crappy old standard html p strong, strong is bold.

Hey, look, a webpage.

Surfer Menard.

We know close, strong, close P.

Here's a list open on our list.

First less diadem Second list died on third list.

Item close, close, close and then close on order list.

Then we use 82 Here's a picture embedded from the Web.

Close age, too.

Again, I'm using the image SRC tag on grabbing.

I just grabbed a random ass picture off of fail normal dot com, and we go down below.

That ate, too.

Here's an impediment.

Embedded video.

And with this I simply used the I frame, thigh frame in bed script that you could grab from YouTube video.

And so this is what we're going be presenting as the website.

Yes, it's ugly.

Yes, it's nasty.

Yes, it looks like I'm just trying to explain to you how this stuff works.

If you want to make something look nicer, you go ahead and do something.

Make something look nicer.

I just want to show you that this is going to be able to deliver this HTML code.

An important thing to when you're dealing with Arduino is you'll notice that this is just the stock standard html code.

So we've done projects in the past where the Arduino has dynamically written HTML for us and with that, you have to use escapes and you have to format things properly so that the article, you know can actually deliver it.

The nice thing about being able to read off of micro SD card is you can just simply do this is a cute Now there's no additional escapes.

There's no additional weird ass formatting that you have to deal with.

The yard we know will simply read from the file and send that over the Web browser so that let's go over and take a look at the art we know code.

It's self s.

So we have this this code, the first thing we're gonna need to do is add these three libraries with the SP I library the other night library and the SD library.

So we need these libraries and work to make this work on.

Then we're going to have the Mac address eso again.

The Mac address is the unique identify WR for your bueno device on the network.

Now, do you realize we're going to projects like this if you only have one?

If you only have a single are we know device on your network.

You need this Copy and paste this Mac address.

Uh, this Mac address doesn't really matter if you only have a single device on the network where you may run into problems.

If you have multiple Ethernet Matt Arduino devices on the network, you don't want to just copy and paste this this Mac address because then they'll all be seen as the same device as far as the network is concerned, and you can run into some big problems.

So basically, Mac addresses air used in something called AARP address resolution protocol.

So address resolution protocol maps I p addresses to mac addresses.

So they're supposed to be there, supposed to be globally unique Mac addresses, and then you can assign an i p address to them.

So Mac addresses kind like a Social Security number as far as network devices are concerned.

So just remember, if you're having multiple of these devices on your network, see what the Mac address is.

There should be a sticker on the bottom of your Internet shield on, and then plug in the individual Mac addresses.

So anyways, then we're gonna go down we're gonna create the Internet server a reference.

So we're gonna call this server and it's gonna be on poor 80 so we can call server and will be poor 80.

Then we're going to create the files.

They're gonna have a final on that file is going to call Web page.

So that's going to be the file that we're going to grabbing from the micro SD card.

They were going to go down, and we're going to set up the environment.

So the first thing we're gonna do is internet dot Begin.

And then this is where we feed the Mac address from up here.

Then we're going to do server dot Begin.

So this present starts that server service for us and then serial dot began 9600 that starts the serial monitor.

And so the zero monitor is going to be important for us, especially in trouble shooting, because the first thing that is going to do is tell us what the hell the I P address is of our Torino device again.

Since we're only feeding the Mac address here is going to grab an I P address from the A, C.

P and so if we're gonna go to it as a Web page, we need to know what the I P addresses.

So cereal, that print line after not internet dot a local i p.

So this function returns what the i p addresses and it will print that out on the serial monitor, then here, all of this stuff in here.

What this is for is, this is what we're making sure that the SD card is working.

So this is one of those things that you could just copy and paste serial dot print line initializing as d card.

If not SD began.

Four.

There's an error success.

So else success SD card initialized if not exists.

So this is where we're going to be putting in what the name of the HTML file is.

So if you're going to change the name HTML found something else.

Default dot HTM HTM bob dot HTM Whatever else, this is one of the places you a plug that in.

So it's going to look for that if it if it doesn't exist, it's going to print.

I can't find the file.

If it does exist, it's going to print success.

Found the file.

Then we're gonna go down, and we're actually gonna take a look at the loop first.

Parting this again like most.

This stuff is kind of copy and paste with the whole connection to the Internet.

Client attorney client client equals servant unavailable If there's a client.

Ah, wild client is connected while client is available, which are C client.

Read Haba Baba block on dso this here.

We're just gonna basically just copy and paste this.

This is for the connection where we get to the interesting part.

For us today is just this little bit of this a little bit right in here, right?

So this is where we actually read from the micro SD card and read the information from micro SD card and point that out to the web browser.

So wet.

Paige.

So we created that file, right?

That file variable appear called Web page.

So Web page equals s d dot Open.

So the s d not open function.

We're going open index dot HTM.

So, again, this is one of those places where if you change the name of that HTML files, you change that.