# R-WebEmbedded

**Repository Path**: water_source/r-web-embedded

## Basic Information

- **Project Name**: R-WebEmbedded
- **Description**: 嵌入式工具--Web化，无需安装
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-08-07
- **Last Updated**: 2024-08-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

对于嵌入式工程师来说，串口工具在开发和调试过程中必不可少的利器。工具能帮助我们发送和接收串行数据，进行设备通信和调试。通过串口工具，工程师可以实时监控串口数据，查看设备是否正常工作，同时也可以通过发送特定的命令来测试设备的反应。

传统的电脑应用-串口助手，虽然也能满足这些需求，但它们在便捷性上往往受到限制。它需要去网上下载，有些还需要安装。

![](./pic/1.png)

![](./pic/2.png)

![](./pic/3.png)

相比之下，在线串口助手的出现为嵌入式工程师带来了福音。它无需安装、无需配置，只需通过浏览器即可使用。此外，在线串口助手通常提供更为直观的界面和易于操作的功能，帮助工程师更高效地进行工作。

博主最近看到网上有开发者--老大哥，开源了一个在线串口工具，其链接：https://gitee.com/itldg/web-serial-debug，其开源协议：Apache License 2.0。

通过上面的启发，博主想着也写一个网页（R-WebEmbedded），并集成该开源软件，方便大家使用。

![](./pic/4.png)

在开发在线串口助手之前，就必须先了解什么是web serial api。

##### R-WebEmbedded 说明
- 博主没有学过前端开发，该网页都是现学现卖，所以整体页面有点丑陋。目前该网页主要有两个功能，博主开源软件的浏览和在线串口工具。
- R-WebEmbedded主界面说明--主要包含：标题，博主的gitee，github链接，以及功能模块

![](./pic/7.png)

- R-WebEmbedded--开源软件包，该界面展示了作者提交给RT-Threead的软件包。

![](./pic/8.png)

- R-WebEmbedded - 在线串口助手，该功能集成了老大哥的开源的串口工具。界面分为：串口配置区，串口数据收发区，串口快捷方式区。

![](./pic/6.png)

### 什么是Web Serial API
- 串口是一个双向通信接口，允许字节发送和接收数据。
- Web Serial API为网站提供了一种使用JavaScript对串行设备进行读写的方法。串行设备可以通过用户系统上的串行端口连接，也可以通过模拟串行端口的可移动USB和蓝牙设备连接。换句话说，Web Serial API通过允许网站与串行设备(如微控制器和3D打印机)通信来连接网络和物理世界。

### 如何使用Web Serial API

##### 浏览器支持检测
检查浏览器是否支持Web Serial API，有些浏览器可能不支持该功能，可以选择Edge或Chrome浏览器。

``` C
if (!('serial' in navigator)) {
    alert('当前浏览器不支持串口操作,请更换Edge或Chrome浏览器')
}
```

##### 打开串口
- Web Serial API在设计上是异步的。这可以防止网站UI在等待输入时阻塞，这一点很重要，因为串行数据可以在任何时候接收，需要一种方法来侦听它。要打开串口，首先访问一个SerialPort对象。为此，您可以通过调用navigator.serial.requestPort()来提示用户选择一个串行端口，或者从navigator.serial.getPorts()中选择一个，该方法返回一个先前授予该网站访问权限的串行端口列表。

``` C
// 提示用户选择一个串口。
const serialPort = await navigator.serial.requestPort();

// 获取用户之前授予该网站访问权限的所有串口。
const serialPort = await navigator.serial.getPorts();
```

``` C
document.getElementById('serial-select-port').addEventListener('click', async () => {
    try {
        await navigator.serial.requestPort().then(async (port) => {
            serialPort?.close()
            await serialPort?.forget()
            serialPort = port
            serialStatuChange(true)
        })
    } catch (e) {
        console.error('获取串口权限出错' + e.toString())
    }
})
```

![](./pic/5.png)

- 当我选择好了SerialPort对象之后，调用serialPort.open()，打开串口。其中打开串口可以指定其选项，选项是有默认值，并且是可选的。

``` C
dataBits：每帧的数据位数(7或8)。
stopBits：一帧结束时的停止位数(1或2)。
parity：校验模式，可以是none，偶数，奇数。
bufferSize：应该创建的读写缓冲区大小(必须小于16MB)。
flowControl：流控模式(none或hardware)。
```

##### 关闭串口

- 当我们不在使用串口时，我们需要将串口对象关闭，调用serialPort.close()。如果串行端口的readable和writable被解锁，则关闭该串行端口，这意味着已经为其各自的读写成员调用了releaseLock()。但是，当使用循环从串行设备连续读取数据时，端口Readable将一直被锁定，直到遇到错误。在这种情况下，调用reader.cancel()将强制reader.read()立即解析为{value: undefined, done: true}，从而允许循环调用reader.releaseLock()。


``` C
async function closeSerial() {
    if (serialOpen) {
        serialOpen = false
        reader?.cancel()
        serialToggle.innerHTML = '打开串口'
        disabledOptions(false)
    }
}

async function readData() {
    while (serialOpen && serialPort.readable) {
        reader = serialPort.readable.getReader()
        try {
            while (true) {
                const { value, done } = await reader.read()
                if (done) {
                    break
                }
                dataReceived(value)
            }
        } catch (error) {
        } finally {
            reader.releaseLock()
        }
    }
    await serialPort.close()
}
```

##### 串口读数据
- Web Serial API中的输入流由streams API处理。
- 串口连接建立之后，SerialPort对象的readable属性返回个ReadableStream。这些将用于从串行设备接收数据, 其使用Uint8Array实例进行数据传输。
- 当新数据从串行设备到达时，port.readable.getReader().read()异步返回两个属性:value和一个done的布尔值。如果done为真，则串行端口已经关闭，或者没有更多的数据输入。调用port.readable.getReader()创建一个读取器并将其锁定为readable。当可读被锁定时，串口不能被关闭。

``` C
async function readData() {
    while (serialOpen && serialPort.readable) {
        reader = serialPort.readable.getReader()
        try {
            while (true) {
                const { value, done } = await reader.read()
                if (done) {
                    break
                }
                dataReceived(value)
            }
        } catch (error) {
        } finally {
            reader.releaseLock()
        }
    }
    await serialPort.close()
}
```
##### 串口写数据
- Web Serial API中的输出流由streams API处理。
- 串口连接建立之后，SerialPort对象的writable属性返回个WritableStream。这些将数据发送到串行设备, 其使用Uint8Array实例进行数据传输。
- 要将数据发送到串行设备，请将数据传递到port.writable.getWriter().write()。在port.writable. getwriter()上调用releaseLock()是为了稍后关闭串口。
- 串口工具提供了hex和字符串发送格式。

``` C
async function sendHex(hex) {
    const value = hex.replace(/\s+/g, '')
    if (/^[0-9A-Fa-f]+$/.test(value) && value.length % 2 === 0) {
        let data = []
        for (let i = 0; i < value.length; i = i + 2) {
            data.push(parseInt(value.substring(i, i + 2), 16))
        }
        await writeData(Uint8Array.from(data))
    } else {
        addLogErr('HEX格式错误:' + hex)
    }
}

async function sendText(text) {
    const encoder = new TextEncoder()
    writeData(encoder.encode(text))
}

async function writeData(data) {
    if (!serialPort || !serialPort.writable) {
        addLogErr('请先打开串口再发送数据')
        return
    }
    const writer = serialPort.writable.getWriter()
    if (toolOptions.addCRLF) {
        data = new Uint8Array([...data, 0x0d, 0x0a])
    }
    await writer.write(data)
    writer.releaseLock()
    addLog(data, false)
}
```

### 总结

1. 在线串口助手提供了更佳便捷的开发模式，无需下载安装串口助手。
2. R-WebEmbedded - 在线嵌入式工具，其登录网站：https://ricechen0.gitee.io/r-web-embedded/
3. R-WebEmbedded - 在线嵌入式工具开源代码连接：https://gitee.com/RiceChen0/r-web-embedded