How to Build Your Own Web Server on Raspberry Pi Pico W and Control LED

by rajivcodelab in Circuits > Raspberry Pi

459 Views, 5 Favorites, 0 Comments

How to Build Your Own Web Server on Raspberry Pi Pico W and Control LED

How to Build Your Own Web Server on Raspberry Pi Pico W using Phew!

🔌 What You'll Learn in this instructible: How to Build Your Own Web Server on Raspberry Pi Pico W and Control LEDs:

➢ How to download Phew Library for MicroPython

➢ Create HTML Page with ON and OFF Button

➢ Connect Raspberry Pi Pico with Wi-Fi

➢ Create a Web Server to Handle Home Routes

➢ Create Routes for Handling LED On and Off

Supplies

PICO W.jpg
  1. Raspberry Pi Pico W
  2. Micro USB Cable

Setting Up Your Raspberry Pi Pico W

First, you need to ensure that your Raspberry Pi Pico W has been flashed with the latest MicroPython firmware and is ready to be programmed, You can follow How To Get Started with Raspberry Pi Pico in 2024 step by step guide.

Installing and Setting Up Phew

  • Open Thonny IDE and Go to Tools ->Manage Packages
  • In the search box type “micropython-phew” and click on Search Micropython-lib and PyPI
  • Select and Click on Install to start installing the Phew library to your Raspberry Pi Pico W
  • Once installed you can notice lib folder would be created on Thonny IDE -> Raspberry Pi Pico W Files


Creating an HTML File for Your Raspberry Pi Pico W Web Server

  • Open a Text Editor: Use any text editor you like, such as Notepad on Windows, TextEdit on Mac, or Gedit on Linux. If you prefer something more geared towards coding, Visual Studio Code or Sublime Text are great options.
  • Create Your HTML: Copy the HTML code provided below and paste it into your new file in the text editor.
<!doctype html>
	<html lang="en">
	    <head>
	        <title>Raspberry Pi Pico Web Server</title>
	        <!-- Required meta tags -->
	        <meta charset="utf-8" />
	        <meta
	            name="viewport"
	            content="width=device-width, initial-scale=1, shrink-to-fit=no"
	        />
	

	        <!-- Bootstrap CSS v5.2.1 -->
	        <link
	            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
	            rel="stylesheet"
	            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
	            crossorigin="anonymous"
	        />
	    </head>
	

	    <body>
	        <header>
	            <nav
	                class="navbar navbar-expand-sm navbar-dark bg-success"
	            >
	                <a class="navbar-brand" href="#">&nbsp; Pi Pico Web Server</a>
	                 
	                
	            </nav>
	            
	        </header>
	        <main class="container">
	            <div class="d-grid gap-3 p-5">
	                <a
	                    href="/on"
	                    class="btn btn-danger"
	                >
	                    LED ON
	            </a>
	                <a
	                    href="/off"
	                    class="btn btn-success"
	                >
	                   LED OFF
	        </a>
	            </div>
	            
	        </main>
	        <footer>
	            <!-- place footer here -->
	        </footer>
	        <!-- Bootstrap JavaScript Libraries -->
	        <script
	            src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
	            integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
	            crossorigin="anonymous"
	        ></script>
	

	        <script
	            src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
	            integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
	            crossorigin="anonymous"
	        ></script>
	    </body>
	</html>
  • Save the Index.html File Your Raspberry Pi Pico W: Transfer or save the index.html file to the same directory as your Python script. How you do this will depend on your setup and how you’re editing and running scripts on your Raspberry Pi Pico W.


Write Code for Creating Web Server and Blink Onboard LED

from phew import server, connect_to_wifi
import machine

ip = connect_to_wifi("SSID","PASSWORD")

print(ip)

page = open("index.html","r")
html= page.read()
page.close()

led = machine.Pin("LED", machine.Pin.OUT)

@server.route("/", methods=["GET"])
def home(request):
    return str(html)

@server.route("/<command>", methods=["GET"])
def command(request, command):
    if command == "on":
        led.on()
    elif command == "off":
        led.off()
    return str(html)

@server.catchall()
def catchall(request):
    return "Page not found", 404

server.run()


This code snippet demonstrates how to use the phew library to create a simple web server on a device like the Raspberry Pi Pico W, connect it to a Wi-Fi network, serve a static HTML page, and control an LED through web requests.

Upload on Pico W and Test

Congratulations! You’ve just built your own web server using a Raspberry Pi Pico W and Phew. This setup is a fantastic starting point for more complex projects, like home automation systems, personal websites, or IoT applications. The possibilities are endless, limited only by your imagination and willingness to experiment.

Support the Creator

bmc_qr.png

If you found this guide helpful, consider buying me a coffee to keep the projects coming!