![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/12\/Raspberry-Pi-Pico-Web-Server-Micropython.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThis tutorial is only compatible with the Raspberry Pi Pico W<\/strong> that comes with Wi-Fi support. Throughout this tutorial whenever we refer to the Raspberry Pi Pico, we’re referring to the Raspberry Pi Pico W.<\/p>\n\n\n\n New to the Raspberry Pi Pico?<\/strong> Start here: Getting Started with Raspberry Pi Pico<\/a>.<\/p>\n\n\n\n Table of Contents<\/strong><\/p>\n\n\n\n This tutorial covers the following topics:<\/p>\n\n\n\n To follow this tutorial you need MicroPython firmware installed in your Raspberry Pi Pico board. You also need an IDE to write and upload the code to your board. <\/p>\n\n\n\n The recommended MicroPython IDE for the Raspberry Pi Pico is Thonny IDE. Follow the next tutorial to learn how to install Thonny IDE, flash MicroPython firmware, and upload code to the board.<\/p>\n\n\n\n Already familiar with basic web server concepts? Jump to the Project Overview section<\/a>.<\/p>\n\n\n\n In simple terms, a web server is a \u201ccomputer\u201d that provides web pages. It stores the website\u2019s files, including all HTML documents and related assets like images, CSS style sheets, fonts, and\/or other files. It also brings those files to the user\u2019s web browser device when the user makes a request to the server.<\/p>\n\n\n When using the Raspberry Pi Pico as a web server, you’re essentially turning it into a small computer that stores and provides web pages. As users access a web page, their browsers send requests to the Pico using Hypertext Transfer Protocol (HTTP). The Pico then responds by sending back the requested web page.<\/p>\n\n\n\n When you type a URL in your browser, in the background, you (the client) send a request via Hypertext Transfer Protocol (HTTP) to a server. When the server receives the request, it sends a response through HTTP, and you will see the web page requested in your browser. Clients and servers communicate over a computer network.<\/p>\n\n\n\n In simple terms, clients make requests to servers. Servers handle the clients\u2019 requests. In this particular tutorial, the Raspberry Pi Pico will be the server, and you (your browser) will be the client.<\/p>\n\n\n\n An IP address is a numerical label assigned to each device connected to a computer network. It is a series of four values separated by periods with each value ranging from 0 to 255. Here\u2019s an example:<\/p>\n\n\n\n At home, your devices are connected to a private network through your router (local network). All devices connected to your router are part of your local network. Inside this network, each device has its own IP address.<\/p>\n\n\n\n Devices that are connected to the same router can access each other via the IP address. Devices outside your local network can\u2019t access your local devices using their local IP address.<\/p>\n\n\n\n When you connect your Raspberry Pi Pico to your router, it becomes part of your local network. So, it will be assigned a unique local IP address and you can access it from your computer on your local network.<\/p>\n\n\n\n We\u2019ll create our web server using sockets <\/em>and the Python socket API<\/a>.<\/p>\n\n\n\n Sockets and the socket API are used to send messages across a network. They provide a form of inter-process communication (IPC). <\/p>\n\n\n\n Sockets can be used in client-server applications, where one side acts as the server and waits for connections from clients \u2013 that\u2019s what we\u2019ll do here (the Raspberry Pi Pico is a server waiting for connections from clients).<\/p>\n\n\n\n Before going straight to the project, it is important to outline what our web server will do so that it is easier to understand how everything works.<\/p>\n\n\n\n We’ll create a simple web page with two buttons to control the Raspberry Pi Pico onboard LED on and off. The web page also has another button to request a new random value (this can easily be modified to request sensor readings).<\/p>\n\n\n Here’s a quick explanation of how everything works.<\/p>\n\n\n\n When you enter the Raspberry Pi Pico address on your web browser, you’re making a request to the Raspberry Pi Pico on the root (\/) URL. When it receives that request, it responds with the HTML to build the web page we’ve seen previously.<\/p>\n\n\n When you click on the Light on<\/em> button, it makes a request on the \/lighton?<\/strong> URL. When it receives that request, it turns the onboard LED on and sends the web page with the updated LED state.<\/p>\n\n\n\n When you click on the Light off<\/em> button, a request is made on the \/lightoff? <\/strong>URL. When that happens, it will turn off the LED and send the web page with the current LED state.<\/p>\n\n\n Finally, we also have a button to request a random value from the Raspberry Pi Pico. This can be easily modified to request sensor readings or any other useful piece of information. That button sends a request on the \/value?<\/strong> URL. When the Pico receives that request, it generates a new random value and sends the HTML page updated with that new value.<\/p>\n\n\n Below you can find the HTML we’ll use to build the web page:<\/p>\n\n\n\n In this particular example, we’ll save the contents of the HTML file in a variable in our MicroPython script (but, it can also be saved in a file in the Raspberry Pi Pico filesystem\u2014not covered in this tutorial).<\/p>\n\n\n\n This HTML structure creates a basic web page for controlling an LED and fetching a random value, for interaction with a Raspberry Pi Pico web server.<\/p>\n\n\n\n The {state}<\/span> and {random_value}<\/span> variables are meant to be dynamically populated with values from the server-side logic.<\/p>\n\n\n\n In summary, this HTML creates three different forms with buttons.<\/p>\n\n\n\n Create a new file in Thonny IDE and copy the following code.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n You just need to insert your SSID and password on the following variables and the code should work straight away.<\/p>\n\n\n\n\n
\n
\n
Prerequisites – MicroPython Firmware<\/h2>\n\n\n\n
\n
Introducing Basic Concepts<\/h2>\n\n\n\n
The Raspberry Pi Pico as a Web Server<\/h3>\n\n\n\n
![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/12\/Raspberry-Pi-Pico-Web-Server-example.png?resize=1135%2C351&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nClient and Server<\/h3>\n\n\n\n
Ip Address<\/h3>\n\n\n\n
192.168.1.75<\/code><\/pre>\n\n\n\nSockets<\/h3>\n\n\n\n
Project Overview<\/h2>\n\n\n\n
![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/12\/Raspberry-Pi-Pico-WebServer.png?resize=716%2C471&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/12\/Raspberry-Pi-Pico-it-works-1.png?resize=1167%2C629&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/12\/Raspberry-Pi-Pico-it-works-2.png?resize=1200%2C641&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Basic](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/12\/Raspberry-Pi-Pico-it-works-3.png?resize=1200%2C493&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nThe HTML Page<\/h2>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n <title>Pico Web Server<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<\/head>\n<body>\n <h1>Raspberry Pi Pico Web Server<\/h1>\n <h2>Led Control<\/h2>\n <form action=\".\/lighton\">\n <input type=\"submit\" value=\"Light on\" \/>\n <\/form>\n <br>\n <form action=\".\/lightoff\">\n <input type=\"submit\" value=\"Light off\" \/>\n <\/form>\n <p>LED state: {state}<\/strong><\/p>\n <h2>Fetch New Value<\/h2>\n <form action=\".\/value\">\n <input type=\"submit\" value=\"Fetch value\" \/>\n <\/form>\n <p>Fetched value: {random_value}<\/strong><\/p>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nRaspberry Pi Pico Web Server – MicroPython Script<\/h2>\n\n\n\n
# Complete project details at https:\/\/RandomNerdTutorials.com\/raspberry-pi-pico-web-server-micropython\/\n\n# Import necessary modules\nimport network\nimport socket\nimport time\nimport random\nfrom machine import Pin\n\n# Create an LED object on pin 'LED'\nled = Pin('LED', Pin.OUT)\n\n# Wi-Fi credentials\nssid = 'REPLACE_WITH_YOUR_SSID'\npassword = 'REPLACE_WITH_YOUR_PASSWORD'\n\n# HTML template for the webpage\ndef webpage(random_value, state):\n html = f"""\n <!DOCTYPE html>\n <html>\n <head>\n <title>Pico Web Server<\/title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <\/head>\n <body>\n <h1>Raspberry Pi Pico Web Server<\/h1>\n <h2>Led Control<\/h2>\n <form action=".\/lighton">\n <input type="submit" value="Light on" \/>\n <\/form>\n <br>\n <form action=".\/lightoff">\n <input type="submit" value="Light off" \/>\n <\/form>\n <p>LED state: {state}<\/p>\n <h2>Fetch New Value<\/h2>\n <form action=".\/value">\n <input type="submit" value="Fetch value" \/>\n <\/form>\n <p>Fetched value: {random_value}<\/p>\n <\/body>\n <\/html>\n """\n return str(html)\n\n# Connect to WLAN\nwlan = network.WLAN(network.STA_IF)\nwlan.active(True)\nwlan.connect(ssid, password)\n\n# Wait for Wi-Fi connection\nconnection_timeout = 10\nwhile connection_timeout > 0:\n if wlan.status() >= 3:\n break\n connection_timeout -= 1\n print('Waiting for Wi-Fi connection...')\n time.sleep(1)\n\n# Check if connection is successful\nif wlan.status() != 3:\n raise RuntimeError('Failed to establish a network connection')\nelse:\n print('Connection successful!')\n network_info = wlan.ifconfig()\n print('IP address:', network_info[0])\n\n# Set up socket and start listening\naddr = socket.getaddrinfo('0.0.0.0', 80)[0][-1]\ns = socket.socket()\ns.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)\ns.bind(addr)\ns.listen()\n\nprint('Listening on', addr)\n\n# Initialize variables\nstate = "OFF"\nrandom_value = 0\n\n# Main loop to listen for connections\nwhile True:\n try:\n conn, addr = s.accept()\n print('Got a connection from', addr)\n \n # Receive and parse the request\n request = conn.recv(1024)\n request = str(request)\n print('Request content = %s' % request)\n\n try:\n request = request.split()[1]\n print('Request:', request)\n except IndexError:\n pass\n \n # Process the request and update variables\n if request == '\/lighton?':\n print("LED on")\n led.value(1)\n state = "ON"\n elif request == '\/lightoff?':\n led.value(0)\n state = 'OFF'\n elif request == '\/value?':\n random_value = random.randint(0, 20)\n\n # Generate HTML response\n response = webpage(random_value, state) \n\n # Send the HTTP response and close the connection\n conn.send('HTTP\/1.0 200 OK\\r\\nContent-type: text\/html\\r\\n\\r\\n')\n conn.send(response)\n conn.close()\n\n except OSError as e:\n conn.close()\n print('Connection closed')\n<\/code><\/pre>\n\t# Wi-Fi credentials\nssid = 'REPLACE_WITH_YOUR_SSID'\npassword = 'REPLACE_WITH_YOUR_PASSWORD'<\/code><\/pre>\n\n\n\nHow does the Code Work?<\/h3>\n\n\n\n
![\"Creating](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/10\/socket-server.png?resize=688%2C900&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Thonny](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/12\/thonny-ide-run-button.png?resize=470%2C114&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Getting](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/12\/Raspberry-Pi-Pico-Web-Server-Get-IP-Address.png?resize=700%2C231&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/12\/Raspberry-Pi-Pico-WebServer-1.png?resize=716%2C471&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/05\/Raspberry-Pi-Pico-Blinking-LED-Off.jpg?ssl=1\")
<\/figure><\/div>![\"Raspberry](\"https:\/\/i2.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/05\/Raspberry-Pi-Pico-Blinking-LED-On.jpg?ssl=1\")
<\/figure><\/div><\/div><\/div><\/div>\n\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/12\/web-server-fetch-value-1.png?resize=741%2C490&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Raspberry](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/12\/Raspberry-Pi-Pico-Basic-Webserver-Smartphone.png?resize=361%2C723&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Save](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/05\/Save-file-to-Raspberry-Pi-Pico.png?resize=214%2C203&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Micropython](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2023\/06\/micropython-main-py-file.png?resize=545%2C327&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n