othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AWV-1: Adding navigation of display sets

Browse Source
This commit is contained in:
Bruno Alves de Faria 2016-08-23 18:00:06 -03:00
parent 2cc06e454a
commit 0ec797a79c
9 changed files with 129 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
OHIFViewer/client/components/toolbarSection/toolbarSection.js
View File

@ -92,6 +92,22 @@ Template.toolbarSection.helpers({
iconClasses: 'fa fa-undo'
});
buttonData.push({
id: 'previousDisplaySet',
title: 'Previous',
classes: 'imageViewerCommand',
buttonTemplateName: 'displaySetNavigation',
isPrevious: true
});
buttonData.push({
id: 'nextDisplaySet',
title: 'Next',
classes: 'imageViewerCommand',
buttonTemplateName: 'displaySetNavigation',
isPrevious: false
});
buttonData.push({
id: 'toggleCinePlay',
title: 'Toggle CINE Play',

1
Packages/ohif-core/client/lib/index.js
View File

@ -2,3 +2,4 @@ import './blaze.js';
import './string.js';
import './ui.js';
import './user.js';
import './viewer.js';

45
Packages/ohif-core/client/lib/viewer.js Normal file
View File

@ -0,0 +1,45 @@
import { OHIF } from 'meteor/ohif:core';
OHIF.viewer = {};
// Move display sets forward or backward in the selected viewport
OHIF.viewer.moveDisplaySet = isNext => {
// Get the selected viewport index
const viewportIndex = Session.get('activeViewport');
// Get the selected viewport data
const viewportData = window.layoutManager.viewportData[viewportIndex];
// Get the current study
const currentStudy = _.findWhere(window.layoutManager.studies, {
studyInstanceUid: viewportData.studyInstanceUid
}) || window.layoutManager.studies[0];
// Get the display sets
const displaySets = currentStudy.displaySets;
// Get the current display set
const currentDisplaySet = _.findWhere(displaySets, {
displaySetInstanceUid: viewportData.displaySetInstanceUid
});
// Get the new index and ensure that it will exists in display sets
let newIndex = _.indexOf(displaySets, currentDisplaySet);
if (isNext) {
newIndex++;
if (newIndex >= displaySets.length) {
newIndex = 0;
}
} else {
newIndex--;
if (newIndex < 0) {
newIndex = displaySets.length - 1;
}
}
// Get the display set data for the new index
const newDisplaySetData = displaySets[newIndex];
// Rerender the viewport using the new display set data
window.layoutManager.rerenderViewportWithNewDisplaySet(viewportIndex, newDisplaySetData);
};

16
Packages/viewerbase/client/components/viewer/displaySetNavigation/displaySetNavigation.html Normal file
View File

@ -0,0 +1,16 @@
<template name="displaySetNavigation">
<div id="{{this.id}}"
class="toolbarSectionButton rp-x-1 {{this.classes}} {{#if isPrevious}}js-prev{{else}}js-next{{/if}}"
title="{{this.title}}">
<div class="svgContainer">
{{#if isPrevious}}
<i class="fa fa-toggle-up fa-fw"></i>
{{else}}
<i class="fa fa-toggle-down fa-fw"></i>
{{/if}}
</div>
<div class="buttonLabel">
{{#if isPrevious}}Previous{{else}}Next{{/if}}
</div>
</div>
</template>

12
Packages/viewerbase/client/components/viewer/displaySetNavigation/displaySetNavigation.js Normal file
View File

@ -0,0 +1,12 @@
import { OHIF } from 'meteor/ohif:core';
import { Template } from 'meteor/templating';
Template.displaySetNavigation.events({
'click .js-next'(event, instance) {
OHIF.viewer.moveDisplaySet(true);
},
'click .js-prev'(event, instance) {
OHIF.viewer.moveDisplaySet(false);
}
});

28
Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js
View File

@ -116,6 +116,20 @@ function loadDisplaySetIntoViewport(data, templateData) {
var endLoadingHandler = cornerstoneTools.loadHandlerManager.getEndLoadHandler();
var errorLoadingHandler = cornerstoneTools.loadHandlerManager.getErrorLoadingHandler();
// Get the current viewport settings
var viewport = cornerstone.getViewport(element);
// Store the current series data inside the Layout Manager
layoutManager.viewportData[viewportIndex] = {
imageId: imageId,
studyInstanceUid: data.studyInstanceUid,
seriesInstanceUid: data.seriesInstanceUid,
displaySetInstanceUid: data.displaySetInstanceUid,
currentImageIdIndex: data.currentImageIdIndex,
viewport: viewport,
viewportIndex: viewportIndex
};
// Start loading the image.
cornerstone.loadAndCacheImage(imageId).then(function(image) {
var enabledElement;
@ -188,9 +202,6 @@ function loadDisplaySetIntoViewport(data, templateData) {
// Add stack state managers for the stack tool, CINE tool, and reference lines
cornerstoneTools.addStackStateManager(element, ['stack', 'playClip', 'referenceLines']);
// Get the current viewport settings
var viewport = cornerstone.getViewport(element);
// Enable orientation markers, if applicable
updateOrientationMarkers(element);
@ -322,17 +333,6 @@ function loadDisplaySetIntoViewport(data, templateData) {
$(element).off(allCornerstoneEvents, sendActivationTrigger);
$(element).on(allCornerstoneEvents, sendActivationTrigger);
// Store the current series data inside the Layout Manager
layoutManager.viewportData[viewportIndex] = {
imageId: imageId,
studyInstanceUid: data.studyInstanceUid,
seriesInstanceUid: data.seriesInstanceUid,
displaySetInstanceUid: data.displaySetInstanceUid,
currentImageIdIndex: data.currentImageIdIndex,
viewport: viewport,
viewportIndex: viewportIndex
};
ViewerData[contentId].loadedSeriesData = layoutManager.viewportData;
// Check if image plane (orientation / loction) data is present for the current image

24
Packages/viewerbase/client/components/viewer/playClipButton/playClipButton.html
View File

@ -1,20 +1,16 @@
<template name="playClipButton">
<div id="{{this.id}}"
class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{ #if isPlaying }}active{{/if}}"
class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{#if isPlaying}}active{{/if}}"
title="{{this.title}}">
<div class="svgContainer">
{{ #if isPlaying }}
<i class="fa fa-stop fa-fw"></i>
{{ else }}
<i class="fa fa-play fa-fw"></i>
{{ /if }}
</div>
<div class="buttonLabel">
{{ #if isPlaying }}
Stop
{{ else }}
Play
<div class="svgContainer">
{{#if isPlaying}}
<i class="fa fa-stop fa-fw"></i>
{{else}}
<i class="fa fa-play fa-fw"></i>
{{/if}}
</div>
<div class="buttonLabel">
{{#if isPlaying}}Stop{{else}}Play{{/if}}
</div>
</div>
</template>
</template>

12
Packages/viewerbase/lib/enableHotkeys.js
View File

@ -12,8 +12,10 @@ Meteor.startup(function() {
stackScroll: 'S',
pan: 'P',
magnify: 'M',
scrollDown: ['DOWN', 'PAGEDOWN'],
scrollUp: ['UP', 'PAGEUP'],
scrollDown: 'DOWN',
scrollUp: 'UP',
nextDisplaySet: 'PAGEDOWN',
previousDisplaySet: 'PAGEUP',
nextPanel: 'RIGHT',
previousPanel: 'LEFT',
invert: 'I',
@ -142,6 +144,12 @@ Meteor.startup(function() {
switchToImageRelative(-1);
}
},
previousDisplaySet() {
OHIF.viewer.moveDisplaySet(false);
},
nextDisplaySet() {
OHIF.viewer.moveDisplaySet(true);
},
nextPanel: function() {
nextActivePanel();
},

7
Packages/viewerbase/package.js
View File

@ -15,7 +15,7 @@ Package.onUse(function(api) {
api.use('practicalmeteor:loglevel');
api.use('momentjs:moment');
api.use('validatejs');
// Our custom packages
api.use('design');
api.use('ohif:core');
@ -119,6 +119,9 @@ Package.onUse(function(api) {
api.addFiles('client/components/viewer/playClipButton/playClipButton.html', 'client');
api.addFiles('client/components/viewer/playClipButton/playClipButton.js', 'client');
api.addFiles('client/components/viewer/displaySetNavigation/displaySetNavigation.html', 'client');
api.addFiles('client/components/viewer/displaySetNavigation/displaySetNavigation.js', 'client');
// Library functions
api.addFiles('lib/layoutManager.js', 'client');
api.addFiles('lib/createStacks.js', 'client');
@ -139,7 +142,7 @@ Package.onUse(function(api) {
api.addFiles('lib/resizeViewportElements.js', 'client');
api.addFiles('lib/setFocusToActiveViewport.js', 'client');
api.addFiles('lib/updateAllViewports.js', 'client');
api.addFiles('lib/instanceClassSpecificViewport.js', 'client');
api.addFiles('lib/setMammogramViewportAlignment.js', 'client');
api.addFiles('lib/isImage.js', 'client');