Merge pull request #115 from Kitware/improve-2d-annotations

Improve 2d annotations
Kitware · Jun 28, 2018 · a6fb997 · a6fb997
2 parents 955d796 + c2ae14e
commit a6fb997
Show file tree

Hide file tree

Showing 13 changed files with 4,015 additions and 3,942 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
     "itk": "9.1.1",
     "material-design-icons-iconfont": "3.0.3",
     "typeface-roboto": "0.0.54",
-    "vtk.js": "7.0.2",
+    "vtk.js": "7.3.0",
     "vue": "2.5.16",
     "vuetify": "1.0.19",
     "webworker-promise": "0.4.1",

diff --git a/src/components/controls/SliceControl/script.js b/src/components/controls/SliceControl/script.js
@@ -29,8 +29,8 @@ function generateSetGet(field) {
 
 const FIELDS = [
   { name: 'visibility', initialValue: false },
-  { name: 'colorLevel', initialValue: 1024 },
-  { name: 'colorWindow', initialValue: 2048 },
+  { name: 'windowLevel', initialValue: 1024 },
+  { name: 'windowWidth', initialValue: 2048 },
   { name: 'xSlice', initialValue: -1 },
   { name: 'ySlice', initialValue: -1 },
   { name: 'zSlice', initialValue: -1 },
@@ -58,7 +58,7 @@ function isSliceAvailable(name) {
   return !!this.proxyManager
     .getViews()
     .filter((v) => v.getContainer())
-    .filter((v) => v.getReferenceByName('name') === name).length;
+    .filter((v) => v.getName() === name).length;
 }
 
 // ----------------------------------------------------------------------------

diff --git a/src/components/controls/SliceControl/template.html b/src/components/controls/SliceControl/template.html
@@ -1,5 +1,5 @@
 <v-expansion-panel-content
-  v-if="domains.colorWindow && domains.colorLevel"
+  v-if="domains.windowWidth && domains.windowLevel"
   class=""
   :value="true"
 >
@@ -26,10 +26,10 @@
               :class="$style.noTopPadding"
               hide-details
 
-              v-model="colorWindow"
-              :min="domains.colorWindow.min"
-              :max="domains.colorWindow.max"
-              :step="domains.colorWindow.step"
+              v-model="windowWidth"
+              :min="domains.windowWidth.min"
+              :max="domains.windowWidth.max"
+              :step="domains.windowWidth.step"
             />
           </v-flex>
           <v-flex xs3>
@@ -38,10 +38,10 @@
               hide-details
               type="number"
 
-              v-model="colorWindow"
-              :min="domains.colorWindow.min"
-              :max="domains.colorWindow.max"
-              :step="domains.colorWindow.step"
+              v-model="windowWidth"
+              :min="domains.windowWidth.min"
+              :max="domains.windowWidth.max"
+              :step="domains.windowWidth.step"
             />
           </v-flex>
           <v-flex xs3>
@@ -52,10 +52,10 @@
               :class="$style.noTopPadding"
               hide-details
 
-              v-model="colorLevel"
-              :min="domains.colorLevel.min"
-              :max="domains.colorLevel.max"
-              :step="domains.colorLevel.step"
+              v-model="windowLevel"
+              :min="domains.windowLevel.min"
+              :max="domains.windowLevel.max"
+              :step="domains.windowLevel.step"
             />
           </v-flex>
           <v-flex xs3>
@@ -64,10 +64,10 @@
               hide-details
               type="number"
 
-              v-model="colorLevel"
-              :min="domains.colorLevel.min"
-              :max="domains.colorLevel.max"
-              :step="domains.colorLevel.step"
+              v-model="windowLevel"
+              :min="domains.windowLevel.min"
+              :max="domains.windowLevel.max"
+              :step="domains.windowLevel.step"
             />
           </v-flex>
         </v-layout>

diff --git a/src/components/core/App/script.js b/src/components/core/App/script.js
@@ -1,3 +1,5 @@
+import JSZip from 'jszip';
+
 import vtkDataArray from 'vtk.js/Sources/Common/Core/DataArray';
 import vtkImageData from 'vtk.js/Sources/Common/DataModel/ImageData';
 
@@ -40,6 +42,55 @@ function loadFiles(files) {
 
 // ----------------------------------------------------------------------------
 
+function saveState() {
+  const userData = { layout: 'Something...', settings: { bg: 'white' } };
+  const options = { recycleViews: true };
+  const zip = new JSZip();
+  zip.file(
+    'state.json',
+    JSON.stringify(this.proxyManager.saveState(options, userData), null, 2)
+  );
+  console.log('zip entry added, start compression...');
+  zip
+    .generateAsync({
+      type: 'blob',
+      compression: 'DEFLATE',
+      compressionOptions: {
+        level: 6,
+      },
+    })
+    .then((blob) => {
+      console.log('blob generated', blob);
+      const url = URL.createObjectURL(blob);
+      const anchor = document.createElement('a');
+      anchor.setAttribute('href', url);
+      anchor.setAttribute('download', 'state.glance');
+      anchor.click();
+      setTimeout(() => URL.revokeObjectURL(url), 60000);
+    });
+}
+
+// ----------------------------------------------------------------------------
+
+function loadState() {
+  ReaderFactory.openFiles(['glance'], (files) => {
+    const zip = new JSZip();
+    zip.loadAsync(files[0]).then(() => {
+      zip.forEach((relativePath, zipEntry) => {
+        if (relativePath.match(/state\.json$/i)) {
+          zipEntry.async('string').then((txt) => {
+            const userData = this.proxyManager.loadState(JSON.parse(txt));
+            this.landing = false;
+            console.log(JSON.stringify(userData, null, 2));
+          });
+        }
+      });
+    });
+  });
+}
+
+// ----------------------------------------------------------------------------
+
 function loadRemoteDatasets(urls, names, types = []) {
   if (!urls || !urls.length || !names || !names.length) {
     return Promise.reject(new Error('No urls or names provided'));
@@ -237,13 +288,15 @@ export default {
     }
   },
   methods: {
+    closeRawFileDialog,
+    copyErrorToClipboard,
+    isClipboardEnabled,
     loadFiles,
-    openFile,
-    loadRemoteDatasets,
     loadPendingRawFile,
-    closeRawFileDialog,
+    loadRemoteDatasets,
+    openFile,
     recordError,
-    isClipboardEnabled,
-    copyErrorToClipboard,
+    saveState,
+    loadState,
   },
 };
diff --git a/src/components/core/App/template.html b/src/components/core/App/template.html
@@ -56,6 +56,26 @@
         <v-icon>folder</v-icon>
         <span>Open</span>
       </v-btn>
+<!--
+      <v-btn
+        :class="$style.toolbarButton"
+        :disabled="!!loadingNames.length"
+        flat
+        v-on:click="saveState()"
+      >
+        <v-icon>cloud_upload</v-icon>
+        <span>Save state</span>
+      </v-btn>
+      <v-btn
+        :class="$style.toolbarButton"
+        :disabled="!!loadingNames.length"
+        flat
+        v-on:click="loadState()"
+      >
+        <v-icon>cloud_download</v-icon>
+        <span>Load state</span>
+      </v-btn>
+-->
       <v-btn
         :class="$style.toolbarButton"
         :disabled="landing"

diff --git a/src/components/core/VtkView/constants.js b/src/components/core/VtkView/constants.js
@@ -14,6 +14,20 @@ export const VIEW_TYPES_LPS = [
   { text: 'Axial', value: 'View2D_Z:z' },
 ];
 
+/* eslint-disable  no-template-curly-in-string */
+export const CURSOR_ANNOTATIONS = {
+  se:
+    '${valueArCursor}<br>${cursorIJK}&nbsp;/&nbsp;${cursorXYZ}<br>WL:&nbsp;${windowLevel}&nbsp;/&nbsp;WW:&nbsp;${windowWidth}',
+};
+
+export const ANNOTATIONS = {
+  sw: 'Image&nbsp;size:&nbsp;${sliceWidth}&nbsp;x&nbsp;${sliceHeight}',
+  nw:
+    'Origin:&nbsp;${sliceOrigin}<br>Spacing:&nbsp;${sliceSpacing}&nbsp;mm<br>${sliceIndex}&nbsp;of&nbsp;${sliceCount}',
+  se: 'WL:&nbsp;${windowLevel}&nbsp;/&nbsp;WW:&nbsp;${windowWidth}',
+};
+/* eslint-enable /* eslint-disable */
+
 export const VIEW_ORIENTATIONS = {
   default: {
     axis: 1,

diff --git a/src/components/core/VtkView/helper.js b/src/components/core/VtkView/helper.js
@@ -1,4 +1,7 @@
-import { VIEW_ORIENTATIONS } from 'paraview-glance/src/components/core/VtkView/constants';
+import {
+  VIEW_ORIENTATIONS,
+  ANNOTATIONS,
+} from 'paraview-glance/src/components/core/VtkView/constants';
 
 // ----------------------------------------------------------------------------
 
@@ -31,7 +34,7 @@ function getViewActions(proxyManager) {
 // ----------------------------------------------------------------------------
 
 function getViewType(view) {
-  return `${view.getProxyName()}:${view.getReferenceByName('name')}`;
+  return `${view.getProxyName()}:${view.getName()}`;
 }
 
 // ----------------------------------------------------------------------------
@@ -43,7 +46,7 @@ function getView(proxyManager, viewType, container) {
   for (let i = 0; i < views.length; i++) {
     if (views[i].getProxyName() === type) {
       if (name) {
-        if (views[i].getReferenceByName('name') === name) {
+        if (views[i].getName() === name) {
           view = views[i];
         }
       } else {
@@ -91,12 +94,7 @@ function updateViewsAnnotation(proxyManager) {
     const view = views[i];
     view.setCornerAnnotation('se', '');
     if (view.getProxyName().indexOf('2D') !== -1 && hasImageData) {
-      /* eslint-disable */
-      view.setCornerAnnotation(
-        'nw',
-        'CW ${colorWindow} - CL ${colorLevel}<br>Slice ${slice}'
-      );
-      /* eslint-enable */
+      view.setCornerAnnotations(ANNOTATIONS, true);
     } else {
       view.setCornerAnnotation('nw', '');
     }

diff --git a/src/components/core/VtkView/palette.js b/src/components/core/VtkView/palette.js
@@ -1,6 +1,6 @@
 import { SPECTRAL } from 'paraview-glance/src/palette';
 
-export const DEFAULT_BACKGROUND = 'linear-gradient(#333, #eee)';
+export const DEFAULT_BACKGROUND = 'linear-gradient(#333, #999)';
 
 // Specifications for vtkview background colors, images, and gradients
 export const BACKGROUND = [

diff --git a/src/components/core/VtkView/script.js b/src/components/core/VtkView/script.js
@@ -198,7 +198,7 @@ function screenCapture() {
     this.view.captureImage().then((imgSrc) => {
       this.$globalBus.$emit(Events.SCREENSHOT, {
         imgSrc,
-        viewName: this.view.getReferenceByName('name'),
+        viewName: this.view.getName(),
         viewData: this.viewData,
       });
     });

diff --git a/src/config/proxyLinks.js b/src/config/proxyLinks.js
@@ -4,8 +4,8 @@ const Volume = [
   // { link: 'UseShadow', property: 'useShadow' },
   // { link: 'SampleDistance', property: 'sampleDistance' },
   // { link: 'EdgeGradient', property: 'edgeGradient' },
-  { link: 'ColorWindow', property: 'colorWindow', updateOnBind: true },
-  { link: 'ColorLevel', property: 'colorLevel', updateOnBind: true },
+  { link: 'WW', property: 'windowWidth', updateOnBind: true },
+  { link: 'WL', property: 'windowLevel', updateOnBind: true },
   { link: 'SliceX', property: 'xSlice', updateOnBind: true },
   { link: 'SliceY', property: 'ySlice', updateOnBind: true },
   { link: 'SliceZ', property: 'zSlice', updateOnBind: true },
@@ -26,8 +26,8 @@ const Geometry = [
 
 const Slice = [
   { link: 'Visibility', property: 'visibility', updateOnBind: true },
-  { link: 'ColorWindow', property: 'colorWindow', updateOnBind: true },
-  { link: 'ColorLevel', property: 'colorLevel', updateOnBind: true },
+  { link: 'WW', property: 'windowWidth', updateOnBind: true },
+  { link: 'WL', property: 'windowLevel', updateOnBind: true },
 ];
 
 const Molecule = [

diff --git a/src/config/proxyUI.js b/src/config/proxyUI.js
@@ -1,18 +1,8 @@
-import ColorMaps from 'paraview-glance/src/config/ColorMaps';
-
 const Volume = [
   {
     name: 'colorBy',
     domain: {},
   },
-  {
-    name: 'lookupTableProxy',
-    domain: { colormaps: ColorMaps },
-  },
-  {
-    name: 'piecewiseFunctionProxy',
-    domain: {},
-  },
   {
     name: 'volumeVisibility',
   },
@@ -28,11 +18,11 @@ const Volume = [
     domain: { min: 0, max: 1, step: 0.01 },
   },
   {
-    name: 'colorWindow',
+    name: 'windowWidth',
     domain: { min: 0, max: 255, step: 1 },
   },
   {
-    name: 'colorLevel',
+    name: 'windowLevel',
     domain: { min: 0, max: 255, step: 1 },
   },
   {
@@ -57,10 +47,6 @@ const Geometry = [
     name: 'colorBy',
     domain: {},
   },
-  {
-    name: 'lookupTableProxy',
-    domain: { colormaps: ColorMaps },
-  },
   {
     name: 'representation',
     domain: {
@@ -93,11 +79,11 @@ const Slice = [
     name: 'visibility',
   },
   {
-    name: 'colorWindow',
+    name: 'windowWidth',
     domain: { min: 0, max: 255, step: 1 },
   },
   {
-    name: 'colorLevel',
+    name: 'windowLevel',
     domain: { min: 0, max: 255, step: 1 },
   },
   {
@@ -135,6 +121,7 @@ const Glyph = [
 ];
 
 const View3D = [
+  { name: 'name' },
   {
     name: 'background',
     domain: {
@@ -153,6 +140,7 @@ const View3D = [
 ];
 
 const View2D = [
+  { name: 'name' },
   {
     name: 'background',
     domain: {

diff --git a/src/samples/index.js b/src/samples/index.js
@@ -95,13 +95,13 @@ export default [
     description: 'Rotational C-arm x-ray scan of phantom of a human skull.',
   },
   {
-    label: 'LIDC2',
+    label: 'LIDC2.mha',
     image: Images.LIDC2,
-    size: '2 MB',
+    size: '1.5 MB',
     datasets: [
       {
-        name: 'LIDC2.vti',
-        url: 'https://kitware.github.io/vtk-js-datasets/data/vti/LIDC2.vti',
+        name: 'LIDC2.mha',
+        url: 'https://kitware.github.io/vtk-js-datasets/data/mha/LIDC2.mha',
       },
     ],
   },