低代码平台开发串口调试助手

项目介绍

      串口调试助手是一款用于串口通信调试的工具，它可以帮助开发人员发送和接收串口数据，主要用于嵌入式开发、工业控制、物联网设备开发等领域。

主要功能包括：

1. 数据收发：可以实时发送和接收串口数据，并显示在界面上。

2. 数据可视化：支持以十六进制形式显示数据，方便调试。

3. COM口管理：仅支持桌面端使用，轻松管理多个串口设备。

该工具以图形化界面呈现，操作简单，适用于需要进行串口通信测试和调试的场景。

平台支持

• Windows

• macOS

AiFlutter市场链接：串口调试助手

串口调试助手源码下载：源码下载

平台实现步骤

一、注册登录

打开 低代码平台登录网页 ，使用微信快捷登录或者扫描二维码登录。

二、创建项目

1. 点击【新增项目】>【手动添加】，在平台内部创建项目

2. 在跳出的弹窗中输入项目名称、项目描述，建议结合项目功能描述命名，便于检索

3. 输入完成后点击确定

三、页面设计

效果图

实现流程

1. 点击已经创建好的项目进入到操作界面，默认会存在一个HomePage页面，操作界面相关详情可查看教程 操作界面， 在【页面管理】中单击HomePage页面，在右侧的属性编辑器中配置页面描述和功能详情，内容如下

名称	内容
页面描述	整个页面的布局可以是垂直分区的，上半部分是数据接收区，下半部分是数据发送区。
功能详情	1. 在页面初始化时，扫描串口设备，将得到的串口设备列表进行存储并渲染页面 2. 用户在下拉菜单中选择串口设备进行连接 3. 接收数据，连接成功后，会监听数据流并将收到的数据进行存储 4. 发送数据，用户在输入框中输入16进制数据后点击发送即可 5. 实时渲染，一旦有数据过来则进行一次页面构建，保证数据实时刷新 6. 支持设备插拔，设备插拔后依然能够识别到设备并进行连接，不需要重新启动程序

2. 在【页面管理】中单击HomePage页面，在右侧的属性编辑器中添加页面变量

需要定义的变量如下

变量名称	变量类型	是否为数组	默认值	变量描述
serialPort	Var	否		与串口设备通信的封装类对象
data	String	否		发送串口数据的内容
res	Map	是		用来存储串口设备数据的载体
_dropDownValue	String	否	COM1	COM口下拉框选中值
availablePorts	String	是		当前系统可用的COM口列表

操作成功如下

3. 添加页面初始化动作，在右侧的属性编辑器中点击【动作】> 【打开】

在操作流程编辑器中，页面初始化 事件下点击＋号添加事件，再点击＋号添加动作，动作按顺序依次添加如下

（1）动作类型 --【硬件动作】，硬件类型 --【串口】，操作类型 --【拔出监听】，添加customCode1自定义代码块并选择

（2）动作类型 --【自定义代码块】，添加自定义代码块customCode1并选择

customCode1内容如下

void function(){if(Platform.isAndroid){return;}// 桌面串口初始化availablePorts = SerialPort.availablePorts;print("availablePorts==== ${availablePorts}");if (availablePorts.isEmpty) {return;}_dropDownValue = availablePorts[0];setState(() {});
}

操作成功如下

4. 开启顶部导航栏

（1）点击页面编辑窗口右上角的【顶部导航栏】并开启，配置顶部导航栏背景色为 #FF006FFF

（2）从【小部件面板】> 【常用元素】中选择【文本小部件】拖入到顶部导航栏中间位置中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
文本内容	串口调试助手
文本颜色	#FFFFFFFF
文本大小	18

5. 页面内容设计

（1）从【小部件面板】> 【常用元素】中选择【容器小部件】拖入到页面编辑窗口内的上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
宽	无限大
高	700
背景颜色	#00C8C8C8
内边距	10

​​​​（2）从【小部件面板】> 【常用元素】中选择【上下布局小部件】拖入到页面编辑窗口内的【容器小部件】中

（3）从【小部件面板】> 【常用元素】中选择【左右布局小部件】拖入到【上下布局小部件】中

（4）从【小部件面板】> 【表单元素】中选择【下拉菜单小部件】拖入到【左右布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
第一个选择框绑定变量	_dropDownValue
第二个选择框绑定变量	avaliablePorts

（5）从【小部件面板】> 【基本元素】中选择【条件生成器小部件】拖入到【左右布局小部件】中，然后在右侧的属性编辑器中选择变量serialPort

（6）当条件 serialPort == null，勾选展示此界面，从【小部件面板】> 【常用元素】中选择【按钮小部件】拖入到【条件生成小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
宽	50
高	40
背景颜色	#FF006FFF

从【小部件面板】> 【常用元素】中选择【文本小部件】拖入到【按钮小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
文本内容	连接
字体颜色	#FFFFFFFF

按钮动作面板中打开动作流程编辑器，单击 事件下点击＋号添加事件，再点击＋号添加动作，动作按顺序依次添加如下

1. 动作类型 --【自定义代码块】，添加customCode3自定义代码块并选择

2. 动作类型 --【硬件动作】，硬件类型 --【串口】，操作类型 --【接收数据】，添加customCode2自定义代码块并选择

customCode2内容如下

void function(param){// 数据接收 res.add({"type":  "接收","data":   param.join(),"time": DateFormat("HH:mm:ss").format(DateTime.now()),  });          setState(() {});
}

customCode3内容如下

void function(){try {serialPort?.close();serialPort = SerialPort(_dropDownValue);if (serialPort == null) {print("打开串口失败");EasyLoading.showError("打开串口失败");        return;}SerialPortConfig config = serialPort?.config ?? SerialPortConfig();config.baudRate = 115200; serialPort?.openReadWrite();serialPort?.config = config;print("打开串口成功");} catch (e) {print("打开串口失败");serialPort?.close();serialPort = null;EasyLoading.showError("检测到串口故障，错误：UnsupportedOperationError ${e.toString().substring(e.toString().length - 10)}");}setState(() {});
}

（7）当条件 serialPort != null，勾选展示此界面，从【小部件面板】-> 【常用元素】中选择【按钮小部件】拖入到左右布局小部件中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
宽	50
高	40
背景颜色	#FFF44336

 从【小部件面板】-> 【常用元素】中选择【文本小部件】拖入到【按钮小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
文本内容	断开
字体颜色	#FFFFFFFF

按钮动作面板中打开动作流程编辑器，单击 事件下点击＋号添加事件，再点击＋号添加动作，信息如下

• 动作类型 --【自定义代码块】，添加customCode4自定义代码块并选择

customCode4代码内容如下

void function(){serialPort?.close();serialPort = null;setState(() {});
}

操作成功如下

（8）再次从【小部件面板】> 【常用元素】中选择【容器小部件】拖入到页面编辑窗口内的【上下布局】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
宽	无限大
高	40
背景颜色	#00C8C8C8

（9）从【小部件面板】> 【常用元素】中选择【文本小部件】拖入到【容器小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
文本内容	数据收发内容

（10）从【小部件面板】> 【基本元素】中选择【容器小部件】拖入到页面编辑窗口内的【上下布局】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
宽	无限大
高	300
背景颜色	#00C8C8C8

（11）从【小部件面板】> 【布局元素】中选择【列表布局小部件】拖入到【容器小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：​​

属性名称	属性内容
绑定变量	res
宽	无限大
高	无限大

（12）从【小部件面板】> 【常用元素】中选择【文本小部件】拖入到【列表布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
文本内容	${res[index]['time']}${res[index]['type']}: ${res[index]['data']}
最大行数	3

操作成功如下

（13）从【小部件面板】> 【常用元素】中选择【容器小部件】拖入到【上下布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
宽	无限大
高	40
背景颜色	#00C8C8C8

 从【小部件面板】> 【常用元素】中选择【文本小部件】拖入到【容器小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
文本内容	发送数据内容

（14）从【小部件面板】> 【常用元素】中选择【按钮小部件】拖入到【上下布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
宽	200
高	40
背景颜色	#FF006FFF
圆角	10

打开动作流程编辑器，单击 事件下点击＋号添加事件，再点击＋号添加动作，信息如下

• 动作类型 --【自定义代码块】，添加customCode5自定义代码块并选择

customCode5内容如下

void function(){if (data.isEmpty) {EasyLoading.showError("请输入发送数据内容");return;}sendDataSerial(data);res.add({"data": data,"time": DateFormat("HH:mm:ss").format(DateTime.now()),"type": "发送",});setState(() {});
}

（15）从【小部件面板】> 【常用元素】中选择【文本小部件】拖入到【按钮小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

属性名称	属性内容
文本内容	发送数据
字体颜色	#FFFFFFFF

操作成功如下