Merged LesionTracker and OHIF Viewer, refactored out common components

2015-10-13 14:14:50 +02:00
1 parent 34adbe3fbc
commit b774c22593
@@ -0,0 +1,36 @@
+<template name="toolbar">
+    <div id='toolbar'>
+        <div class="btn-group">
+            <!-- WW/WL -->
+            <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-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-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-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-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 }}
+                    <span class="fa fa-stop"></span>
+                {{ else }}
+                    <span class="fa fa-play"></span>
+                {{ /if }}
+            </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}}                    
+        </div>
+    </div>
+</template>
@@ -0,0 +1,40 @@
+Template.toolbar.helpers({
+  studies : function() {
+    var studies = Session.get('studies');
+    return studies;
+  }
+});
+
+Template.toolbar.events({
+    'click .imageViewerTool': function(e) {
+        var tool = e.currentTarget.id;
+        console.log('Setting active tool to: ' + tool);
+        toolManager.setActiveTool(tool);
+    },
+    'click .imageViewerCommand': function(e) {
+        var command = e.currentTarget.id;
+        if (!OHIF.viewer.functionList.hasOwnProperty(command)) {
+            return;
+        }
+        var viewportIndex = Session.get('ActiveViewport');
+        var element = $('.imageViewerViewport').get(viewportIndex);
+        OHIF.viewer.functionList[command](element);
+    }
+});
+
+Template.toolbar.onRendered(function() {
+    var tooltipButtons = $('[data-toggle="tooltip"]');
+    tooltipButtons.tooltip(OHIF.viewer.tooltipConfig);
+
+    // Enable tooltips for the layout button
+    var extraTooltipButtons = $('[rel="tooltip"]');
+    extraTooltipButtons.tooltip(OHIF.viewer.tooltipConfig);
+});
+
+Template.toolbar.helpers({
+    'isPlaying': function() {
+        Session.get('UpdateCINE');
+        var viewportIndex = Session.get('ActiveViewport');
+        return !!OHIF.viewer.isPlaying[viewportIndex];
+    }
+});
@@ -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
@@ -0,0 +1,9 @@
+<template name="viewer">
+    <head>
+        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
+    </head>
+    <div id="viewer">
+        {{> studyBrowser}}
+        {{> viewerMain}}
+    </div>
+</template>
@@ -0,0 +1,89 @@
+OHIF = {
+    viewer: {}
+};
+
+OHIF.viewer.imageViewerLoadedSeriesDictionary = {};
+OHIF.viewer.imageViewerCurrentImageIdIndexDictionary = {};
+OHIF.viewer.loadIndicatorDelay = 3000;
+OHIF.viewer.defaultTool = 'wwwc';
+OHIF.viewer.refLinesEnabled = true;
+OHIF.viewer.isPlaying = {};
+
+Meteor.startup(function() {
+    OHIF.viewer.updateImageSynchronizer = new cornerstoneTools.Synchronizer("CornerstoneNewImage", cornerstoneTools.updateImageSynchronizer);
+    OHIF.viewer.functionList = {
+        invert: function(element) {
+            var viewport = cornerstone.getViewport(element);
+            viewport.invert = !viewport.invert;
+            cornerstone.setViewport(element, viewport);
+        },
+        playClip: function(element) {
+            var viewportIndex = $('.imageViewerViewport').index(element);
+            var isPlaying = OHIF.viewer.isPlaying[viewportIndex] || false;
+            if (isPlaying === true) {
+                cornerstoneTools.stopClip(element);
+            } else {
+                cornerstoneTools.playClip(element);
+            }
+            OHIF.viewer.isPlaying[viewportIndex] = !OHIF.viewer.isPlaying[viewportIndex];
+            Session.set('UpdateCINE', Random.id());
+        }
+    };
+
+
+    if (isTouchDevice()) {
+        OHIF.viewer.tooltipConfig = {
+            trigger: 'manual'
+        };
+    } else {
+        OHIF.viewer.tooltipConfig = {
+            trigger: 'hover'
+        };
+    }
+});
+
+function resizeViewports() {
+    // Handle resizing of image viewer viewports
+    // For some reason, this seems to need to be on
+    // another delay, or the resizing won't work properly
+    viewportResizeTimer = setTimeout(function() {
+        var elements = $('.imageViewerViewport');
+        elements.each(function(index) {
+            var element = this;
+            if (!element) {
+                return;
+            }
+            cornerstone.resize(element, true);
+        });
+    }, 1);
+}
+
+Session.setDefault('ActiveViewport', 0);
+Session.setDefault('viewportRows', 1);
+Session.setDefault('viewportColumns', 1);
+
+// Avoid doing DOM manipulation during the resize handler
+// because it is fired very often.
+// Resizing is therefore performed 100 ms after the resize event stops.
+var resizeTimer;
+$(window).on('resize', function() {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(function() {
+        resizeViewports();
+    }, 100);
+});
+
+Template.viewer.onRendered(function() {
+    var imageViewer = $("#viewer");
+    if (imageViewer) {
+        $('.navbar-default').css({
+            'background-color': '#000000',
+            'border-color': '#101010'
+        });
+        document.body.style.overflow = "hidden";
+        document.body.style.height = '100%';
+        document.body.style.width = '100%';
+        document.body.style.minWidth = 0;
+        document.body.style.position = 'fixed'; // Prevent overscroll on mobile devices
+    }
+});
@@ -0,0 +1,12 @@
+#viewer
+  width: 100%
+  height: calc(100% - 53px)
+  border-top: 1px solid #525252
+  
+.noselect
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -khtml-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
@@ -0,0 +1,6 @@
+<template name="viewerMain">
+    <div class='viewerMain'>
+        {{ > toolbar }}
+        {{ > imageViewerViewports }}
+    </div>
+</template>
@@ -0,0 +1,6 @@
+Template.viewerMain.helpers({
+  studies : function() {
+    var studies = Session.get('studies');
+    return studies;
+  }
+});
@@ -0,0 +1,5 @@
+.viewerMain
+  float: left
+  background-color: gray
+  height: 100%
+  width: calc(100% - 120px)