Mercurial > hg > orthanc-stone
comparison Applications/StoneWebViewer/WebApplication/app.js @ 1673:dd50f8a1a2be
simplifying Vue.js viewport component
author | Sebastien Jodogne <s.jodogne@gmail.com> |
---|---|
date | Mon, 23 Nov 2020 16:21:33 +0100 |
parents | 570398585b5f |
children | 0621e523b670 |
comparison
equal
deleted
inserted
replaced
1672:570398585b5f | 1673:dd50f8a1a2be |
---|---|
41 } | 41 } |
42 | 42 |
43 | 43 |
44 Vue.component('viewport', { | 44 Vue.component('viewport', { |
45 props: [ 'left', 'top', 'width', 'height', 'canvasId', 'active', 'series', 'viewportIndex', | 45 props: [ 'left', 'top', 'width', 'height', 'canvasId', 'active', 'series', 'viewportIndex', |
46 'quality', 'framesCount', 'currentFrame', 'showInfo' ], | 46 'showInfo' ], |
47 template: '#viewport-template', | 47 template: '#viewport-template', |
48 data: function () { | 48 data: function () { |
49 return { | 49 return { |
50 stone: stone, // To access global object "stone" from "index.html" | 50 stone: stone, // To access global object "stone" from "index.html" |
51 status: 'waiting', | 51 status: 'waiting', |
52 currentFrame: 0, | |
53 framesCount: 0, | |
54 quality: '', | |
52 cineControls: false, | 55 cineControls: false, |
53 cineIncrement: 0, | 56 cineIncrement: 0, |
54 cineFramesPerSecond: 30, | 57 cineFramesPerSecond: 30, |
55 cineTimeoutId: null, | 58 cineTimeoutId: null, |
56 cineLoadingFrame: false | 59 cineLoadingFrame: false |
117 } | 120 } |
118 }, | 121 }, |
119 mounted: function() { | 122 mounted: function() { |
120 var that = this; | 123 var that = this; |
121 | 124 |
125 window.addEventListener('FrameUpdated', function(args) { | |
126 if (args.detail.canvasId == that.canvasId) { | |
127 that.currentFrame = (args.detail.currentFrame + 1); | |
128 that.framesCount = args.detail.framesCount; | |
129 that.quality = args.detail.quality; | |
130 } | |
131 }); | |
132 | |
122 window.addEventListener('SeriesDetailsReady', function(args) { | 133 window.addEventListener('SeriesDetailsReady', function(args) { |
123 var canvasId = args.detail.canvasId; | 134 if (args.detail.canvasId == that.canvasId) { |
124 if (canvasId == that.canvasId) { | 135 that.cineFramesPerSecond = stone.GetCineRate(that.canvasId); |
125 that.cineFramesPerSecond = stone.GetCineRate(canvasId); | |
126 } | 136 } |
127 }); | 137 }); |
128 | 138 |
129 window.addEventListener('PdfLoaded', function(args) { | 139 window.addEventListener('PdfLoaded', function(args) { |
130 var studyInstanceUid = args.detail.studyInstanceUid; | 140 var studyInstanceUid = args.detail.studyInstanceUid; |
266 viewport1Height: '100%', | 276 viewport1Height: '100%', |
267 viewport1Left: '0%', | 277 viewport1Left: '0%', |
268 viewport1Top: '0%', | 278 viewport1Top: '0%', |
269 viewport1Visible: true, | 279 viewport1Visible: true, |
270 viewport1Series: {}, | 280 viewport1Series: {}, |
271 viewport1Quality: '', | |
272 viewport1FramesCount: 0, | |
273 viewport1CurrentFrame: 0, | |
274 | 281 |
275 viewport2Width: '100%', | 282 viewport2Width: '100%', |
276 viewport2Height: '100%', | 283 viewport2Height: '100%', |
277 viewport2Left: '0%', | 284 viewport2Left: '0%', |
278 viewport2Top: '0%', | 285 viewport2Top: '0%', |
279 viewport2Visible: false, | 286 viewport2Visible: false, |
280 viewport2Series: {}, | 287 viewport2Series: {}, |
281 viewport2Quality: '', | |
282 viewport2FramesCount: 0, | |
283 viewport2CurrentFrame: 0, | |
284 | 288 |
285 viewport3Width: '100%', | 289 viewport3Width: '100%', |
286 viewport3Height: '100%', | 290 viewport3Height: '100%', |
287 viewport3Left: '0%', | 291 viewport3Left: '0%', |
288 viewport3Top: '0%', | 292 viewport3Top: '0%', |
289 viewport3Visible: false, | 293 viewport3Visible: false, |
290 viewport3Series: {}, | 294 viewport3Series: {}, |
291 viewport3Quality: '', | |
292 viewport3FramesCount: 0, | |
293 viewport3CurrentFrame: 0, | |
294 | 295 |
295 viewport4Width: '100%', | 296 viewport4Width: '100%', |
296 viewport4Height: '100%', | 297 viewport4Height: '100%', |
297 viewport4Left: '0%', | 298 viewport4Left: '0%', |
298 viewport4Top: '0%', | 299 viewport4Top: '0%', |
299 viewport4Visible: false, | 300 viewport4Visible: false, |
300 viewport4Series: {}, | 301 viewport4Series: {}, |
301 viewport4Quality: '', | |
302 viewport4FramesCount: 0, | |
303 viewport4CurrentFrame: 0, | |
304 | 302 |
305 series: [], | 303 series: [], |
306 studies: [], | 304 studies: [], |
307 seriesIndex: {} // Maps "SeriesInstanceUID" to "index in this.series" | 305 seriesIndex: {} // Maps "SeriesInstanceUID" to "index in this.series" |
308 } | 306 } |
756 | 754 |
757 window.addEventListener('MetadataLoaded', function(args) { | 755 window.addEventListener('MetadataLoaded', function(args) { |
758 var studyInstanceUid = args.detail.studyInstanceUid; | 756 var studyInstanceUid = args.detail.studyInstanceUid; |
759 var seriesInstanceUid = args.detail.seriesInstanceUid; | 757 var seriesInstanceUid = args.detail.seriesInstanceUid; |
760 app.UpdateIsSeriesComplete(studyInstanceUid, seriesInstanceUid); | 758 app.UpdateIsSeriesComplete(studyInstanceUid, seriesInstanceUid); |
761 }); | |
762 | |
763 | |
764 window.addEventListener('FrameUpdated', function(args) { | |
765 var canvasId = args.detail.canvasId; | |
766 var framesCount = args.detail.framesCount; | |
767 var currentFrame = (args.detail.currentFrame + 1); | |
768 var quality = args.detail.quality; | |
769 | |
770 if (canvasId == 'canvas1') { | |
771 app.viewport1CurrentFrame = currentFrame; | |
772 app.viewport1FramesCount = framesCount; | |
773 app.viewport1Quality = quality; | |
774 } | |
775 else if (canvasId == 'canvas2') { | |
776 app.viewport2CurrentFrame = currentFrame; | |
777 app.viewport2FramesCount = framesCount; | |
778 app.viewport2Quality = quality; | |
779 } | |
780 else if (canvasId == 'canvas3') { | |
781 app.viewport3CurrentFrame = currentFrame; | |
782 app.viewport3FramesCount = framesCount; | |
783 app.viewport3Quality = quality; | |
784 } | |
785 else if (canvasId == 'canvas4') { | |
786 app.viewport4CurrentFrame = currentFrame; | |
787 app.viewport4FramesCount = framesCount; | |
788 app.viewport4Quality = quality; | |
789 } | |
790 }); | 759 }); |
791 | 760 |
792 | 761 |
793 window.addEventListener('StoneException', function() { | 762 window.addEventListener('StoneException', function() { |
794 console.error('Exception catched in Stone'); | 763 console.error('Exception catched in Stone'); |