add docs

docs/viz/9-message-schemas/1-introduction.md

@@ -0,0 +1,86 @@
+---
+sidebar_position: 1
+---
+
+# 介绍
+
+ coScene 通常要求传入的消息遵循特定结构，以便正确进行可视化。使用 [Foxglove 架构](https://github.com/foxglove/foxglove-sdk)可充分利用平台内置的可视化功能。
+
+ ## 支持的格式
+
+- [Protobuf](https://github.com/foxglove/foxglove-sdk/tree/main/schemas/proto/foxglove)
+- [JSON Schema](https://github.com/foxglove/foxglove-sdk/tree/main/schemas/jsonschema)
+- [ROS 1](https://github.com/foxglove/foxglove-sdk/tree/main/schemas/ros1)
+- [ROS 2](https://github.com/foxglove/foxglove-sdk/tree/main/schemas/ros2)
+- [TypeScript](https://github.com/foxglove/foxglove-sdk/tree/main/typescript/schemas/src/types)
+- [FlatBuffers](https://github.com/foxglove/foxglove-sdk/tree/main/schemas/flatbuffer)
+
+如果您已经编写了自定义消息，可以使用[消息转换器](/)扩展将其转换为 coScene 支持的模式。
+
+## Protobuf 和 JSON 架构类型
+
+将所需的 [`.proto`文件](https://github.com/foxglove/foxglove-sdk/tree/main/schemas/proto/foxglove) 或[ `.json` 文件](https://github.com/foxglove/foxglove-sdk/tree/main/schemas/jsonschema)直接复制到您的项目中，并通过 coScene WebSocket 连接发布数据，或记录到[MCAP文件](https://mcap.dev/)中。
+
+**注意：** 
+
+对于 Protobuf 数据，类型为 [`google.protobuf.Timestamp`](https://protobuf.dev/reference/protobuf/google.protobuf/#timestamp) 或 [`google.protobuf.Duration`](https://protobuf.dev/reference/protobuf/google.protobuf/#duration) 的时间值，在[用户脚本](/)、[消息转换器](/)和 coScene 的其他部分中，将以 `sec` 和 `nsec` 字段表示，而不是 `seconds` 和 `nanos`，以与其他数据格式中的时间和持续时间类型保持一致。
+
+您还可以通过[ `@foxglove/schemas` npm 包](https://www.npmjs.com/package/@foxglove/schemas)导入 JSON 模式：
+```typescript
+import { CompressedImage } from "@foxglove/schemas/jsonschema";
+```
+我们提供用于实时数据的 WebSocket 库（[Python](https://github.com/foxglove/ws-protocol/tree/main/python)、[JavaScript](https://github.com/foxglove/ws-protocol/tree/main/typescript/ws-protocol-examples)、[C++](https://github.com/foxglove/ws-protocol/tree/main/cpp)），以及用于预录数据文件的 MCAP 写入器（[Python](https://github.com/foxglove/mcap/tree/main/python)、[JavaScript](https://github.com/foxglove/mcap/tree/main/typescript)、[C++](https://github.com/foxglove/mcap/tree/main/cpp)）。
+
+请参阅关于使用 MCAP C++ 写入器记录您的 Protobuf 数据的示例博客文章：[Recording Robocar Data with MCAP](https://foxglove.dev/blog/recording-robocar-data-with-mcap)。
+
+## 无架构类型的 JSON
+
+MCAP 支持在不指定架构类型的情况下写入 JSON 消息。要写入不带架构类型的 JSON 消息数据，请将通道的消息编码设置为`json` 并将架构类型 ID 设置为 0。这表示该通道没有架构类型。详细信息请参阅：[https://mcap.dev/spec#channel-op0x04](https://mcap.dev/spec#channel-op0x04)
+
+## ROS
+
+安装 `foxglove_msgs` 包
+```typescript
+sudo apt install ros-noetic-foxglove-msgs # For ROS 1
+sudo apt install ros-galactic-foxglove-msgs # For ROS 2
+```
+然后，在您的 ROS 项目中导入所需的 schemas 以开始发布数据：
+```typescript
+from foxglove_msgs.msg import Vector2
+
+msg = Vector2()
+msg.x = 0.5
+msg.y = 0.7
+```
+
+## TypeScript
+
+将 coScene 消息架构作为 TypeScript 类型导入，以进行类型检查。
+
+在 coScene 的[用户脚本面板](/)中，您可以使用 `Message<"foxglove.[SchemaName]"> `指定所需的架构类型：
+```typescript
+sudo apt install ros-noetic-foxglove-msgs # For ROS 1
+sudo apt install ros-galactic-foxglove-msgs # For ROS 2
+```
+然后，在您的 ROS 项目中导入所需的 schemas 以开始发布数据：
+```typescript
+import { Input, Message } from "./types";
+
+type Output = Message<"foxglove.Point2">;
+
+export const inputs = ["/input/topic"];
+export const output = "/studio_script/output_topic";
+
+export default function script(event: Input<"/input/topic">): Output {
+  return { x: 1, y: 2 };
+}
+```
+
+对于您自己的 TypeScript 项目，可以直接从 [@foxglove/schemas](https://www.npmjs.com/package/@foxglove/schemas) npm 包中导入类型：
+
+```typescript
+import { Point2 } from "@foxglove/schemas";
+const myPoint: Point2 = { x: 1, y: 2 };
+```
+
+在处理 JavaScript WebSocket 或 MCAP 项目，或在 coScene 的[用户脚本面板](/)中编写自定义数据转换脚本时，请导入这些类型。

docs/viz/9-message-schemas/2-built-in types.md

@@ -0,0 +1,52 @@
+---
+sidebar_position: 2
+---
+
+# 内置类型
+
+基本类型是 coScene 所支持消息消息架构的构建基础。
+
+消息中的每个字段都有一个类型。这个类型可以是另一个消息架构类型，一个枚举，或以下列出的基本类型之一：
+
+### `boolean`
+布尔值，取值为 `true` 或 `false`。
+
+### `bytes`
+原始二进制数据，在 JavaScript 中表示为 `Uint8Array`。
+
+### `enum`
+作为命名常量集合中充当键的数字。
+
+### `float64`
+64 位浮点数。
+
+### `string`
+以 UTF-8 编码的字符串值。
+
+### `time`
+
+| 字段 | 类型   | 必填 | 描述                 |
+|------|--------|------|----------------------|
+| `sec`  | uint32 | ✓    | 自 Unix 纪元起的秒数 |
+| `nsec` | uint32 | ✓    | 附加的纳秒数         |
+
+> **注意：** 
+
+coScene 的 Protobuf schema 中使用 [`google.protobuf.Timestamp`](https://protobuf.dev/reference/protobuf/google.protobuf/#timestamp) 表示 `time` 类型，其中字段为 `seconds` 和 `nanos`。但在[用户脚本](/)、[消息转换器](/)和 coScene 其他部分中，值将表示为 `sec` 和 `nsec` 字段，以与其他数据格式保持一致。
+
+### `duration`
+
+| 字段 | 类型   | 必填 | 描述                   |
+|------|--------|------|------------------------|
+| sec  | int32  | ✓    | 秒数偏移               |
+| nsec | uint32 | ✓    | 向正方向的纳秒偏移量   |
+
+> **注意：** 
+
+coScene 的 Protobuf schema 中使用 [`google.protobuf.Duration`](https://protobuf.dev/reference/protobuf/google.protobuf/#duration) 表示 `duration` 类型，其中字段为 `seconds` 和 `nanos`。但在[用户脚本](/)、[消息转换器](/)和 coScene 其他部分中，值将表示为 `sec` 和 `nsec` 字段，以与其他数据格式保持一致。
+
+### `uint32`
+取值范围为 `0` 到 `4294967295`（ 2 的 32 次方减 1） 的非负整数。
+
+### `int32`
+取值范围为 `-2147483648`（ −2的 31 次方 ） 到 `2147483647` （ 2 的 31 次方减 1） 的整数。

docs/viz/9-message-schemas/3-arrow-primitive.md

@@ -0,0 +1,36 @@
+---
+sidebar_position: 3
+title: ArrowPrimitive
+---
+
+# 表示箭头的基本图形
+
+`ArrowPrimitive` 是一种表示箭头的基本图形。
+
+## 父架构
+
+`ArrowPrimitive` 出现在 `SceneEntity` 消息架构中。
+
+## 架构
+
+| 字段 | 类型      | 描述                 |
+|------|----------|----------------------|
+| `pose`  | [`pose`](/)  | 箭头尾部的位置和箭头的方向。单位方向意味着箭头指向 + x 方向。 |
+| `shaft_length`  | [`float64`](./built-in%20types#float64)  | 箭杆的长度 |
+| `shaft_diameter`  | [`float64`](./built-in%20types#float64)  | 箭杆的直径 |
+| `head_length`  | [`float64`](./built-in%20types#float64)  | 箭头的长度 |
+| `head_diameter`  | [`float64`](./built-in%20types#float64)  | 箭头的直径 |
+| `color`  | [`color`](./6-color.md)  | 箭头的颜色 |
+
+## 参考
+coScene 的架构类型（schemas）是与框架无关的，可以使用任何受支持的消息编码格式来实现。
+| 编码格式   | Schema 名称                            |
+|------|--------------------------------|
+| ROS 1  | [`foxglove_msgs/ArrowPrimitive`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/ros1/ArrowPrimitive.msg) |
+| ROS 2  | [`foxglove_msgs/msg/ArrowPrimitive`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/ros2/ArrowPrimitive.msg)|
+| JSON  | [`foxglove.ArrowPrimitive`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/jsonschema/ArrowPrimitive.json) |
+| Protobuf  | [`foxglove.ArrowPrimitive`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/proto/foxglove/ArrowPrimitive.proto) |
+| FlatBuffers | [`foxglove.ArrowPrimitive`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/flatbuffer/ArrowPrimitive.fbs) |
+|OMG IDL  | [`foxglove::ArrowPrimitive`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/omgidl/foxglove/ArrowPrimitive.idl) |
+
+> **注意**：必须使用上述指定的 schema 名称，coScene 才能正确识别。

docs/viz/9-message-schemas/4-camera-calibration.md

@@ -0,0 +1,88 @@
+---
+sidebar_position: 4
+title: CameraCalibration
+---
+
+# 相机校准
+
+## 面板支持
+
+`CameraCalibration` 用于 [三维面板](../panel/2-3d-panel) 和 [图像面板](../panel/image-panel) 中。
+
+## 字段定义
+
+| 字段名            | 类型        | 描述 |
+|------------------|-------------|------|
+| `timestamp`       | [`time`](./built-in%20types#time)      | 标定数据的时间戳 |
+| `frame_id`        | [`string`](./built-in%20types#string)    | 相机的参考坐标系。该坐标系原点为相机的光学中心，图像中 +x 指向右侧，+y 向下，+z 指向图像平面内部。 |
+| `width`           | [`uint32`](./built-in%20types#uint32)    | 图像宽度 |
+| `height`          | [`uint32`](./built-in%20types#uint32)    | 图像高度 |
+| `distortion_model`| [`string`](./built-in%20types#string)      | 畸变模型名称 |
+| `D`               | [`float64[]`](./built-in%20types#float64) | 畸变参数 |
+| `K`               | [`float64[9]`](./built-in%20types#float64)| 内参矩阵（3x3 按行存储） |
+| `R`               | [`float64[9]`](./built-in%20types#float64)| 校正矩阵（仅用于立体相机，3x3 按行存储） |
+| `P`               | [`float64[12]`](./built-in%20types#float64)| 投影/相机矩阵（3x4 按行存储） |
+
+### `distortion_model`
+
+- `plumb_bob`: 参数为 k1, k2, p1, p2, k3  
+- `rational_polynomial`: 参数为 k1, k2, p1, p2, k3, k4, k5, k6  
+
+该模型基于 [OpenCV](https://docs.opencv.org/2.4/modules/calib3d/doc/camera_calibration_and_3d_reconstruction.html) 的[针孔相机模型](https://en.wikipedia.org/wiki/Distortion_%28optics%29#Software_correction)，并与[ ROS 中的实现](https://docs.ros.org/en/diamondback/api/image_geometry/html/c++/pinhole__camera__model_8cpp_source.html)一致。
+
+### `K` 内参矩阵
+
+K 是原始（未校正）图像的 3x3 行主矩阵。
+
+使用焦距（fx，fy）和主点（cx，cy）将相机坐标系中的 3D 点投影到 2D 像素坐标。
+
+```
+    [fx  0  cx]
+K = [ 0  fy  cy]
+    [ 0   0   1]
+```
+
+### `R` 校正矩阵
+
+将相机坐标系与理想立体图像平面对齐的旋转矩阵，使得两个立体图像中的极线平行。
+
+### `P` 投影矩阵
+
+```
+    [fx'  0   cx'  Tx]
+P = [ 0   fy' cy'  Ty]
+    [ 0    0    1    0]
+```
+
+此矩阵指定已处理（校正）图像的固有（相机）矩阵。也就是说，左侧 3x3 部分是校正图像的正常相机固有矩阵。
+
+它使用焦距（fx'，fy'）和主点（cx'，cy'）将相机坐标系中的 3D 点投影到 2D 像素坐标——这些可能与 K 中的值不同。
+
+对于单目相机：Tx = Ty = 0，通常也满足 R 为单位矩阵，P[1:3,1:3] = K。
+
+对于立体对，第四列 [Tx Ty 0]' 与第二台摄像机的光心在第一台摄像机的坐标系中的位置相关。我们假设 Tz = 0，因此两台摄像机位于同一立体图像平面。第一台摄像机的 Tx 始终为 Ty = 0。对于水平立体对的右侧（第二台）摄像机，Ty = 0，且 Tx = -fx' * B，其中 B 是两台摄像机之间的基线。
+
+给定一个 3D 点 `[X Y Z]'` ，该点在校正图像上的投影 `(x, y)` 可通过以下方式计算：
+
+```
+[u v w]' = P * [X Y Z 1]'
+x = u / w
+y = v / w
+```
+
+这对于立体对的两幅图像都适用。
+
+## 参考
+
+coScene 的架构类型（schemas）是与框架无关的，可以使用任何受支持的消息编码格式来实现。
+
+| 编码格式    | Schema 名称  |
+|------------|-------------|
+| ROS 1      | [`foxglove_msgs/CameraCalibration`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/ros1/CameraCalibration.msg) |
+| ROS 2      | [`foxglove_msgs/msg/CameraCalibration`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/ros2/CameraCalibration.msg) |
+| JSON       | [`foxglove.CameraCalibration`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/jsonschema/CameraCalibration.json) |
+| Protobuf   | [`foxglove.CameraCalibration`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/proto/foxglove/CameraCalibration.proto) |
+| FlatBuffers| [`foxglove.CameraCalibration`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/flatbuffer/CameraCalibration.fbs) |
+| OMG IDL    | [`foxglove::CameraCalibration`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/omgidl/foxglove/CameraCalibration.idl) |
+
+> **注意**：必须使用上述指定的 schema 名称，coScene 才能正确识别。

docs/viz/9-message-schemas/5-circle-annotation.md

@@ -0,0 +1,42 @@
+---
+sidebar_position: 5
+title: CircleAnnotation
+---
+
+# 圆形标注
+
+在二维图像上的圆形标注。
+
+## 父级架构
+
+`CircleAnnotation` 出现在 [`图像标注`](/) 消息模式中。
+
+## 字段定义
+
+| 字段名         | 类型      | 描述     |
+|--------------|-----------|----------|
+| `timestamp`    | [`time`](./built-in%20types#time)      | 圆形的时间戳                           |
+| `position`     | [`Point 2`](/)    | 圆心在图像中的二维像素坐标位置        |
+| `diameter`     | [`float64`](./built-in%20types#float64)  | 圆的直径（单位：像素）                |
+| `thickness`    | [`float64`](./built-in%20types#float64)  | 线条粗细（单位：像素）                |
+| `fill_color`   | [`color`](./6-color.md)     | 填充颜色                               |
+| `outline_color`| [`color`](./6-color.md)     | 边框颜色                               |
+
+### `position`
+
+该坐标系以图像左上角像素的左上角为原点。
+
+## 参考
+
+coScene 的架构类型（schemas）是与框架无关的，可以使用任何受支持的消息编码格式来实现。
+
+| 编码格式     | Schema 名称                     |
+|--------------|----------------------------------|
+| ROS 1        | [`foxglove_msgs/CircleAnnotation`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/ros1/CircleAnnotation.msg) |
+| ROS 2        | [`foxglove_msgs/msg/CircleAnnotation`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/ros2/CircleAnnotation.msg) |
+| JSON         | [`foxglove.CircleAnnotation`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/jsonschema/CircleAnnotation.json)      |
+| Protobuf     | [`foxglove.CircleAnnotation`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/proto/foxglove/CircleAnnotation.proto)      |
+| FlatBuffers  | [`foxglove.CircleAnnotation`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/flatbuffer/CircleAnnotation.fbs)      |
+| OMG IDL      | [`foxglove::CircleAnnotation`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/omgidl/foxglove/CircleAnnotation.idl)     |
+
+> **注意**：必须使用上述指定的 schema 名称，coScene 才能正确识别。

docs/viz/9-message-schemas/6-color.md

@@ -0,0 +1,39 @@
+---
+sidebar_position: 6
+title: Color
+---
+
+# 颜色
+
+RGBA 格式的颜色。
+
+## 面板支持
+`Color` 用于 [三维面板](../panel/2-3d-panel) 和 [图像面板](../panel/image-panel) 中。
+
+## 父级架构
+
+`CircleAnnotation` 出现在 `ArrowPrimitive`、 `CircleAnnotation`、 `CubePrimitive`、 `CylinderPrimitive`、 `LinePrimitive`、 `ModelPrimitive`、 `PointsAnnotation`、 `SpherePrimitive`、 `TextAnnotation`、 `TextPrimitive`、 `TriangleListPrimitive` 消息模式中。
+
+## 字段定义
+
+| 字段名         | 类型      | 描述     |
+|--------------|-----------|----------|
+| `r`    | [`float64`](./built-in%20types#float64)     | 红色，数值介于 0 和 1 之间                          |
+| `g`     | [`float64`](./built-in%20types#float64)     | 绿色，数值介于 0 和 1 之间                          |
+| `b`     | [`float64`](./built-in%20types#float64)  | 蓝色，数值介于 0 和 1 之间                          |
+| `a`    | [`float64`](./built-in%20types#float64)  | 透明度，数值介于 0 和 1 之间                          |
+
+## 参考
+
+coScene 的架构类型（schemas）是与框架无关的，可以使用任何受支持的消息编码格式来实现。
+
+| 编码格式     | Schema 名称                     |
+|--------------|----------------------------------|
+| ROS 1        |  [`foxglove_msgs/Color`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/ros1/Color.msg) |
+| ROS 2        |  [`foxglove_msgs/msg/Color`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/ros2/Color.msg) |
+| JSON         |  [`foxglove.Color`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/jsonschema/Color.json) |
+| Protobuf     |  [`foxglove.Color`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/proto/foxglove/Color.proto) |
+| FlatBuffers  |  [`foxglove.Color`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/flatbuffer/Color.fbs) |
+| OMG IDL      |  [`foxglove::Color`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/omgidl/foxglove/Color.idl) |
+
+> **注意**：必须使用上述指定的 schema 名称，coScene 才能正确识别。

docs/viz/9-message-schemas/7-compressed-image.md

@@ -0,0 +1,36 @@
+---
+sidebar_position: 6
+title: CompressedImage
+---
+
+# 压缩图像
+
+## 面板支持
+`CompressedImage` 用于 [三维面板](../panel/2-3d-panel) 和 [图像面板](../panel/image-panel) 中。
+
+## 字段定义
+
+| 字段名         | 类型      | 描述     |
+|--------------|-----------|----------|
+| `timestamp`    | [`time`](./built-in%20types#time)     | 图像的时间戳                         |
+| `frame_id`     | [`string`](./built-in%20types#string)     | 图像的参考坐标系。坐标系的原点是相机的光学中心。+x 指向图像右侧，+y 指向图像下方，+z 指向图像平面内部。                         |
+| `data`     | [`byte`](./built-in%20types#bytes)  | 压缩图像数据                          |
+| `format`    | [`string`](./built-in%20types#string)  | 图像格式                         |
+
+### `format`
+支持的值：Chrome 支持的图片媒体类型，例如`webp`、`jpeg`、`png`
+
+## 参考
+
+coScene 的架构类型（schemas）是与框架无关的，可以使用任何受支持的消息编码格式来实现。
+
+| 编码格式     | Schema 名称                     |
+|--------------|----------------------------------|
+| ROS 1        |  [`foxglove_msgs/CompressedImage`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/ros1/CompressedImage.msg) |
+| ROS 2        |  [`foxglove_msgs/msg/CompressedImage`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/ros2/CompressedImage.msg) | 
+| JSON         |  [`foxglove.CompressedImage`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/jsonschema/CompressedImage.json) |
+| Protobuf     |  [`foxglove.CompressedImage`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/proto/foxglove/CompressedImage.proto) |
+| FlatBuffers  |  [`foxglove.CompressedImage`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/flatbuffer/CompressedImage.fbs) |
+| OMG IDL      |  [`foxglove::CompressedImage`](https://github.com/foxglove/foxglove-sdk/blob/main/schemas/omgidl/foxglove/CompressedImage.idl) |
+
+> **注意**：必须使用上述指定的 schema 名称，coScene 才能正确识别。

docs/viz/9-message-schemas/_category_.json

@@ -1,5 +1,5 @@
 {
-  "label": "Message Schemas",
+  "label": "消息架构",
   "position": 9,
   "collapsible": true,
   "link": {