feat(element): Add compare example with linked camera

InsightSoftwareConsortium · Jan 31, 2024 · f94cc2d · f94cc2d
1 parent 00936cf
commit f94cc2d
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 6 deletions.
diff --git a/packages/element/examples/compare.html b/packages/element/examples/compare.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>itk-view-2d</title>
+    <link rel="stylesheet" href="index.css" />
+    <script type="module" src="../src/itk-viewer-element.ts"></script>
+    <script type="module" src="../src/itk-viewport.ts"></script>
+    <script type="module" src="../src/itk-view-2d.ts"></script>
+    <script type="module" src="../src/itk-view-2d-vtkjs.ts"></script>
+
+    <script type="module" src="./compare.ts"></script>
+  </head>
+
+  <body>
+    <itk-viewer class="fill" style="flex-direction: row; gap: 0.25rem">
+      <itk-viewport class="fill">
+        <itk-view-2d class="fill">
+          <itk-view-2d-vtkjs></itk-view-2d-vtkjs>
+        </itk-view-2d>
+      </itk-viewport>
+      <itk-viewport class="fill">
+        <itk-view-2d class="fill">
+          <itk-view-2d-vtkjs></itk-view-2d-vtkjs>
+        </itk-view-2d>
+      </itk-viewport>
+    </itk-viewer>
+  </body>
+</html>
diff --git a/packages/element/examples/compare.ts b/packages/element/examples/compare.ts
@@ -0,0 +1,25 @@
+import { ZarrMultiscaleSpatialImage } from '@itk-viewer/io/ZarrMultiscaleSpatialImage.js';
+import { setPipelineWorkerUrl, setPipelinesBaseUrl } from 'itk-wasm';
+
+const pipelineWorkerUrl = '/itk/web-workers/itk-wasm-pipeline.min.worker.js';
+setPipelineWorkerUrl(pipelineWorkerUrl);
+const pipelineBaseUrl = '/itk/pipelines';
+setPipelinesBaseUrl(pipelineBaseUrl);
+
+document.addEventListener('DOMContentLoaded', async function () {
+  const [v0, v1] = Array.from(document.querySelectorAll('itk-viewport')).map(
+    (el) => el.getActor(),
+  );
+  const camera = v0?.getSnapshot()?.context?.camera;
+  if (!camera) throw new Error('Could not get camera');
+  v1?.send({ type: 'setCamera', camera });
+
+  const imagePath = '/ome-ngff-prototypes/single_image/v0.4/zyx.ome.zarr';
+  const url = new URL(imagePath, document.location.origin);
+  const image = await ZarrMultiscaleSpatialImage.fromUrl(url);
+
+  const viewerElement = document.querySelector('itk-viewer');
+  if (!viewerElement) throw new Error('Could not find element');
+  const viewer = viewerElement.getActor();
+  viewer.send({ type: 'setImage', image, name: 'image' });
+});
diff --git a/packages/element/examples/view-2d.ts b/packages/element/examples/view-2d.ts
@@ -8,13 +8,11 @@ setPipelinesBaseUrl(pipelineBaseUrl);
 
 document.addEventListener('DOMContentLoaded', async function () {
   const imagePath = '/ome-ngff-prototypes/single_image/v0.4/zyx.ome.zarr';
-  // const imagePath = '/astronaut.zarr';
   const url = new URL(imagePath, document.location.origin);
   const image = await ZarrMultiscaleSpatialImage.fromUrl(url);
 
   const viewerElement = document.querySelector('itk-viewer');
   if (!viewerElement) throw new Error('Could not find element');
   const viewer = viewerElement.getActor();
-
   viewer.send({ type: 'setImage', image, name: 'image' });
 });
diff --git a/packages/element/src/itk-viewer-element.ts b/packages/element/src/itk-viewer-element.ts
@@ -18,10 +18,7 @@ export class ItkViewer extends LitElement {
   }
 
   render() {
-    return html`
-      <h1>Viewer</h1>
-      <slot @viewport=${handleLogic(this.actor)}></slot>
-    `;
+    return html`<slot @viewport=${handleLogic(this.actor)}></slot>`;
   }
 }