这个是我使用 Bittly 为一个定位模块制作的上位机面板。

通过浏览器，就可以实时查看 角度、距离以及设备数据，切换面板还可以配置设备参数。

在这里，我会演示如何使用 Bittly，从零开始为一个设备：

• 建立通讯连接
• 解析设备数据
• 构建可视化上位机界面
• 发送设备指令
• 最后发布到服务器，通过浏览器在线运行

接下来我们开始。

一、建立通讯连接

首先我们需要建立设备通讯连接。

我手里的这个模块是串口设备，所以这里选择串口连接。

配置好串口参数后，先保存连接。接着打开连接查看设备输出的数据。

这个模块默认处于 数据模式，所以连接打开之后会持续输出定位数据。

现在看到的就是模块发过来的一串串连续的数据流。

为了更方便分析，我们需要对数据进行 分帧处理。 以保证以保证每次收到的数据都是一个完整的数据帧。

根据文档说明，这里使用 帧头帧尾匹配 的方式进行分帧。 如果每一帧的数据长度是相等的话其实可以简单的用数据长度来进行分帧， 但是我发现如果说我把天线给按住的话，这个模块就会少发一个信号的字节， 所以没有办法使用固定长度的方式。

重新打开连接之后，可以看到数据已经被拆分成了一帧一帧的数据包。

二、解析设备数据

虽然现在已经分帧了，但数据仍然是 原始二进制格式，阅读起来并不直观。

接下来我们需要创建数据解析规则 命名为 “测量”。

先新建一条解析规则

解析方式选择 结构体解析。

然后根据设备文档中的数据结构，把每个字段配置进去，例如：

保存之后重新打开连接。

现在可以看到，原始数据已经被解析成了 结构化数据。

如果数据字段比较多，或者我们只关心其中的某些字段， 我们还可以配置 消息输出模板，只显示关心的数据，比如距离和角度。

这样观察数据会更加清晰。

三、构建上位机界面

接下来我们开始构建控制界面。

切换到 控制面板模块，新建一个面板，并进入编辑模式。

首先从组件列表中拖入 串口连接，并绑定刚才创建的数据模式串口连接。

然后在 收到数据事件 中，把接收到的数据保存到一个变量中。 这里我们另外新建一个变量 “串口数据” 用于保存接收到的串口数据。

接着我们添加一个 日志组件。

日志组件的数据源绑定到 “串口数据” 变量，这样当串口收到数据后会将数据保存到 “串口数据” 这个变量中， 然后日志组件监听到变量值发生变化后，便会将变量中的内容输出出来。

最后我们保存面板，切换到运行模式就可以查看日志组件效果。

四、数据可视化

这个模块最重要的数据就是 角度和距离。

为了更直观展示，我们可以使用 雷达组件 来显示。 我们从组件列表中将雷达组件添加到面板。

这个模块是单点定位，所以雷达组件这里选择 单点模式。

然后需要把解析后的角度和距离数据绑定到雷达组件。 所以这里我们需要创建一个新的变量 “串口解析” 用来接收串口解析后的数据。

通过表达式把数据转换成雷达组件需要的格式。因为解析后的数据是一个对象， 我们可以在通讯连接中看到， 而雷达的数据点需要角度和距离两个属性， 所以我们需要使用表达式来处理一下。

最后设置最大显示距离，比如 200。

现在设备输出的数据就可以实时显示在雷达图中。

为了查看具体数值，我们再添加两个 数值显示组件，分别显示距离和角度。

这样图形和数值就可以同时展示。

五、设备指令控制

除了输出距离和角度数据，这个模块还支持 管理模式，用于配置设备参数，比如：网络 ID 波特率等。

管理模式使用的是 AT 文本指令。

因此我们新建一个 管理模式 的通讯连接，用于发送管理指令。 因为两个模式的分帧处理方式不同， 所以不复用之前的通讯连接。

分帧方式设置为 换行分帧。

接着我们发送进入管理模式， 成功看到 ok。

因为指令比较多，而且需要修改参数， 每次手动修改然后发送很麻烦， 所有我们需要将这些指令保存起来管理。

首先切换到 指令模块，创建指令。

把 AT 指令写入模板，并把需要修改的部分提取为参数。

这样以后只需要修改参数值，就可以快速发送不同指令。

其他指令以此类推， 这里就不再演示了。

指令录入完成后， 接下来我们再做一个 管理面板。

添加按钮，用于进入管理模式、退出管理模式。

再添加一个 数值输入组件，用于修改设备的网络 ID。

确认按钮点击时发送指令，并通过 $value 获取输入框中的数值。

这样就可以在上位机中直接修改设备参数。

六、发布到 Bittly Hub

当上位机开发完成之后，我们还可以把项目发布到 Bittly Hub。

这样其他人不需要安装环境，也可以直接在浏览器中运行这个调试工程。

首先打开 https://hub.bittly.cn，注册并登录账号。

接着回到 Bittly，在菜单中打开 服务器管理，登录刚才的账号。

登录成功后，进入 项目管理 → 发布到服务器。

把 Hub 项目的地址粘贴到这里，然后点击 推送到服务器。

上传完成后，回到 Hub 页面，就可以看到刚才发布的项目。

点击 在线运行，就可以直接在浏览器中打开这个上位机。

如果其他人需要使用这个项目，只需要点击 克隆。

然后在 Bittly 中选择 克隆项目，就可以下载并在本地运行。

结尾

到这里，这个 UWB 模块的上位机就已经搭建完成了。

从设备通讯连接、数据解析、界面构建，到指令控制和项目发布，整个流程都可以在 Bittly 中完成。

项目发布到 Bittly Hub 之后，也可以直接通过浏览器运行这个调试界面，或者分享给其他人使用。