Add Examples page to the Welcome Screen

[abey79]

What

Add Example page to the Welcome Screen.

Note

This PR bakes in the example thumbnails, which will incur a significant bump in the wasm build. We will remove this once we pull thumbnails from the web using emilk/egui#3291.

Fixes #3096

TODO

• fix layout issues
• display tags
• have dedicated, short copy for the description: Move example description to README frontmatter #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.
  • Tracking issue: Revamp of our example building infrastructure #3212
  • [REMINDER-0.9] Make sure baked-in example manifest is correct #3213
• download updated manifest
  • Update the example manifest from the web #3190
• load thumbnail from the web
  • Flexible and convenient texture loading emilk/egui#3291
• provide feedback while downloading a RRD
  • Provide feedback while downloading a RRD #3192

Checklist

• I have read and agree to Contributor Guide and the Code of Conduct
• I've included a screenshot or gif (if applicable)
• I have tested demo.rerun.io (if applicable)

• PR Build Summary
• Docs preview
• Examples preview
• Recent benchmark results
• Wasm size tracking

[github-actions]

Size changes

Name	main	3191/merge	Change
Wasm	14.46 MiB	15.34 MiB	+6.09%

[emilk]

I looks amazing 😍

But clicking one feels extremely unresponsive, as there is no indication that your click came through. As you noted before, we need to add a load-screen asap.

should_show_welcome_screen is doing the right thing, but we never disable the app id once the heuristic change.

In other words, I believe this needs an else statement to show the loading screen:

        if self.should_show_welcome_screen(&mut store_hub) {
            store_hub.set_app_id(StoreHub::welcome_screen_app_id());
        }

[abey79]

@emilk I gave it a quick try but.... it's not that simple (I got all sorts of weird behaviour whose fixing feels beyond the scope of this PR). For the purpose of this PR, I'd like to give some kind of visual feedback (some flashing?) to indicate that the click has been registered, and address the progress feedback in a follow-up PR.

[martenbjork]

Almost ready to go! 🚀

Here are some tiny tweaks:

Typography notes

• It's important to add line height to all text elements, even when they are single line. Without that, the margin calculations become incorrect. An element with a tiny line height looks closer to the element below than an element with a huge line height).
• The heading sizes and font sizes used in this view should be the same as on the welcome screen. That is:

Headlines (Connect to live data, Rust, Python, Configure your views, [example name])

font-size: 15px
line-height: 22px
font-weight: 550 

Body text

font-size: 13px
line-height: 19px
font-weight: 490 (this will be the new base font weight for the entire app)

Spinner

Can we make the spinner a little less big? It's so large right now, it looks pretty jarring. Something like this:

Spinner height: 72px;
Image opacity: 0.25

[abey79]

@martenbjork thanks for the detailed feedback—will try to implement as much as possible.

On font weight: I don't believe egui currently has support for font weight (emilk/egui#3218), so we're stuck with whatever is the default.

[abey79]

Also, I understand the "copy to tags" vertical space and the "32px vertical gap" to be minimal values, as the effective gap depends on the corresponding thumbnail aspect ratio (tags are grid aligned too).

[martenbjork]

Also, I understand the "copy to tags" vertical space and the "32px vertical gap" to be minimal values, as the effective gap depends on the corresponding thumbnail aspect ratio (tags are grid aligned too).

Yes! 💯

[emilk]

I love it, but I suggest we wait for emilk/egui#3297 to be merged (any minute now) and the update the PR to use it.

[jprochazk]

emilk/egui#3297 has been merged, and this would be the perfect PR to test it on!

The new API is:

// during setup
egui_extras::loaders::install(&egui_ctx);

// when you want to load an image
ui.image2("http://link.to.image.com/image.png");

Will also need to enable some features on egui_extras if they aren't already.

[abey79]

@jprochazk I'll get on it this afternoon.

[emilk]

Awesome!