Mercurial > hg > orthanc-stone
diff Applications/StoneWebViewer/WebApplication/index.html @ 1681:f2e8b3ac1dcd
handling multiple windowing presets in the Stone web viewer
| author | Sebastien Jodogne <s.jodogne@gmail.com> |
|---|---|
| date | Tue, 24 Nov 2020 18:08:07 +0100 |
| parents | 51bab5188a13 |
| children | 84fe7089ccaa |
line wrap: on
line diff
--- a/Applications/StoneWebViewer/WebApplication/index.html Tue Nov 24 16:39:54 2020 +0100 +++ b/Applications/StoneWebViewer/WebApplication/index.html Tue Nov 24 18:08:07 2020 +0100 @@ -367,11 +367,64 @@ <div class="ng-scope inline-object"> <button class="wvButton--underline text-center" data-toggle="tooltip" data-title="Change windowing" - id="windowing-popover"> + id="windowing-popover" + v-on:click="ToggleWindowing()"> <i class="fa fa-sun"></i> </button> </div> + <div id="windowing-content" v-show="showWindowing" + class="popover wvToolbar__windowingPresetConfigPopover" + style="position: absolute; display: block" + > + <div class="arrow"></div> + <h3 class="popover-title">Change windowing</h3> + <div class="popover-content"> + + <!--p class="wvToolbar__windowingPresetConfigNotice"> + Click on the button to toggle the windowing tool or apply a preset to the selected viewport. + </p--> + + <ul class="wvToolbar__windowingPresetList"> + <li v-for="preset in windowingPresets" class="wvToolbar__windowingPresetListItem"> + <a href="#" v-on:click="SetWindowing(preset.center, preset.width)"> + {{ preset.name }} <small>({{ preset.info }})</small> + </a> + </li> + <li class="wvToolbar__windowingPresetListItem"> + <a href="#" v-on:click="SetWindowing(-400, 1600)"> + CT Lung <small>(C -400, W 1600)</small> + </a> + </li> + <li class="wvToolbar__windowingPresetListItem"> + <a href="#" v-on:click="SetWindowing(300, 1500)"> + CT Abdomen <small>(C 300, W 1500)</small> + </a> + </li> + <li class="wvToolbar__windowingPresetListItem"> + <a href="#" v-on:click="SetWindowing(40, 80)"> + CT Bone <small>(C 40, W 80)</small> + </a> + </li> + <li class="wvToolbar__windowingPresetListItem"> + <a href="#" v-on:click="SetWindowing(40, 400)"> + CT Brain <small>(C 40, W 400)</small> + </a> + </li> + <li class="wvToolbar__windowingPresetListItem"> + <a href="#" v-on:click="SetWindowing(-400, 1600)"> + CT Chest <small>(C -400, W 1600)</small> + </a> + </li> + <li class="wvToolbar__windowingPresetListItem"> + <a href="#" v-on:click="SetWindowing(300, 600)"> + CT Angio <small>(C 300, W 600)</small> + </a> + </li> + </ul> + </div> + </div> + <div class="ng-scope inline-object"> <button class="wvButton--underline text-center" data-toggle="tooltip" data-title="Flip horizontally" @@ -464,58 +517,11 @@ v-bind:active="activeViewport==4"></viewport> </div> </div> - </div> - </div> + </div> </div> - - - <script type="text/x-template" id="windowing-content"> - <p class="wvToolbar__windowingPresetConfigNotice"> - Click on the button to toggle the windowing tool or apply a preset to the selected viewport. - </p> - - <ul class="wvToolbar__windowingPresetList"> - <li class="wvToolbar__windowingPresetListItem"> - <a href="#" onclick="app.SetPresetWindowing()"> - Preset - </a> - </li> - <li class="wvToolbar__windowingPresetListItem"> - <a href="#" onclick="app.SetWindowing(-400, 1600)"> - CT Lung <small>(L -400, W 1,600)</small> - </a> - </li> - <li class="wvToolbar__windowingPresetListItem"> - <a href="#" onclick="app.SetWindowing(300, 1500)"> - CT Abdomen <small>(L 300, W 1,500)</small> - </a> - </li> - <li class="wvToolbar__windowingPresetListItem"> - <a href="#" onclick="app.SetWindowing(40, 80)"> - CT Bone <small>(L 40, W 80)</small> - </a> - </li> - <li class="wvToolbar__windowingPresetListItem"> - <a href="#" onclick="app.SetWindowing(40, 400)"> - CT Brain <small>(L 40, W 400)</small> - </a> - </li> - <li class="wvToolbar__windowingPresetListItem"> - <a href="#" onclick="app.SetWindowing(-400, 1600)"> - CT Chest <small>(L -400, W 1,600)</small> - </a> - </li> - <li class="wvToolbar__windowingPresetListItem"> - <a href="#" onclick="app.SetWindowing(300, 600)"> - CT Angio <small>(L 300, W 600)</small> - </a> - </li> - </ul> - </script> - <script type="text/x-template" id="viewport-template"> <div v-bind:id="canvasId + '-container'" v-bind:style="{ padding:'2px',