From 9e2d569d4844ada8a632ed31d32fd888cd191030 Mon Sep 17 00:00:00 2001 From: jprochazk <1665677+jprochazk@users.noreply.github.com> Date: Tue, 25 Jun 2024 13:21:00 +0200 Subject: [PATCH 1/2] set web viewer width/height + update docs --- rerun_js/web-viewer-react/README.md | 5 ++++- rerun_js/web-viewer-react/index.js | 4 +++- rerun_js/web-viewer/README.md | 5 ++++- rerun_js/web-viewer/index.ts | 5 +++++ 4 files changed, 16 insertions(+), 3 deletions(-) diff --git a/rerun_js/web-viewer-react/README.md b/rerun_js/web-viewer-react/README.md index bb0bbac041e4..1ee2c5e4e611 100644 --- a/rerun_js/web-viewer-react/README.md +++ b/rerun_js/web-viewer-react/README.md @@ -30,7 +30,7 @@ This means that `@rerun-io/web-viewer-react@0.10.0` can only connect to a data s import WebViewer from "@rerun-io/web-viewer-react"; export default function App() { - return + return } ``` @@ -39,6 +39,9 @@ The `rrd` in the snippet above should be a URL pointing to either: - A WebSocket connection to the SDK opened via the [`serve`](https://www.rerun.io/docs/reference/sdk-operating-modes#serve) API If `rrd` is not set, the Viewer will display the same welcome screen as . +This can be disabled by setting the `hide_welcome_screen` prop to `true`. + +⚠ It's important to set the viewer's width and height, as the viewer will not automatically resize to its parent element. ℹ️ Note: This package only targets recent versions of browsers. diff --git a/rerun_js/web-viewer-react/index.js b/rerun_js/web-viewer-react/index.js index ce935d7c52f6..1e25d8be976d 100644 --- a/rerun_js/web-viewer-react/index.js +++ b/rerun_js/web-viewer-react/index.js @@ -44,6 +44,8 @@ export default class WebViewer extends React.Component { const current = /** @type {HTMLDivElement} */ (this.#parent.current); this.#handle.start(this.#recordings, current, { hide_welcome_screen: this.#hide_welcome_screen, + width: "100%", + height: "100%", }); } @@ -61,7 +63,7 @@ export default class WebViewer extends React.Component { } render() { - const { width = "100%", height = "640px" } = this.props; + const { width = "640px", height = "360px" } = this.props; return React.createElement("div", { className: "rerun-web-viewer", style: { width, height, position: "relative" }, diff --git a/rerun_js/web-viewer/README.md b/rerun_js/web-viewer/README.md index 3dd1e66bc190..4b0abf9f2a36 100644 --- a/rerun_js/web-viewer/README.md +++ b/rerun_js/web-viewer/README.md @@ -35,7 +35,7 @@ const rrd = "…"; const parentElement = document.body; const viewer = new WebViewer(); -await viewer.start(rrd, parentElement); +await viewer.start(rrd, parentElement, { width: "800px", height: "600px" }); // … viewer.stop(); ``` @@ -45,6 +45,9 @@ The `rrd` in the snippet above should be a URL pointing to either: - A WebSocket connection to the SDK opened via the [`serve`](https://www.rerun.io/docs/reference/sdk-operating-modes#serve) API If `rrd` is not set, the Viewer will display the same welcome screen as . +This can be disabled by setting `hide_welcome_screen` to `true` in the options object of `viewer.start`. + +⚠ It's important to set the viewer's width and height, as the viewer will not automatically resize to its parent element. For a full example, see https://github.com/rerun-io/web-viewer-example. You can open the example via CodeSandbox: https://codesandbox.io/s/github/rerun-io/web-viewer-example diff --git a/rerun_js/web-viewer/index.ts b/rerun_js/web-viewer/index.ts index 27385caabd7b..446c1a6a9dcb 100644 --- a/rerun_js/web-viewer/index.ts +++ b/rerun_js/web-viewer/index.ts @@ -44,6 +44,9 @@ interface WebViewerOptions { render_backend?: Backend; hide_welcome_screen?: boolean; allow_fullscreen?: boolean; + + width?: string; + height?: string; } interface FullscreenOptions { @@ -107,6 +110,8 @@ export class WebViewer { this.#state = "starting"; this.#canvas = document.createElement("canvas"); + this.#canvas.style.width = options.width ?? "640px"; + this.#canvas.style.height = options.height ?? "360px"; this.#canvas.id = this.#id; parent.append(this.#canvas); From 161f8126e03bd67dedbbdcabc14f2c1607cd7cc6 Mon Sep 17 00:00:00 2001 From: jprochazk <1665677+jprochazk@users.noreply.github.com> Date: Tue, 25 Jun 2024 13:25:34 +0200 Subject: [PATCH 2/2] update docs --- rerun_js/web-viewer-react/README.md | 3 ++- rerun_js/web-viewer/README.md | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/rerun_js/web-viewer-react/README.md b/rerun_js/web-viewer-react/README.md index 1ee2c5e4e611..040555545ec0 100644 --- a/rerun_js/web-viewer-react/README.md +++ b/rerun_js/web-viewer-react/README.md @@ -41,7 +41,8 @@ The `rrd` in the snippet above should be a URL pointing to either: If `rrd` is not set, the Viewer will display the same welcome screen as . This can be disabled by setting the `hide_welcome_screen` prop to `true`. -⚠ It's important to set the viewer's width and height, as the viewer will not automatically resize to its parent element. +⚠ It's important to set the viewer's width and height, as without it the viewer may not display correctly. +Setting the values to empty strings is valid, as long as you style the canvas through other means. ℹ️ Note: This package only targets recent versions of browsers. diff --git a/rerun_js/web-viewer/README.md b/rerun_js/web-viewer/README.md index 4b0abf9f2a36..8ccc9aefbe6e 100644 --- a/rerun_js/web-viewer/README.md +++ b/rerun_js/web-viewer/README.md @@ -47,7 +47,8 @@ The `rrd` in the snippet above should be a URL pointing to either: If `rrd` is not set, the Viewer will display the same welcome screen as . This can be disabled by setting `hide_welcome_screen` to `true` in the options object of `viewer.start`. -⚠ It's important to set the viewer's width and height, as the viewer will not automatically resize to its parent element. +⚠ It's important to set the viewer's width and height, as without it the viewer may not display correctly. +Setting the values to empty strings is valid, as long as you style the canvas through other means. For a full example, see https://github.com/rerun-io/web-viewer-example. You can open the example via CodeSandbox: https://codesandbox.io/s/github/rerun-io/web-viewer-example