 Okay, currently on my second channel, which focuses on hardware projects, I've been working with the Wemos module, which is an ESP8266 module, which allows you to connect to Wi-Fi and act as a client or a server and do lots of fun things. And the Wemos comes with little shields. And in a video on my second channel, I just went over the button press. I showed how it works. Today, we're going to be looking at the code. So be sure to check out if you want to see this project in action, the little annotation or card or wherever they call them now on YouTube. There will also be a link in the description of this video to the video showing this project, as well as a link to all the source code you're about to see. So here is the code for the Wemos module. I'm using the Arduino IDE. Also check out my video on my second channel on setting up the Arduino IDE to work with ESP8266 chips. Once you have all that set up, here is the code. After the comments there on licensing and stuff, we have some modules here. These are some header files here for the ESP8266, one that's just set the ESP8266. This multi Wi-Fi allows you to set it up so that you can have a list of different routers that you can connect to. So we're only going to be connecting to one access point in this video, but you could set this up directly so that if you're at home, the module will detect and connect to your home. If you go to work, it might connect to your work or wherever. You can set a list and it'll look for all the access points in that list and connect to one of them. And then HTTP Client, because we're going to be requesting stuff or connecting to a web server. So we're setting up all those headers and then we're just setting up the multi Wi-Fi here. Again, in this project, right here, a little bit further down, we're going to be connecting to an access point, but you can set up a whole list. And I'm just using that. You don't have to use that. You could also just set up to just one, but I figure why not throw that in there in case you want to add more than one access point. Okay, so here we're going to set up some variables, some constants, some integers. We have our button pin and our LED pin. So on the Wemos module, if you're using the button shield, it's going to be digital pin three on the Wemos, but it's GPIO pin zero when working the Arduino interface here. And then the digital pin four on the Wemos is actually GPIO pin two. So we have our button connected to GPIO pin zero and the onboard LED, which is a blue LED, is pin two. Next we're going to set T and T1, I call it T just for timer or whatever. That's my thing as I explained in the other video when I've done a project like this, where the board's hooked up all the time, like 24, 7, every so often you'll get a go string. So what this is going to do is the program's constantly looping. And we're going to set this little timer for this loop, set to zero, T for timer. It's not really a timer, but it's setting it to T. And then the loop part of that, it's going to check if the button's been pressed for at least 50 loops. And I have found that if you just click the button as fast as you can, you're going to get an average somewhere between 40 and 60 loops of the code, just in a very quick press. So this is checking as long as it's being pressed for at least 50 loops. And if you're pressing the button normally, it's going to be well above that. And this is going to prevent any ghost button presses. You don't want it to be pressed when no one's pressing it. It's just, I don't know if it's a power surge thing, but every once in a while you get these ghost button presses, and this is to prevent that. And then this is our D, our delay. It just prevents you from pressing the button more than once a second, because again it's looping. So if, again, you tap it really quick, it's going to loop 46 times, so I think you press the button 46 times, sort of saying, hey, wait one second, you can cut this down to less if you want. It's going to prevent the button from triggering more than once when you press it. And then the button state, the default button state is zero. Here we're going to set a string of a URL. This could be whatever films by chris.com, forward slash, blah, blah, blah, whatever your server is, if you're running it locally on your network, it might be an IP address. And then, but it's just the URL to the webpage you want to connect to when the button presses. Okay, and then we have our setup here that's going to run once when the board is turned on, and most of this is for serial port output, so you can troubleshoot if your button's not working properly, you can connect to it through USB, and just look at either in the Arduino IDE in the serial monitor here, or through any serial applications, such as screen, or just as raw TTY output. We're going to set the board rate to this, but it could be whatever you want, and then we're just going to delay for a tenth of a second. And then we're going to start our Wi-Fi multi-API again. This is access point here, I said API, AP access point. You can create a list of these, but let's say your access point is called my router, and then you put in your Wi-Fi password, whatever it is. So we'll try to connect to that, and if you create a list of them, it will try one after another. Next, I'm just going to print two blank lines to the serial output. You can actually get rid of those lines and just do something like this should accomplish the same thing. It's just for formatting, just pressing enter twice before printing this message. Then it's while it's trying to connect to an access point. It's going to the serial port just every half a second, put a little dot, a period. So that you know it's running, you know it's trying to connect. It's dot, dot, dot, dot, until it does connect. Once it connects, then it's going to break out of this while loop and continue. Again printing a new line, again you don't need to do that, you could just also shorten that up. In fact, all these serial port, all of this probably could have been put into a separate function, if your setup function is longer, you probably want to do that relatively short now. But after it connects, it's going to send a new line, say it's connected, and then it's going to say what IP address that it got, so it says IP address, and then it's going to get the local IP address. So you know on your network what the IP address to your device is. Again, for troubleshooting, you can then check and make sure you see it on your network. That's more important if it was a server rather than a client, but still good to know. And then it'll wait a half a second. And at this point, we're going to set up, we're going to initialize our pins, we're going to say the LED pin, which again is GPIO pin 2, or digital pin on the Wemos, digital pin 4 on the Wemos, we're going to set that to an output because we're setting a signal to turn on the LED. Then button pin, which again we set up here to 0, which is digital pin 3 on the Wemos GPIO pin 0 in your Arduino IDE here. And we're going to set that to an input because it's checking for when the button is pressed. We're going to skip this function for now, the send press function. What we're going to jump down to is our main loop down here. And here we're going to read the state. This is going to check what is the state of our pin. Is it higher, low, one or zero? And it's going to get back and then we're going to check, is it high? And if it is high, we're going to do one thing, and if not, we're going to do another. So, if the button is high, in this case, using the shield here, it means the button is not being pressed. Or I'm sorry, the button is being pressed. And what we're going to do here is we're going to, I'm sorry, I was right the first time. It's confusing because the button compressed can be higher, low, depending on how your hardware is set up. So in this case, it's checking if it's high. That means the button is not being pressed. What we're going to do is we're going to set the LED pin to high and turn off the LED. And in this case, we're also going to set T to zero, which is resetting our timer. So the button not being pressed, it's going to make sure that our loop timer here, which is, again, preventing button presses to zero. Okay, if anything else, meaning if the button is pressed, what we're going to do is we're going to loop and we're going to check, is T equal to TL, and we set TL set to 50. So when the button is initially pressed, it's not going to equal that. It's going to equal zero. It's going to say zero does not equal 50. So it's actually going to go down to our else here and just add one to our timer there. And so, again, a very quick button press, it's going to loop 40 to 60 times. If you press it as quick as you can. So even a quick button press, it's going to quickly add up. It's going to loop through this until it hits 50. Then it's going to go, oh, T equals TL, which is 50. And then it's going to say, okay, write the LED, make it low. So that's going to turn on the LED, send to our serial console that the button has been pressed, and then run our function of the button being pressed, send press, which is going to send a signal to a web server. And then delay D, and again, we set D up here set to 1000, which is 1000th of a second. So that's one second there. So it's going to make sure that it stops our loop for one second. After, that's after it runs this function. So let's go ahead and look at our send press function. Here we're going to send, again, some information to the serial console. Again, this is great for troubleshooting. We're going to say requesting URL, and then it's going to print the URL that we've specified up here. So whatever URL you're connecting to. So it's going to do that. Then it's going to create an HTTP client called HTTP. And then we're going to begin a connection to our URL. So we're saying to the serial port where we're connected to it, then we're going to actually try to connect to it. And then it's going to get a response from the server and put it in this HTTP code. And that code is going to be good or bad. And if it's as long as it's greater than zero, we're going to say that we connected to our server. And then we're going to say, well, if the HTTP code equals HTTP code OK, meaning so we connected to server and we actually got the URL we wanted, well then we're going to take the get string. So this is basically the HTML code. Whatever the page puts out. So if it's an HTML, it's going to be HTML code. If it's JSON, it's going to be JSON. Whatever code is going to be plain text, it's going to be a string. And we're going to put it inside a variable called a payload. And we're going to say the server says and print out to our serial client, our serial output, what the web page returned. And a lot of time in these scenarios, you're going to be connected to something. It's going to give you a simple message, a1, a0, a number of some sort. And in the case of the code I'm going to show you in a moment, it's going to be a number from zero to nine telling you what image is going to be displayed. But again, that varies depending on what your page is. Because again, you can write this code once, put it on the device, and then you can change the code on your server to do multiple different things. Anyway, we're going to print out the output from the web server to our serial port so that we can read it and make sure we're getting what we want. Now, if the code is not greater than zero, meaning we were unable to connect to the server, we're going to get an error code and print it to the serial port and then we're going to end our HTTP connection. So that's the code that we will compile and run on our Wemos chip. Now, let's look at some server side options. And again, all this code and the code I'm about to show you is in the description of this video. So right here is a folder and in here I have some files. I have an HTML file. I have a folder labeled photos, which has photos labeled zero dot jpeg through nine dot jpeg. And then we also have a CGI bin with one CGI script in there. It's a shell script that's basically what it's going to do. It's going to shuffle and give you a number output zero through nine. It's going to give you one of those numbers. So basically it's shuffling and giving you just one of those. And then it's going to print whichever number it gives as an output, but then it's also going to drop that same number into a file called photos dot dat. And dot dat is just something I came up with because it's not really HTML, it's not JSON, it's just a file. So I'm going to say cut that out. And last time I ran this script on the server, it generated three. So again, it's a shell script if I was to run this multiple times. You see it's going to give me a random number between zero and nine. So we've looked at our dat file. We have photos in here. We have a quick little script here that we just looked at. Let's look at our HTML code here real quick. So our Wemos is not going to be interacting with this HTML code at all. So basically I've got some CSS here that basically displays an image as a background image, full screen, but to fit your window. So whether it's landscape or portrait, it should fit in the window there. And it's going to go as the background of this div tag here called bg. So that's what all this does is just create an image that's centered. It's going to default show you the zero dot jpeg from our photos folder. Now, here's our code. We've got just a few lines of code here. We are using, well, I actually have Twitter bootstrap in there, but we're not really using it. We could remove that. Mainly we're using some jQuery here. So we're going to call some jQuery. And basically it's going to wait till the page loads. And then it's going to set intervals. And it's going to loop every 2000, just under a quarter of a second. If this was set to 1000, it would be one second. If it was set to 500, it'd be half a second. If it was set to 250, it's a quarter of a second. I have it set to 2000. So it's a sixth of a second. And you can go less to basically it's just going to start up our page. And every quarter of a second or however you set this, it's going to run this function. And it's going to request whatever is inside the dat folder, which is going to be 0, 1, 2, 3, 4, 5, 6, 7, 8 or 9 in theory. It should be one of those. It's going to take that data. And then it's going to create a little link for that. So basically we're going to say we're creating a string here, which is going to be our photos folder. And then I'm splitting here the dat because just in case there's a new line character at the end of our output, which usually there is, I'm saying basically take the first line. I'm saying split whatever output this file gives us and cut it by each line and just give us 0, which is the first line, which should just be our number. And we're appending jpeg, which is going to give us something that looks like this, but instead of 0, it's going to be 0, 1, 2, 3, 4, 6, 7, 8 or 9. And then we're just going to change the bg div tag here and give it a new background image with a URL of what we just retrieved here. Super simple. So again, this is just the output that's constantly checking what's in this file. Our Wemos is never actually interacting with this file. It's interacting with the photos.dat file. Actually, no, it's interacting with our CGI file, which is modifying the photos.dat file, which this HTML and JavaScript is constantly checking. And again, to see that in action, you can check out the card or link in the description of this video, which will show this in action. I also show sending text, which is basically just PHP code, one line of code that sends an email. And if you're unaware of this, you can send text to phones by putting in the phone number at and then depending on what the carrier is, there's an address that you can put there at the end, which I've gone over in previous videos. But this is just basically, like I said, changing what photo is displayed on a web page, but you can have it do anything. Now, to start up this code, I'm going to use busybox. And again, that's why we have the CGI bin folder, which is going to run a script. So basically, I have busybox installed if you don't already on a Debian based system. So Debian, Linux Mint, Ubuntu, a lot of systems out there. You can use apps. Whatever your package manager is, apps. So actually, sudo apt install busybox. I already have it installed. Once you have it installed, you can say busybox, HTTPD-P for port. I already have Apache running on port 80. Plus you need permissions, elevated permissions to start something on port 80. So let's say 8080. And now it's running in the background. If I PS, AUX, grep, HTTPD, you can see here I've actually got two things running. I've got one here that's running, which is my doorbell code, which is always running. And that's running on a port here. And then I also have port 8080 here. I'm going to just kill this one here that we just started. Just to show you again. So it's running in the background. If you wanted to, you can do F-F and maybe add some Vs there for Bose output. And now it's not, instead of being thrown in the background, it's going to continue running in the shell here. So you actually will see any requests that come to this server. So if I was to open up Chrome, once again, I should be able to go to, in this case, localhost, whoops, localhost, localhost, port 8080. And actually I've already done this CGI bin, random.cgi. It's going to give us an output. And every time I do this, it's going to change the number there. And if I go back to my shell here, you can see that somebody connected. That would be me. What file they requested, and that the connection was closed. And then I connected again, blah, blah, blah. It's going all the way through. So the F prevents it from going into the background if you wanted to keep running in the shell here. So you can see it. And the more Vs you put, the more output you get here. I think it's, you know, I think it's one to three Vs. So again, every time I run this is going to give me a random output. So if I now go to localhost photos.html here, you can see one photo. And let's see if I can, whatever, we'll flip back and forth. If I run this, I'll give me a zero. There we go. Three. So every time I run this, this page is updating. I should just demonstrate it better with the Wemos on my second channel. So again, check out the links in the description. Let's see. Woo, 20 minutes. This went a lot longer than I thought it would. I thank you for watching. As always, please visit FilmsByChris.com. That's Chris the K. There's a link in the description. I'll check out my Patreon page. Help support my videos. Check out my other channel for this project on hardware as well as others. I thank you for watching. And as always, I hope that you have a great day.