14. Interface and Application Programming¶
This week I worked on creating a Application to blink an LED on a Pico W. Here you can see my group work.
HTML Server Tutorial¶
Research¶
I knew I wanted to try and create an HTML server for my Application but I had no idea where to start. I asked Bing Ai and it searched the web for me, one of the reasons I like Bing Ai is because it is up to date on its information and websites. Bing Ai found me this tutorial, one thing that was helpful about the turorial was that it explained everyline of code and what it did so it was very helpful in learing what I needed to do.
Trying the Tutorail¶
For the HTML Server to work you need to add your Wi-Fi network name and password to the code. To make sure I could get a good connection I used my friends perosnal hotspot. To make sure my Pico W could connect to his I used a Wi-Fi test code git I got from Adam’s site.
Wi-Fi Test Code
import network
import time
# Initialize Wi-Fi in station mode
wlan = network.WLAN(network.STA_IF)
wlan.active(True)
# Scan for available Wi-Fi networks
print("Scanning for Wi-Fi networks...")
networks = wlan.scan()
# Print the SSIDs of the detected networks
print("Available Wi-Fi networks:")
for network in networks:
ssid = network[0].decode('utf-8')
print(ssid)
# Deactivate Wi-Fi after scanning
wlan.active(False)
After it found my friends hotspot I plugged in the hotspot name and password into the code. The network name is the ssid, and the password is the password. I then opened this code.
# For more details and step by step guide visit: Microcontrollerslab.com
try:
import usocket as socket
except:
import socket
from machine import Pin
import network
import gc
gc.collect()
ssid = 'Enter_Your_SSID'
password = 'Enter_Your_PASSWORD'
station = network.WLAN(network.STA_IF)
station.active(True)
station.connect(ssid, password)
while station.isconnected() == False:
pass
print('Connection successful')
print(station.ifconfig())
led = Pin('LED', Pin.OUT)
led_state = "OFF"
def web_page():
html = """<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<style>
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
.button {
background-color: #ce1b0e;
border: none;
color: white;
padding: 16px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {
background-color: #000000;
}
</style>
</head>
<body>
<h2>Raspberry Pi Pico Web Server</h2>
<p>LED state: <strong>""" + led_state + """</strong></p>
<p>
<i class="fas fa-lightbulb fa-3x" style="color:#c81919;"></i>
<a href=\"led_on\"><button class="button">LED ON</button></a>
</p>
<p>
<i class="far fa-lightbulb fa-3x" style="color:#000000;"></i>
<a href=\"led_off\"><button class="button button1">LED OFF</button></a>
</p>
</body>
</html>"""
return html
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)
while True:
try:
conn, addr = s.accept()
conn.settimeout(3.0)
print('Received HTTP GET connection request from %s' % str(addr))
request = conn.recv(1024)
conn.settimeout(None)
request = str(request)
print('GET Rquest Content = %s' % request)
led_on = request.find('/led_on')
led_off = request.find('/led_off')
if led_on == 6:
print('LED ON -> GPIO25')
led_state = "ON"
led.on()
if led_off == 6:
print('LED OFF -> GPIO25')
led_state = "OFF"
led.off()
response = web_page()
conn.send('HTTP/1.1 200 OK\n')
conn.send('Content-Type: text/html\n')
conn.send('Connection: close\n\n')
conn.sendall(response)
conn.close()
except OSError as e:
conn.close()
print('Connection closed')
When I ran this on my Pico W this is what my serial moniter looked like:
You can see the serial moniter read out a few sets of numbers. You want to take the first set which for we was “172.20.10.5” so in my browser I put “172.20.10.5/led_on” and this is what I got:
The board you see in this video is a simple board I made for networking week. It’s a Pico W connected to Xiao RP2040, the traces connect the RX on the Pico to the TX on the Xiao and the TX on the Pico to the RX on the Xiao, they have a shared ground and the Pico has a Neopixel connected to it.