Electron与SerialPort轻松玩转串口开发

2023-09-09 04:16:37

前言

串口是一种古老而常见的通信接口，广泛应用于各种设备之间的数据传输。在现代开发中，Electron和SerialPort库可以帮助我们轻松地在Windows、Linux和Mac系统上进行串口开发。

1. 安装依赖项

首先，我们需要安装必要的依赖项。在终端中执行以下命令：

npm install electron serialport

2. 创建项目

创建一个新的Electron项目，命名为“serialport-app”。在项目目录下，创建一个名为“main.js”的文件，作为应用程序的主入口。

3. 配置Electron

在“main.js”文件中，首先需要配置Electron。添加以下代码：

const {app, BrowserWindow, Menu} = require('electron');

function createWindow() {
    // 创建浏览器窗口
    const win = new BrowserWindow({width: 800, height: 600});

    // 加载index.html
    win.loadFile('index.html');

    // 创建菜单栏
    const menu = Menu.buildFromTemplate([
        {
            label: '文件',
            submenu: [
                {
                    label: '打开',
                    click: async () => {
                        // 在这里处理打开文件逻辑
                    }
                },
                {
                    label: '保存',
                    click: async () => {
                        // 在这里处理保存文件逻辑
                    }
                },
                {
                    label: '退出',
                    click: () => {
                        app.quit();
                    }
                }
            ]
        }
    ]);

    // 设置菜单栏
    Menu.setApplicationMenu(menu);
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

4. 配置SerialPort

接下来，我们需要配置SerialPort。添加以下代码：

const SerialPort = require('serialport');

// 打开串口
const port = new SerialPort('/dev/ttyUSB0', {
    baudRate: 9600,
    dataBits: 8,
    parity: 'none',
    stopBits: 1,
    flowControl: false
});

// 监听数据接收事件
port.on('data', (data) => {
    console.log(data.toString());
});

// 发送数据
port.write('Hello, world!');

5. 创建UI

最后，我们需要创建用户界面。在项目目录下，创建一个名为“index.html”的文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
    
</head>
<body>
    <h1>串口通信</h1>
    <button id="open-button">打开串口</button>
    <button id="close-button">关闭串口</button>
    <button id="send-button">发送数据</button>
    <textarea id="data-textarea"></textarea>

    <script>
        // 按钮元素
        const openButton = document.getElementById('open-button');
        const closeButton = document.getElementById('close-button');
        const sendButton = document.getElementById('send-button');

        // 文本域元素
        const dataTextarea = document.getElementById('data-textarea');

        // 打开串口
        openButton.addEventListener('click', () => {
            SerialPort.open('/dev/ttyUSB0', {
                baudRate: 9600,
                dataBits: 8,
                parity: 'none',
                stopBits: 1,
                flowControl: false
            }).then((port) => {
                console.log('串口已打开');

                // 监听数据接收事件
                port.on('data', (data) => {
                    dataTextarea.value += data.toString();
                });
            });
        });

        // 关闭串口
        closeButton.addEventListener('click', () => {
            SerialPort.close();
            console.log('串口已关闭');
        });

        // 发送数据
        sendButton.addEventListener('click', () => {
            SerialPort.write('Hello, world!');
        });
    </script>
</body>
</html>