Mercurial > hg > orthanc-stone

comparison Applications/StoneWebViewer/WebApplication/app.js @ 1673:dd50f8a1a2be

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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');