Web 可视化控制台

FastSim 提供一套基于浏览器的 Web 可视化控制台，涵盖仿真全生命周期的三大核心功能：配置编辑、实时监控和录制分析。Web 控制台作为独立进程运行，与仿真进程完全解耦——你可以在没有运行仿真时使用配置编辑器和录制查看器，也可以在仿真运行中实时监控状态。

启动

# 启动 Web 控制台（推荐方式）
joysim_web

# 指定端口
FASTSIM_WEB_PORT=3000 joysim_web

启动后在浏览器中访问：

http://localhost:8080

架构概览

• Web 控制台是独立的 Flask + Socket.IO 服务，通过子进程管理仿真
• 实时状态通过 WebSocket 推送（仿真进程在 stdout 中输出 __JOYSIM_STATE__: 前缀的 JSON 行）
• 相机画面通过 POSIX 共享内存实现零拷贝传输，延迟极低（~0.1ms 写入侧）
• 仿真进程内置的 REST API（端口 5000）可通过 Web 控制台的代理接口 /api/sim-proxy/* 调用

功能模块

Web 控制台包含四个主要页面，通过顶部导航栏切换：

Config — 配置向导

可视化的配置文件编辑器，以分步引导的方式创建或编辑仿真配置。

点击放大

五步配置流程

配置向导将完整配置拆分为 5 个步骤，逐步引导填写：

主要特性

• 加载已有配置：顶部输入配置文件路径，支持 YAML / JSON / .sim 格式
• 动态表单生成：根据 stereotype 自动渲染对应的参数表单（字段类型、默认值、约束条件均从源码自动提取）
• 实时校验：填写过程中自动校验字段合法性
• 多格式导出：完成编辑后可导出为 YAML、JSON 或 .sim 三种格式

点击放大

任务步骤中可以可视化编辑每个 action 的完整参数，包括目标物体配置（MoveTargetConfig）、位姿配置（MovePoseConfig）、规划器附着配置（PlannerAttachConfig）等嵌套子配置。

点击放大

扩展步骤中展示所有已注册的扩展类型，支持启用/禁用切换，以及每个扩展的详细参数编辑（如 observer 列表、录制参数等）。

Monitor — 实时监控

仿真运行时的实时状态监控面板。左侧边栏提供四个子面板：Overview、Detail、Charts 和 API。

启动仿真

在监控页面中直接启动仿真：

1. 在顶部地址栏输入配置文件路径
2. 点击右上角 Launch 按钮
3. 仿真以子进程启动，状态通过 WebSocket 实时推送到页面

也可以先在 Config 页面编辑好配置，保存后切换到 Monitor 页面启动。

Overview — 概览面板

点击放大

概览面板提供仿真运行的全局视图，分为四个区域：

页面右上角提供 Launch（启动仿真）和 Stop（终止仿真）按钮。

Detail — 详情面板

点击放大

详情面板提供仿真中每个实体的深度状态展示：

• 机器人状态：列出每个关节的实时位置值（带进度条可视化）、末端执行器位姿（位置 xyz + 四元数 wxyz），支持多臂机器人分臂显示
• 物体状态：每个物体的位置、旋转、stereotype 标签、物理属性（mass / density / kinematic 等）
• 相机画面：实时渲染的相机图像，按相机名称分组，显示图像分辨率和数据类型（rgb / depth / normals），点击可放大查看

Charts — 图表面板

点击放大

实时数据图表面板，以可视化曲线展示仿真过程中的动态数据：

• 关节位置/速度曲线：选择目标机器人和关节，实时绘制关节轨迹（Position 和 Velocity 双图对照）
• 末端执行器位置：EE 的 xyz 位置随时间变化的轨迹
• 物体追踪：场景中物体位置的实时变化曲线

顶部可选择关注的机器人和关节，图表自动更新。

API — 接口调试面板

点击放大

内置的仿真 REST API 浏览器，可直接在浏览器中调用仿真进程通过 @apiclass 注册的所有控制器方法：

• 左侧树形目录：按控制器分组列出所有可用 API 端点（spawnable / robot / motion_plan / visualize / simulator / action 等）
• 右侧调用面板：选中某个端点后显示其参数表单，填写参数后点击 Send Request 即可发送请求
• 参数类型自动推断，包括字符串、数字、布尔、枚举选项等
• 响应结果以 JSON 格式展示

此面板等价于在终端中使用 curl 调用仿真的内置 REST API（端口 5000），但提供了图形化的参数填写和响应查看体验。

Recording — 录制查看器

仿真结束后的录制数据分析工具，支持任务回顾、视频回放、HDF5 数据浏览和轨迹曲线分析。

加载录制

在顶部输入录制输出目录路径，点击 Load 加载。系统会自动检索目录中的 task_summary.json、HDF5 文件和视频文件。

任务总结与录制视频

点击放大

页面上方为任务总结区域：

• ACTIONS：列出任务执行的所有 action，每个 action 显示 stereotype 标签（如 release / pick / place）、描述文本、目标物体、以及 goal 评估结果
• GOALS：显示最终目标条件的评估结果（成功/失败），包括具体的判定参数（如位置偏差、物体匹配关系等）

页面下方为视频区域：

• 自动检索录制目录中的所有 .mp4 视频文件，以缩略图网格展示
• 支持多相机（Hand_Camera / Left_Camera / Right_Camera 等）× 多数据类型（rgb / depth / normals）的组合视频
• 点击缩略图即可播放

HDF5 数据浏览

点击放大

以表格形式展示 HDF5 录制文件中的所有数据集，显示录制元信息（创建时间、总帧数、导出版本、schema 版本、文件大小）。每个数据集显示：

• Path：数据集路径（如 robot_observer/Franka/joint_positions）
• Shape：数据维度（如 [258, 7] 表示 258 帧、7 个关节）
• Dtype：数据类型（float64 / float32 / object / bool 等）
• Compressed：是否使用 gzip 压缩

点击任意数据集行可展开查看其详细内容（数组预览、统计信息等）。

轨迹曲线分析

点击放大

交互式的轨迹可视化，用于分析录制数据中的运动轨迹。顶部提供预置模式标签，点击切换：

图表下方的 RAW FRAMES 区域按 observer 分组显示原始帧数量（如 robot_observer / sensor_observer / object_observer / task_observer），可用于快速确认数据完整性。

Home — 首页

Web 控制台的首页 / Dashboard，提供快速导航入口。

与仿真内置 REST API 的关系

FastSim 有两套 HTTP 服务：

Web 控制台通过内置代理 /api/sim-proxy/* 转发请求到仿真的 5000 端口，因此在 Monitor 页面的 API 面板中可以直接调用仿真的所有 REST API。

如果只需要程序化 REST API 而不需要浏览器界面，在配置中启用 server 扩展即可：

extension:
  extension_cfg_dict:
    my_server:
      stereotype: server
      enable: true
      port: 5000

详见扩展功能配置 - server和 Server REST API 参考。

Web 控制台 API 参考

Web 控制台自身也提供一组 REST API，可用于自动化集成：

仿真管理

配置管理

监控与相机

录制分析

仿真 API 代理