Mercurial > hg > orthanc-stone
comparison Applications/StoneWebViewer/WebApplication/index.html @ 2026:04148de691a7 deep-learning
integration mainline->deep-learning
author | Sebastien Jodogne <s.jodogne@gmail.com> |
---|---|
date | Mon, 05 Dec 2022 08:29:49 +0100 |
parents | 963f28eb40cb e0b7b2a8b914 |
children | a56f7ed0cdf9 |
comparison
equal
deleted
inserted
replaced
2008:37d6805b80ee | 2026:04148de691a7 |
---|---|
34 assurance. | 34 assurance. |
35 </p> | 35 </p> |
36 <h3>Versions</h3> | 36 <h3>Versions</h3> |
37 <p> | 37 <p> |
38 Stone Web viewer: {{ stoneWebViewerVersion }} <br/> | 38 Stone Web viewer: {{ stoneWebViewerVersion }} <br/> |
39 <span v-if="orthancSystem.Version">Orthanc: {{ orthancSystem.Version }} <br/></span> | |
39 Emscripten compiler: {{ emscriptenVersion }} | 40 Emscripten compiler: {{ emscriptenVersion }} |
40 </p> | 41 </p> |
41 </div> | 42 </div> |
42 <div class="wvInfoPopupForm"> | 43 <div class="wvInfoPopupForm"> |
43 <div v-if="globalConfiguration.ShowInfoPanelAtStartup == 'User'"> | 44 <div v-if="globalConfiguration.ShowInfoPanelAtStartup == 'User'"> |
72 assurance. | 73 assurance. |
73 </p> | 74 </p> |
74 <h3>Versions</h3> | 75 <h3>Versions</h3> |
75 <p> | 76 <p> |
76 Stone Web viewer: {{ stoneWebViewerVersion }} <br/> | 77 Stone Web viewer: {{ stoneWebViewerVersion }} <br/> |
78 <span v-if="orthancSystem.Version">Orthanc: {{ orthancSystem.Version }} <br/></span> | |
77 Emscripten compiler: {{ emscriptenVersion }} | 79 Emscripten compiler: {{ emscriptenVersion }} |
78 </p> | 80 </p> |
79 <h3>User preferences</h3> | 81 <h3>User preferences</h3> |
80 </div> | 82 </div> |
81 <div class="wvInfoPopupForm"> | 83 <div class="wvInfoPopupForm"> |
215 <ul class="wvSerieslist"> | 217 <ul class="wvSerieslist"> |
216 | 218 |
217 <!-- Series without multiple multiframe instances --> | 219 <!-- Series without multiple multiframe instances --> |
218 <span v-for="seriesIndex in study.series"> | 220 <span v-for="seriesIndex in study.series"> |
219 <li class="wvSerieslist__seriesItem" | 221 <li class="wvSerieslist__seriesItem" |
220 v-bind:class="{ highlighted : GetActiveSeries().includes(series[seriesIndex].tags[SERIES_INSTANCE_UID]), 'wvSerieslist__seriesItem--list' : leftMode != 'grid', 'wvSerieslist__seriesItem--grid' : leftMode == 'grid' }" | 222 v-bind:class="{ highlighted : GetActiveSeriesInstanceUid().includes(series[seriesIndex].tags[SERIES_INSTANCE_UID]), 'wvSerieslist__seriesItem--list' : leftMode != 'grid', 'wvSerieslist__seriesItem--grid' : leftMode == 'grid' }" |
221 v-on:dragstart="SeriesDragStart($event, seriesIndex)" | 223 v-on:dragstart="SeriesDragStart($event, seriesIndex)" |
222 v-on:click="ClickSeries(seriesIndex)" | 224 v-on:click="ClickSeries(seriesIndex)" |
223 v-if="series[seriesIndex].virtualSeries === null"> | 225 v-if="series[seriesIndex].virtualSeries === null"> |
224 <div class="wvSerieslist__picture" style="z-index:0" | 226 <div class="wvSerieslist__picture" style="z-index:0" |
225 draggable="true" | 227 draggable="true" |
346 <div class="wvToolbar wvToolbar--top wvPrintExclude"> | 348 <div class="wvToolbar wvToolbar--top wvPrintExclude"> |
347 <div class="ng-scope inline-object"> | 349 <div class="ng-scope inline-object"> |
348 <div class="tbGroup"> | 350 <div class="tbGroup"> |
349 <div class="tbGroup__toggl"> | 351 <div class="tbGroup__toggl"> |
350 <button class="wvButton" | 352 <button class="wvButton" |
351 v-bind:class="{ 'wvButton--underline' : !viewportLayoutButtonsVisible }" | 353 v-bind:class="{ 'wvButton--underline' : !viewportLayoutButtonsVisible, 'wvButton--border' : viewportLayoutButtonsVisible }" |
352 data-toggle="tooltip" data-title="Change layout" | 354 data-toggle="tooltip" data-title="Change layout" |
353 @click="viewportLayoutButtonsVisible = !viewportLayoutButtonsVisible;HideAllTooltips()"> | 355 @click="viewportLayoutButtonsVisible = !viewportLayoutButtonsVisible;mouseActionsVisible=false;annotationActionsVisible=false;HideAllTooltips()"> |
354 <i class="fa fa-th"></i> | 356 <i class="fa fa-th"></i> |
355 </button> | 357 </button> |
356 </div> | 358 </div> |
357 | 359 |
358 <div class="tbGroup__buttons--bottom" v-show="viewportLayoutButtonsVisible"> | 360 <div class="tbGroup__buttons--bottom" v-show="viewportLayoutButtonsVisible"> |
383 | 385 |
384 <div class="ng-scope inline-object"> | 386 <div class="ng-scope inline-object"> |
385 <div class="tbGroup"> | 387 <div class="tbGroup"> |
386 <div class="tbGroup__toggl"> | 388 <div class="tbGroup__toggl"> |
387 <button class="wvButton" | 389 <button class="wvButton" |
388 v-bind:class="{ 'wvButton--underline' : !mouseActionsVisible }" | 390 v-bind:class="{ 'wvButton--underline' : !mouseActionsVisible, 'wvButton--border' : mouseActionsVisible }" |
389 data-toggle="tooltip" data-title="Mouse actions" | 391 data-toggle="tooltip" data-title="Mouse actions" |
390 @click="mouseActionsVisible = !mouseActionsVisible;HideAllTooltips()"> | 392 @click="viewportLayoutButtonsVisible=false;mouseActionsVisible = !mouseActionsVisible;annotationActionsVisible=false;HideAllTooltips()"> |
391 <i class="fa fa-mouse-pointer"></i> | 393 <i class="fa fa-mouse-pointer"></i> |
392 </button> | 394 </button> |
393 </div> | 395 </div> |
394 | 396 |
395 <div class="tbGroup__buttons--bottom" v-show="mouseActionsVisible"> | 397 <div class="tbGroup__buttons--bottom" v-show="mouseActionsVisible"> |
538 v-on:click="FlipY()"> | 540 v-on:click="FlipY()"> |
539 <i class="fas fa-exchange-alt fa-rotate-90"></i> | 541 <i class="fas fa-exchange-alt fa-rotate-90"></i> |
540 </button> | 542 </button> |
541 </div> | 543 </div> |
542 | 544 |
543 <div class="ng-scope inline-object"> | 545 |
544 <button class="wvButton--underline text-center" | 546 <div class="ng-scope inline-object"> |
545 v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_LENGTH }" | 547 <div class="tbGroup"> |
546 v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_LENGTH, stone.WebViewerAction.CREATE_LENGTH)" | 548 <div class="tbGroup__toggl"> |
547 data-toggle="tooltip" data-title="Measure length"> | 549 <button class="wvButton" |
548 <i class="fas fa-ruler"></i> | 550 v-bind:class="{ 'wvButton--underline' : !annotationActionsVisible, 'wvButton--border' : annotationActionsVisible }" |
549 </button> | 551 data-toggle="tooltip" data-title="Annotations" |
550 </div> | 552 @click="viewportLayoutButtonsVisible=false;mouseActionsVisible=false;annotationActionsVisible = !annotationActionsVisible;HideAllTooltips()"> |
551 | 553 <i class="fas fa-pencil-ruler"></i> |
552 <div class="ng-scope inline-object"> | 554 </button> |
553 <button class="wvButton--underline text-center" | 555 </div> |
554 v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_ANGLE }" | 556 |
555 v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_ANGLE, stone.WebViewerAction.CREATE_ANGLE)" | 557 <div class="tbGroup__buttons--bottom" v-show="annotationActionsVisible"> |
556 data-toggle="tooltip" data-title="Measure angle"> | 558 <div class="ng-scope inline-object"> |
557 <i class="fas fa-drafting-compass"></i> | 559 <button class="wvButton--underline text-center" |
558 </button> | 560 v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_LENGTH }" |
559 </div> | 561 v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_LENGTH, stone.WebViewerAction.CREATE_LENGTH)" |
560 | 562 data-toggle="tooltip" data-title="Measure length"> |
561 <div class="ng-scope inline-object"> | 563 <i class="fas fa-ruler"></i> |
562 <button class="wvButton--underline text-center" | 564 </button> |
563 v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_CIRCLE }" | 565 </div> |
564 v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_CIRCLE, stone.WebViewerAction.CREATE_CIRCLE)" | 566 |
565 data-toggle="tooltip" data-title="Measure circle"> | 567 <div class="ng-scope inline-object"> |
566 <i class="far fa-circle"></i> | 568 <button class="wvButton--underline text-center" |
567 </button> | 569 v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_ANGLE }" |
568 </div> | 570 v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_ANGLE, stone.WebViewerAction.CREATE_ANGLE)" |
569 | 571 data-toggle="tooltip" data-title="Measure angle"> |
570 <div class="ng-scope inline-object"> | 572 <i class="fas fa-drafting-compass"></i> |
571 <button class="wvButton--underline text-center" | 573 </button> |
572 v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_PIXEL_PROBE }" | 574 </div> |
573 v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_PIXEL_PROBE, stone.WebViewerAction.CREATE_PIXEL_PROBE)" | 575 |
574 data-toggle="tooltip" data-title="Pixel probe"> | 576 <div class="ng-scope inline-object"> |
575 <i class="fas fa-microscope"></i> | 577 <button class="wvButton--underline text-center" |
576 </button> | 578 v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_CIRCLE }" |
577 </div> | 579 v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_CIRCLE, stone.WebViewerAction.CREATE_CIRCLE)" |
578 | 580 data-toggle="tooltip" data-title="Measure circle"> |
579 <div class="ng-scope inline-object"> | 581 <i class="far fa-circle"></i> |
580 <button class="wvButton--underline text-center" | 582 </button> |
581 v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_RECTANGLE_PROBE }" | 583 </div> |
582 v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_RECTANGLE_PROBE, stone.WebViewerAction.CREATE_RECTANGLE_PROBE)" | 584 |
583 data-toggle="tooltip" data-title="Rectangle probe"> | 585 <div class="ng-scope inline-object"> |
584 <i class="fas fa-plus-square"></i> | 586 <button class="wvButton--underline text-center" |
585 </button> | 587 v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_PIXEL_PROBE }" |
586 </div> | 588 v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_PIXEL_PROBE, stone.WebViewerAction.CREATE_PIXEL_PROBE)" |
587 | 589 data-toggle="tooltip" data-title="Pixel probe"> |
588 <div class="ng-scope inline-object"> | 590 <i class="fas fa-microscope"></i> |
589 <button class="wvButton--underline text-center" | 591 </button> |
590 v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_ELLIPSE_PROBE }" | 592 </div> |
591 v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_ELLIPSE_PROBE, stone.WebViewerAction.CREATE_ELLIPSE_PROBE)" | 593 |
592 data-toggle="tooltip" data-title="Ellipse probe"> | 594 <div class="ng-scope inline-object"> |
593 <i class="fas fa-plus-circle"></i> | 595 <button class="wvButton--underline text-center" |
594 </button> | 596 v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_RECTANGLE_PROBE }" |
595 </div> | 597 v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_RECTANGLE_PROBE, stone.WebViewerAction.CREATE_RECTANGLE_PROBE)" |
596 | 598 data-toggle="tooltip" data-title="Rectangle probe"> |
597 <div class="ng-scope inline-object"> | 599 <i class="fas fa-plus-square"></i> |
598 <button class="wvButton--underline text-center" | 600 </button> |
599 v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_TEXT_ANNOTATION }" | 601 </div> |
600 v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_TEXT_ANNOTATION, stone.WebViewerAction.CREATE_TEXT_ANNOTATION)" | 602 |
601 data-toggle="tooltip" data-title="Add text annotation"> | 603 <div class="ng-scope inline-object"> |
602 <i class="fas fa-comment-dots"></i> | 604 <button class="wvButton--underline text-center" |
603 </button> | 605 v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_ELLIPSE_PROBE }" |
604 </div> | 606 v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_ELLIPSE_PROBE, stone.WebViewerAction.CREATE_ELLIPSE_PROBE)" |
605 | 607 data-toggle="tooltip" data-title="Ellipse probe"> |
606 <div class="ng-scope inline-object"> | 608 <i class="fas fa-plus-circle"></i> |
607 <button class="wvButton--underline text-center" | 609 </button> |
608 v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_REMOVE_MEASURE }" | 610 </div> |
609 v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_REMOVE_MEASURE, stone.WebViewerAction.REMOVE_MEASURE)" | 611 |
610 data-toggle="tooltip" data-title="Delete annotation"> | 612 <div class="ng-scope inline-object"> |
611 <i class="fas fa-trash"></i> | 613 <button class="wvButton--underline text-center" |
612 </button> | 614 v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_CREATE_TEXT_ANNOTATION }" |
613 </div> | 615 v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_CREATE_TEXT_ANNOTATION, stone.WebViewerAction.CREATE_TEXT_ANNOTATION)" |
616 data-toggle="tooltip" data-title="Add text annotation"> | |
617 <i class="fas fa-comment-dots"></i> | |
618 </button> | |
619 </div> | |
620 | |
621 <div class="ng-scope inline-object"> | |
622 <button class="wvButton--underline text-center" | |
623 v-bind:class="{ 'active' : mouseTool == MOUSE_TOOL_REMOVE_MEASURE }" | |
624 v-on:click="SetLeftMouseButtonAction(MOUSE_TOOL_REMOVE_MEASURE, stone.WebViewerAction.REMOVE_MEASURE)" | |
625 data-toggle="tooltip" data-title="Delete annotation"> | |
626 <i class="fas fa-trash"></i> | |
627 </button> | |
628 </div> | |
629 </div> | |
630 </div> | |
631 </div> | |
632 | |
614 | 633 |
615 <div class="ng-scope inline-object"> | 634 <div class="ng-scope inline-object"> |
616 <button class="wvButton--underline text-center" | 635 <button class="wvButton--underline text-center" |
617 data-toggle="tooltip" data-title="Synchronized browsing" | 636 data-toggle="tooltip" data-title="Synchronized browsing" |
618 v-bind:class="{ 'active' : synchronizedBrowsing }" | 637 v-bind:class="{ 'active' : synchronizedBrowsing }" |
752 style="position:absolute; left:0; top:0; width:100%; height:100%" | 771 style="position:absolute; left:0; top:0; width:100%; height:100%" |
753 oncontextmenu="return false"></canvas> | 772 oncontextmenu="return false"></canvas> |
754 | 773 |
755 <div v-show="showInfo"> | 774 <div v-show="showInfo"> |
756 <div v-if="numberOfFrames > 1" class="wvVerticalScrollbar" | 775 <div v-if="numberOfFrames > 1" class="wvVerticalScrollbar" |
757 v-on:click="var offset = $event.currentTarget.getClientRects()[0]; var y = $event.clientY - offset.top; var height = $event.currentTarget.offsetHeight; currentFrame = Math.min(numberOfFrames - 1, Math.floor(y * numberOfFrames / (height - 1)));"> | 776 v-on:mousedown="ClickVerticalScrollbar($event)"> |
758 <div class="wvVerticalScrollbarHighlight" | 777 <div class="wvVerticalScrollbarHighlight" |
759 v-bind:style="{ top: (currentFrame / (numberOfFrames - 1) * 95.0) + '%' }"> | 778 v-bind:style="{ top: (currentFrame / (numberOfFrames - 1) * 95.0) + '%' }"> |
760 </div> | 779 </div> |
761 </div> | 780 </div> |
762 | 781 |
763 <div class="wv-overlay"> | 782 <div class="wv-overlay"> |
764 <div v-if="'tags' in content.series" class="wv-overlay-topleft"> | 783 <div v-if="'tags' in content.series" class="wv-overlay-topleft"> |
765 {{ content.series.tags[PATIENT_NAME] }}<br/> | 784 {{ content.series.tags[PATIENT_NAME] }}<br/> |
766 {{ content.series.tags[PATIENT_ID] }}<br/> | 785 {{ content.series.tags[PATIENT_ID] }}<br/> |
767 {{ app.FormatDate(content.series.tags[PATIENT_BIRTH_DATE]) }} | 786 {{ app.FormatDate(content.series.tags[PATIENT_BIRTH_DATE]) }} - |
787 {{ content.series.tags[PATIENT_SEX] }} | |
768 </div> | 788 </div> |
769 <div v-if="'tags' in content.series" class="wv-overlay-topright" | 789 <div v-if="'tags' in content.series" class="wv-overlay-topright" |
770 v-bind:class="{ 'wvInfoRightMargin' : numberOfFrames > 1 }"> | 790 v-bind:class="{ 'wvInfoRightMargin' : numberOfFrames > 1 }"> |
771 {{ content.series.tags[STUDY_DESCRIPTION] }}<br/> | 791 {{ content.series.tags[STUDY_DESCRIPTION] }}<br/> |
772 <span v-if="contentDate !== undefined && contentDate != ''">{{ app.FormatDate(contentDate) }} <span v-show="contentTime != ''">{{ app.FormatTime(contentTime) }}</span><br/></span> | 792 <span v-if="contentDate !== undefined && contentDate != ''">{{ app.FormatDate(contentDate) }} <span v-show="contentTime != ''">{{ app.FormatTime(contentTime) }}</span><br/></span> |
808 <button class="btn btn-primary" @click="stone.GoToLastFrame(canvasId)"> | 828 <button class="btn btn-primary" @click="stone.GoToLastFrame(canvasId)"> |
809 <i class="fas fa-fast-forward"></i> | 829 <i class="fas fa-fast-forward"></i> |
810 </button> | 830 </button> |
811 </div> | 831 </div> |
812 <div class="btn-group btn-group-sm" role="group"> | 832 <div class="btn-group btn-group-sm" role="group"> |
813 <button type="button" class="btn btn-primary" @click="CinePlay()"> | 833 <button type="button" class="btn btn-primary" @click="CineBackward()"> |
814 <i class="fas fa-play fa-flip-horizontal"></i> | 834 <i class="fas fa-play fa-flip-horizontal"></i> |
815 </button> | 835 </button> |
816 <button type="button" class="btn btn-primary" @click="CinePause()"> | 836 <button type="button" class="btn btn-primary" @click="CinePause()"> |
817 <i class="fas fa-pause"></i> | 837 <i class="fas fa-pause"></i> |
818 </button> | 838 </button> |
819 <button type="button" class="btn btn-primary" @click="CineBackward()"> | 839 <button type="button" class="btn btn-primary" @click="CinePlay()"> |
820 <i class="fas fa-play"></i> | 840 <i class="fas fa-play"></i> |
821 </button> | 841 </button> |
822 </div> | 842 </div> |
823 </span> | 843 </span> |
824 </div> | 844 </div> |