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