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

AWV-3: Adding next and previous display set buttons for CINE dialog

Browse Source
This commit is contained in:
Bruno Alves de Faria 2016-09-04 20:08:31 -03:00
parent 20b49d5036
commit e1da28ca88
13 changed files with 146 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Packages/ohif-core/client/components/base/index.js
View File

@ -21,6 +21,7 @@ import './mixins/select2.js';
import './mixins/selectTree.js';
// Templates
import './templates/button.html';
import './templates/custom.html';
import './templates/div.html';
import './templates/form.html';
@ -29,4 +30,4 @@ import './templates/select.html';
// wrappers
import './wrappers/label.html';
import './wrappers/title.html';
import './wrappers/labelContent.html';

11
Packages/ohif-core/client/components/base/templates/button.html Normal file
View File

@ -0,0 +1,11 @@
<template name="baseButton">
<button
id="{{this.id}}"
class="{{this.class}}"
disabled="{{#if this.disabled}}disabled{{/if}}"
title="{{this.title}}"
{{this.tagAttributes}}
>
{{>UI.contentBlock}}
</button>
</template>

1
Packages/ohif-core/client/components/base/templates/input.html
View File

@ -7,6 +7,7 @@
value="{{reactive this.value}}"
placeholder="{{this.placeholder}}"
checked="{{#if this.checked}}checked{{/if}}"
disabled="{{#if this.disabled}}disabled{{/if}}"
min="{{this.min}}"
max="{{this.max}}"
maxlength="{{choose this.maxlength this.max}}"

22
Packages/ohif-core/client/components/base/wrappers/label.html
View File

@ -1,11 +1,15 @@
<template name="wrapperLabel">
<label class="wrapperLabel {{this.labelClass}}">
{{#if this.labelAfter}}
{{>UI.contentBlock}}
{{/if}}
<span class="wrapperText">{{>section 'labelBeforeText'}}{{reactive this.label}}{{>section 'labelAfterText'}}</span>
{{#unless this.labelAfter}}
{{>UI.contentBlock}}
{{/unless}}
</label>
{{#unless this.labelAsDiv}}
<label class="wrapperLabel {{this.labelClass}}">
{{#wrapperLabelContent}}
{{>UI.contentBlock}}
{{/wrapperLabelContent}}
</label>
{{else}}
<div class="wrapperLabel {{this.labelClass}}">
{{#wrapperLabelContent}}
{{>UI.contentBlock}}
{{/wrapperLabelContent}}
</div>
{{/unless}}
</template>

9
Packages/ohif-core/client/components/base/wrappers/labelContent.html Normal file
View File

@ -0,0 +1,9 @@
<template name="wrapperLabelContent">
{{#if this.labelAfter}}
{{>UI.contentBlock}}
{{/if}}
<span class="wrapperText">{{>section 'labelBeforeText'}}{{reactive this.label}}{{>section 'labelAfterText'}}</span>
{{#unless this.labelAfter}}
{{>UI.contentBlock}}
{{/unless}}
</template>

11
Packages/ohif-core/client/components/base/wrappers/title.html
View File

@ -1,11 +0,0 @@
<template name="wrapperTitle">
<div class="wrapperTitle {{this.labelClass}}">
{{#if this.labelAfter}}
{{>UI.contentBlock}}
{{/if}}
<span class="wrapperText">{{>section 'labelBeforeText'}}{{reactive this.label}}{{>section 'labelAfterText'}}</span>
{{#unless this.labelAfter}}
{{>UI.contentBlock}}
{{/unless}}
</div>
</template>

9
Packages/ohif-core/client/components/bootstrap/form/button.html Normal file
View File

@ -0,0 +1,9 @@
<template name="button">
{{#baseComponent (extend this
base='baseButton'
class=(concat 'btn ' this.class)
mixins=(concat 'formItem ' this.mixins)
)}}
{{>UI.contentBlock}}
{{/baseComponent}}
</template>

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

@ -1,3 +1,4 @@
import './form/button.html';
import './form/form.html';
import './form/group.html';

3
Packages/ohif-core/client/components/bootstrap/input/groupRadio.html
View File

@ -3,9 +3,10 @@
class=(concat 'group-radio ' this.class)
mixins=(concat 'groupRadio ' this.mixins)
wrappers=(concat ''
(valueIf reactive this.label 'wrapperTitle ' '')
(valueIf reactive this.label 'wrapperLabel ' '')
this.wrappers
)
labelAsDiv=true
)}}
{{>UI.contentBlock}}
{{#each item in (reactive this.items)}}

1
Packages/ohif-core/client/components/bootstrap/input/range.html
View File

@ -2,6 +2,7 @@
{{#baseComponent (extend this
base='baseInput'
type='range'
class=(concat 'form-control ' this.class)
mixins=(concat 'input ' this.mixins)
wrappers=(concat ''
(valueIf reactive this.label 'wrapperLabel ' '')

78
Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.html
View File

@ -1,40 +1,52 @@
<template name="cineDialog">
{{#form id='cineDialog' class='noselect' schema=instance.schema}}
<h5>CINE Controls</h5>
<div class="btn-group">
<a id="cineFirstButton" title="Skip to first image" class="btn" data-toggle="tooltip">
<i class="fa fa-fast-backward"></i>
</a>
<a id="cineBackButton" title="Previous image" class="btn" data-toggle="tooltip">
<i class="fa fa-step-backward"></i>
</a>
<a id="cineSlowPlaybackButton" title="Slow playback" class="btn" data-toggle="tooltip">
<i class="fa fa-backward"></i>
</a>
<a id="cinePlayButton" title="Play / Stop" class="btn {{#if isPlaying}}active{{/if}}" data-toggle="tooltip">
{{#if isPlaying}}
<i class="fa fa-fw fa-stop"></i>
{{else}}
<i class="fa fa-fw fa-play"></i>
{{/if}}
</a>
<a id="cineFastForwardButton" title="Increase playback speed" class="btn" data-toggle="tooltip">
<i class="fa fa-forward"></i>
</a>
<a id="cineNextButton" title="Next image" class="btn" data-toggle="tooltip">
<i class="fa fa-step-forward"></i>
</a>
<a id="cineLastButton" title="Skip to last image" class="btn" data-toggle="tooltip">
<i class="fa fa-fast-forward"></i>
</a>
</div>
<div id="cineOptions">
<div id="loopSection">
{{>inputCheckbox id='cineLoopCheckbox' key='loop'}}
<div class="cine-navigation">
<div class="btn-group">
{{#button id='cineDisplaySetPrevious' title='Previous display set'}}
<i class="fa fa-toggle-up"></i>
{{/button}}
{{#button id='cineDisplaySetNext' title='Next display set'}}
<i class="fa fa-toggle-down"></i>
{{/button}}
</div>
<div id="fpsSection">
{{#inputRange id='cineSlider' key='speed' labelClass='form-group'}}
{{#section 'labelAfterText'}}: <span id="fps">{{framerate}}</span>{{/section}}
</div>
<div class="cine-controls">
<div class="btn-group">
{{#button id='cineFirstButton' title='Skip to first image'}}
<i class="fa fa-fast-backward"></i>
{{/button}}
{{#button id='cineBackButton' title='Previous image'}}
<i class="fa fa-step-backward"></i>
{{/button}}
{{#button id='cineSlowPlaybackButton' title='Slow playback'}}
<i class="fa fa-backward"></i>
{{/button}}
{{#button id='cinePlayButton' title='Play / Stop' class=(valueIf isPlaying 'active' '')}}
{{#if isPlaying}}
<i class="fa fa-fw fa-stop"></i>
{{else}}
<i class="fa fa-fw fa-play"></i>
{{/if}}
{{/button}}
{{#button id='cineFastForwardButton' title='Increase playback speed'}}
<i class="fa fa-forward"></i>
{{/button}}
{{#button id='cineNextButton' title='Next image'}}
<i class="fa fa-step-forward"></i>
{{/button}}
{{#button id='cineLastButton' title='Skip to last image'}}
<i class="fa fa-fast-forward"></i>
{{/button}}
</div>
</div>
<div class="cine-options">
<div class="fps-section">
{{#inputRange id='cineSlider' key='speed' class='p-a-0' labelClass='form-group m-a-0' labelAsDiv=true}}
{{#section 'labelAfterText'}}:
<span id="fps">{{framerate}}</span>
{{>inputCheckbox id='cineLoopCheckbox' key='loop' labelClass='pull-right m-a-0'}}
{{/section}}
{{/inputRange}}
</div>
</div>

27
Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.js
View File

@ -23,8 +23,8 @@ Template.cineDialog.onCreated(() => {
OHIF.viewer.cine.framesPerSecond = rate;
// Update playClip toolData for this imageId
var element = getActiveViewportElement();
var playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
const element = getActiveViewportElement();
const playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
playClipToolData.data[0].framesPerSecond = OHIF.viewer.cine.framesPerSecond;
// If the movie is playing, stop/start to update the framerate
@ -38,12 +38,19 @@ Template.cineDialog.onCreated(() => {
});
Template.cineDialog.onRendered(() => {
const instance = Template.instance();
const dialog = instance.$('#cineDialog');
dialog.draggable();
// Make the CINE dialog bounded and draggable
Template.instance().$('#cineDialog').bounded().draggable();
});
Template.cineDialog.events({
'click #cineDisplaySetPrevious'(event, instance) {
OHIF.viewer.moveDisplaySets(false);
},
'click #cineDisplaySetNext'(event, instance) {
OHIF.viewer.moveDisplaySets(true);
},
'click #cineFirstButton'(event, instance) {
switchToImageByIndex(0);
},
@ -79,16 +86,20 @@ Template.cineDialog.events({
},
'change #cineLoopCheckbox'(event, instance) {
var element = getActiveViewportElement();
var playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
const element = getActiveViewportElement();
const playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
playClipToolData.data[0].loop = $(event.currentTarget).is(':checked');
OHIF.viewer.cine.loop = playClipToolData.data[0].loop;
},
'input #cineSlider'(event, instance) {
// Update the FPS text onscreen
var rate = parseFloat($(event.currentTarget).val());
const rate = parseFloat($(event.currentTarget).val());
instance.updateFramerate(rate);
},
submit(event, instance) {
event.preventDefault();
}
});

46
Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl
View File

@ -4,25 +4,29 @@
theme('border', '1px solid $uiBorderColor')
theme('background', '$uiGrayDarkest')
theme('color', '$textSecondaryColor')
display: none
z-index: 1000
position: absolute
top: auto
left: auto
border-radius: 8px
bottom: 3px
right: 3px
box-sizing: border-box
display: none
height: 150px
left: auto
opacity: 0.95
overflow: hidden
padding: 10px
position: absolute
right: 3px
top: auto
width: 300px
height: 175px
opacity: 0.95
border-radius: 8px
z-index: 1000
h5
font-size: 20px
line-height: 35px
margin: 0
h5, label
font-weight: 400
box-sizing: border-box
.btn
theme('background', '$uiGrayDarkest')
theme('color', '$textSecondaryColor')
@ -33,9 +37,25 @@
&:active, &.active
theme('color', '$activeColor')
#cineOptions
.cine-navigation
position: absolute
right: 24px
top: 4px
.btn
padding: 0 4px
i
font-size: 36px
line-height: 36px
.cine-controls
display: table
margin: 0 auto
.cine-options
padding: 5px 0
overflow: auto
#loopSection
.loop-section
padding-right: 12px