Add Examples page to the Welcome Screen

Cargo.toml

@@ -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" }
@@ -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" }

crates/re_ui/src/design_tokens.rs

@@ -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}");

crates/re_ui/src/lib.rs

@@ -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),
@@ -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

crates/re_viewer/Cargo.toml

@@ -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
@@ -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

crates/re_viewer/data/examples_manifest.json

@@ -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
+    }
+  }
+]

crates/re_viewer/src/app_state.rs

@@ -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)]
@@ -90,6 +93,7 @@ impl AppState {
             recording_configs,
             selection_panel,
             time_panel,
+            welcome_screen,
             viewport_state,
         } = self;
 
@@ -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);
                         }