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

Added rudimentary HUD

Browse Source
This commit is contained in:
Erik Ziegler 2016-06-08 12:27:22 +02:00
parent e90db4a7c6
commit 7fca7e3129
16 changed files with 218 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
Packages/lesiontracker/client/components/lesionTable/lesionTable.html
View File

@ -10,21 +10,6 @@
{{ >lesionTableTimepointHeader }}
{{ /each }}
</div>
<div class="lesionTableWrapper">
{{ >lesionTableHeaderRow id="target" type="Targets" measurements=targets}}
{{ #each targets }}
{{ >lesionTableRow }}
{{ /each }}
{{ >lesionTableHeaderRow id="nonTarget" type="Non-targets" measurements=nonTargets}}
{{ #each nonTargets }}
{{ >lesionTableRow }}
{{ /each }}
{{ >lesionTableHeaderRow id="newLesions" type="New lesions" measurements=newLesions}}
{{ #each nonTargets }}
{{ >lesionTableRow }}
{{ /each }}
</div>
{{ >lesionTableView }}
</div>
</template>

30
Packages/lesiontracker/client/components/lesionTable/lesionTable.js
View File

@ -1,34 +1,4 @@
Template.lesionTable.helpers({
targets: function() {
// All Targets shall be listed first followed by Non-Targets
return Measurements.find({
isTarget: true
}, {
sort: {
lesionNumberAbsolute: 1
}
});
},
nonTargets: function() {
// All Targets shall be listed first followed by Non-Targets
return Measurements.find({
isTarget: false
}, {
sort: {
lesionNumberAbsolute: 1
}
});
},
newLesions: function() {
// All Targets shall be listed first followed by Non-Targets
return Measurements.find({
saved: false
}, {
sort: {
lesionNumberAbsolute: 1
}
});
},
timepoints: function() {
return Timepoints.find({}, {
sort: {

8
Packages/lesiontracker/client/components/lesionTable/lesionTable.styl
View File

@ -2,15 +2,9 @@
#lesionTableContainer
width: 100%
height: 16%
height: calc(100% - 105px)
background-color: #000000
#lesionTableWrapper
position: relative
width: 100%
height: 100%
margin: 0 auto
.lesionTableTimepointHeaderRow
display: flex

13
Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.html Normal file
View File

@ -0,0 +1,13 @@
<template name="lesionTableHUD">
<div id="lesionTableHUD">
<div class="header">
Measurements
</div>
{{ >lesionTableView }}
<div class="footer">
{{ #each toolbarButtons }}
{{ >toolbarSectionButton }}
{{ /each }}
</div>
</div>
</template>

33
Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.js Normal file
View File

@ -0,0 +1,33 @@
Template.lesionTableHUD.helpers({
toolbarButtons() {
var buttonData = [];
buttonData.push({
id: 'bidirectional',
title: 'Target',
classes: 'imageViewerTool',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-target'
});
buttonData.push({
id: 'nonTarget',
title: 'Non-Target',
classes: 'imageViewerTool toolbarSectionButton',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-non-target'
});
buttonData.push({
id: 'length',
title: 'Temp',
classes: 'imageViewerTool toolbarSectionButton',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-temp'
});
return buttonData;
}
});
Template.lesionTableHUD.onRendered(function() {
var dialog = $('#lesionTableHUD');
dialog.draggable();
});

86
Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl Normal file
View File

@ -0,0 +1,86 @@
@import "{design}/app"
$borderColor = rgba(77, 99, 110, 0.81)
$backgroundColor = #14191e
#lesionTableHUD
display: none
position: absolute
top: auto
left: auto
bottom: 3px
right: 3px
z-index: 10000
width: 318px
height: 326px
opacity: 0.95
background: black
border-radius: 8px
border: solid 1px $borderColor;
.header
width: 100%
height: 55px
line-height: 55px
background: $backgroundColor
border-bottom: $uiBorderThickness solid $borderColor
text-align: center
font-weight: 200
font-size: 20px
color: $textSecondaryColor
.lesionTableView.scrollArea
height: calc(100% - 55px - 70px)
padding-bottom: 20px
.footer
width: 100%
height: 70px
position: absolute
bottom: 0
background: $backgroundColor
border-top: $uiBorderThickness solid $borderColor
padding: 10px
.toolbarSectionButton
display: inline-block
color: $defaultColor
fill: $defaultColor
stroke: $defaultColor
padding: 0 10px
height: $toolbarHeight
min-width: 30px
cursor: pointer
text-align: center
&.disabled
opacity: 0.5
cursor: not-allowed
.buttonLabel
font-size: 12px
.svgContainer
margin: 0 auto
text-align: center
svg
background-color: transparent
margin: 2px
width: 21px
height: 21px
&:active, &.active
color: $activeColor
svg
fill: $activeColor
stroke: $activeColor
&:hover
color: $hoverColor
svg
fill: $hoverColor
stroke: $hoverColor

4
Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl
View File

@ -7,7 +7,7 @@ $headerRowHeight = 63px
background: #151a1f
color: $textSecondaryColor
fill: $textSecondaryColor
width: 100%
width: 316px
height: $headerRowHeight
display: flex
line-height: $headerRowHeight
@ -40,7 +40,7 @@ $headerRowHeight = 63px
color: #6fbde2
font-weight: 100
font-size: 40px
max-width: 30px
max-width: 50px
margin-right: 5px
height: $headerRowHeight
line-height: $headerRowHeight

18
Packages/lesiontracker/client/components/lesionTableView/lesionTableView.html Normal file
View File

@ -0,0 +1,18 @@
<template name="lesionTableView">
<div class="lesionTableView scrollArea">
{{ >lesionTableHeaderRow id="target" type="Targets" measurements=targets}}
{{ #each targets }}
{{ >lesionTableRow }}
{{ /each }}
{{ >lesionTableHeaderRow id="nonTarget" type="Non-targets" measurements=nonTargets}}
{{ #each nonTargets }}
{{ >lesionTableRow }}
{{ /each }}
{{ >lesionTableHeaderRow id="newLesions" type="New lesions" measurements=newLesions}}
{{ #each nonTargets }}
{{ >lesionTableRow }}
{{ /each }}
</div>
</template>

32
Packages/lesiontracker/client/components/lesionTableView/lesionTableView.js Normal file
View File

@ -0,0 +1,32 @@
Template.lesionTableView.helpers({
targets: function () {
// All Targets shall be listed first followed by Non-Targets
return Measurements.find({
isTarget: true
}, {
sort: {
lesionNumberAbsolute: 1
}
});
},
nonTargets: function () {
// All Targets shall be listed first followed by Non-Targets
return Measurements.find({
isTarget: false
}, {
sort: {
lesionNumberAbsolute: 1
}
});
},
newLesions: function () {
// All Targets shall be listed first followed by Non-Targets
return Measurements.find({
saved: false
}, {
sort: {
lesionNumberAbsolute: 1
}
});
}
});

13
Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl Normal file
View File

@ -0,0 +1,13 @@
.lesionTableView.scrollArea
width: 100%
height: 100%
overflow-x: hidden
overflow-y: auto
margin-right: -16px
padding-bottom: 100px
padding-right: 16px
-webkit-overflow-scrolling: touch
&::-webkit-scrollbar
display: none

3
Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html
View File

@ -15,7 +15,7 @@
{{>userAccountMenu}}
</div>
</div>
{{>timeoutCountdownDialog}}
{{ >timeoutCountdownDialog }}
<div id="worklistTabs" class="tab-content">
<div class="tab-pane active" id="worklistTab">
<div class="worklistContainer">
@ -32,4 +32,5 @@
{{ >lastLoginModal }}
{{ >studyContextMenu }}
{{ >progressDialog}}
{{ >lesionTableHUD }}
</template>

3
Packages/lesiontracker/client/components/lesionTracker/lesionTracker.js
View File

@ -49,6 +49,9 @@ Template.lesionTracker.events({
switchToTab(contentId);
},
'click #loadStudyList': function() {
// TODO: Make some set of 'closing study' callbacks
$('#lesionTableHUD').display('none');
switchToTab('worklistTab');
}
});

2
Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html
View File

@ -55,7 +55,7 @@
</div>
</div>
</div>
<div class="pull-right toolbarSectionButton">
<div id="toggleHUD" class="pull-right toolbarSectionButton">
<div class="svgContainer">
<svg>
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-hud"></use>

4
Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js
View File

@ -105,6 +105,10 @@ Template.toolbarSection.events({
var activeViewport = Session.get('activeViewport');
var element = $('.imageViewerViewport').get(activeViewport);
OHIF.viewer.functionList[command](element);
},
'click #toggleHUD': function(e) {
var lesionTableHUD = document.getElementById('lesionTableHUD');
toggleDialog(lesionTableHUD);
}
});

8
Packages/lesiontracker/package.js
View File

@ -125,10 +125,18 @@ Package.onUse(function(api) {
api.addFiles('client/components/lesionLocationDialog/lesionLocationDialog.js', 'client');
api.addFiles('client/components/lesionLocationDialog/lesionLocationDialog.styl', 'client');
api.addFiles('client/components/lesionTableView/lesionTableView.html', 'client');
api.addFiles('client/components/lesionTableView/lesionTableView.styl', 'client');
api.addFiles('client/components/lesionTableView/lesionTableView.js', 'client');
api.addFiles('client/components/lesionTable/lesionTable.html', 'client');
api.addFiles('client/components/lesionTable/lesionTable.styl', 'client');
api.addFiles('client/components/lesionTable/lesionTable.js', 'client');
api.addFiles('client/components/lesionTableHUD/lesionTableHUD.html', 'client');
api.addFiles('client/components/lesionTableHUD/lesionTableHUD.styl', 'client');
api.addFiles('client/components/lesionTableHUD/lesionTableHUD.js', 'client');
api.addFiles('client/components/lesionTableRow/lesionTableRow.html', 'client');
api.addFiles('client/components/lesionTableRow/lesionTableRow.styl', 'client');
api.addFiles('client/components/lesionTableRow/lesionTableRow.js', 'client');

1
Packages/viewerbase/package.js
View File

@ -156,6 +156,7 @@ Package.onUse(function(api) {
api.export('getInstanceClassDefaultViewport', 'client');
api.export('showConfirmDialog', 'client');
api.export('applyWLPreset', 'client');
api.export('toggleDialog', 'client');
// Export the ValidateJS Library with our added validators
//api.export('validate', 'client');