响应查看：绘图

绘图响应查看器用于解析响应数据并绘制图表。

绘图响应查看器

数据解析

绘图支持多种数据解析方式以实现根据不同的数据格式绘制图表。

字节流

当需要解析的数据为二进制字节流时，可以选择字节流解析方式。该解析方式将收到的每个字节数据都作为需要进行绘图的数据，解析时，支持通过指定数据类型来解析收到的数据内容。

例如，假设收到的数据内容如下：

01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F 10 
0F 0E 0D 0C 0B 0A 09 08 07 06 05 04 03 02 01 00

当配置数据类型为uint8，频道数量为 1 时，将绘制如下图表：

字节流绘图

当配置数据类型为uint16，频道数量为 2 时，将绘制如下图表：

字节流绘图

则，当收到 01 02（即十进制258）时，将其作为第一个频道的数据进行绘制，当收到 03 04 时，将其作为第二个频道的数据进行绘制。当收到 05 06 时，将其作为第一个频道的数据进行绘制，以此类推。

当数据类型为多字节类型时，可以选择大端或小端模式进行解析。

HEX 匹配

HEX 匹配模式用于匹配二进制数据流中的指定数据内容，并将匹配到的数据内容作为需要进行绘图的数据。

假设收到的数据内容如下：

AA 01 00 02 FF
AA 02 00 03 FF
AA 03 00 04 FF
AA 04 00 05 FF
AA 05 00 06 FF
AA 06 00 07 FF
AA 07 00 08 FF
AA 08 00 09 FF

匹配模板为如下：

AA @U8<NUM1> @U16BE<NUM2> FF

则绘制的图像为：

HEX 匹配绘图

以第一行数据为例， AA 01 00 02 FF 则匹配到的 NUM1 为 01， NUM2 为 00 02.

关于HEX匹配的详细说明请参考HEX 匹配。

文本

文本解析器用于解析文本数据并绘制图表。解析文本时，可配置数字分隔符以及分组分割符，从而将文本数据解析为需要渲染的数据。

例如，将数字分隔符设置为 ,，分组分際符设置为 \n，则解析如下文本：

1,2,3
2,3,4

得到的绘图结果为：

文本绘图

即，数字分隔符用于分割每个频道的数据，分组分隔符用于分割每个频道的一组数据。以上述文本为例，第一行数据为 1,2,3，则解析为三个频道的数据，每个频道的数据分别为 1，2，3。

需要注意的是，当数组不足时，解析器将会一直等待直到数组完整。

以上述配置为例，如果收到的文本为 1,2,3 而缺少末尾的换行分隔符，则解析器认为该数据不完整，将会一直等待换行符以获取完整的数据。

正则表达式

正则表达式解析器用于解析文本数据并绘制图表。在数据解析时，所有的匹配都强制从头开始匹配，即匹配模式默认会在开头加上 ^ 符号。例如配置匹配模式为 \d+，则实际的匹配模式为 ^\d+。

解析的频道信息由正则表达式的分组信息决定。例如，配置匹配模式为 (?<g1>\d+),(?<g2>\d+),(?<g3>\d+)，则解析后的频道信息为 g1，g2，g3。

例如，我们配置匹配模式如下：

lat=(?<lat>[\d\.]+),lon=(?<lon>[\d\.]+),

当我们发送如下文本：

lat=122,lon=34,
lat=22,lon=55,
...

则我们收到的绘图结果为：

正则表达式绘图

JSON

JSON 解析器用于解析 JSON 格式的文本数据并绘制图表。在配置 JSON 解析器时，需要指定 JSON 路径以获取需要绘制的数据。

假设我们收到的 JSON 数据格式如下：

{
    "user": {
        "age": 12,
        "level": 34
    }
}

我们需要将 age 和 level 作为两个频道进行绘制，则我们可以配置 JSON 路径为 user.age 和 user.level。我们将age 和 level 作为随机数据进行发送，则我们收到的绘图结果为：

JSON 绘图

结构体

结构体解析器用于解析结构化数据并绘制图标，在使用结构体解析器时，需要当前指令已配置结构体解析模板，否则将会提示无解析模板使用从而无法进行绘图。

假设我们存在结构体模板如下：

结构体模板

如果我们需要将温度数据作为频道进行绘制，则可配置解析器如下：

结构体解析器

则我们发送随机数据，收到的绘图结果为：

结构体绘图

脚本

脚本解析器用于自定义解析数据并绘制图表。

示例：

/**
 * setup script parser
 */
export function setup() {
    // 创建频道 CH01
    $this.createChannel("CH01");
    // 创建频道 CH02
    $this.createChannel("CH02");
}

/**
 * parse response content;
 */
export function execute() {
    // 读取一个字节
    let ch01 = $this.readUInt8();
    // 将读取的数据推送到频道 CH01
    $this.pushValueToChannel("CH01", ch01);

    // 再次读取一个字节
    let ch02 = $this.readUInt8();
    // 将读取的数据推送到频道 CH02
    $this.pushValueToChannel("CH02", ch02);
}

在配置完成脚本后，将会执行 setup 方法进行初始化，当收到数据后执行 execute 方法进行解析。

脚本中支持的方法如下：

createChannel 创建频道，例如：

// 创建频道 CH01
$this.createChannel("CH01");

pushValueToChannel 将数据推送到指定频道，例如：

// 将数据推送到频道 CH01
$this.pushValueToChannel("CH01", 1);

clearResponseToCursor 清空从头到当前游标位置的数据，对于脚本收到的数据默认情况下不会主动清空，所以收到的响应内容会持续的增长，当接收的数据量比较大时，可以通过该方法清空已经处理过的数据，从而节省空间占用，例如：
```
// 清空从头到当前游标位置的数据
$this.clearResponseToCursor();
```

setCursor 设置游标位置，例如：

// 设置游标位置
$this.setCursor(0);

storeCursor 临时存储游标位置，例如：
```
// 存储游标位置
$this.storeCursor();
```

restoreCursor 恢复游标位置，例如：

// 恢复游标位置
$this.restoreCursor();

readUInt8 读取一个字节，并将游标向后移动一个字节，当无数据读取时返回 null，例如：
```
// 读取一个字节
let value = $this.readUInt8();
```
readInt8 读取一个字节，并将游标向后移动一个字节，当无数据读取时返回 null，例如：
```
// 读取一个字节
let value = $this.readInt8();
```
readUInt16LE 读取一个小端序的 16 位整数，并将游标向后移动两个字节，当无数据读取时返回 null，例如：
```
// 读取一个小端序的 16 位整数
let value = $this.readUInt16LE();
```
readUInt16BE 读取一个大端序的 16 位整数，并将游标向后移动两个字节，当无数据读取时返回 null，例如：
```
// 读取一个大端序的 16 位整数
let value = $this.readUInt16BE();
```
readInt16LE 读取一个小端序的 16 位整数，并将游标向后移动两个字节，当无数据读取时返回 null，例如：
```
// 读取一个小端序的 16 位整数
let value = $this.readInt16LE();
```
readInt16BE 读取一个大端序的 16 位整数，并将游标向后移动两个字节，当无数据读取时返回 null，例如：
```
// 读取一个大端序的 16 位整数
let value = $this.readInt16BE();
```
readUInt32LE 读取一个小端序的 32 位整数，并将游标向后移动四个字节，当无数据读取时返回 null，例如：
```
// 读取一个小端序的 32 位整数
let value = $this.readUInt32LE();
```
readUInt32BE 读取一个大端序的 32 位整数，并将游标向后移动四个字节，当无数据读取时返回 null，例如：
```
// 读取一个大端序的 32 位整数
let value = $this.readUInt32BE();
```
readInt32LE 读取一个小端序的 32 位整数，并将游标向后移动四个字节，当无数据读取时返回 null，例如：
```
// 读取一个小端序的 32 位整数
let value = $this.readInt32LE();
```
readInt32BE 读取一个大端序的 32 位整数，并将游标向后移动四个字节，当无数据读取时返回 null，例如：
```
// 读取一个大端序的 32 位整数
let value = $this.readInt32BE();
```
readUInt64LE 读取一个小端序的 64 位整数，并将游标向后移动八个字节，当无数据读取时返回 null，例如：
```
// 读取一个小端序的 64 位整数
let value = $this.readUInt64LE();
```
readUInt64BE 读取一个大端序的 64 位整数，并将游标向后移动八个字节，当无数据读取时返回 null，例如：
```
// 读取一个大端序的 64 位整数
let value = $this.readUInt64BE();
```
readInt64LE 读取一个小端序的 64 位整数，并将游标向后移动八个字节，当无数据读取时返回 null，例如：
```
// 读取一个小端序的 64 位整数
let value = $this.readInt64LE();
```
readInt64BE 读取一个大端序的 64 位整数，并将游标向后移动八个字节，当无数据读取时返回 null，例如：
```
// 读取一个大端序的 64 位整数
let value = $this.readInt64BE();
```
readFloatLE 读取一个小端序的 32 位浮点数，并将游标向后移动四个字节，当无数据读取时返回 null，例如：
```
// 读取一个小端序的 32 位浮点数
let value = $this.readFloatLE();
```
readFloatBE 读取一个大端序的 32 位浮点数，并将游标向后移动四个字节，当无数据读取时返回 null，例如：
```
// 读取一个大端序的 32 位浮点数
let value = $this.readFloatBE();
```
readDoubleLE 读取一个小端序的 64 位浮点数，并将游标向后移动八个字节，当无数据读取时返回 null，例如：
```
// 读取一个小端序的 64 位浮点数
let value = $this.readDoubleLE();
```
readDoubleBE 读取一个大端序的 64 位浮点数，并将游标向后移动八个字节，当无数据读取时返回 null，例如：
```
// 读取一个大端序的 64 位浮点数
let value = $this.readDoubleBE();
```
readString 读取一个字符串，并将游标向后移动指定长度的字节，当无数据读取时返回 null，例如：
```
// 读取一个字符串
let value = $this.readString(10);
```