How To Make A Raspberry Pi Pico W Web Server
If you don’t plan to set up your main website on a hosting service, you can easily run a web server at home.I have previously explained how to Set up a Raspberry Pi web server Use a regular Pi 3, 4 or Zero, but you don’t need a full Pi to get the job done. The Raspberry Pi PIco W, a Wi-Fi enabled microcontroller for just $6, allows you to run basic web services.
of Raspberry Pi Pico W is not the most obvious option, but with a little MicroPython code and HTML you can serve basic static web pages from Pico W. This project has two parts. HTML and MicroPython code. HTML is what you see in your browser, and MicroPython acts as a way to serve your code.
This project hosts a basic web page from a Raspberry Pi Pico W. It also shows how to use CSS and JavaScript to add sparkle to your page. Finally, you’ll learn how to forward external requests to the Raspberry Pi Pico W to serve your content to the world.
For this project you will need
HTML for the Raspberry Pi Pico W web server
HyperText Markup Language (HTML) is a fundamental building block of the web. This language is a framework for creating web pages that has since been updated and improved for more modern sites.
The HTML for the Pico W web server can be as simple or as complex as you want, but there are some caveats to consider. The site’s HTML is loaded into a Python variable. That said, the Pico W only has 264KB of SRAM, so you can’t overuse the features. Second, you can’t serve images or reference files (CSS/JavaScript) with Pico W because you load the HTML into Python variables that aren’t accessible to the filesystem.
This means that images and CSS/JavaScript must be accessed from the remote site. CSS and JavaScript in your HTML code will work, but we recommend referencing Bootstrap CSS and JavaScript via its CDN.
To create a basic HTML page
1. Open your text editor of choice. Notepad will suffice, but we prefer Notepad++.
2. Set the document type to HTML and create an html tag. This tells the browser that the page is written in HTML, and the tag marks the start of the HTML document.
<!DOCTYPE html>
<html>
3. new tag and in the head
<head>
<title>Tom's Hardware Pico W Web Server</title>
</head>
Four. Create a section. This is the section where the user-visible content will be displayed.
<body>
Five.
Use tags to create headings and give headings/titles to your pages. This is the largest heading tag.
<h1>Tom's Hardware Pico W Web Server</title>
<h1>Tom's Hardware Pico W Web Server</title>
6.
to add another heading and name the section. In this example, “Latest News”.
tag is
It’s smaller than , but emphasizes that this is a new section.
<h2>The Latest News</h2>
It’s smaller than , but emphasizes that this is a new section.
<h2>The Latest News</h2>
<h2>The Latest News</h2>
7. Use tags to insert linked images from a remote CDN. It requires the full URL of the image you want to use and ensures that you also have permission to use the image.This example uses an image from Pexels.coma free licensed image service. You can resize images using tags. You can specify the size as a percentage of the original size, or you can hardcode the size in pixels.
<img src="https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?cs=srgb&dl=pexels-designecologist-1779487.jpg", width=640px height=427px>
8.
Use tags to create paragraphs of text. In our demo, Lorem Ipsum generator.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…..</p>
9. Finally close the body and then the HTML document.
</body>
</html>
Ten. Save the file as index.html.
Keep your code in this file for now. We will use it later.
Python code for the Raspberry Pi Pico W web server
You’ve created a page for your avid reader, but now you need to create a way to serve it. To do this, we’ll create a short MicroPython application that reads the contents of the index.html file and serves it as a web page.
1. Follow this guide to set up your Raspberry Pi Pico W. Follow the steps up to “How to Blink an LED”.
2. Create a new empty file.
3. Import two modules. The first is sockets, the low-level network interface. The second is the network you use to connect to your Wi-Fi access point.
import socket
import network
Four. Create an object, page, and use it to reference the Pico W HTML file. This will open the file in read-only mode.
page = open("index.html", "r")
Five. Read the contents of the file into a new object html and close the file. This loads all the HTML into the html object.
html = page.read()
page.close()
6. Create an object wlan and use it to create a connection from your code to Pico W’s Wi-Fi chip.
wlan = network.WLAN(network.STA_IF)
7. Turn on Wi-Fi and connect to the access point with a password.
wlan.active(True)
wlan.connect("ACCESS POINT","PASSWORD")
8. Create an object sta_if that acts as an interface between Pico W and the Wi-Fi access point.
sta_if = network.WLAN(network.STA_IF)
9. Print the Pico W IP address. Make a note of the IP address as you will need it later. The data returned is a list object containing IP addresses, netmasks, and DHCP server addresses. Since the IP address is the first item in the list, [0] You can return from a list without any other information.
print(sta_if.ifconfig()[0])
Ten. Configure Pico W to listen for connections from any IP address on port 80. Use socket.SO_REUSEADDR to allow using the same IP address after a reset. This solves the problem of having to completely power off the Pico W to reuse the IP address.
addr = socket.getaddrinfo('0.0.0.0', 80)[0][-1]
s = socket.socket()
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
s.bind(addr)
s.listen(1)
11. Create a loop that continuously executes the next section of code.
while True:
12. Configure Pico W to accept connections When Create a file that will be a web page.
cl, addr = s.accept()
cl_file = cl.makefile('rwb', 0)
13. Create another loop and within the loop create an object, a line, and read the web page content line by line.
while True:
line = cl_file.readline()
14. Use a conditional statement to stop reading content if there is a newline or newline.
if not line or line == b'\r\n':
break
15. Create an object containing the HTML, the response. for web pages.
response = html
16. Configure a client response that sends an HTTP status code and content type to the browser. after that respond with HTML Rendered in the browser. After that the connection will be dropped.
cl.send('HTTP/1.0 200 OK\r\nContent-type: text/html\r\n\r\n')
cl.send(response)
cl.close()
17. Save the file as main.py on your Raspberry Pi Pico W. This will automatically run the code when Pico W starts up.
Full MicroPython code listing
import socket
import network
page = open("index.html", "r")
html = page.read()
page.close()
wlan = network.WLAN(network.STA_IF)
wlan.active(True)
wlan.connect("ACCESS POINT","PASSWORD")
sta_if = network.WLAN(network.STA_IF)
print(sta_if.ifconfig()[0])
addr = socket.getaddrinfo('0.0.0.0', 80)[0][-1]
s = socket.socket()
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
s.bind(addr)
s.listen(1)
while True:
cl, addr = s.accept()
cl_file = cl.makefile('rwb', 0)
while True:
line = cl_file.readline()
if not line or line == b'\r\n':
break
response = html
cl.send('HTTP/1.0 200 OK\r\nContent-type: text/html\r\n\r\n')
cl.send(response)
cl.close()
Copy index.html to Raspberry Pi Pico W
1. At Thonny[表示]>>[ファイル]Click. This will open the file manager. The top window is the source, in this case your PC’s main drive. The bottom window is the target Raspberry Pi Pico W.
2. In the top window, navigate to the index.html file location..
3. Right-click index.html and select Upload to / to copy the file to Pico W.
Four. Remove Pico W from your computer, Then reinsert and restart Pico W to start the web server.
5. On your PC, Open a new browser window/tab and go to the IP address of your Pico W. After a few moments, the page will appear in the window.
HTML improvements
I used Bootstrap and its CDN to create a more professional looking page.Basically this is the same basic
,
,and It uses elements, but has extra features like dividers and custom CSS.
bootstrap is an HTML, CSS, and JavaScript framework to quickly create professional-looking sites. Bootstrap is a good place to start if you want to build a simple demo site for a client or your own project.
we hero template Our demo replaces CSS and JavaScript links Bootstrap CDN link.
If you want to use our code, Download here.
Forwarding requests to the Raspberry Pi Pico W web server
Currently the server can only be accessed from devices on the same network. To share your Raspberry Pi Pico W web server with the world, you need to know your external IP address and set up port forwarding to send external requests to your Pico W.
Every router has subtly different means of accomplishing these tasks. Our instructions show how your ISP-supplied router handles it.
1. Get the external IP address. Using Google’s search engine, search for “What is my IP address?” Make a note of the IP address.
2. Log into your router’s advanced settings When Select DHCP ReservationYou need to make sure your Pico W has a static IP address on your LAN, and DHCP reservations are a way to do this.
3. Select Pico W from the list of connected devices.
Four. Add the reservation to the IP lease table and[適用]Click. This ensures that your Pico W receives the same IP address within your home.
Five. Go to your router’s port forwarding menu. In our case it was under Advanced Settings >> Port Forwarding.
6. Set the service to HTTP (port 80) When Create a rule for HTTP traffic. Set the start and end ports to 80, the protocol to TCP, and set the IP address. to your Pico W’s. keep Then apply the rule.
7. Open a browser on another device connected via a different network (cellular). When Go to your external IP address. A web page served via Pico W will be displayed.