Merged LesionTracker and OHIF Viewer, refactored out common components

LesionTracker/client/components/hidingPanel/hidingPanel.html

@@ -0,0 +1,5 @@
+<template name="hidingPanel">
+    <div class="hidingPanel">
+        {{> studyBrowser}}
+    </div>
+</template>

LesionTracker/client/components/hidingPanel/hidingPanel.styl

@@ -0,0 +1,9 @@
+.hidingPanel
+  width: 12%
+  height: 100%
+  margin-top: 35px
+  position: relative
+  float: left
+  overflow: auto
+  background-color: blue
+  color: black

LesionTracker/client/components/toolbar/toolbar.css

@@ -0,0 +1,48 @@
+.toolbar {
+    width: 100%;
+    height: 35px;
+    text-align: center;
+}
+
+#toolbar-group button {
+    text-align: center;
+    margin-top: 2px;
+    margin-right: 3px;
+    margin-left: 3px;
+    color: #ffffff;
+    background-color: black;
+    width: 30px;
+    height: 30px;
+    border: 1px solid white;
+}
+
+#toolbar-group button > span {
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    top: 9px;
+    left: 9px;
+    right: 9px;
+    bottom: 9px;
+}
+
+
+#toolbar-group .btn:hover {
+    border-width: 3px;
+    background-color: transparent;
+    color: white;
+}
+#toolbar-group .btn:focus, .btn:active {
+    outline: 0 !important;
+    border-width: 5px;
+    background-color: transparent;
+    color:white;
+    text-align: center;
+}
+
+#toolbar-group .btn:focus > span{
+    top: 6px;
+    left: 6px;
+    right: 6px;
+    bottom: 6px;
+}

LesionTracker/client/components/toolbar/toolbar.html

@@ -0,0 +1,36 @@
+<template name="toolbar">
+    <div id="toolbar" class="toolbar">
+        <div id="toolbar-group" class="btn-group">
+            <!-- WW/WL -->
+            <button id="wwwc" type="button" class="imageViewerTool btn btn-sm btn-toolbar" 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-toolbar" 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-toolbar" 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-toolbar" 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-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Stack Scroll"><span class="fa fa-bars"></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>
+            <!-- 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-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Pixel Probe"><span class="fa fa-dot-circle-o"></span></button>
+            <!-- Length measurement -->
+            <button id="length" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Length Measurement"><span class="fa fa-arrows-v"></span></button>
+            <!-- Elliptical ROI -->
+            <button id="ellipticalRoi" type="button" class="imageViewerTool btn btn-sm btn-toolbar" 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-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Rectangle ROI"><span class="fa fa-square-o"></span></button>
+            <!-- Lesion Tool -->
+            <button id="lesion" type="button" class="imageViewerTool btn btn-sm btn-toolbar" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Lesion Tool"><span class="fa fa-arrows-v"></span></button>
+        </div>
+    </div>
+</template>

LesionTracker/client/components/toolbar/toolbar.js

@@ -0,0 +1,34 @@
+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;
+        }
+
+        // TODO = Add support for active viewports
+        //var element = getActiveViewportElement();
+        $('.imageViewer').each(function() {
+            var element = this;
+            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);
+
+    toolManager.addTool('lesion', {
+        mouse: cornerstoneTools.lesion,
+        touch: cornerstoneTools.lesionTouch
+    });
+});

LesionTracker/client/components/viewer.css

@@ -0,0 +1,7 @@
+.viewer{
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background-color: black;
+}

LesionTracker/client/components/viewer.html

@@ -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" class="viewer">
+        {{ >hidingPanel }}
+        {{ >viewerMain }}
+    </div>
+</template>

LesionTracker/client/components/viewer.js

@@ -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
+    }
+});

LesionTracker/client/components/viewerMain/viewerMain.css

@@ -0,0 +1,5 @@
+.viewerMain {
+    width: 88%;
+    height: 100%;
+    margin-left: 12%;
+}

LesionTracker/client/components/viewerMain/viewerMain.html

@@ -0,0 +1,7 @@
+<template name="viewerMain">
+    <div class="viewerMain">
+        {{> toolbar}}
+        {{> imageViewerViewports}}
+        <!--TODO: Bottom lesion table container will be here-->
+    </div>
+</template>