diff --git a/docs/content/getting-started/navigating-the-viewer.md b/docs/content/getting-started/navigating-the-viewer.md index b0953330ebef..96251d36047a 100644 --- a/docs/content/getting-started/navigating-the-viewer.md +++ b/docs/content/getting-started/navigating-the-viewer.md @@ -6,10 +6,10 @@ order: 500 This guide will familiarize you with the basics of using the Rerun Viewer with an example dataset. By the end you should be comfortable with the following topics: -* [Launching the demo](#launching-the-demo) -* [The Viewer panels](#the-viewer-panels) -* [Exploring data](#exploring-data) -* [Navigating the timeline](#navigating-the-timeline) +- [Launching the demo](#launching-the-demo) +- [The Viewer panels](#the-viewer-panels) +- [Exploring data](#exploring-data) +- [Navigating the timeline](#navigating-the-timeline) Here is a preview of the dataset that we will be working with: @@ -54,92 +54,74 @@ like._ This will bring you the Rerun viewer's Welcome screen: - - - - - - + + + + + -Click on the "View Examples" button, and then chose the "Structure from Motion" example. A window that looks like this will appear: +From there you can chose the "Structure from Motion" example. A window that looks like this will appear: - - - - - viewer walkthrough first launch screenshot + + + + + -Depending on your display size, the panels may have a different arrangements. This does not yet look like the initial -preview, but the remainder of this guide will walk you through how to configure the Viewer to meet your needs. +Depending on your display size, the panels may have a different arrangements. Further in this guide you will learn how could you change that. ## The Viewer panels -There are 4 main parts to this window: +There are 5 main parts to this window: - In the middle of the screen is the [Viewport](../reference/viewer/viewport.md). This is where you see the rendered space views for your session. -- On the left is the [Blueprint](../reference/viewer/blueprint.md) panel. This is where the different space views can be +- On the left top is the [Recordings](../concepts/apps-and-recordings.md) panel. This is where you see the list of loaded + recordings, corresponding to their applications. You can also navigate back to the welcome screen from there. +- Under recordings there is the [Blueprint](../reference/viewer/blueprint.md) panel. This is where the different space views can be controlled. - On the right is the [Selection](../reference/viewer/selection.md) panel. This is where you see extra information and configuration information for things that you have selected. - On the bottom is the [Timeline](../reference/viewer/timeline.md) panel. This is where you can control the current point in time that is being viewed. -Each of the 3 side panels has a corresponding button in the upper right corner. Try clicking each of these to hide and +Each of the 3 sides has a corresponding button in the upper-right corner. Try clicking each of these to hide and show the corresponding panel. - - - - - viewer walkthrough toggle panel screenshots + + + + + -For now, leave the panels visible since we will use them through the remainder of this guide. - -It is also possible to re-arrange the individual space views. Try grabbing any of the named tabs, such as `image` and -dragging it to different locations in the Viewport. You can also resize individual views by grabbing the edge of the -view. - - - - - - - viewer walkthrough rearrange panels screenshot - - -Feel free to move the views around until you are happy with the layout. +There are several ways to rearrange the viewer layout to your liking: through the Viewer [user interface](configure-the-viewer/interactively.md), +via [Blueprint API](configure-the-viewer/through-code-tutorial.md), or by [loading an .rbl file](configure-the-viewer/save-and-load.md). ## Exploring data -The space views are where you can see the data that was actually logged. This scene has streams of data for 6 different -primitives, also known as [entities](../concepts/entity-component.md): +In Rerun, data is modeled using [entities](../concepts/entity-component.md) (essentially objects) that contain batches of [components](../reference/types/components.md) +that change over time. Each entity is identified by an entity path, which uses a hierarchical syntax to represent relationships between entities. +Let's explore an example of this hierarchy in our scene: -- [images](../reference/types/archetypes/image.md) that were captured from a camera. -- [2D keypoints](../reference/types/archetypes/points2d.md) that were detected and tracked in those images. -- a [pinhole](../reference/types/archetypes/pinhole.md) camera model that describes the relationship between 2D and 3D space. -- [3D points](../reference/types/archetypes/points3d.md) that were computed by the COLMAP slam pipeline. -- A sequence of [transforms](../reference/types/archetypes/transform3d.md) describing the 3D location of the camera in space. -- A [scalar](../reference/types/archetypes/scalar.md) error metric that was computed by the algorithm for each frame. +- `/camera/image/keypoints` is an entity stream that contains 3 component streams. One of these components indicates that together, they form a [Points2D archetype](../reference/types/archetypes/points2d.md), + representing point clouds that were detected and tracked in images. +- The images themselves are represented by the parent entity `/camera/image`. This entity consist of 6 components: 4 form an [Image archetype](../reference/types/archetypes/image.md), + while the remaining 2 correspond to a [pinhole projection](../reference/types/archetype/pinhole.md). The images are captures by the camera, and a pinhole projection defines the relationship between 2D and 3D space. +- Both the images and pinhole projection are hierarchically dependent on the camera's position, which is described by the `/camera` entity. This entity includes a series of transforms that together form a [Transform3D archetype](../reference/types/archetypes/transform3d.md). -### Hover and selection +The complete hierarchy of logged entity streams and their related component streams could be found under `Streams` in the Timeline panel. +You might also notice a hierarchical list of similar entities in the Blueprint panel. The key difference between these two panels +is that Blueprint panel focuses on how the stream data is arranged in the Viewport. In other words, an entity might be logged once but displayed in multiple views. -You can find out more about these entities by hovering over them in the different views. Hovering will bring up a -context popup with additional information. You can also click on entities to select them and see more details in the -[Selection panel](../reference/viewer/selection.md). +### Hover and selection - - - - - - viewer walkthrough hover screenshot - +You can easily identify the connections between the same entities across different panels through the visual highlights. Hovering over an entity will +display a popup with additional information about its content. Clicking on it will reveal more details in the [Selection panel](../reference/viewer/selection.md). Try each of the following: @@ -147,11 +129,6 @@ Try each of the following: - Click on the point cloud to select the whole cloud - With the point cloud selected, hover and click individual points -Note that the views are actually connected. As you hover over points in the `/ (Spatial)` view you will see information -about the depth of the projection in the image view. Conversely as you hover over pixels in the `image` you will see the -corresponding ray projected into the `/ (Spatial)` view. See the section on -[Spaces and Transforms](../concepts/spaces-and-transforms.md) for more information on how this linking works. - ### Rotate, zoom, and pan Clicking and dragging the contents of any view will move it. You can rotate 3D views, or pan 2D views and plots. You can @@ -160,11 +137,11 @@ double-clicking somewhere in the view. Every view has a "?" icon in the upper ri over this icon to find out more information about the specific view. - - - - - viewer walkthrough rotate zoom and pan screenshot + + + + + Try each of the following: @@ -176,24 +153,16 @@ Try each of the following: ## Navigating the timeline -So far, we have only been exploring data from a single point in time. However, if you look at the Timeline panel at the -bottom of the window, you will see a series of white dots. Each of those dots represents a piece of data that was logged -at a different point in time. In fact, if you hover over the dot, the context popup will give you more information about +If you look at the Timeline panel at the bottom of the window, you will see a series of white dots. Each of those dots +represents a piece of data that was logged at a different point in time. In fact, if you hover over the dot, the context popup will give you more information about the specific thing that was logged. -### Changing the time slider +There are several ways to navigate through the timeline: -To change the position on the timeline, simply grab the time indicator and pull it to the point in time you are -interested in seeing. The space views will adjust accordingly. You can also use the play/pause/step/loop controls to -playback the Rerun data as you might with a video file. - - - - - - - viewer walkthrough timeline screenshot - +- Move the time indicator by dragging it to a different point on the timeline. + For certain timelines, you can also click on the frame number and manually type the desired frame. +- Adjust the playback speed, and for some timelines, you can also modify the number of frames per second. +- Use the play, pause, step, and loop controls to playback Rerun data, similar to how you would with a video file. Try out the following: @@ -244,7 +213,7 @@ Again, if you ran into any issues following this guide, please don't hesitate to ### Up next -- [Get started](./quick-start) by writing a program to log data with the Rerun SDK. -- Learn how to further [configure the viewer](./configure-the-viewer) to suit your data. -- Explore other [examples of using Rerun](/examples). -- Consult the [concept overview](../concepts.md) for more context on the ideas covered here. +- [Get started](./quick-start) by writing a program to log data with the Rerun SDK. +- Learn how to further [configure the viewer](./configure-the-viewer) to suit your data. +- Explore other [examples of using Rerun](/examples). +- Consult the [concept overview](../concepts.md) for more context on the ideas covered here.