diff --git a/docs/viz/3-layout.md b/docs/viz/3-layout.md index be62a03c1..3fb1bbbb1 100644 --- a/docs/viz/3-layout.md +++ b/docs/viz/3-layout.md @@ -4,93 +4,94 @@ sidebar_position: 3 # 布局 -「布局」是可视化界面中安排元素的方式，可与项目和组织成员共享。 +「布局」是可视化界面中安排元素的方式。它可与项目成员共享，有助于将设备数据以直观的可视化方式呈现，助力用户高效查看与分析各类多模态数据。 ## 创建布局 -点击【布局菜单栏】，可通过以下方式创建布局：【创建空白布局】、【复制现有布局】或【从文件导入布局】。 +点击可视化界面右上角的【布局】进入布局管理页，可通过以下方式创建布局：【创建空白布局】、【从其他项目复制布局】或【本地文件导入】。 ![viz-8-1.png](./img/viz-8-1.png) - -### 创建空白布局 - -在布局菜单栏点击【创建空白布局】按钮进入以下页面，选择一个需要的面板： - ![viz-8-2.png](./img/viz-8-2.png) -### 复制布局创建 +### 创建空白布局 -1. 对于组织中已有的布局，可右键点击并选择弹出菜单栏中的【创建个人副本】，将该布局添加到个人布局中。 +填入新的布局名称、类型（个人布局或项目布局），以及用于存储布局的可选文件夹 - ![viz-8-3.png](./img/viz-8-3.png) +![viz-8-3.png](./img/viz-8-3.png) -2. 同样地，右键点击个人布局中的复制选项，可创建该布局的副本。 +确定后，进入新布局配置页，您可从页面中直接选择感兴趣的面板，或点击右上角的添加面板按钮选择更多面板。 - ![viz-8-4.png](./img/viz-8-4.png) +![viz-8-4.png](./img/viz-8-4.png) -### 导入布局 +:::info +🤖 要想在一个布局中使用较多的面板，请使用 **选项卡** 面板功能。按住 Shift 并点击多个面板并选择“按选项卡分组”，即可立即组织它们，无需手动拖动。 +::: -通过布局菜单栏中的【从文件导入】可将本地的布局文件导入到个人的布局中。 +- 在配置完成后，可点击顶部的【保存】按钮，将布局永久保存； +- 若未点击保存更改，将会存储在当前浏览器的缓存中，以便于下次可视化数据使用； +- 点击【撤销】按钮，布局将恢复到上一次的存储状态。 ![viz-8-5.png](./img/viz-8-5.png) -## 推荐布局 -「推荐布局」是一种预先设定并建议使用的布局类型，它包括「组织推荐布局」和「项目推荐布局」。 +### 从其他项目复制布局 -### 组织推荐 -> 仅组织管理员可设置 +通过复制已有项目的布局，您可以快速获取一个基础的、符合部分需求的布局框架，然后在此基础上进行修改和调整，大大节省了布局设计的时间，提升工作效率。 -新建的项目会自动将「组织推荐布局」作为「项目推荐布局」，当项目成员播放记录时，若无可用布局，会默认使用项目布局。 +![viz-8-6.png](./img/viz-8-6.png) -可进入头像菜单栏的【组织管理】中的【可视化布局配置】，选择本组织推荐使用的布局。 +### 本地文件导入 -![viz-8-6.png](./img/viz-8-6.png) +通过本地文件导入可从当前电脑的文件系统中选择一个布局 json 文件导入。 -### 项目推荐 -> 仅项目管理员及以上角色可设置 +![viz-8-7.png](./img/viz-8-7.png) -当项目成员播放记录时，若无可用布局，会默认使用项目布局。 +## 布局使用场景 -可进入【项目设置】中的【可视化布局配置】，选择本项目推荐使用的布局。 +### 个人布局 -![viz-8-7.png](./img/viz-8-7.png) +个人布局只有您可以访问 - 其他任何人都无法查看、加载或编辑。 -### 记录推荐 +您的个人布局的更改将同步到您的所有电脑，并可复制为项目布局以共享使用。 -「记录推荐布局」是记录的默认布局，任意用户播放此记录，都会使用该布局。 +### 项目布局 -在可视化页面中的【布局菜单栏】，右键点击需设置的布局，点击「复制为记录默认布局」。 +项目布局提供了团队整理一组规范的布局来完成项目内常见的可视化数据方式。 -![viz-8-9.png](./img/viz-8-10.png) +当项目公开时，项目布局也将一并公开，以供游客浏览可视化数据时可使用合适的布局。 -如图示，布局 “NuScenes” 就被成功地设置成为了记录推荐布局。 +## 布局的管理 -![viz-8-10.png](./img/viz-8-9.png) +可以直接从左侧浏览布局文件夹，它们分为：所有、个人、项目。 -### 布局优先级 -对于同时设置了三种推荐布局的记录而言，「记录推荐布局」的优先级大于「项目推荐布局」大于「组织推荐布局」。 +![viz-8-8.png](./img/viz-8-8.png) -## 管理布局 +### 使用布局 -点击布局名称右侧的【操作】图标，可对布局进行管理，如：保存更改、撤销更改、重命名、复制、共享、导出、删除等。 +在管理布局中，找到想要使用的布局，点击布局名称，即可切换为对应布局 -![viz-8-11](./img/viz-8-11.png) +![viz-8-9.png](./img/viz-8-9.png) -### 重命名布局 +:::info +🤖 系统会记住您上次在**当前项目中使用的布局**，下次执行可视化操作时，将默认使用上次的布局。 +::: +### 重命名布局 修改布局的名称以便更好地识别和分类。 -### 导出布局 +### 复制布局 +将布局复制为个人 / 当前项目布局。 -将布局保存为文件，以便共享或在其他环境中使用。 +### 移动布局 +将布局移动到当前分类（个人/项目）下的其他文件夹中。 -### 分享布局 - -将布局与团队共享，使组织成员能够使用和更改分享的布局副本 +### 导出布局 +将布局导出为 json 文件，以便分享或在其他环境中使用。 ### 删除布局 - -移除不再需要的布局，保持布局列表的整洁和高效 +删除不再需要的布局，保持布局列表的整洁和高效。 +:::info +🤖 若是删除项目布局，可访问此项目的用户（项目管理员、项目成员、项目只读成员、公开项目的游客）将无法使用此布局。 +::: --- diff --git a/docs/viz/9-message-schemas/introduction.md b/docs/viz/9-message-schemas/introduction.md index 86bb6427a..15f41c7b9 100644 --- a/docs/viz/9-message-schemas/introduction.md +++ b/docs/viz/9-message-schemas/introduction.md @@ -84,4 +84,4 @@ import { Point2 } from "@foxglove/schemas"; const myPoint: Point2 = { x: 1, y: 2 }; ``` -在处理 JavaScript WebSocket 或 MCAP 项目，或在 coScene 的用户脚本面板中编写自定义数据转换脚本时，请导入这些类型。 \ No newline at end of file +在处理 JavaScript WebSocket 或 MCAP 项目，或在 coScene 的用户脚本面板中编写自定义数据转换脚本时，请导入这些类型。 diff --git a/docs/viz/img/viz-8-1.png b/docs/viz/img/viz-8-1.png index 0225e29d8..b1e4b9e11 100644 Binary files a/docs/viz/img/viz-8-1.png and b/docs/viz/img/viz-8-1.png differ diff --git a/docs/viz/img/viz-8-2.png b/docs/viz/img/viz-8-2.png index 1f7a6db71..764b6ffcc 100644 Binary files a/docs/viz/img/viz-8-2.png and b/docs/viz/img/viz-8-2.png differ diff --git a/docs/viz/img/viz-8-3.png b/docs/viz/img/viz-8-3.png index 3570acfc2..479f822ea 100644 Binary files a/docs/viz/img/viz-8-3.png and b/docs/viz/img/viz-8-3.png differ diff --git a/docs/viz/img/viz-8-4.png b/docs/viz/img/viz-8-4.png index 4cae51bbd..509a48c54 100644 Binary files a/docs/viz/img/viz-8-4.png and b/docs/viz/img/viz-8-4.png differ diff --git a/docs/viz/img/viz-8-5.png b/docs/viz/img/viz-8-5.png index e0a91eea1..dd341accf 100644 Binary files a/docs/viz/img/viz-8-5.png and b/docs/viz/img/viz-8-5.png differ diff --git a/docs/viz/img/viz-8-6.png b/docs/viz/img/viz-8-6.png index c60d8a19c..e17ad3572 100644 Binary files a/docs/viz/img/viz-8-6.png and b/docs/viz/img/viz-8-6.png differ diff --git a/docs/viz/img/viz-8-7.png b/docs/viz/img/viz-8-7.png index 74bef94d2..c76de7a16 100644 Binary files a/docs/viz/img/viz-8-7.png and b/docs/viz/img/viz-8-7.png differ diff --git a/docs/viz/img/viz-8-8.png b/docs/viz/img/viz-8-8.png new file mode 100644 index 000000000..8c4ebbc97 Binary files /dev/null and b/docs/viz/img/viz-8-8.png differ diff --git a/docs/viz/img/viz-8-9.png b/docs/viz/img/viz-8-9.png index 2952b2b3f..80f98f910 100644 Binary files a/docs/viz/img/viz-8-9.png and b/docs/viz/img/viz-8-9.png differ diff --git a/i18n/en/docusaurus-plugin-content-docs/current/viz/3-layout.md b/i18n/en/docusaurus-plugin-content-docs/current/viz/3-layout.md index 938f75798..9c8a4c221 100644 --- a/i18n/en/docusaurus-plugin-content-docs/current/viz/3-layout.md +++ b/i18n/en/docusaurus-plugin-content-docs/current/viz/3-layout.md @@ -4,91 +4,101 @@ sidebar_position: 3 # Layout -"Layout" refers to the arrangement of elements in the visualization interface, which can be shared with project and organization members. +"Layout" is the way to arrange elements in a visual interface. It can be shared with project members, helping to present device data in an intuitive visual manner, enabling users to efficiently view and analyze various types of multimodal data. -## Creating a Layout +## Create a layout -Click the **Layout Menu** to create a layout through the following methods: **Create Blank Layout**, **Copy Existing Layout**, or **Import Layout from File**. +Click on **Layout** in the upper - right corner of the visual interface to enter the layout management page. You can create a layout in the following ways: **Create blank layout**, **Copy from other project**, or **Import from file**. ![viz-8-1-Eng](./img/viz-8-1-Eng.png) +![viz-8-2-Eng](./img/viz-8-2-Eng.png) -### Create Blank Layout +### Create blank layout -Click the **Create Blank Layout** button in the Layout Menu to enter the following page, then select a desired panel. +1. Fill in the new layout name, type (Personal layout or Project layout), and the optional folder for storing the layout. -![viz-8-2-Eng](./img/viz-8-2-Eng.png) +![viz-8-3-Eng](./img/viz-8-3-Eng.png) -### Copy Layout Creation +2. After confirmation, enter the new layout configuration page. You can directly select the panels you are interested in from the page, or click the "Add Panel" button in the upper - right corner to select more panels. -1. For a preferred layout existing in the organization, right-click and select **Create Personal Copy** from the popup menu to add the layout to personal layouts. + ![viz-8-4-Eng](./img/viz-8-4-Eng.png) - ![viz-8-3-Eng](./img/viz-8-3-Eng.png) +:::info +🤖 If you want to use more panels in a layout, use the **Tab** panel function. Hold down Shift and click multiple panels, then select **Group by Tabs**, and you can organize them immediately without manual dragging. +::: -2. Similarly, right-click **Duplicate** in personal layouts to create a copy of the layout. +3. After the configuration is completed + - You can click the **Save** button at the top to save the layout permanently. + - If you do not click to save the changes, they will be stored in the cache of the current browser for use in the next data visualization. + - Click the **Revert** button, and the layout will return to its last saved state. + + ![viz-8-5-Eng](./img/viz-8-5-Eng.png) - ![viz-8-4-Eng](./img/viz-8-4-Eng.png) -### Import Layout +### Copy from other project -Import a local layout file into personal layouts through **Import from File** in the Layout Menu. +By copying the layout of an existing project, you can quickly obtain a basic layout framework that meets some of your requirements. Then, you can modify and adjust it based on this framework, which greatly saves the time of layout design and improves work efficiency. -![viz-8-5-Eng](./img/viz-8-5-Eng.png) +![viz-8-6-Eng](./img/viz-8-6-Eng.png) -## Recommended Layouts +### Import from file -"Recommended Layouts" are preset and suggested layout types, including **Organization Recommended Layouts** and **Project Recommended Layouts**. +You will be prompted to select a layout json file from the file system of your current computer for import. -### Organization Recommended -> Only organization administrators can configure +![viz-8-7-Eng](./img/viz-8-7-Eng.png) -Newly created projects will automatically use the "Organization Recommended Layout" as the "Project Recommended Layout". When project members play a record without any available layouts, the project layout will be used by default. +## Layout use cases -You can access **Layout Configuration** in **Organization Management** from the avatar menu to select the recommended layout for your organization. +### Personal layout -![viz-8-6-Eng](./img/viz-8-6-Eng.png) +Only you can access your personal layout - no one else can view, load, or edit it. -### Project Recommended -> Only project administrators and higher roles can configure +Changes to your personal layout will be synced to all your computers and can be copied as a project layout for sharing. -When project members play a record without any available layouts, the project layout will be used by default. +### Project layout -You can access **Layout Configuration** in **Project Settings** to select the recommended layout for your project. +Project layouts provide a way for teams to organize a set of standardized layouts for common data visualization within the project. -![viz-8-7-Eng](./img/viz-8-7-Eng.png) +When a project is made public, the project layouts will also be made public so that visitors can use suitable layouts when browsing the visualized data. -### Record Recommended -The "Record Recommended Layout" is the default layout for a record. When any user plays this record, this layout will be used. +## Manage layouts -In the visualization page, right-click the layout you want to set in the **Layout Menu** and click "Copy as Record Default Layout". +You can directly browse the layout folders on the left side. They are divided into: All, Personal, and Project. ![viz-8-8-Eng](./img/viz-8-8-Eng.png) -As shown in the figure, the layout "NuScenes" has been successfully set as the record recommended layout. Entering the visualization interface of the record will then use this layout by default. +### Use layout + +In the layout management section, find the layout you want to use and click the layout name to switch to the corresponding layout. ![viz-8-9-Eng](./img/viz-8-9-Eng.png) -## Layout Priority -For records with all three recommended layouts set, the priority is **Record Recommended Layout** > **Project Recommended Layout** > **Organization Recommended Layout**. +:::info +🤖 The system will remember the layout you last used in the current project. The next time you perform a visualization operation, it will default to using the last - used layout. +::: -## Managing Layouts -Click the **Actions** icon next to the layout name to manage the layout, including: save changes, revert, rename, copy, share, export, delete, etc. +### Rename -![viz-8-11-Eng](./img/viz-8-11-Eng.png) +Modify the name of the layout for better identification and classification. -### Rename +### Copy -Change the name of the layout for better identification and categorization. +Copy the layout as a personal/current project layout. -### Export +### Move to folder -Save the layout as a file for sharing or use in other environments. +Move the layout to other folders within the current category (personal/project). -### Share with Team +### Export -Share the layout with the team, allowing organization members to use and modify shared layout copies. +Export the layout as a json file for sharing or use in other environments. ### Delete -Remove layouts that are no longer needed to keep the layout list clean and efficient. +Delete layouts that are no longer needed to keep the layout list clean and efficient. + +:::info +🤖 If you delete a project layout, users who can access this project will no longer be able to use this layout. +::: --- diff --git a/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-1-Eng.png b/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-1-Eng.png index b3a67ec63..dac299d7c 100644 Binary files a/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-1-Eng.png and b/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-1-Eng.png differ diff --git a/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-2-Eng.png b/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-2-Eng.png index 209484451..c001a72d1 100644 Binary files a/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-2-Eng.png and b/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-2-Eng.png differ diff --git a/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-3-Eng.png b/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-3-Eng.png index 8f50f4602..a3338dce9 100644 Binary files a/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-3-Eng.png and b/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-3-Eng.png differ diff --git a/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-4-Eng.png b/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-4-Eng.png index ed22cc617..c0843801e 100644 Binary files a/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-4-Eng.png and b/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-4-Eng.png differ diff --git a/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-5-Eng.png b/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-5-Eng.png index 5ea615273..f5a0abbff 100644 Binary files a/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-5-Eng.png and b/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-5-Eng.png differ diff --git a/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-6-Eng.png b/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-6-Eng.png index 32810986d..22d8b48da 100644 Binary files a/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-6-Eng.png and b/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-6-Eng.png differ diff --git a/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-7-Eng.png b/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-7-Eng.png index 2f60c4ffc..72a9f5db4 100644 Binary files a/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-7-Eng.png and b/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-7-Eng.png differ diff --git a/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-8-Eng.png b/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-8-Eng.png index 2d64e9b20..383387399 100644 Binary files a/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-8-Eng.png and b/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-8-Eng.png differ diff --git a/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-9-Eng.png b/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-9-Eng.png index c84ff7579..d51b00c35 100644 Binary files a/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-9-Eng.png and b/i18n/en/docusaurus-plugin-content-docs/current/viz/img/viz-8-9-Eng.png differ