1、简介
正是新年喜庆日，借此使用PICOW实现Web网站功能，将网页版烟花部署到PICOW Web服务器，此时局域网内所有设备均可访问到该网页版烟花
2、操作步骤
下载Python固件
https://www.raspberrypi.com/documentation/microcontrollers/micropython.html
长按PICOW开发板的boot按键不动将PICOW通过USB数据线连接至PC
将图中uf2文件拷贝至左边磁盘
3、Thonny编程
通过电脑通过CDC串口连接到PICOW
Python源码
# Filename: main.py
# Raspberry Pi Pico W
# 导入Pico W MicroPython模块
import micropython
micropython.alloc_emergency_exception_buf(10000)
import rp2 # 导入rp2模块，该模块包含专门用于RP2040的函数和类
import network # 导入network模块，用于连接WiFi
import ubinascii # 导入ubinascii模块，用于将MAC地址转换为十六进制字符串
import machine # 导入machine模块，用于GPIO控制
import urequests as requests # 导入urequests模块，用于HTTP请求
import time # 导入time模块，用于延时
import socket # # 导入socket模块，用于建立套接字
# 设置国家/地区代码以避免发生可能的错误
# CN/US/DE/DK/GB/JP(国家或地区代码：中国/美国/德国/丹麦/英国/日本)
rp2.country('CN') # 这里设置Pico W的国家/地区代码为中国
wlan = network.WLAN(network.STA_IF) # 创建WLAN连接对象
wlan.active(True) # 激活WLAN接口
# 查看Pico W开发板无线WiFi的MAC地址
# 获取MAC地址，并将其转换为十六进制字符串
mac = ubinascii.hexlify(network.WLAN().config('mac'),':').decode()
print('Pico W MAC地址=' + mac) # 显示Pico W开发板十六进制MAC地址
ssid = 'WiFi名称' # 设置WiFi名称 (ssid: service set identifier)
psw = 'WiFi密码' # 设置WiFi密码
wlan.connect(ssid, psw) # 连接到WiFi网络
timeout = 10 # 设置最长等待连接时间为10秒
while timeout > 0:
if wlan.status() < 0 or wlan.status() >= 3: # 如果WiFi连接成功或者失败
break # 跳出循环
timeout -= 1
print('等待连接!')
time.sleep(1) # 延时1秒
# 定义Pico W板载LED闪亮函数
def onboard_led_blink(blink_numbers):
onboard_led = machine.Pin('LED', machine.Pin.OUT) # 创建GPIO控制对象
for i in range(blink_numbers):
onboard_led.value(1) # 点亮LED
# onboard_led.on() # 另一种点亮LED的方法
time.sleep(0.5)
onboard_led.value(0) # 熄灭LED
# onboard_led.off() # 另一种熄灭LED的方法
time.sleep(0.5)
wlan_status = wlan.status() # 获取当前WiFi连接状态
onboard_led_blink(wlan_status) # 根据WiFi连接状态控制LED
# 处理连接错误
if wlan_status != 3: # 如果WiFi连接失败
raise RuntimeError('WiFi连接失败!') # 抛出异常
else:
print('WiFi已连接...')
status = wlan.ifconfig() # 获取WiFi接口配置信息
print('IP地址=' + status[0]) # 输出IP地址
# 定义加载HTML页面函数
def get_html(html_name):
with open(html_name, 'r') as file: # 打开HTML文件
html = file.read() # 读取HTML内容
return html
# 打开HTTP Web服务器套接字socket
addr = socket.getaddrinfo('0.0.0.0', 80)[0][-1] # 获取IP地址和端口号
s = socket.socket() # 创建socket对象
s.bind(addr) # 绑定socket到IP地址和端口号
# 开始监听端口号，最多只允许1个客户端连接
s.listen(1)
print('正在监听', addr)
onboard_led = machine.Pin('LED', machine.Pin.OUT)
# 进入循环，监听连接
while True:
try:
# 接受客户端连接，获取连接和地址
cl, addr = s.accept()
print('客户机连接来自', addr)
# 接收客户端请求消息
# 获取HTML文件内容
response = get_html('index.html')
# 发送HTTP响应头
cl.send('HTTP/1.0 200 OK\r\nContent-type: text/html\r\n\r\n')
# 发送HTML文件内容
cl.send(response)
# 关闭客户端套接字
cl.close()
# 若发生OSError错误，则关闭客户端套接字并输出相关信息
except OSError as e:
cl.close()
print('关闭连接')网页HTML源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Realistic Fireworks on ESP32-C3</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
}
.particle {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
opacity: 0.8;
animation: fadeOut 1.5s ease-out forwards;
}
@keyframes fadeOut {
0% {
opacity: 0.8;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<script>
// 烟花粒子类
class Particle {
constructor(x, y, color, angle, speed) {
this.x = x;
this.y = y;
this.color = color;
this.angle = angle;
this.speed = speed;
this.gravity = 0.1; // 重力
this.element = document.createElement("div");
this.element.classList.add("particle");
this.element.style.backgroundColor = this.color;
this.element.style.left = `${this.x}px`;
this.element.style.top = `${this.y}px`;
document.body.appendChild(this.element);
}
update() {
this.speed -= this.gravity; // 模拟重力
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed;
this.element.style.left = `${this.x}px`;
this.element.style.top = `${this.y}px`;
// 如果粒子超出屏幕或速度过小，移除它
if (this.y > window.innerHeight || this.speed < 0) {
this.element.remove();
return false;
}
return true;
}
}
// 烟花类
class Firework {
constructor(x, y) {
this.x = x;
this.y = y;
this.color = this.getRandomColor();
this.particles = [];
this.createParticles();
}
// 生成随机颜色
getRandomColor() {
const colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF"];
return colors[Math.floor(Math.random() * colors.length)];
}
// 创建粒子
createParticles() {
const numParticles = 50; // 粒子数量
for (let i = 0; i < numParticles; i++) {
const angle = (Math.PI * 2) * (i / numParticles); // 均匀分布的角度
const speed = Math.random() * 5 + 2; // 随机速度
this.particles.push(new Particle(this.x, this.y, this.color, angle, speed));
}
}
// 更新烟花状态
update() {
this.particles = this.particles.filter(particle => particle.update());
}
}
// 烟花管理器
const fireworks = [];
// 生成烟花
function createFirework() {
const x = Math.random() * window.innerWidth;
const y = Math.random() * (window.innerHeight / 2); // 烟花在屏幕上半部分生成
fireworks.push(new Firework(x, y));
}
// 更新所有烟花
function updateFireworks() {
fireworks.forEach((firework, index) => {
firework.update();
if (firework.particles.length === 0) {
fireworks.splice(index, 1); // 移除已完成的烟花
}
});
}
// 定时生成烟花
setInterval(createFirework, 1000);
// 动画循环
function animate() {
updateFireworks();
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>将index.html保存在PICOW中
4、运行效果
等待客户端连接
使用电脑浏览器访问192.168.43.143地址，可以看到如下烟花效果
我要赚赏金
STM32
MCU
通讯及无线技术
物联网技术
电子DIY
板卡试用
基础知识
软件与操作系统
我爱生活
小e食堂
