第十二次课-传感器与MicroDot数据交互进阶 (1)

microdot网页图表查看温湿度信息

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）

<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>

开发板完整代码

数据可视化页面效果