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

news2025/4/25 13:37:27

项目介绍

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

主要功能包括：

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

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

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

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

平台支持

  • Windows

  • macOS

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

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

平台实现步骤

一、注册登录

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

二、创建项目

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

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

3. 输入完成后点击确定

三、页面设计

效果图

实现流程

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

名称内容
页面描述

整个页面的布局可以是垂直分区的，上半部分是数据接收区，下半部分是数据发送区。

功能详情

1. 在页面初始化时，扫描串口设备，将得到的串口设备列表进行存储并渲染页面

2. 用户在下拉菜单中选择串口设备进行连接

3. 接收数据，连接成功后，会监听数据流并将收到的数据进行存储

4. 发送数据，用户在输入框中输入16进制数据后点击发送即可

5. 实时渲染，一旦有数据过来则进行一次页面构建，保证数据实时刷新

6. 支持设备插拔，设备插拔后依然能够识别到设备并进行连接，不需要重新启动程序

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

需要定义的变量如下

变量名称变量类型是否为数组默认值变量描述
serialPortVar否与串口设备通信的封装类对象
dataString否发送串口数据的内容
resMap是用来存储串口设备数据的载体
_dropDownValueString否COM1COM口下拉框选中值
availablePortsString是当前系统可用的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

操作成功如下

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2342461.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

怎么配置一个kubectl客户端访问多个k8s集群

怎么配置一个kubectl客户端访问多个k8s集群

怎么配置一个kubectl客户端访问多个k8s集群 为什么有的客户端用token也访问不了k8s集群，因为有的是把~/.kube/config文件，改为了~/.kube/.config文件，文件设置成隐藏文件了。 按照kubectl的寻找配置的逻辑，kubectl找不到要访问集群…
阅读更多...
12N60-ASEMI无人机专用功率器件12N60

12N60-ASEMI无人机专用功率器件12N60

编辑：LL 12N60-ASEMI无人机专用功率器件12N60 型号：12N60 品牌：ASEMI 封装：TO-220F 最大漏源电流：12A 漏源击穿电压：600V 批号：最新 RDS（ON）Max：0.68…
阅读更多...
长城智驾重复造轮子

长城智驾重复造轮子

左手新能源，右手智驾，这是长城当下最在意的两块业务。 从去年8月首款具备高阶智能驾驶功能SUV全新蓝山上市之后，长城在传播端的重点就是围绕智驾、无图方案打造智驾标签。 先是在广州国际车展上，整个展厅只展出全新蓝山&#xf…
阅读更多...
continue插件实现IDEA接入本地离线部署的deepseek等大模型

continue插件实现IDEA接入本地离线部署的deepseek等大模型

文章目录 前言一、IDEA安装continue二、continue部署本地大模型三、continue聊天窗口使用deepseek R1四、continue批量接入硅基流动的模型API 前言 亲爱的家人们，创作很不容易，若对您有帮助的话，请点赞收藏加关注哦，您的关注是我…
阅读更多...
滚珠螺杆在数控机床中如何降低摩擦系数？

滚珠螺杆在数控机床中如何降低摩擦系数？

对数控机床这样要求加工精度高而且加工精度能保持长期稳定的设备来说是必须的，而且具有较低的传动阻力也同时为更高速的传动打下基础。使用滚珠螺杆，也是数控机床加工效率高的一个重要原因，为了减少数控机床的滚珠螺杆出现摩擦，可…
阅读更多...
【现代深度学习技术】循环神经网络05：循环神经网络的从零开始实现

【现代深度学习技术】循环神经网络05：循环神经网络的从零开始实现

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈PyTorch深度学习 ⌋ ⌋ ⌋ 深度学习 (DL, Deep Learning) 特指基于深层神经网络模型和方法的机器学习。它是在统计机器学习、人工神经网络等算法模型基础上，结合当代大数据和大算力的发展而发展出来的。深度学习最重…
阅读更多...
Python实现技能记录系统

Python实现技能记录系统

Python实现技能记录系统 来自网络，有改进。 技能记录系统界面如下： 具有保存图片和显示功能——允许用户选择图片保存，选择历史记录时若有图片可预览图片。 这个程序的数据保存在数据库skills2.db中，此数据库由用Python 自带的…
阅读更多...
Linux常见指令介绍下（入门级）

Linux常见指令介绍下（入门级）

1. head head就和他的名字一样，是显示一个文件头部的内容（会自动排序），默认是打印前10行。 语法：head [参数] [文件] 选项： -n [x] 显示前x行。 2. tail tail 命令从指定点开始将文件写到标准输出.使用t…
阅读更多...
VIC-3D非接触全场应变测量系统用于小尺寸测量之电子元器件篇—研索仪器DIC数字图像相关技术

VIC-3D非接触全场应变测量系统用于小尺寸测量之电子元器件篇—研索仪器DIC数字图像相关技术

在5G通信、新能源汽车电子、高密度集成电路快速迭代的今天，电子元件的尺寸及连接工艺已进入亚毫米级竞争阶段，这种小尺寸下的力学性能评估对测量方式的精度有更高的要求，但传统应变测量手段常因空间尺寸限制及分辨率不足难以捕捉真实形变场。…
阅读更多...
下篇：深入剖析 BLE GATT / GAP / SMP 与应用层（约5000字）

下篇：深入剖析 BLE GATT / GAP / SMP 与应用层（约5000字）

引言 在 BLE 协议栈的最上层，GAP 定义设备角色与连接管理，GATT 构建服务与特征，SMP 负责安全保障，应用层则承载具体业务逻辑与 Profile。掌握这一层，可实现安全可靠的设备发现、配对、服务交互和定制化业务。本文将详解 GAP、GATT、SMP 三大模块，并通过示例、PlantUML 时…
阅读更多...
27、Session有什么重⼤BUG？微软提出了什么⽅法加以解决？

27、Session有什么重⼤BUG？微软提出了什么⽅法加以解决？

Session的重大BUG 1、进程回收导致Session丢失 原理： IIS的进程回收机制会在系统繁忙、达到特定内存阈值等情况下，自动回收工作进程（w3wp.exe）。由于Session数据默认存储在进程内存中，进程回收时这些数据会被清除。 …
阅读更多...
云智融合普惠大模型AI，政务服务重构数智化路径

云智融合普惠大模型AI，政务服务重构数智化路径

2025年是“十四五”收官之年，数字政府和政务数智化作为“数字中国”建设的重点，已经取得了显著成效。根据《联合国电子政务调查报告2024》，我国电子政务发展指数全球排名第35位，与2022年相比提升8个名次；其中&#xff…
阅读更多...
UE5 调整字体、界面大小

UE5 调整字体、界面大小

文章目录 方案一 5.4 版本及以上（推荐）方案二 5.3 版本及以下（推荐）方案三 使用插件（不推荐） 方案一 5.4 版本及以上（推荐） 进入 编辑 > 编辑器偏好设置，如下图所示&…
阅读更多...
抽象类相关

抽象类相关

抽象类的定义 抽象类 是一种特殊的类，它不能被实例化，只能作为基类来派生出具体类。抽象类至少包含一个纯虚函数 。纯虚函数是在函数原型前加上 0 的虚函数，表示该函数没有具体实现，必须由派生类来实现。 抽象类的作用 提供统…
阅读更多...
【UVM项目实战】异步fifo—uvm项目结构以及uvm环境搭建

【UVM项目实战】异步fifo—uvm项目结构以及uvm环境搭建

本文章同步到我的个人博客网站：ElemenX-King：【UVM项目实战】异步fifo—uvm项目结构以及uvm环境搭建 希望大家能使用此网站来进行浏览效果更佳！！！ 目录 一、异步FIFO1.1 异步FIFO的定义1.2 亚稳态1.3 异步FIFO关键技术…
阅读更多...
【通关函数的递归】--递归思想的形成与应用

【通关函数的递归】--递归思想的形成与应用

目录 一.递归的概念与思想 1.定义 2.递归的思想 3.递归的限制条件 二.递归举例 1.求n的阶乘 2.顺序打印一个整数的每一位 三.递归与迭代 前言:上篇博文分享了扫雷游戏的实现，这篇文章将会继续分享函数的递归相关知识点，让大家了解并掌握递归的思…
阅读更多...
【FAQ】针对于消费级NVIDIA GPU的说明

【FAQ】针对于消费级NVIDIA GPU的说明

概述 本文概述 HP Anyware 在配备消费级 NVIDIA GPU 的物理工作站上的关​​键组件、安装说明和重要注意事项。 注意：本文档适用于 NVIDIA 消费级 GPU。NVIDIA Quadro 和 Tesla GPU 也支持 HP Anyware 在公有云、虚拟化或物理工作站环境中运行。请参阅PCoIP Graphi…
阅读更多...
MyBatis操作数据库---从入门到理解

MyBatis操作数据库---从入门到理解

文章目录 关于MyBatis操作数据库MyBatis⼊⻔（使用）Mybatis操作数据库的步骤：配置数据库连接字符串使⽤MyBatis完成简单的增删改查操作注解xml 单元测试开启驼峰命名(推荐) 打印日志 关于MyBatis操作数据库 在之前的学习,我们了解到web应⽤程…
阅读更多...
【HFP】蓝牙语音通话控制深度解析：来电拒接与通话终止协议

【HFP】蓝牙语音通话控制深度解析：来电拒接与通话终止协议

目录 一、来电拒接的核心流程与信令交互 1.1 拒接场景的分类与触发条件 1.2 HF 端拒接流程 1.3 AG 端拒接流程 二、通话终止流程：主动断开与异常中断 2.1 终止场景的界定 2.2 HF 端终止流程 2.3 AG 端终止流程 三、信令协议的核心要素：AT 命令与…
阅读更多...
使用QML Tumbler 实现时间日期选择器

使用QML Tumbler 实现时间日期选择器

目录 引言相关阅读项目结构示例实现与代码解析示例一：时间选择器（TimePicker）示例二：日期时间选择器（DateTimePicker） 主窗口整合运行效果总结下载链接 引言 在现代应用程序开发中，时间与日期选…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023