1. 背景

在完成 FRDM-MCXW71 的 DHT11 温湿度采集和 BLE 广播功能后，需要一个可视化界面来实时查看数据。虽然可以使用手机 APP（如 nRF Connect）查看 BLE 数据，但每次都需要手动订阅特征值，操作繁琐且不够直观。

因此开发了一个基于 Web Bluetooth API 的网页应用，可以直接在浏览器中连接 BLE 设备，实时显示温湿度数据和历史曲线。

2. 技术方案

2.1 Web Bluetooth API

Web Bluetooth API 是浏览器原生提供的蓝牙通信接口，无需安装插件或 APP，可以直接在网页中扫描、连接 BLE 设备并读取数据。

浏览器支持情况：

· Chrome 56+

· Edge 79+

· Opera 43+

· 需要 HTTPS 或 localhost 环境

2.2 BLE 数据格式

FRDM-MCXW71 的 BLE 服务基于 Health Thermometer Service (UUID: 0x1809)：

· 温度特征：Temperature Measurement (UUID: 0x2A1C)

· 格式：IEEE 11073 浮点数（8 位指数 + 24 位尾数）

· 属性：indicate

· 单位：摄氏度

· 湿度特征：Humidity (UUID: 0x2A6F)

· 格式：16 位无符号整数

· 属性：read + notify

· 单位：0.01 %RH

两个特征都在同一个 GATT Service 下，网页需要从同一个服务中获取。

3. 实现过程

3.1 文件结构

web/
├── index.html    # 主页面
├── server.py     # 本地 HTTP 服务器
└── debug.html    # BLE 调试工具

3.2 核心代码

BLE 连接

// 连接设备
async function connectDevice() {
    const device = await navigator.bluetooth.requestDevice({
        filters: [
            { name: 'FRDM-MCXW71-TH' }
        ],
        optionalServices: [
            '00001809-0000-1000-8000-00805f9b34fb'  // HTS
        ]
    });
    
    const server = await device.gatt.connect();
    const service = await server.getPrimaryService('00001809-0000-1000-8000-00805f9b34fb');
    
    // 订阅温度和湿度通知
    const tempChar = await service.getCharacteristic('00002a1c-0000-1000-8000-00805f9b34fb');
    await tempChar.startNotifications();
    tempChar.addEventListener('characteristicvaluechanged', onTemperature);
    
    const humChar = await service.getCharacteristic('00002a6f-0000-1000-8000-00805f9b34fb');
    await humChar.startNotifications();
    humChar.addEventListener('characteristicvaluechanged', onHumidity);
}

温度数据解析

function parseTemperatureData(data) {
    const view = new DataView(data.buffer);
    const tempRaw = view.getUint32(1, true);  // little-endian
    
    // IEEE 11073 浮点数格式
    let exponent = (tempRaw >> 24) & 0xFF;
    let mantissa = tempRaw & 0x00FFFFFF;
    
    if (exponent > 127) exponent -= 256;
    if (mantissa > 0x7FFFFF) mantissa -= 0x1000000;
    
    return mantissa * Math.pow(10, exponent);
}

湿度数据解析

function parseHumidityData(data) {
    const view = new DataView(data.buffer);
    const humidityRaw = view.getUint16(0, true);  // little-endian
    return humidityRaw / 100.0;  // 单位 0.01 %RH
}

3.3 UI 设计

页面布局包含：

· 状态栏：显示连接状态和设备名称

· 数据卡片：实时显示温度和湿度

· 曲线图表：使用 Chart.js 绘制历史数据

· 历史记录：可展开的下拉列表

· 系统日志：可展开的日志区域

4. 使用方法

4.1 启动本地服务器

cd /home/actdxh/zephyr-frdm-mcxw71-review/web
python3 server.py

服务器启动后访问：http://localhost:8080

4.2 连接设备

1. 确保 FRDM-MCXW71 已烧录 BLE 应用（`my_app`）

2. 点击"连接设备"或"扫描所有"

3. 在弹出的设备列表中选择 `FRDM-MCXW71-TH`

4. 连接成功后，温度和湿度数据将实时显示

4.3 功能说明

· 实时数据：温度和湿度卡片会实时更新

· 数据曲线：最近 30 个数据点的折线图

· 历史记录：点击展开查看所有历史数据

· 系统日志：点击展开查看连接和数据更新日志

5. 调试工具

如果遇到连接问题，可以使用调试页面：http://localhost:8080/debug.html

调试功能：

· 检查浏览器蓝牙支持

· 扫描所有 BLE 设备

· 查看设备的服务和特征列表

· 详细的错误日志

6. 注意事项

6.1 浏览器兼容性

Web Bluetooth API 目前只支持 Chromium 内核浏览器（Chrome、Edge、Opera），Firefox 和 Safari 暂不支持。

6.2 安全要求

由于 Web Bluetooth API 涉及硬件访问，浏览器要求：

· HTTPS 环境（生产环境）

· 或 localhost（本地开发）

6.3 设备广播

BLE 设备需要正在广播才能被扫描到：

· 普通版 `my_app`（FRDM-MCXW71-TH）：持续广播，推荐使用

· 低功耗版 `my_app_low_power`（FRDM-MCXW71-LP）：每 30 秒广播 5 秒，窗口较短

6.4 连接稳定性

BLE 连接可能因信号强度、距离等因素中断。网页会自动监听断开事件并更新状态，用户可以重新连接。

7. 扩展功能

后续可以考虑的扩展：

· 数据导出（CSV/JSON）

· 多设备同时监测

· 数据阈值报警

· 历史数据持久化（localStorage）

· 响应式移动端优化

8. 参考资料

· [Web Bluetooth API 规范](https://webbluetoothcg.github.io/web-bluetooth/)

· [Web Bluetooth 示例](https://googlechrome.github.io/samples/web-bluetooth/)

· [Chart.js 文档](https://www.chartjs.org/docs/)

· [Bluetooth GATT 规范](https://www.bluetooth.com/specifications/gatt/)