Arduino WiFi (IoT) Tutorial - ESP8266 "Full Communication From Anywhere in the World" p3

hey what's up guys so I'm finally back making another video on the super cheap esp8266 Wi-Fi module in my last two videos I showed you how to get some basic communication going with the Arduino and how to pull data off of the internet into your projects using a service called things speak in this video I'm going to show you how to bring it all together and how you can make your projects talk to you from anywhere in the world and how you can get data from your projects or your things into the cloud from anywhere in the world and also send data from the cloud back down to your things so we're going to kind of bring all that together and I've got a nice lightweight example here to get you started with that obviously this is not going to be an enterprise level sort of installation like something we would do it us a firmware for an IOT project but this is a basic example so we're not going to talk too much about security and things like that so let me show you what I put together here before we really take that deep dive into the code okay so here's what we've got in our dwee no clone here hooked up to an esp8266 in the same way you saw in my last two videos with the potentiometer hooked up here with the the wiper on analog pin 0 and an LED hooked up to digital pin 3 and we're going to PWM output that over on the website here this is a web interface I created that you can access from anywhere in the world it's actually hosted right through my website and I'm going to show you exactly how this works and how to build this yourself and we only have one unit here but if we had multiple things over here we would have a list of our things and we can have as many columns here as we want all kinds of different data so it's extremely powerful here just with this very crude demo and we have here the unit ID so we only have one and here is our LED brightness so this is a an 8 bit PWM output so one 87 is kind of the halfway point if we go and make that a zero over here this is pulling the cloud once every five seconds so you see that the LED actually turned off there so you see that how the blue light there on the esp8266 kind of blinks once every five seconds that's when it's going out and getting its new data and you can follow that here this is the serial monitor window hooked up to that arduino and i'm basically running the same exact code you saw my other examples so we're doing you know the connecting connected ready to send sent and then it goes in scrapes out the return value well it's actually going and connecting to now a database hosted on my website and again I will show you exactly how all that works it's also pulling in the time which I'm not doing anything with but you know that's kind of nice to have because when you're connecting to the Internet that's just something you can pull off of the server so you might as well just grab it so I got the time there the led value and then also we have a column here for a sensor value and that's where this potentiometer comes in so if I go ahead and increase that a little bit you'll see that the web interface which is also being refreshed see I could refresh that and get that so and you saw it down here in the serial monitor window as well when that increased so now I want to show you one other quick thing and if I just put my phone down here we're going to demo something else so a little bit of a surprise here but if we continue to increase this potentiometer past a certain value you'll see I'm not quite enough there keep going let me just max it out okay so now that is maxed out and if we just give it a second here up we see a new text message just came in from unit one now you probably can't see that let me hold on one sec let me just lower the brightness on my phone here but we're demoing how to receive text messages from the esp8266 so basically as soon as this potentiometer value exceeded 200 and now I'm getting a text message every time it connects and there's ways you know you can sort of interlock that so that you only get one text message and maybe you have sort of the same thing I had on my garage door monitor system where I had an arm button up in the web interface so I better actually lower that real quick so it'll get a million text messages okay there we go so on the next update now we should see that go down to zero and there we go let's go ahead and change the LED to full brightness here 255 okay and now the next time this goes in connects we get 255 and the LED goes to full brightness so that's the the demo now I want to break into the code okay so the first thing we're going to talk about is the website and for this I'm going to host the code and the database up on my personal website Kevin Dara comm and obviously after I'm done making this video I'm going to take all of the code down but it will be zipped up and available for download so go ahead and see the description below for that and you can implement the code into your personal website or your server running at home so anyway we're using hostmonster here and that's the company I've been using for years with my site but i think most host companies are pretty similar to this one so if you're using something like hostgator you should have all the same options so the first thing we need to talk about though really here is the database and one way to think of this is is having a spreadsheet that lives in the cloud that we can access and change data to and so that's kind of like the way this works you know we've got rows in this spreadsheet and we have columns in this spreadsheet the esp8266 can go in change that spreadsheet and then from this web interface I can refresh it and pull that information out so that's kind of the way this whole thing works so let's go ahead and set that spreadsheet up okay so what it's actually called is a sequel database okay so we're going to go ahead and set up a sequel database and I've already done this for this project but I'm going to walk you through exactly how you do this and since I have a lot of other projects on my website I'm going to have to kind of block things out and this part of the video is going to seem a little chopped up because I can't you know I don't want you to see passwords and other information for other projects I've got going out on my site okay so the way you do it is curry go to your your sequel databases and create a new database and I've already done this and so I've added ESP part 3 and that's the database I created okay so once you do that you really don't have to do anything just create the database so you want to create a user for that database that can access it and we created a user called user ESP okay so once you create the user you give them all the privileges to access change read write the to this database and it's pretty self-explanatory but basically that's what you do is you first create the database then you create a user that can access the database with the password and then you're pretty much all set then you go back to your cPanel and you want to look for something called PHP my admin' okay now we're going to be able to go in and modify that database so this will take you to another user interface here kind of takes you out of the host monster interface you select your database from the left and you want to create a new table in that database and this is the actual spreadsheet we're going to be modifying so I already did this and we're calling it ESP table so once you create the table you open it up and you'll see that you have three columns there and I already created these columns but I'm going to go in and show you the structure there so that you can copy your table exactly like this so the ID here is an auto increment so when you see that let me go in and actually show you what that looks like so you'll see something that looks kind of like this and then you just check the auto increment and the reason you do that is so that it auto increments this ID so that the more units you create they just go one two three four and so on okay we have the LED column and we have the sensor column and these are all integers is the type and you can also add columns here so if I wanted to I could go in and add columns here I could also delete columns out so you can change a lot of things here and you'll know that when when you create this table for the first time you don't have any data in it you're not going to be able to go into browse here so you actually have to go over to insert here and you need to just add some data in so just for the heck of it let me actually just do this here so the ID thing we want to put to there although I think it would automatically now incremented that row and then since it would be your first time you're not going to see that browse but after you do insert that row that first row you should then be able to go here and you can also change this these values here so if I change that to like 100 I change that to 100 and I can go back here refresh the web interface and I see 100 there now okay so now that we have the full database that's pretty much the only thing you really need to do here okay so we've created a sequel database with a new table so now we've got this and this is where we're going to store information so the other way around too is if I changed this over here to like 200 now and went here and just click browse to refresh this you now see that there's 200 in there so you can also use this to sort of keep an eye on your on your tables in your database just while you're debugging ok so I think that's pretty much all there is to talk about the sequel database and table ok so now let's get into some of the PHP code ok so we'll come back to the database here as we are making changes to it from the web interface and from the esp8266 so now let's get into the code that's running on the website so let's open up file manager in the web root ok it launches this file manager interface and right in the public HTML folder we're going to create a new folder I have it called micro and then this project is in ESP part 3 and you'll see that we have three files here these three files are all that's needed for this example and they're all written in PHP so let's go ahead and talk about the first one here which is from micro so let's click code editor there and open this up and this is the code that is called from the esp8266 so we're doing an HTTP GET on this piece of code so you'll see here that I have an example link here to it which would be Kevin Darrow comm micro ESP part 3 from micro dot PHP and then we get some funny business going on here which is how we're able to actually pass in data to this piece of code so it with it so what we're basically doing is passing variables through the URL so again you know we're not talking about anything very secure here so you know our sensitive data could be sniffed out by hackers but we're not going to get into that too much in this video so anyway this is all written in PHP which is probably going to be new for for most of you but it's pretty straightforward and if you have any questions or anything you should be able to google it and find an example on something that's pretty close to what you're trying to do okay so basically what this does is the first thing it does when you call it is it goes through and loops out loops through your URL and picks off the variables so we're passing in two variables one is this unit equals one and one is this sensor equals one two three so those are the two variables we're passing in the unit is basically the ID of the esp8266 so if you have like you know a whole bunch of things out there you would want to give each of them different IDs so that they were changing different rows within that table that we just talked about so the first thing we do though is loop through there and you can see that as it loops through there we can we can check the key for unit and then if it is true then we go ahead and store whatever that value is into a variable so we're basically declaring a variable and that it's got a kind of a weird way of doing that in PHP and that's that's why we have this little dollar sign here with unit so that is our variable to store this one when we call that variable and the same thing for the sensor so it's storing this 123 in for the sensor variable so if we actually went and called this I've got it over here and I'll refresh it we can see what the response is and we'll talk more about that but you can see that it does work and we are passing that URL into this piece of code and able to sniff out those variables okay so let's go back here the next thing we do now that we've got the variables from the URL we go ahead and create the connection to the sequel database so that's what we do here and to do this we set up a new variable my sequel I connect here and we have we have these these four things here we have to put in first is the server location which is the localhost this piece of code is running on the same server as where the sequel database is so you just put localhost and then that user we created we put that in right here then the password for that user and then the actual database okay now at the table the database and then we have a little bit of error checking here to see and make sure that we did connect to that database okay so now we're connected the first thing we want to do is send in that sensor data into the database so we do this little sequel command here so it updates the ESP table so now we're updating the table and we set the sensor column equal to the sensor value that we pulled in from the URL where the ID is the unit okay so it's kind of confusing but basically what we're doing here is setting the sensor column where the ID Row is one okay so this is a nice way to visualize it so the ID is one set the sensor to whatever that value is okay so we can test this out here so the sensor value if I change this to like hmm how do I want to do this how about just five okay and then we go back here and refresh it the sensor value is now five okay and that's what that little piece of code is doing right there okay so moving on the next thing we do is grab the time so we're connected to the internet we've got a great source for the time so the first thing we do is set the time zone here and I'm on the East Coast so I set it here to America / New York and then set it create a new variable and set this up and format it for the time which is GI and that gives me a nice just standard 12-hour format so if it's the if the time is I don't know why it's got that if the time is 123 I just get 1 2 3 out of let me save that okay so then what we do is pull out the entire table that this is here so we want to pull out all the table the entire table out and what we're trying to do is get this led data off of it now okay so if you go in here this will make more second more sense here in a second so we're basically querying the table pulling out all of the data and then we're going to loop through it and then as soon as the ID equals the the ID that's in this variable here that we called because that's really the only information where we're interested in we go ahead and create new variables for D 1 and D 2 where D 1 is equal to the led data so we have this throw LED and then the row sensor okay so now we've got those two pieces of data and then we can echo which is basically like a serial dot print command out of this piece of code and we can print out the entire string here which is underscore t1 and then our actual variable t1 which is the date or that I'm sorry at the time and then two hash tags which are used to parse this out so once the esp8266 sees this which we're going to talk about it's going to first look for the t1 and then it knows that the following data is the time and then it looks for that to ash tags and then it knows it's done and then it starts looking for the d1 grabs d1 the two hash tags and it's done then it grabs it then it looks for the d2 and then it does the same thing so grabs that data out to ash tags and it's done ok and then when we go and run this here we can see that so we see the t1 and we see the time so it's 550 one two hash tags d1 is equal to 100 which it is the led there and d2 is equal to 5 which it is okay so that's all there is to it it's as simple as that and obviously you know I'm kind of just giving you I'm trying to keep this as simple as possible but you can get pretty in-depth so so once we're done with that then I added a nice little bonus feature here to this code which is how I'm actually able to send text messages so if you see this little piece of code here if the sensor value is ever greater than 200 we want to send a text message but I'm not actually sending a text message I'm actually sending an email but in case you didn't know this you can send text messages via email via like an email address so like if your phone number is or I'm sorry if your carrier is through Verizon then it is your phone number at v-tex comm that is your address so it's the same thing for AT&T Sprint just google it how to send how to send text messages via email for your carrier and you'll you'll figure out what how to how to do that and you just put that in here so it's mail at the address here and then these things like the subject and then you can put your sensor data and then you know who it's from so that's exactly what I got going on here so I got the alarm whatever that sensor data was and the unit ID okay so that's all there is to the from micro PHP code this is what's called from the esp8266 so now let's get into the web interface code okay so now we're going to talk about how to create that web interface and that is all written in this interface dot PHP so let's go ahead and open that up in the code editor again it's pretty straightforward there's not a lot of code here but it can be a bit confusing if you're new to PHP so let's go ahead and walk through this the top section here is all used just to refresh that page every 15 seconds so that's how you set it here with the 15 there so that that automatically refreshes the page every 15 seconds we're not doing any type any kind of like real-time polling or real time data interaction and with with the with the web here so that's why we actually have to refresh the page again written all in PHP so that's kind of just a quick and easy way to do that okay the rest of the code down here should look somewhat familiar because it's the same code that is on the from micro PHP and basically what we do here is connect into that sequel database and then check the connection so same exact connection there check it and then we pull out the whole table here into result and then this this line of code here actually prints off that nice text here at the top the esp8266 demo so that's what that does there and then what we do is draw out that table so you can change you know the way that the border looks you can change what you want those column labels to be so that's what this is doing ID LED sensor and then we loop through the entire table and draw out all of the data it gets a little tricky in here because what we're doing there is drawing this button here this Change button so let me explain that so we go through it we have to grab whatever the current unit ID of the row is and we the reason we do that is to to know where we're going to change so when you click this button you're going to actually call the change sequence SQL code let me actually go back here you're actually calling this change sequel dot PHP code here and what that does is it takes whatever is in the box so let's just walk through it so it shows you you know our column is led the current LED is whatever the data is in LED okay so it is going to actually so okay I think I'm kind of jumping around a little bit here but we want to first over the row ID and that's what this is here the one there okay and then we set up some of our own variables here which are used for that Change button then you have the current LED and then you echo this here this form action change okay there this form action which is for that button so when you click that button it's going to it's going to trigger this action call change sequel PHP and it's a post meaning that we're going to we're going to pass along some variables and we're going to pass along the value at the current LED which is whatever is in that text box there okay and then we also pass along the unit because we need to know which row to put it into so we grab the unit ID okay and then we also grab the column because we need to know which column so we've got the value we've got the row and then we have got the column okay and then we set up the button itself okay so I've got the value here for change all these other things I don't worry about too much but we've got the value here change and then then we display in that final one here the actual value for the sensor so that's this row sensor okay so here's one thing though you might be asking well where do you display the LED well that's actually right here see how these other ones are all hidden this one is the actual text box itself that's sitting there so that creates that entire thing so we're actually creating this little box inside there that lets you change it with a button okay there's different things you can do too you can put like little radio buttons you can do all kinds of cool things there you can put multiple buttons within a column if you needed to okay so in with the nice thing about this is if I were to make a change here I just have to hit save and then it'll automatically update that and I can go in and refresh this just make sure you don't go and save over your work too much because then you know there's no way to go back and undo everything so but anyway yeah that's it so then we echo out that entire table and it's done so when we click that button we pass along we do that post and we pass along all of those variables to change sequel dot PHP so let's jump over to that now okay so let's open up change sequel dot PHP and very little code here because all it's doing is bringing in it's it's it's handling that post request from the interface PHP so we're passing in these three variables here so you see we've got the post for the value the unit in the column and so the value was that led that led value the unit ID would be normally the one that we're actually testing with which is the row and then the column which is the led column so the value the row the column and then we go ahead and connect to the database as usual check the connection and then we do this command here and update so we're setting that column the LED column with the value where the ID the row is the unit that comes in as that ID okay that's as simple as it gets really and then what we need to do is jump back to the interface PHP and that's what this does here so header location interface dot PHP and that jumps you back to the interface if you didn't have this fact we could test that let's try that if you didn't have this let's go ahead save on that so here we are in the web interface and if we went change let's just change it to 101 change we're stuck now in the sequel dot PHP or the change sequel dot PHP so it's we need to back to the interface I'll go ahead and change that back up and I need to hit the back here okay and go ahead and hit change again and now we're back okay it all happens seamlessly you don't even notice it okay that is all there is to the change sequel PHP so I know I kind of rushed through that a little bit but that's all there is to the web interface side so now let's jump over to the Arduino code okay so here is the Arduino code it's the same exact code as from my previous two videos I did have to change a few things the board I used for this example was a bit different from the set up I had previously so double check you know that your RX and TX going to the esp8266 are the same don't just drop this in and load it up because you could have some problems there obviously you set up your SSID and password to whatever yours is and I'm not going to get into how all this code runs again because we already covered that in an insane amount of detail so for this video I just want to talk about the changes to support this example okay so the first thing you'll notice here is that we've got a new URL so we're not connecting over to the things speak server we're connecting now to wherever your PHP code lives which is this kevin dara comm micro ESP part 3 from micro dot PHP remember we're only communicating to from micro dot PHP and then we've got our question mark and then unit equal and then this is whatever you know your unit is going to be I think I have a variable here for unit where my global variables there we go unit ID so if you were to create like you know a hundred of things you would give each Arduino its own unit ID and then you know make sure you set up your database or your database table to have as many rose as you do IDs so that everything matches up okay so we've got that the first thing you need to do though in this code is go over to your connect TSP because you're no longer connecting to that thing speak you do need to change which server you're connecting to so we're just connecting to Kevin Darrow comm on port Edie so you just change that that's pretty straightforward that's the only thing you have to change there and then a few minor things are changed throughout there we added a few variables in now to handle the sensor value Center read back that's what we're reading back from the the web you know because we are changing a sensor value here and then sending it out and then reading it back so we're able to track all of that let me go back down here we're going to jump into the loop here so you see that the sensor value is just doing an analogue read so value from 0 to 1023 and then we connect to web host which is a new function but it's really just a modified Connect YouTube function so we get we go there we connect to the web we post up the sensor value and we pull down the LED value and then we do an analogue right to pin 3 of whatever that LED value is wait 5 seconds and do the same thing again so I mean it's extremely easy once you get it all set up so let's go to actually before we go into Connect web host I want to show you a few new keywords so we talked a little bit when we were going over the from micro code that we've got keywords for the time t1 for d1 for d2 and then we've got the double hash okay so those are those keywords all the other code is the same I apologize if there's some comments left over talking about YouTube stuff in here but it's all pretty much the same thing one thing I did change here is that now instead of using a fixed length array I'm using strings which is probably not the greatest idea here with the Arduino because you know we're creating this this string here URL with packet and this is the URL web hoe so we're building up this string to go out to the esp8266 so we start with this one which is like the base URL and then we build it out with our variables so we do this and we build it out with the string version of our ID so plus equal to that and then our sensor we have to well we have to say with this the variable name is sensor and then the string of the sensor value and then the payload closer which is this guy here this big long thing the HTTP 1.0 carriage return newline feed twice that's just a weird quirky thing needed by the esp8266 okay so we build up that entire thing and this is all done you know with dynamic memory so it's not as stable as using like a fixed length array which is what I probably would have normally done here but this works for now so anyway you do build that up and then this codes the same thing here which is basically running through now the URL with packet and you'll notice now that instead of sizeof it's doing this dot length thing okay so it's getting the length of that string working through it building up the payload and the reason I didn't just use URL with packet instead of you know this payload is because I didn't want to go back through the connect yes P code you know when it actually loops through this and sends out this payload to the ESP so we're going through that we build up the payload okay same code as before the payload size okay that's all the same and then we go in and then if we do get a positive connection to the ESP same thing as before and if you go through this and watch my old videos I do talk about this you know the ESP goes in it connects to the website - Kevin Derek aam that server checks and make sure it's connected then it sets up what it's going to send gives it the payload goes through and if it if it waits for this little caret sign here then it gives you a ready to send and then goes through sorry I'm kind of rushing through this here and as as soon as it gets the keyword send okay then we know it's sent and then it will return a 1 and we could jump in then and start getting our data back so at this point we should expect this to be returned and what we're basically doing here is we're going to look for the t1 the data double hash D one data double - double hash D two data double hash okay and it goes through the same exact thing as before and we have new variables here for the size of t1 and the data for T t1 ok all right sorry I had that backwards the data goes into the first byte in that array or actually technically the second byte and then goes through it and calculates the size and puts that into then the first byte so it's the same thing as I had before so that's 41 it does the same thing for d1 and then it does it again for d2 okay and as soon as it gets t1 d1 and d2 it then looks for the link disconnect keyword and then it's done found data disconnected do a serial dump and now we go and do a print of our time here which I'm not going to go into detail on we grab our time we show the led number I have a little bit of code here that goes through those ASCII characters and converts them into an integer okay which is pretty straightforward just loops through it I've got a new variable for multiply a multiplier array which knows that it goes 1 10 100 1000 and so on and multiplies that up does the subtract by 48 to strip out the ascii character and then we print out the led value okay then the next thing is for the sensor value same kind of thing here loop through it do the multiplier decoding of that ASCII character into an integer and now we have our sensor and that's it okay then we jump back here we've got our integer values and we have can now do something with those so that's all there is to it I'm going to have this arduino code available for download again I'm going to take down all of my PHP code so that's going to be kind of up to you to host that somewhere modify it to your project but hopefully this gives you a better idea of how that whole garage door monitor system worked and I hope this video helps you so thanks for watching

Channel: Kevin Darrah

Views: 273,120

Keywords: arduino, iot, esp8266, tcp, http, cloud, web interface, wifi, wireless

Id: uWbLpMJ8jiA

Length: 38min 35sec (2315 seconds)

Published: Sat Dec 12 2015