从海洋到屏幕：打造读取 AIS 数据的桌面应用程序

前端

2024-02-11 21:28:46

当汪洋大海中的一艘艘船只在某一特定时间和地点相遇时，它们各自会准确知道彼此的位置、航向、速度以及其它信息。这些都是自动识别系统(AIS)广播的，使海洋交通更加安全、高效。

我们编写了一个简单的应用程序，可以读取串行端口上的AIS数据并将其解码成人类可读的JSON格式。我们使用了Electron框架来构建应用程序，它允许我们使用JavaScript、HTML和CSS来创建桌面应用程序。

我们还使用了Node.js的serialport库来与串口通信。该库提供了与串口进行读写操作所需的函数。

最后，我们使用了AIS-JSON库来解析AIS数据。该库提供了一个函数，可以将AIS数据解码为JSON格式。

应用程序非常简单，但它可以为想要读取和分析AIS数据的人提供一个良好的起点。

1. 项目准备

1.1 下载Node.js和Electron

首先，您需要下载并安装Node.js和Electron。您可以从它们的官方网站下载安装包。

1.2 安装所需库

接下来，您需要安装所需的库。您可以使用以下命令安装它们：

npm install electron serialport ais-json

2. 创建项目

现在，您可以创建一个新的Electron项目。您可以使用以下命令创建一个新的Electron项目：

electron-quick-start

这将在当前目录中创建一个名为“electron-quick-start”的目录。

3. 编写代码

接下来，您需要在“electron-quick-start”目录中创建一个名为“main.js”的文件。这是Electron应用程序的主文件。

您可以在“main.js”文件中添加以下代码：

const { app, BrowserWindow } = require('electron')
const SerialPort = require('serialport')
const ais = require('ais-json')

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

  // 加载index.html文件
  win.loadFile('index.html')

  // 打开开发者工具
  win.webContents.openDevTools()

  // 创建串口对象
  const serialPort = new SerialPort('/dev/ttyUSB0', {
    baudRate: 38400
  })

  // 监听串口数据
  serialPort.on('data', (data) => {
    // 解析AIS数据
    const aisData = ais.decode(data)

    // 将AIS数据发送到渲染进程
    win.webContents.send('ais-data', aisData)
  })
}

app.whenReady().then(() => {
  createWindow()

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

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

在上面的代码中，我们首先创建了一个新的Electron窗口。然后，我们加载了“index.html”文件。接下来，我们创建了一个串口对象。然后，我们监听串口数据。最后，我们将AIS数据发送到渲染进程。

4. 创建渲染进程

现在，您需要创建一个渲染进程。您可以使用以下命令创建一个新的渲染进程：

electron-renderer

这将在当前目录中创建一个名为“electron-renderer”的目录。

5. 编写HTML文件

接下来，您需要在“electron-renderer”目录中创建一个名为“index.html”的文件。这是渲染进程的主文件。

您可以在“index.html”文件中添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>AIS数据解析器</h1>
  <div id="ais-data"></div>

  <script src="renderer.js"></script>
</body>
</html>

在上面的代码中，我们首先创建了一个新的HTML文档。然后，我们创建了一个标题为“AIS数据解析器”的

元素。接下来，我们创建了一个

元素，其id为“ais-data”。最后，我们加载了“renderer.js”文件。

6. 编写渲染进程JavaScript文件

现在，您需要在“electron-renderer”目录中创建一个名为“renderer.js”的文件。这是渲染进程的JavaScript文件。

您可以在“renderer.js”文件中添加以下代码：

const { ipcRenderer } = require('electron')

// 监听渲染进程中的“ais-data”事件
ipcRenderer.on('ais-data', (event, aisData) => {
  // 将AIS数据显示到页面上
  document.getElementById('ais-data').innerHTML = JSON.stringify(aisData, null, 2)
})