Now that we can connect the Pico to a wireless network, in this video we will learn how to host a web page. With this web page, we will be able to create interactive elements to control the Pico with and send sensor data from the Pico to the web page for our client to see. In this video, we will be building up the structure that we will be using to do this.

Transcript

In this video, we'll be hosting a simple web server locally on our Pico and connecting to that server both through an existing wireless network and by hosting a Wi-Fi network directly from the Pico itself. This is going to allow us to host a simple web page on a Pico that we can access through a browser on a phone or a computer and from there we can interact with the Pico through that web page.

So we're going to do this two ways. The first is through an existing network like your home Wi-Fi. We'll connect the Pico to an existing wireless network and then we'll host a web page that we can connect to with a client which will be your phone or your computer. The Pico will serve the connected client a web page which might have buttons or sliders or pictures or even send some sensor data and then on the device we can interact with this web page. Say if we press a button that device will send something called a request back to the Pico which contains the information saying that the button was pressed and with that information on the Pico we can do whatever we want from there.

For example, we'll be creating a web page with an off and an on button to control the Pico's onboard LED. Now an important thing here is that the way that we're setting this up even if your wireless network has access to the internet the Pico will only serve its web page locally meaning that you can only access the Pico from a device connected on the same network and then once we've got that set up we'll go ahead and modify it to kind of take out the middleman and host the wireless network from the Pico itself which is extremely easy and of course you can find the final code for all of this in the course page linked below.

Starting off we're going to need to import network and we're also going to need to import socket and we'll import time because we'll be using some sleeps as well. Now I'm going to start by copying over all the things from last demo I'm just going to quickly briefly go over how they work so if you want to understand that fully go and watch our previous video where we connect our Pico to the internet and query some web service.

So our code is going to start by trying to accept a client and the way that we're doing it here in MicroPython is known as a blocking call and long story short it's not going to progress past this client equals s dot until a client connects to our Pico and starts this process then we're going to receive the request from the client store in a variable called request and then turn it into a string print it out close the connection to backtrack a little bit I've just realized I've made a few spelling mistakes mainly here in address I can never spell that word correctly I've also forgot to put a semi-column there down here I have spelt except incorrectly again so now that we've set up our socket on our Pico to handle clients connecting to it we should be able to test that through a browser on any device as long as it's connected to the same network that the Pico is on so I'm going to go ahead and run that code and we connected to our local network.

Now I'm going to go ahead here and create a function to open a socket on the Pico now we are getting into some really technical and dense networking terms here but a socket is something that the Pico uses to allow other clients and devices to send and receive information with so first we start by getting some address information for our socket that we'll use to set it up with and then we'll create an instance of our socket and assign it to a variable similar to how we set up a pin then we take that address bind it to the socket and tell the socket to start listening and this means it's going to start listening for any incoming connections and this number here that we put three and just for this example is how many connections can be queued up while it's trying to connect to the socket and then after all that we're just going to return our socket which is the variable s now let's go ahead and just call that socket in our main part of our code I'm just going to call open socket and that is going to open up the socket for us so now we're going to start handling devices connecting to our Pico and sending and receiving information and we're going to pop all of this inside of a try and accept structure just to deal with any errors that might arise so our code is going to start by trying to accept a client and the way that we're doing it here in MicroPython is known as a blocking call and long story short it's not going to progress past this client equals s dot until a client connects to our Pico and starts this process then we're going to receive the request from the client store in a variable called request and then turn it into a string print it out close the connection to backtrack a little bit I've just realized I've made a few spelling mistakes mainly here in address I can never spell that word correctly I've also forgot to put a semi-column there down here I have spelt except incorrectly again so now that we've set up our socket on our Pico to handle clients connecting to it we should be able to test that through a browser on any device as long as it's connected to the same network that the Pico is on so I'm going to go ahead and run that code and we connected to our local network.

Now I'm going to go ahead here and create a function to open a socket on the Pico now we are getting into some really technical and dense networking terms here but a socket is something that the Pico uses to allow other clients and devices to send and receive information with so first we start by getting some address information for our socket that we'll use to set it up with and then we'll create an instance of our socket and assign it to a variable similar to how we set up a pin then we take that address bind it to the socket and tell the socket to start listening and this means it's going to start listening for any incoming connections and this number here that we put three and just for this example is how many connections can be queued up while it's trying to connect to the socket and then after all that we're just going to return our socket which is the variable s now let's go ahead and just call that socket in our main part of our code I'm just going to call open socket and that is going to open up the socket for us so now we're going to start handling devices connecting to our Pico and sending and receiving information and we're going to pop all of this inside of a try and accept structure just to deal with any errors that might arise so our code is going to start by trying to accept a client and the way that we're doing it here in MicroPython is known as a blocking call and long story short it's not going to progress past this client equals s dot until a client connects to our Pico and starts this process then we're going to receive the request from the client store in a variable called request and then turn it into a string print it out close the connection to backtrack a little bit I've just realized I've made a few spelling mistakes mainly here in address I can never spell that word correctly I've also forgot to put a semi-column there down here I have spelt except incorrectly again so now that we've set up our socket on our Pico to handle clients connecting to it we should be able to test that through a browser on any device as long as it's connected to the same network that the Pico is on so I'm going to go ahead and run that code and we connected to our local network.

Now I'm going to go ahead here and create a function to open a socket on the Pico now we are getting into some really technical and dense networking terms here but a socket is something that the Pico uses to allow other clients and devices to send and receive information with so first we start by getting some address information for our socket that we'll use to set it up with and then we'll create an instance of our socket and assign it to a variable similar to how we set up a pin then we take that address bind it to the socket and tell the socket to start listening and this means it's going to start listening for any incoming connections and this number here that we put three and just for this example is how many connections can be queued up while it's trying to connect to the socket and then after all that we're just going to return our socket which is the variable s now let's go ahead and just call that socket in our main part of our code I'm just going to call open socket and that is going to open up the socket for us so now we're going to start handling devices connecting to our Pico and sending and receiving information and we're going to pop all of this inside of a try and accept structure just to deal with any errors that might arise so our code is going to start by trying to accept a client and the way that we're doing it here in MicroPython is known as a blocking call and long story short it's not going to progress past this client equals s dot until a client connects to our Pico and starts this process then we're going to receive the request from the client store in a variable called request and then turn it into a string print it out close the connection to backtrack a little bit I've just realized I've made a few spelling mistakes mainly here in address I can never spell that word correctly I've also forgot to put a semi-column there down here I have spelt except incorrectly again so now that we've set up our socket on our Pico to handle clients connecting to it we should be able to test that through a browser on any device as long as it's connected to the same network that the Pico is on so I'm going to go ahead and run that code and we connected to our local network.

Comments


Loading...
Feedback

Please continue if you would like to leave feedback for any of these topics:

  • Website features/issues
  • Content errors/improvements
  • Missing products/categories
  • Product assignments to categories
  • Search results relevance

For all other inquiries (orders status, stock levels, etc), please contact our support team for quick assistance.

Note: click continue and a draft email will be opened to edit. If you don't have an email client on your device, then send a message via the chat icon on the bottom left of our website.

Makers love reviews as much as you do, please follow this link to review the products you have purchased.