The F.A.S.T.Cardiac example
application (shown below) demonstrates a more typical UI experience for
an
Advanced Visualization application. The Clinical use case for this app
would be
to segment out multiple structures from a contrast chest CT exam
including polygon mesh extraction for 3D Printing of the Cardiac
structures. This app will demonstrate how
F.A.S.T.
Interactive Segmentation can used to segment out :
Contrast filled Arteries
(Aorta and main coronary arteries)
Contrast filled chambers
Myocardium
The below picture shows the
results of
segmenting these structures in the UI.
User Interface
The Segmentation tab of the application consists of 4
viewports
Top
left – The resulting segmentation (will start off blank)
Top
right – Axial image with resulting segmentation for that slice
Bottom
left – Sagittal image with resulting segmentation for that
slice
Bottom
right – Coronal image with resulting segmentation for that
slice
And controls are kept to a minimum. The only tools down the
left hand side
are the tools which allow you to select which anatomical structure you
currently segmenting.
The Mesh Extraction tab of the application consists of 4 viewports
Top left - The segmentation from the prior tab. Which ever labels
from the segmentation are selected by the check boxes on the left will
be shown in solid colors while non-selected labels will be shown in
translucent colors. The isosurface that will be used for mesh
extraction is controlled by the orange slider on the right.
Top right - Axial image. Once polygon meshes are extracted the
outline of polygons mesh as it intersects with the slice are displayed
in green.
Bottom left - A table of polygon mesh statistics, showing the
number verticies, triangles etc including the mesh validation
statistics are shown.
Bottom right - Polygon rendering of the meshes as they have been extracted from the dataset.
On the left are controls: Check Boxes to select segmentation labels to
operate on and buttons to perform mesh extraction operations (Extract,
Optimize, Clean, Colorize, or Complete - meaning all 4 steps)
On the bottom is the mouse legend which depicts the current
mouse actions
per viewport (note that ctrl, shift and alt modifiers perform different
actions,
simply press the appropriate key and the mouse legend changed to show
you what
the action will be with that modifier key). All the basic operations
are available,
rotate, scroll, pan, zoom, etc.
Segmenting
Interactive Segmentation is utilized
in this example. To
segment out a structure click (alt left as shown in the mouse legend)
on the
structure in one of the 3 MPR viewports. Move the mouse to adjust the
segmentation
before letting the mouse button up. Moving the mouse vertically adjusts
the
maximum size of the growing operation. Moving the mouse horizontally
adjusts
the “aggressiveness” of the segmentation operation.
In this app, aggressiveness is always
horizontal movement adjusts the maximum and/or
minimum HU values
to segment through (for contrast arterial
only minimum, for Kidneys and vessels, both).
To clean up segmentation you may Free
Hand Cut to remove
extraneous segmentation on the 3D Viewport.
Mesh Extraction
On the mesh extraction tab select the label or labels that you wish to
extract, adjust the isosurface threshold till you see the appearance
you would like to get and click one of the mesh action buttons.
Complete will perform all actions (Extract, Optimize, Clean, Colorize),
otherwise click individual step buttons in order to see the polygons at
each step. Note that you can go back to any step, for example, if the
mesh is not completely cleaned, you can run a second pass of cleaning
(but you will need to colorize again once done).
On the Polygon viewport you can select which labeled mesh objects to
display and this will effect both the 3D Polygon viewport and the 2D
Axial intersection overlays.
Source code and interesting coding features in this example
Some
core utilities are grabbed from the common
directory
Segmentation
mouse adapters are grabbed from the
common directory, the source code exists there for you to see an
example of how
mouse motions can be utilized to perform interactive segmentation.
8 viewports are contained in “widget” HTML div
elements that also utilize controls (buttons) right on the viewports.
You can see
how we used those, but you can create any controls any way you like.
The 8 elements represent the 4 viewports on each of the two tabs which
start out hidden and are made visible in the code depending on which
tab is selected.
cardiac.js
window.onload()
kicks off the processing
Simpler
example apps discuss viewport creation,
but here segmentation structures are created. For the Polygon viewport all the TFs are aset to blank.
The
segEngines array is used to hand the mouse adaptors
the list of viewports that must be updated when segmentation changes,
in this
case all 4 viewports.
For the Axial Outline viewport we dont want to show the
2D Segmentation overlays, just the outlines, so all 8 TF's are set to
simple W/L transfer functions.
The
segmentationContext utility function makeColorLabeledTFsfromWindowLevel
is used to create the upper Render Ranges for the segmented labels.
g_processingSegOp
is a global flag that keeps
more mouse events from kicking off multiple segmentation operations
until the
prior operation is done (including rendering). It is decremented once
rendering
for any viewport is completed and incremented at the beginning of a seg
operation to the number of viewports that will display the results of
this segmentation.
2/3DViewport.js
This
is a wrapper around HTML*Viewport class from
the SDK.
You
can see how to change actions for mouse clicks
You
can see how to draw overlays (e.g. text)
over the images
Polygons.js
This shows all the functionality for the Polygon Mesh handling
To run the example, in the local URL of localhost:8088/apps/cardiac,
change “localhost”
to your server IP address, and enter the URL into your browser.
F.A.S.T. Cardiac
The F.A.S.T. Cardiac example application (shown below) demonstrates a more typical UI experience for an Advanced Visualization application. The Clinical use case for this app would be to segment out multiple structures from a contrast chest CT exam including polygon mesh extraction for 3D Printing of the Cardiac structures. This app will demonstrate how F.A.S.T. Interactive Segmentation can used to segment out :
The below picture shows the results of segmenting these structures in the UI.
User Interface
The Segmentation tab of the application consists of 4 viewports
And controls are kept to a minimum. The only tools down the left hand side are the tools which allow you to select which anatomical structure you currently segmenting.
The Mesh Extraction tab of the application consists of 4 viewports
- Top left - The segmentation from the prior tab. Which ever labels
from the segmentation are selected by the check boxes on the left will
be shown in solid colors while non-selected labels will be shown in
translucent colors. The isosurface that will be used for mesh
extraction is controlled by the orange slider on the right.
- Top right - Axial image. Once polygon meshes are extracted the
outline of polygons mesh as it intersects with the slice are displayed
in green.
- Bottom left - A table of polygon mesh statistics, showing the
number verticies, triangles etc including the mesh validation
statistics are shown.
- Bottom right - Polygon rendering of the meshes as they have been extracted from the dataset.
On the left are controls: Check Boxes to select segmentation labels to operate on and buttons to perform mesh extraction operations (Extract, Optimize, Clean, Colorize, or Complete - meaning all 4 steps)On the bottom is the mouse legend which depicts the current mouse actions per viewport (note that ctrl, shift and alt modifiers perform different actions, simply press the appropriate key and the mouse legend changed to show you what the action will be with that modifier key). All the basic operations are available, rotate, scroll, pan, zoom, etc.
Segmenting
Interactive Segmentation is utilized in this example. To segment out a structure click (alt left as shown in the mouse legend) on the structure in one of the 3 MPR viewports. Move the mouse to adjust the segmentation before letting the mouse button up. Moving the mouse vertically adjusts the maximum size of the growing operation. Moving the mouse horizontally adjusts the “aggressiveness” of the segmentation operation. In this app, aggressiveness is always
To clean up segmentation you may Free Hand Cut to remove extraneous segmentation on the 3D Viewport.
Mesh Extraction
On the mesh extraction tab select the label or labels that you wish to extract, adjust the isosurface threshold till you see the appearance you would like to get and click one of the mesh action buttons. Complete will perform all actions (Extract, Optimize, Clean, Colorize), otherwise click individual step buttons in order to see the polygons at each step. Note that you can go back to any step, for example, if the mesh is not completely cleaned, you can run a second pass of cleaning (but you will need to colorize again once done).On the Polygon viewport you can select which labeled mesh objects to display and this will effect both the 3D Polygon viewport and the 2D Axial intersection overlays.
Source code and interesting coding features in this example
View the source /foviaserver/public/apps/cardiac/cardiac.js
To run the example, in the local URL of localhost:8088/apps/cardiac, change “localhost” to your server IP address, and enter the URL into your browser.