使用最新的跨平台框架Electron 实现 STM32 MCU 嵌入式系统的序列号烧写器上位机开发

jiladahe1997

已于 2023-04-28 17:30:18 修改

阅读量5.4k

点赞数 3

分类专栏：嵌入式前端 STM32 文章标签：嵌入式 stm32 前端 mcu 单片机

于 2020-11-19 16:16:25 首次发布

本文链接：https://blog.csdn.net/jiladahe1997/article/details/107650245

版权

嵌入式同时被 3 个专栏收录

16 篇文章

订阅专栏

STM32

10 篇文章

订阅专栏

前端

3 篇文章

订阅专栏

术语简介

MCU：
微控制单元(Microcontroller Unit），也称作单片机，是把中央处理器(Central Process Unit；CPU)的频率与规格做适当缩减，并将内存(memory)、计数器(Timer)、USB、A/D转换、UART、PLC、DMA等周边接口，甚至LCD驱动电路都整合在单一芯片上，形成芯片级的计算机，为不同的应用场合做不同组合控制。

STM32：意法半导体生产的一系列MCU，在国内有很大的应用场景。

上位机：
上位机一般是嵌入式软件开发领域的专有名词。在嵌入式开发领域，嵌入式设备一般只做监测、采集、保存、上传等工作，且很多嵌入式设备都是没有屏幕的。所以为了对嵌入式设备进行可视化监控、配置，或者是对采集的数据进行显示、分析、绘图等高级操作。这时就需要再开发一个PC上用的软件。这个软件就叫做上位机。

Electron：使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序，官网：https://www.electronjs.org/。其原理是利用chromium，谷歌浏览器的最小内核（大小仅不到50MB），结合HTML、CSS、JavaScript等发展非常蓬勃的前端技术。相当于每个应用都是一个最小化的浏览器。

React：用于构建用户界面的Javascript库。官网https://react.docschina.org/。是用于快速开发网页的一个JavaScript库。值得注意的是：React和Electron并无依赖关系。

Antd：阿里开源的React组件库。官网：https://ant.design/components/overview-cn/，使用React编写好的多个组件，开发者可以直接拿来用，极大减少开发时间。

先秀一下做好之后的效果：
在这里插入图片描述

参考文档

https://github.com/WICG/serial/blob/main/EXPLAINER.md

背景

上位机的叫法历史悠久，据我猜测，早在90年代（毕竟我97年才出生，只能猜测了），PC电脑和互联网的发展还没有这么牛逼的时候。每做一个电子产品，比如做一个滚轮鼠标，那就得再做一个滚轮鼠标校准软件（上位机），出厂的时候用来校准鼠标。

另外一种应用场景通常是用来显示电子设备上传的信息。比如以前我就接触到一款产品，产品监xyz测三轴方向的加速度，一旦超过阈值，就报警。那么在调试的时候，就开发了一个windows电脑上的上位机软件，电脑通过串口连接到加速度传感器，接收加速度传感器的信息，运行这个软件，可以实时的显示当前的xyz轴的加速度。类似于下图：
在这里插入图片描述

现状

截至目前（2020年11月18日），由于近几年物联网的大力发展，出现了一系列的阿里云、腾讯云等物联网平台，以及移远EC20、乐鑫ESP8266等4G/WiFi模组，使得嵌入式设备可以很方便的把数据传到云端，并在云端可以自动的对数据进行保存、绘图、分析等。所以上述功能可以取代一部分的上位机。

但是另一部分的上位机目前还没有很好的取代方法。例如设备不能联网，或者是出厂的时候就需要对设备进行配置，比如上述的滚轮鼠标校准软件。更常见的一个场景是：每个设备都需要烧写序列号，需要一个序列号烧写器（上位机）。 本文介绍的就是如何开发一个简单的序列号烧写器。

解决方案

下面我使用美团、头条以及各大互联网公司 PUA员工专用法则 OKR法则来对这个需求做一个分析。

O（目标）：做一个能够通过串口对嵌入式设备进行出厂配置的烧写器。

K（关键点）：

能够在windows电脑上运行，且能够操作串口
能够通过串口对嵌入式设备进行配置读取
能够对读取到的配置进行修改
能够通过串口向嵌入式设备写入修改之后的配置

R（结果）：

采用C#+.NET或者QT或者Delphi或者Electron
Electron具备读写串口的能力
采用React-json库进行配置修改
Electron具备读写串口的能力

综上所述，我们的基本架构已经出来了。如下图所示：

在这里插入图片描述图片解释：
我们采用Electron来作为框架，Electron可以调用串口。上层使用React 结合阿里开源的组件库 Antd 等组件库来飞速的编写非常好看的UI界面，

搭建工程

提示：使用Electron需要大量关于web前端开发的相关知识，零基础至少学习一周时间才算勉强上手，如果不是特别想学习web前端，建议找相关同事或者朋友帮忙。如果想自己学习，学习教程百度一堆，我就不盲目推荐了。

请选用这个工程模板进行搭建：https://github.com/electron-react-boilerplate/electron-react-boilerplate。原因如下：

由于Electron作为基础框架，其只提供基础的两个功能：1.跨平台运行，向下和windows、Linux、macos等平台做兼容适配。 2.能运行网页，向上只提供浏览器的基本功能，能够解析html、css以及JavaScript。

所以，React作为一个JavaScript库，并不原生的集成在Electron里面，这是完全符合软件工程解耦思想的。你也可以无缝切换成Vue、AngularJs等其他的Javascript库。

下载工程代码：
git clone --depth 1 --single-branch https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name
安装依赖
yarn
3.启动
yarn start

启动完成，效果如下：

在这里插入图片描述

使用serialport 串口库

添加依赖
yarn add serialport
修改代码
app\components\Home.tsx

const SerialPort = require('serialport')
SerialPort.list().then((ports: Array<any>)=>console.log(ports))

重要：需要修改webpack配置，这个是工程模板的一个设计缺陷，我已经在github上提了相关issue：https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/2532
怎么修改详情请见这个链接。
再次yarn start 启动应用，可以看到有以下输出了：