In this program, we will turn a Raspberry Pi Pico W into a server.
We will connect the Pico W to a WiFi network and serve a webpage at the local web address “192.168.86.99”
Using our phone, tablet, or Computer we can access this webpage by typing the 192.168.86.99 into our choice of web browser.
The Pico W will show the following webpage. It’s only a rounded switch. When the switch is On it will turn on the onboard LED. When the switch is Off it will turn off the onboard Pico W LED.
Please remember that we need a special library for this program. It is called, Microdot.py. You can download the microdot.py file from the following link. https://github.com/miguelgrinberg/microdot/blob/main/src/microdot/microdot.py
Just Download the Microdot.py file and send (upload) it to your Pico W. Moreover, send (upload) the HTML file to your Pico W. The file name should be “index.html”
In Python programming, you need to put your WiFi name and Password.
Other than that there is no change necessary. If you face any problems, please disconnect and try to reconnect your Pico W.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Pico W</title>
<style>
button {
color: #ffffff;
background-color: #2d63c8;
font-size: 19px;
border: 1px solid #2d63c8;
padding: 15px 50px;
cursor: pointer
}
button:hover {
color: #2d63c8;
background-color: #ffffff;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<!-- Rounded switch -->
<label class="switch">
<input type="checkbox" id = "checkbox1" onclick="checkbox1()">
<span class="slider round"></span>
</label>
<script>
function led1On(){
fetch('/1_on')
}
function led1Off(){
fetch('/1_off')
}
function checkbox1(){
/* Read the status of the Checkbox.
If it is On, set the light.
If it is Off, turn of the light.
*/
var isChecked = document.getElementById("checkbox1").checked;
if(isChecked==true){
fetch('/1_on')
}else{
fetch('/1_off')
}
}
</script>
</body>
</html>
main.py file
import network
from time import sleep
import machine
from machine import Pin
from microdot import Microdot, send_file
pin = Pin("LED", Pin.OUT)
ssid = 'Your WiFi Name'
password = 'Your WiFi Password'
def connect():
#Connect to WLAN
wlan = network.WLAN(network.STA_IF)
wlan.active(True)
wlan.ifconfig(('192.168.86.99', '255.255.255.0', '192.168.86.1', '192.168.86.1'))
wlan.connect(ssid, password)
while wlan.isconnected() == False:
print('Waiting for connection...')
sleep(1)
print(wlan.ifconfig())
try:
connect()
except KeyboardInterrupt:
machine.reset()
app = Microdot()
@app.route('/')
async def index(request):
return send_file('index.html')
@app.route('/1_on')
async def on(request):
pin.on()
print('Led On')
@app.route('/1_off')
async def off(request):
pin.off()
print('LED Off')
app.run(port=80)