Updating design of OHIF Viewer using (OHIF-49)

This commit is contained in:
Erik Ziegler committed 2016-07-22 14:26:29 +02:00
1 parent f53ee8e030
commit a6c45ddd27
59 files changed
+776 -565

No files matched your search

+1 -1
View File
@@ -5,7 +5,7 @@ Package.describe({
});
Package.onUse(function(api) {
api.versionsFrom('1.3.4.1');
api.versionsFrom('1.3.5.1');
api.use('jquery');
api.use('dicomweb');
+1 -1
View File
@@ -5,7 +5,7 @@ Package.describe({
});
Package.onUse(function(api) {
api.versionsFrom('1.3.4.1');
api.versionsFrom('1.3.5.1');
api.use('ecmascript');
api.use('standard-app-packages');
@@ -21,3 +21,11 @@ html hr
border-top: 5px solid
border-right: 5px solid transparent
border-left: 5px solid transparent
.noselect
-webkit-touch-callout: none
-webkit-user-select: none
-khtml-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
@@ -19,12 +19,19 @@ $boxBackgroundColor = #3E5975
$boxBackgroundColorDark = #22374D
// Text Colors
$textColorActive = #2D2D2D
$textPrimaryColor = #ffffff
$textSecondaryColor = #91B9CD
// Other Colors
$menuBackgroundColor = #F2F2F2
// Viewport Settings
$viewportBorderThickness = 1px
$viewportBorderColor = $uiBorderColorDark
$viewportBorderColorHover = $uiBorderColor
$viewportBorderColorActive = $uiBorderColorActive
// Sizes
$topBarHeight = 40px
$toolbarHeight = 78px
@@ -1,6 +1,6 @@
<template name="hangingProtocolButtons">
<button id="previousPresentationGroup" type="button"
class="btn btn-sm btn-default"
class="btn btn-sm"
data-container="body"
data-toggle="tooltip"
data-placement="bottom"
@@ -9,7 +9,7 @@
<span class="fa fa-step-backward"></span>
</button>
<button id="nextPresentationGroup" type="button"
class="btn btn-sm btn-default"
class="btn btn-sm"
data-container="body"
data-toggle="tooltip"
data-placement="bottom"
@@ -19,11 +19,5 @@
{{ /each }}
</ul>
{{ /if }}
<button id="toggleProtocolEditor" type="button" class="btn btn-sm"
title="Toggle Hanging Protocol Editor"
data-toggle="tooltip">
<i class="fa fa-cog"></i>
</button>
</div>
</template>
@@ -1,14 +1,15 @@
import { OHIF } from 'meteor/ohif:core';
Template.matchedProtocols.onRendered(function() {
$('#matchedProtocols button').tooltip(OHIF.viewer.tooltipConfig);
Template.matchedProtocols.onRendered(() => {
const instance = Template.instance();
instance.$('#matchedProtocols button').tooltip(OHIF.viewer.tooltipConfig);
});
Template.matchedProtocols.helpers({
/**
* Reactively re-render the MatchedProtocols Collection contents
*/
matchedProtocols: function() {
matchedProtocols() {
return MatchedProtocols.find();
}
});
@@ -20,33 +21,5 @@ Template.matchedProtocols.events({
'click .matchedProtocol': function() {
var protocol = this;
ProtocolEngine.setHangingProtocol(protocol);
},
/**
* Show/hide the Protocol Editor sidebar
*/
'click #toggleProtocolEditor': function() {
// Select the Protocol Editor DOM element
var editor = $('#protocolEditor');
// Modulate the main viewer width in response to the sidebar being open
// This code is commented out so that the protocol editor is an overlay, rather than a sidebar
// This is something that is debatable at the moment, so I am not removing the code just yet
//
/* if (editor.hasClass('cbp-spmenu-open')) {
// Set the Viewer widths to reflect a hidden Protocol Editor
$('.viewerMain').width('calc(100% - 120px)');
$('.navbar').width('100%');
} else {
// Set the Viewer widths to reflect an open Protocol Editor
$('.viewerMain').width('calc(100% - 120px - 450px)');
$('.navbar').width('calc(100% - 450px)');
}*/
// Toggle a class reflect whether or not the Protocol Editor is displayed
editor.toggleClass('cbp-spmenu-open');
// Fire the resize handler after a short delay so that the animation can complete
setTimeout(handleResize, 150);
}
});
@@ -2,7 +2,7 @@
{{ >ruleEntryDialog }}
{{ >settingEntryDialog }}
{{ >textEntryDialog }}
<div id='protocolEditor' class="cbp-spmenu cbp-spmenu-right">
<div id='protocolEditor'>
<div class="row">
<div class="navigationButtons col-xs-12">
<ul class="nav nav-pills">
@@ -1,10 +1,14 @@
@import "{design}/app.styl"
$height = 20px
#protocolEditor
height: 100%
width: 450px
padding: 10px
position: absolute
top: 0
background: #212121
background: $primaryBackgroundCOlor
.navigationButtons
ul
@@ -31,29 +35,27 @@
cursor: pointer
text-decoration: none
outline: none
background: #3e3e3e
color: #ffffff
background-color: $uiGrayDark
border: 1px $uiBorderColorDark solid
color: $textSecondaryColor
transition: transition($sidebarTransition)
border-radius: $height
-webkit-transition: all 0.3s ease
-moz-transition: all 0.3s ease
-o-transition: all 0.3s ease
-ms-transition: all 0.3s ease
transition: all 0.3s ease
&.active
a
background: #ffffff
color: #3e3e3e
&.active a
background-color: $activeColor
border-color: $uiBorderColorActive
color: $textColorActive
transition: transition($sidebarTransition)
p
h2
h3
h4
color: #f5f5f5
color: $defaultColor
label
ul
color: #f5f5f5
color: $defaultColor
font-weight: 400
label
@@ -66,7 +68,7 @@
width: 40%
border: none
background: #212121
color: #ffffff
color: $defaultColor
text-align: center
button.btn
@@ -85,7 +87,7 @@
p
font-size: 8pt
color: #B3B3B3
color: $defaultColor
margin: 0 10px
display: inline-block
@@ -137,18 +139,4 @@
padding: 40px
h3
color: #f5f5f5
.cbp-spmenu-right
right: -450px
.cbp-spmenu-right.cbp-spmenu-open
right: 0
/* Transitions */
.cbp-spmenu
-webkit-transition: all 0.3s ease
-moz-transition: all 0.3s ease
transition: all 0.3s ease
color: $defaultColor
@@ -1,8 +1,10 @@
@import "{design}/app.styl"
table.ruleTable
thead
tr
th
color: whitesmoke
color: $defaultColor
text-align: center
th:first-child
@@ -11,7 +13,7 @@ table.ruleTable
tbody
tr
td
color: #ffffff
color: $defaultColor
text-align: center
.failWarning
@@ -21,12 +23,13 @@ table.ruleTable
.deleteRule
&:hover, &:active
cursor: pointer
color: #48d3ff
-webkit-transition: all 0.1s ease
-moz-transition: all 0.1s ease
transition: all 0.1s ease
transition(all 0.1s ease)
&:hover
color: $hoverColor
&:active
color: $activeColor
td:first-child
text-align: left
@@ -34,13 +37,14 @@ table.ruleTable
.addRuleContainer
margin: 10px 0
text-align: center
color: #ffffff
color: $defaultColor
.addRule
&:hover, &:active
cursor: pointer
color: #48d3ff
-webkit-transition: all 0.1s ease
-moz-transition: all 0.1s ease
transition: all 0.1s ease
cursor: pointer
transition(all 0.1s ease)
&:hover
color: $hoverColor
&:active
color: $activeColor
@@ -1,8 +1,10 @@
@import "{design}/app.styl"
table.settingsTable
thead
tr
th
color: whitesmoke
color: $defaultColor
text-align: center
th:first-child
@@ -13,32 +15,34 @@ table.settingsTable
tr
td
color: #ffffff
color: $defaultColor
text-align: center
.editSetting
.deleteSetting
&:hover, &:active
cursor:pointer
color: #48d3ff
-webkit-transition: all 0.1s ease
-moz-transition: all 0.1s ease
transition: all 0.1s ease
cursor: pointer
transition(all 0.1s ease)
&:hover
color: $hoverColor
&:active
color: $activeColor
td:first-child
text-align: left
.addSettingContainer
margin: 10px 0
text-align: center
color: #ffffff
color: $defaultColor
.addSetting
&:hover, &:active
cursor: pointer
color: #48d3ff
-webkit-transition: all 0.1s ease
-moz-transition: all 0.1s ease
transition: all 0.1s ease
cursor: pointer
transition(all 0.1s ease)
&:hover
color: $hoverColor
&:active
color: $activeColor
@@ -1,3 +1,5 @@
@import "{design}/app.styl"
#stageDetails
overflow-y: auto
overflow-x: hidden
@@ -6,12 +8,13 @@
margin-right: -16px
width: 100%
height: 100%
&::-webkit-scrollbar
display: none
h3
label
color: #f5f5f5
color: $defaultColor
label
margin-right: 10px
@@ -21,8 +24,8 @@
min-width: 50px
width: 40%
border: none
background: #3e3e3e
color: #ffffff
background: $boxBackgroundColorDark
color: $defaultColor
text-align: center
.stageEditorSection
@@ -1,14 +1,19 @@
@import "{design}/app.styl"
#stageSortingContainer
#stageSortable
.sortable-item
padding: 3px
span
color: #ffffff
color: $defaultColor
cursor: pointer
&:hover
color: $hoverColor
&.active
color: #46e7ff
color: $activeColor
.sortable-handle
cursor: move
@@ -29,42 +34,43 @@
.deleteStage
cursor: pointer
color: white
-webkit-transition: all 0.1s ease
-moz-transition: all 0.1s ease
transition: all 0.1s ease
&:active, &:hover
color: #48d3ff
color: $defaultColor
transition(all 0.1s ease)
&:hover
color: $hoverColor
&:active
color: $activeColor
.addStage
margin: 10px 0
text-align: center
#addStage
cursor: pointer
color: #ffffff
-webkit-transition: all 0.1s ease
-moz-transition: all 0.1s ease
transition: all 0.1s ease
&:active, &:hover
color: #48d3ff
transition(all 0.1s ease)
&:hover
color: $hoverColor
&:active
color: $activeColor
.moveStageButtons
margin: 10px 0
text-align: center
a
color: $defaultColor
cursor: pointer
color: #ffffff
text-decoration: none
-webkit-transition: all 0.1s ease
-moz-transition: all 0.1s ease
transition: all 0.1s ease
&:active, &:hover
color: #48d3ff
transition(all 0.1s ease)
&:hover
color: $hoverColor
&:active
color: $activeColor
&[disabled="true"]
opacity: 0.7
+2 -2
View File
@@ -5,10 +5,10 @@ Package.describe({
});
Package.onUse(function(api) {
api.versionsFrom('1.3.4.1');
api.versionsFrom('1.3.5.1');
api.use('standard-app-packages');
api.use('ecmascript');
api.use('standard-app-packages');
api.use('jquery');
api.use('stylus');
api.use('rwatts:uuid');
@@ -1,102 +0,0 @@
@import "{design}/app"
$viewportTagPadding = 20px
$imageSliderBorderRadius = 57px
$imageSliderColor = $boxBackgroundColorDark
$imageSliderTrackColor = rgba(0,0,0,0)
$imageSliderBorder = none
// Note that these are backwards due to the magic needed to make a cross-browser vertical slider
$imageSliderWidth = 12px
$imageSliderHeight = 39px
$imageSliderCursor = grab
.imageViewerViewportOverlay
color: $textSecondaryColor
.dicomTag
font-weight: 200
.topleft
top: $viewportTagPadding
left: $viewportTagPadding
.topright
top: $viewportTagPadding
right: $viewportTagPadding
text-align: right
.bottomleft
bottom: $viewportTagPadding
left: $viewportTagPadding
.bottomright
bottom: $viewportTagPadding
right: $viewportTagPadding
text-align: right
.imageControls
#scrollbar
#imageSlider
-webkit-appearance: none
background-color: $imageSliderTrackColor
// --- Style the range track --- //
&::-webkit-slider-runnable-track
height: 5px
border: none
cursor: pointer
background-color: $imageSliderTrackColor
z-index: 6
&::-moz-range-track
height: 2px
border: none
cursor: pointer
background-color: $imageSliderTrackColor
z-index: 6
&::-ms-track
width: 100%
height: 2px
border: none
cursor: pointer
animate: 0.2s
background: transparent
border-width: 15px 0
color: $imageSliderTrackColor
// Hide any fill IE tries to add
&::-ms-fill-lower
background: $imageSliderTrackColor
&::-ms-fill-upper
background: $imageSliderTrackColor
// --- Style the range thumb --- //
&::-webkit-slider-thumb
-webkit-appearance: none !important
background-color: $imageSliderColor
border-radius: $imageSliderBorderRadius
border: $imageSliderBorder
height: $imageSliderWidth
width: $imageSliderHeight
cursor: $imageSliderCursor
margin-top: -7px
&::-moz-range-thumb
background-color: $imageSliderColor
border-radius: $imageSliderBorderRadius
border: $imageSliderBorder
height: $imageSliderWidth
width: $imageSliderHeight
cursor: $imageSliderCursor
z-index: 7
&::-ms-thumb
background-color: $imageSliderColor
border-radius: $imageSliderBorderRadius
border: $imageSliderBorder
height: $imageSliderWidth
width: $imageSliderHeight
cursor: $imageSliderCursor
@@ -8,30 +8,4 @@
height: 100%
margin: 0
padding: 0
width: 100%
//font awesome icons
.fa-cr:before
content: 'CR'
font-weight: bold
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
.fa-un:before
content: 'UN'
font-weight: bold
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
.fa-ex:before
content: 'EX'
font-weight: bold
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
#btnCollapse
background-color: #333
border-color: black
&.active
border-color: #333
.btnCollapseIcon
color: white
width: 100%
+1 -6
View File
@@ -5,7 +5,7 @@ Package.describe({
});
Package.onUse(function(api) {
api.versionsFrom('1.3.4.1');
api.versionsFrom('1.3.5.1');
api.use('ecmascript');
api.use('standard-app-packages');
@@ -83,10 +83,6 @@ Package.onUse(function(api) {
api.addFiles('client/components/caseProgress/caseProgress.styl', 'client');
api.addFiles('client/components/caseProgress/caseProgress.js', 'client');
api.addFiles('client/components/viewerMain/viewerMain.html', 'client');
api.addFiles('client/components/viewerMain/viewerMain.styl', 'client');
api.addFiles('client/components/viewerMain/viewerMain.js', 'client');
api.addFiles('client/components/lesionTracker/lesionTracker.html', 'client');
api.addFiles('client/components/lesionTracker/lesionTracker.styl', 'client');
api.addFiles('client/components/lesionTracker/lesionTracker.js', 'client');
@@ -190,7 +186,6 @@ Package.onUse(function(api) {
api.addFiles('client/components/lesionTrackerWorklistContextMenu/lesionTrackerWorklistContextMenu.js', 'client');
api.addFiles('client/components/lesionTrackerViewportOverlay/lesionTrackerViewportOverlay.html', 'client');
api.addFiles('client/components/lesionTrackerViewportOverlay/lesionTrackerViewportOverlay.styl', 'client');
api.addFiles('client/components/lesionTrackerViewportOverlay/lesionTrackerViewportOverlay.js', 'client');
api.addFiles('client/components/serverInformationModal/serverInformationModal.html', 'client');
@@ -1,3 +1,5 @@
import { Meteor } from 'meteor/meteor';
Meteor.publish('timepoints', function() {
return Timepoints.find();
});
+1 -1
View File
@@ -5,7 +5,7 @@ Package.describe({
});
Package.onUse(function(api) {
api.versionsFrom('1.3.4.1');
api.versionsFrom('1.3.5.1');
api.use('ecmascript');
api.use('standard-app-packages');
+1 -1
View File
@@ -5,7 +5,7 @@ Package.describe({
});
Package.onUse(function(api) {
api.versionsFrom('1.3.4.1');
api.versionsFrom('1.3.5.1');
api.use('ecmascript');
@@ -1,16 +1,18 @@
@import "{design}/app.styl"
#imageViewerViewports
height: 100%
width: 100%
.viewportContainer
float: left
border: 2px solid #777
border: $viewportBorderThickness solid $viewportBorderColor
&.active, &:hover.active
border: 2px solid #9A6617
border: $viewportBorderThickness solid $viewportBorderColorActive
&:hover
border: 2px solid white
border: $viewportBorderThickness solid $viewportBorderColorHover
.removable
width: 100%
@@ -1,10 +1,12 @@
@import "{design}/app.styl"
.imageViewerViewport
width: 100%
height: 100%
background-color: black
// Prevent the blue outline in Chrome when a viewport is selected
outline: 0 !important;
outline: 0 !important
// Prevents the entire page from getting larger
// when the magnify tool is near the sides/corners of the page
@@ -13,7 +15,7 @@
.viewportInstructions
display: none
font-size: 13px
color: #e4ad00
color: $textSecondaryColor
line-height: 18px
pointer-events: none // Necessary for drag/drop through to cornerstone element below
text-align: center
@@ -27,18 +29,9 @@
/* These are some good CSS settings for a circular magnifying glass
Try removing the border-radius to make a square magnifying glass */
.magnifyTool{
border: 4px white solid;
box-shadow: 2px 2px 10px #1e1e1e;
border-radius: 50%;
display: none;
cursor: none;
}
/* prevents selection when left click dragging */
.disable-selection {
-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;
}
/* prevents cursor from changing to the i bar on the overlays*/
.noIbar {
cursor:default;
}
.magnifyTool
border: 4px white solid
box-shadow: 2px 2px 10px #1e1e1e
border-radius: 50%
display: none
cursor: none
@@ -1,18 +1,22 @@
@import "{design}/app.styl"
.layoutChooser
width: 92px
height: 92px
min-width: 92px // to override bootstrap's dropdown-menu class
min-height: 92px
background-color: $primaryBackgroundColor
border: 2px solid $uiBorderColorDark
table
margin: 0 auto
td
cursor: pointer
border: 2px solid black
border: 2px solid $uiBorderColorDark
width: 20px
height: 20px
transition: background-color 0.1s ease
transition(background-color 0.1s ease)
&:hover, &.hover // Add the hover class here to be triggered by mouseenter/mouseleave
background-color: gray
background-color: $activeColor
@@ -1,6 +1,8 @@
@import "{design}/app.styl"
.imageViewerLoadingIndicator
display: none
color: #ffa500
color: $textPrimaryColor
.faded
opacity: 0.5
@@ -11,7 +13,7 @@
p, h4
text-align: center
color: #ffa500
color: $textColorActive
padding: 4px 0px
p
@@ -1,14 +1,24 @@
<template name="playClipButton">
<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">
<button id="playClip"
type="button"
class="imageViewerCommand btn btn-sm {{ #if isPlaying }}active{{/if}}"
data-container="body"
data-toggle="tooltip"
data-placement="bottom"
title="Play/Stop Clip">
{{ #if isPlaying }}
<span class="fa fa-stop"></span>
{{ else }}
<span class="fa fa-play"></span>
{{ /if }}
</button>
<button id="toggleCineDialog" type="button" class="imageViewerCommand btn btn-sm btn-default"
data-container="body" data-toggle="tooltip" data-placement="bottom" title="Toggle CINE Dialog">
<button id="toggleCineDialog"
type="button"
class="imageViewerCommand btn btn-sm"
data-container="body"
data-toggle="tooltip"
data-placement="bottom"
title="Toggle CINE Dialog">
<span class="fa fa-youtube-play"></span>
</button>
</template>
@@ -1,5 +1,11 @@
<template name="simpleToolbarButton">
<button id="{{id}}" type="button" class="{{classes}} btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="{{title}}">
<button id="{{id}}"
type="button"
class="{{classes}} btn btn-sm {{activeClass}}"
data-container="body"
data-toggle="tooltip"
data-placement="bottom"
title="{{title}}">
<span class="{{iconClasses}}"></span>
</button>
</template>
@@ -0,0 +1,13 @@
Template.simpleToolbarButton.helpers({
activeClass() {
const instance = Template.instance();
// Check if the current tool is the active one
if (instance.data.id === Session.get('ToolManagerActiveTool')) {
// Return the active class
return 'active';
}
return;
}
});
@@ -1,31 +1,37 @@
<template name="toolbar">
<div id='toolbar'>
<div class="btn-group">
{{ #each button }}
{{ >simpleToolbarButton}}
{{ /each }}
{{ #if includePlayClipButton }}
{{ >playClipButton }}
{{ /if }}
{{ #if includeLayoutButton }}
<div class="btn-group">
{{ #each button }}
{{ >simpleToolbarButton}}
{{ /each }}
{{ #if includePlayClipButton }}
{{ >playClipButton }}
{{ /if }}
{{ #if includeLayoutButton }}
<div class="btn-group">
<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 }}
</div>
{{ /if }}
{{ #if includeHangingProtocolButtons }}
{{ >hangingProtocolButtons }}
{{ >matchedProtocols }}
{{ /if }}
{{ #each btnGroup }}
{{ >toolbarGroupButton}}
{{ /each }}
<button id="layout"
type="button"
class="btn btn-sm 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 }}
</div>
{{ /if }}
{{ #if includeHangingProtocolButtons }}
{{ >hangingProtocolButtons }}
{{ >matchedProtocols }}
{{ /if }}
{{ #each btnGroup }}
{{ >toolbarGroupButton}}
{{ /each }}
</div>
</template>
@@ -1,16 +1,21 @@
#toolbar
background-color: black
text-align: center
@import "{design}/app.styl"
.btn-group
background-color: $primaryBackgroundColor
display: inline-block
.btn-group
display: inline-block
button
text-align: center
color: $defaultColor
background-color: $primaryBackgroundColor
border-color: $uiBorderColor
transition(all 0.1s ease)
button
text-align: center
color: #ffffff
background-color: #424242
border-color: #424242
outline: none
&.active, &:active
background-color: #3B678E
// Prevent the blue outline in Chrome when a viewport is selected
outline: 0 !important
&:hover
color: $hoverColor
&.active, &:active
color: $activeColor
@@ -1,12 +0,0 @@
<template name="toolbarGroupButton">
<div id="toolbarGroupButton" class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="{{id}}" title="{{title}}">
<i class="{{groupIcon}}"></i>
</button>
<div class="dropdown-menu">
{{#each tools}}
<div><a class="dropdown-item" href="#">{{> simpleToolbarButton}}</a></div>
{{/each}}
</div>
</div>
</template>
@@ -1,14 +0,0 @@
#toolbarGroupButton
button
&.active, &:active
background-color: #3B678E
.dropdown-menu
background-color: black
border: solid 1px #333
padding: 5px
margin-top: 0
div
padding: 5px
float: left
@@ -1,31 +1,107 @@
@import "{design}/app"
$viewportTagPadding = 20px
$imageSliderBorderRadius = 57px
$imageSliderColor = $boxBackgroundColorDark
$imageSliderTrackColor = rgba(0,0,0,0)
$imageSliderBorder = none
// Note that these are backwards due to the magic needed to make a cross-browser vertical slider
$imageSliderWidth = 12px
$imageSliderHeight = 39px
$imageSliderCursor = grab
.imageViewerViewportOverlay
font-size: 18px
color: #979797
line-height: 1.4
display: none // Shown when an image is loaded
color: $textSecondaryColor
.dicomTag
pointer-events: none // Necessary for drag/drop through to cornerstone element below
position: absolute
font-weight: 200
.topleft
top: 3px
left: 3px
top: $viewportTagPadding
left: $viewportTagPadding
.topright
top: 3px
right: 3px
text-align: right
.bottomleft
bottom: 3px
left: 3px
.bottomright
bottom: 3px
right: 3px
top: $viewportTagPadding
right: $viewportTagPadding
text-align: right
.bottomleft
bottom: $viewportTagPadding
left: $viewportTagPadding
.bottomright
bottom: $viewportTagPadding
right: $viewportTagPadding
text-align: right
.priorIndicator
font-weight: bold
color: yellow
color: yellow
.imageControls
#scrollbar
#imageSlider
-webkit-appearance: none
background-color: $imageSliderTrackColor
// --- Style the range track --- //
&::-webkit-slider-runnable-track
height: 5px
border: none
cursor: pointer
background-color: $imageSliderTrackColor
z-index: 6
&::-moz-range-track
height: 2px
border: none
cursor: pointer
background-color: $imageSliderTrackColor
z-index: 6
&::-ms-track
width: 100%
height: 2px
border: none
cursor: pointer
animate: 0.2s
background: transparent
border-width: 15px 0
color: $imageSliderTrackColor
// Hide any fill IE tries to add
&::-ms-fill-lower
background: $imageSliderTrackColor
&::-ms-fill-upper
background: $imageSliderTrackColor
// --- Style the range thumb --- //
&::-webkit-slider-thumb
-webkit-appearance: none !important
background-color: $imageSliderColor
border-radius: $imageSliderBorderRadius
border: $imageSliderBorder
height: $imageSliderWidth
width: $imageSliderHeight
cursor: $imageSliderCursor
margin-top: -7px
&::-moz-range-thumb
background-color: $imageSliderColor
border-radius: $imageSliderBorderRadius
border: $imageSliderBorder
height: $imageSliderWidth
width: $imageSliderHeight
cursor: $imageSliderCursor
z-index: 7
&::-ms-thumb
background-color: $imageSliderColor
border-radius: $imageSliderBorderRadius
border: $imageSliderBorder
height: $imageSliderWidth
width: $imageSliderHeight
cursor: $imageSliderCursor
+59
View File
@@ -0,0 +1,59 @@
/**
* Checks whether dicom files with specified SOP Class UID have image data
* @param {string} sopClassUid - SOP Class UID to be checked
* @returns {boolean} - true if it has image data
*/
isImage = function(sopClassUid) {
if (sopClassUid == sopClassDictionary.ComputedRadiographyImageStorage
|| sopClassUid == sopClassDictionary.DigitalXRayImageStorageForPresentation
|| sopClassUid == sopClassDictionary.DigitalXRayImageStorageForProcessing
|| sopClassUid == sopClassDictionary.DigitalMammographyXRayImageStorageForPresentation
|| sopClassUid == sopClassDictionary.DigitalMammographyXRayImageStorageForProcessing
|| sopClassUid == sopClassDictionary.DigitalIntraOralXRayImageStorageForPresentation
|| sopClassUid == sopClassDictionary.DigitalIntraOralXRayImageStorageForProcessing
|| sopClassUid == sopClassDictionary.CTImageStorage
|| sopClassUid == sopClassDictionary.EnhancedCTImageStorage
|| sopClassUid == sopClassDictionary.LegacyConvertedEnhancedCTImageStorage
|| sopClassUid == sopClassDictionary.UltrasoundMultiframeImageStorage
|| sopClassUid == sopClassDictionary.MRImageStorage
|| sopClassUid == sopClassDictionary.EnhancedMRImageStorage
|| sopClassUid == sopClassDictionary.EnhancedMRColorImageStorage
|| sopClassUid == sopClassDictionary.LegacyConvertedEnhancedMRImageStorage
|| sopClassUid == sopClassDictionary.UltrasoundImageStorage
|| sopClassUid == sopClassDictionary.SecondaryCaptureImageStorage
|| sopClassUid == sopClassDictionary.MultiframeSingleBitSecondaryCaptureImageStorage
|| sopClassUid == sopClassDictionary.MultiframeGrayscaleByteSecondaryCaptureImageStorage
|| sopClassUid == sopClassDictionary.MultiframeGrayscaleWordSecondaryCaptureImageStorage
|| sopClassUid == sopClassDictionary.MultiframeTrueColorSecondaryCaptureImageStorage
|| sopClassUid == sopClassDictionary.XRayAngiographicImageStorage
|| sopClassUid == sopClassDictionary.EnhancedXAImageStorage
|| sopClassUid == sopClassDictionary.XRayRadiofluoroscopicImageStorage
|| sopClassUid == sopClassDictionary.EnhancedXRFImageStorage
|| sopClassUid == sopClassDictionary.XRay3DAngiographicImageStorage
|| sopClassUid == sopClassDictionary.XRay3DCraniofacialImageStorage
|| sopClassUid == sopClassDictionary.BreastTomosynthesisImageStorage
|| sopClassUid == sopClassDictionary.BreastProjectionXRayImageStorageForPresentation
|| sopClassUid == sopClassDictionary.BreastProjectionXRayImageStorageForProcessing
|| sopClassUid == sopClassDictionary.IntravascularOpticalCoherenceTomographyImageStorageForPresentation
|| sopClassUid == sopClassDictionary.IntravascularOpticalCoherenceTomographyImageStorageForProcessing
|| sopClassUid == sopClassDictionary.NuclearMedicineImageStorage
|| sopClassUid == sopClassDictionary.VLEndoscopicImageStorage
|| sopClassUid == sopClassDictionary.VideoEndoscopicImageStorage
|| sopClassUid == sopClassDictionary.VLMicroscopicImageStorage
|| sopClassUid == sopClassDictionary.VideoMicroscopicImageStorage
|| sopClassUid == sopClassDictionary.VLSlideCoordinatesMicroscopicImageStorage
|| sopClassUid == sopClassDictionary.VLPhotographicImageStorage
|| sopClassUid == sopClassDictionary.VideoPhotographicImageStorage
|| sopClassUid == sopClassDictionary.OphthalmicPhotography8BitImageStorage
|| sopClassUid == sopClassDictionary.OphthalmicPhotography16BitImageStorage
|| sopClassUid == sopClassDictionary.OphthalmicTomographyImageStorage
|| sopClassUid == sopClassDictionary.VLWholeSlideMicroscopyImageStorage
|| sopClassUid == sopClassDictionary.PositronEmissionTomographyImageStorage
|| sopClassUid == sopClassDictionary.EnhancedPETImageStorage
|| sopClassUid == sopClassDictionary.LegacyConvertedEnhancedPETImageStorage
|| sopClassUid == sopClassDictionary.RTImageStorage) {
return true;
}
return false;
};
@@ -0,0 +1,115 @@
sopClassDictionary = {
ComputedRadiographyImageStorage: "1.2.840.10008.5.1.4.1.1.1",
DigitalXRayImageStorageForPresentation: "1.2.840.10008.5.1.4.1.1.1.1",
DigitalXRayImageStorageForProcessing: "1.2.840.10008.5.1.4.1.1.1.1.1",
DigitalMammographyXRayImageStorageForPresentation: "1.2.840.10008.5.1.4.1.1.1.2",
DigitalMammographyXRayImageStorageForProcessing: "1.2.840.10008.5.1.4.1.1.1.2.1",
DigitalIntraOralXRayImageStorageForPresentation: "1.2.840.10008.5.1.4.1.1.1.3",
DigitalIntraOralXRayImageStorageForProcessing: "1.2.840.10008.5.1.4.1.1.1.3.1",
CTImageStorage: "1.2.840.10008.5.1.4.1.1.2",
EnhancedCTImageStorage: "1.2.840.10008.5.1.4.1.1.2.1",
LegacyConvertedEnhancedCTImageStorage: "1.2.840.10008.5.1.4.1.1.2.2",
UltrasoundMultiframeImageStorage: "1.2.840.10008.5.1.4.1.1.3.1",
MRImageStorage: "1.2.840.10008.5.1.4.1.1.4",
EnhancedMRImageStorage: "1.2.840.10008.5.1.4.1.1.4.1",
MRSpectroscopyStorage: "1.2.840.10008.5.1.4.1.1.4.2",
EnhancedMRColorImageStorage: "1.2.840.10008.5.1.4.1.1.4.3",
LegacyConvertedEnhancedMRImageStorage: "1.2.840.10008.5.1.4.1.1.4.4",
UltrasoundImageStorage: "1.2.840.10008.5.1.4.1.1.6.1",
EnhancedUSVolumeStorage: "1.2.840.10008.5.1.4.1.1.6.2",
SecondaryCaptureImageStorage: "1.2.840.10008.5.1.4.1.1.7",
MultiframeSingleBitSecondaryCaptureImageStorage: "1.2.840.10008.5.1.4.1.1.7.1",
MultiframeGrayscaleByteSecondaryCaptureImageStorage: "1.2.840.10008.5.1.4.1.1.7.2",
MultiframeGrayscaleWordSecondaryCaptureImageStorage: "1.2.840.10008.5.1.4.1.1.7.3",
MultiframeTrueColorSecondaryCaptureImageStorage: "1.2.840.10008.5.1.4.1.1.7.4",
Sop12LeadECGWaveformStorage: "1.2.840.10008.5.1.4.1.1.9.1.1",
GeneralECGWaveformStorage: "1.2.840.10008.5.1.4.1.1.9.1.2",
AmbulatoryECGWaveformStorage: "1.2.840.10008.5.1.4.1.1.9.1.3",
HemodynamicWaveformStorage: "1.2.840.10008.5.1.4.1.1.9.2.1",
CardiacElectrophysiologyWaveformStorage: "1.2.840.10008.5.1.4.1.1.9.3.1",
BasicVoiceAudioWaveformStorage: "1.2.840.10008.5.1.4.1.1.9.4.1",
GeneralAudioWaveformStorage: "1.2.840.10008.5.1.4.1.1.9.4.2",
ArterialPulseWaveformStorage: "1.2.840.10008.5.1.4.1.1.9.5.1",
RespiratoryWaveformStorage: "1.2.840.10008.5.1.4.1.1.9.6.1",
GrayscaleSoftcopyPresentationStateStorage: "1.2.840.10008.5.1.4.1.1.11.1",
ColorSoftcopyPresentationStateStorage: "1.2.840.10008.5.1.4.1.1.11.2",
PseudoColorSoftcopyPresentationStateStorage: "1.2.840.10008.5.1.4.1.1.11.3",
BlendingSoftcopyPresentationStateStorage: "1.2.840.10008.5.1.4.1.1.11.4",
XAXRFGrayscaleSoftcopyPresentationStateStorage: "1.2.840.10008.5.1.4.1.1.11.5",
XRayAngiographicImageStorage: "1.2.840.10008.5.1.4.1.1.12.1",
EnhancedXAImageStorage: "1.2.840.10008.5.1.4.1.1.12.1.1",
XRayRadiofluoroscopicImageStorage: "1.2.840.10008.5.1.4.1.1.12.2",
EnhancedXRFImageStorage: "1.2.840.10008.5.1.4.1.1.12.2.1",
XRay3DAngiographicImageStorage: "1.2.840.10008.5.1.4.1.1.13.1.1",
XRay3DCraniofacialImageStorage: "1.2.840.10008.5.1.4.1.1.13.1.2",
BreastTomosynthesisImageStorage: "1.2.840.10008.5.1.4.1.1.13.1.3",
BreastProjectionXRayImageStorageForPresentation: "1.2.840.10008.5.1.4.1.1.13.1.4",
BreastProjectionXRayImageStorageForProcessing: "1.2.840.10008.5.1.4.1.1.13.1.5",
IntravascularOpticalCoherenceTomographyImageStorageForPresentation: "1.2.840.10008.5.1.4.1.1.14.1",
IntravascularOpticalCoherenceTomographyImageStorageForProcessing: "1.2.840.10008.5.1.4.1.1.14.2",
NuclearMedicineImageStorage: "1.2.840.10008.5.1.4.1.1.20",
RawDataStorage: "1.2.840.10008.5.1.4.1.1.66",
SpatialRegistrationStorage: "1.2.840.10008.5.1.4.1.1.66.1",
SpatialFiducialsStorage: "1.2.840.10008.5.1.4.1.1.66.2",
DeformableSpatialRegistrationStorage: "1.2.840.10008.5.1.4.1.1.66.3",
SegmentationStorage: "1.2.840.10008.5.1.4.1.1.66.4",
SurfaceSegmentationStorage: "1.2.840.10008.5.1.4.1.1.66.5",
RealWorldValueMappingStorage: "1.2.840.10008.5.1.4.1.1.67",
SurfaceScanMeshStorage: "1.2.840.10008.5.1.4.1.1.68.1",
SurfaceScanPointCloudStorage: "1.2.840.10008.5.1.4.1.1.68.2",
VLEndoscopicImageStorage: "1.2.840.10008.5.1.4.1.1.77.1.1",
VideoEndoscopicImageStorage: "1.2.840.10008.5.1.4.1.1.77.1.1.1",
VLMicroscopicImageStorage: "1.2.840.10008.5.1.4.1.1.77.1.2",
VideoMicroscopicImageStorage: "1.2.840.10008.5.1.4.1.1.77.1.2.1",
VLSlideCoordinatesMicroscopicImageStorage: "1.2.840.10008.5.1.4.1.1.77.1.3",
VLPhotographicImageStorage: "1.2.840.10008.5.1.4.1.1.77.1.4",
VideoPhotographicImageStorage: "1.2.840.10008.5.1.4.1.1.77.1.4.1",
OphthalmicPhotography8BitImageStorage: "1.2.840.10008.5.1.4.1.1.77.1.5.1",
OphthalmicPhotography16BitImageStorage: "1.2.840.10008.5.1.4.1.1.77.1.5.2",
StereometricRelationshipStorage: "1.2.840.10008.5.1.4.1.1.77.1.5.3",
OphthalmicTomographyImageStorage: "1.2.840.10008.5.1.4.1.1.77.1.5.4",
VLWholeSlideMicroscopyImageStorage: "1.2.840.10008.5.1.4.1.1.77.1.6",
LensometryMeasurementsStorage: "1.2.840.10008.5.1.4.1.1.78.1",
AutorefractionMeasurementsStorage: "1.2.840.10008.5.1.4.1.1.78.2",
KeratometryMeasurementsStorage: "1.2.840.10008.5.1.4.1.1.78.3",
SubjectiveRefractionMeasurementsStorage: "1.2.840.10008.5.1.4.1.1.78.4",
VisualAcuityMeasurementsStorage: "1.2.840.10008.5.1.4.1.1.78.5",
SpectaclePrescriptionReportStorage: "1.2.840.10008.5.1.4.1.1.78.6",
OphthalmicAxialMeasurementsStorage: "1.2.840.10008.5.1.4.1.1.78.7",
IntraocularLensCalculationsStorage: "1.2.840.10008.5.1.4.1.1.78.8",
MacularGridThicknessandVolumeReport: "1.2.840.10008.5.1.4.1.1.79.1",
OphthalmicVisualFieldStaticPerimetryMeasurementsStorage: "1.2.840.10008.5.1.4.1.1.80.1",
OphthalmicThicknessMapStorage: "1.2.840.10008.5.1.4.1.1.81.1",
CornealTopographyMapStorage: "1.2.840.10008.5.1.4.1.1.82.1",
BasicTextSR: "1.2.840.10008.5.1.4.1.1.88.11",
EnhancedSR: "1.2.840.10008.5.1.4.1.1.88.22",
ComprehensiveSR: "1.2.840.10008.5.1.4.1.1.88.33",
Comprehensive3DSR: "1.2.840.10008.5.1.4.1.1.88.34",
ProcedureLog: "1.2.840.10008.5.1.4.1.1.88.40",
MammographyCADSR: "1.2.840.10008.5.1.4.1.1.88.50",
KeyObjectSelection: "1.2.840.10008.5.1.4.1.1.88.59",
ChestCADSR: "1.2.840.10008.5.1.4.1.1.88.65",
XRayRadiationDoseSR: "1.2.840.10008.5.1.4.1.1.88.67",
RadiopharmaceuticalRadiationDoseSR: "1.2.840.10008.5.1.4.1.1.88.68",
ColonCADSR: "1.2.840.10008.5.1.4.1.1.88.69",
ImplantationPlanSRDocumentStorage: "1.2.840.10008.5.1.4.1.1.88.70",
EncapsulatedPDFStorage: "1.2.840.10008.5.1.4.1.1.104.1",
EncapsulatedCDAStorage: "1.2.840.10008.5.1.4.1.1.104.2",
PositronEmissionTomographyImageStorage: "1.2.840.10008.5.1.4.1.1.128",
EnhancedPETImageStorage: "1.2.840.10008.5.1.4.1.1.130",
LegacyConvertedEnhancedPETImageStorage: "1.2.840.10008.5.1.4.1.1.128.1",
BasicStructuredDisplayStorage: "1.2.840.10008.5.1.4.1.1.131",
RTImageStorage: "1.2.840.10008.5.1.4.1.1.481.1",
RTDoseStorage: "1.2.840.10008.5.1.4.1.1.481.2",
RTStructureSetStorage: "1.2.840.10008.5.1.4.1.1.481.3",
RTBeamsTreatmentRecordStorage: "1.2.840.10008.5.1.4.1.1.481.4",
RTPlanStorage: "1.2.840.10008.5.1.4.1.1.481.5",
RTBrachyTreatmentRecordStorage: "1.2.840.10008.5.1.4.1.1.481.6",
RTTreatmentSummaryRecordStorage: "1.2.840.10008.5.1.4.1.1.481.7",
RTIonPlanStorage: "1.2.840.10008.5.1.4.1.1.481.8",
RTIonBeamsTreatmentRecordStorage: "1.2.840.10008.5.1.4.1.1.481.9",
RTBeamsDeliveryInstructionStorage: "1.2.840.10008.5.1.4.34.7",
GenericImplantTemplateStorage: "1.2.840.10008.5.1.4.43.1",
ImplantAssemblyTemplateStorage: "1.2.840.10008.5.1.4.44.1",
ImplantTemplateGroupStorage: "1.2.840.10008.5.1.4.45.1"
};
+14 -14
View File
@@ -5,19 +5,20 @@ Package.describe({
});
Package.onUse(function(api) {
api.versionsFrom('1.3.4.1');
api.versionsFrom('1.3.5.1');
api.use('standard-app-packages');
api.use('ecmascript');
api.use('standard-app-packages');
api.use('http');
api.use('jquery');
api.use('stylus');
api.use('practicalmeteor:loglevel');
api.use('momentjs:moment');
api.use('validatejs');
api.use('design');
// Our custom packages
api.use('design');
api.use('ohif:core');
api.use('cornerstone');
api.addFiles('log.js');
@@ -25,9 +26,6 @@ Package.onUse(function(api) {
// TODO: Use NPM depends for these
api.addFiles('client/compatibility/jquery.hotkeys.js', 'client');
// Data validation (the Meteor package is currently out-of-date)
//api.addFiles('client/compatibility/validate.js', 'client');
// ---------- Collections ----------
api.addFiles('client/collections.js', 'client');
@@ -82,6 +80,10 @@ Package.onUse(function(api) {
api.addFiles('client/components/viewer/viewportOverlay/viewportOverlay.js', 'client');
api.addFiles('client/components/viewer/viewportOverlay/viewportOverlay.styl', 'client');
api.addFiles('client/components/viewer/viewerMain/viewerMain.html', 'client');
api.addFiles('client/components/viewer/viewerMain/viewerMain.js', 'client');
api.addFiles('client/components/viewer/viewerMain/viewerMain.styl', 'client');
api.addFiles('client/components/viewer/imageControls/imageControls.html', 'client');
api.addFiles('client/components/viewer/imageControls/imageControls.js', 'client');
api.addFiles('client/components/viewer/imageControls/imageControls.styl', 'client');
@@ -95,6 +97,7 @@ Package.onUse(function(api) {
api.addFiles('client/components/viewer/cineDialog/cineDialog.styl', 'client');
api.addFiles('client/components/viewer/simpleToolbarButton/simpleToolbarButton.html', 'client');
api.addFiles('client/components/viewer/simpleToolbarButton/simpleToolbarButton.js', 'client');
api.addFiles('client/components/viewer/playClipButton/playClipButton.html', 'client');
api.addFiles('client/components/viewer/playClipButton/playClipButton.js', 'client');
@@ -103,10 +106,6 @@ Package.onUse(function(api) {
api.addFiles('client/components/viewer/toolbar/toolbar.js', 'client');
api.addFiles('client/components/viewer/toolbar/toolbar.styl', 'client');
api.addFiles('client/components/viewer/toolbarGroupButton/toolbarGroupButton.html', 'client');
api.addFiles('client/components/viewer/toolbarGroupButton/toolbarGroupButton.styl', 'client');
api.addFiles('client/components/viewer/toolbarGroupButton/toolbarGroupButton.js', 'client');
// Library functions
api.addFiles('lib/layoutManager.js', 'client');
api.addFiles('lib/createStacks.js', 'client');
@@ -132,6 +131,8 @@ Package.onUse(function(api) {
//api.addFiles('lib/validators.js', 'client');
api.addFiles('lib/instanceClassSpecificViewport.js', 'client');
api.addFiles('lib/setMammogramViewportAlignment.js', 'client');
api.addFiles('lib/isImage.js', 'client');
api.addFiles('lib/sopClassDictionary.js', 'client');
api.export('resizeViewportElements', 'client');
api.export('handleResize', 'client');
@@ -156,9 +157,8 @@ Package.onUse(function(api) {
api.export('showConfirmDialog', 'client');
api.export('applyWLPreset', 'client');
api.export('toggleDialog', 'client');
// Export the ValidateJS Library with our added validators
//api.export('validate', 'client');
api.export('isImage', 'client');
api.export('sopClassDictionary', 'client');
// Viewer management objects
api.export('toolManager', 'client');
@@ -1,14 +1,6 @@
body
background-color: black
.noselect
-webkit-touch-callout: none
-webkit-user-select: none
-khtml-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
#tblStudyList
tr
height: 20px
@@ -74,7 +66,6 @@ body
&:hover
color: red
.tab-content
width: 100%
height: calc(100% - 91px)
@@ -203,8 +203,10 @@ Template.worklistResult.onCreated(function() {
});
Template.worklistResult.onRendered(function() {
const instance = Template.instance();
// Initialize daterangepicker
$('#studyDate').daterangepicker({
instance.$('#studyDate').daterangepicker({
ranges: {
Today: [moment(), moment()],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+7 -1
View File
@@ -5,8 +5,9 @@ Package.describe({
});
Package.onUse(function (api) {
api.versionsFrom('1.2.1');
api.versionsFrom('1.3.5.1');
api.use('ecmascript');
api.use('standard-app-packages');
api.use('jquery');
api.use('stylus');
@@ -15,6 +16,11 @@ Package.onUse(function (api) {
api.use('rwatts:uuid');
api.use('silentcicero:jszip');
// Note: MomentJS appears to be required for Bootstrap3 Datepicker, but not a dependency for some reason
api.use('momentjs:moment');
api.use('gilbertwat:bootstrap3-daterangepicker');
// Our custom packages
api.use('design');
api.use('dicomweb');