Electron学习3 使用serialport操作串口

Electron学习3 使用serialport操作串口

  • 一、准备工作
  • [二、 SerialPort 介绍](#二、 SerialPort 介绍)
    • [1. 核心软件包](#1. 核心软件包)
      • [(1) serialport](#(1) serialport)
      • [(2) @serialport/stream](#(2) @serialport/stream)
      • [(3) @serialport/bindings-cpp](#(3) @serialport/bindings-cpp)
      • [(4) @serialport/binding-mock](#(4) @serialport/binding-mock)
      • [(5) @serialport/bindings-interface](#(5) @serialport/bindings-interface)
    • [2. 解析器包](#2. 解析器包)
    • [3. 命令行工具](#3. 命令行工具)
  • 三、创建一个demo程序
    • [1. 创建 electron 项目](#1. 创建 electron 项目)
    • [2. 安装 serialport](#2. 安装 serialport)
    • [3. 安装 electron-rebuild](#3. 安装 electron-rebuild)
    • [4. 使用 node-gyp 编译库](#4. 使用 node-gyp 编译库)
    • [5. 修改 main.js 配置](#5. 修改 main.js 配置)
    • [8. 写测试程序](#8. 写测试程序)
    • [7. 运行程序](#7. 运行程序)
  • 四、问题处理
    • [1. 安装python2.7虚拟环境](#1. 安装python2.7虚拟环境)
    • [2. 安装windows-build-tools](#2. 安装windows-build-tools)

一、准备工作

本文将使用 nodejs 的 SerialPort 包来实现串口通讯功能。

Node SerialPort 是一个 JavaScript 库,用于连接到在 NodeJS 和 Electron 中工作的串行端口,以下是准备环境:

  • Electron 开发环境
  • 电脑有串口通讯能力,一般使用USB-串口转接板
  • windows 操作系统

本文操作过程来自:

https://girishjoshi.io/post/access-serialport-from-electron-application-and-creating-gui-for-micropython-repl-on-esp8266/

二、 SerialPort 介绍

文档地址:

https://serialport.io/docs/

1. 核心软件包

(1) serialport

主对象,使用流式传输支持跨平台的串行端口访问。

(2) @serialport/stream

为绑定提供的流式接口。

(3) @serialport/bindings-cpp

为nodejs、electron提供跨平台的绑定支持。

(4) @serialport/binding-mock

为测试实现模拟绑定功能。

(5) @serialport/bindings-interface

一个typescript 接口用来实现自己的绑定时使用。

2. 解析器包

解析器用来对原始的二进制数据转换成自己需要的消息格式。 包含以下解析器包,这里不进行详解:

  • @serialport/parser-byte-length
  • @serialport/parser-cctalk
  • @serialport/parser-delimiter
  • @serialport/parser-inter-byte-timeout
  • @serialport/parser-packet-length
  • @serialport/parser-readline
  • @serialport/parser-ready
  • @serialport/parser-regex
  • @serialport/parser-slip-encoder
  • @serialport/parser-spacepacket

3. 命令行工具

比较有用的命令行工具,包括:

  • @serialport/list
  • @serialport/repl
  • @serialport/terminal

三、创建一个demo程序

1. 创建 electron 项目

bash 复制代码
# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start
# Go into the repository
$ cd electron-quick-start
# Install the dependencies and run
$ npm install && npm start

2. 安装 serialport

bash 复制代码
npm install --save serialport 

3. 安装 electron-rebuild

因为选择npm版本不同,这里要对库进行重编译,要先安装 electron-rebuild 工具。

bash 复制代码
npm install --save-dev electron-rebuild  
.\node_modules\.bin\electron-rebuild
npm rebuild

注意原文路径中用的 / , 我在windows 系统,改用 \

4. 使用 node-gyp 编译库

bash 复制代码
npm install node-gyp electron electron-rebuild serialport --build-from-source
./node_modules/.bin/electron-rebuild
npm start

5. 修改 main.js 配置

修改 WebPreferences 如下:

js 复制代码
webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
      contextIsolation: false
}

8. 写测试程序

html 复制代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron test serialport</title>
</head>
<body>
<h1>Serial terminal</h1>


<script>
  //load serialport module
  const {SerialPort} = require('serialport');
  
  SerialPort.list().then(_=>{console.info(_);});
  const serialPort = new SerialPort({path:'COM3', baudRate: 115200}, function (err) {
    if(err) {
      console.error(err);
    }
  });
  console.info(serialPort);
  serialPort.write("abc", (err)=>{
    if (err) {
      return console.log('Error on write: ', err.message)
    }
    console.log('message written')
  });
  serialPort.on('error', function(err) {
    console.log('Error: ', err.message)
  });

  serialPort.on('data', function (data){
    console.info('data', data);
  });

</script>
<script>
  require('./renderer.js')
</script>
</body>
</html>

7. 运行程序

bash 复制代码
npm start

项目结构:

四、问题处理

在执行electron-rebuild时,可能需要安装windows-build-tools。新版本的windows-build-tools支持Python3.*版本,但使用Python2.7比较保险。

1. 安装python2.7虚拟环境

如果本机没有Python2.7,则可以使用MiniAnaconda配置虚拟环境 。 先下载安装MiniAnaconda工具,然后用命令行创建虚拟环境 :

bash 复制代码
conda create -n py27 python=2.7
conda activate py27

2. 安装windows-build-tools

直接安装windows-build-tools大概率会失败,可按以下流程操作:

在执行npm install -g node-gpy后使用命令:

bash 复制代码
npm install -g --production windows-build-tools@4.0.0
  1. 当命令行界面开始不动时,打开任务管理器,把Build Tools结束任务;
  2. 再打开.windows-build-tools文件夹中的build-tools-log.txt,添加Variable: IsInstalled = 1,保存,关闭;
    解决方案参考:https://blog.csdn.net/web15085181368/article/details/123192964

更多关于serialport的功能可参考官方文档。

相关推荐
熊的猫9 分钟前
webpack 核心模块 — loader & plugins
前端·javascript·chrome·webpack·前端框架·node.js·ecmascript
四喜花露水1 小时前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy1 小时前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
怀旧6661 小时前
spring boot 项目配置https服务
java·spring boot·后端·学习·个人开发·1024程序员节
web Rookie1 小时前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
工业甲酰苯胺2 小时前
C# 单例模式的多种实现
javascript·单例模式·c#
infiniteWei2 小时前
【Lucene】原理学习路线
学习·搜索引擎·全文检索·lucene
follycat2 小时前
[极客大挑战 2019]PHP 1
开发语言·学习·网络安全·php
程序员爱技术5 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会6 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器