尧图网站建设 
Rerun Viewer 视口Viewport详解视图布局、停靠与视图类机制【免费下载链接】rerunVisualize, query, and stream to train on multimodal robotics data.项目地址: https://gitcode.com/GitHub_Trending/re/rerun导读本篇文章聚焦 Rerun Viewer 中央的**视口Viewport**区域——它是所有数据可视化的载体也是用户与多模态机器人数据交互的核心舞台。你将掌握如何通过拖拽视图标题完成停靠与分页、如何理解最大化与视图控件、如何认识 11 种内置视图类及其与 Blueprint/Selection 面板的联动最后从源码层面理解视口的实现机制容器布局、最大化状态与新增视图命令。阅读完本文你将能够像操作 IDE 一样高效地编排自己的 Rerun 可视化工作区。视口是什么视图的容器与舞台在 Rerun Viewer 的布局体系中视口Viewport位于窗口正中央是存放一个或多个视图View的灵活区域。官方将其描述为 where your visualizations live即所有可视化内容实际渲染的地方相关说明见 overview.md。视口由若干个视图组成每个视图View是一块独立的可视化面板例如一个 3D 场景、一张时间序列曲线图、一个 2D 图像画布等。视图可以被自由排列你可以抓住任意视图的标题栏title将其停靠dock到视口的任意位置或者与其他视图合并形成标签页tabs。这一交互模型与 egui 的 tile 布局体系一脉相承在源码中视口的布局树由 container.rs 管理其中直接使用了egui_tiles::ContainerKind枚举包含Grid网格、Tabs标签页、Horizontal水平、Vertical垂直四种布局容器类型见container.rs第 156-165 行与 263-282 行的匹配分支这与我们在 UI 中看到的停靠与分页行为完全对应。视图控件View controls标题栏的完整交互每个视图的标题栏不仅是拖拽停靠的手柄还承载着与 Blueprint 面板、Selection 面板的联动逻辑。根据 viewport.md 的说明视图标题栏提供以下交互能力点击标题 在 Blueprint 面板中选中点击视图的标题效果等同于在 Blueprint 面板 中选中该视图随后该视图的附加信息与设置项会出现在 Selection 面板 中。这意味着你可以通过点击视口内的标题快速把右侧面板切换到对应的视图配置上下文而不必在左侧的 Blueprint 树中逐层查找。帮助图标查看当前视图的导航方式每个视图右上角都有一个帮助图标? / 信息图标。将鼠标悬停其上会显示该特定视图的导航与操作说明。由于不同视图类的交互方式差异很大例如 3D 视图支持旋转、缩放、平移而时序图支持框选缩放官方建议在不确定如何操作某个视图时先悬停帮助图标获取提示。这一设计在 Viewer 的 UI 概览文档中也被强调most items in the UI show a tooltip upon hovering见 overview.md。最大化按钮单视图全屏聚焦最大化maximize按钮让单个视图填满整个视口区域非常适合在数据探索时聚焦某一视图。约束条件很明确同一时刻只能有一个视图处于最大化状态最大化后其余视图暂时被隐藏/折叠但布局结构不会被破坏。从源码可以验证这一机制的实现在 viewport_blueprint.rs 中视口蓝图保存了一个maximized: OptionViewId字段第 51-57 行其含义在注释中写明If Self::maximized is set, this tree is ignored一旦设置了最大化视图原本的布局树就被忽略。该字段由 Blueprint 组件ViewMaximized持久化第 96-97 行并通过set_maximized方法第 813-819 行写入蓝图存储同时当被最大化的视图被删除时系统会自动清理该状态第 1092-1094 行避免留下悬挂引用。视图类View classes视图的类型系统Rerun 内置了多种视图类View class每一种都针对特定类型的可视化例如 3D 场景或时间序列曲线。视图类的完整清单见 views.md当前仓库中共有 11 种内置视图类视图类用途Spatial3DView查看空间 3D 数据Spatial2DView查看空间 2D 数据TimeSeriesView查看标量随时间的变化时序曲线BarChartView柱状图TensorView查看任意维度的张量TextDocumentView查看单个文本文档TextLogView查看文本日志流GraphView有向/无向图的时变可视化MapView2D 地图视图展示地理空间图元DataframeView以表格形式展示任意数据StateTimelineView展示随时间的状态迁移配合StateChangearchetype 使用视图类决定什么视图类在视图创建时指定它决定了三件事见 viewport.md该视图可以显示哪些实体例如Spatial3DView能显示带 3D 变换、网格、点云等组件的实体而TextLogView只能显示文本日志类实体如何显示它们即渲染方式与默认视觉表现如何与它们交互例如 3D 视图支持轨道旋转时序图支持框选缩放地图视图支持平移缩放。从架构层面看每个视图类对应一个 View 的 blueprint 定义与其ViewPartSystem集合——视图类决定了哪些可视化系统visualizer systems会被注册到该视图中进而决定哪些实体组件能被正确渲染。视图的创建途径视图类在创建时被固定且视图可以通过两种途径创建见 viewport.md 与 configure-the-viewer.md从 Viewer 界面创建点击 Blueprint 面板顶部的 按钮添加视图或容器或在已有视图中选中实体后右键选择 Add to new view从上下文菜单创建新视图详见 navigating-the-viewer.md从代码创建通过 Blueprint API 以编程方式定义视图这是构建可复现布局、按数据动态生成视图的推荐方式。源码层面新增视图最终会转换为一条ViewportCommand::AddView命令在 viewport_blueprint.rs 的add_views方法第 430-450 行中视图通过enqueue_command(ViewportCommand::AddView { … })加入视口命令枚举定义于同文件第 989 行附近。而在 Viewer 应用中界面上的 按钮会调用 command_handling.rs 第 1337-1353 行的show_add_view_or_container_modal弹窗让用户选择要添加的视图类。视口布局与蓝图Blueprint的关系要正确理解视口必须理解它与 Blueprint 的关系视口的内容与布局完全由 Blueprint 定义——你在视口中做的任何改动移动、停靠、新增、删除、最大化本质上都是在修改 Blueprint。Blueprint 面板blueprints.md以树状结构展示这份蓝图视口根容器root container嵌套容器Horizontal / Vertical / Grid / Tabs 四种类型容器内的视图每个视图中显示的实体。因此视口不是独立于 Blueprint 的画布而是 Blueprint 的渲染结果。理解这一点就能理解为什么视图标题的点击会与 Blueprint 面板、Selection 面板三向联动。四种布局容器视口中的视图按层级组织在容器container中容器有四种类型见 navigating-the-viewer.md 与 container.rsHorizontal视图并排排列左右分布Vertical视图上下堆叠Grid视图按网格排列Tabs视图以标签页形式呈现同一时刻只显示一个。拖拽视图标题到视口的不同边缘即可完成停靠从而隐式地创建或改变这些容器结构也可以直接拖拽 Blueprint 面板中的条目来重组层级或在 Selection 面板中通过下拉框修改容器类型。视图内容从何而来实体查询与数据蓝本视口内每个视图显示哪些实体由该视图的**实体查询entity query**决定。在 Blueprint 面板中看到的实体项实际上指向它们的数据蓝本data blueprint——即实体 其关联的蓝图设置这些设置只对当前视图中出现的该实体生效见 blueprints.md。向视图添加或重新添加实体的标准流程为在 Blueprint 面板中选中目标视图点击 Selection 面板中的按钮打开实体选择器entity picker选择要添加的实体只显示与该视图类型兼容的实体。实体被加入视图后系统会基于**实体路径Entity Path**的层级自动创建分组Groups用于组织大型视图并支持对蓝图的层级化操作。这些分组仅服务于蓝图组织与已记录的数据相互独立。从源码看视口的实现原理对想深入理解视口机制的读者以下是仓库中可直接研读的实现证据视口蓝图的核心数据结构viewport_blueprint.rs。ViewportBlueprint持有根容器与maximized: OptionViewId状态提供add_views、set_maximized等操作方法并负责把视口状态序列化为 Blueprint 组件ViewportBlueprintarchetype。容器与停靠布局container.rs。其中ContainerKindGrid/Tabs/Horizontal/Vertical直接映射到 egui_tiles 的容器类型GridColumns、RowShare、ColumnShare、ActiveTab等组件负责网格列数与分割比例等布局参数的持久化。实体添加信息entity_add_info.rs处理实体查询与视图兼容性判断。新增视图的 UI 入口command_handling.rs 第 1337-1353 行Viewer 通过模态弹窗show_add_view_or_container_modal引导用户选择视图类并加入视口。自定义视图类扩展视口的能力边界如果内置的 11 种视图类无法满足需求Rerun 允许开发者以 Rust 实现全新的视图类且自定义视图与内置视图共享完全相同的接口见 extend-ui.md。实现方式有三种递进路径嵌入自定义 UI 面板创建自己的eframe应用并内嵌re_viewer用egui添加自定义面板为内置视图注册自定义可视化器例如向Spatial3DView添加自定义 GPU 渲染器无需从头实现视图类实现全新视图类在启动时向 Viewer 注册一个完整的自定义 View class可参考仓库中的custom_view示例examples/rust/custom_view。注意官方明确提示这些扩展接口尚未稳定实现自定义扩展的代码可能随 Rerun 的每次发布而需要调整。小结视口是 Rerun Viewer 中承载一切可视化的核心区域。掌握以下要点即可高效使用它拖拽视图标题进行停靠与分页视口布局本质上是 Blueprint 的渲染结果点击标题联动 Selection 面板悬停右上角帮助图标获取视图操作提示最大化按钮让单视图铺满视口且同一时刻仅允许一个视图最大化视图类在创建时确定决定显示内容、渲染方式与交互方式共 11 种内置类可选布局由 Horizontal / Vertical / Grid / Tabs 四种容器组织可从界面或代码Blueprint API创建与调整如需进一步了解视口周边机制可继续阅读 Blueprint 面板、Selection 面板、Timeline 面板 与 配置 Viewer 指南。【免费下载链接】rerunVisualize, query, and stream to train on multimodal robotics data.项目地址: https://gitcode.com/GitHub_Trending/re/rerun创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Rerun Viewer 视口（Viewport）详解：视图布局、停靠与视图类机制
Rerun Viewer 视口Viewport详解视图布局、停靠与视图类机制【免费下载链接】rerunVisualize, query, and stream to train on multimodal robotics data.项目地址: https://gitcode.com/GitHub_Trending/re/rerun导读本篇文章聚焦 Rerun Viewer 中央的**视口Viewport**区域——它是所有数据可视化的载体也是用户与多模态机器人数据交互的核心舞台。你将掌握如何通过拖拽视图标题完成停靠与分页、如何理解最大化与视图控件、如何认识 11 种内置视图类及其与 Blueprint/Selection 面板的联动最后从源码层面理解视口的实现机制容器布局、最大化状态与新增视图命令。阅读完本文你将能够像操作 IDE 一样高效地编排自己的 Rerun 可视化工作区。视口是什么视图的容器与舞台在 Rerun Viewer 的布局体系中视口Viewport位于窗口正中央是存放一个或多个视图View的灵活区域。官方将其描述为 where your visualizations live即所有可视化内容实际渲染的地方相关说明见 overview.md。视口由若干个视图组成每个视图View是一块独立的可视化面板例如一个 3D 场景、一张时间序列曲线图、一个 2D 图像画布等。视图可以被自由排列你可以抓住任意视图的标题栏title将其停靠dock到视口的任意位置或者与其他视图合并形成标签页tabs。这一交互模型与 egui 的 tile 布局体系一脉相承在源码中视口的布局树由 container.rs 管理其中直接使用了egui_tiles::ContainerKind枚举包含Grid网格、Tabs标签页、Horizontal水平、Vertical垂直四种布局容器类型见container.rs第 156-165 行与 263-282 行的匹配分支这与我们在 UI 中看到的停靠与分页行为完全对应。视图控件View controls标题栏的完整交互每个视图的标题栏不仅是拖拽停靠的手柄还承载着与 Blueprint 面板、Selection 面板的联动逻辑。根据 viewport.md 的说明视图标题栏提供以下交互能力点击标题 在 Blueprint 面板中选中点击视图的标题效果等同于在 Blueprint 面板 中选中该视图随后该视图的附加信息与设置项会出现在 Selection 面板 中。这意味着你可以通过点击视口内的标题快速把右侧面板切换到对应的视图配置上下文而不必在左侧的 Blueprint 树中逐层查找。帮助图标查看当前视图的导航方式每个视图右上角都有一个帮助图标? / 信息图标。将鼠标悬停其上会显示该特定视图的导航与操作说明。由于不同视图类的交互方式差异很大例如 3D 视图支持旋转、缩放、平移而时序图支持框选缩放官方建议在不确定如何操作某个视图时先悬停帮助图标获取提示。这一设计在 Viewer 的 UI 概览文档中也被强调most items in the UI show a tooltip upon hovering见 overview.md。最大化按钮单视图全屏聚焦最大化maximize按钮让单个视图填满整个视口区域非常适合在数据探索时聚焦某一视图。约束条件很明确同一时刻只能有一个视图处于最大化状态最大化后其余视图暂时被隐藏/折叠但布局结构不会被破坏。从源码可以验证这一机制的实现在 viewport_blueprint.rs 中视口蓝图保存了一个maximized: OptionViewId字段第 51-57 行其含义在注释中写明If Self::maximized is set, this tree is ignored一旦设置了最大化视图原本的布局树就被忽略。该字段由 Blueprint 组件ViewMaximized持久化第 96-97 行并通过set_maximized方法第 813-819 行写入蓝图存储同时当被最大化的视图被删除时系统会自动清理该状态第 1092-1094 行避免留下悬挂引用。视图类View classes视图的类型系统Rerun 内置了多种视图类View class每一种都针对特定类型的可视化例如 3D 场景或时间序列曲线。视图类的完整清单见 views.md当前仓库中共有 11 种内置视图类视图类用途Spatial3DView查看空间 3D 数据Spatial2DView查看空间 2D 数据TimeSeriesView查看标量随时间的变化时序曲线BarChartView柱状图TensorView查看任意维度的张量TextDocumentView查看单个文本文档TextLogView查看文本日志流GraphView有向/无向图的时变可视化MapView2D 地图视图展示地理空间图元DataframeView以表格形式展示任意数据StateTimelineView展示随时间的状态迁移配合StateChangearchetype 使用视图类决定什么视图类在视图创建时指定它决定了三件事见 viewport.md该视图可以显示哪些实体例如Spatial3DView能显示带 3D 变换、网格、点云等组件的实体而TextLogView只能显示文本日志类实体如何显示它们即渲染方式与默认视觉表现如何与它们交互例如 3D 视图支持轨道旋转时序图支持框选缩放地图视图支持平移缩放。从架构层面看每个视图类对应一个 View 的 blueprint 定义与其ViewPartSystem集合——视图类决定了哪些可视化系统visualizer systems会被注册到该视图中进而决定哪些实体组件能被正确渲染。视图的创建途径视图类在创建时被固定且视图可以通过两种途径创建见 viewport.md 与 configure-the-viewer.md从 Viewer 界面创建点击 Blueprint 面板顶部的 按钮添加视图或容器或在已有视图中选中实体后右键选择 Add to new view从上下文菜单创建新视图详见 navigating-the-viewer.md从代码创建通过 Blueprint API 以编程方式定义视图这是构建可复现布局、按数据动态生成视图的推荐方式。源码层面新增视图最终会转换为一条ViewportCommand::AddView命令在 viewport_blueprint.rs 的add_views方法第 430-450 行中视图通过enqueue_command(ViewportCommand::AddView { … })加入视口命令枚举定义于同文件第 989 行附近。而在 Viewer 应用中界面上的 按钮会调用 command_handling.rs 第 1337-1353 行的show_add_view_or_container_modal弹窗让用户选择要添加的视图类。视口布局与蓝图Blueprint的关系要正确理解视口必须理解它与 Blueprint 的关系视口的内容与布局完全由 Blueprint 定义——你在视口中做的任何改动移动、停靠、新增、删除、最大化本质上都是在修改 Blueprint。Blueprint 面板blueprints.md以树状结构展示这份蓝图视口根容器root container嵌套容器Horizontal / Vertical / Grid / Tabs 四种类型容器内的视图每个视图中显示的实体。因此视口不是独立于 Blueprint 的画布而是 Blueprint 的渲染结果。理解这一点就能理解为什么视图标题的点击会与 Blueprint 面板、Selection 面板三向联动。四种布局容器视口中的视图按层级组织在容器container中容器有四种类型见 navigating-the-viewer.md 与 container.rsHorizontal视图并排排列左右分布Vertical视图上下堆叠Grid视图按网格排列Tabs视图以标签页形式呈现同一时刻只显示一个。拖拽视图标题到视口的不同边缘即可完成停靠从而隐式地创建或改变这些容器结构也可以直接拖拽 Blueprint 面板中的条目来重组层级或在 Selection 面板中通过下拉框修改容器类型。视图内容从何而来实体查询与数据蓝本视口内每个视图显示哪些实体由该视图的**实体查询entity query**决定。在 Blueprint 面板中看到的实体项实际上指向它们的数据蓝本data blueprint——即实体 其关联的蓝图设置这些设置只对当前视图中出现的该实体生效见 blueprints.md。向视图添加或重新添加实体的标准流程为在 Blueprint 面板中选中目标视图点击 Selection 面板中的按钮打开实体选择器entity picker选择要添加的实体只显示与该视图类型兼容的实体。实体被加入视图后系统会基于**实体路径Entity Path**的层级自动创建分组Groups用于组织大型视图并支持对蓝图的层级化操作。这些分组仅服务于蓝图组织与已记录的数据相互独立。从源码看视口的实现原理对想深入理解视口机制的读者以下是仓库中可直接研读的实现证据视口蓝图的核心数据结构viewport_blueprint.rs。ViewportBlueprint持有根容器与maximized: OptionViewId状态提供add_views、set_maximized等操作方法并负责把视口状态序列化为 Blueprint 组件ViewportBlueprintarchetype。容器与停靠布局container.rs。其中ContainerKindGrid/Tabs/Horizontal/Vertical直接映射到 egui_tiles 的容器类型GridColumns、RowShare、ColumnShare、ActiveTab等组件负责网格列数与分割比例等布局参数的持久化。实体添加信息entity_add_info.rs处理实体查询与视图兼容性判断。新增视图的 UI 入口command_handling.rs 第 1337-1353 行Viewer 通过模态弹窗show_add_view_or_container_modal引导用户选择视图类并加入视口。自定义视图类扩展视口的能力边界如果内置的 11 种视图类无法满足需求Rerun 允许开发者以 Rust 实现全新的视图类且自定义视图与内置视图共享完全相同的接口见 extend-ui.md。实现方式有三种递进路径嵌入自定义 UI 面板创建自己的eframe应用并内嵌re_viewer用egui添加自定义面板为内置视图注册自定义可视化器例如向Spatial3DView添加自定义 GPU 渲染器无需从头实现视图类实现全新视图类在启动时向 Viewer 注册一个完整的自定义 View class可参考仓库中的custom_view示例examples/rust/custom_view。注意官方明确提示这些扩展接口尚未稳定实现自定义扩展的代码可能随 Rerun 的每次发布而需要调整。小结视口是 Rerun Viewer 中承载一切可视化的核心区域。掌握以下要点即可高效使用它拖拽视图标题进行停靠与分页视口布局本质上是 Blueprint 的渲染结果点击标题联动 Selection 面板悬停右上角帮助图标获取视图操作提示最大化按钮让单视图铺满视口且同一时刻仅允许一个视图最大化视图类在创建时确定决定显示内容、渲染方式与交互方式共 11 种内置类可选布局由 Horizontal / Vertical / Grid / Tabs 四种容器组织可从界面或代码Blueprint API创建与调整如需进一步了解视口周边机制可继续阅读 Blueprint 面板、Selection 面板、Timeline 面板 与 配置 Viewer 指南。【免费下载链接】rerunVisualize, query, and stream to train on multimodal robotics data.项目地址: https://gitcode.com/GitHub_Trending/re/rerun创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考