Skip to content

Commit c123a8a

Browse files
committed
updating screenshots and editing a few paragraphs
1 parent 381dee7 commit c123a8a

File tree

1 file changed

+58
-89
lines changed

1 file changed

+58
-89
lines changed

docs/content/getting-started/navigating-the-viewer.md

+58-89
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ order: 500
66
This guide will familiarize you with the basics of using the Rerun Viewer with an example dataset. By the end you should
77
be comfortable with the following topics:
88

9-
* [Launching the demo](#launching-the-demo)
10-
* [The Viewer panels](#the-viewer-panels)
11-
* [Exploring data](#exploring-data)
12-
* [Navigating the timeline](#navigating-the-timeline)
9+
- [Launching the demo](#launching-the-demo)
10+
- [The Viewer panels](#the-viewer-panels)
11+
- [Exploring data](#exploring-data)
12+
- [Navigating the timeline](#navigating-the-timeline)
1313

1414
Here is a preview of the dataset that we will be working with:
1515

@@ -54,104 +54,81 @@ like._
5454

5555
This will bring you the Rerun viewer's Welcome screen:
5656

57-
<picture>
58-
<img src="https://static.rerun.io/welcome_screen/f3119e719c64d7c18e56ccd34e3ec0eff7039ef6/full.png" alt="">
59-
<source media="(max-width: 480px)" srcset="https://static.rerun.io/welcome_screen/f3119e719c64d7c18e56ccd34e3ec0eff7039ef6/480w.png">
60-
<source media="(max-width: 768px)" srcset="https://static.rerun.io/welcome_screen/f3119e719c64d7c18e56ccd34e3ec0eff7039ef6/768w.png">
61-
<source media="(max-width: 1024px)" srcset="https://static.rerun.io/welcome_screen/f3119e719c64d7c18e56ccd34e3ec0eff7039ef6/1024w.png">
62-
<source media="(max-width: 1200px)" srcset="https://static.rerun.io/welcome_screen/f3119e719c64d7c18e56ccd34e3ec0eff7039ef6/1200w.png">
57+
<img src="https://static.rerun.io/welcome-screen/91f9bb2beca6c88ec3bfcdbeb0377d9164457f48/full.png" alt="">
58+
<source media="(max-width: 480px)" srcset="https://static.rerun.io/welcome-screen/91f9bb2beca6c88ec3bfcdbeb0377d9164457f48/480w.png">
59+
<source media="(max-width: 768px)" srcset="https://static.rerun.io/welcome-screen/91f9bb2beca6c88ec3bfcdbeb0377d9164457f48/768w.png">
60+
<source media="(max-width: 1024px)" srcset="https://static.rerun.io/welcome-screen/91f9bb2beca6c88ec3bfcdbeb0377d9164457f48/1024w.png">
61+
<source media="(max-width: 1200px)" srcset="https://static.rerun.io/welcome-screen/91f9bb2beca6c88ec3bfcdbeb0377d9164457f48/1200w.png">
6362
</picture>
6463

65-
Click on the "View Examples" button, and then chose the "Structure from Motion" example. A window that looks like this will appear:
64+
From there you can chose the "Structure from Motion" example. A window that looks like this will appear:
6665

6766
<picture>
68-
<source media="(max-width: 480px)" srcset="https://static.rerun.io/viewer_walkthrough1_first_launch/793d828d867a8d341cd3ec35bc553f2d65fba549/480w.png">
69-
<source media="(max-width: 768px)" srcset="https://static.rerun.io/viewer_walkthrough1_first_launch/793d828d867a8d341cd3ec35bc553f2d65fba549/768w.png">
70-
<source media="(max-width: 1024px)" srcset="https://static.rerun.io/viewer_walkthrough1_first_launch/793d828d867a8d341cd3ec35bc553f2d65fba549/1024w.png">
71-
<source media="(max-width: 1200px)" srcset="https://static.rerun.io/viewer_walkthrough1_first_launch/793d828d867a8d341cd3ec35bc553f2d65fba549/1200w.png">
72-
<img src="https://static.rerun.io/viewer_walkthrough1_first_launch/793d828d867a8d341cd3ec35bc553f2d65fba549/full.png" alt="viewer walkthrough first launch screenshot">
67+
<img src="https://static.rerun.io/viewer_walkthrough_car_open/b5fa19d6bee481142b01b253ff63eef4066e1c96/full.png" alt="">
68+
<source media="(max-width: 480px)" srcset="https://static.rerun.io/viewer_walkthrough_car_open/b5fa19d6bee481142b01b253ff63eef4066e1c96/480w.png">
69+
<source media="(max-width: 768px)" srcset="https://static.rerun.io/viewer_walkthrough_car_open/b5fa19d6bee481142b01b253ff63eef4066e1c96/768w.png">
70+
<source media="(max-width: 1024px)" srcset="https://static.rerun.io/viewer_walkthrough_car_open/b5fa19d6bee481142b01b253ff63eef4066e1c96/1024w.png">
71+
<source media="(max-width: 1200px)" srcset="https://static.rerun.io/viewer_walkthrough_car_open/b5fa19d6bee481142b01b253ff63eef4066e1c96/1200w.png">
7372
</picture>
7473

75-
Depending on your display size, the panels may have a different arrangements. This does not yet look like the initial
76-
preview, but the remainder of this guide will walk you through how to configure the Viewer to meet your needs.
74+
Depending on your display size, the panels may have a different arrangements. Further in this guide you will learn how could you change that.
7775

7876
## The Viewer panels
7977

80-
There are 4 main parts to this window:
78+
There are 5 main parts to this window:
8179

8280
- In the middle of the screen is the [Viewport](../reference/viewer/viewport.md). This is where you see the rendered
8381
space views for your session.
84-
- On the left is the [Blueprint](../reference/viewer/blueprint.md) panel. This is where the different space views can be
82+
- On the left top is the [Recordings](../concepts/apps-and-recordings.md) panel. This is where you see the list of loaded
83+
recordings, corresponding to their applications. You can also navigate back to the welcome screen from there.
84+
- Under recordings there is the [Blueprint](../reference/viewer/blueprint.md) panel. This is where the different space views can be
8585
controlled.
8686
- On the right is the [Selection](../reference/viewer/selection.md) panel. This is where you see extra information
8787
and configuration information for things that you have selected.
8888
- On the bottom is the [Timeline](../reference/viewer/timeline.md) panel. This is where you can control the current
8989
point in time that is being viewed.
9090

91-
Each of the 3 side panels has a corresponding button in the upper right corner. Try clicking each of these to hide and
91+
Each of the 3 sides has a corresponding button in the upper-right corner. Try clicking each of these to hide and
9292
show the corresponding panel.
9393

9494
<picture>
95-
<source media="(max-width: 480px)" srcset="https://static.rerun.io/viewer_walkthrough2_toggle_panel/26cba988d81f960832801bcda2c7d233c2b34401/480w.png">
96-
<source media="(max-width: 768px)" srcset="https://static.rerun.io/viewer_walkthrough2_toggle_panel/26cba988d81f960832801bcda2c7d233c2b34401/768w.png">
97-
<source media="(max-width: 1024px)" srcset="https://static.rerun.io/viewer_walkthrough2_toggle_panel/26cba988d81f960832801bcda2c7d233c2b34401/1024w.png">
98-
<source media="(max-width: 1200px)" srcset="https://static.rerun.io/viewer_walkthrough2_toggle_panel/26cba988d81f960832801bcda2c7d233c2b34401/1200w.png">
99-
<img src="https://static.rerun.io/viewer_walkthrough2_toggle_panel/26cba988d81f960832801bcda2c7d233c2b34401/full.png" alt="viewer walkthrough toggle panel screenshots">
95+
<img src="https://static.rerun.io/viewer_walkthrough_car_toggle_panels/438e5e3fd70da11d15426e1d33510c60e0128dc8/full.png" alt="">
96+
<source media="(max-width: 480px)" srcset="https://static.rerun.io/viewer_walkthrough_car_toggle_panels/438e5e3fd70da11d15426e1d33510c60e0128dc8/480w.png">
97+
<source media="(max-width: 768px)" srcset="https://static.rerun.io/viewer_walkthrough_car_toggle_panels/438e5e3fd70da11d15426e1d33510c60e0128dc8/768w.png">
98+
<source media="(max-width: 1024px)" srcset="https://static.rerun.io/viewer_walkthrough_car_toggle_panels/438e5e3fd70da11d15426e1d33510c60e0128dc8/1024w.png">
99+
<source media="(max-width: 1200px)" srcset="https://static.rerun.io/viewer_walkthrough_car_toggle_panels/438e5e3fd70da11d15426e1d33510c60e0128dc8/1200w.png">
100100
</picture>
101101

102-
For now, leave the panels visible since we will use them through the remainder of this guide.
103-
104-
It is also possible to re-arrange the individual space views. Try grabbing any of the named tabs, such as `image` and
105-
dragging it to different locations in the Viewport. You can also resize individual views by grabbing the edge of the
106-
view.
107-
108-
<picture>
109-
<source media="(max-width: 480px)" srcset="https://static.rerun.io/viewer_walkthrough3_rearrangeOD/ed7299b15ae5795d023d196a821e667a1a50591a/480w.png">
110-
<source media="(max-width: 768px)" srcset="https://static.rerun.io/viewer_walkthrough3_rearrangeOD/ed7299b15ae5795d023d196a821e667a1a50591a/768w.png">
111-
<source media="(max-width: 1024px)" srcset="https://static.rerun.io/viewer_walkthrough3_rearrangeOD/ed7299b15ae5795d023d196a821e667a1a50591a/1024w.png">
112-
<source media="(max-width: 1200px)" srcset="https://static.rerun.io/viewer_walkthrough3_rearrangeOD/ed7299b15ae5795d023d196a821e667a1a50591a/1200w.png">
113-
<img src="https://static.rerun.io/viewer_walkthrough3_rearrangeOD/ed7299b15ae5795d023d196a821e667a1a50591a/full.png" alt="viewer walkthrough rearrange panels screenshot">
114-
</picture>
115-
116-
Feel free to move the views around until you are happy with the layout.
102+
There are several ways to rearrange the viewer layout to your liking: through the Viewer [user interface](configure-the-viewer/interactively.md),
103+
via [Blueprint API](configure-the-viewer/through-code-tutorial.md), or by [loading an .rbl file](configure-the-viewer/save-and-load.md).
117104

118105
## Exploring data
119106

120-
The space views are where you can see the data that was actually logged. This scene has streams of data for 6 different
121-
primitives, also known as [entities](../concepts/entity-component.md):
107+
In Rerun, data is modeled using [entities](../concepts/entity-component.md) (essentially objects) that contain batches of [components](../reference/types/components.md)
108+
that change over time. Each entity is identified by an entity path, which uses a hierarchical syntax to represent relationships between entities.
109+
Let's explore an example of this hierarchy in our scene:
122110

123-
- [images](../reference/types/archetypes/image.md) that were captured from a camera.
124-
- [2D keypoints](../reference/types/archetypes/points2d.md) that were detected and tracked in those images.
125-
- a [pinhole](../reference/types/archetypes/pinhole.md) camera model that describes the relationship between 2D and 3D space.
126-
- [3D points](../reference/types/archetypes/points3d.md) that were computed by the COLMAP slam pipeline.
127-
- A sequence of [transforms](../reference/types/archetypes/transform3d.md) describing the 3D location of the camera in space.
128-
- A [scalar](../reference/types/archetypes/scalar.md) error metric that was computed by the algorithm for each frame.
111+
- `/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),
112+
representing point clouds that were detected and tracked in images.
113+
- 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),
114+
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.
115+
- 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).
129116

130-
### Hover and selection
117+
The complete hierarchy of logged entity streams and their related component streams could be found under `Streams` in the Timeline panel.
118+
You might also notice a hierarchical list of similar entities in the Blueprint panel. The key difference between these two panels
119+
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.
131120

132-
You can find out more about these entities by hovering over them in the different views. Hovering will bring up a
133-
context popup with additional information. You can also click on entities to select them and see more details in the
134-
[Selection panel](../reference/viewer/selection.md).
121+
### Hover and selection
135122

136-
<picture>
137-
<source media="(max-width: 480px)" srcset="https://static.rerun.io/viewer_walkthrough4_hover/a22d892b0f00474aac948a3fce751a8cf559072d/480w.png">
138-
<source media="(max-width: 768px)" srcset="https://static.rerun.io/viewer_walkthrough4_hover/a22d892b0f00474aac948a3fce751a8cf559072d/768w.png">
139-
<source media="(max-width: 1024px)" srcset="https://static.rerun.io/viewer_walkthrough4_hover/a22d892b0f00474aac948a3fce751a8cf559072d/1024w.png">
140-
<source media="(max-width: 1200px)" srcset="https://static.rerun.io/viewer_walkthrough4_hover/a22d892b0f00474aac948a3fce751a8cf559072d/1200w.png">
141-
<img src="https://static.rerun.io/viewer_walkthrough4_hover/a22d892b0f00474aac948a3fce751a8cf559072d/full.png" alt="viewer walkthrough hover screenshot">
142-
</picture>
123+
You can easily identify the connections between the same entities across different panels through the visual highlights. Hovering over an entity will
124+
display a popup with additional information about its content. Clicking on it will reveal more details in the [Selection panel](../reference/viewer/selection.md).
143125

144126
Try each of the following:
145127

146128
- Hover over the image to see a zoomed-in preview
147129
- Click on the point cloud to select the whole cloud
148130
- With the point cloud selected, hover and click individual points
149131

150-
Note that the views are actually connected. As you hover over points in the `/ (Spatial)` view you will see information
151-
about the depth of the projection in the image view. Conversely as you hover over pixels in the `image` you will see the
152-
corresponding ray projected into the `/ (Spatial)` view. See the section on
153-
[Spaces and Transforms](../concepts/spaces-and-transforms.md) for more information on how this linking works.
154-
155132
### Rotate, zoom, and pan
156133

157134
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
160137
over this icon to find out more information about the specific view.
161138

162139
<picture>
163-
<source media="(max-width: 480px)" srcset="https://static.rerun.io/viewer_walkthrough5_nav/7847244e2657a5555d90f4dd804e2650e4fde527/480w.png">
164-
<source media="(max-width: 768px)" srcset="https://static.rerun.io/viewer_walkthrough5_nav/7847244e2657a5555d90f4dd804e2650e4fde527/768w.png">
165-
<source media="(max-width: 1024px)" srcset="https://static.rerun.io/viewer_walkthrough5_nav/7847244e2657a5555d90f4dd804e2650e4fde527/1024w.png">
166-
<source media="(max-width: 1200px)" srcset="https://static.rerun.io/viewer_walkthrough5_nav/7847244e2657a5555d90f4dd804e2650e4fde527/1200w.png">
167-
<img src="https://static.rerun.io/viewer_walkthrough5_nav/7847244e2657a5555d90f4dd804e2650e4fde527/full.png" alt="viewer walkthrough rotate zoom and pan screenshot">
140+
<img src="https://static.rerun.io/viewer_walkthrough_car_question/a215bd2234a0484ca5187e34d119bacc1ff260cb/full.png" alt="">
141+
<source media="(max-width: 480px)" srcset="https://static.rerun.io/viewer_walkthrough_car_question/a215bd2234a0484ca5187e34d119bacc1ff260cb/480w.png">
142+
<source media="(max-width: 768px)" srcset="https://static.rerun.io/viewer_walkthrough_car_question/a215bd2234a0484ca5187e34d119bacc1ff260cb/768w.png">
143+
<source media="(max-width: 1024px)" srcset="https://static.rerun.io/viewer_walkthrough_car_question/a215bd2234a0484ca5187e34d119bacc1ff260cb/1024w.png">
144+
<source media="(max-width: 1200px)" srcset="https://static.rerun.io/viewer_walkthrough_car_question/a215bd2234a0484ca5187e34d119bacc1ff260cb/1200w.png">
168145
</picture>
169146

170147
Try each of the following:
@@ -176,24 +153,16 @@ Try each of the following:
176153

177154
## Navigating the timeline
178155

179-
So far, we have only been exploring data from a single point in time. However, if you look at the Timeline panel at the
180-
bottom of the window, you will see a series of white dots. Each of those dots represents a piece of data that was logged
181-
at a different point in time. In fact, if you hover over the dot, the context popup will give you more information about
156+
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
157+
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
182158
the specific thing that was logged.
183159

184-
### Changing the time slider
160+
There are several ways to navigate through the timeline:
185161

186-
To change the position on the timeline, simply grab the time indicator and pull it to the point in time you are
187-
interested in seeing. The space views will adjust accordingly. You can also use the play/pause/step/loop controls to
188-
playback the Rerun data as you might with a video file.
189-
190-
<picture>
191-
<source media="(max-width: 480px)" srcset="https://static.rerun.io/viewer_walkthrough6_timeline/9816d7becf19399735bef1f17f1d4bb928c278f7/480w.png">
192-
<source media="(max-width: 768px)" srcset="https://static.rerun.io/viewer_walkthrough6_timeline/9816d7becf19399735bef1f17f1d4bb928c278f7/768w.png">
193-
<source media="(max-width: 1024px)" srcset="https://static.rerun.io/viewer_walkthrough6_timeline/9816d7becf19399735bef1f17f1d4bb928c278f7/1024w.png">
194-
<source media="(max-width: 1200px)" srcset="https://static.rerun.io/viewer_walkthrough6_timeline/9816d7becf19399735bef1f17f1d4bb928c278f7/1200w.png">
195-
<img src="https://static.rerun.io/viewer_walkthrough6_timeline/9816d7becf19399735bef1f17f1d4bb928c278f7/full.png" alt="viewer walkthrough timeline screenshot">
196-
</picture>
162+
- Move the time indicator by dragging it to a different point on the timeline.
163+
For certain timelines, you can also click on the frame number and manually type the desired frame.
164+
- Adjust the playback speed, and for some timelines, you can also modify the number of frames per second.
165+
- Use the play, pause, step, and loop controls to playback Rerun data, similar to how you would with a video file.
197166

198167
Try out the following:
199168

@@ -244,7 +213,7 @@ Again, if you ran into any issues following this guide, please don't hesitate to
244213

245214
### Up next
246215

247-
- [Get started](./quick-start) by writing a program to log data with the Rerun SDK.
248-
- Learn how to further [configure the viewer](./configure-the-viewer) to suit your data.
249-
- Explore other [examples of using Rerun](/examples).
250-
- Consult the [concept overview](../concepts.md) for more context on the ideas covered here.
216+
- [Get started](./quick-start) by writing a program to log data with the Rerun SDK.
217+
- Learn how to further [configure the viewer](./configure-the-viewer) to suit your data.
218+
- Explore other [examples of using Rerun](/examples).
219+
- Consult the [concept overview](../concepts.md) for more context on the ideas covered here.

0 commit comments

Comments
 (0)