Connect Your Pico W To The Internet And Control It From The Web
Tags: raspberrypi, python, iot, beginners
Published: 2022-07-25 10:50:47

I recently made a new video showing how to take your [brand new Pico W](https://www.raspberrypi.com/news/raspberry-pi-pico-w-your-6-iot-platform/), connect it securely to the internet, and control it from a web interface — all in Python with [Anvil](https://anvil.works/).

**Check out the video or the text version of the video below.**

---

# Video

{% embed https://www.youtube.com/embed/DDvzzMyYxCM %}

> **Want more quality developer content?
> Follow me for more software development content!**
> {% embed https://dev.to/codingwithryan %}

---

# Text Version

![Article Thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00jdi4n214vx43gi60g3.png)

The next evolution of the hugely popular Raspberry Pi Pico microcontroller is here. The Raspberry Pi Pico W adds on-board wifi making it perfect for creating IoT devices.

**In 3 steps, I’m going to teach you how to create and deploy a simple web app, so you can learn how to control your Pico W remotely.**

The app will be a simple online app with a single button that makes the LED on the Pico flash.

![Using the finished app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t74mtv2dadhryhz5u7vm.gif)

## Step 1 — Creating an Anvil app to control our Pico

We’ll build the web app with Anvil, the platform for building web apps with nothing but Python.

For the first step, we’ll start by creating the Anvil app that will wirelessly control our Pico. We’ll go to [anvil.works/build](https://anvil.works/build) and create a new blank app.

![Creating a new blank app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qf31sjd5ea00vnbq9hfb.gif) 

Click the name of the app at the top of the editor and change it to “Pico App”.

![Renaming the app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/od82t7lwx0lc0ec3m8yt.gif)

Next, let’s enable the [Uplink](https://anvil.works/docs/uplink). We’ll use the Uplink to connect to our Pico.

Click the add features button in the editor’s side bar and select the Uplink.

Next, we’ll click the ‘Enable server Uplink’ button.

Copy the Uplink key, we’ll be using this in a Python Script on our Pico later to establish the connection between our App and the Pico.

![Enabling the Uplink and copying the Uplink key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cz7u3h6y9b35vw4k0q8g.gif) 

Now the Uplink is enabled in our Anvil app let’s move on to step 2 and set up our Pico.

---

## Step 2 — Setting up our Pico

To setup our Pico we need to install the Anvil firmware.

To start, we’ll hold down the BOOTSEL button on the Pico and plug it into our computer.

Release BOOTSEL once the Pico’s drive appears on your computer.

![Connecting the Pico to our computer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l71uzmpshihzst5fr73g.gif)
 
Then, we’ll download Anvil’s Pico firmware file (pico-w-anvil-v<version-number>-complete.uf2) from the following link:

> [https://github.com/anvil-works/anvil-pico/releases](https://github.com/anvil-works/anvil-pico/releases)

Once it’s downloaded, copy the file onto the Pico’s drive. Our Pico will reboot once the files are copied over.



![Adding the `pico-w-anvil-v0.1.2-complete.uf2` firmware file to our pico](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1fvramf9ysxomrztt4vr.gif)
 
Open the Pico’s drive and edit the boot.py and the main.py file.

In the boot.py file, edit the Wifi connection credentials to match your Wifi network.

![Editing boot.py and adding our wifi credentials](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76qzkvk54y2sa6si60vy.gif)

Then, in the main.py file, underneath the import statements, add the Uplink key we copied earlier.

![Adding the Uplink kay to main.py](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8rjzxb2csylkigcsyh5a.gif)
 
The main.py is where any functions you want to run on your Pico device are stored.

As a default, Anvil’s main.py file for the Pico includes a `pico_fn` function. It’s a simple function that makes the light on the Pico flash and demonstrates that you can pass Python objects from your Anvil app to your Pico.

The `@anvil.pico.callable decorator` lets your Anvil app know that this function is available to call from the web. The `pico_fn` function is the one we’ll be calling from our web app.

```
@anvil.pico.callable(is_async=True)
async def pico_fn(n):
    # Output will go to the Pico W serial port
    print(f"Called local function with argument: {n}")

    # Blink the LED and then double the argument and return it.
    for i in range(10):
        led.toggle()
        await a.sleep_ms(50)
    return n * 2
```
 
Save both boot.py and main.py.

Reboot the Pico to save the updates by ejecting the disk and reconnecting the Pico.

![Rebooting the Pico W](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6o4b1dmjb2dxk693wp8.gif)

Rebooting the Pico W
The Pico will flash a few times to indicate it is connected to the internet.

Let’s go back to the Anvil app we created earlier

---

## Step 3— Creating a UI and publishing to the web

In the designer, we’ll drag and drop a button into our app’s form. We’ll change the text to ‘Flash the lights’ and style it by changing its role to `primary-color`.

Next, we’ll add a text box and set its type to number. This will let the users of our app input a number and pass the data to our Pico.

![Adding a Button component and a TextBox component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4e90l8sws3zw87shde1d.gif)
 
Double click the button in the designer. This will add a function to our client-side code which will be called every time the button is clicked.

![Adding a Button component and a TextBox component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5hn3f19j5yp8i7ermjr.gif)
 
Inside the function, let’s call the `pico_fn` function which is inside our pico’s main.py file.

We’ll pass our Pico function the number the user of our web app enters.

![Calling the `pico_fn` function in our click event function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dncatpqx5eryt16t5gur.gif)

```
 def button_1_click(self, **event_args):
    """This method is called when the button is clicked"""
    anvil.server.call("pico_fn", self.text_box_1.text)
```

Now we’ve got the functionality sorted, we can deploy this app online by clicking the publish button in the top right of the editor. Let’s select the ‘Add public URL’ and change the URL to meaningful.

If we navigate to the URL we chose and press our apps button, the LEDs on the Pico will now flash.

![Publishing our app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7bl7u6589em7a6s2gbg.gif)
 
That’s it! We now have our Pico microcontroller connected to the internet with a deployed web app that controls it. Check out the link below to see the finished Anvil app:

> [https://anvil.works/build#clone:UU2QIYDJCCUMPHIY=DLI6CTZ5CBL3US575ZVTOPWB](https://anvil.works/build#clone:UU2QIYDJCCUMPHIY=DLI6CTZ5CBL3US575ZVTOPWB)

---

## Conclusion

I’ve just shown you how to control your Pico W from the web with nothing but Python and Anvil.

Anvil is free to use — head on over to [anvil.works/pico](https://anvil.works/pico) today to see more examples and the full documentation.

> **Want more quality developer content?
> Follow me for more software development content!**
> {% embed https://dev.to/codingwithryan %}