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

<aside> 📈

改建定位：保留 Chart.js、/data、温湿度曲线、距离按钮和最近8个数据点，完成载荷监控仪表盘。

</aside>

教案首页

课次：第12次课；学时：4学时。
原有内容：HTML/CSS、Chart.js、fetch、定时更新、温湿度文字、距离显示和MicroDot完整程序。
教学重点：多传感器JSON、图表更新、采样频率和异常处理。
课堂产出：监控仪表盘、测试报告和答辩材料。

教案副页

整合任务

保留原有每秒请求、最近8个数据点和 Chart.js 折线图；将 /data 统一为 temperature、humidity、distance、status、更新时间。让学生比较1秒、2秒和5秒采样；温度湿度分开处理坐标，距离单独显示。修复距离字段不一致、网络失败和图表数据持续增长问题。

终结评价

接口20%，交互与可视化25%，数据分析20%，异常15%，场景说明10%，答辩10%。

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>