HTML页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ESP DHT Server</title>
<script src="<https://cdn.jsdelivr.net/npm/chart.js>"></script>
<style>
body { text-align: center; font-family: Arial, sans-serif; }
h1 { font-size: 40px; margin: 20px; }
canvas { min-width: 1000px; margin: 0 auto; }
.info {
font-size: 24px;
margin: 20px;
display: inline-block; /* 让元素并排 */
vertical-align: middle; /* 垂直居中对齐 */
}
</style>
</head>
<body>
<h1>ESP DHT Server</h1>
<div class="info"><span id="temp">🌡️ Temperature <span id="tempValue">0.0</span> °C</span></div>
<div class="info"><span id="humi">💧 Humidity <span id="humiValue">0.0</span> %</span></div>
<canvas id="myChart"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Temperature (°C)',
data: [],
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
fill: true,
tension: 0.1
}, {
label: 'Humidity (%)',
data: [],
borderColor: 'rgb(54, 162, 235)',
backgroundColor: 'rgba(54, 162, 235, 0.2)',
fill: true,
tension: 0.1
}]
},
options: {
scales: {
y: {
beginAtZero: false,
min: 10,
max: 100
}
},
animation: {
duration: 0 // 禁用动画
}
}
});
function updateData() {
fetch('/data')
.then(response => {
if (!response.ok) throw new Error('Network response was not ok');
return response.json();
})
.then(data => {
const temp = data.temperature;
const humi = data.humidity;
const time = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
// 更新文本显示
document.getElementById('tempValue').textContent = temp;
document.getElementById('humiValue').textContent = humi;
// 添加新数据
chart.data.labels.push(time);
chart.data.datasets[0].data.push(temp);
chart.data.datasets[1].data.push(humi);
// 限制数据点数量为8个
if (chart.data.labels.length > 8) {
chart.data.labels.shift();
chart.data.datasets[0].data.shift();
chart.data.datasets[1].data.shift();
}
// 确保更新
chart.update();
})
.catch(error => console.error('Error fetching data:', error));
}
setInterval(updateData, 1000); // Update every 1 second
updateData(); // Initial call
</script>
</body>
</html>
开发板代码
from microdot import Microdot,send_file
from machine import Pin
import time
import dht
from mp_connect_wifi import Connect_wifi #导入连接WiFi的工具类
def read_dht11():
dht_sensor.measure() # 测量温湿度
return dht_sensor.temperature(), dht_sensor.humidity() # 返回温度和湿度值
dht_sensor = dht.DHT11(machine.Pin(5))
app = Microdot()
@app.route('/')
def index(request):
return send_file('index.html')
@app.route('/data')
def get_data(request):
temp, humi = read_dht11()
return {'temperature': temp, 'humidity': humi}
def main():
#wifi_name,wifi_passwd="NETGEAR22","sweethippo462"
wc=Connect_wifi("OpenWrt","ericshui.")
wc.wifi_status()
wc.wifi_disconnect()
wc.do_connect()
app.run(host='0.0.0.0', port=5000)
if __name__=="__main__":
main()
数据可视化页面效果
# 整体流程
# 1. 连接wifi
# 2. 启动网络功能（UDP）
# 3. 接收网络数据
# 4. 处理接收的数据
import socket
from time import sleep
import network
import machine
def do_connect(wifi_name,wifi_passwd):
wlan = network.WLAN(network.STA_IF)
wlan.active(True)
while True:
status=wlan.ifconfig() #查看当前的网络连接信息，未连接成功时，ip、网关、dns皆为0.0.0.0
if status[0]=='0.0.0.0': #若本机IP地址为0.0.0.0表示未连接
print("开始连接WiFi……")
wlan.connect(wifi_name, wifi_passwd) # 连接到指定的WiFi
sleep(10) #延时函数，建立连接需要时间
print("WiFi连接状态",wlan.isconnected()) # 检查WLAN的连接状态
else:
print(f"连接WiFi成功，网络信息{status}")
break #连接成功后结束循环
def start_udp(port):
# 2. 启动网络功能（UDP）
# 2.1. 创建udp套接字
udp_socket = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
# 2.2. 绑定本地信息
udp_socket.bind(("0.0.0.0", port))
return udp_socket
def main():
wifi_name,wifi_passwd="NETGEAR22","sweethippo462"
# 1. 链接wifi
do_connect(wifi_name,wifi_passwd)
# 2. 创建UDP
local_port=2233
udp_socket = start_udp(local_port)
# 3. 创建灯对象
led = machine.Pin(2, machine.Pin.OUT)
# 5. 接收网络数据
while True:
recv_data, sender_info = udp_socket.recvfrom(1024)
try:
print('sender_info',sender_info)
recv_data_str = recv_data.decode("utf-8")
print(recv_data_str)
except Exception as ret:
recv_data_str='error'
print("error:", ret)
# 6. 处理接收的数据
if recv_data_str == "light on":
print("这里是要灯亮的代码...")
led.value(1)
message = "已开灯"
elif recv_data_str == "light off":
print("这里是要灯灭的代码...")
led.value(0)
message = "已关灯"
#给发送者发送消息处理结果
udp_socket.sendto(message.encode('utf-8'),sender_info)
if __name__ == "__main__":
main()