1446 lines
56 KiB
JavaScript
1446 lines
56 KiB
JavaScript
var viewport_active = null;
|
|
var viewerContainer = null;
|
|
var layoutManager = null;
|
|
var viewport_template = null;
|
|
var viewport_multi_template = null;
|
|
var thumbnail_template = null;
|
|
var studylist_template = null;
|
|
var expertise_template = null;
|
|
var viewport_series = {};
|
|
var stack_series_iuid = {};
|
|
var synchronizer = null;
|
|
var synchronizer_pan_zoom = null;
|
|
var synchronizer_wwwc = null;
|
|
var seriesIndex = 0;
|
|
var data_loaded = {};
|
|
var downloaddialog = null;
|
|
var lastViewer = null;
|
|
|
|
var _gkc = (e) => { if(document.layers)return e.which;else if(document.all)return event.keyCode;else if(document.getElementById)return e.keyCode;return 0; }
|
|
var _dce = (a) => { return document.createElement(a); };
|
|
var _gel = (a) => { return document.getElementById(a); };
|
|
var _dqs = (a) => { return document.querySelectorAll(a); };
|
|
var _gec = (a) => { return document.getElementsByClassName(a); };
|
|
var _oY = (a) => { return a.offsetTop; };
|
|
var _oX = (a) => { return a.offsetLeft; };
|
|
var _pos = (el) => { for (var lx=0, ly=0;el != null;lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent); return {x: lx,y: ly}; };
|
|
var _rmc = (el) => { while (el.lastChild) { el.removeChild(el.lastChild); } };
|
|
var _dsa = (inp) => { if(inp) { inp.selectionStart = 0; inp.selectionEnd = inp.value.length; inp.focus(); } };
|
|
|
|
var uniqid = () => { return 'id' + Math.random().toString(36).substr(2,16); };
|
|
// draggable item
|
|
var dragstart = (ev) => { ev.dataTransfer.setData("text", ev.target.id); ev.target.style.opacity = .5; };
|
|
var dragend = (ev) => { ev.target.style.opacity = 1; };
|
|
// dropable container
|
|
var dragover = (ev) => { ev.preventDefault(); };
|
|
var dragenter = (ev) => { ev.target.parentNode.style.opacity = .5; };
|
|
var dragleave = (ev) => { ev.target.parentNode.style.opacity = 1; };
|
|
|
|
function loadTemplate(url,callback) {
|
|
http = new XMLHttpRequest();
|
|
http.open("GET", url, true);
|
|
http.onreadystatechange = function() {
|
|
if(http.readyState == 4 && http.status == 200) {
|
|
var parser = new DOMParser();
|
|
var dom = parser.parseFromString(http.responseText, 'text/html');
|
|
callback(dom.getElementsByClassName('tpc')[0]);
|
|
}
|
|
};
|
|
http.send();
|
|
}
|
|
|
|
|
|
function init_thumbnail_drag() {
|
|
var ts = _gec('thumbnailEntry');
|
|
[].forEach.call(ts, function (el) {
|
|
el.addEventListener('dragstart',dragstart);
|
|
el.addEventListener('dragend',dragend);
|
|
el.addEventListener('click',function(ev) {
|
|
var mainContent = _gel('mainContent');
|
|
var seriesViewer = _gel('seriesViewer');
|
|
var expertiseViewer = _gel('expertiseViewer');
|
|
var thumb_id = ev.currentTarget.id;
|
|
var series_iuid = _gel(thumb_id).getAttribute('data-value');
|
|
var stack = stack_series_iuid[series_iuid];
|
|
useStack(viewport_active.idx,stack);
|
|
seriesViewer.style.display = 'none';
|
|
// expertiseViewer.style.display = 'none';
|
|
mainContent.style.display = '';
|
|
});
|
|
});
|
|
}
|
|
|
|
function init_viewport_drop() {
|
|
var vps = viewerContainer.childNodes;
|
|
vps.forEach(function(el) {
|
|
el.addEventListener('dragover',dragover,false);
|
|
el.addEventListener('dragenter',dragenter,false);
|
|
el.addEventListener('dragleave',dragleave,false);
|
|
el.addEventListener('drop',function(ev) {
|
|
ev.preventDefault();
|
|
var thumb_id = ev.dataTransfer.getData("text");
|
|
ev.target.parentNode.style.opacity = 1;
|
|
var series_iuid = _gel(thumb_id).getAttribute('data-value');
|
|
var stack = stack_series_iuid[series_iuid];
|
|
useStack(el.idx,stack);
|
|
},false);
|
|
});
|
|
|
|
var seriesViewer = _gel('seriesViewer');
|
|
seriesViewer.addEventListener('dragover',function(ev) {
|
|
_gel('seriesViewerContainer').style.opacity = 0.5;
|
|
ev.preventDefault();
|
|
},false);
|
|
seriesViewer.addEventListener('dragenter',function(ev) {
|
|
_gel('seriesViewerContainer').style.opacity = 0.5;
|
|
},false);
|
|
seriesViewer.addEventListener('dragleave',function(ev) {
|
|
_gel('seriesViewerContainer').style.opacity = 1;
|
|
},false);
|
|
seriesViewer.addEventListener('drop',function(ev) {
|
|
ev.preventDefault();
|
|
_gel('seriesViewerContainer').style.opacity = 1;
|
|
var thumb_id = ev.dataTransfer.getData("text");
|
|
ev.target.parentNode.style.opacity = 1;
|
|
var series_iuid = _gel(thumb_id).getAttribute('data-value');
|
|
var stack_idx = stack_series_iuid[series_iuid];
|
|
useSeries(layoutManager.stacks[stack_idx]);
|
|
});
|
|
}
|
|
|
|
function viewportSetActive(d) {
|
|
var vps = viewerContainer.childNodes;
|
|
vps.forEach(function(el) {
|
|
el.classList.remove('active');
|
|
});
|
|
d.classList.add('active');
|
|
viewport_active = d;
|
|
var idx = layoutManager.viewport_idx[d.idx];
|
|
var stack = layoutManager.stack_on_viewport[idx];
|
|
if(typeof stack!=='undefined') {
|
|
displayNextPrevButton();
|
|
}
|
|
}
|
|
|
|
function getStackOnViewport(viewport_idx) {
|
|
var idx = layoutManager.viewport_idx[viewport_idx];
|
|
var stack = layoutManager.stack_on_viewport[idx];
|
|
return stack;
|
|
}
|
|
|
|
function displayNextPrevButton() {
|
|
var mainContent = _gel('mainContent');
|
|
if(mainContent.style.display=='none') {
|
|
_gel('previousDisplaySet').classList.add('disabled');
|
|
_gel('nextDisplaySet').classList.add('disabled');
|
|
} else {
|
|
var stack = getStackOnViewport(viewport_active.idx);
|
|
if(stack==0 || layoutManager.stacks.length==1) {
|
|
_gel('previousDisplaySet').classList.add('disabled');
|
|
} else if(stack>0) {
|
|
_gel('previousDisplaySet').classList.remove('disabled');
|
|
}
|
|
if(stack>=(layoutManager.stacks.length-1) || layoutManager.stacks.length==1) {
|
|
_gel('nextDisplaySet').classList.add('disabled');
|
|
} else if(stack<(layoutManager.stacks.length-1)) {
|
|
_gel('nextDisplaySet').classList.remove('disabled');
|
|
}
|
|
}
|
|
}
|
|
|
|
function viewportSetActiveSingle(ev) {
|
|
var idx = layoutManager.viewport_idx[ev.currentTarget.idx];
|
|
let stack = parseInt(layoutManager.stack_on_viewport[idx]);
|
|
layoutManager.setLayout(1,1);
|
|
useStack("1x1",stack);
|
|
reset_layout_chooser();
|
|
}
|
|
|
|
function init_layout() {
|
|
layoutManager = _gel('layoutManagerTarget');
|
|
viewerContainer = _gel('imageViewerViewports');
|
|
layoutManager.stacks = [];
|
|
layoutManager.viewport_idx = {};
|
|
layoutManager._x = 0;
|
|
layoutManager._y = 0;
|
|
layoutManager.stack_on_viewport = {};
|
|
|
|
layoutManager.forEachElement = function(cb) {
|
|
if(layoutManager.viewports) {
|
|
layoutManager.viewports.forEach(function(vp, i){
|
|
cb.call(self, vp.getElementsByClassName('imageViewerViewport')[0], vp, i);
|
|
});
|
|
}
|
|
}
|
|
|
|
synchronizer = new cornerstoneTools.Synchronizer('cornerstonenewimage', cornerstoneTools.updateImageSynchronizer);
|
|
|
|
layoutManager.setLayout = function(y,x) {
|
|
|
|
/// clean up previous
|
|
layoutManager.forEachElement(function(vp,vps,i) {
|
|
/// bug unloaded
|
|
var enabledImage = cornerstone.getEnabledElement(vp);
|
|
if (enabledImage.image) {
|
|
cornerstoneTools.referenceLines.tool.disable(vp, synchronizer);
|
|
synchronizer.remove(vp);
|
|
}
|
|
});
|
|
|
|
/// render layout
|
|
layoutManager._x = x;
|
|
layoutManager._y = y;
|
|
layoutManager.className = 'layout-'+y+'-'+x;
|
|
_rmc(viewerContainer);
|
|
layoutManager.viewports = [];
|
|
layoutManager.viewport_idx = {};
|
|
var w = 100/x;
|
|
var h = 100/y;
|
|
var row_top = 1;
|
|
var row_middle = 0;
|
|
var row_bottom = 0;
|
|
if(y>2) {
|
|
row_bottom = 1;
|
|
row_middle = y-2;
|
|
} else if(y==2) {
|
|
row_bottom = 1;
|
|
}
|
|
/// add top
|
|
for(var j=1;j<=x;j++) {
|
|
var vp = viewport_template.cloneNode(true);
|
|
vp.style.height = h+'%';
|
|
vp.style.width = w+'%';
|
|
vp.classList.add('top');
|
|
vp.idx = 1+'x'+j;
|
|
layoutManager.viewport_idx[vp.idx] = layoutManager.viewports.length;
|
|
vp.addEventListener('click',function(e) { viewportSetActive(this); });
|
|
vp.addEventListener('dblclick',viewportSetActiveSingle,false);
|
|
layoutManager.viewports.push(viewerContainer.appendChild(vp));
|
|
if(vp.idx=='1x1') viewportSetActive(vp);
|
|
|
|
}
|
|
/// add middle
|
|
for(var i=1;i<=row_middle;i++) {
|
|
for(var j=1;j<=x;j++) {
|
|
var vp = viewport_template.cloneNode(true);
|
|
vp.style.height = h+'%';
|
|
vp.style.width = w+'%';
|
|
vp.classList.add('middle');
|
|
vp.idx = (i+1)+'x'+j;
|
|
layoutManager.viewport_idx[vp.idx] = layoutManager.viewports.length;
|
|
vp.addEventListener('click',function(e) { viewportSetActive(this); });
|
|
vp.addEventListener('dblclick',viewportSetActiveSingle,false);
|
|
layoutManager.viewports.push(viewerContainer.appendChild(vp));
|
|
}
|
|
}
|
|
/// add bottom
|
|
if(row_bottom==1) {
|
|
for(var j=1;j<=x;j++) {
|
|
var vp = viewport_template.cloneNode(true);
|
|
vp.style.height = h+'%';
|
|
vp.style.width = w+'%';
|
|
vp.classList.add('bottom');
|
|
vp.idx = y+'x'+j;
|
|
layoutManager.viewport_idx[vp.idx] = layoutManager.viewports.length;
|
|
vp.addEventListener('click',function(e) { viewportSetActive(this); });
|
|
vp.addEventListener('dblclick',viewportSetActiveSingle,false);
|
|
layoutManager.viewports.push(viewerContainer.appendChild(vp));
|
|
}
|
|
}
|
|
|
|
var mainContent = _gel('mainContent');
|
|
var seriesViewer = _gel('seriesViewer');
|
|
var expertiseViewer = _gel('expertiseViewer');
|
|
seriesViewer.style.display = 'none';
|
|
// expertiseViewer.style.display = 'none';
|
|
mainContent.style.display = '';
|
|
|
|
|
|
layoutManager.forEachElement(function(vp,vps,i) {
|
|
cornerstone.enable(vp);
|
|
vp.refline = true;
|
|
vp.viewportcontainer = vp.parentNode.parentNode;
|
|
vp.addEventListener('cornerstonestackscroll', function (e) {
|
|
var slider = e.target.viewportcontainer.getElementsByClassName('imageSlider')[0];
|
|
slider.value = e.detail.newImageIdIndex;
|
|
if(e.target.refline) {
|
|
layoutManager.forEachElement(function(vp_,vps_,i_) {
|
|
if(i_==i) {
|
|
vp_.refline = false;
|
|
cornerstoneTools.referenceLines.tool.disable(vp_, synchronizer);
|
|
} else {
|
|
vp_.refline = true;
|
|
cornerstoneTools.referenceLines.tool.enable(vp_, synchronizer);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
init_viewport_drop();
|
|
|
|
// put previous images into the newly created viewports
|
|
var new_viewport_series = {};
|
|
var reverse_viewport_series = {};
|
|
for(var k in layoutManager.viewport_idx) {
|
|
if(typeof viewport_series[k] !== 'undefined') {
|
|
var stack = viewport_series[k];
|
|
useStack(k,stack);
|
|
new_viewport_series[k] = stack;
|
|
reverse_viewport_series[stack] = k;
|
|
}
|
|
}
|
|
for(var stack in layoutManager.stacks) {
|
|
if(typeof reverse_viewport_series[stack] !== 'undefined') {
|
|
} else {
|
|
for(var k in layoutManager.viewport_idx) {
|
|
if(typeof new_viewport_series[k] === 'undefined' && typeof reverse_viewport_series[stack] === 'undefined') {
|
|
useStack(k,stack);
|
|
new_viewport_series[k] = stack;
|
|
reverse_viewport_series[stack] = k;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
viewport_series = Object.create(new_viewport_series);
|
|
};
|
|
}
|
|
|
|
function useStack(viewport_idx,stack) {
|
|
stack = parseInt(stack);
|
|
|
|
var imageId = layoutManager.stacks[stack].imageIds[0];
|
|
var idx = layoutManager.viewport_idx[viewport_idx];
|
|
var viewport = layoutManager.viewports[idx].getElementsByClassName('imageViewerViewport')[0];
|
|
layoutManager.stack_on_viewport[idx] = stack;
|
|
|
|
startLoadingHandler(viewport);
|
|
|
|
displayImage(imageId,viewport,layoutManager.stacks[stack],function(viewport,stack) {
|
|
setupViewport(viewport,stack,this);
|
|
setupViewerViewportOverlay(viewport,data);
|
|
cornerstoneTools.referenceLines.tool.enable(viewport, synchronizer);
|
|
if(!viewport.setup) {
|
|
viewport.setup = true;
|
|
}
|
|
doneLoadingHandler(viewport);
|
|
});
|
|
|
|
layoutManager.viewports[idx].getElementsByClassName('viewportInstructions')[0].style.display = 'none';
|
|
viewport_series[viewport_idx] = stack;
|
|
|
|
var enabledImage = cornerstone.getEnabledElement(viewport);
|
|
if (enabledImage.image) {
|
|
cornerstone.reset(viewport);
|
|
cornerstone.fitToWindow(viewport);
|
|
}
|
|
|
|
displayNextPrevButton();
|
|
|
|
}
|
|
|
|
function displayImage(imageId,viewport,stack,callback) {
|
|
var enabledImage = cornerstone.getEnabledElement(viewport);
|
|
if (enabledImage.image) {
|
|
// Stop clip from if playing on element
|
|
// cornerstoneTools.stopClip(viewport);
|
|
// // Disable stack scrolling
|
|
// cornerstoneTools.stackScroll.disable(viewport);
|
|
// // Enable stackScroll on selected series
|
|
// cornerstoneTools.stackScroll.enable(viewport);
|
|
cornerstone.reset(viewport);
|
|
cornerstone.fitToWindow(viewport);
|
|
}
|
|
|
|
// Load the first image of the selected series stack
|
|
cornerstone.loadAndCacheImage(imageId).then(function(image) {
|
|
if (callback) {
|
|
callback.call(image, viewport, stack);
|
|
}
|
|
|
|
// Get the state of the stack tool
|
|
// var stackState = cornerstoneTools.getToolState(viewport, 'stack');
|
|
// stackState.data[0] = stack;
|
|
// stackState.data[0].currentImageIdIndex = 0;
|
|
|
|
// Get the default viewport
|
|
// var defViewport = cornerstone.getDefaultViewport(viewport, image);
|
|
// Get the current series stack index
|
|
|
|
// Display the image
|
|
cornerstone.displayImage(viewport, image);
|
|
|
|
// Fit the image to the viewport window
|
|
cornerstone.reset(viewport);
|
|
cornerstone.fitToWindow(viewport);
|
|
|
|
// set the stack as tool state
|
|
// cornerstoneTools.addStackStateManager(viewport, ['stack']);
|
|
// cornerstoneTools.addToolState(viewport, 'stack', stack);
|
|
|
|
// cornerstoneTools.mouseInput.enable(viewport);
|
|
// cornerstoneTools.mouseWheelInput.enable(viewport);
|
|
// cornerstoneTools.stackScrollWheel.activate(viewport);
|
|
|
|
// Add the enabled elements to the synchronization context
|
|
synchronizer.add(viewport);
|
|
|
|
// enable reference Lines tool
|
|
// cornerstoneTools.referenceLines.tool.enable(viewport, synchronizer);
|
|
|
|
// Prefetch the remaining images in the stack (?)
|
|
cornerstoneTools.stackPrefetch.enable(viewport);
|
|
|
|
// Play clip if stack is a movie (has framerate)
|
|
// if (stack.frameRate !== undefined) {
|
|
// cornerstoneTools.playClip(viewport, stack.frameRate);
|
|
// }
|
|
});
|
|
}
|
|
|
|
function resizeMain() {
|
|
var mainContent = _gel('mainContent');
|
|
if(mainContent.style.display=='none') { /// off
|
|
seriesViewer.viewports.forEach(function(vp,idx) {
|
|
var el = vp.getElementsByClassName('imageViewerViewport')[0];
|
|
cornerstone.resize(el, true);
|
|
cornerstone.fitToWindow(el);
|
|
});
|
|
} else {
|
|
layoutManager.forEachElement(function(el, vp) {
|
|
cornerstone.resize(el, true);
|
|
var enabledImage = cornerstone.getEnabledElement(el);
|
|
if (enabledImage.image) cornerstone.fitToWindow(el);
|
|
var toolData = cornerstoneTools.getToolState(el, 'stack');
|
|
if(toolData === undefined || toolData.data === undefined || toolData.data.length === 0) {
|
|
return;
|
|
}
|
|
var stack = toolData.data[0];
|
|
var slider = vp.getElementsByClassName('imageSlider')[0];
|
|
slider.style.width = parseInt(slider.parentNode.offsetHeight)+'px';
|
|
});
|
|
}
|
|
}
|
|
|
|
function setupViewport(element, stack, image) {
|
|
// Display the image on the viewer element
|
|
cornerstone.displayImage(element, image);
|
|
|
|
// If it's a movie (has frames), then play the clip
|
|
// if (stack.frameRate !== undefined) {
|
|
// cornerstone.playClip(element, stack.frameRate);
|
|
// }
|
|
|
|
// Activate mouse clicks, mouse wheel and touch
|
|
cornerstoneTools.mouseInput.enable(element);
|
|
cornerstoneTools.mouseWheelInput.enable(element);
|
|
cornerstoneTools.touchInput.enable(element);
|
|
// Disable stack scrolling
|
|
cornerstoneTools.stackScroll.disable(element);
|
|
// Enable stackScroll on selected series
|
|
cornerstoneTools.stackScroll.enable(element);
|
|
|
|
// Enable all tools we want to use with this element
|
|
cornerstoneTools.wwwc.activate(element, 1); // ww/wc is the default tool for left mouse button
|
|
cornerstoneTools.pan.activate(element, 2); // pan is the default tool for middle mouse button
|
|
cornerstoneTools.zoom.activate(element, 4); // zoom is the default tool for right mouse button
|
|
// cornerstoneTools.probe.enable(element);
|
|
cornerstoneTools.length.enable(element);
|
|
cornerstoneTools.angle.enable(element);
|
|
// cornerstoneTools.ellipticalRoi.enable(element);
|
|
// cornerstoneTools.rectangleRoi.enable(element);
|
|
cornerstoneTools.wwwcTouchDrag.activate(element);
|
|
cornerstoneTools.zoomTouchPinch.activate(element);
|
|
// cornerstoneTools.stackScroll.activate(element,1);
|
|
|
|
synchronizer.add(element);
|
|
cornerstoneTools.addStackStateManager(element, ['stack','referenceLines']);
|
|
cornerstoneTools.addToolState(element, 'stack', stack);
|
|
|
|
|
|
// Stack tools
|
|
cornerstoneTools.stackScrollWheel.activate(element);
|
|
cornerstoneTools.stackPrefetch.enable(element);
|
|
}
|
|
|
|
function enable_tools() {
|
|
|
|
var clear = _gel('clearTools');
|
|
clear.addEventListener('click',function(e) {
|
|
if(!this.classList.contains('disabled')) {
|
|
clearTools();
|
|
}
|
|
},false);
|
|
|
|
|
|
var more = _gel('toggleMore');
|
|
more.addEventListener('click',function(e) {
|
|
if(!this.classList.contains('disabled')) {
|
|
var c = this.classList.toggle('expanded');
|
|
}
|
|
},false);
|
|
|
|
/// sidebar button
|
|
var sidebar = _dqs('[data-value="studies"]')[0];
|
|
sidebar.intransition = false;
|
|
sidebar.addEventListener('click',function(e) {
|
|
var c = this.classList.toggle('active');
|
|
_gec('sidebarMenu sidebar-left')[0].classList.toggle('sidebar-open');
|
|
_gec('mainContent')[0].classList.toggle('sidebar-left-open');
|
|
sidebar.intransition = true;
|
|
},false);
|
|
|
|
sidebar.addEventListener('transitionend',function(e) {
|
|
if(sidebar.intransition) {
|
|
resizeMain();
|
|
}
|
|
sidebar.intransition = false;
|
|
},false);
|
|
|
|
/// layout chooser
|
|
var lc = _gel('layoutChooser');
|
|
lc.getElementsByTagName('table')[0].addEventListener('mouseover', function(e) {
|
|
var y = e.target.parentElement.rowIndex;
|
|
var x = e.target.cellIndex;
|
|
for(var i=0;i<=3;i++) {
|
|
for(var j=0;j<=3;j++) {
|
|
if(!isNaN(y) && i<=y) {
|
|
if(!isNaN(x) && j<=x) {
|
|
this.rows[i].cells[j].className = 'hover';
|
|
} else {
|
|
this.rows[i].cells[j].className = '';
|
|
}
|
|
} else {
|
|
this.rows[i].cells[j].className = '';
|
|
}
|
|
}
|
|
}
|
|
lc.x = x+1;
|
|
lc.y = y+1;
|
|
}, false);
|
|
|
|
lc.getElementsByTagName('table')[0].addEventListener('click', function(e) {
|
|
var y = e.target.parentElement.rowIndex+1;
|
|
var x = e.target.cellIndex+1;
|
|
console.log('Layout selected : '+y+'x'+x);
|
|
lc.classList.toggle('open');
|
|
lc.classList.toggle('dialog-open');
|
|
layoutManager.setLayout(y,x);
|
|
}, false);
|
|
|
|
var lb = _gel('layout');
|
|
lb.addEventListener('click',function(e) {
|
|
if(!this.classList.contains('disabled')) {
|
|
lc.classList.toggle('open');
|
|
lc.classList.toggle('dialog-open');
|
|
lc.style.top = (_pos(this).y+parseInt(this.offsetHeight))+'px';
|
|
lc.style.left = (_pos(this).x)+'px';
|
|
}
|
|
},false);
|
|
|
|
let vs = _gel('viewSeriesButton');
|
|
vs.addEventListener('click',function(e) {
|
|
toggleViewSeries();
|
|
});
|
|
|
|
downloaddialog = _gel('image_download_dialog');
|
|
dialogPolyfill.registerDialog(downloaddialog);
|
|
downloaddialog.getElementsByClassName('btn-cancel')[0].addEventListener('click',function() {
|
|
downloaddialog.close();
|
|
});
|
|
downloaddialog.getElementsByClassName('close')[0].addEventListener('click',function() {
|
|
downloaddialog.close();
|
|
});
|
|
downloaddialog.getElementsByClassName('btn-download')[0].addEventListener('click',function() {
|
|
var filename = _gel('filename').value.replace(/\.[^/.]+$/, "") + ".png";
|
|
// var rtype = document.getElementsByName('filetype');
|
|
// for (var i = 0, length = rtype.length; i < length; i++) {
|
|
// if (rtype[i].checked) {
|
|
// if(rtype[i].value=="jpg") {
|
|
// filename += ".jpg";
|
|
// } else {
|
|
// filename += ".png";
|
|
// }
|
|
// break;
|
|
// }
|
|
// }
|
|
|
|
console.log(filename);
|
|
var element = getActiveViewportElement();
|
|
cornerstoneTools.saveAs(element, filename);
|
|
downloaddialog.close();
|
|
return false;
|
|
});
|
|
|
|
let commands = _gec('toolbarSectionTools')[0].getElementsByClassName('imageViewerCommand');
|
|
[].forEach.call(commands,function(command) {
|
|
command.addEventListener('click',function(e) {
|
|
if(this.classList.contains('disabled')) return;
|
|
console.log(e.currentTarget.id);
|
|
switch(e.currentTarget.id) {
|
|
case 'previousDisplaySet':
|
|
if(mainContent.style.display=='none') {
|
|
var previous_stack = seriesViewer.stack-1;
|
|
useSeries(previous_stack);
|
|
} else {
|
|
var previous_stack = getStackOnViewport(viewport_active.idx)-1;
|
|
useStack(viewport_active.idx,previous_stack);
|
|
}
|
|
break;
|
|
case 'nextDisplaySet':
|
|
if(mainContent.style.display=='none') {
|
|
var next_stack = seriesViewer.stack+1;
|
|
useSeries(next_stack);
|
|
} else {
|
|
var next_stack = getStackOnViewport(viewport_active.idx)+1;
|
|
useStack(viewport_active.idx,next_stack);
|
|
}
|
|
break;
|
|
case 'resetViewport':
|
|
resetViewport();
|
|
break;
|
|
case 'viewSeriesButton':
|
|
toggleViewSeries(e.currentTarget);
|
|
break;
|
|
case 'toggleDownloadDialog':
|
|
var vp = getActiveViewportElement();
|
|
let canvas = vp.getElementsByTagName('canvas')[0];
|
|
var img = _gel('imgpreview');
|
|
img.src = canvas.toDataURL();
|
|
downloaddialog.showModal();
|
|
setTimeout(function() {
|
|
var inp = _gel('filename');
|
|
inp.selectionStart = inp.selectionEnd = inp.value.length; inp.focus();
|
|
},10);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
let buttons = _gec('toolbarSectionTools')[0].getElementsByClassName('imageViewerTool');
|
|
[].forEach.call(buttons,function(button) {
|
|
button.addEventListener('click',function(e) {
|
|
if(this.classList.contains('disabled')) return;
|
|
disableAllTools();
|
|
e.currentTarget.classList.add('active');
|
|
console.log(e.currentTarget.id);
|
|
switch(e.currentTarget.id) {
|
|
case 'zoom':
|
|
forEachViewport(function(element) {
|
|
cornerstoneTools.zoom.activate(element, 5); // 5 is right mouse button and left mouse button
|
|
cornerstoneTools.zoomTouchDrag.activate(element);
|
|
});
|
|
break;
|
|
case 'pan':
|
|
forEachViewport(function(element) {
|
|
cornerstoneTools.pan.activate(element, 3); // 3 is middle mouse button and left mouse button
|
|
cornerstoneTools.panTouchDrag.activate(element);
|
|
});
|
|
break;
|
|
case 'stackScroll':
|
|
forEachViewport(function(element) {
|
|
cornerstoneTools.stackScrollTouchDrag.activate(element);
|
|
cornerstoneTools.stackScroll.activate(element, 1);
|
|
});
|
|
console.log('stackScroll set');
|
|
break;
|
|
case 'wwwc':
|
|
forEachViewport(function(element) {
|
|
cornerstoneTools.wwwc.activate(element, 1);
|
|
cornerstoneTools.wwwcTouchDrag.activate(element);
|
|
});
|
|
break;
|
|
case 'length':
|
|
forEachViewport(function(element) {
|
|
cornerstoneTools.length.activate(element, 1);
|
|
});
|
|
break;
|
|
case 'annotate':
|
|
forEachViewport(function(element) {
|
|
cornerstoneTools.arrowAnnotate.activate(element, 1);
|
|
});
|
|
break;
|
|
case 'angle':
|
|
forEachViewport(function(element) {
|
|
cornerstoneTools.simpleAngle.activate(element, 1);
|
|
});
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
});
|
|
|
|
let exps = _gec('thumb-expertise');
|
|
[].forEach.call(exps,function(el) {
|
|
el.addEventListener('click',function(ev) {
|
|
var exp_id = ev.currentTarget.getAttribute('data-value');
|
|
toggle_expertise(exp_id);
|
|
});
|
|
});
|
|
}
|
|
|
|
function toggle_expertise(exp_id) {
|
|
var mainContent = _gel('mainContent');
|
|
var seriesViewer = _gel('seriesViewer');
|
|
var expertiseViewer = _gel('expertiseViewer');
|
|
var container = _gel('expertiseViewerContainer');
|
|
if(expertiseViewer.style.display=='none' || expertiseViewer.exp_id!=exp_id) {
|
|
container.innerHTML = '';
|
|
console.log(data_exp[exp_id]);
|
|
container.appendChild(expertise_template.cloneNode(true));
|
|
container.getElementsByClassName('expertise-content')[0].innerHTML = data_exp[exp_id].expertise;
|
|
container.getElementsByClassName('studyNumber')[0].innerHTML = data_exp[exp_id].study_no;
|
|
container.getElementsByClassName('expertise-study-description')[0].innerHTML = data_exp[exp_id].study_description;
|
|
container.getElementsByClassName('expertise-study-datetime')[0].innerHTML = data_exp[exp_id].study_datetime;
|
|
container.getElementsByClassName('expertise-accession-number')[0].innerHTML = data_exp[exp_id].accession_no;
|
|
container.getElementsByClassName('ordering-physician')[0].innerHTML = data_exp[exp_id].ordering_physician;
|
|
container.getElementsByClassName('radiologist')[0].innerHTML = data_exp[exp_id].radiologist;
|
|
container.getElementsByClassName('expertise-dttm')[0].innerHTML = data_exp[exp_id].expertise_dttm;
|
|
if(mainContent.style.display!='none') {
|
|
lastViewer = mainContent;
|
|
} else if(seriesViewer.style.display!='none') {
|
|
lastViewer = seriesViewer;
|
|
}
|
|
// lastViewer.style.display = 'none';
|
|
expertiseViewer.style.display = '';
|
|
expertiseViewer.exp_id = exp_id;
|
|
|
|
} else {
|
|
expertiseViewer.style.display = 'none';
|
|
// lastViewer.style.display = '';
|
|
}
|
|
resizeMain();
|
|
}
|
|
|
|
function reset_layout_chooser() {
|
|
var lc = _gel('layoutChooser').getElementsByTagName('table')[0];
|
|
for(var i=0;i<=3;i++) {
|
|
for(var j=0;j<=3;j++) {
|
|
lc.rows[i].cells[j].className = '';
|
|
}
|
|
}
|
|
lc.rows[0].cells[0].className = 'hover';
|
|
}
|
|
|
|
function init_final() {
|
|
|
|
init_thumbnail_drag();
|
|
|
|
// Call resize main on window resize
|
|
window.addEventListener('resize',function() {
|
|
resizeMain();
|
|
});
|
|
|
|
// Prevent scrolling on iOS
|
|
document.body.addEventListener('touchmove', function(e) {
|
|
e.preventDefault();
|
|
});
|
|
}
|
|
|
|
function forEachViewport(callback) {
|
|
var elements = _gec('imageViewerViewport');
|
|
[].forEach.call(elements,function(element, index) {
|
|
try {
|
|
callback(element,index);
|
|
} catch(e) {
|
|
}
|
|
});
|
|
}
|
|
|
|
// Disable all tools
|
|
function disableAllTools() {
|
|
let buttons = _gec('toolbarSectionTools')[0].getElementsByClassName('imageViewerTool');
|
|
[].forEach.call(buttons,function(el) {
|
|
el.classList.remove('active');
|
|
});
|
|
forEachViewport(function(element) {
|
|
cornerstoneTools.wwwc.disable(element);
|
|
cornerstoneTools.pan.activate(element, 2); // 2 is middle mouse button
|
|
cornerstoneTools.zoom.activate(element, 4); // 4 is right mouse button
|
|
cornerstoneTools.probe.deactivate(element, 1);
|
|
cornerstoneTools.length.deactivate(element, 1);
|
|
cornerstoneTools.arrowAnnotate.deactivate(element, 1);
|
|
cornerstoneTools.simpleAngle.deactivate(element, 1);
|
|
cornerstoneTools.ellipticalRoi.deactivate(element, 1);
|
|
cornerstoneTools.rectangleRoi.deactivate(element, 1);
|
|
cornerstoneTools.stackScroll.deactivate(element, 1);
|
|
cornerstoneTools.wwwcTouchDrag.deactivate(element);
|
|
cornerstoneTools.zoomTouchDrag.deactivate(element);
|
|
cornerstoneTools.panTouchDrag.deactivate(element);
|
|
cornerstoneTools.stackScrollTouchDrag.deactivate(element);
|
|
});
|
|
}
|
|
|
|
function setupViewerViewportOverlay(viewport,data) {
|
|
var topleft = viewport.viewportcontainer.getElementsByClassName('topleft')[0].getElementsByTagName('div');
|
|
var topright = viewport.viewportcontainer.getElementsByClassName('topright')[0].getElementsByTagName('div');
|
|
var bottomleft = viewport.viewportcontainer.getElementsByClassName('bottomleft')[0].getElementsByTagName('div');
|
|
var bottomright = viewport.viewportcontainer.getElementsByClassName('bottomright')[0].getElementsByTagName('div');
|
|
var studynumber = viewport.viewportcontainer.getElementsByClassName('viewportStudyNumber')[0].getElementsByTagName('div');
|
|
|
|
// imageSlider
|
|
var slider = viewport.viewportcontainer.getElementsByClassName('imageSlider')[0];
|
|
|
|
|
|
var toolData = cornerstoneTools.getToolState(viewport, 'stack');
|
|
if(toolData === undefined || toolData.data === undefined || toolData.data.length === 0) {
|
|
return;
|
|
}
|
|
var stack = toolData.data[0];
|
|
slider.max = stack.imageIds.length-1;
|
|
slider.value = 0;
|
|
slider.oldValue = 0;
|
|
slider.style.width = parseInt(slider.parentNode.offsetHeight)+'px';
|
|
studynumber[0].innerHTML = stack.studyNo;
|
|
topleft[0].innerHTML = data.study.patient_name.toUpperCase();
|
|
topleft[1].innerHTML = data.study.patient_mrn.toUpperCase();
|
|
topleft[2].innerHTML = (data.study.patient_sex.toUpperCase()=='M'?'MALE':'FEMALE') + ', '+stack.patientAge;
|
|
topright[0].innerHTML = stack.studyDescription.toUpperCase();
|
|
topright[1].innerHTML = stack.accessionNumber;
|
|
topright[2].innerHTML = stack.studyDateTime; //data.study.study_datetime.substring(0,14).replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/g,'$1-$2-$3 $4:$5');
|
|
|
|
function onslider(e) {
|
|
// e.stopPropagation();
|
|
// e.preventDefault();
|
|
var idx = e.target.valueAsNumber;
|
|
var toolData = cornerstoneTools.getToolState(viewport, 'stack');
|
|
if(toolData === undefined || toolData.data === undefined || toolData.data.length === 0) {
|
|
return;
|
|
}
|
|
var stack = toolData.data[0];
|
|
var imageId = stack.imageIds[idx];
|
|
cornerstoneTools.scrollToIndex(viewport, idx);
|
|
}
|
|
|
|
slider.addEventListener("input",onslider);
|
|
// slider.addEventListener("change",onslider);
|
|
|
|
// On new image (displayed?)
|
|
function onnewimage(e) {
|
|
// If we are currently playing a clip then update the FPS
|
|
// Get the state of the 'playClip tool'
|
|
// var playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
|
|
|
|
// // If playing a clip ...
|
|
// if (playClipToolData !== undefined && playClipToolData.data.length > 0 && playClipToolData.data[0].intervalId !== undefined && event_data.frameRate !== undefined) {
|
|
|
|
// // Update FPS
|
|
// $(bottomLeft[0]).text("FPS: " + Math.round(event_data.frameRate));
|
|
// console.log('frameRate: ' + e.frameRate);
|
|
|
|
// } else {
|
|
// // Set FPS empty if not playing a clip
|
|
// if ($(bottomLeft[0]).text().length > 0) {
|
|
// $(bottomLeft[0]).text("");
|
|
// }
|
|
// }
|
|
|
|
// console.log(stack);
|
|
// Update Image number overlay
|
|
|
|
// var metadata = cornerstone.MetaDataProvider('imagePlaneModule',stack.imageIds[stack.currentImageIdIndex]);
|
|
|
|
var imgplane = cornerstone.metaData.get('imagePlaneModule', stack.imageIds[stack.currentImageIdIndex]);
|
|
bottomleft[1].innerHTML = "IMG " + (stack.currentImageIdIndex + 1) + "/" + stack.imageIds.length;
|
|
bottomleft[2].innerHTML = '';
|
|
if(imgplane.sliceThickness) {
|
|
bottomleft[2].innerHTML += "THICKNESS " + imgplane.sliceThickness + " mm ";
|
|
}
|
|
if(imgplane.spacingBetweenSlices) {
|
|
bottomleft[2].innerHTML += "SPACING " + imgplane.spacingBetweenSlices + " mm";
|
|
}
|
|
bottomleft[3].innerHTML = stack.seriesDescription.toUpperCase();
|
|
// console.log(e);
|
|
|
|
}
|
|
|
|
viewport.addEventListener("cornerstonenewimage", onnewimage);
|
|
|
|
function onimagerendered(e) {
|
|
// Set zoom overlay text
|
|
bottomright[0].innerHTML = "ZOOM : " + e.detail.viewport.scale.toFixed(2);
|
|
// Set WW/WL overlay text
|
|
bottomright[1].innerHTML = "W " + Math.round(e.detail.viewport.voi.windowWidth) + " L " + Math.round(e.detail.viewport.voi.windowCenter);
|
|
}
|
|
// Add a CornerstoneImageRendered event listener on the 'element' (viewer) (?)
|
|
viewport.addEventListener("cornerstoneimagerendered", onimagerendered);
|
|
|
|
}
|
|
|
|
function getActiveViewportElement() {
|
|
if(viewport_active) {
|
|
return viewport_active.getElementsByClassName('imageViewerViewport')[0];
|
|
}
|
|
return null;
|
|
}
|
|
|
|
var resetViewportWithElement = function (element) {
|
|
var enabledElement = cornerstone.getEnabledElement(element);
|
|
|
|
if (enabledElement.fitToWindow === false) {
|
|
var imageId = enabledElement.image.imageId;
|
|
var instance = cornerstone.metaData.get('instance', imageId);
|
|
enabledElement.viewport = cornerstone.getDefaultViewport(enabledElement.canvas, enabledElement.image);
|
|
var instanceClassDefaultViewport = getInstanceClassDefaultViewport(instance, enabledElement, imageId);
|
|
cornerstone.setViewport(element, instanceClassDefaultViewport);
|
|
} else {
|
|
cornerstone.reset(element);
|
|
}
|
|
};
|
|
|
|
var resetViewport = function () {
|
|
if(seriesViewer&&seriesViewer.style.display=='none') {
|
|
var viewportIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
|
|
if (viewportIndex === null) {
|
|
resetViewportWithElement(getActiveViewportElement());
|
|
} else if (viewportIndex === 'all') {
|
|
_gec('imageViewerViewport').each(function (index, element) {
|
|
resetViewportWithElement(element);
|
|
});
|
|
} else {
|
|
resetViewportWithElement($('.imageViewerViewport').get(viewportIndex));
|
|
}
|
|
} else {
|
|
seriesViewer.viewports.forEach(function(vp,idx) {
|
|
var el = vp.getElementsByClassName('imageViewerViewport')[0];
|
|
resetViewportWithElement(el);
|
|
});
|
|
}
|
|
};
|
|
|
|
var clearTools = function () {
|
|
var element = getActiveViewportElement();
|
|
var toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;
|
|
toolStateManager.clear(element);
|
|
cornerstone.updateImage(element);
|
|
};
|
|
|
|
function toggleViewSeries() {
|
|
var mainContent = _gel('mainContent');
|
|
var seriesViewer = _gel('seriesViewer');
|
|
var button = _gel('viewSeriesButton');
|
|
if(mainContent.style.display=='none') { /// off
|
|
seriesViewer.style.display = 'none';
|
|
mainContent.style.display = '';
|
|
button.classList.remove('active');
|
|
_gel('stackScroll').classList.remove('disabled');
|
|
_gel('length').classList.remove('disabled');
|
|
_gel('annotate').classList.remove('disabled');
|
|
_gel('angle').classList.remove('disabled');
|
|
_gel('clearTools').classList.remove('disabled');
|
|
_gel('layout').classList.remove('disabled');
|
|
_gel('toggleMore').classList.remove('disabled');
|
|
_gel('zoom').classList.remove('active');
|
|
disableAllTools();
|
|
forEachViewport(function(element) {
|
|
cornerstoneTools.wwwc.activate(element, 1);
|
|
cornerstoneTools.wwwcTouchDrag.activate(element);
|
|
});
|
|
_gel('wwwc').classList.add('active');
|
|
} else { /// on
|
|
mainContent.style.display = 'none';
|
|
seriesViewer.style.display = '';
|
|
button.classList.add('active');
|
|
var viewport = getActiveViewportElement();
|
|
var toolData = cornerstoneTools.getToolState(viewport, 'stack');
|
|
if(toolData === undefined || toolData.data === undefined || toolData.data.length === 0) {
|
|
return;
|
|
}
|
|
var stack = toolData.data[0];
|
|
disableAllTools();
|
|
useSeries(stack);
|
|
_gel('stackScroll').classList.add('disabled');
|
|
_gel('length').classList.add('disabled');
|
|
_gel('annotate').classList.add('disabled');
|
|
_gel('angle').classList.add('disabled');
|
|
_gel('clearTools').classList.add('disabled');
|
|
_gel('layout').classList.add('disabled');
|
|
_gel('toggleMore').classList.add('disabled');
|
|
// _gel('zoom').classList.add('active');
|
|
_gel('wwwc').classList.add('active');
|
|
}
|
|
displayNextPrevButton();
|
|
|
|
}
|
|
|
|
function useSeries(stack) {
|
|
var container = _gel('seriesViewerContainer');
|
|
_rmc(container);
|
|
var image_count = stack.imageIds.length;
|
|
seriesViewer.viewports = [];
|
|
seriesViewer.stack = stack;
|
|
|
|
var row_top = 1;
|
|
var row_middle = 0;
|
|
var row_bottom = 0;
|
|
|
|
var y = Math.ceil(image_count/4);
|
|
var x = 4;
|
|
if(image_count==1) {
|
|
x = 1;
|
|
y = 1;
|
|
} else if(image_count==2) {
|
|
x = 2;
|
|
y = 1;
|
|
} else if(image_count<=4) {
|
|
x = 2;
|
|
y = 2;
|
|
} else if(image_count<=6) {
|
|
x = 3;
|
|
y = 2;
|
|
} else if(image_count<=9) {
|
|
x = 3;
|
|
y = 3;
|
|
}
|
|
|
|
var h = '240px';
|
|
if(image_count<=9) {
|
|
h = (100/y)+'%';
|
|
}
|
|
var w = (100/x)+'%';
|
|
|
|
if(y>2) {
|
|
row_bottom = 1;
|
|
row_middle = y-2;
|
|
} else if(y==2) {
|
|
row_bottom = 1;
|
|
}
|
|
|
|
if(image_count<=9) {
|
|
container.style.height = '100%';
|
|
} else {
|
|
container.style.height = (240*y)+'px';
|
|
}
|
|
|
|
/// add top
|
|
for(var j=1;j<=x;j++) {
|
|
var vp = viewport_multi_template.cloneNode(true);
|
|
vp.style.height = h;
|
|
vp.style.width = w;
|
|
vp.classList.add('top');
|
|
seriesViewer.viewports.push(container.appendChild(vp));
|
|
}
|
|
/// add middle
|
|
for(var i=1;i<=row_middle;i++) {
|
|
for(var j=1;j<=x;j++) {
|
|
var vp = viewport_multi_template.cloneNode(true);
|
|
vp.style.height = h;
|
|
vp.style.width = w;
|
|
vp.classList.add('middle');
|
|
seriesViewer.viewports.push(container.appendChild(vp));
|
|
}
|
|
}
|
|
/// add bottom
|
|
if(row_bottom==1) {
|
|
for(var j=1;j<=x;j++) {
|
|
var vp = viewport_multi_template.cloneNode(true);
|
|
vp.style.height = h;
|
|
vp.style.width = w;
|
|
vp.classList.add('bottom');
|
|
seriesViewer.viewports.push(container.appendChild(vp));
|
|
}
|
|
}
|
|
|
|
synchronizer_pan_zoom = new cornerstoneTools.Synchronizer("cornerstoneimagerendered", cornerstoneTools.panZoomSynchronizer);
|
|
synchronizer_wwwc = new cornerstoneTools.Synchronizer("cornerstoneimagerendered", cornerstoneTools.wwwcSynchronizer);
|
|
|
|
let n = 0;
|
|
seriesViewer.viewports.map((vp,idx) => {
|
|
n++;
|
|
let imageId = stack.imageIds[idx];
|
|
if(imageId) {
|
|
let topleft = vp.getElementsByClassName('topleft')[0].getElementsByTagName('div');
|
|
topleft[0].innerHTML = n;
|
|
startLoadingHandler(vp.getElementsByClassName('imageViewerViewport')[0]);
|
|
setTimeout(()=>{
|
|
var el = vp.getElementsByClassName('imageViewerViewport')[0];
|
|
vp.seriesIndex = stack.seriesIndex;
|
|
vp.idx = idx;
|
|
cornerstone.enable(el);
|
|
cornerstoneTools.mouseInput.enable(el);
|
|
vp.addEventListener('dblclick',function(ev) {
|
|
toggleViewSeries(null);
|
|
layoutManager.setLayout(1,1);
|
|
useStack("1x1",ev.currentTarget.seriesIndex);
|
|
setTimeout((vp,idx)=> {
|
|
cornerstoneTools.scrollToIndex(vp, idx);
|
|
},1,viewport_active.getElementsByClassName('imageViewerViewport')[0],ev.currentTarget.idx);
|
|
},false);
|
|
cornerstone.loadAndCacheImage(imageId).then(function(image) {
|
|
cornerstone.displayImage(el, image);
|
|
cornerstoneTools.wwwc.activate(el, 1);
|
|
synchronizer_pan_zoom.add(el);
|
|
synchronizer_wwwc.add(el);
|
|
doneLoadingHandler(el);
|
|
});
|
|
},1);
|
|
}
|
|
});
|
|
}
|
|
|
|
function toggle_thumb(hdr_id,d,e) {
|
|
var dv = _gel(hdr_id);
|
|
var study_no = d.getAttribute('data-value');
|
|
dv.classList.toggle('active');
|
|
let accession_no = dv.getAttribute('data-value');
|
|
if(d.classList.contains('current')) data_loaded[accession_no] = true;
|
|
if(!data_loaded[accession_no]) {
|
|
var xmlhttp = new XMLHttpRequest();
|
|
var url = server+'/query.php?method=view&AccessionNumber='+accession_no;
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
var new_data = JSON.parse(this.responseText);
|
|
new_data.study.study_no = study_no;
|
|
load_study(new_data);
|
|
data_loaded[accession_no] = true;
|
|
dv.innerHTML = '';
|
|
|
|
if(new_data.study.expertise) {
|
|
console.log(new_data);
|
|
new_data.study.expertise.forEach(function(exs) {
|
|
exs.study_no = new_data.study.study_no;
|
|
exs.accession_no = new_data.study.accession_no;
|
|
exs.study_datetime = new_data.study.study_datetime.substring(0,14).replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/g,'$1-$2-$3 $4:$5');
|
|
exs.study_description = new_data.study.study_description.toUpperCase();
|
|
var exp_id = uniqid();
|
|
dv.innerHTML += "<div class='expertiseEntry noselect m-t-1 m-b-2' draggable='false'><div class='p-x-1' draggable='false'><div class='thumb-expertise' data-value='"+exp_id+"'>Expertise</div></div></div>";
|
|
data_exp[exp_id] = exs;
|
|
});
|
|
console.log(data_exp);
|
|
|
|
let exps = dv.getElementsByClassName('thumb-expertise');
|
|
[].forEach.call(exps,function(el) {
|
|
el.addEventListener('click',function(ev) {
|
|
var exp_id = ev.currentTarget.getAttribute('data-value');
|
|
toggle_expertise(exp_id);
|
|
});
|
|
});
|
|
}
|
|
|
|
new_data.study.series.map(function(s) {
|
|
var th = thumbnail_template.cloneNode(true);
|
|
th.setAttribute('data-value',s.series_iuid);
|
|
th.setAttribute('id',uniqid());
|
|
// th.getElementsByClassName('imageThumbnailCanvasData')[0].src = 'data:image/jpeg;base64,'+s.thumbnail_base64;
|
|
th.getElementsByClassName('imageThumbnailCanvasData')[0].src = s.thumbnail;
|
|
th.getElementsByClassName('seriesDescription')[0].innerHTML = s.series_description.toUpperCase();
|
|
th.getElementsByClassName('seriesNumber')[0].innerHTML = s.series_number;
|
|
th.getElementsByClassName('numberOfInstances')[0].innerHTML = s.number_of_instances;
|
|
th = dv.appendChild(th);
|
|
th.addEventListener('dragstart',dragstart);
|
|
th.addEventListener('dragend',dragend);
|
|
th.addEventListener('click',function(ev) {
|
|
var mainContent = _gel('mainContent');
|
|
var seriesViewer = _gel('seriesViewer');
|
|
var expertiseViewer = _gel('expertiseViewer');
|
|
var thumb_id = ev.currentTarget.id;
|
|
var series_iuid = _gel(thumb_id).getAttribute('data-value');
|
|
var stack = stack_series_iuid[series_iuid];
|
|
useStack(viewport_active.idx,stack);
|
|
seriesViewer.style.display = 'none';
|
|
// expertiseViewer.style.display = 'none';
|
|
mainContent.style.display = '';
|
|
});
|
|
|
|
|
|
});
|
|
// init_thumbnail_drag();
|
|
}
|
|
};
|
|
xmlhttp.open("GET", url, true);
|
|
xmlhttp.send();
|
|
}
|
|
}
|
|
|
|
function load_study(data) {
|
|
data.study.series.forEach(function(series) {
|
|
var stack = {
|
|
studyDescription: data.study.study_description,
|
|
seriesDescription: series.series_description,
|
|
studyNo: data.study.study_no,
|
|
stackId: series.series_number,
|
|
imageIds: [],
|
|
seriesIndex: seriesIndex,
|
|
accessionNumber: data.study.accession_no,
|
|
studyDateTime: data.study.study_datetime.substring(0,14).replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/g,'$1-$2-$3 $4:$5'),
|
|
patientAge: data.study.patient_age,
|
|
currentImageIdIndex: 0,
|
|
frameRate: series.frameRate
|
|
};
|
|
series.sop_iuids.forEach(function(sop_iuid) {
|
|
var imageId = 'wadouri:'+server+'/wado_proxy.php?requestType=WADO&studyUID='+data.study.study_iuid+'&seriesUID='+series.series_iuid+'&objectUID='+sop_iuid;
|
|
stack.imageIds.push(imageId);
|
|
});
|
|
stack_series_iuid[series.series_iuid] = seriesIndex;
|
|
seriesIndex++;
|
|
layoutManager.stacks.push(stack);
|
|
});
|
|
}
|
|
|
|
var study_list_sortable = [];
|
|
function load_study_list() {
|
|
var tbody = _gel('studyListData');
|
|
tbody.innerHTML = '<tr id="trloading" class="studylistStudy noselect load-study" style="-webkit-user-select: none; -webkit-user-drag: none;">'
|
|
+ '<td colspan="6" style="text-align:center;"">Loading... <i class="fa fa-spin fa-circle-o-notch fa-fw"></i></td>'
|
|
+ '</tr>';
|
|
var xmlhttp = new XMLHttpRequest();
|
|
var url = server+'/query.php?list=1';
|
|
if(qStudyDate0!=''&&qStudyDate1!='') url += '&StudyDate='+qStudyDate0+'-'+qStudyDate1;
|
|
if(qPatientName!='') url += '&PatientName='+encodeURI(qPatientName);
|
|
if(qPatientID!='') url += '&PatientID='+encodeURI(qPatientID);
|
|
if(qAccessionNumber!='') url += '&AccessionNumber='+encodeURI(qAccessionNumber);
|
|
if(qModality!='') url += '&Modality='+encodeURI(qModality);
|
|
if(qStudyDescription!='') url += '&StudyDescription='+encodeURI(qStudyDescription);
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
var studylist = JSON.parse(this.responseText);
|
|
// console.log(studylist);
|
|
study_list_sortable = [];
|
|
for(var key in studylist.studies) {
|
|
study_list_sortable.push([key, studylist.studies[key]]);
|
|
}
|
|
study_list_sortable.sort(function(a,b) {
|
|
return a[0]<b[0];
|
|
});
|
|
render_study_list();
|
|
}
|
|
};
|
|
xmlhttp.open("GET", url, true);
|
|
xmlhttp.send();
|
|
}
|
|
|
|
function render_study_list() {
|
|
var tbody = _gel('studyListData');
|
|
if(study_list_sortable.length==0) {
|
|
tbody.innerHTML = '<tr class="studylistStudy noselect notfound" style="-webkit-user-select: none; -webkit-user-drag: none;">'
|
|
+ '<td colspan="6" style="text-align:center;">No study found</td></tr>';
|
|
} else {
|
|
tbody.innerHTML = '';
|
|
study_list_sortable.forEach(function(v) {
|
|
var tr = studylist_template.cloneNode(true);
|
|
tr.setAttribute('data-value',v[1].accession_no);
|
|
tr.getElementsByClassName('patientName')[0].innerHTML = v[1].patient_name;
|
|
tr.getElementsByClassName('patientId')[0].innerHTML = v[1].patient_mrn;
|
|
tr.getElementsByClassName('accessionNumber')[0].innerHTML = v[1].accession_no;
|
|
tr.getElementsByClassName('studyDate')[0].innerHTML = v[1].study_datetime;
|
|
tr.getElementsByClassName('modalities')[0].innerHTML = v[1].modality;
|
|
tr.getElementsByClassName('studyDescription')[0].innerHTML = v[1].study_description;
|
|
tr = tbody.appendChild(tr);
|
|
tr.addEventListener('click',function(ev) {
|
|
var accession_no = ev.currentTarget.getAttribute('data-value');
|
|
window.location.href = server+'?method=view&AccessionNumber='+accession_no;
|
|
});
|
|
});
|
|
}
|
|
document.getElementsByClassName('studyCount')[0].innerHTML = study_list_sortable.length;
|
|
|
|
}
|
|
|
|
|
|
|
|
function queryDate(selectedDates, dateStr, instance) {
|
|
if(selectedDates[0]) {
|
|
var tzoffset = selectedDates[0].getTimezoneOffset();
|
|
var date0 = (new Date(selectedDates[0].getTime()-tzoffset*60000)).toISOString().split('T')[0].split('-').join('');
|
|
} else date0 = '';
|
|
if(selectedDates[1]) {
|
|
var date1 = (new Date(selectedDates[1].getTime()-tzoffset*60000)).toISOString().split('T')[0].split('-').join('');
|
|
} else date1 = date0;
|
|
let diff = qdiff();
|
|
if(qStudyDate0!=date0 || qStudyDate1!=date1 || diff) {
|
|
qStudyDate0 = date0;
|
|
qStudyDate1 = date1;
|
|
load_study_list();
|
|
}
|
|
}
|
|
|
|
|
|
function remove_fa_sort() {
|
|
var sc = document.getElementsByClassName('sort-dir');
|
|
[].forEach.call(sc,function(el) {
|
|
el.classList.remove('fa-sort-down');
|
|
el.classList.remove('fa-sort-up');
|
|
});
|
|
}
|
|
|
|
function qdiff() {
|
|
let diff = false;
|
|
[].forEach.call(inputfields,function(el) {
|
|
switch(el.id) {
|
|
case 'patientName':
|
|
if(el.value!=qPatientName) diff = true;
|
|
qPatientName = el.value;
|
|
break;
|
|
case 'patientId':
|
|
if(el.value!=qPatientID) diff = true;
|
|
qPatientID = el.value;
|
|
break;
|
|
case 'accessionNumber':
|
|
if(el.value!=qAccessionNumber) diff = true;
|
|
qAccessionNumber = el.value;
|
|
break;
|
|
case 'modality':
|
|
if(el.value!=qModality) diff = true;
|
|
qModality = el.value;
|
|
break;
|
|
case 'studyDescription':
|
|
if(el.value!=qStudyDescription) diff = true;
|
|
qStudyDescription = el.value;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
return diff;
|
|
}
|
|
|
|
function init_study_list() {
|
|
[].forEach.call(inputfields,function(el) {
|
|
if(el.id=='studyDate') {
|
|
flatpickr(el, { mode: 'range', onClose:queryDate });
|
|
} else {
|
|
el.addEventListener('keypress',function(ev) {
|
|
var k = _gkc(ev);
|
|
if(k==13) {
|
|
if(qdiff()) load_study_list();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
[].forEach.call(sc,function(el) {
|
|
el.addEventListener('click',function(ev) {
|
|
switch(ev.currentTarget.id) {
|
|
case '_patientName':
|
|
if(ev.currentTarget.getElementsByTagName('i')[0].classList.contains('fa-sort-up')) {
|
|
remove_fa_sort();
|
|
ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-down');
|
|
study_list_sortable.sort(function(a,b) {
|
|
return a[1].patient_name<b[1].patient_name;
|
|
});
|
|
} else {
|
|
remove_fa_sort();
|
|
ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-up');
|
|
study_list_sortable.sort(function(a,b) {
|
|
return a[1].patient_name>b[1].patient_name;
|
|
});
|
|
}
|
|
render_study_list();
|
|
break;
|
|
case '_patientId':
|
|
if(ev.currentTarget.getElementsByTagName('i')[0].classList.contains('fa-sort-down')) {
|
|
remove_fa_sort();
|
|
ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-up');
|
|
study_list_sortable.sort(function(a,b) {
|
|
return a[1].patient_mrn>b[1].patient_mrn;
|
|
});
|
|
} else {
|
|
remove_fa_sort();
|
|
ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-down');
|
|
study_list_sortable.sort(function(a,b) {
|
|
return a[1].patient_mrn<b[1].patient_mrn;
|
|
});
|
|
}
|
|
render_study_list();
|
|
break;
|
|
case '_accessionNumber':
|
|
if(ev.currentTarget.getElementsByTagName('i')[0].classList.contains('fa-sort-down')) {
|
|
remove_fa_sort();
|
|
ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-up');
|
|
study_list_sortable.sort(function(a,b) {
|
|
return a[1].accession_no>b[1].accession_no;
|
|
});
|
|
} else {
|
|
remove_fa_sort();
|
|
ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-down');
|
|
study_list_sortable.sort(function(a,b) {
|
|
return a[1].accession_no<b[1].accession_no;
|
|
});
|
|
}
|
|
render_study_list();
|
|
break;
|
|
case '_studyDate':
|
|
if(ev.currentTarget.getElementsByTagName('i')[0].classList.contains('fa-sort-down')) {
|
|
remove_fa_sort();
|
|
ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-up');
|
|
study_list_sortable.sort(function(a,b) {
|
|
return a[0]>b[0];
|
|
});
|
|
} else {
|
|
remove_fa_sort();
|
|
ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-down');
|
|
study_list_sortable.sort(function(a,b) {
|
|
return a[0]<b[0];
|
|
});
|
|
}
|
|
render_study_list();
|
|
break;
|
|
case '_modalities':
|
|
if(ev.currentTarget.getElementsByTagName('i')[0].classList.contains('fa-sort-down')) {
|
|
remove_fa_sort();
|
|
ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-up');
|
|
study_list_sortable.sort(function(a,b) {
|
|
return a[1].modality>b[1].modality;
|
|
});
|
|
} else {
|
|
remove_fa_sort();
|
|
ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-down');
|
|
study_list_sortable.sort(function(a,b) {
|
|
return a[1].modality<b[1].modality;
|
|
});
|
|
}
|
|
render_study_list();
|
|
break;
|
|
case '_studyDescription':
|
|
if(ev.currentTarget.getElementsByTagName('i')[0].classList.contains('fa-sort-up')) {
|
|
remove_fa_sort();
|
|
ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-down');
|
|
study_list_sortable.sort(function(a,b) {
|
|
return a[1].study_description<b[1].study_description;
|
|
});
|
|
} else {
|
|
remove_fa_sort();
|
|
ev.currentTarget.getElementsByTagName('i')[0].classList.add('fa-sort-up');
|
|
study_list_sortable.sort(function(a,b) {
|
|
return a[1].study_description>b[1].study_description;
|
|
});
|
|
}
|
|
render_study_list();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function startup() {
|
|
if (cornerstoneTools.loadHandlerManager) {
|
|
cornerstoneTools.loadHandlerManager.setStartLoadHandler(startLoadingHandler);
|
|
cornerstoneTools.loadHandlerManager.setEndLoadHandler(doneLoadingHandler);
|
|
// cornerstoneTools.loadHandlerManager.setErrorLoadingHandler(errorLoadingHandler);
|
|
}
|
|
}
|
|
|
|
var loadHandlerTimeout;
|
|
|
|
var startLoadingHandler = function (el) {
|
|
if(el.loadHandlerTimeout) clearTimeout(el.loadHandlerTimeout);
|
|
el.loadHandlerTimeout = setTimeout(function () {
|
|
// el.parentNode.getElementsByClassName('imageViewerErrorLoadingIndicator')[0].style.display = 'none';
|
|
if(el.getElementsByTagName('canvas')[0]) el.getElementsByTagName('canvas')[0].classList.add('faded');
|
|
el.parentNode.getElementsByClassName('imageViewerLoadingIndicator')[0].style.display = 'block';
|
|
}, 1);
|
|
};
|
|
|
|
var doneLoadingHandler = function (el) {
|
|
if(el.loadHandlerTimeout) clearTimeout(el.loadHandlerTimeout);
|
|
// el.parentNode.getElementsByClassName('imageViewerErrorLoadingIndicator')[0].style.display = 'none';
|
|
if(el.getElementsByTagName('canvas')[0]) el.getElementsByTagName('canvas')[0].classList.remove('faded');
|
|
el.parentNode.getElementsByClassName('imageViewerLoadingIndicator')[0].style.display = 'none';
|
|
};
|