ESP8266 Web Server POST Requests With JSON Data In Arduino IDE (Mac OSX and Windows)

[Music] hi I'm Cisco with a crow but again I'm here to show you another tip for working with your esp8266 microcontroller in a couple of videos we've shown you how to set up a web server on your esp8266 and how to send data to the web server using URL arguments for specifying the colors of a neopixel strip today we're going to be talking about how to send data in a different way using a post request and formatting the data using the JavaScript object notation JSON for sure the data will specify the pan and tilt angles of this camera mount that I have here as I've done before I'll start with a simple web server code and I'll make a copy onto a new directory that I'll name web server rx Jason I'll rename the firmware file to match the name of the directory web server rx Jason Ino and I'll go ahead and open it in my preferred text editor and note that you can use whichever one you prefer I know this day's sublime it's a popular one but this is just a matter of preference [Music] if you remember the simple web server file allowed us to set up a simple web server and connect it to our local Wi-Fi network then print the IP address that was assigned to the esp8266 by our local Wi-Fi browser then we set up a couple of routes this last one called toggle which allowed us to when we receive a request to that route turn on and off an LED today we're going to be adding a new route that will allow us to get the data and process it for setting the two angles of the camera pan and tilt mount I'll name that route pan tilt and when we get a request on that route I want a function that I'll Petrelli name set until to run when you first install the support for the esp8266 development board this node and CPU board you already installed the server library that we'll need to control the two servos on the camera pan and tilt mount but we'll need to add one more library they arduino json library in order to handle the type of request we're going to be sending today so we'll go to our arduino ide and go through the sketch include library menu manage libraries and search for arduino jason go ahead and install the latest version once that's done close the menu and go back to your text file and the first thing we want to do is include the two libraries the two external libraries that we'll need for today the first one is the servo library and the second one is the arduino json library that we just installed using the servo library we can declare the two objects for each one of the servos that we're going to be using I'll name them serve will pan for the one that's going to be doing the pan motion and the other ones herbal tilts then I can use the attach method of the servo class to specify the pin that I'm going to be connecting each servo to so in the case of the panthersville I'll use pin v1 and in the case of the tilt serval I'll use pin into we can jump right into the set pan/tilt function and just to test things out i'll move the two servos to arbitrary positions by using the right method of the servile class and specifying a position between 0 and 180 degrees I'll just set the panthersville to 0 and I'll do the same thing for the serval tilt set it to 180 and I'll use the send method of the server object to send an empty response to testing so we should be ready to test things out so I'll go ahead and open that file in the Arduino IDE and compile it with a code compiled we're ready to test things out on our breadboard the first thing that I like to do is break out the power from the development board onto the breadboard so I'll use red for 3v3 3.3 volts and black for ground toward the top two pins on the development board then I'll use the three jumper wires to plug them in to this jst connector that is typical for the circles I'll use yellow for the data line which is this case the corresponds to the orange cable going to the serval red for power which is right on both sides and black for Brown I already did it beforehand for the other circle this will be the tilt serval so I'll go ahead and connect the data line to pin d2 as I specified on the software and then ground to the blue rail and red to the red rail similarly I'll use the purple wire on the panthersville to connect to d1 and black to ground red to 3v3 lastly I'll connect the development board to the USB port and you'll see that informating is part correctly the servos might snap into place so don't don't be startled by that then I can go ahead and upload the code make sure that you select the correct board and the correct port but in my case I work with this board pretty much every day so it's selected already hit upload then you can go into your serial monitor to get the IP address of the board remember to reset it if you don't see it and go ahead and copy that IP address and go to your browser paste it on the URL bar and set the route to pan/tilt once you navigate to that route then the camera should move to that arbitrary position we said before with everything working we're now ready to send the data to which we want those two circles to move to do that we go back to our editor and we're going to be using the arduino json library as follows first gonna have to get the data as part of that request and we'll be using the same method that we were using before that our method of the web server class to find a very specific parameter so if we do server the arg we're going to be searching for an argument named plain and that's just the way things work in the webserver class if you remember that returns a type string that will name data and the next thing we're going to do is create a static jason buffer object which is part of that arduino json library [Music] and it uses this template notation to specify the size you could also use a dynamic buffer but that's beyond the scope of this tutorial I'll name it J buffer for short and then we're going to be using the method of that class called parts object to search for data inside of that request that's going to return a JSON object type it's actually a pointer to that type that'll name J object once I have that object I can use different labels that will search for the data that I'm passing namely I'm going to be searching for pan and that's going to return a string type that I'll name Pan and similarly for tilt [Music] next we're going to be substituting those fixed angles we're sending to the servos for the actual pan and tilt angles that we're going to be sending alongside our requests but remember those are string types so we need to use that too in method to convert the string equivalent of the number into the number itself I'm going to go ahead and double check my code for any errors and it seems that everything is ready to go so I can go ahead and start sending those requests at the beginning of the video I mentioned how we're going to be using post requests that will allow us to use JSON formatted data so we cannot use the browser but we're going to be using a client called curl and you can read how to install it either on Mac OS on our windows at the curl website and the link will be on the description so I'm going to open a new tab on my terminal and type in the command curl that takes a few parameters the first one that I'll specify is the actual content type which will be up type application Jason then I'll specify that the method is going to be of typos and the data which will be formatted using the jason the javascript object notation so specify first a pan angle and I'll set it to let's say 90 and then the tilt angle which I'll set it to zero lastly we need the web address where we're sending that request which in our case is used at local IP address of the esp8266 and the route pan tones so it's going to be sending to that web address this data using pan and tilt data using the post method we can go back to our Arduino IDE upload the code to the board and go back to our terminal and start sending those requests we can try another angle just for fun so we can change the pan maybe to 180 and the tilt to 90 to bring it back down and enter and there you go we have our camera mount pan and tilting according to the angles we specify with a post request using JSON formatted data if you like our videos you can click the support button on our channel page but don't forget to Like subscribe or leave us a message until next time you

Channel: datasith

Views: 108,623

Keywords: ESP32, ESP8266, Arduino, IDE, NodeMcu, Tutorials, Makers, Learn, Guide, IoT, Internet Of Things, Raspberry Pi, Wireless, Communication, Weather, Creative, Sensor, Python, Programming, C++, Beginner, Electronics, DIY, MicroPython, 3d Printing, CAD, Fusion 360, Education, Tutorial, Intro, Introduction, Web, Developer, HTML, Datalogger, Project, Sensors, Data, Visualization, Webserver, Server, Client, App, WebApp, Wemos, Robot, Robotics, Robots, Easy, Adafruit, Sparkfun, OS X, Windows, Linux, Embedded, Kickstarter, RC, Fun, Build, Engineering

Id: Edbxyl2BhyU

Length: 12min 47sec (767 seconds)

Published: Sun Nov 27 2016