How to Create a Raspberry Pi Pico W Web App with Anvil

The Raspberry Pi Pico W combines a ton of features in a very affordable package. For just $6, we get the same 133MHz dual-core Arm Cortex M0+ processor with 264KB of RAM and 2MB of flash as the original Raspberry Pi Pico. But we also get a 2.4GHz Wi-Fi chip, all in the same DIP package.

The inclusion of Wi-Fi is the biggest benefit. We have a simple and cheap microcontroller with enough power to run many projects normally reserved for more powerful and expensive Raspberry Pis such as the Raspberry Pi 4 and Raspberry Pi Zero 2 W.

Wi-Fi enables Internet of Things (IoT) projects, and for that we need secure and easy-to-use tools for writing projects. Take a step forward with Anvil, which offers Pico W firmware that simplifies IoT projects and takes advantage of uplinks. With the help of Anvil and an uplink service, we can easily write code online that will communicate with a $6 Wi-Fi enabled microcontroller.

In this how-to guide, we will write a project that allows two-way communication between Raspberry Pi Pico W and Anvil servers in the cloud. We will send real-time Raspberry Pi Pico W sensor data to a web application on Anvil servers. We will also be sending messages from the app to the Raspberry Pi Pico W, which will be displayed on a small LCD.

For this project you will need

  • Raspberry Pi Pico with
  • LCD I2C
  • DHT11 temperature sensor
  • 4x male-female jumper wire
  • 3 male-male connecting wires
  • 1x half size layout

Building Schematic for Anvil on Pico W

Как создать веб-приложение Raspberry Pi Pico W с Anvil

The circuit for this project consists of one input device, a DHT11 temperature sensor, and one output, an LCD screen connected via I2C. The DHT11 will measure temperature and humidity, which will then be sent to Anvil for display on the web app. The LCD screen will display short messages entered in the same Anvil web application.

"How

DHT11 has four pins. Seen from the front (blue “cage”), we connect to the Raspberry Pi Pico W as follows

Pin 1: (red wire) Connect VCC to 3V3 (OUT) of Pico W.

Pin 2: (yellow wire) Connect data to GP4 Pico W.

Pin 3: No connection.

Pin 4: (black wire) connect GND to GND Pico W.

How to create a Raspberry Pi Pico web app W with Anvil

The LCD has four connectors.

GND: (black wire) connect to any GND on the Pico W.

VCC: (red wire) connect to VBUS on Pico W.

SDA: (yellow wire) Connect to I2C0 SDA on Pico W.

SCL: (Orange Wire) Connect to I2C0 SCL on Pico W.
Check the wiring before moving on.

Setting up Raspberry Pi Pico W

Anvil uses its own firmware image for Raspberry Pi Pico W, image which makes it easy to connect the Pico W to Anvil services. The firmware is based on MicroPython and the Pico W looks like a USB drive with two files (boot.py and main.py). Before we can write any code for our project, we first need to install custom firmware on the Pico W and connect to our Wi-Fi.

1. Download a custom Raspberry Pi Pico W firmware from Anvil.

2. Press and hold the BOOTSEL button on the Pico, then connect it to your computer using the micro USB cable. Release BOOTSEL when the RPI-RP2 disk appears on your computer.

3. Drag the Anvil UF2 file to the RPI-RP2 drive. The Raspberry Pi Pico will reboot and start MicroPython.

4. Open File Explorer and navigate to your new USB drive. The Anvil firmware uses MicroPython and is a USB stick similar to CircuitPython.

Как создать веб-приложение Raspberry Pi Pico W с помощью Anvil
5. Open boot.py in a text editor and change the WIFI_SSID and WIFI_PASSWORD values ​​to match your settings. Save and exit when you’re done. </strong>This file contains all the Python code that runs on boot. In this case, it will connect to our Wi-Fi hotspot and blink the built-in Pico W LED if there is no connection. .png”

Your Raspberry Pi Pico W should now connect to your Wi-Fi and the built-in LED should stop blinking. A static LED means we are connected to Wi-Fi and ready for our project.

Code for Raspberry Pi Pico

1. Install Thonny on your computer if you haven’t already. Follow the instructions in our article how to set up your Raspberry Pi Pico W. Thonny is an easy-to-use Python editor configured to work with the Raspberry Pi Pico.

2. Create a new empty file in Thonny.

3. Open this link and copy the text from the page.

4. Save the file on your Raspberry Pi Pico as lcd_api.py

5. Create another empty file.

6. Open this link and copy the text from the page .

7. Save the file on your Raspberry Pi Pico as pico_i2c_lcd.py These two files allow you to use the I2C LCD screen with your Raspberry Pi Pico W.

8. Open the main.py file located on the Raspberry Pi Pico W.

9. Remove the contents of main.py.

10. Import three modules of pre-written code. The first one is anvil.pico which allows our Pico W to connect to Anvil servers. Next, uasyncio creates an asynchronous scheduler on Pico W, we need it to run parallel functions in our code. The third module is the machine and from there we need Pin (GPIO pins) and I2C classes to communicate with the GPIO and the LCD screen.

import anvil.picoimport uasyncio as machine import pin, I2C

11. Import three more modules. The time module allows us to control the pace of our code. The dht module is designed for DHT11 (and DHT22) temperature sensors and acts as an easier means to get data from the sensor. Pico_i2c_lcd allows our code to use the LCD.

from time import sleepimport dhtfrom pico_i2c_lcd import I2cLcd

12. Create an i2c object to create the connection from our code to the I2C bus. I2C0 has SDA on pin 0 and SCL on pin 1.

i2c = I2C(0, sda=Pin (0), scl=Pin(1), freq=400000)

13.Create an I2C_ADDR object to store the I2C address of the LCD. This line of code scans the I2C bus for an address and stores it in an object.

I2C_ADDR = i2c.scan( )[0]

14. Create an lcd object to establish a connection between our code and the LCD. This uses an i2c object, an I2C address, and sets the display to 2 lines and 16 characters. There are different screen sizes, so adjust this to suit your screen.

lcd = I2cLcd(i2c, I2C_ADDR, 2, 16)

15. Turn on the LCD backlight and make the cursor blink. The backlight is necessary as the screen may be difficult to read. Blinking cursor, more like retro.

lcd.backlight_on()lcd.blink_cursor_on()</ pre>

16. Create an UPLINK_KEY object and store empty data for now. This is where our Anvil Pico Uplink key will be stored. We will get this information later.

UPLINK_KEY = " “

17. Create an object, sensor, to hold our code’s connection to the DHT11 temperature sensor. With this object, we can interact with the DHT11 and get data.

sensor = dht.DHT11(Pin(2)) 

18.Use a Python decorator to tell Anvil that the following function can be called from Anvil web applications. Decorators are a means of adding extra functionality to a function without affecting its operation.

 @anvil.pico.callable(is_async=True)

19. Create a dht11data function that will work with the scheduler.

async def dht11data():

20. Read with D HT11. We need to do this to get the raw data. Notice that we are now inside a function and our code is now indented to show that it belongs to the function.

 sensor. measure()

21. Create two objects, temp and hum, to store the temperature and humidity readings from the DHT11. The round() function rounds values ​​to one decimal place.

 temp = round(sensor.temperature(),1) hum = round(sensor.humidity(),1)

22. Create a data object that will store a string/sentence containing temperature and humidity data, using string formatting to insert the data into the sentence.

 data = ("Temperature: {}°C Humidity: {:.0f}% ".format(temp, hum))

23. Output a sentence to the Python shell, and then use return to output a sentence for reading Anvil. These lines are the last lines for this function.

 print(data) return data

24. Create another decorator, this time for the function that will display the messages on the LCD screen. The message is passed to the function as an argument (message).

@anvil.pico.callable(is_async=True)async def show_message(message):

25. Use a for loop to flash the LCD backlight three times. This will draw our attention to the incoming message. The backlight just turns on and off with a short pause in between.

 for i in range(3): lcd .backlight_on() sleep (0.2) lcd.backlight_off() sleep(0.2)

26. Turn on the backlight. You need the backlight to see the text.

 lcd.backlight_on( )</code >

27. Write a message on the LCD and then pause for ten seconds. Long enough to read the message. Then clean the LCD. This is the end of this function.

 lcd.putstr(message) sleep(10) lcd.clear()< /code>

28. Connect Pico W to the Anvil servers using your outbound key. We’ll get the key later in this project.

anvil.pico.connect(UPLINK_KEY)

29. Save code as main.p

Anvil Code for Raspberry Pi Pico W

1.Go to Anvil website and click Start Build.

How to create a web Raspberry Pi Pico W app using Anvil

2. Login or register a free account.

How to create a web Raspberry Pi Pico W app using Anvil

3. Create a new empty application.

How to create a Raspberry Web Application Pi Pico W with Anvil

4. Choose a Material Design theme.

How to Build a Raspberry Pi Web Pico W application with Anvil

The Anvil editor is divided into two parts. Design and code. In the Design section, we create the user interface for our application. In the code, we give the application the necessary functionality. We’ll start by adding elements to the application and then adding functionality to them.

1. On the toolbar, drag the Label tool and drop it on “Drag Header Here”

How to create a web Raspberry Pi Pico W app using Anvil

2. Change the label text in the text field in the properties menu.

Like create a Raspberry Pi Pico W web app with Anvil

3. Drag an image tool onto the shape. This allows us to add a logo or image to our project.

How to create a Raspberry Pi Pico W Web Anvil Application

4. In the Properties section, select Source and select an image for your application.

How to create a web Raspberry Pi Pico W app using Anvil

5. From the toolbar, drag another label and drop it below the image. This will become the instruction for the user.

How create a Raspberry Pi Pico W web app with Anvil

6. Write instructions to the user, in this case write a message.

How create a Raspberry Pi Pico W web app with Anvil

7. On the toolbar, drag a text field and place it to the right of the “Write a message” field. label. Anvil will change the layout to match the text field.

How to create a Raspberry Pi Pico W web app with Anvil

8. In the Toolbar, drag a spacebar and place it below the image and above the label and text field. This separator is used to add a little space between the image and the application.

How to create a web Raspberry Pi Pico W app using Anvil

9. On the Toolbar, drag a button and drop it next to the text field. This button will be used to “send” message for Raspberry Pi Pico W.

How to create a Raspberry Pi Pico W web app using Anvil

10. Edit the button text in the Properties section. A simple “Show message” that’s all we need, as this button will activate the function to send a message to the Pico W&rsquo’s LCD screen. How to create a web Raspberry Pi Pico W app using Anvil

11. Drag another label and place it below the previous elements. This label will show data from Pico W’s DHT11 sensor.

How to create a Raspberry Pi Pico W web app using Anvil

12. Change the shortcut name to Temp. Anvil will automatically insert “self.”. This will allow us to define the correct label in the code that will display our sensor data.

How to create a Raspberry Pi Pico W web application using Anvil

13. In properties, scroll down to Text and click ADDITIONAL. Then make the text bold, and font size 32pt.

How to create a web Raspberry Pi Pico W app using Anvil

14. On the toolbar, click More Components and drag the timer to the shape.

 How to create a Raspberry Pi Pico W web application using Anvil

15. Using the properties, set the timer to an interval of 3 seconds. This time is used to update the screen for our sensor data.

How to create a web Raspberry Pi Pico W app using Anvil

Once the design is complete, our attention turns to the section of code that will add functionality in the project.

1. Double-click the SHOW MESSAGE button to open the split view code editor. Button related code is automatically highlighted.

How to create a Raspberry Pi Pico W web application with Anvil

2. Add a new line to the function that will call the “show message” function we created on the Raspberry Pi Pico W. To work on the Pico W, a message is required to send, and we get it using the text from the text fields. Calling anvil.server_call_s will run the command, but we won’t see any output in the web application.

anvil.server. call_s("show_message",self.text_box_1.text)

How to Create Raspberry Pi Pico W web app using Anvil

3. Double-click the Timer element to change its code.

How To Build Raspberry Pi Pico W Web application with Anvil

4. Add two lines to the timer function. The first creator of the data variable, which will store the data sent using “dht11data” on Pico W. The second sets the Temp label text to display the message from Pico W.

 data = anvil .server.call_s(" dht11data")self.Temp.text = data

How to create a web Raspberry Pi Pico W app with Anvil

Linking Raspberry Pi Pico W with Anvil

Anvil has “uplink” a tool that allows the Raspberry Pi Pico W (and Raspberry Pi) to securely connect to Anvil servers and communicate between the Pico W and the web app.

1. On the left side of the screen, click the blue + icon and select Channel Link from the menu.

 How to create a web - Raspberry Pi Pico W app using Anvil

2. Click “Enable server uplink”.

How To Build a Raspberry Pi Pico W web app with Anvil

3. Copy the outgoing link key. Do not share this key with anyone else.

How to create a Raspberry Pi Pico W web application using Anvil

4. Open main.py in Thonny and insert the Uplink key into the UPLINK_KEY variable. Click Save.

How to create a Raspberry Pi Pico W web app using Anvil

Running the web application

"

After both sides of the project completed, we are now using Uplink Anvil to communicate between Raspberry Pi Pico W and Anvil servers. .

1. In Thonny, click “Run” to run the code. It will take a few minutes to connect your Raspberry Pi Pico W to Wi-Fi, which you can see in the Python shell to confirm.

How to create a web Raspberry Pi Pico W app using Anvil

2. Go back to Anvil and click “Run” to run the web application.

How to create a Raspberry Pi Pico W web application using Anvil

3. Enter a message and press SHOW MESSAGE to send it to the Pico W. The LCD will blink three times and then the message will be displayed. The current temperature and humidity will appear in the app.

How to Build a Raspberry Pi Pico W Web App With Anvil

Publishing the application

Currently, the application is only available to us. We can easily share an app by publishing it. But first we need to give our app a name, title, description and logo.

1. Click on My Applications / Material Design to open the Settings tab.

Like build Raspberry Pi Pico W web app with Anvil

2. Give the app a name, title, description and add an icon.

How to create a Raspberry Pi Pico W web application using Anvil

3. Click “Publish”.

How to build a Raspberry Pi Pico W Web application with Anvil

4. Click Add Private URL and copy the URL. This URL can be shared with friends and colleagues. while testing the application.

How to create a Raspberry Pi Pico W web application using Anvil

5. Click on the link to make sure everything works. Note that you will need to run the code on a Raspberry Pi Pico W.

How to create a Raspberry Pi Pico W web application using Anvil

6. Click Add Public Link to create a public app.Its link is easier to read . The public link can be used when you’re ready to share your project on social media.

 - Raspberry Pi Pico W app using Anvil

7. Click on the link to see if it works. The code on the Raspberry Pi Pico W should also be running.

We now have a working web application running on the Raspberry Pi Pico W. and Anvil servers.

top-advice.ru

Rate article
TOP ADVICE
Leave a Reply