Unify example screenshots

[nikolausWest]

To improve the visual style and consistency of the examples page, all screenshots should follow the same style. More importantly this should also reduce the amount of decision making needed when adding screenshots.

My proposal:

• Always screenshot the whole UI
  • Up to screenshotter what views should be visible and how they are aranged
• No shadows or other added styling (easier to do in css)
• Screenshot the web-viewer, excluding any browser elements this should
  • make it as consistent as possible across OSes
  • make the transition to showing live web-viewers much smoother

Example:

TODO:

• Find simple method to remove the rounded corners in the bottom when taking screenshots on platforms that add rounded corners to windows.

[emilk]

Related:

• Add command to screenshot the whole viewer #2117

[emilk]

Figure out workflow and document it:

• Use the new screenshot feature: Add command to screenshot the application #2293
• Standardized sizes
• pngcrush everything?
• CSS for a dropshadow so the images don't merge with our HTML background

[jprochazk]

We should have scripts/upload_image.py produce a few different screenshot widths (while preserving the aspect ratio):

• 480px
• 768px
• 1024px
• 1200px
• original

Instead of outputting a single link, the upload image script will output a responsive image element snippet after uploading all the image sizes:

<picture>
  <!-- responsive: -->
  <source media="(max-width: 480px)" srcset="https://static.rerun.io/HASH_FILENAME_480w.png" />
  <source media="(max-width: 768px)" srcset="https://static.rerun.io/HASH_FILENAME_768w.png" />
  <source media="(max-width: 1024px)" srcset="https://static.rerun.io/HASH_FILENAME_1024w.png" />
  <source media="(max-width: 1200px)" srcset="https://static.rerun.io/HASH_FILENAME_1200w.png" />
  <!-- fallback: -->
  <img src="https://static.rerun.io/HASH_FILENAME_orig.png" />
</picture>

This can still be directly pasted into a markdown file, and it should work in all browsers, becase unrecognized tags are treated as div tags.

The script currently supports uploading any kind of media to static.rerun.io, so this should only be done for png (or maybe even be behind a flag).

[jprochazk]

CSS for a dropshadow so the images don't merge with our HTML background

#2399

[abey79]

With automatic image stack creation and support for reading from clipboard in #2411, the workflow now looks like:

1. run the example
2. resize the viewer to some reasonable size (that is legible but smaller than fullscreen on your 4K/5K screen)
3. groom the blueprint until it looks nice
4. take a screenshot via the command palette
5. just upload --name my_example_name
6. Copy/paste the resulting HTML in the example's README

I think this workflow gets us pretty far until more automation with blueprints is possible. We could consider formalising (2) a little more, but I'm not sure the technical pain of enforcing this is worth the value.

[nikolausWest]

Sounds great!

[abey79]

Closed by #2440