ESP8266 WiFi Access Point Examples with the Arduino IDE

so a couple of people have asked me if I will release the code that I was using for my little ESP boards to view the stuff on my phone and have it refresh well I'm happy to do that but I didn't want to release it without any explanation so that's what I'm going to do now so I've got two versions here the previous version you saw was come an older version and all it did was refresh the page and that's on this one here so we can connect to that now and I can show you what it looks like so if I just select light level ESP version one then I'll just go to a web browser now we need to go to a super web thingy where you are already saved and this is what we get this is the just the page it's refreshing you can see that blue line at the top there that's just showing that [Music] cancel that that's just showing that it's refreshing that page and you'll see the numbers changed slightly change a lot more if I put my finger over that LDR interestingly that LDR is reporting the other way so it's got a higher resistance whereas this one has a lower number when you cover it up but that's essentially it random number there actually isn't a random number it's account so it's showing you how many times refresh that page and those numbers are being reported from the esp8266 so this is calling the homepage which this is and the esp8266 is keeping track of the count and it's reporting the analog reading every single time that pages requested now this isn't a very good method of doing it because you're refreshing this page every time so it can be get it can be a bit weird on the displays if you wanted some kind of interactivity this page is going to refresh and stop you for being able to do that so I came up with another version which is this one here so it turns that off and we'll just tell our phone to disconnect that Wi-Fi push that out of the way and then I'm going to hook up this other version now this one uses similar code except it uses Ajax requests to update the data so you're not refreshing the page you're just calling another page on the esp8266 and it works a lot nicer you can change things like a lot nicer a lot better you can change things like the update speed we're already connected and okay it's refresh that page so this is our light level meter so this is reading 1,000 cancel 1024 if I put my hand over it there it'll read a lower number which is the opposite of that other one we've got very bright lights in here so it is reading quite high and you'll see the count number also goes up but we can this page isn't refreshing every time it's using Ajax to pull the data from another page on the esp8266 I can change the update rate with this slider so I can change it so it goes up to close to four seconds I think the the top rate is five seconds there or I can bring that down to be one point four seconds and we can show the data again and then this should speed up so the count numbers going to increase but we can actually go all the way to every 200 milliseconds and we're going to see it update very very quickly and that means it becomes quite responsive so you'll see that number is changing very quickly now this is really easy to do I'm using the basic AP example from the esp8266 library and a little bit of HTML code and I've written a tool to help you do code like that so as long as you're able to write HTML code i've HTML Javascript I've written a web page and I'll make it available in the description where you can paste in your code and it will format it so that it doesn't throw up any errors in your Arduino IDE code because it doesn't like double quotes and it doesn't like new lines or spaces like that so it'll reformat all of that for you and if you put an app symbol somewhere in your code where you expect there to be a number it will split that code out and put in a temporary variable for you to replace so let's have a look at the code and then we'll discuss it a little bit but not too much you guys can pretty much figure it out for yourself and if you have questions I'm happy to answer them so this is the basic example you get in the esp8266 Wi-Fi library so if we look down here SB 1866 Wi-Fi and it's this one here the Wi-Fi access point now it's pretty simple you get your SSID you can change that to be whatever you like it doesn't matter and you also have a password in there as well you can delete that you don't need a password if you don't want to have one this is the function that's going to serve the webpage it's the most important one here really you have server dot send you've already created the server here and then you're sending some HTML we want to be able to customize that so I'll show you in a in a separate example in second what's happening and you'll see down here here's the the call to serve that web page when someone goes to 192.168.0.1 so let's have a look at my other example this one's a really simple one that refreshes the page every two seconds you'll see it largely looks for saying I haven't taken any out of any of these comments or anything I've changed the SSID and I've removed the password I set a millisecond interval here that was so that I could change this here if I wanted to encode but I decided against it we've got our handle root function I didn't change the name of that I didn't need to and then I'm adding in my LDR reading so that's the light dependent resistor on the board now your note I've got a string HTML here so whereas in this example we had h1 here I'm giving it a string instead so just down here here's my string I've gone a all out with the coding on here so that I've got my doctype correct so this is the html5 recognized time we've also got some metadata in here a metadata HTTP equivalent refresh content - that's going to tell the page to refresh every 2 seconds I've also added into the metadata for viewport to change the width of the device it makes it a bit easier to see in a mobile device now I split up these strings so at the end here I terminate this string with a double quote and a semicolon that's how I can add more onto the string using plus equals so this is appending a value onto the end of my string now because this is a float up here that seems like it shouldn't really be allowed but it is allowed so you can append this float to this string you don't need to convert it you just appended on the end and then that's going between two divs so the ending of the div is there and then the beginning is here it's called light and we've also got random number that's actually count except for I didn't change that and div ID random there immaterial what they're called really but then I'm adding on the count at the end there and then we're serving it out here and I'm increasing the count at the end of that call and that's getting called down here on the forward slash root now that's not the interesting one the one that refreshes itself that's here which is a bit more complex in terms of the Arduino code not more complex it's more complex in terms of the HTML so you'll see it's largely the same on handle root we we're adding in the same information and serving it out again but we're using some JavaScript to call a second page called get data you'll see down here I've added a another server dot on statement and if someone goes to forward slash data it will serve up some data now I'm serving it up as a JSON string which means that we can pull out our data quite easily we can navigate through that JSON using javascript pass that javascript through and it they appear like an object for us to interact with so it's kind of like an array so pulling those things through now this is what the code looks like this is it is Dreamweaver but you can use something like notepad plus plus to get some kind of code highlighting for HTML code now it looks fairly complex in here but really all were doing is styling up here this is our CSS we have our body stuff here which is everything that's going to be happening on the page these are the elements that are displayed so we've got our button which is an anchor tag then we have a couple of divs this div value data values this div here is a holder for the light value and the count number and it means that I can toggle that on and off to be displayed and we also have update view which is another holder and that holds the slider and I'm going to toggle nap on and off in our JavaScript we've got a variable a boolean which is telling us whether the status change going on and we have a change view so when you push that button it will change the view so it will get rid of the data variables and show us the update slider and vice-versa so once it's updated it goes into this other version here and then we change the variable at the end load dock is the function which pulls in new data so we're using Ajax to pull in a new bit of data to the page and what we're doing here is we're passing that JSON that comes through and then we're going to append the levels the light level to our inner HTML of this div called Lite which is just there so it's going to append the inner HTML which is that bit there and the same for the count number here and that solution is like a callback function essentially so we're going to start that going there and then it gets the ready state equals four and this store status equals 200 it's going to perform these actions and we've set a time interval here for this function to be called every two seconds and when we change our our slider it's going to alter what that value is so our every time we change that slider this function here gets called and we remove the timer set the timer again using the value that's attached to the slider you'll see I am I used a bit of code from some volume stuff so that's why that's called volume and that's essentially it but the difficult bit comes when you add this code into one of your sketches so let's jump to the normal sketch here if I just type strings HTML equals and then then paste that in and we'll try and terminate that string we can't because this is HTML code and it's going to look horrible and so there are lots of double quotes in here there are lots of things that are going to trip up the Arduino IDE so I knocked up a little webpage I'll put the link in the description for you but it enables you to paste in your code now one thing that you're going to want to do before you do that is figure out where your variables are going to go now I already know that my variable is going to go here so the light level and my other variable for the counter is going to go justise there so I'm going to put some app symbols in there hopefully those are characters that you don't really use very often because it's going to search for those and strip those out so when I paste it into this input box here on this web page there's our code all quite messy but you'll see that we've got our app symbols in here ready to be stripped out and then I took convert you'll see I put some description up here so you can see what's going on but it will convert that string into something the Arduino IDE can use you'll see it appends string HTML equals and the double quotes so let's copy all of that out and then put it into our Wi-Fi access I'm just going to undo what I did there so string HTML equals we don't need that now so if I just paste this in you'll see that it's valid valid code now so I can just click compile and it won't throw up any errors whatsoever even though we've got some area of course it will my variable doesn't exist so let's get rid of those in fact that could have been any variable we like so if I just put int my variable it won't throw up any areas so we can just put my variable back in there so now I won't throw up any errors so it's just a handy little cool feed to use if you want to if not you can do it by hand seesee enough i did it by hand to start with and then i realized if i'm going to share it with you guys and you want to edit it it's going to be a real pain so that's the code okay well thanks a lot for watching if you have questions let me know in the comment section and I'll try and answer them for you if not there are loads of you guys already know way more about this stuff than I do so I'm sure you'll be able to help anyone who's got questions doing web development stuff is sort of my day job so I find adding stuff like this to the esp8266 kind of easier than writing the code itself so anyway thanks a lot big TC

Channel: David Watts

Views: 139,428

Keywords: Arduino, Electronics, Wireless, Micro-controller, Tutorial, Examples

Id: Q0eUoFIXrWE

Length: 14min 49sec (889 seconds)

Published: Tue Feb 07 2017