Fullscreen mode on web #6433
Comments
jprochazk
added
🕸️ web
If we do this, we need to figure out if this just goes to the right of the panel buttons, and if so, if we should move the panel buttons to the center of the top panel instead. And what happens if the top panel is hidden? Do we just not support fullscreen then? Or should we show a fullscreen button on hover? |
If the top panel is hidden, you can still toggle it via the command palette. I don't think we should do anything on hover. For our use cases I think it's fine to display the top panel, especially because it's a lot more compact now. The "cramped" problem was always mostly because of the side panels. Forcing the time panel to stay collapsed is also going to help a lot. |
### What - Closes #6433 This PR enables the `ToggleFullscreen` UI command for web target, implemented in JS land. The functionality is also exposed via the `toggle_fullscreen` method. Callbacks are used to communicate about fullscreen state between WASM and JS. To test, you'll need to build branch `fullscreen-temp` of https://github.com/rerun-io/web-viewer-example with a globally linked `web-viewer` package built from source: 1. Install Yarn: `npm i -g yarn` 2. In this repository: - `yarn --cwd rerun_js install` - `yarn --cwd rerun_js/web-viewer build` - `yarn --cwd rerun_js/web-viewer link` 3. In the `web-viewer-example` repository: - `yarn` - `yarn link @rerun-io/web-viewer` - `yarn dev` + open the page ### 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 the web demo (if applicable): * Using examples from latest `main` build: [rerun.io/viewer](https://rerun.io/viewer/pr/6461?manifest_url=https://app.rerun.io/version/main/examples_manifest.json) * Using full set of examples from `nightly` build: [rerun.io/viewer](https://rerun.io/viewer/pr/6461?manifest_url=https://app.rerun.io/version/nightly/examples_manifest.json) * [x] The PR title and labels are set such as to maximize their usefulness for the next release's CHANGELOG * [x] If applicable, add a new check to the [release checklist](https://github.com/rerun-io/rerun/blob/main/tests/python/release_checklist)! - [PR Build Summary](https://build.rerun.io/pr/6461) - [Recent benchmark results](https://build.rerun.io/graphs/crates.html) - [Wasm size tracking](https://build.rerun.io/graphs/sizes.html) To run all checks from `main`, comment on the PR with `@rerun-bot full-check`.
Currently, fullscreen is only supported on native. We should also support it on web in some capacity.
Places where this will be immediately useful:
The way it could work is:
<dialog>element as a direct child of<body><canvas>element between the<dialog>and its initial parent element when toggling fullscreen modeThis assumes that the parent element of the
<canvas>element is not expected to change, which isn't always the case. We aren't really interested in handling changes to the parent element of the<canvas>, but we want to account for it, so the fullscreen functionality will be disabled by default, and may be enabled via anallow_fullscreenoption set when instantiating the viewer. The<dialog>element will only be appended to<body>ifallow_fullscreenistrue.We want to show an extra "maximize" button in the top panel on web, next to the existing buttons used to toggle panels. It's not needed on native, because there the OS already provides a
maximizebutton. We also want to enable theToggleFullscreenUI command on web.Some changes to
eguiare needed to make this easier:resizeevent emilk/egui#4536The text was updated successfully, but these errors were encountered: