Skip to content

Commit

Permalink
Add Examples page to the Welcome Screen (#3191)
Browse files Browse the repository at this point in the history
### What

Add Example page to the Welcome Screen.


Fixes #3096 

<img width="1366" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/bbe2e84e-9ade-4da8-b095-d7b0f396c26f">

### TODO

- [x] fix layout issues
- [x] display tags
- [x] have dedicated, short copy for the description: #3201

### Not included in this PR

- **WARNING**: here, we bake in a manifest with hard-coded links to RRDs
that were generated within this PR. This will lead to issue down the
line, when the RRD format changes.
  - #3212
  - #3213
- download updated manifest
  -  #3190 
- load thumbnail from the web
  - emilk/egui#3291
- provide feedback while downloading a RRD
  - #3192

### Checklist
* [x] I have read and agree to [Contributor
Guide](https://github.com/rerun-io/rerun/blob/main/CONTRIBUTING.md) and
the [Code of
Conduct](https://github.com/rerun-io/rerun/blob/main/CODE_OF_CONDUCT.md)
* [x] I've included a screenshot or gif (if applicable)
* [x] I have tested [demo.rerun.io](https://demo.rerun.io/pr/3191) (if
applicable)

- [PR Build Summary](https://build.rerun.io/pr/3191)
- [Docs
preview](https://rerun.io/preview/3be107e4cc6aa6758a3f22c27a79233b33f2ea6b/docs)
<!--DOCS-PREVIEW-->
- [Examples
preview](https://rerun.io/preview/3be107e4cc6aa6758a3f22c27a79233b33f2ea6b/examples)
<!--EXAMPLES-PREVIEW-->
- [Recent benchmark results](https://ref.rerun.io/dev/bench/)
- [Wasm size tracking](https://ref.rerun.io/dev/sizes/)

---------

Co-authored-by: Emil Ernerfeldt <[email protected]>
  • Loading branch information
abey79 and emilk authored Sep 6, 2023
1 parent aa423ec commit cb197a2
Show file tree
Hide file tree
Showing 12 changed files with 948 additions and 386 deletions.
29 changes: 18 additions & 11 deletions Cargo.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

25 changes: 15 additions & 10 deletions Cargo.toml
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,13 @@ eframe = { version = "0.22.0", default-features = false, features = [
"x11",
] }
egui = { version = "0.22.0", features = ["extra_debug_asserts", "log"] }
egui_extras = { version = "0.22.0", features = ["log"] }
egui_plot = { git = "https://github.com/emilk/egui", rev = "70bfc7e09f1b1f794a77064b62a4932f9e60ef15" }
egui_extras = { version = "0.22.0", features = [
"log",
"image",
"http",
"puffin",
] }
egui_plot = { git = "https://github.com/emilk/egui", rev = "2338a854f932658ad0548aa4f00874b3427970c1" }
egui_tiles = { version = "0.2" }
egui-wgpu = "0.22.0"
ehttp = { version = "0.3" }
Expand Down Expand Up @@ -160,14 +165,14 @@ debug = true
# ALWAYS document what PR the commit hash is part of, or when it was merged into the upstream trunk.

# Temporary patch until next egui release
ecolor = { git = "https://github.com/emilk/egui", rev = "70bfc7e09f1b1f794a77064b62a4932f9e60ef15" }
eframe = { git = "https://github.com/emilk/egui", rev = "70bfc7e09f1b1f794a77064b62a4932f9e60ef15" }
egui-wgpu = { git = "https://github.com/emilk/egui", rev = "70bfc7e09f1b1f794a77064b62a4932f9e60ef15" }
egui-winit = { git = "https://github.com/emilk/egui", rev = "70bfc7e09f1b1f794a77064b62a4932f9e60ef15" }
egui = { git = "https://github.com/emilk/egui", rev = "70bfc7e09f1b1f794a77064b62a4932f9e60ef15" }
egui_extras = { git = "https://github.com/emilk/egui", rev = "70bfc7e09f1b1f794a77064b62a4932f9e60ef15" }
emath = { git = "https://github.com/emilk/egui", rev = "70bfc7e09f1b1f794a77064b62a4932f9e60ef15" }
epaint = { git = "https://github.com/emilk/egui", rev = "70bfc7e09f1b1f794a77064b62a4932f9e60ef15" }
ecolor = { git = "https://github.com/emilk/egui", rev = "2338a854f932658ad0548aa4f00874b3427970c1" }
eframe = { git = "https://github.com/emilk/egui", rev = "2338a854f932658ad0548aa4f00874b3427970c1" }
egui-wgpu = { git = "https://github.com/emilk/egui", rev = "2338a854f932658ad0548aa4f00874b3427970c1" }
egui-winit = { git = "https://github.com/emilk/egui", rev = "2338a854f932658ad0548aa4f00874b3427970c1" }
egui = { git = "https://github.com/emilk/egui", rev = "2338a854f932658ad0548aa4f00874b3427970c1" }
egui_extras = { git = "https://github.com/emilk/egui", rev = "2338a854f932658ad0548aa4f00874b3427970c1" }
emath = { git = "https://github.com/emilk/egui", rev = "2338a854f932658ad0548aa4f00874b3427970c1" }
epaint = { git = "https://github.com/emilk/egui", rev = "2338a854f932658ad0548aa4f00874b3427970c1" }

# Temporary patch until next egui_tiles release
egui_tiles = { git = "https://github.com/rerun-io/egui_tiles", rev = "f835c4df1cc260a58122a8d37c7c3738902b9643" }
8 changes: 4 additions & 4 deletions crates/re_ui/src/design_tokens.rs
Original file line number Diff line number Diff line change
Expand Up @@ -84,16 +84,16 @@ fn apply_design_tokens(ctx: &egui::Context) -> DesignTokens {
// TODO(ab): font sizes should come from design tokens
egui_style
.text_styles
.insert(ReUi::welcome_screen_h1(), egui::FontId::proportional(42.0));
.insert(ReUi::welcome_screen_h1(), egui::FontId::proportional(28.0));
egui_style
.text_styles
.insert(ReUi::welcome_screen_h2(), egui::FontId::proportional(24.0)); //TODO(ab): thin variant
.insert(ReUi::welcome_screen_h2(), egui::FontId::proportional(24.0));
egui_style
.text_styles
.insert(ReUi::welcome_screen_h3(), egui::FontId::proportional(18.0));
.insert(ReUi::welcome_screen_h3(), egui::FontId::proportional(15.0));
egui_style.text_styles.insert(
ReUi::welcome_screen_body(),
egui::FontId::proportional(14.0),
egui::FontId::proportional(13.0),
);

let panel_bg_color = get_aliased_color(&json, "{Alias.Color.Surface.Default.value}");
Expand Down
12 changes: 12 additions & 0 deletions crates/re_ui/src/lib.rs
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,8 @@ pub struct ReUi {
impl ReUi {
/// Create [`ReUi`] and apply style to the given egui context.
pub fn load_and_apply(egui_ctx: &egui::Context) -> Self {
egui_extras::loaders::install(egui_ctx);

Self {
egui_ctx: egui_ctx.clone(),
design_tokens: DesignTokens::load_and_apply(egui_ctx),
Expand Down Expand Up @@ -110,6 +112,16 @@ impl ReUi {
egui::TextStyle::Name("welcome-screen-body".into())
}

pub fn welcome_screen_tab_bar_style(ui: &mut egui::Ui) {
ui.spacing_mut().item_spacing.x = 16.0;
ui.visuals_mut().selection.bg_fill = egui::Color32::TRANSPARENT;
ui.visuals_mut().selection.stroke = ui.visuals().widgets.active.fg_stroke;
ui.visuals_mut().widgets.hovered.weak_bg_fill = egui::Color32::TRANSPARENT;
ui.visuals_mut().widgets.hovered.fg_stroke = ui.visuals().widgets.active.fg_stroke;
ui.visuals_mut().widgets.active.weak_bg_fill = egui::Color32::TRANSPARENT;
ui.visuals_mut().widgets.inactive.fg_stroke = ui.visuals().widgets.noninteractive.fg_stroke;
}

/// Margin on all sides of views.
pub fn view_padding() -> f32 {
12.0
Expand Down
2 changes: 2 additions & 0 deletions crates/re_viewer/Cargo.toml
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ eframe = { workspace = true, default-features = false, features = [
"puffin",
"wgpu",
] }
egui_extras.workspace = true
egui_plot.workspace = true
egui-wgpu.workspace = true
egui.workspace = true
Expand All @@ -94,6 +95,7 @@ poll-promise = { version = "0.3", features = ["web"] }
rfd.workspace = true
ron = "0.8.0"
serde = { version = "1", features = ["derive"] }
serde_json = "1"
time = { workspace = true, features = ["formatting"] }
web-time.workspace = true
wgpu.workspace = true
Expand Down
128 changes: 128 additions & 0 deletions crates/re_viewer/data/examples_manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
[
{
"name": "arkit_scenes",
"title": "ARKit Scenes",
"description": "Visualize the ARKitScenes dataset, which contains color+depth images, the reconstructed mesh and labeled bounding boxes.",
"tags": [
"2D",
"3D",
"depth",
"mesh",
"object-detection",
"pinhole-camera"
],
"demo_url": "https://demo.rerun.io/commit/5be001c/examples/arkit_scenes/",
"rrd_url": "https://demo.rerun.io/commit/5be001c/examples/arkit_scenes/data.rrd",
"thumbnail": {
"url": "https://static.rerun.io/8b90a80c72b27fad289806b7e5dff0c9ac97e87c_arkit_scenes_480w.png",
"width": 480,
"height": 243
}
},
{
"name": "structure_from_motion",
"title": "Structure from Motion",
"description": "Visualize a sparse reconstruction by COLMAP, a general-purpose Structure-from-Motion and Multi-View Stereo pipeline.",
"tags": [
"2D",
"3D",
"colmap",
"pinhole-camera",
"time-series"
],
"demo_url": "https://demo.rerun.io/commit/5be001c/examples/structure_from_motion/",
"rrd_url": "https://demo.rerun.io/commit/5be001c/examples/structure_from_motion/data.rrd",
"thumbnail": {
"url": "https://static.rerun.io/033edff752f86bcdc9a81f7877e0b4411ff4e6c5_structure_from_motion_480w.png",
"width": 480,
"height": 275
}
},
{
"name": "dicom_mri",
"title": "Dicom MRI",
"description": "Example using a DICOM MRI scan. This demonstrates the flexible tensor slicing capabilities of the Rerun viewer.",
"tags": [
"tensor",
"mri",
"dicom"
],
"demo_url": "https://demo.rerun.io/commit/5be001c/examples/dicom_mri/",
"rrd_url": "https://demo.rerun.io/commit/5be001c/examples/dicom_mri/data.rrd",
"thumbnail": {
"url": "https://static.rerun.io/b8b25dd01e892e6daf5177e6fc05ff5feb19ee8d_dicom_mri_480w.png",
"width": 480,
"height": 285
}
},
{
"name": "human_pose_tracking",
"title": "Human Pose Tracking",
"description": "Use the MediaPipe Pose solution to detect and track a human pose in video.",
"tags": [
"mediapipe",
"keypoint-detection",
"2D",
"3D"
],
"demo_url": "https://demo.rerun.io/commit/5be001c/examples/human_pose_tracking/",
"rrd_url": "https://demo.rerun.io/commit/5be001c/examples/human_pose_tracking/data.rrd",
"thumbnail": {
"url": "https://static.rerun.io/277b9c72da1d0d0ae9d221f7552dede9c4d5b2fa_human_pose_tracking_480w.png",
"width": 480,
"height": 272
}
},
{
"name": "plots",
"title": "Plots",
"description": "Demonstration of various plots and charts supported by Rerun.",
"tags": [
"2d",
"plots",
"api-example"
],
"demo_url": "https://demo.rerun.io/commit/5be001c/examples/plots/",
"rrd_url": "https://demo.rerun.io/commit/5be001c/examples/plots/data.rrd",
"thumbnail": {
"url": "https://static.rerun.io/ca0c72df93d70c79b0e640fb4b7c33cdc0bfe5f4_plots_480w.png",
"width": 480,
"height": 271
}
},
{
"name": "detect_and_track_objects",
"title": "Detect and Track Objects",
"description": "Visualize object detection and segmentation using the Huggingface `transformers` library.",
"tags": [
"2D",
"huggingface",
"object-detection",
"object-tracking",
"opencv"
],
"demo_url": "https://demo.rerun.io/commit/5be001c/examples/detect_and_track_objects/",
"rrd_url": "https://demo.rerun.io/commit/5be001c/examples/detect_and_track_objects/data.rrd",
"thumbnail": {
"url": "https://static.rerun.io/efb301d64eef6f25e8f6ae29294bd003c0cda3a7_detect_and_track_objects_480w.png",
"width": 480,
"height": 279
}
},
{
"name": "dna",
"title": "Helix",
"description": "Simple example of logging point and line primitives to draw a 3D helix.",
"tags": [
"3d",
"api-example"
],
"demo_url": "https://demo.rerun.io/commit/5be001c/examples/dna/",
"rrd_url": "https://demo.rerun.io/commit/5be001c/examples/dna/data.rrd",
"thumbnail": {
"url": "https://static.rerun.io/ea7a9ab2f716bd37d1bbc1eabf3f55e4f526660e_helix_480w.png",
"width": 480,
"height": 285
}
}
]
6 changes: 5 additions & 1 deletion crates/re_viewer/src/app_state.rs
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ pub struct AppState {
selection_panel: crate::selection_panel::SelectionPanel,
time_panel: re_time_panel::TimePanel,

#[serde(skip)]
welcome_screen: crate::ui::WelcomeScreen,

// TODO(jleibs): This is sort of a weird place to put this but makes more
// sense than the blueprint
#[serde(skip)]
Expand Down Expand Up @@ -90,6 +93,7 @@ impl AppState {
recording_configs,
selection_panel,
time_panel,
welcome_screen,
viewport_state,
} = self;

Expand Down Expand Up @@ -189,7 +193,7 @@ impl AppState {
.frame(viewport_frame)
.show_inside(ui, |ui| {
if show_welcome {
crate::ui::welcome_ui(re_ui, ui, rx, command_sender);
welcome_screen.ui(re_ui, ui, rx, command_sender);
} else {
viewport.viewport_ui(ui, &mut ctx);
}
Expand Down
Loading

0 comments on commit cb197a2

Please sign in to comment.