Mercurial > hg > orthanc-webviewer
annotate WebApplication/viewer.js @ 75:e15a59a4b4d4
Fix possible deadlock with other plugins in OnChangeCallback()
author | Sebastien Jodogne <s.jodogne@gmail.com> |
---|---|
date | Wed, 23 Sep 2015 13:33:07 +0200 |
parents | 9bb7caee0509 |
children | 46ec13a1177c |
rev | line source |
---|---|
0 | 1 /** |
2 * Orthanc - A Lightweight, RESTful DICOM Store | |
3 * Copyright (C) 2012-2015 Sebastien Jodogne, Medical Physics | |
4 * Department, University Hospital of Liege, Belgium | |
5 * | |
6 * This program is free software: you can redistribute it and/or | |
7 * modify it under the terms of the GNU Affero General Public License | |
8 * as published by the Free Software Foundation, either version 3 of | |
9 * the License, or (at your option) any later version. | |
10 * | |
11 * This program is distributed in the hope that it will be useful, but | |
12 * WITHOUT ANY WARRANTY; without even the implied warranty of | |
13 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU | |
14 * Affero General Public License for more details. | |
15 * | |
16 * You should have received a copy of the GNU Affero General Public License | |
17 * along with this program. If not, see <http://www.gnu.org/licenses/>. | |
18 **/ | |
19 | |
20 | |
21 var compression = 'jpeg95'; | |
22 | |
23 | |
24 // Prevent the access to IE | |
25 if(navigator.appVersion.indexOf("MSIE ") != -1) | |
26 { | |
27 alert("Please use Mozilla Firefox or Google Chrome. Microsoft Internet Explorer is not supported."); | |
28 } | |
29 | |
30 | |
31 function ResizeCornerstone() | |
32 { | |
33 $('#dicomImage').height($(window).height() - $('#slider').parent().height()); | |
34 var element = $('#dicomImage').get(0); | |
35 cornerstone.resize(element, true); | |
36 } | |
37 | |
38 | |
39 function SetWindowing(center, width) | |
40 { | |
41 var element = $('#dicomImage').get(0); | |
42 var viewport = cornerstone.getViewport(element); | |
43 viewport.voi.windowCenter = center; | |
44 viewport.voi.windowWidth = width; | |
45 cornerstone.setViewport(element, viewport); | |
46 UpdateViewportInformation(); | |
47 } | |
48 | |
49 | |
50 function SetFullWindowing() | |
51 { | |
52 var element = $('#dicomImage').get(0); | |
53 var viewport = cornerstone.getViewport(element); | |
54 var image = cornerstone.getEnabledElement(element).image; | |
55 | |
56 if (image.color) { | |
57 // Ignore color images | |
58 return; | |
59 } | |
60 | |
61 var minValue = image.minPixelValue; | |
62 var maxValue = image.maxPixelValue; | |
63 if (minValue == undefined || | |
64 maxValue == undefined || | |
65 minValue == maxValue) { | |
66 return; | |
67 } | |
68 | |
69 if (image.slope != undefined && | |
70 image.intercept != undefined) { | |
71 minValue = minValue * image.slope + image.intercept; | |
72 maxValue = maxValue * image.slope + image.intercept; | |
73 } | |
74 | |
75 viewport.voi.windowCenter = (minValue + maxValue) / 2.0; | |
76 viewport.voi.windowWidth = (maxValue - minValue) / 2.0; | |
77 cornerstone.setViewport(element, viewport); | |
78 UpdateViewportInformation(); | |
79 } | |
80 | |
81 | |
82 function SetDefaultWindowing() | |
83 { | |
84 var element = $('#dicomImage').get(0); | |
85 var viewport = cornerstone.getViewport(element); | |
86 var image = cornerstone.getEnabledElement(element).image; | |
87 | |
88 viewport.voi.windowCenter = image.windowCenter; | |
89 viewport.voi.windowWidth = image.windowWidth; | |
90 cornerstone.setViewport(element, viewport); | |
91 UpdateViewportInformation(); | |
92 } | |
93 | |
94 | |
95 function SetBoneWindowing() | |
96 { | |
97 SetWindowing(300, 2000); | |
98 } | |
99 | |
100 | |
101 function SetLungWindowing() | |
102 { | |
103 SetWindowing(-600, 1600); | |
104 } | |
105 | |
106 | |
107 function UpdateViewportInformation() | |
108 { | |
109 var element = $('#dicomImage').get(0); | |
110 var viewport = cornerstone.getViewport(element); | |
111 | |
112 $('#bottomleft').text('WW/WL:' + Math.round(viewport.voi.windowWidth) + '/' + Math.round(viewport.voi.windowCenter)); | |
113 $('#bottomright').text('Zoom: ' + viewport.scale.toFixed(2) + 'x'); | |
114 } | |
115 | |
116 | |
117 function ToggleSeriesInformation() | |
118 { | |
119 $('#topright').toggle(); | |
120 } | |
121 | |
122 | |
123 function ToggleInterpolation() | |
124 { | |
125 var element = $('#dicomImage').get(0); | |
126 var viewport = cornerstone.getViewport(element); | |
127 if (viewport.pixelReplication === true) { | |
128 viewport.pixelReplication = false; | |
129 } else { | |
130 viewport.pixelReplication = true; | |
131 } | |
132 cornerstone.setViewport(element, viewport); | |
133 } | |
134 | |
135 | |
136 function ToggleInversion() | |
137 { | |
138 var element = $('#dicomImage').get(0); | |
139 var viewport = cornerstone.getViewport(element); | |
140 if (viewport.invert === true) { | |
141 viewport.invert = false; | |
142 } else { | |
143 viewport.invert = true; | |
144 } | |
145 cornerstone.setViewport(element, viewport); | |
146 } | |
147 | |
148 | |
149 function DownloadInstance(instance) | |
150 { | |
151 // http://stackoverflow.com/a/3749395/881731 | |
152 var hiddenIFrameID = 'hiddenDownloader', | |
153 iframe = document.getElementById(hiddenIFrameID); | |
154 if (iframe === null) { | |
155 iframe = document.createElement('iframe'); | |
156 iframe.id = hiddenIFrameID; | |
157 iframe.style.display = 'none'; | |
158 document.body.appendChild(iframe); | |
159 } | |
160 iframe.src = '../../instances/' + instance + '/file'; | |
161 } | |
162 | |
163 | |
164 function AdjustZoom() | |
165 { | |
166 var element = $('#dicomImage').get(0); | |
167 cornerstone.fitToWindow(element); | |
168 } | |
169 | |
170 | |
171 function ZoomIn() | |
172 { | |
173 var element = $('#dicomImage').get(0); | |
174 var viewport = cornerstone.getViewport(element); | |
175 viewport.scale /= 0.5; | |
176 cornerstone.setViewport(element, viewport); | |
177 UpdateViewportInformation(); | |
178 } | |
179 | |
180 | |
181 function ZoomOut() | |
182 { | |
183 var element = $('#dicomImage').get(0); | |
184 var viewport = cornerstone.getViewport(element); | |
185 viewport.scale *= 0.5; | |
186 cornerstone.setViewport(element, viewport); | |
187 UpdateViewportInformation(); | |
188 } | |
189 | |
190 | |
191 | |
192 (function (cornerstone) { | |
193 'use strict'; | |
194 | |
195 function PrintRange(pixels) | |
196 { | |
197 var a = Infinity; | |
198 var b = -Infinity; | |
199 | |
200 for (var i = 0, length = pixels.length; i < length; i++) { | |
201 if (pixels[i] < a) | |
202 a = pixels[i]; | |
203 if (pixels[i] > b) | |
204 b = pixels[i]; | |
205 } | |
206 | |
207 console.log(a + ' ' + b); | |
208 } | |
209 | |
210 function ChangeDynamics(pixels, source1, target1, source2, target2) | |
211 { | |
212 var scale = (target2 - target1) / (source2 - source1); | |
213 var offset = (target1) - scale * source1; | |
214 | |
215 for (var i = 0, length = pixels.length; i < length; i++) { | |
216 pixels[i] = scale * pixels[i] + offset; | |
217 } | |
218 } | |
219 | |
220 | |
221 function getPixelDataDeflate(image) { | |
222 // Decompresses the base64 buffer that was compressed with Deflate | |
223 var s = pako.inflate(window.atob(image.Orthanc.PixelData)); | |
224 var pixels = null; | |
225 | |
226 if (image.color) { | |
227 var buf = new ArrayBuffer(s.length / 3 * 4); // RGB32 | |
228 pixels = new Uint8Array(buf); | |
229 var index = 0; | |
230 for (var i = 0, length = s.length; i < length; i += 3) { | |
231 pixels[index++] = s[i]; | |
232 pixels[index++] = s[i + 1]; | |
233 pixels[index++] = s[i + 2]; | |
234 pixels[index++] = 255; // Alpha channel | |
235 } | |
236 } else { | |
237 var buf = new ArrayBuffer(s.length * 2); // int16_t | |
238 pixels = new Int16Array(buf); | |
239 var index = 0; | |
240 for (var i = 0, length = s.length; i < length; i += 2) { | |
241 var lower = s[i]; | |
242 var upper = s[i + 1]; | |
243 pixels[index] = lower + upper * 256; | |
244 index++; | |
245 } | |
246 } | |
247 | |
248 return pixels; | |
249 } | |
250 | |
251 | |
252 // http://stackoverflow.com/a/11058858/881731 | |
253 function str2ab(str) { | |
254 var buf = new ArrayBuffer(str.length); | |
255 var pixels = new Uint8Array(buf); | |
256 for (var i = 0, strLen=str.length; i<strLen; i++) { | |
257 pixels[i] = str.charCodeAt(i); | |
258 } | |
259 return pixels; | |
260 } | |
261 | |
262 function getPixelDataJpeg(image) { | |
263 var jpegReader = new JpegImage(); | |
264 var jpeg = str2ab(window.atob(image.Orthanc.PixelData)); | |
265 jpegReader.parse(jpeg); | |
266 var s = jpegReader.getData(image.width, image.height); | |
267 var pixels = null; | |
268 | |
269 if (image.color) { | |
270 var buf = new ArrayBuffer(s.length / 3 * 4); // RGB32 | |
271 pixels = new Uint8Array(buf); | |
272 var index = 0; | |
273 for (var i = 0, length = s.length; i < length; i += 3) { | |
274 pixels[index++] = s[i]; | |
275 pixels[index++] = s[i + 1]; | |
276 pixels[index++] = s[i + 2]; | |
277 pixels[index++] = 255; // Alpha channel | |
278 } | |
279 } else { | |
280 var buf = new ArrayBuffer(s.length * 2); // uint8_t | |
281 pixels = new Int16Array(buf); | |
282 var index = 0; | |
283 for (var i = 0, length = s.length; i < length; i++) { | |
284 pixels[index] = s[i]; | |
285 index++; | |
286 } | |
287 | |
288 if (image.Orthanc.Stretched) { | |
289 ChangeDynamics(pixels, 0, image.Orthanc.StretchLow, 255, image.Orthanc.StretchHigh); | |
290 } | |
291 } | |
292 | |
293 return pixels; | |
294 } | |
295 | |
296 | |
297 function getOrthancImage(imageId) { | |
298 var result = null; | |
299 | |
300 $.ajax({ | |
301 type: 'GET', | |
302 url: '../instances/' + compression + '-' + imageId, | |
303 dataType: 'json', | |
304 cache: true, | |
305 async: false, | |
306 success: function(image) { | |
307 image.imageId = imageId; | |
308 if (image.color) | |
309 image.render = cornerstone.renderColorImage; | |
310 else | |
311 image.render = cornerstone.renderGrayscaleImage; | |
312 | |
313 image.getPixelData = function() { | |
314 if (image.Orthanc.Compression == 'Deflate') | |
315 return getPixelDataDeflate(this); | |
316 | |
317 if (image.Orthanc.Compression == 'Jpeg') | |
318 return getPixelDataJpeg(this); | |
319 | |
320 // Unknown compression | |
321 return null; | |
322 } | |
323 | |
324 result = image; | |
325 }, | |
326 error: function() { | |
327 return null; | |
328 } | |
329 }); | |
330 | |
331 var deferred = $.Deferred(); | |
332 deferred.resolve(result); | |
333 return deferred; | |
334 } | |
335 | |
336 // register our imageLoader plugin with cornerstone | |
337 cornerstone.registerImageLoader('', getOrthancImage); | |
338 | |
339 }(cornerstone)); | |
340 | |
341 | |
342 $(document).ready(function() { | |
343 $('#open-toolbar').button({ | |
344 icons: { primary: 'ui-icon-custom-orthanc' }, | |
345 text: false | |
346 }); | |
347 | |
2
c919d488471f
throbber to reflect the receiving of instances
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
0
diff
changeset
|
348 $('#unstable').tooltip(); |
c919d488471f
throbber to reflect the receiving of instances
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
0
diff
changeset
|
349 |
0 | 350 var series = window.url('?series', window.location.search); |
351 if (series == null) | |
352 return; | |
353 | |
354 console.log('Displaying series: ' + series); | |
355 var instances = [ ]; | |
356 | |
357 $.ajax({ | |
358 type: 'GET', | |
359 url: '../series/' + series, | |
360 dataType: 'json', | |
361 cache: false, | |
362 async: false, | |
363 success: function(volume) { | |
364 if (volume.SortedInstances.length != 0) { | |
365 instances = volume.SortedInstances; | |
71
9bb7caee0509
Fix for old versions of jQuery
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
19
diff
changeset
|
366 $('#topright').html(volume.PatientID + '<br/>' + |
9bb7caee0509
Fix for old versions of jQuery
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
19
diff
changeset
|
367 volume.PatientName + '<br/>' + |
9bb7caee0509
Fix for old versions of jQuery
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
19
diff
changeset
|
368 volume.StudyDescription + '<br/>' + |
9bb7caee0509
Fix for old versions of jQuery
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
19
diff
changeset
|
369 volume.SeriesDescription + '<br/>'); |
0 | 370 } |
371 } | |
372 }); | |
373 | |
374 if (instances.length == 0) | |
375 { | |
376 console.log('No image in this series'); | |
377 return; | |
378 } | |
379 | |
380 | |
2
c919d488471f
throbber to reflect the receiving of instances
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
0
diff
changeset
|
381 $.ajax({ |
c919d488471f
throbber to reflect the receiving of instances
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
0
diff
changeset
|
382 type: 'GET', |
19 | 383 url: '../is-stable-series/' + series, |
2
c919d488471f
throbber to reflect the receiving of instances
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
0
diff
changeset
|
384 dataType: 'json', |
c919d488471f
throbber to reflect the receiving of instances
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
0
diff
changeset
|
385 cache: false, |
c919d488471f
throbber to reflect the receiving of instances
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
0
diff
changeset
|
386 async: true, |
19 | 387 success: function(stable) { |
388 if (!stable) { | |
2
c919d488471f
throbber to reflect the receiving of instances
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
0
diff
changeset
|
389 $('#unstable').show(); |
c919d488471f
throbber to reflect the receiving of instances
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
0
diff
changeset
|
390 } |
c919d488471f
throbber to reflect the receiving of instances
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
0
diff
changeset
|
391 } |
c919d488471f
throbber to reflect the receiving of instances
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
0
diff
changeset
|
392 }); |
c919d488471f
throbber to reflect the receiving of instances
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
0
diff
changeset
|
393 |
c919d488471f
throbber to reflect the receiving of instances
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
0
diff
changeset
|
394 |
0 | 395 var currentImageIndex = 0; |
396 | |
397 // updates the image display | |
398 function updateTheImage(imageIndex) { | |
399 return cornerstone.loadAndCacheImage(instances[imageIndex]).then(function(image) { | |
400 currentImageIndex = imageIndex; | |
401 var viewport = cornerstone.getViewport(element); | |
402 cornerstone.displayImage(element, image, viewport); | |
403 }); | |
404 } | |
405 | |
406 // image enable the element | |
407 var element = $('#dicomImage').get(0); | |
408 cornerstone.enable(element); | |
409 | |
410 // set event handlers | |
411 /*function onImageRendered(e, eventData) { | |
412 $('#topright').text('Render Time:' + eventData.renderTimeInMs + ' ms'); | |
413 } | |
414 $(element).on('CornerstoneImageRendered', onImageRendered);*/ | |
415 | |
416 // load and display the image | |
417 var imagePromise = updateTheImage(0); | |
418 | |
419 // add handlers for mouse events once the image is loaded. | |
420 imagePromise.then(function() { | |
421 viewport = cornerstone.getViewport(element); | |
422 UpdateViewportInformation(); | |
423 | |
424 // add event handlers to pan image on mouse move | |
425 $('#dicomImage').mousedown(function (e) { | |
426 var lastX = e.pageX; | |
427 var lastY = e.pageY; | |
428 var mouseButton = e.which; | |
429 | |
430 $(toolbar).hide(); | |
431 | |
432 $(document).mousemove(function (e) { | |
433 var deltaX = e.pageX - lastX, | |
434 deltaY = e.pageY - lastY; | |
435 lastX = e.pageX; | |
436 lastY = e.pageY; | |
437 | |
438 if (mouseButton == 1) { | |
439 var viewport = cornerstone.getViewport(element); | |
440 viewport.voi.windowWidth += (deltaX / viewport.scale); | |
441 viewport.voi.windowCenter += (deltaY / viewport.scale); | |
442 cornerstone.setViewport(element, viewport); | |
443 UpdateViewportInformation(); | |
444 } | |
445 else if (mouseButton == 2) { | |
446 var viewport = cornerstone.getViewport(element); | |
447 viewport.translation.x += (deltaX / viewport.scale); | |
448 viewport.translation.y += (deltaY / viewport.scale); | |
449 cornerstone.setViewport(element, viewport); | |
450 } | |
451 else if (mouseButton == 3) { | |
452 var viewport = cornerstone.getViewport(element); | |
453 viewport.scale += (deltaY / 100); | |
454 cornerstone.setViewport(element, viewport); | |
455 UpdateViewportInformation(); | |
456 } | |
457 }); | |
458 | |
459 $(document).mouseup(function (e) { | |
460 $(document).unbind('mousemove'); | |
461 $(document).unbind('mouseup'); | |
462 }); | |
463 }); | |
464 | |
465 $('#dicomImage').on('mousewheel DOMMouseScroll', function (e) { | |
466 // Firefox e.originalEvent.detail > 0 scroll back, < 0 scroll forward | |
467 // chrome/safari e.originalEvent.wheelDelta < 0 scroll back, > 0 scroll forward | |
468 if (e.originalEvent.wheelDelta < 0 || e.originalEvent.detail > 0) { | |
469 currentImageIndex ++; | |
470 if (currentImageIndex >= instances.length) { | |
471 currentImageIndex = instances.length - 1; | |
472 } | |
473 } else { | |
474 currentImageIndex --; | |
475 if (currentImageIndex < 0) { | |
476 currentImageIndex = 0; | |
477 } | |
478 } | |
479 | |
480 updateTheImage(currentImageIndex); | |
481 $('#slider').slider("option", "value", currentImageIndex); | |
482 | |
483 //prevent page fom scrolling | |
484 return false; | |
485 }); | |
486 }); | |
487 | |
488 | |
489 $('#slider').slider({ | |
490 min: 0, | |
491 max: instances.length - 1, | |
492 slide: function(event, ui) { | |
493 updateTheImage(ui.value); | |
494 } | |
495 }); | |
496 | |
497 var toolbar = $.jsPanel({ | |
498 position: { top: 50, left: 10 }, | |
499 size: { width: 155, height: 200 }, | |
500 content: $('#toolbar-content').clone().show(), | |
501 controls: { buttons: 'none' }, | |
502 title: '<a target="_blank" href="http://www.orthanc-server.com/"><img src="images/orthanc-logo.png" /></a>' | |
503 }); | |
504 | |
505 $('#open-toolbar').click(function() { | |
506 toolbar.toggle(); | |
507 }); | |
508 | |
509 $(toolbar).hide(); | |
510 | |
511 $('.toolbar-view', toolbar).buttonset() | |
512 .children().first().button({ | |
513 icons: { primary: 'ui-icon-info' }, | |
514 text: false | |
515 }).click(ToggleSeriesInformation).next().button({ | |
516 icons: { primary: 'ui-icon-custom-inversion' }, | |
517 text: false | |
518 }).click(ToggleInversion).next().button({ | |
519 icons: { primary: 'ui-icon-custom-interpolation' }, | |
520 text: false | |
521 }).click(ToggleInterpolation).next().button({ | |
522 icons: { primary: 'ui-icon-circle-triangle-s' }, | |
523 text: false | |
524 }).click(function() { | |
525 DownloadInstance(instances[currentImageIndex]); | |
526 }); | |
527 | |
528 $('.toolbar-zoom', toolbar).buttonset() | |
529 .children().first().button({ | |
530 icons: { primary: 'ui-icon-image' }, | |
531 text: false | |
532 }).click(AdjustZoom).next().button({ | |
533 icons: { primary: 'ui-icon-zoomin' }, | |
534 text: false | |
535 }).click(ZoomIn).next().button({ | |
536 icons: { primary: 'ui-icon-zoomout' }, | |
537 text: false | |
538 }).click(ZoomOut); | |
539 | |
540 $('.toolbar-windowing', toolbar).buttonset() | |
541 .children().first().button({ | |
542 icons: { primary: 'ui-icon-custom-default' }, | |
543 text: false | |
544 }).click(SetDefaultWindowing).next().button({ | |
545 icons: { primary: 'ui-icon-custom-stretch' }, | |
546 text: false | |
547 }).click(SetFullWindowing).next().button({ | |
548 icons: { primary: 'ui-icon-custom-lung' }, | |
549 text: false | |
550 }).click(SetLungWindowing).next().button({ | |
551 icons: { primary: 'ui-icon-custom-bone' }, | |
552 text: false | |
553 }).click(SetBoneWindowing); | |
554 | |
555 | |
556 function SetCompression(c) | |
557 { | |
558 compression = c; | |
559 cornerstone.imageCache.purgeCache(); | |
560 updateTheImage(currentImageIndex); | |
561 cornerstone.invalidateImageId(instances[currentImageIndex]); | |
562 } | |
563 | |
564 $('.toolbar-quality', toolbar).buttonset() | |
565 .children().first().button({ | |
566 label: 'L' | |
567 }).click(function() { | |
568 SetCompression('jpeg80'); | |
569 }).next().button({ | |
570 label: 'M' | |
571 }).click(function() { | |
572 SetCompression('jpeg95'); | |
573 }).next().button({ | |
574 label: 'H' | |
575 }).click(function() { | |
576 SetCompression('deflate'); | |
577 }); | |
578 | |
579 | |
580 ResizeCornerstone(); | |
581 $(window).resize(function(e) { | |
582 if (!$(e.target).hasClass('jsPanel')) // Ignore toolbar resizing | |
583 { | |
584 ResizeCornerstone(); | |
585 } | |
586 }); | |
587 | |
588 }); |