Fixed OHIF Viewer layout / CINE / Hanging Protocol buttons (OHIF-49)
This commit is contained in:
Erik Ziegler committed
1 parent
59c851fa57
commit
8b364ce9d0
37 files changed
+496
-709
No files matched your search
@@ -1,41 +1,47 @@
|
||||
<template name="cineDialog">
|
||||
<div id="cineDialog">
|
||||
<h5>Cine Controls</h5>
|
||||
<div id="cineButtons">
|
||||
<a id="cineFirstButton" title="Skip to first image" class="cineButton" data-toggle="tooltip">
|
||||
<i class="fa fa-lg fa-fast-backward"></i>
|
||||
<div id="cineDialog" class="noselect">
|
||||
<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="cineButton" data-toggle="tooltip">
|
||||
<i class="fa fa-lg fa-step-backward"></i>
|
||||
<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="cineButton" data-toggle="tooltip">
|
||||
<i class="fa fa-lg fa-backward"></i>
|
||||
<a id="cineSlowPlaybackButton" title="Slow playback" class="btn" data-toggle="tooltip">
|
||||
<i class="fa fa-backward"></i>
|
||||
</a>
|
||||
<a id="cinePlayButton" title="Play / Pause" class="cineButton" data-toggle="tooltip">
|
||||
<a id="cinePlayButton" title="Play / Stop" class="btn {{#if isPlaying}}active{{/if}}" data-toggle="tooltip">
|
||||
{{#if isPlaying}}
|
||||
<i class="fa fa-lg fa-pause"></i>
|
||||
<i class="fa fa-fw fa-stop"></i>
|
||||
{{else}}
|
||||
<i class="fa fa-lg fa-play"></i>
|
||||
<i class="fa fa-fw fa-play"></i>
|
||||
{{/if}}
|
||||
</a>
|
||||
<a id="cineFastForwardButton" title="Increase playback speed" class="cineButton" data-toggle="tooltip">
|
||||
<i class="fa fa-lg fa-forward"></i>
|
||||
<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="cineButton" data-toggle="tooltip">
|
||||
<i class="fa fa-lg fa-step-forward"></i>
|
||||
<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="cineButton" data-toggle="tooltip">
|
||||
<i class="fa fa-lg fa-fast-forward"></i>
|
||||
<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">
|
||||
<label>Loop?</label>
|
||||
<label for="cineLoopCheckbox">Loop?</label>
|
||||
<input type="checkbox" checked id="cineLoopCheckbox" />
|
||||
</div>
|
||||
<div id="fpsSection">
|
||||
<label>Cine Speed: <span id="fps">{{framerate}}</span></label>
|
||||
<input type="range" id="cineSlider" min="1" max="90" value="{{framerate}}"/>
|
||||
<label for="cineSlider">
|
||||
Cine Speed: <span id="fps">{{framerate}}</span>
|
||||
</label>
|
||||
<input type="range"
|
||||
id="cineSlider"
|
||||
min="1"
|
||||
max="90"
|
||||
value="{{framerate}}"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,16 +1,5 @@
|
||||
import { OHIF } from 'meteor/ohif:core';
|
||||
|
||||
toggleCinePlay = function() {
|
||||
var element = getActiveViewportElement();
|
||||
var playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
|
||||
|
||||
if (isPlaying()) {
|
||||
cornerstoneTools.stopClip(element);
|
||||
} else {
|
||||
cornerstoneTools.playClip(element);
|
||||
}
|
||||
};
|
||||
|
||||
function updateFramerate(rate) {
|
||||
OHIF.viewer.cine.framesPerSecond = rate;
|
||||
|
||||
@@ -74,6 +63,7 @@ Template.cineDialog.events({
|
||||
});
|
||||
|
||||
Template.cineDialog.onRendered(function() {
|
||||
var dialog = $('#cineDialog');
|
||||
const instance = Template.instance();
|
||||
const dialog = instance.$('#cineDialog');
|
||||
dialog.draggable();
|
||||
});
|
||||
@@ -1,3 +1,7 @@
|
||||
@import "{design}/app.styl"
|
||||
|
||||
$borderColor = rgba(77, 99, 110, 0.81)
|
||||
|
||||
#cineDialog
|
||||
display: none
|
||||
z-index: 1000
|
||||
@@ -9,32 +13,29 @@
|
||||
|
||||
overflow: hidden
|
||||
padding: 10px
|
||||
|
||||
width: 250px
|
||||
width: 300px
|
||||
height: 175px
|
||||
|
||||
border: 1px black solid
|
||||
border-radius: 3px
|
||||
background: white
|
||||
color: black
|
||||
|
||||
opacity: 0.95
|
||||
border-radius: 8px
|
||||
border: 1px solid $borderColor;
|
||||
background: $uiGrayDarkest
|
||||
color: $textSecondaryColor
|
||||
|
||||
h5, label
|
||||
font-weight: 100
|
||||
|
||||
box-sizing: border-box
|
||||
|
||||
-webkit-user-select: none
|
||||
-moz-user-select: none
|
||||
-o-user-select: none
|
||||
-ms-user-select: none
|
||||
-khtml-user-select: none
|
||||
user-select: none
|
||||
|
||||
#cineButtons
|
||||
padding-bottom: 10px
|
||||
overflow: auto
|
||||
.btn
|
||||
background: $uiGrayDarkest
|
||||
color: $textSecondaryColor
|
||||
|
||||
.cineButton
|
||||
cursor: pointer
|
||||
margin: 0 6px
|
||||
text-decoration: none
|
||||
&:hover
|
||||
color: $hoverColor
|
||||
|
||||
&:active, &.active
|
||||
color: $activeColor
|
||||
|
||||
#cineOptions
|
||||
padding: 5px 0
|
||||
|
||||
Reference in new issue
Block a user