So, as you can see, when I press toggle pin 11, I got an LED to turn on I’m going to toggle pin 13. So that turns on the other LED you’re going to turn on the LED on pin 12 and of course you can toggle them again to turn them off. So let’s go ahead and take a look at the code. Let’S start off with the website code. So that will be the code that creates the three bottoms and sends the data to the ESP module. So this is my HTML code: go ahead and copy it and paste it in notepad so I’m going to show you how to save it as an HTML page. So that you can open it from any web browser, so you will go ahead and copy this code, paste it in notepad and go ahead and save as I’m gon na save it to my desktop – and this is very important – make sure that you save it as The type all files and name it any anything you want so I’m just going to name it ABC that HTML so make sure that whatever your name is you put dot HTML at the end, so that a web browser recognizes it I’ve, actually saved esp8266 dot HTML. So I’m, just showing you how to save a code as an HTML web page. So you would copy this code paste it in here. Save it you’re curious about the text.
This is the line that sends the data to the ESP. So I have my es piece IP address, as you can see, mine is local. I haven’t put it on the internet, but if you have your ESP available for anyone on the internet, then you can simply go ahead and replace the your public IP address here or your website address if you are using a DNS server. So what I’m saying here is the same again request to this address with this data so I’m sending a parameter called pin with a value P, which is what I, whatever whatever ID I clicked on so like I said if I clicked on toggle pin 12, the Double pin 12 button, then this variable will have the value of 12, and that is what will be sent inside the parameter pin. So what actually gets sent to the Arduino? I have a sample of what gets sent to my Arduino whenever I click pin 13 or so when I click the toggle pin 13 bottom. This is what my ESP receives and eventually my Arduino. I will give you the Arduino code that you need also. So this is what my Arduino sees and every time the Arduino receives data from the ESP. Then you get this string here which says plus IP B. This is the connection ID that’s, also very important. It tells you which connection the Arduino is currently on. So that way, you can close the connection.
If you don’t close your connection, then you’re going to have many connections open and your ESP my world slower so it’s very important to eventually save this connection ID, and so you can later go ahead and terminate that connection. But anyways my Arduino is going to be looking for this string and when it finds it, you will get this connection ID and save it notice that there’s also a string here that says pink equals. So this this string pin comes from what I have in my HTML code. So why replace this world with something else, then that will be replaced in my get request at the other. You know receive so this board comes right from here, and the value of it comes from whatever, since like this variable, so my green Dakota will be also searching for this string and then get this value, and that way I know which pin to toggle. So now that you know about the HTML code, that is required to create the buttons and send data to the ESP let’s go ahead and take a look at the Arduino code that is in charge of receiving the data and toggle in the bottom. So this is my code I have included the serial library is very similar to the code in my previous videos. I’Ll create a connection for my esp8266. These are the pins that I’m going to toggle. If you want to toggle more digital pins, simply go ahead and repeat these two lines for the other pins and the code will work the same way.
Also, if you want to add more pins, don’t forget to not only change the code in your Arduino by adding these two lines for those pins that you want to toggle, but also adding another bottom line. So, for example, if I wanted to toggle pin 10, then I would add another line: change this to 10 change, the text that the user sees and then in my Arduino code. I would copy these two lines and paste them and change the value of the pin to 10, save it uploaded to my Arduino. Ok, so then um I created this function. If you watch my previous video, you know what the function does it ascends data to the ESP so I’m resetting the ESP changing the mode to an access point getting the IP address of my ESP configuring it for multiple connections. Turning on the server on port 80, so this is where I check whenever there is data available on the ESP first check, if it’s an IP D string, which tells me that a web browser or web page is connecting or sending data to the ESP. So whenever this statement is true, that means that I have a visitor on my website: that’s clicking the bottles, so I delay the code for a little bit to allow the signal buffer to fill up with the strings that is receiving. This is where I store my connection ID. The reason why I subtract 48 is because, whenever I read for my ESP it reads in ASCII, so if you look at the ASCII table, you will notice that a the integer 0 starts at 48, so by subtracting 48.
I am changing this value from ASCII to the actual integer, since I have an integer variable here, so that is why I’m subtracting 48 then, like I said I have to find it, find the string pin so that’s for my get request. Ping equals every time you use the find function. It advances the cursor so when I use find pain equals my cursor is now located at this point. So that means that the next two characters will tell me my pin number. So this will read my first character and since I know that it’s a two digit number and multiply by 10, so that I can add it to the next in a year and get my pin value, and this is where I doubled my pin. Lastly, I have to close the connection, so I pass it the connection ID that I had stored here, so that would be this value that’s, the connection ID. So I closed it and that’s really all there is to it. So I will be posting this code. In my website, you can go to it by clicking on the link in the description of this video that’s it for this tutorial.
Posted on Friday August 30, 201910 Best Arduino Alternatives in 2019 All 3DPInterested in trying a competitor to the most popular open-source microcontroller platform? Check out the best Arduino alternatives and find out why they deserve … … Continue Reading »
Posted on Friday August 23, 2019TinyGo on Arduino BlogdottvA few weeks ago, we announced that Arduino now works with TinyGo, the popular compiler that brings the Go programming language to microcontrollers. … Continue Reading »
Posted on Wednesday August 28, 2019TinyGo GO Compiler for Microcontrollers Now Works on Arduino Boards CNX SoftwarePowerful, yet simple to use, TinyGo is making a significant mark in the open-hardware sector. This was well stated in the Arduino blog interview of Ron. … Continue Reading »