Updates to Lesion Tracker lesionTable and Packaging

This commit is contained in:
Erik Ziegler committed 2015-10-23 18:21:46 +02:00
1 parent 4721400b34
commit e2000480d3
36 files changed
+480 -176

No files matched your search

+1
View File
@@ -34,3 +34,4 @@ stylus
fortawesome:fontawesome
random
reactive-var
lesiontracker
+1
View File
@@ -50,6 +50,7 @@ iron:router@1.0.12
iron:url@1.0.11
jquery@1.11.4
launch-screen@1.0.4
lesiontracker@0.0.1
livedata@1.0.15
localstorage@1.0.5
logging@1.0.8
@@ -1,39 +0,0 @@
(function($) {
//Collapse the container
function collapseContainer ( container ) {
container.toggleClass("collapseHorizontal");
var btnCollapse = container.find(".btnCollapse");
}
//function add collapse button
function addButtonCollapse ( container ) {
var btnCollapse = document.createElement("button");
btnCollapse.innerHTML = ">";
$(btnCollapse).addClass ("btnCollapse");
btnCollapse.onclick = function() { // Note this is a function
collapseContainer(container);
};
container.append(btnCollapse);
}
$.fn.dockingContainer = function(options) {
var self = this;
var opts = $.extend( {}, $.fn.dockingContainer.defaults, options);
//Set container class
this.addClass("dockingContainer");
//Add btnCollapse
addButtonCollapse(this);
return this;
};
//Defaults
$.fn.dockingContainer.defaults = {
background: "black"
};
}(jQuery));
@@ -1,285 +0,0 @@
var lineIndex = 0; //This holds drawn line index
var cornerstoneTools = (function ($, cornerstone, cornerstoneMath, cornerstoneTools) {
"use strict";
if(cornerstoneTools === undefined) {
cornerstoneTools = {};
}
var toolType = "lesion";
///////// BEGIN ACTIVE TOOL ///////
function createNewMeasurement(mouseEventData)
{
var element = mouseEventData.element;
var lesionCounter = "";
//setting name of lesion
$(element).on("LesionNameSet", function(e,counter){
lesionCounter = counter;
});
//Listens LesionToolModified event and calls measurementModified function when lesion measurement is changed or updated.
$(element).on("LesionToolModified", measurementModified);
$(element).trigger("LesionMeasurementCreated", mouseEventData);
// create the measurement data for this tool with the end handle activated
var measurementData = {
visible : true,
active : true,
handles : {
start : {
x : mouseEventData.currentPoints.image.x,
y : mouseEventData.currentPoints.image.y,
highlight: true,
active: false
},
end: {
x : mouseEventData.currentPoints.image.x,
y : mouseEventData.currentPoints.image.y,
highlight: true,
active: true
}
},
index: lineIndex,
measurementText: "",
linkedTextCoords: {
start : {
x : mouseEventData.currentPoints.image.x,
y : mouseEventData.currentPoints.image.y,
highlight: true,
active: false
},
end: {
x : mouseEventData.currentPoints.image.x,
y : mouseEventData.currentPoints.image.y,
highlight: true,
active: true
},
init: false
},
lesionName: "Target "+lesionCounter,
isDeleted: false,
lineNumber:"" //Indicates line number on image
};
lineIndex++;
return measurementData;
}
///////// END ACTIVE TOOL ///////
function pointNearTool(element, data, coords)
{
var lineSegment = {
start: cornerstone.pixelToCanvas(element, data.handles.start), end: cornerstone.pixelToCanvas(element, data.handles.end)
};
var distanceToPoint = cornerstoneMath.lineSegment.distanceToPoint(lineSegment, coords);
return (distanceToPoint < 25);
}
function pointNearToolForText(element, data, coords) {
var lineSegment = {
start: cornerstone.pixelToCanvas(element, data.linkedTextCoords.start), end: cornerstone.pixelToCanvas(element, data.linkedTextCoords.end)
};
var distanceToPoint = cornerstoneMath.lineSegment.distanceToPoint(lineSegment, coords);
return (distanceToPoint < 30);
}
///////// BEGIN IMAGE RENDERING ///////
function onImageRendered(e, eventData) {
// if we have no toolData for this element, return immediately as there is nothing to do
var toolData = cornerstoneTools.getToolState(e.currentTarget, toolType);
if (toolData === undefined) {
return;
}
// we have tool data for this element - iterate over each one and draw it
var context = eventData.canvasContext.canvas.getContext('2d');
context.setTransform(1, 0, 0, 1, 0, 0);
var color;
var lineWidth = cornerstoneTools.toolStyle.getToolWidth();
var font = cornerstoneTools.textStyle.getFont();
var config = cornerstoneTools.length.getConfiguration();
for (var i = 0; i < toolData.data.length; i++) {
context.save();
// configurable shadow
if (config && config.shadow) {
context.shadowColor = '#000000';
context.shadowOffsetX = +1;
context.shadowOffsetY = +1;
}
var data = toolData.data[i];
if (data.active) {
color = cornerstoneTools.toolColors.getActiveColor();
} else {
color = cornerstoneTools.toolColors.getToolColor();
}
// draw the line
var handleStartCanvas = cornerstone.pixelToCanvas(eventData.element, data.handles.start);
var handleEndCanvas = cornerstone.pixelToCanvas(eventData.element, data.handles.end);
context.beginPath();
context.strokeStyle = color;
context.lineWidth = lineWidth;
context.moveTo(handleStartCanvas.x, handleStartCanvas.y);
context.lineTo(handleEndCanvas.x, handleEndCanvas.y);
context.stroke();
// draw the handles
cornerstoneTools.drawHandles(context, eventData, data.handles, color);
//Set coordinates of text
var linkedTextStartCanvas = cornerstone.pixelToCanvas(eventData.element, data.linkedTextCoords.start);
var linkedTextEndCanvas = cornerstone.pixelToCanvas(eventData.element, data.linkedTextCoords.end);
if(!data.linkedTextCoords.init){
data.linkedTextCoords.start.x = data.handles.start.x + 50;
data.linkedTextCoords.start.y = data.handles.start.y + 40;
linkedTextStartCanvas = cornerstone.pixelToCanvas(eventData.element, data.linkedTextCoords.start);
//Set end point of linkedTextCoords
data.linkedTextCoords.end.x = data.linkedTextCoords.start.x + 50;
data.linkedTextCoords.end.y = data.linkedTextCoords.start.y + 30;
linkedTextEndCanvas = cornerstone.pixelToCanvas(eventData.element, data.linkedTextCoords.end);
//initialized coordinates of text
data.linkedTextCoords.init = true;
}
//Draw linked line as dashed
context.setLineDash([2,3]);
context.beginPath();
context.strokeStyle = color;
context.lineWidth = 1 / eventData.viewport.scale;
var mid = {
x:(handleStartCanvas.x + handleEndCanvas.x) / 2, y:(handleStartCanvas.y + handleEndCanvas.y) / 2
};
context.moveTo(mid.x, mid.y);
context.lineTo(linkedTextStartCanvas.x + 20, linkedTextStartCanvas.y + 20);
context.stroke();
// Draw the text
context.fillStyle = color;
context.font = font;
var dx = (data.handles.start.x - data.handles.end.x) * (eventData.image.columnPixelSpacing || 1);
var dy = (data.handles.start.y - data.handles.end.y) * (eventData.image.rowPixelSpacing || 1);
var length = Math.sqrt(dx * dx + dy * dy);
var suffix = ' mm';
if (!eventData.image.rowPixelSpacing || !eventData.image.columnPixelSpacing) {
suffix = ' pixels';
}
var text = '' + length.toFixed(2) + suffix;
var textCoords = {
x: linkedTextStartCanvas.x, y: linkedTextStartCanvas.y
};
cornerstoneTools.drawTextBox(context, data.lesionName, textCoords.x, textCoords.y, color);
cornerstoneTools.drawTextBox(context, text, textCoords.x, textCoords.y + 20, color);
//Set measurement text to show lesion table
data.measurementText = length.toFixed(2);
$(eventData.enabledElement.element).trigger("LesionTextChanged",data);
context.restore();
}
}
///////// END IMAGE RENDERING ///////
//This function is called from cornerstone-viewport.html and updates lesion measurement and makes the lesion active
function measurementModified(e, eventObject){
var start = new Date();
var enabledElement = eventObject.enabledElement;
var lineIndex = eventObject.lineIndex;
var type = eventObject.type;
// if we have no toolData for this element, return immediately as there is nothing to do
var toolData = cornerstoneTools.getToolState(e.currentTarget, toolType);
if (toolData === undefined) {
return;
}
//If type is delete, remove measurement
if(type === "delete") {
var deletedDataIndex = -1;
for (var i = 0; i < toolData.data.length; i++) {
var data = toolData.data[i];
//When click a row of table measurements, measurement will be active and color will be green
if (data.index === eventObject.lineIndex && eventObject.type !== "active") {
data.visible = false;
deletedDataIndex = i;
}
}
if (deletedDataIndex >= 0 && deletedDataIndex < toolData.data.length) {
toolData.data.splice(deletedDataIndex, 1);
}
} else {
for (var i = 0; i < toolData.data.length; i++) {
var data = toolData.data[i];
//When click a row of table measurements, measurement will be active and color will be green
if (data.index === eventObject.lineIndex && eventObject.type === "active") {
data.active = true;
} else{
data.active = false;
}
}
}
enabledElement.image.render(enabledElement, true);
var context = enabledElement.canvas.getContext('2d');
var end = new Date();
var diff = end - start;
//console.log(diff + ' ms');
var eventData = {
viewport : enabledElement.viewport,
element : enabledElement.element,
image : enabledElement.image,
enabledElement : enabledElement,
canvasContext: context,
measurementText: "",
renderTimeInMs : diff,
lineIndex : lineIndex,
type : type //Holds image will be deleted or active
};
enabledElement.invalid = false;
onImageRendered(e, eventData);
}
// module exports
cornerstoneTools.lesion = cornerstoneTools.mouseButtonTool({
createNewMeasurement : createNewMeasurement,
onImageRendered: onImageRendered,
pointNearTool : pointNearTool,
pointNearToolForText: pointNearToolForText,
toolType : toolType
});
cornerstoneTools.lesionTouch = cornerstoneTools.touchTool({
createNewMeasurement: createNewMeasurement,
onImageRendered: onImageRendered,
pointNearTool: pointNearTool,
pointNearToolForText: pointNearToolForText,
toolType: toolType
});
return cornerstoneTools;
}($, cornerstone, cornerstoneMath, cornerstoneTools));
@@ -1,5 +0,0 @@
<template name="hidingPanel">
<div class="hidingPanel">
{{> studyBrowser}}
</div>
</template>
@@ -1,6 +0,0 @@
.hidingPanel
width: 12%
height: 100%
padding-top: 35px
position: relative
float: left
@@ -1,26 +0,0 @@
<template name="layoutLesionTracker">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img height="30px" src="/images/logo.png">
<h4 class="name">OHIF Lesion Tracker</h4>
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="http://www.tumormetrics.org">About</a>
</li>
</ul>
</div>
</div>
</nav>
{{> yield}}
</template>
@@ -1,33 +0,0 @@
.navbar
margin-bottom: 0
border-radius: 0
color: #888888
background-color: #060606
border: none
font-family: "Sanchez"
color: #C1C1C1
.navbar-default .navbar-nav > li > a
color: #C1C1C1
font-weight: bold
font-size: 12pt
.navbar-form
margin: 0
padding: 15px 3px
.navbar-brand
img
float: left
margin-right: 10px
margin-top: -8px
h4.name
float: left
margin: 0
font-family: "Sanchez"
color: #C1C1C1
@media (min-width: 768px)
.navbar
border-radius: 0px
@@ -1,3 +0,0 @@
<template name="lesionDialog">
{{> lesionLocationDialog}}
</template>
@@ -1,23 +0,0 @@
Template.lesionDialog.onRendered(function () {
// Listen lesionMeaurementCreated Event and when this event is triggered, show lesionLocationDialog Box
var viewportIndex = this.data.activeViewport.get();
$(document).on("LesionMeasurementCreated",function(e, eventData){
console.log("lesionMeasurementCreated");
var data = {};
data.viewportIndex = viewportIndex;
//Set Lesion Table Data to insert into lesion table
setLesionTableData(data);
if( !Session.get("lesionLocationSelected") ) {
$("#modal-dialog-container").css({
"top": eventData.currentPoints.page.y,
"left": eventData.currentPoints.page.x
});
$("#lesionDialog").modal("show");
}
});
});
@@ -1,20 +0,0 @@
<template name="lesionLocationDialog">
<div class="modal fade" id="lesionDialog" style=" background-color: transparent;">
<div id="modal-dialog-container" class="modal-dialog modal-sm" style="position: absolute; border: none; ">
<div class="modal-content" style="padding: 10px;">
<div class="dialogHeader">
<div style="float:left;"><h4>Select Lesion Location</h4></div>
<div style="float:right;"><button class="btn" id="btnCloseLesionPopup" style="outline: 0; border: none; background-color: transparent;"><i class="fa fa-close"></i></button></div>
</div>
<div class="dialogContent" style="margin-bottom: 20px;">
<div class="lesionLocation">
<label>Lesion Location</label>
<select id="selectLesionLocation" style="margin-top:5px;">
<option value="-1"></option>
</select>
</div>
</div>
</div>
</div>
</div>
</template>
@@ -1,49 +0,0 @@
//fill selectLesionLocation element
var lesionLocationsArray = [
{location:"Brain Brainstem",hasDescription:false, description:""},
{location:"Brain Cerebellum Left",hasDescription:false, description:""},
{location:"Brain Cerebrum Left",hasDescription:false, description:""},
{location:"Brain Cerebrum Right",hasDescription:false, description:""},
{location:"Brain Multiple Sites",hasDescription:false, description:""}
];
Template.lesionLocationDialog.onRendered(function () {
function fillSelectLesionLocation () {
var el = $("#selectLesionLocation");
el.find('option:not(:first)').remove();
$.each(lesionLocationsArray, function(key, value) {
el.append("<option value='" + key+ "'>" + value.location + "</option>");
});
}
// Fill dropdown
fillSelectLesionLocation();
});
Template.lesionLocationDialog.events({
'click button#btnCloseLesionPopup': function (e) {
$("#lesionDialog").modal("hide");
},
'change select#selectLesionLocation': function (e) {
var el = $(e.target);
var selectedLocationIndex = el.val();
if(selectedLocationIndex !== "-1"){
var locationObj = lesionLocationsArray[selectedLocationIndex];
// Trigger location selected event
$(document).trigger("lesionLocationSelected",locationObj);
// Set activeModule parameters in index.html
$("#lesionDialog").modal("hide");
// Select first option
el.val($("#selectLesionLocation option:first").val());
// Set lesion location selected session to prevent open
Session.set("lesionLocationSelected", true);
}
}
});
@@ -1,15 +0,0 @@
<template name="lesionMeasurementContainer">
<div class="lesionMeasurementContainer">
<table class="lesionTable" id="tblLesion">
<thead>
<tr class="headRow">
<th>#</th>
<th>Location</th>
<th>LD</th>
<th style="text-align: center;"><i class="fa fa-times fa-lg"></i></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</template>
@@ -1,28 +0,0 @@
var lesionTableData;
setLesionTableData = function (data) {
lesionTableData = data;
};
getLesionTableData = function () {
return lesionTableData;
};
returnTblStr = function (obj) {
return '<tr id="' + obj.lineIndex + '" toolType="' + obj.toolType + '"><td class="tblRow">1</td><td class="tblRow">' + obj.lesionLocationObj.location + '</td><td class="tblRow">' + obj.lesions + '</td><td id="' + obj.lineIndex + '" toolType="' + obj.toolType + '"><button type="button" class="btnRemove fa fa-times fa-lg" title="Remove"></button></td></tr>';
};
Template.lesionMeasurementContainer.onRendered( function () {
console.log("rendered lesion");
//Link lesionLocationSelected event
$(document).on("lesionLocationSelected",function(event,data ){
var lesionData = getLesionTableData();
lesionData.lesionLocationObj = data;
var tabId = lesionData.tabId;
var el_index = lesionData.viewportIndex;
var lesionTables = $(".lesionTable");
var tableEl = lesionTables.get(el_index);
var tblStr = returnTblStr(lesionData);
$(tableEl).append(tblStr);
});
});
@@ -1,21 +0,0 @@
.lesionMeasurementContainer
width: 24%
float: left
height: 100%
#tblLesion {
overflow: auto;
border: solid 1px white;
padding: 0;
margin: 0 auto;
font-size: 14px;
cursor: pointer;
color: white;
width: 100%;
height:100%;
background-color: black;
}
#tblLesion > tr {background-color: #545454;border-bottom: solid 1px black; width: 100%;}
#tblLesion > tr.headRow{background-color: #424242;width: 100%; line-height: 15px;}
#tblLesion > tr.headRow th{padding:5px;text-align: left;font-style: italic;font-size:14px;}
@@ -1,5 +0,0 @@
<template name="lesionTableContainer">
<div class="lesionTableContainer">
Current, Prior, Nadir, Baseline go here
</div>
</template>
@@ -1,7 +0,0 @@
.lesionTableContainer
height: 25%
max-height: 200px
color: #A0A0A0
background-color: #2F2F2F
border: 8px solid #484848
@@ -1,4 +1,4 @@
<template name="lesionTrackerLayout">
<template name="layoutLesionTracker">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
@@ -4,4 +4,9 @@
margin: 0;
padding: 0;
background-color: black;
}
#upperHalf {
height: 75%;
width: 100%;
}
+5 -3
View File
@@ -1,8 +1,10 @@
<template name="viewer">
<div id="viewer" class="viewer">
{{ >lesionDialog studies=studies activeViewport=activeViewport}}
{{ >hidingPanel studies=studies activeViewport=activeViewport}}
{{ >viewerMain studies=studies activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}
{{ >lesionMeasurementContainer studies=studies activeViewport=activeViewport}}
<div id="upperHalf">
{{ >hidingPanel studies=studies activeViewport=activeViewport}}
{{ >viewerMain studies=studies activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}
</div>
{{ >lesionTable studies=studies activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}
</div>
</template>
@@ -2,6 +2,5 @@
<div class="viewerMain">
{{ >toolbar toolbarOptions=toolbarOptions activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}
{{ >imageViewerViewports studies=studies activeViewport=activeViewport viewportRows=viewportRows viewportColumns=viewportColumns}}
{{ >lesionTableContainer studies=studies activeViewport=activeViewport}}
</div>
</template>
@@ -72,7 +72,7 @@ Template.viewerMain.helpers({
toolbarOptions.buttonData = buttonData;
toolbarOptions.includePlayClipButton = true;
toolbarOptions.includeLayoutButton = false;
toolbarOptions.includeLayoutButton = true;
return toolbarOptions;
}
});
@@ -1,8 +1,4 @@
.viewerMain
width: 64%;
width: calc(100% - 120px)
height: 100%
float: left
#imageViewerViewports
height: calc(75% - 30px)
width: 100%
float: left