|
本帖最后由 lcofjp 于 2017-10-25 20:12 编辑
这个软件是开源的,GitHub地址是:https://github.com/lcofjp/visual-serial,欢迎各位坛友提出宝贵意见,能参与进来更是求之不得。这个软件我写了20多天,基本架子终于搭起来了,于今日发布了v0.0.1版本。我暂时给他命名为visual-serial。
visual-serial基于electron、 node-serialport等开源软件项目进行搭建。 electron是一个使用HTML、CSS和JavaScript/Node.js开发跨平台应用的框架,因此,visual-serial理论上会支持windows(>=window7版本)、macOS以及部分Linux系统,重要的事需要强调一遍: 不支持windows XP系统,因为electron已经放弃了对这款古老系统的支持。
为什么选择HTML、CSS和JavaScript开发
1. HTML开发界面简单明了,CSS控制样式功能强大
2. JavaScript是脚本语言,易于扩展,不需要编译,人人都可以根据自己的需求修改或者增加功能(JavaScript有多难?肯定没有C++难!)
visual-serial的诞生受express和函数式编程的影响,把中间件和数据流的概念应用于串口数据流处理, 因此便有了下面的框图:
图1. visual-serial的构思图
图2. visual-serial主界面
中间件及其分类:
中间件的本质就是一个函数,数据以参数的形式传入函数,函数对数据进行预处理和加工,然后传递给下一个中间件进行处理,其形式如:
- function entry(buf, serial, next) {
- // 对buf进行处理
- // 传递给下一个中间件的buf可以是一个新生成的buf,也可以把输入的buf原封不动传给下一级
- next(buf, serial);
- }
复制代码
在串口通讯应用中,串口数据往往具有一定的格式和晦涩难懂的二进制数据,调试起来会比较麻烦,不过有了中间件做翻译的话,一切问题将迎刃而解。 根据应用,中间件大概分为三类:
1. midddleware:
通用中间件,对数据进行转换,处理
2. protocol:
本质上与通用中间件没什么区别,主要是用来处理数据帧的封装,其包含两个方法:encode和decode,在发送数据的时候,调用encode对数据进行打包,例如对数据进行转义,加入校验等功能, 在接收数据的时候调用decode,功能与encode相对。
3. widget:
窗口部件,用来扩展UI界面完成特定交互以及数据可视化的呈现
中间件的数量没有限制,可以一个没有,也可以有多个,根据中间件插入的位置,可以分为三类:
这个分类与功能无关,只是用来设定其所处的位置。 中间件的位置很重要,所有中间件最终组成链式调用,前一个中间件对数据进行处理后,会传给下一个中间件,正如图1所示。
中间件示例介绍
介绍中间件,最直观的方法当然还是举例说明,下面的几个中间件是visual-serial附带的几个中间件,附带这几个中间件并不是说它常用和通用,仅是作为用户自己编写中间件的参考。
FF-protocol
假设有某数据格式规定:数据帧以0xFF开头、0xFF结尾,数据中出现的FF转义为FE 01,FE转义为FE 00,数据末尾增加异或校验和。 decode方法完成的工作包括:检测起始的FF字节,然后开始接收数据并进行转义和计算校验和,直到接收到尾部的FF,此时如果校验和正确,则把数据传给下一个中间件。 encode方法就是对数据增加头尾FF、转义和加入校验和,然后传给下一个中间件。示例:
56 A2 D3 91==encode==>FF 56 A2 D3 91 B6 FF
FF 56 A2 D3 91 B6 FF==decode==>56 A2 D3 91
timeout
如果数据帧没有具体的格式,无法判断数据的头尾,可以用超时时间来粗略判断帧的结束。如果等待设定的毫秒数内未再收到数据,则把已经收到的数据传给下一个中间件。 注意:计算机的计时并不准确,尤其是计算机任务繁重的时候,因此选择这个中间件是个下策。
savetofile
把经过这个中间件的数据保存到文件中,并继续传递数据至下一个中间件。
characterEncoding
完成字符串编码的转换,支持多种编码,如UTF8,UTF16,GB18030,因此数据发送和接收可以支持各种字符编码。 软件默认的接收和发送采用UTF8编码,UTF8兼容ASCII,如果数据中包含ASCII之外的字符,则需要注意编码转换问题。
发送:(因为论坛不支持这些字符,导致这些字符及其后面的内容不能显示,现在删除)
以上这些中间件都仅仅是一个js文件,代码都在100行之内,位置在app/middleware下面
drawgraph
这是一个窗口扩展,可将数据按特定类型提取,并画出变化曲线。其中BE为设置大端模式,min和max设置绘制曲线时的最小和最大取值范围,不设置为自适应范围。
图3. drawgraph显示单片机传过来的三轴加速度传感器数据
widget是app/middleware中的一个文件夹,其中包括html、css和JavaScript文件,html文件是必须的。
其他功能介绍
数据显示
数据显示,也就是图1中的display部分,用来做基本的数据显示,其有4种显示方式
RAW-HEX: 把接收到的数据以十六进制的形式显示
RAW-STRING: 把接收的数据作为字符串显示
ITEM-HEX: 以十六进制条目的形式显示数据,如果前面有protocol中间件或者timeout,则每帧数据显示为一条。
ITEM-STRING:以条目的形式显示字符串
还有一个NOT-DISPLAY选项,在数据显示没有重要意义的时候,可以不予显示以提高软件性能。
数据发送
数据发送主要有字符串和十六进制发送两种方式。这些功能比较基础没有可介绍的,值得一提的是,以十六进制发送的时候,可支持多种十六进制格式以及宽松的判断,例如:
{0x45, 0x56, 0x89, 0xAB, 0xF2} => 45 56 89 AB F2
08H 58H 9AH BCH => 08 58 9A BC
0x120x560x8a 9F7C62 3 B 5 => 12 56 8A 9F 7C 62 03 0B 05
loopback
环回功能,数据不通过串口发送出去,而是传递给接收部分。便于调试。
------------------------------------------------------------------------------------------------------------------------
编辑原因:因为帖子内容包含表情文字,导致后面的内容被吃掉,把表情文字删除,补充后面内容。 |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有帐号?注册
x
阿莫论坛20周年了!感谢大家的支持与爱护!!
你熬了10碗粥,别人一桶水倒进去,淘走90碗,剩下10碗给你,你看似没亏,其实你那10碗已经没有之前的裹腹了,人家的一桶水换90碗,继续卖。说白了,通货膨胀就是,你的钱是挣来的,他的钱是印来的,掺和在一起,你的钱就贬值了。
|