---
title: "RaspberryPi Pico Web Server w W5100S(W5500) – NeoPixel LED"
url: "https://maker.wiznet.io/WIZnet/projects/raspberrypi-pico-web-server-w-w5100s-w5500-%E2%80%93-neopixel-led/"
markdown_url: "https://maker.wiznet.io/WIZnet/projects/raspberrypi-pico-web-server-w-w5100s-w5500-%E2%80%93-neopixel-led/md"
type: "UCC: User Created Content"
author: "Bongjun Hur"
author_url: "https://www.hackster.io/bjnhur/raspberrypi-pico-web-server-w-w5100s-w5500-neopixel-led-bedea5#toc-3--hardware-connection-2"
editor: "WIZnet"
editor_url: "https://maker.wiznet.io/"
original_author: "Bongjun Hur"
original_url: "https://www.hackster.io/bjnhur/raspberrypi-pico-web-server-w-w5100s-w5500-neopixel-led-bedea5#toc-3--hardware-connection-2"
published: "2023-02-17"
language: "en"
likes: 5
views: 460
comments: 0
source: "WIZnet Makers (https://maker.wiznet.io/)"
---

# RaspberryPi Pico Web Server w W5100S(W5500) – NeoPixel LED

> In the RaspberryPi Pico SIMPLE web server RGB LED control project we will use an WIZnet W5100S, WIZ810Sio and we will create a small http we

Original author: Bongjun Hur (source: https://www.hackster.io/bjnhur/raspberrypi-pico-web-server-w-w5100s-w5500-neopixel-led-bedea5#toc-3--hardware-connection-2)

## Components

- Software: **Wiznet India Pvt Ltd WIZ820io**

## Article

**DETAILS**

### **1. Overview**

In the **RaspberryPi Pico SIMPLE web server** RGB LED control project we will use an **WIZnet W5100S, WIZ810Sio** and we will create a small http web server on our Ethernet LAN which will control an RGB LED with an interactive web interface.

### **2. Prepare CircuitPython and network library**

Before this, you should learn this project.

<https://www.hackster.io/bjnhur/how-to-add-w5100s-ethernet-to-raspberry-pi-pico-iot-demo-fed492>

### **3. Hardware connection**

Refer to below connection.

![](https://hackster.imgix.net/uploads/attachments/1337669/pic168_qqp4o32qnf_7LVotT4YTf.png?auto=compress%2Cformat&w=740&h=555&fit=max)

### **4. Get the code**

This code is based on Adafruit wsgi test code. <https://github.com/adafruit/Adafruit_CircuitPython_Wiznet5k/blob/main/examples/wiznet5k_wsgiserver_test.py>

1. **Copy and Paste all /lib directory** into your RaspberryPi drive from <https://github.com/bjnhur/pico-W5500>

![library copy](https://hackster.imgix.net/uploads/attachments/1337677/image_aGQbl4F83A.png?auto=compress%2Cformat&w=740&h=555&fit=max)

library copy

2. **Copy the code** from <https://github.com/bjnhur/pico-W5500/blob/main/Pico_W5100S_wsgiserver_test.py> or below code section

3. **Paste code into code.py** on your RaspberryPi.

4. **Save it! DoneIn** the code, if you want to change endpoint url address or add your endpoint, you can modify the below code on simple webserver. just change “YOUR_ENDPOINT” and “YOUR_ENDPOINT_FUNC” string.

```plaintext
@web_app.route("YOURURL_ENDPOINT")
def YOURURL_ENDPOINT_FUNC(request):  # pylint: disable=unused-argument
    print("LED handler")
    return ("200 OK", [], ["hello endpoint"])
```

The example is: Get the &lt;color> code value from url and change the Neopixel LED color.

```plaintext
@web_app.route("/led/<color>")
def led_on(request, color):  # pylint: disable=unused-argument
    print("LED handler")
    color_value = int(color, 16)
    pixels.fill(color_value)
    pixels.show()
    html_string_led = html_string.replace("#000000", "#"+color)
    return ("200 OK", [], [html_string_led])
```

If you change the page view, you just **change the “html_string” variable** on the code.

```plaintext
html_string = '''
<!DOCTYPE html>
<html lang="en">
<head>
...
<p>
<a href="/code">View code.py</a>
</p>
...
</body>
</html>
'''
```

### **5. Test**

If the code is ok, you can see the below log from REPL of Pico board. (For REPL open, please refer this page [“How to add W5500 Ethernet to Raspberry Pi Pico (Python) – 1” – 6. REPL, Open serial terminal for printf()](https://www.hackster.io/bjnhur/how-to-add-w5500-ethernet-to-raspberry-pi-pico-python-1-c7340c#toc-6--repl--open-serial-terminal-for-printf--5))

![](https://hackster.imgix.net/uploads/attachments/1337670/image_fn5DoFfHX5.png?auto=compress%2Cformat&w=740&h=555&fit=max)

On your PC, open the browser (Recommend Chrome).

Type your board IP on the browser. I got “192.168.0.18” from my DHCP server.

![Pico web server page](https://hackster.imgix.net/uploads/attachments/1337684/image_3ShpqSdDxL.png?auto=compress%2Cformat&w=740&h=555&fit=max)

Pico web server page

Let’s change the LED color. click “Color Selector” color box, then you can see color picker as below. Select color as you want.

![RGB color picker](https://hackster.imgix.net/uploads/attachments/1337672/image_xtaKaXOjSC.png?auto=compress%2Cformat&w=740&h=555&fit=max)

RGB color picker

Then, click “Change Color” link.

![change color](https://hackster.imgix.net/uploads/attachments/1337674/image_9Aufx4FiiX.png?auto=compress%2Cformat&w=740&h=555&fit=max)

change color

See your LED~~~

![Neopixel LED control via webpage](https://hackster.imgix.net/uploads/attachments/1337675/image_kPEjp5QdKY.png?auto=compress%2Cformat&w=740&h=555&fit=max)

Neopixel LED control via webpage

### **6. Another functions**

There are 2 more functions in simple webserver.

1. File read in RaspberryPi Pico USB drive.

**Click “View code.py”**, then you can see “code.py” in your RaspberryPi Pico board.

![Read File in your Pico board](https://hackster.imgix.net/uploads/attachments/1337681/image_QDqXyqGVG7.png?auto=compress%2Cformat&w=740&h=555&fit=max)

Read File in your Pico board

2. Getting JSON data from other web service.

Click “currentprice/USD.json” link, then you can see JSON data from <http://api.coindesk.com/v1/bpi/currentprice/USD.json>

![Getting JSON data from other webserver](https://hackster.imgix.net/uploads/attachments/1337682/image_aTF6I5RkiV.png?auto=compress%2Cformat&w=740&h=555&fit=max)

Getting JSON data from other webserver

Done. Enjoy the demo code~~~ ![🙂](https://s.w.org/images/core/emoji/11.2.0/svg/1f642.svg)

**DOCUMENTS**

Code

python[![](https://oldmaker.wiznet.io/wp-content/themes/onepress/assets/images/icon-link.png)](https://github.com/bjnhur/pico-W5500)

python

Schematics

RaspberryPi Pico + WIZ810Sio + Neopixel Strip

---

Source: https://maker.wiznet.io/WIZnet/projects/raspberrypi-pico-web-server-w-w5100s-w5500-%E2%80%93-neopixel-led/