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

LT-301: Addeing Stack Scroll, Reset, Rotate, Flip H, Flip V, Invert, Magnify, Elliptical ROI, Clear and Toggle CINE dialog buttons to More Tools panel

Browse Source
This commit is contained in:
Eloízio Salgado 2016-11-11 14:26:13 -02:00 committed by Erik Ziegler
parent 5d02b76453
commit c004aee40f
10 changed files with 179 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
LesionTracker/client/components/toolbarSection/toolbarSection.js
View File

@ -114,6 +114,77 @@ Template.toolbarSection.helpers({
const isToolDisabled = !Template.instance().data.timepointApi.currentTimepointId;
const buttonData = [];
buttonData.push({
id: 'stackScroll',
title: 'Stack Scroll',
classes: 'imageViewerTool toolbarSectionButton',
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-stack-scroll'
});
buttonData.push({
id: 'resetViewport',
title: 'Reset',
classes: 'imageViewerCommand toolbarSectionButton',
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-reset'
});
buttonData.push({
id: 'rotate',
title: 'Rotate',
classes: 'imageViewerTool toolbarSectionButton',
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-rotate'
});
buttonData.push({
id: 'flipH',
title: 'Flip H',
classes: 'imageViewerCommand toolbarSectionButton',
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-flip-horizontal'
});
buttonData.push({
id: 'flipV',
title: 'Flip V',
classes: 'imageViewerCommand toolbarSectionButton',
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-flip-vertical'
});
buttonData.push({
id: 'invert',
title: 'Invert',
classes: 'imageViewerCommand toolbarSectionButton',
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-invert'
});
buttonData.push({
id: 'magnify',
title: 'Magnify',
classes: 'imageViewerTool toolbarSectionButton',
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-magnify'
});
buttonData.push({
id: 'ellipticalRoi',
title: 'Ellipse',
classes: 'imageViewerTool toolbarSectionButton',
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-elliptical-roi'
});
buttonData.push({
id: 'toggleCineDialog',
title: 'CINE',
classes: 'imageViewerCommand toolbarSectionButton',
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-cineplay-toggle',
disableFunction: hasMultipleFrames
});
buttonData.push({
id: 'clearTools',
title: 'Clear',
classes: 'imageViewerCommand toolbarSectionButton',
svgLink: '/packages/ohif_viewerbase/assets/icons.svg#icon-tools-clear'
});
// TODO: Get real icons for CR / UN / EX
/* Disabling these for now, since they aren't hooked up in the Lesion Tracker yet
buttonData.push({

1
LesionTracker/client/components/viewer/viewer.html
View File

@ -6,6 +6,7 @@
{{>nonTargetMeasurementDialog (clone this)}}
{{>nonTargetResponseDialog (clone this)}}
{{>measurementTableHUD (clone this)}}
{{>cineDialog}}
</div>
<div id="viewer">
{{>toolbarSection (clone this)}}

10
LesionTracker/client/components/viewer/viewer.js
View File

@ -20,7 +20,6 @@ Template.viewer.onCreated(() => {
OHIF.viewer.functionList = $.extend(OHIF.viewer.functionList, {
toggleLesionTrackerTools: OHIF.lesiontracker.toggleLesionTrackerTools,
clearTools: clearTools,
bidirectional: () => {
// Used for hotkeys
toolManager.setActiveTool('bidirectional');
@ -28,7 +27,14 @@ Template.viewer.onCreated(() => {
nonTarget: () => {
// Used for hotkeys
toolManager.setActiveTool('nonTarget');
}
},
// Viewport functions
toggleCineDialog,
clearTools,
resetViewport,
invert,
flipV,
flipH
});
if (ViewerData[contentId].loadedSeriesData) {

40
Packages/ohif-viewerbase/assets/icons.svg
View File

@ -131,6 +131,46 @@
<circle id="icon-tools-zoom-circle" cx="7" cy="7" r="6" />
</g>
</symbol>
<symbol id="icon-tools-invert" width="24" height="28" viewBox="0 0 24 28">
<title>Invert</title>
<path d="M12 22.5v-17c-4.688 0-8.5 3.813-8.5 8.5s3.813 8.5 8.5 8.5zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z"></path>
</symbol>
<symbol id="icon-tools-stack-scroll" width="24" height="28" viewBox="0 0 24 28">
<title>Stack Scroll</title>
<path d="M24 21v2c0 0.547-0.453 1-1 1h-22c-0.547 0-1-0.453-1-1v-2c0-0.547 0.453-1 1-1h22c0.547 0 1 0.453 1 1zM24 13v2c0 0.547-0.453 1-1 1h-22c-0.547 0-1-0.453-1-1v-2c0-0.547 0.453-1 1-1h22c0.547 0 1 0.453 1 1zM24 5v2c0 0.547-0.453 1-1 1h-22c-0.547 0-1-0.453-1-1v-2c0-0.547 0.453-1 1-1h22c0.547 0 1 0.453 1 1z"></path>
</symbol>
<symbol id="icon-tools-elliptical-roi" width="24" height="28" viewBox="0 0 24 28">
<title>Elliptical ROI</title>
<path d="M12 5.5c-4.688 0-8.5 3.813-8.5 8.5s3.813 8.5 8.5 8.5 8.5-3.813 8.5-8.5-3.813-8.5-8.5-8.5zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12v0c6.625 0 12 5.375 12 12z"></path>
</symbol>
<symbol id="icon-tools-magnify" width="24" height="28" viewBox="0 0 24 28">
<title>Magnify</title>
<path d="M24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z"></path>
</symbol>
<symbol id="icon-tools-reset" width="24" height="28" viewBox="0 0 24 28">
<title>Reset</title>
<path d="M24 14c0 6.609-5.391 12-12 12-3.578 0-6.953-1.578-9.234-4.328-0.156-0.203-0.141-0.5 0.031-0.672l2.141-2.156c0.109-0.094 0.25-0.141 0.391-0.141 0.141 0.016 0.281 0.078 0.359 0.187 1.531 1.984 3.828 3.109 6.312 3.109 4.406 0 8-3.594 8-8s-3.594-8-8-8c-2.047 0-3.984 0.781-5.437 2.141l2.141 2.156c0.297 0.281 0.375 0.719 0.219 1.078-0.156 0.375-0.516 0.625-0.922 0.625h-7c-0.547 0-1-0.453-1-1v-7c0-0.406 0.25-0.766 0.625-0.922 0.359-0.156 0.797-0.078 1.078 0.219l2.031 2.016c2.203-2.078 5.187-3.313 8.266-3.313 6.609 0 12 5.391 12 12z"></path>
</symbol>
<symbol id="icon-tools-rotate" width="24" height="28" viewBox="0 0 24 28">
<title>Rotate</title>
<path d="M24 4v7c0 0.547-0.453 1-1 1h-7c-0.406 0-0.766-0.25-0.922-0.625-0.156-0.359-0.078-0.797 0.219-1.078l2.156-2.156c-1.469-1.359-3.406-2.141-5.453-2.141-4.406 0-8 3.594-8 8s3.594 8 8 8c2.484 0 4.781-1.125 6.312-3.109 0.078-0.109 0.219-0.172 0.359-0.187 0.141 0 0.281 0.047 0.391 0.141l2.141 2.156c0.187 0.172 0.187 0.469 0.031 0.672-2.281 2.75-5.656 4.328-9.234 4.328-6.609 0-12-5.391-12-12s5.391-12 12-12c3.078 0 6.062 1.234 8.266 3.313l2.031-2.016c0.281-0.297 0.719-0.375 1.094-0.219 0.359 0.156 0.609 0.516 0.609 0.922z"></path>
</symbol>
<symbol id="icon-tools-cineplay-toggle" width="28" height="28" viewBox="0 0 28 28">
<title>Cineplay Toggle</title>
<path d="M11.109 17.625l7.562-3.906-7.562-3.953v7.859zM14 4.156c5.891 0 9.797 0.281 9.797 0.281 0.547 0.063 1.75 0.063 2.812 1.188 0 0 0.859 0.844 1.109 2.781 0.297 2.266 0.281 4.531 0.281 4.531v2.125s0.016 2.266-0.281 4.531c-0.25 1.922-1.109 2.781-1.109 2.781-1.062 1.109-2.266 1.109-2.812 1.172 0 0-3.906 0.297-9.797 0.297v0c-7.281-0.063-9.516-0.281-9.516-0.281-0.625-0.109-2.031-0.078-3.094-1.188 0 0-0.859-0.859-1.109-2.781-0.297-2.266-0.281-4.531-0.281-4.531v-2.125s-0.016-2.266 0.281-4.531c0.25-1.937 1.109-2.781 1.109-2.781 1.062-1.125 2.266-1.125 2.812-1.188 0 0 3.906-0.281 9.797-0.281v0z"></path>
</symbol>
<symbol id="icon-tools-flip-vertical" width="6" height="28" viewBox="0 0 6 28">
<title>Vertical</title>
<path d="M6 19.5v3c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5zM6 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5zM6 3.5v3c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5z"></path>
</symbol>
<symbol id="icon-tools-flip-horizontal" width="22" height="28" viewBox="0 0 22 28">
<title>Horizontal</title>
<path d="M6 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5zM14 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5zM22 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5z"></path>
</symbol>
<symbol id="icon-tools-clear" width="22" height="28" viewBox="0 0 22 28">
<title>Clear</title>
<path d="M8 21.5v-11c0-0.281-0.219-0.5-0.5-0.5h-1c-0.281 0-0.5 0.219-0.5 0.5v11c0 0.281 0.219 0.5 0.5 0.5h1c0.281 0 0.5-0.219 0.5-0.5zM12 21.5v-11c0-0.281-0.219-0.5-0.5-0.5h-1c-0.281 0-0.5 0.219-0.5 0.5v11c0 0.281 0.219 0.5 0.5 0.5h1c0.281 0 0.5-0.219 0.5-0.5zM16 21.5v-11c0-0.281-0.219-0.5-0.5-0.5h-1c-0.281 0-0.5 0.219-0.5 0.5v11c0 0.281 0.219 0.5 0.5 0.5h1c0.281 0 0.5-0.219 0.5-0.5zM7.5 6h7l-0.75-1.828c-0.047-0.063-0.187-0.156-0.266-0.172h-4.953c-0.094 0.016-0.219 0.109-0.266 0.172zM22 6.5v1c0 0.281-0.219 0.5-0.5 0.5h-1.5v14.812c0 1.719-1.125 3.187-2.5 3.187h-13c-1.375 0-2.5-1.406-2.5-3.125v-14.875h-1.5c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h4.828l1.094-2.609c0.313-0.766 1.25-1.391 2.078-1.391h5c0.828 0 1.766 0.625 2.078 1.391l1.094 2.609h4.828c0.281 0 0.5 0.219 0.5 0.5z"></path>
</symbol>
<symbol id="icon-trial-info" viewBox="0 0 20 20">
<title>
Trial Information

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 16 KiB

2
Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.html
View File

@ -19,7 +19,7 @@
{{#button class='btn' action='cinePrevious' title='Previous image' disabled=(buttonDisabled)}}
<i class="fa fa-step-backward"></i>
{{/button}}
{{#button class='btn' action='cineToggle' title='Play / Stop' class=(valueIf isPlaying 'active' '') disabled=(buttonDisabled)}}
{{#button class='btn' action='cineToggle' title='Play / Stop' class=(concat 'btn ' (valueIf isPlaying 'active' '')) disabled=(buttonDisabled)}}
{{#if isPlaying}}
<i class="fa fa-fw fa-stop"></i>
{{else}}

2
Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.styl
View File

@ -31,6 +31,8 @@
&[disabled]
&:hover
color: inherit
&:active
theme('color', '$textSecondaryColor')
.cine-navigation, .cine-controls, .cine-options
cursor: default

3
Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js
View File

@ -226,7 +226,8 @@ function loadDisplaySetIntoViewport(data, templateData) {
let fps;
if (multiframeMetadata && multiframeMetadata.averageFrameRate > 0) {
fps = multiframeMetadata.averageFrameRate;
} else {
}
else {
fps = OHIF.viewer.cine.framesPerSecond;
}

16
Packages/ohif-viewerbase/lib/toolManager.js
View File

@ -18,8 +18,8 @@ var initialized = false;
function configureTools() {
// Get Cornerstone Tools
const { panMultiTouch, textStyle, toolStyle, toolColors,
length, bidirectional, arrowAnnotate, zoom } = cornerstoneTools;
const { panMultiTouch, textStyle, toolStyle, toolColors, length,
bidirectional, arrowAnnotate, zoom, ellipticalRoi } = cornerstoneTools;
// Set the configuration for the multitouch pan tool
const multiTouchPanConfig = {
@ -52,6 +52,7 @@ function configureTools() {
// Get some tools config to not override them
const lengthConfig = length.getConfiguration();
const bidirectionalConfig = bidirectional.getConfiguration();
const ellipticalRoiConfig = ellipticalRoi.getConfiguration();
// Add shadow to length tool
length.setConfiguration({
@ -65,6 +66,12 @@ function configureTools() {
...shadowConfig
});
// Add shadow to length tool
ellipticalRoi.setConfiguration({
...ellipticalRoiConfig,
...shadowConfig
});
// Set the configuration values for the text annotation (Arrow) tool
const annotateConfig = {
getTextCallback: getAnnotationTextCallback,
@ -132,6 +139,11 @@ toolManager = {
touch: cornerstoneTools.arrowAnnotateTouch
});
toolManager.addTool('rotate', {
mouse: cornerstoneTools.rotate,
touch: cornerstoneTools.rotateTouchDrag
});
if (OHIF.viewer.defaultTool) {
activeTool = OHIF.viewer.defaultTool;
}

38
Packages/ohif-viewerbase/lib/viewportFunctions.js
View File

@ -198,6 +198,44 @@ hasMultipleFrames = () => {
return true;
}
if(clipState) {
// Return true if the clip is playing
return !_.isUndefined(clipState.intervalId);
}
return false;
};
// Check if a study has multiple frames
hasMultipleFrames = () => {
// Its called everytime active viewport and/or layout change
Session.get('activeViewport');
Session.get('LayoutManagerUpdated');
const activeViewport = getActiveViewportElement();
// No active viewport yet: disable button
if(!activeViewport) {
return true;
}
// Get images in the stack
const stackToolData = cornerstoneTools.getToolState(activeViewport, 'stack');
// No images in the stack, so disable button
if (!stackToolData || !stackToolData.data || !stackToolData.data.length) {
return true;
}
// Get number of images in the stack
const stackData = stackToolData.data[0];
const nImages = stackData.imageIds && stackData.imageIds.length ? stackData.imageIds.length : 1;
// Stack has just one image, so disable button
if(nImages === 1) {
return true;
}
return false;
};

2
Packages/ohif-viewerbase/package.js
View File

@ -232,4 +232,6 @@ Package.onUse(function(api) {
api.export('clearTools', 'client');
api.export('resetViewport', 'client');
api.export('invert', 'client');
api.export('flipV', 'client');
api.export('flipH', 'client');
});