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

Cleanup to make LesionTracker layout work with refactored packages

Browse Source
This commit is contained in:
Erik Ziegler 2015-10-13 20:50:48 +02:00
parent b774c22593
commit a538b5f07d
25 changed files with 140 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
LesionTracker/client/compatibility/lesionTool.js
View File

@ -282,4 +282,9 @@ var cornerstoneTools = (function ($, cornerstone, cornerstoneMath, cornerstoneTo
toolType: toolType
});
return cornerstoneTools;
}($, cornerstone, cornerstoneMath, cornerstoneTools));
}($, cornerstone, cornerstoneMath, cornerstoneTools));
toolManager.addTool('lesion', {
mouse: cornerstoneTools.lesion,
touch: cornerstoneTools.lesionTouch
});

7
LesionTracker/client/components/hidingPanel/hidingPanel.styl
View File

@ -1,9 +1,6 @@
.hidingPanel
width: 12%
height: 100%
margin-top: 35px
padding-top: 35px
position: relative
float: left
overflow: auto
background-color: blue
color: black
float: left

5
LesionTracker/client/components/lesionMeasurementContainer/lesionMeasurementContainer.html Normal file
View File

@ -0,0 +1,5 @@
<template name="lesionMeasurementContainer">
<div class="lesionMeasurementContainer">
Table of lesion locations goes here
</div>
</template>

7
LesionTracker/client/components/lesionMeasurementContainer/lesionMeasurementContainer.styl Normal file
View File

@ -0,0 +1,7 @@
.lesionMeasurementContainer
width: 24%
float: left
height: 100%
background-color: white
border: 8px solid lightblue

5
LesionTracker/client/components/lesionTableContainer/lesionTableContainer.html Normal file
View File

@ -0,0 +1,5 @@
<template name="lesionTableContainer">
<div class="lesionTableContainer">
Current, Prior, Nadir, Baseline go here
</div>
</template>

7
LesionTracker/client/components/lesionTableContainer/lesionTableContainer.styl Normal file
View File

@ -0,0 +1,7 @@
.lesionTableContainer
background-color: pink
height: 25%
max-height: 200px
background-color: white
border: 8px solid pink

16
LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.html Normal file
View File

@ -0,0 +1,16 @@
<template name="lesionTrackerLayout">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Lesion Tracker</a>
</div>
</div>
</nav>
{{> yield}}
</template>

18
LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.styl Normal file
View File

@ -0,0 +1,18 @@
.navbar
margin-bottom: 0
border-radius: 0px
.navbar-form
margin: 0
padding: 15px 3px
.navbar-default
-webkit-transition: background-color 200ms linear
-moz-transition: background-color 200ms linear
-o-transition: background-color 200ms linear
-ms-transition: background-color 200ms linear
transition: background-color 200ms linear
@media (min-width: 768px)
.navbar
border-radius: 0px

48
LesionTracker/client/components/toolbar/toolbar.css
View File

@ -1,48 +0,0 @@
.toolbar {
width: 100%;
height: 35px;
text-align: center;
}
#toolbar-group button {
text-align: center;
margin-top: 2px;
margin-right: 3px;
margin-left: 3px;
color: #ffffff;
background-color: black;
width: 30px;
height: 30px;
border: 1px solid white;
}
#toolbar-group button > span {
width: 12px;
height: 12px;
position: absolute;
top: 9px;
left: 9px;
right: 9px;
bottom: 9px;
}
#toolbar-group .btn:hover {
border-width: 3px;
background-color: transparent;
color: white;
}
#toolbar-group .btn:focus, .btn:active {
outline: 0 !important;
border-width: 5px;
background-color: transparent;
color:white;
text-align: center;
}
#toolbar-group .btn:focus > span{
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
}

36
LesionTracker/client/components/toolbar/toolbar.html
View File

@ -1,16 +1,26 @@
<template name="toolbar">
<div id="toolbar" class="toolbar">
<div id="toolbar-group" class="btn-group">
<div id='toolbar'>
<div class="btn-group">
<!-- WW/WL -->
<button id="wwwc" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="WW/WC"><span class="fa fa-sun-o"></span></button>
<button id="wwwc" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="WW/WC"><span class="fa fa-sun-o"></span></button>
<!-- Invert -->
<button id="invert" type="button" class="imageViewerCommand btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Invert"><span class="fa fa-adjust"></span></button>
<button id="invert" type="button" class="imageViewerCommand btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Invert"><span class="fa fa-adjust"></span></button>
<!-- Zoom -->
<button id="zoom" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Zoom"><span class="fa fa-search"></span></button>
<button id="zoom" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Zoom"><span class="fa fa-search"></span></button>
<!-- Pan -->
<button id="pan" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Pan"><span class="fa fa-arrows"></span></button>
<button id="pan" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Pan"><span class="fa fa-arrows"></span></button>
<!-- Stack scroll -->
<button id="stackScroll" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Stack Scroll"><span class="fa fa-bars"></span></button>
<button id="stackScroll" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Stack Scroll"><span class="fa fa-bars"></span></button>
<!-- Length measurement -->
<button id="length" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Length Measurement"><span class="fa fa-arrows-v"></span></button>
<!-- Angle measurement -->
<!--<button id="angle" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Angle Measurement"><span class="fa fa-angle-left"></span></button>-->
<!-- Pixel probe -->
<button id="dragProbe" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Pixel Probe"><span class="fa fa-dot-circle-o"></span></button>
<!-- Elliptical ROI -->
<button id="ellipticalRoi" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Elliptical ROI"><span class="fa fa-circle-o"></span></button>
<!-- Rectangle ROI -->
<button id="rectangleRoi" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Rectangle ROI"><span class="fa fa-square-o"></span></button>
<!-- Play clip -->
<button id="playClip" type="button" class="imageViewerCommand btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Play/Stop Clip">
{{ #if isPlaying }}
@ -19,16 +29,8 @@
<span class="fa fa-play"></span>
{{ /if }}
</button>
<!-- Angle measurement -->
<!--<button id="angle" type="button" class="imageViewerTool btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Angle Measurement"><span class="fa fa-angle-left"></span></button>-->
<!-- Pixel probe -->
<button id="dragProbe" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Pixel Probe"><span class="fa fa-dot-circle-o"></span></button>
<!-- Length measurement -->
<button id="length" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Length Measurement"><span class="fa fa-arrows-v"></span></button>
<!-- Elliptical ROI -->
<button id="ellipticalRoi" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Elliptical ROI"><span class="fa fa-circle-o"></span></button>
<!-- Rectangle ROI -->
<button id="rectangleRoi" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Rectangle ROI"><span class="fa fa-square-o"></span></button>
<!--<button id="layout" type="button" class="btn btn-sm btn-default dropdown-toggle" data-container="body" data-toggle="dropdown" aria-expanded="false" data-placement="right" title="Layout" rel="tooltip"><span class="fa fa-th-large"></span></button>
{{> layoutChooser}}-->
<!-- Lesion Tool -->
<button id="lesion" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Lesion Tool"><span class="fa fa-arrows-v"></span></button>
</div>

21
LesionTracker/client/components/toolbar/toolbar.js
View File

@ -9,13 +9,9 @@ Template.toolbar.events({
if (!OHIF.viewer.functionList.hasOwnProperty(command)) {
return;
}
// TODO = Add support for active viewports
//var element = getActiveViewportElement();
$('.imageViewer').each(function() {
var element = this;
OHIF.viewer.functionList[command](element);
});
var viewportIndex = Session.get('ActiveViewport');
var element = $('.imageViewerViewport').get(viewportIndex);
OHIF.viewer.functionList[command](element);
}
});
@ -26,9 +22,12 @@ Template.toolbar.onRendered(function() {
// Enable tooltips for the layout button
var extraTooltipButtons = $('[rel="tooltip"]');
extraTooltipButtons.tooltip(OHIF.viewer.tooltipConfig);
});
toolManager.addTool('lesion', {
mouse: cornerstoneTools.lesion,
touch: cornerstoneTools.lesionTouch
});
Template.toolbar.helpers({
'isPlaying': function() {
Session.get('UpdateCINE');
var viewportIndex = Session.get('ActiveViewport');
return !!OHIF.viewer.isPlaying[viewportIndex];
}
});

0
OHIFViewer/client/components/viewer/toolRow/toolbar.styl → LesionTracker/client/components/toolbar/toolbar.styl
View File

9
LesionTracker/client/components/viewer.css
View File

@ -1,7 +1,12 @@
.viewer{
.viewer {
width: 100%;
height: 100%;
height: calc(100% - 54px);
margin: 0;
padding: 0;
background-color: black;
}
.navbar {
margin-bottom: 0;
border-radius: 0;
}

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

@ -5,5 +5,6 @@
<div id="viewer" class="viewer">
{{ >hidingPanel }}
{{ >viewerMain }}
{{ >lesionMeasurementContainer }}
</div>
</template>

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

@ -60,7 +60,7 @@ function resizeViewports() {
Session.setDefault('ActiveViewport', 0);
Session.setDefault('viewportRows', 1);
Session.setDefault('viewportColumns', 1);
Session.setDefault('viewportColumns', 2);
// Avoid doing DOM manipulation during the resize handler
// because it is fired very often.

5
LesionTracker/client/components/viewerMain/viewerMain.css
View File

@ -1,5 +0,0 @@
.viewerMain {
width: 88%;
height: 100%;
margin-left: 12%;
}

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

@ -2,6 +2,7 @@
<div class="viewerMain">
{{> toolbar}}
{{> imageViewerViewports}}
{{> lesionTableContainer}}
<!--TODO: Bottom lesion table container will be here-->
</div>
</template>

8
LesionTracker/client/components/viewerMain/viewerMain.styl Normal file
View File

@ -0,0 +1,8 @@
.viewerMain
width: 64%;
height: 100%
float: left
#imageViewerViewports
height: calc(75% - 30px)
width: 100%

4
LesionTracker/client/route.js
View File

@ -1,5 +1,5 @@
Router.configure({
layoutTemplate: 'layout',
layoutTemplate: 'lesionTrackerLayout',
//loadingTemplate: '',
notFoundTemplate: 'notFound'
});
@ -14,7 +14,7 @@ Router.route('/', function () {
ViewerStudies = new Mongo.Collection(null);
Router.route('/viewer/:_id', {
layoutTemplate: 'layout',
layoutTemplate: 'lesionTrackerLayout',
name: 'viewer',
onBeforeAction: function() {
var self = this;

9
LesionTracker/client/stylesheets/docking-container.css
View File

@ -1,16 +1,17 @@
/*****************************/
/* Toggle */
/*****************************/
* {
box-sizing: border-box;
}
.dockingContainer, .collapseVertical, .collapseHorizontal {
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.dockingContainer {
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
@ -47,6 +48,8 @@
.btnCollapseIcon-collapse{
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}

0
OHIFViewer/client/components/viewer/toolRow/toolbar.html → OHIFViewer/client/components/viewer/toolbar/toolbar.html
View File

0
OHIFViewer/client/components/viewer/toolRow/toolbar.js → OHIFViewer/client/components/viewer/toolbar/toolbar.js
View File

15
OHIFViewer/client/components/viewer/toolbar/toolbar.styl Normal file
View File

@ -0,0 +1,15 @@
#toolbar
background-color: black
text-align: center
.btn-group
display: inline-block
button
text-align: center
color: #ffffff
background-color: #424242
border-color: #424242
&.active, &:active
background-color: #3B678E

BIN
OHIFViewer/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

6
Packages/viewerbase/components/studyBrowser/studyBrowser/studyBrowser.styl
View File

@ -1,6 +1,8 @@
.studyBrowser
float: left
height: 100%
width: 120px
width: 100%
min-width: 120px
overflow: auto
background-color: black
background-color: black
padding-bottom: 20px