DEV Community 👩‍💻👨‍💻

Ryan for Anvil

Posted on • Originally published at anvil.works

Connect Your Pico W To The Internet And Control It From The Web

I recently made a new video showing how to take your brand new Pico W, connect it securely to the internet, and control it from a web interface — all in Python with Anvil.

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


Video

Want more quality developer content?
Follow me for more software development content!


Text Version

Article Thumbnail

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

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 and create a new blank app.

Creating a new blank app

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

Renaming the app

Next, let’s enable the 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

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

Then, we’ll download Anvil’s Pico firmware file (pico-w-anvil-v-complete.uf2) from the following link:

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  raw `pico-w-anvil-v0.1.2-complete.uf2` endraw  firmware file to our pico

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

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

Adding the Uplink kay to main.py

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
Enter fullscreen mode Exit fullscreen mode

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

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

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

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  raw `pico_fn` endraw  function in our click event function

 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)
Enter fullscreen mode Exit fullscreen mode

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

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


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 today to see more examples and the full documentation.

Want more quality developer content?
Follow me for more software development content!


Top comments (0)

Now it's your turn.

 
🗒 Share a tutorial
🤔 Reflect on your coding journey
❓ Ask a question
 
Create an account to join hundreds of thousands of DEV members on their journey.