Mercurial > hg > orthanc-stone
comparison Applications/StoneWebViewer/WebApplication/app.js @ 1657:66e5fcdf5597
pdf viewer is working
author | Sebastien Jodogne <s.jodogne@gmail.com> |
---|---|
date | Wed, 18 Nov 2020 11:19:09 +0100 |
parents | 00674f3695f2 |
children | e4589378ad8b |
comparison
equal
deleted
inserted
replaced
1656:4cdc297be5a6 | 1657:66e5fcdf5597 |
---|---|
23 var SERIES_INSTANCE_UID = '0020,000e'; | 23 var SERIES_INSTANCE_UID = '0020,000e'; |
24 var STUDY_INSTANCE_UID = '0020,000d'; | 24 var STUDY_INSTANCE_UID = '0020,000d'; |
25 var STUDY_DESCRIPTION = '0008,1030'; | 25 var STUDY_DESCRIPTION = '0008,1030'; |
26 var STUDY_DATE = '0008,0020'; | 26 var STUDY_DATE = '0008,0020'; |
27 | 27 |
28 // Registry of the PDF series for which the instance metadata is still waiting | |
29 var pendingSeriesPdf_ = {}; | |
30 | |
28 | 31 |
29 function getParameterFromUrl(key) { | 32 function getParameterFromUrl(key) { |
30 var url = window.location.search.substring(1); | 33 var url = window.location.search.substring(1); |
31 var args = url.split('&'); | 34 var args = url.split('&'); |
32 for (var i = 0; i < args.length; i++) { | 35 for (var i = 0; i < args.length; i++) { |
64 var that = this; | 67 var that = this; |
65 Vue.nextTick(function() { | 68 Vue.nextTick(function() { |
66 stone.LoadSeriesInViewport(that.canvasId, seriesInstanceUid); | 69 stone.LoadSeriesInViewport(that.canvasId, seriesInstanceUid); |
67 }); | 70 }); |
68 } | 71 } |
69 else if (newVal.type == stone.ThumbnailType.PDF || | 72 else if (newVal.type == stone.ThumbnailType.PDF) { |
70 newVal.type == stone.ThumbnailType.VIDEO) { | 73 if (newVal.complete) { |
74 /** | |
75 * Series is complete <=> One already knows about the | |
76 * SOPInstanceUIDs that are available in this series. As a | |
77 * consequence, | |
78 * "OrthancStone::SeriesMetadataLoader::Accessor" will not | |
79 * be empty in "ResourcesLoader::FetchPdf()" in C++ code. | |
80 **/ | |
81 stone.FetchPdf(studyInstanceUid, seriesInstanceUid); | |
82 } else { | |
83 /** | |
84 * The SOPInstanceUIDs in this series are not known | |
85 * yet. Schedule an "stone.FetchPdf()" one the series | |
86 * metadata is available. | |
87 **/ | |
88 pendingSeriesPdf_[seriesInstanceUid] = true; | |
89 } | |
90 } | |
91 else if (newVal.type == stone.ThumbnailType.VIDEO) { | |
71 // TODO | 92 // TODO |
72 } | 93 console.warn('Videos are not supported yet by the Stone Web viewer'); |
73 } | 94 } |
95 } | |
96 }, | |
97 mounted: function() { | |
98 var that = this; | |
99 | |
100 window.addEventListener('PdfLoaded', function(args) { | |
101 var studyInstanceUid = args.detail.studyInstanceUid; | |
102 var seriesInstanceUid = args.detail.seriesInstanceUid; | |
103 var pdfPointer = args.detail.pdfPointer; | |
104 var pdfSize = args.detail.pdfSize; | |
105 | |
106 if ('tags' in that.series && | |
107 that.series.tags[STUDY_INSTANCE_UID] == studyInstanceUid && | |
108 that.series.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) { | |
109 | |
110 that.status = 'pdf'; | |
111 var pdf = new Uint8Array(HEAPU8.subarray(pdfPointer, pdfPointer + pdfSize)); | |
112 | |
113 /** | |
114 * It is not possible to bind an "Uint8Array" to a "props" | |
115 * in the "pdf-viewer" component. So we have to directly | |
116 * call the method of a component. But, "$refs are only | |
117 * populated after the component has been rendered", so we | |
118 * wait for the next rendering. | |
119 * https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements | |
120 **/ | |
121 Vue.nextTick(function() { | |
122 that.$refs.pdfViewer.LoadPdf(pdf); | |
123 }); | |
124 } | |
125 }); | |
74 }, | 126 }, |
75 methods: { | 127 methods: { |
76 SeriesDragAccept: function(event) { | 128 SeriesDragAccept: function(event) { |
77 event.preventDefault(); | 129 event.preventDefault(); |
78 }, | 130 }, |
304 }, | 356 }, |
305 | 357 |
306 SetViewportSeriesInstanceUid: function(viewportIndex, seriesInstanceUid) { | 358 SetViewportSeriesInstanceUid: function(viewportIndex, seriesInstanceUid) { |
307 if (seriesInstanceUid in this.seriesIndex) { | 359 if (seriesInstanceUid in this.seriesIndex) { |
308 this.SetViewportSeries(viewportIndex, this.seriesIndex[seriesInstanceUid]); | 360 this.SetViewportSeries(viewportIndex, this.seriesIndex[seriesInstanceUid]); |
309 | |
310 } | 361 } |
311 }, | 362 }, |
312 | 363 |
313 SetViewportSeries: function(viewportIndex, seriesIndex) { | 364 SetViewportSeries: function(viewportIndex, seriesIndex) { |
314 var series = this.series[seriesIndex]; | 365 var series = this.series[seriesIndex]; |
430 // https://fr.vuejs.org/2016/02/06/common-gotchas/#Why-isn%E2%80%99t-the-DOM-updating | 481 // https://fr.vuejs.org/2016/02/06/common-gotchas/#Why-isn%E2%80%99t-the-DOM-updating |
431 this.$set(this.series, index, series); | 482 this.$set(this.series, index, series); |
432 } | 483 } |
433 }, | 484 }, |
434 | 485 |
435 UpdateIsSeriesComplete: function(seriesInstanceUid) { | 486 UpdateIsSeriesComplete: function(studyInstanceUid, seriesInstanceUid) { |
436 if (seriesInstanceUid in this.seriesIndex) { | 487 if (seriesInstanceUid in this.seriesIndex) { |
437 var index = this.seriesIndex[seriesInstanceUid]; | 488 var index = this.seriesIndex[seriesInstanceUid]; |
438 var series = this.series[index]; | 489 var series = this.series[index]; |
439 | 490 |
491 var oldComplete = series.complete; | |
492 | |
440 series.complete = stone.IsSeriesComplete(seriesInstanceUid); | 493 series.complete = stone.IsSeriesComplete(seriesInstanceUid); |
494 | |
495 if (!oldComplete && | |
496 series.complete && | |
497 seriesInstanceUid in pendingSeriesPdf_) { | |
498 stone.FetchPdf(studyInstanceUid, seriesInstanceUid); | |
499 delete pendingSeriesPdf_[seriesInstanceUid]; | |
500 } | |
441 | 501 |
442 // https://fr.vuejs.org/2016/02/06/common-gotchas/#Why-isn%E2%80%99t-the-DOM-updating | 502 // https://fr.vuejs.org/2016/02/06/common-gotchas/#Why-isn%E2%80%99t-the-DOM-updating |
443 this.$set(this.series, index, series); | 503 this.$set(this.series, index, series); |
444 | 504 |
445 if ('tags' in this.viewport1Series && | 505 if ('tags' in this.viewport1Series && |
587 } | 647 } |
588 | 648 |
589 app.SetResources(studies, series); | 649 app.SetResources(studies, series); |
590 | 650 |
591 for (var i = 0; i < app.series.length; i++) { | 651 for (var i = 0; i < app.series.length; i++) { |
652 var studyInstanceUid = app.series[i].tags[STUDY_INSTANCE_UID]; | |
592 var seriesInstanceUid = app.series[i].tags[SERIES_INSTANCE_UID]; | 653 var seriesInstanceUid = app.series[i].tags[SERIES_INSTANCE_UID]; |
593 app.UpdateSeriesThumbnail(seriesInstanceUid); | 654 app.UpdateSeriesThumbnail(seriesInstanceUid); |
594 app.UpdateIsSeriesComplete(seriesInstanceUid); | 655 app.UpdateIsSeriesComplete(studyInstanceUid, seriesInstanceUid); |
595 } | 656 } |
596 }); | 657 }); |
597 | 658 |
598 | 659 |
599 window.addEventListener('ThumbnailLoaded', function(args) { | 660 window.addEventListener('ThumbnailLoaded', function(args) { |
602 app.UpdateSeriesThumbnail(seriesInstanceUid); | 663 app.UpdateSeriesThumbnail(seriesInstanceUid); |
603 }); | 664 }); |
604 | 665 |
605 | 666 |
606 window.addEventListener('MetadataLoaded', function(args) { | 667 window.addEventListener('MetadataLoaded', function(args) { |
607 //var studyInstanceUid = args.detail.studyInstanceUid; | 668 var studyInstanceUid = args.detail.studyInstanceUid; |
608 var seriesInstanceUid = args.detail.seriesInstanceUid; | 669 var seriesInstanceUid = args.detail.seriesInstanceUid; |
609 app.UpdateIsSeriesComplete(seriesInstanceUid); | 670 app.UpdateIsSeriesComplete(studyInstanceUid, seriesInstanceUid); |
610 }); | 671 }); |
611 | 672 |
612 | 673 |
613 window.addEventListener('FrameUpdated', function(args) { | 674 window.addEventListener('FrameUpdated', function(args) { |
614 var canvasId = args.detail.canvasId; | 675 var canvasId = args.detail.canvasId; |