Add shared overlay display controls and PET/CT sample

docs/loading_data.md

@@ -6,10 +6,6 @@ The most straightfoward way to load files into VolView is to drag-and-drop them
 
 VolView can load multiple DICOM files, folders containing multiple DICOM files, or zipped files containing multiple DICOM files. It also supports loading Nifti, NRRD, MHA, and 20+ other file formats thanks to the extensive I/O capabilities of ITK and itk.wasm, but care must be taken when loading non-DICOM data as the orientation of the data in those files cannot be assured.
 
-## Sample Data
-
-VolView includes links to a variety of sample data. Clicking on those thumbnails in the Data tab will download that data from Kitware data.kitware.com website into your local machine.
-
 ## DICOMWeb
 
 VolView lists and downloads DICOM files served by a DICOMWeb service. The host address of the DICOMWeb service is configurable by:
@@ -64,7 +60,7 @@ To layer images:
 
 1. Load the base image.
 1. On the Data tab, click the Add Layer button on the upper layer dataset.
-1. Under the Rendering tab, an opacity slider changes the transparency of the upper layer.
+1. Under the Rendering tab, open Layers to adjust the overlay color map, display range, opacity, and transparent background.
 
 ![Add Layer](./assets/add-layer.jpg)
 

docs/quick_start_guide.md

@@ -19,7 +19,7 @@ VolView accepts DICOM data in a vareity of formats:
 - Selections of files: a selection of multiple DICOM files
 - Zipped collections: containing a folder or selection of DICOM files
 
-From the Data tab (default tab when VolView is started) you can drag-and-drop DICOM data in any of the above formats or you can click to bring up a file browser and select your DICOM data. You can also select one of the sample DICOM collections listed, and it will be downloaded onto your machine from [https://data.kitware.com](https://data.kitware.com/#collection/586fef9f8d777f05f44a5c86/folder/634713cf11dab81428208e1e).
+From the Data tab (default tab when VolView is started) you can drag-and-drop DICOM data in any of the above formats or you can click to bring up a file browser and select your DICOM data. You can also select a sample dataset in the Data tab to download and open it.
 
 [**_Watch the video!_**](https://youtu.be/4PvZd7yTzf0)
 

docs/rendering.md

@@ -1,17 +1,26 @@
-# Cinematic Volume Rendering
+# Rendering
 
-VolView reads the DICOM tags of your data to determine appropriate preset parameter values for cinematic volume rendering for your data, but often you will want to tweak those presets to emphasize specific details. Rendering controls apply to the currently selected/active view. We recommend the following sequence of tweaks to improve your visualizations.
+## Image layers in 2D views
+
+The color bar always spans the image's full intensity range, even when the
+selected display range extends beyond it.
+
+**Transparent background** makes overlay values at or below Min transparent,
+then fades linearly to the selected opacity over the first 10% of the display
+range above Min.
 
-1. Cinematic volume rendering involves two "transfer functions": one maps the recorded intensity values (e.g., CT hounsfield units) to opacity and the other maps recorded intensity values to color. Both can be adjusted using the controls at the top of the Rendering tab. The graph at the top shows a histogram of the recorded intensity values in light gray and the current opacity transfer function as an overlaid curve in black. In that graph, beneath the black curve, is a depiction of the color transfer function. ![Cinematic](./assets/16-volview-rendering.jpg)
+## Cinematic rendering controls
 
+VolView reads the DICOM tags of your data to determine appropriate preset parameter values for cinematic volume rendering for your data, but often you will want to tweak those presets to emphasize specific details. Rendering controls apply to the currently selected/active view. We recommend the following sequence of tweaks to improve your visualizations.
+
+1. Cinematic volume rendering involves two "transfer functions": one maps the recorded intensity values (e.g., CT hounsfield units) to opacity and the other maps recorded intensity values to color. Both can be adjusted by expanding **3D Rendering** in the Rendering tab. The graph at the top shows a histogram of the recorded intensity values in light gray and the current opacity transfer function as an overlaid curve in black. In that graph, beneath the black curve, is a depiction of the color transfer function. ![Cinematic](./assets/16-volview-rendering.jpg)
    1. Begin by adjusting the opacity transfer function by a press-and-drag right/left on the top graph. ![Opacity](./assets/17-volview-opacity-notes.jpg)
    2. Then adjust the color transfer function by moving the blue dots on the colorbar beneath the graph. ![Color](./assets/17-volview-colormap-notes.jpg)
 
-2. You may decide that the colormaps and/or transfer function aren't suitable for your data. Click on the "Presets" bar to expand and show the available presets that offer alternative opacity and color transfer functions. ![Presets](./assets/18-volview-presets.jpg)
+2. You may decide that the colormaps and/or transfer function aren't suitable for your data. Expand **Color Presets** within **3D Rendering** to show the available presets that offer alternative opacity and color transfer functions. ![Presets](./assets/18-volview-presets.jpg)
    [**_Watch the video!_**](https://youtu.be/eyrGd-meg6I)
 
 3. Next, the lighting can be controlled.
-
    1. Ambient lighting is the general brightness of the scene.
    2. Diffuse lighting controls how the light reflects off the data. It is influenced by the position of the light relative to the orientation of the data's local surface.
    3. Light-follows-camera can be enabled / disabled to create shadows that highlights details within the data. When enabled, the light will be positioned in-line with the camera. When disabled, the last position of the light stays fixed relative to the data, even if the camera is moved. With light-follows-camera enabled, here is a view when the light is following the camera: ![Default Lighting](./assets/20-volview-lightfollowcamera1.jpg). By moving the camera (and thereby the light) to the front of the data and then disabling light-follows-camera, the view should look light this: ![Light Setup](./assets/20-volview-lightfollowcamera2.jpg). Then moving back to the side view will show shadows that emphasize depth and details: ![Shadows](./assets/20-volview-lightfollowcamera3.jpg).

docs/welcome_screen.md

@@ -8,15 +8,17 @@
 
 Information on the Patient data and non-DICOM data that have been loaded. The currently display image data is highlighted in blue.
 
-**Sample Data** presents a variety of DICOM data that can be used to quickly explore the capabilities of VolView. When you select a sample dataset, that data is downloaded from [http://data.kitware.com/](https://data.kitware.com/#collection/586fef9f8d777f05f44a5c86/folder/634713cf11dab81428208e1e).
+**Sample Data** presents datasets for exploring VolView. Select a thumbnail to
+download and open its images. The PET/CT Chest sample includes a configured PET
+overlay for trying the [layer display controls](./rendering.md).
 
 ### Annotations
 
 Lists the ruler and other measures that have been made on the currently loaded data.
 
 ### Rendering
 
-Controls for the 3D cinematic volume rendering.
+Controls for 3D cinematic rendering and 2D image overlays. See [Rendering](./rendering.md) for details.
 
 ## Load / Save State
 

package.json

@@ -54,6 +54,7 @@
     "@types/express": "^5.0.5",
     "@types/file-saver": "^2.0.7",
     "@types/mocha": "^10.0.10",
+    "@types/pngjs": "^6.0.5",
     "@velipso/polybool": "^2.0.11",
     "@vitejs/plugin-vue": "^6.0.2",
     "@vue/test-utils": "^2.4.6",
@@ -89,6 +90,7 @@
     "nanoid": "^5.1.6",
     "patch-package": "^8.0.1",
     "pinia": "^3.0.4",
+    "pngjs": "^7.0.0",
     "prettier": "3.7.2",
     "rollup-plugin-visualizer": "^6.0.5",
     "sass": "^1.94.2",

src/components/AboutBox.vue

@@ -166,36 +166,79 @@
       NIBIB R01EB014955, NCI R01CA220681, and NINDS R42NS086295
       <br />
       <br />
-      Sample data provided by the following sources:
-      <ul>
+      <h2 class="mt-2">Sample Data Sources</h2>
+      <v-divider class="mb-2" />
+      <ul class="sample-data-sources">
         <li>
-          PROSTATEx Challenge Data: Geert Litjens, Oscar Debats, Jelle Barentsz,
-          Nico Karssemeijer, and Henkjan Huisman. "ProstateX Challenge data",
-          The Cancer Imaging Archive (2017). DOI: 10.7937/K9TCIA.2017.MURS5CL
-          (<a
+          <strong>CTA Head and Neck:</strong> Sample distributed through
+          <a
             rel="noopener noreferrer"
             target="_blank"
-            href="https://wiki.cancerimagingarchive.net/pages/viewpage.action?pageId=23691656"
-            >TCIA</a
-          >)
+            href="https://data.kitware.com/#item/6347159711dab81428208e24"
+            >Kitware Data</a
+          >.
         </li>
         <li>
-          MRA Head and Neck: Test case 98890234 from the "Patient Contributed
-          Image Repository" (<a
+          <strong>MRA Head and Neck:</strong> Test case 98890234 from the
+          Patient Contributed Image Repository (<a
             rel="noopener noreferrer"
             target="_blank"
             href="http://www.pcir.org/researchers/98890234_20030505_MR.html"
             >PCIR.org</a
-          >)
+          >).
+        </li>
+        <li>
+          <strong>MRI PROSTATEx:</strong> Geert Litjens, Oscar Debats, Jelle
+          Barentsz, Nico Karssemeijer, and Henkjan Huisman. "ProstateX Challenge
+          data", The Cancer Imaging Archive (2017). (<a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://doi.org/10.7937/K9TCIA.2017.MURS5CL"
+            >DOI: 10.7937/K9TCIA.2017.MURS5CL</a
+          >).
         </li>
         <li>
-          3D ultrasound of a fetus: Sample data from
+          <strong>3D US Fetus:</strong> Sample data from
           <a
             rel="noopener noreferrer"
             target="_blank"
             href="http://tomovision.com"
-            >tomovision.com</a
-          >
+            >Tomovision</a
+          >.
+        </li>
+        <li>
+          <strong>Ultrasound Cine:</strong>
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://github.com/pydicom/pydicom/blob/v3.0.1/src/pydicom/data/test_files/examples_ybr_color.dcm"
+            >pydicom v3.0.1 example data</a
+          >, derived from color3d_jpeg_baseline.dcm with fewer frames and
+          rescaled pixels. See the
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://github.com/pydicom/pydicom/blob/v3.0.1/src/pydicom/data/test_files/README.txt"
+            >source and data notices</a
+          >.
+        </li>
+        <li>
+          <strong>PET/CT Chest:</strong> Li, P., Wang, S., Li, T., Lu, J.,
+          HuangFu, Y., and Wang, D. (2020). "A Large-Scale CT and PET/CT Dataset
+          for Lung Cancer Diagnosis (Lung-PET-CT-Dx)." The Cancer Imaging
+          Archive.
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://doi.org/10.7937/TCIA.2020.NNC2-0461"
+            >DOI: 10.7937/TCIA.2020.NNC2-0461</a
+          >.
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://creativecommons.org/licenses/by/4.0/"
+            >CC BY 4.0</a
+          >. Ten original DICOM instances selected from each series.
         </li>
       </ul>
     </v-card-text>
@@ -208,6 +251,10 @@
   margin: 0 auto;
   text-transform: uppercase;
 }
+
+.sample-data-sources li + li {
+  margin-top: 12px;
+}
 </style>
 
 <script>