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; /* 垂直居中对齐 */
}
.distance-btn {
font-size: 40px;
padding: 10px 20px;
margin: 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.distance-btn:hover {
background-color: #45a049;
}
.button {
background-color: #f87c01;
border: none;
border-radius: 4px;
color: black;
font-size: 24px;
}
</style>
</html>
<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>
<div class="info"><div>📏 Distance</div><div class="sensor-value"><span id="distanceValue"> --</span><span class="unit"> cm</span></div></div>
<button class="button" onclick="getDistance()">Get Distance</button>
<canvas id="myChart"></canvas>
</body>
<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));
}
function getDistance() {
fetch('/data')
.then(response => {
if (!response.ok) throw new Error('Network response was not ok');
return response.json();
})
.then(data => {
// 假设服务器返回的数据中包含 distance 字段
const distance = data.distance || data.dist || 0;
// 更新距离显示
document.getElementById('distanceValue').textContent = distance.toFixed(1);
})
.catch(error => {
console.error('Error fetching distance data:', error);
document.getElementById('distanceValue').textContent = 'Error';
});
}
setInterval(updateData, 1000); // Update every 1 second
updateData(); // Initial call
</script>
<!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; /* 垂直居中对齐 */
}
.distance-btn {
font-size: 40px;
padding: 10px 20px;
margin: 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.distance-btn:hover {
background-color: #45a049;
}
.button {
background-color: #f87c01;
border: none;
border-radius: 4px;
color: black;
font-size: 24px;
}
</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>
<div class="info"><div>📏 Distance</div><div class="sensor-value"><span id="distanceValue"> --</span><span class="unit"> cm</span></div></div>
<button class="button" onclick="getDistance()">Get Distance</button>
<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));
}
function getDistance() {
fetch('/data')
.then(response => {
if (!response.ok) throw new Error('Network response was not ok');
return response.json();
})
.then(data => {
// 假设服务器返回的数据中包含 distance 字段
const distance = data.distance || data.dist || 0;
// 更新距离显示
document.getElementById('distanceValue').textContent = distance.toFixed(1);
})
.catch(error => {
console.error('Error fetching distance data:', error);
document.getElementById('distanceValue').textContent = '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的工具类
dht_sensor = dht.DHT11(Pin(5))
trig=Pin(14,Pin.OUT)
echo=Pin(12,Pin.IN)
global distance
distance=0
def connect_wifi():
wifi=network.WLAN(network.STA_IF)
wifi.active(True)
sleep(1)
while True:
sleep(2)
if wifi.ifconfig()[0]=='0.0.0.0':
wifi.connect('422','micro422')
else:
print('wifi连接成功，IP',wifi.ifconfig()[0])
break
def read_dht11():
dht_sensor.measure() # 测量温湿度
return dht_sensor.temperature(), dht_sensor.humidity() # 返回温度和湿度值
def measure_sro4(trig,echo):
trig.value(0)
echo.value(0)
#触发超声波模块测距
trig.value(1)
time.sleep_us(10)#触发信号 >= 10us
trig.value(0)
#超声波信号发出后，echo为低信号，不断更新微秒计数器t1
while(echo.value() == 0):
t1 = time.ticks_us()
#检测回响信号，echo为高时，超声波信号到达，设置微秒计数器t2
while(echo.value() == 1):
t2 = time.ticks_us()
#计算两次调用 ticks_ms(), ticks_us(), 或 ticks_cpu()之间的时间，得到当前时间
t3 = time.ticks_diff(t2,t1)/1000000 #计算出时间差，再换算为秒
# ticks_diff获取的时间差就是测距总时间，再乘声音的传播速度340米/秒，除2（来回）就是距离。
distance=t3*340/2
#转换为厘米
result=distance*100
# print('sro4: ',result)
return result
app = Microdot()
@app.route('/')
def index(request):
return send_file('new_index.html')
@app.route('/data')
def get_data(request):
temp, humi = read_dht11()
distance=measure_sro4(trig,echo)
return {'temperature': temp, 'humidity': humi,'distance':distance}
def main():
connect_wifi()
app.run(host='0.0.0.0', port=5000)
if __name__=="__main__":
main()