# serial-logger-and-plotter **Repository Path**: octmisc/serial-logger-and-plotter ## Basic Information - **Project Name**: serial-logger-and-plotter - **Description**: web serial tools - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-03-26 - **Last Updated**: 2022-10-13 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 使用 Web Serial API 在浏览器上实现基于 WEB 的串口通信 > 目前串口调试助手很难提供灵活的数据可视化功能. 有时对于感兴趣信号的表示不够直观. 使用 HTML + JavaScript 语言制作了一个网页 WEB 应用, 在浏览器上记录和展示传感器通过串口上传的数据, 并与传感器简单交互. 其中用到了 Web Serial API 实现串口通信, 使用 chart.js 绘制信号. ![demo](https://img-blog.csdnimg.cn/20210326200921556.gif#pic_center) ## 引言 串口通信简单, 稳定, 有非常多的硬件基于串口通信, 比如一些经过了简单封装的**传感器模块**. 基于STM32微处理器的各种**开发板**也经常采用串口来打印一些感兴趣的**数据**或者**调试日志**. 以传感器为例, 一般我们使用各种各样的串口调试助手与我们的传感器通信, **设置传感器的参数, 并接受传感器量测数据**. 然而, 这些传感器通常具有各式各样的通信协议, 目前串口调试助手很难提供灵活的**数据可视化功能**, 也就是绘图功能. 有时对于感兴趣信号的表示不够直观. 为此, 使用 HTML + JavaScript 语言制作了一个网页 WEB 应用, **在浏览器上记录和展示传感器通过串口上传的数据, 并与传感器简单交互**. 尝试使用2021年Google在其开发者大会推广的 `Web Serial API` [^1] [^2] [^3] [^4] 和流行的图表库 `chart.js` [^5]. 作为一个`HTML`新手, 还是遇到了很多坑的, 所以在这里记录一下. ## Web Serial API 要注意的是, `Web Serial API`比较新, 所以一些比较古老的浏览器(就是IE)可能无法使用, Android 和 iOS 上的浏览器可能也不能使用. 下面的代码也只在基于Chromium内核的Edge浏览器上应用, 新版本的Chrome应该问题不大, 不确定Firefox是不是可以用. ## 总体框架 因为是基于前端的串口通信, 所以所有代码都写在一个HTML文件中. 该文件的``包含了一个**图表**``, 用来展示数据. 还包含了两个按钮: (1) `
Received:
``` ## 调用 Web Serial API 进行串口通信 在框架下, 首先找到`chart.js`绘制折线图的标签``和要打印的数据列表的标签`
`. ```js /*** find the chart and list tag below ***/ var ctx = document.getElementById("myChart").getContext("2d"); var chart = new Chart(ctx, { // The type of chart we want to create type: "line", // The data for our dataset data: { labels: [], datasets: [ { label: "ugpm3", borderColor: "rgb(255, 99, 132)", data: [], fill: false, }, { label: "heat", borderColor: "blue", data: [], fill: false, }, { label: "humidity", borderColor: "green", data: [], fill: false, }, ], }, // Configuration options go here options: { title: { display: true, text: new Date().toLocaleDateString(), }, }, }); const dataList = document.getElementById("received-data-list"); /*** find the chart and list tag above***/ ``` 下面调用`Web Serial API`连接串口设备. 当点击``按钮时, 总体的逻辑是: - 连接串口设备 - 设置串口的波特率 - 获得串口的`reader`和`writer` - 设置定时向串口设备发送指令(依据需要设定), **传感器收到指令后立即上传数据** - 串口开始读数据直到`port.readable`和`keepReading`不全为`true`, 一般情况下`port.readable`为`false`意味着设备断开连接, `keepReading`则在`butEnd`的回调函数中设置为`false` - 在此过程中 * 每接收一帧数据就调用`dealWithData`函数处理数据. - 最后解除`writeInt`并关闭串口. **注意**: 用到了`await`异步函数的语句不能放在`