How To Setup a HTTP Web Server With Raspberry Pi Pico W (using WiFi)

in this guide we'll create a simple server using a Raspberry Pi peod W the server will be accessible from within a local Wi-Fi network and can be used to serve Pages read sensors and control Hardware in our case we'll drive an LED and read the state of a button while quite simple This Server code is a great foundation for really useful projects like our Wi-Fi connected garage door controller based on a PW to follow along it's best if you're already familiar with connecting a PW to Wi-Fi and we have a guide Linked In the article to get you started there you'll also need the following Hardware a PW with pins already soldered and led with current limiting resistor a button and a breadboard let's get [Music] started plug your pico into the breadboard right at the top so that the first pin is on Row one connect the cathode of the led to the bottom left pin on the Pico that's on row 20 on the breadboard and the short lead is going to row 21 use a resistor to bridge row 21 all the way up to the third pin from the bottom on the Pico that would be Row 18 so we now have gp1 16 driving an LED and going through a resistor to ground I'll plug a button into row 30 and connect row 30 to row 20 on the right hand side that's GP 16 and connect the other side of the button row 32 to ground on the Pico at Row 18 and then connect to your computer with a USB cable it's best to check that our Hardware is working before proceeding you can find a hardware test script in the article that will Flash the LED slowly when the button is not pressed and Flash it quickly while the button is being held down if You observe that behavior you're right to proceed if you have any problems then let us know in the comments at the bottom of the article find the example code in the article and copy that into a new funny script near the top of the script enter your Wi-Fi credentials and run the script when we run the script we can see some information in the Shell we are waiting for a connection and then when we connect to the Wi-Fi Network the PW responds with connected and then tells us its IP address on the local network copy that IP address and navigate to it in your favorite browser I'm going to use Firefox how's that we have a simple web page with a heading and some text so we have the PW HTTP server we have the text hello world and then we have what looks like a status message the LED is off and the button is not pressed first things first let's see if the button is working I'll hold down the button and then refresh the page and here we can see the text has changed to button is pressed if I release the button and refresh again we see the button is not pressed what about the LED to control the LED we're going to use a query append that address with a slash mark LED equals on and just like that we can see the LED has lit up and of course we can turn the LED off by saying LED equals off if you experience this error at any time after running your script say multiple times just power cycle your pico reconnect with thony and rerun the script let's take a look at the code the content of the web page is defined by the HTML variable near the top of the script and you can see this is just a multi-line string in Python that contains a bunch of simple HTML code to create a web page here we can see a title we can see a heading there's a paragraph and since this is a python script we can also inject variable content by using formatting here we've got the Syntax for formatted strings so we can change the content of what appears in the page and that is how we can update the page with the LED and button status at the top of the script we import the necessary modules for networking and controlling gpio and then we set up the LED on pin 15 and the button on pin 16 we enable Wi-Fi and connect to our Wi-Fi network there's the HTML page definition and then we attempt to connect to the Wi-Fi network after some error handling if a connection was not successful we open a socket this is like the end point where communication occurs on the Pico and then we have the infinite Loop for the server code we scan for connecting clients and copy any requests into a request variable which we can then print to the shell and you can see that down here there's quite a lot going on in this request there's a lot of metadata about the browser type and settings but importantly at the start of the request we have our query LED equals on we can use theind method to scan the request for this text here we're looking for Led equals on and led equals off and what's returned by find is actually the position in the string where it found this text so counting from zero in the request we have 0 1 2 3 4 5 6 7 88 is where the query starts for Led equals on and so that is what will be loaded into the ledore on variable then we just check if that's equal to 8 and if so we can turn the LED on so we have a request received by the PW and the PW looks for the valid query in a valid position of that request and the same is true if we were to submit LED equals off further down we update the string that displays the state of the LED and we also check if the button is pressed and we update a string for that state as well finally we can catenate the LED State string and the button State string and format that into our HTML variable so now we have VAR strings going into that HTML variable and that is what gets sent as the response to the client which is our computer we send that string as a response and remember that string is both the HTML code that also contains the status of the button and the LED now that example established that it's possible to use queries to send information to our server like the intended state of the LED this is functional but a little cumbersome to do anything you would have to type out what you want to happen wouldn't it be nice if our PW served a web page that presents some kind of button interface for controlling our Hardware find the remix example where we will take a new version of the HTML variable copy that new HTML code and replace the existing HTML variable so I'll just highlight all of that and paste over the top rerun the script and navigate to the IP address of your PW now we have a much more friendly HTML form with two buttons to control the LED clicking one of these buttons will automatically send the corresponding query to the Pico see here I've clicked on and the LED has come on when I click off the LED turns off that's a much nicer user experience if we take a look at that new HTML we can see the name of each button here we have our green button with the name Led and the value attached to that button is on likewise for the red button it is also named LED and it has the value off so when we click these buttons it will send LED equals and then the value we wish to send on or off these button classes are defined a little higher up and that just does some nice styling like setting the background color and text formatting so where to from here this simple HTTP server is a really practical starting point for other projects controlling an LED and reading a button are very simple examples but this Hardware can be replaced by any sensor or actuator that you can interface with ar raspber P peaw for example we made a Wi-Fi connected garage door controller with minimal changes to what's shown in this guide we encourage you to stay curious and keep experimenting there's additional resources at the bottom of the article there's also a document with which will help you make an asynchronous web server which handles Connections in a much more robust way and if you make something cool from this guide or have any questions please leave a comment below we're full-time makers and happy to help until next time happy [Music] making

Channel: Core Electronics

Views: 68,352

Keywords: electronics, maker, education, tutorial, technology

Id: AK8UYh7pMGM

Length: 9min 23sec (563 seconds)

Published: Thu Aug 18 2022