Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add command to screenshot the whole viewer #2117

Closed
Tracked by #2266
emilk opened this issue May 15, 2023 · 1 comment · Fixed by #2293
Closed
Tracked by #2266

Add command to screenshot the whole viewer #2117

emilk opened this issue May 15, 2023 · 1 comment · Fixed by #2293
Assignees
Labels
📖 documentation Improvements or additions to documentation 🏎️ Quick Issue Can be fixed in a few hours or less

Comments

@emilk
Copy link
Member

emilk commented May 15, 2023

For our docs we want to produce nice screenshots like these:

image

This was made using cmd-shift-4 on a Mac. Note the transparent background with the shadow.

It would be great to have a simple, unified method to produce these screenshots across different OS:es, available via a the command palette and a keyboard shortcut.

We could, for instance, just read back the framebuffer, round the edges, add some spacing and shadow, and then save that as a png. We wouldn't get the mac-style close buttons though (the red,yellow,green in the top left), so we would need something like #1063 for that, or just fake it

@emilk emilk added the 📖 documentation Improvements or additions to documentation label May 15, 2023
@emilk emilk mentioned this issue May 30, 2023
1 task
@emilk
Copy link
Member Author

emilk commented May 30, 2023

Niko just said he wants it too look like the web instead of native which means:

  • No rounded corners (we can do it in CSS instead)
  • No top-left native close/maximize/minimize-buttons
  • Style like a web page (thick top bar)
  • No drop-shadow (we'll do it in CSS instead)

This would make it easier to implement.

@emilk emilk added the 🏎️ Quick Issue Can be fixed in a few hours or less label May 30, 2023
@emilk emilk self-assigned this May 31, 2023
emilk added a commit that referenced this issue Jun 1, 2023
Closes #2117
Closes #482

### What
Cmd-P for command palette, then select "Screenshot" command. Rerun will
re-style itself for Web for a frame, screenshot that, and then copy it
to the clipboard. I only implemented this for the native viewer.

You can set the resolution at startup with `--window-size`. All
screenshots are captured at 2x pixels-per-point, i.e. pretending that
you are on a high-dpi screen, wether you are or not.

You can also trigger this from the command line:

```
❯ cargo rerun ../fiat.rrd --screenshot-to fiat.png
    Finished dev [optimized + debuginfo] target(s) in 0.46s
     Running `target/debug/rerun ../fiat.rrd --screenshot-to fiat.png --window-size 1024x768`
[2023-05-31T16:11:21Z INFO  rerun::run] Loading "../fiat.rrd"…
[2023-05-31T16:11:22Z INFO  re_viewer::screenshotter] Screenshot saved to "fiat.png"
```

We can use this to generate screenshots for our examples.

### Result:


![fiat](https://github.com/rerun-io/rerun/assets/1148717/98cc125e-6cb5-4d84-81ff-062f54c7fb97)



### 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)

<!-- This line will get updated when the PR build summary job finishes.
-->
PR Build Summary: https://build.rerun.io/pr/2293

<!-- pr-link-docs:start -->
Docs preview: https://rerun.io/preview/11b16c5/docs
<!-- pr-link-docs:end -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📖 documentation Improvements or additions to documentation 🏎️ Quick Issue Can be fixed in a few hours or less
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant