feat: added display area to viewport #280

Ouwen · 2022-11-04T07:10:01Z

Adds initial display area to viewport.

imageArea takes a imageX and imageY which should be a number (0,1] which determines the % of image to display.
imageFocalPoint takes a focalX and focalY which determines the camera focal point. focalX=1 and focalY=1 means the image is in the bottom right corner offscreen. focalX=0 and focalY=0 refers to the upper left corner offscreen and focalX=0.5 and focalY=0.5 is the default center image. These numbers represent the XY translation amount as a % of the image width/height

The displayArea will save the stored camera and functions properly for stack viewport. The display area can also be programmatically set with or without saving the stored camera. One use case for programmatic display area setting is to automatically zoom in on a ROI.

Implementation note: setPan is not available despite the existence of imageData and vtkRenderer. It seems the off screen renderer requires some initial imageData render before the displayToWorld function is available to the viewer instance. Since the setPan function requires canvasToWorld which requires displayToWorld we do not use setPan in the implementation of setDisplayArea. Instead we use the imageData.indexToWorld function is used instead to calculate the delta vector which the camera should move. This delta vector is doubled so the image can translate completely out of the viewport rather than just 50% (since radius is calculated to fit image).

netlify · 2022-11-04T07:10:06Z

✅ Deploy Preview for cornerstone-3d-docs ready!

Name	Link
🔨 Latest commit	`3df7e0d`
🔍 Latest deploy log	https://app.netlify.com/sites/cornerstone-3d-docs/deploys/6436161cfec5310008ca1f95
😎 Deploy Preview	https://deploy-preview-280--cornerstone-3d-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

packages/core/src/RenderingEngine/Viewport.ts

sedghi · 2022-11-09T04:11:53Z

focalX=1 and focalY=1 means the image is in the bottom right corner offscreen. what do you mean? which part of image is in the right corner? center of the image is in the bottom right?
Is there any reason you are not using just a flat object for displayedArea? {imageX, imageY, focalX, focalY}
Having focal point at the surface api mean that we are assuming the user knows the focal point is the center of the image, can we rename it to something else from focalX to something else (like offsetX or etc.)? Also I guess imageX does not represent that is %. We used to have topLeftHandCorner but I guess the benefit of % is more.

Let me know what you think, then I can review another round

Ouwen · 2022-11-09T18:38:54Z

Hey Alireza, thanks for the review!

focalX=1, focalY=1 will set the top left corner of the image at the bottom right of the screen,and the image will not be visible on canvas. focalX=0, focalY=0 will set the bottom right corner of the image to the top left of the screen, and the image will not be visible on canvas.
We can make it flat
Yeah there might be a better name possible, effectively it is what % the center of the image will be on screen. Ideally we can use the pan functionality, but it seems like at constructor time the vtkoffsetrenderer is not initialized.

packages/core/src/RenderingEngine/Viewport.ts

sedghi · 2022-11-09T21:48:46Z

focalX=1, focalY=1 will set the top left corner of the image at the bottom right of the screen,and the image will not be visible on canvas. focalX=0, focalY=0 will set the bottom right corner of the image to the top left of the screen, and the image will not be visible on canvas.

This is too confusing for an api. Why it switches the definition from top left (in 1, 1) to bottom right in (0,0)?

Ouwen · 2022-11-14T14:33:59Z

After debugging, I found the issue with the canvasToWorld. It seems reset camera is called on addVtkjsDrivenViewport
Then another reset camera is called on addActors since vtkImageData is not present. On the third call which reuses the vtkImageData object in stackviewport, is canvasToWorld functional

* fix: Re IDC #2761 fix loading of segmentations * fix: 🐛 use metadataProvider option instead of cornerstone.metaData in Segmentation_4X

packages/core/src/types/displayArea.ts

packages/core/src/RenderingEngine/Viewport.ts

Ouwen · 2023-03-18T02:15:42Z

@sedghi @wayfarer3130 the PR is ready for review

wayfarer3130 · 2023-03-22T17:54:50Z

common/reviews/api/streaming-image-volume-loader.api.md

@@ -426,6 +447,7 @@ enum Events {
    CAMERA_MODIFIED = 'CORNERSTONE_CAMERA_MODIFIED',

    CAMERA_RESET = 'CORNERSTONE_CAMERA_RESET',
+    DISPLAY_AREA_MODIFIED = 'CORNERSTONE_DISPLAY_AREA_MODIFIED',


I don't think this should have it's own even - there should be a way to get properties changed, or this should trigger camera modified events. @sedghi - any thoughts about the event? Other properties don't have their own events.

wayfarer3130 · 2023-03-22T17:56:16Z

common/reviews/api/streaming-image-volume-loader.api.md

@@ -1078,6 +1103,11 @@ interface IViewport {
    reset(immediate: boolean): void;
    setActors(actors: Array<ActorEntry>): void;
    setCamera(cameraInterface: ICamera, storeAsInitialCamera?: boolean): void;
+    setDisplayArea(


When there are more than one option, the options should go into a typed options property so that the number of arguments doesn't change.

wayfarer3130 · 2023-03-22T17:57:29Z

packages/core/examples/programaticPanZoom/index.ts

@@ -104,6 +106,161 @@ addButtonToToolbar({
  },
 });

+addButtonToToolbar({


I really like these examples - it makes it clear how this works

packages/core/src/RenderingEngine/Viewport.ts

wayfarer3130

There are a few issues to update here.

wayfarer3130 · 2023-03-22T17:59:51Z

packages/core/src/RenderingEngine/Viewport.ts

+
+    if (imageArea) {
+      const { areaX, areaY } = imageArea;
+      const zoom = Math.min(this.getZoom() / areaX, this.getZoom() / areaY);


This is not the correct calculation - the zoom level is:
const zoomHorizontal = canvas.height / (areaX * imageWidthInPixels)
const zoomVertical = canvas.width / (areaX * imageWidthInPixels)
then as an absolute zoom amount, you want:
setZoom(getZoom()/Math.min(zoomHorizontal, zoomVertical))
assuming that zoom 1 fills the smallest of horizontal and vertical spacing.

wayfarer3130 · 2023-03-22T18:06:34Z

packages/core/src/RenderingEngine/Viewport.ts

+  /** The camera that is defined for resetting displayArea to ensure absolute displayArea
+   * settings
+   */
+  private fitToCanvasCamera: ICamera;


I wonder if this is a better option than initialCamera? I might get rid of initialCamera in favour of fitToCanvasCamera, and also get rid of the reset initial camera stuff - I think it actually makes more sense.

packages/core/src/RenderingEngine/Viewport.ts

packages/core/src/enums/Events.ts

packages/core/src/types/displayArea.ts

Ouwen · 2023-03-29T21:19:05Z

@wayfarer3130, let me know what you think of these changes!

sedghi · 2023-04-04T12:28:06Z

Could we add some documentation on what is what exactly with the examples you have on the demo (Top, etc.) in here as well please? https://www.cornerstonejs.org/docs/concepts/cornerstone-core/viewports

Ouwen · 2023-04-11T23:25:27Z

Sure I can add some documentation on this

sedghi · 2023-04-12T01:40:08Z

packages/docs/docs/concepts/cornerstone-core/viewports.md

+
+In order to zoom into the image 200%, we would set the `imageArea` to [0.5, 0.5].
+
+Panning is controlled by a provided `imagePoint` and a provided `canvasPoint`. You can imagine the canvas as a sheet of white paper and the image as another sheet of paper like a chest x-ray. Mark a point in the canvas paper with a pen and then mark another point on your chest x-ray image. Now try to "pan" your image so the point so the `imagePoint` matches the


Great docs indeed

Ouwen force-pushed the gradienthealth/added_initial_display_area branch 2 times, most recently from 826d73e to 76897bf Compare November 4, 2022 09:20

Ouwen mentioned this pull request Nov 4, 2022

feat: added initial display area OHIF/Viewers#3007

Closed

5 tasks

Ouwen force-pushed the gradienthealth/added_initial_display_area branch 2 times, most recently from daf7c4a to a5472cf Compare November 6, 2022 00:35

sedghi reviewed Nov 9, 2022

View reviewed changes

packages/core/src/RenderingEngine/Viewport.ts Outdated Show resolved Hide resolved

sedghi reviewed Nov 9, 2022

View reviewed changes

packages/core/src/RenderingEngine/Viewport.ts Outdated Show resolved Hide resolved

Ouwen commented Nov 9, 2022

View reviewed changes

packages/core/src/RenderingEngine/Viewport.ts Outdated Show resolved Hide resolved

Ouwen force-pushed the gradienthealth/added_initial_display_area branch from a5472cf to c52a539 Compare November 19, 2022 05:33

Ouwen force-pushed the gradienthealth/added_initial_display_area branch 2 times, most recently from b7a39e3 to 147f775 Compare February 4, 2023 05:44

wayfarer3130 reviewed Feb 6, 2023

View reviewed changes

packages/core/src/types/displayArea.ts Outdated Show resolved Hide resolved

Ouwen commented Feb 7, 2023

View reviewed changes

packages/core/src/RenderingEngine/Viewport.ts Outdated Show resolved Hide resolved

Ouwen force-pushed the gradienthealth/added_initial_display_area branch 2 times, most recently from 52f3d5f to 0cb7814 Compare March 18, 2023 02:13

wayfarer3130 reviewed Mar 22, 2023

View reviewed changes

packages/core/src/RenderingEngine/Viewport.ts Outdated Show resolved Hide resolved

wayfarer3130 requested changes Mar 22, 2023

View reviewed changes

Ouwen force-pushed the gradienthealth/added_initial_display_area branch from 0cb7814 to 49b5448 Compare March 29, 2023 21:18

feat: added display area to viewport

f22578a

feat(docs): added explanation to DisplayArea

adca884

Ouwen force-pushed the gradienthealth/added_initial_display_area branch from 49b5448 to adca884 Compare April 11, 2023 23:56

sedghi reviewed Apr 12, 2023

View reviewed changes

sedghi approved these changes Apr 12, 2023

View reviewed changes

fix: potential missing displayArea

3df7e0d

wayfarer3130 approved these changes Apr 12, 2023

View reviewed changes

wayfarer3130 merged commit ec64803 into cornerstonejs:main Apr 12, 2023
10 checks passed

wayfarer3130 deleted the gradienthealth/added_initial_display_area branch April 12, 2023 19:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: added display area to viewport #280

feat: added display area to viewport #280

Ouwen commented Nov 4, 2022

netlify bot commented Nov 4, 2022 •

edited

sedghi commented Nov 9, 2022

Ouwen commented Nov 9, 2022

sedghi commented Nov 9, 2022

Ouwen commented Nov 14, 2022

Ouwen commented Mar 18, 2023

wayfarer3130 Mar 22, 2023

wayfarer3130 Mar 22, 2023

wayfarer3130 Mar 22, 2023

Ouwen Mar 27, 2023

wayfarer3130 left a comment

wayfarer3130 Mar 22, 2023

wayfarer3130 Mar 22, 2023

Ouwen commented Mar 29, 2023

sedghi commented Apr 4, 2023

Ouwen commented Apr 11, 2023

sedghi Apr 12, 2023


		In order to zoom into the image 200%, we would set the `imageArea` to [0.5, 0.5].

		Panning is controlled by a provided `imagePoint` and a provided `canvasPoint`. You can imagine the canvas as a sheet of white paper and the image as another sheet of paper like a chest x-ray. Mark a point in the canvas paper with a pen and then mark another point on your chest x-ray image. Now try to "pan" your image so the point so the `imagePoint` matches the

feat: added display area to viewport #280

feat: added display area to viewport #280

Conversation

Ouwen commented Nov 4, 2022

netlify bot commented Nov 4, 2022 • edited

✅ Deploy Preview for cornerstone-3d-docs ready!

sedghi commented Nov 9, 2022

Ouwen commented Nov 9, 2022

sedghi commented Nov 9, 2022

Ouwen commented Nov 14, 2022

Ouwen commented Mar 18, 2023

wayfarer3130 Mar 22, 2023

Choose a reason for hiding this comment

wayfarer3130 Mar 22, 2023

Choose a reason for hiding this comment

wayfarer3130 Mar 22, 2023

Choose a reason for hiding this comment

Ouwen Mar 27, 2023

Choose a reason for hiding this comment

wayfarer3130 left a comment

Choose a reason for hiding this comment

wayfarer3130 Mar 22, 2023

Choose a reason for hiding this comment

wayfarer3130 Mar 22, 2023

Choose a reason for hiding this comment

Ouwen commented Mar 29, 2023

sedghi commented Apr 4, 2023

Ouwen commented Apr 11, 2023

sedghi Apr 12, 2023

Choose a reason for hiding this comment

netlify bot commented Nov 4, 2022 •

edited