Added hotkey support to viewerbase

2015-12-09 15:48:24 +01:00
1 parent a005e5b359
commit da3101be93
@@ -0,0 +1,21 @@
+<template name="toolbar">
+    <div id='toolbar'>
+        <div class="btn-group">
+            {{ #each button }}
+                {{ >simpleToolbarButton}}
+            {{ /each }}
+
+            {{ #if includePlayClipButton }}
+                {{ >playClipButton }}
+            {{ /if }}
+
+            {{ #if includeLayoutButton }}
+                {{ >layoutButton }}
+            {{ /if }}
+
+            {{ #if includeHangingProtocolButtons }}
+                {{ >hangingProtocolButtons }}
+            {{ /if }}
+        </div>
+    </div>
+</template>
@@ -0,0 +1,168 @@
+function getDefaultButtonData() {
+    var buttonData = [];
+
+    buttonData.push({
+        id: 'wwwc',
+        title: 'WW/WC',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-sun-o'
+    });
+
+    buttonData.push({
+        id: 'wwwcRegion',
+        title: 'Window by Region',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-square'
+    });
+
+    buttonData.push({
+        id: 'magnify',
+        title: 'Magnify',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-circle'
+    });
+
+    buttonData.push({
+        id: 'annotate',
+        title: 'Annotation',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-arrows-h'
+    });
+
+    buttonData.push({
+        id: 'invert',
+        title: 'Invert',
+        classes: 'imageViewerCommand',
+        iconClasses: 'fa fa-adjust'
+    });
+
+    buttonData.push({
+        id: 'zoom',
+        title: 'Zoom',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-search'
+    });
+
+    buttonData.push({
+        id: 'pan',
+        title: 'Pan',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-arrows'
+    });
+
+    buttonData.push({
+        id: 'stackScroll',
+        title: 'Stack Scroll',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-bars'
+    });
+
+    buttonData.push({
+        id: 'length',
+        title: 'Length Measurement',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-arrows-v'
+    });
+
+    buttonData.push({
+        id: 'angle',
+        title: 'Angle Measurement',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-angle-left'
+    });
+
+    buttonData.push({
+        id: 'dragProbe',
+        title: 'Pixel Probe',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-dot-circle-o'
+    });
+
+    buttonData.push({
+        id: 'ellipticalRoi',
+        title: 'Elliptical ROI',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-circle-o'
+    });
+
+    buttonData.push({
+        id: 'rectangleRoi',
+        title: 'Rectangle ROI',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-square-o'
+    });
+
+    buttonData.push({
+        id: 'resetViewport',
+        title: 'Reset Viewport',
+        classes: 'imageViewerCommand',
+        iconClasses: 'fa fa-undo'
+    });
+
+    buttonData.push({
+        id: 'clearTools',
+        title: 'Clear tools',
+        classes: 'imageViewerCommand',
+        iconClasses: 'fa fa-trash'
+    });
+    return buttonData;
+}
+
+Template.toolbar.events({
+    'click .imageViewerTool': function(e) {
+        $(e.currentTarget).tooltip('hide');
+
+        var tool = e.currentTarget.id;
+        console.log('Setting active tool to: ' + tool);
+
+        var elements = $('.imageViewerViewport');
+        toolManager.setActiveTool(tool, elements);
+    },
+    'click .imageViewerCommand': function(e) {
+        $(e.currentTarget).tooltip('hide');
+
+        var command = e.currentTarget.id;
+        if (!OHIF.viewer.functionList.hasOwnProperty(command)) {
+            return;
+        }
+        var activeViewport = Session.get('activeViewport');
+        var element = $('.imageViewerViewport').get(activeViewport);
+        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({
+    'button': function() {
+        if (this.toolbarOptions && this.toolbarOptions.buttonData) {
+            return this.toolbarOptions.buttonData;
+        }
+        return getDefaultButtonData();
+    },
+    'includePlayClipButton': function() {
+        if (this.toolbarOptions && this.toolbarOptions.includePlayClipButton !== undefined) {
+            return this.toolbarOptions.includePlayClipButton;
+        }
+        return true;
+    },
+    'includeLayoutButton': function() {
+        if (this.toolbarOptions && this.toolbarOptions.includeLayoutButton !== undefined) {
+            return this.toolbarOptions.includeLayoutButton;
+        }
+        return true;
+    },
+    'includeHangingProtocolButtons': function() {
+        if (this.toolbarOptions && this.toolbarOptions.includeHangingProtocolButtons !== undefined) {
+            return this.toolbarOptions.includeHangingProtocolButtons;
+        }
+        return true;
+    }
+});
@@ -0,0 +1,16 @@
+#toolbar
+  background-color: black
+  text-align: center
+  
+  .btn-group
+    display: inline-block
+    
+    button
+      text-align: center
+      color: #ffffff
+      background-color: #424242
+      border-color: #424242
+      outline: none
+      
+      &.active, &:active
+        background-color: #3B678E