Mercurial > hg > orthanc-stone
comparison 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 |
comparison
equal
deleted
inserted
replaced
1680:03afa09cfcf1 | 1681:f2e8b3ac1dcd |
---|---|
365 </div> | 365 </div> |
366 | 366 |
367 <div class="ng-scope inline-object"> | 367 <div class="ng-scope inline-object"> |
368 <button class="wvButton--underline text-center" | 368 <button class="wvButton--underline text-center" |
369 data-toggle="tooltip" data-title="Change windowing" | 369 data-toggle="tooltip" data-title="Change windowing" |
370 id="windowing-popover"> | 370 id="windowing-popover" |
371 v-on:click="ToggleWindowing()"> | |
371 <i class="fa fa-sun"></i> | 372 <i class="fa fa-sun"></i> |
372 </button> | 373 </button> |
374 </div> | |
375 | |
376 <div id="windowing-content" v-show="showWindowing" | |
377 class="popover wvToolbar__windowingPresetConfigPopover" | |
378 style="position: absolute; display: block" | |
379 > | |
380 <div class="arrow"></div> | |
381 <h3 class="popover-title">Change windowing</h3> | |
382 <div class="popover-content"> | |
383 | |
384 <!--p class="wvToolbar__windowingPresetConfigNotice"> | |
385 Click on the button to toggle the windowing tool or apply a preset to the selected viewport. | |
386 </p--> | |
387 | |
388 <ul class="wvToolbar__windowingPresetList"> | |
389 <li v-for="preset in windowingPresets" class="wvToolbar__windowingPresetListItem"> | |
390 <a href="#" v-on:click="SetWindowing(preset.center, preset.width)"> | |
391 {{ preset.name }} <small>({{ preset.info }})</small> | |
392 </a> | |
393 </li> | |
394 <li class="wvToolbar__windowingPresetListItem"> | |
395 <a href="#" v-on:click="SetWindowing(-400, 1600)"> | |
396 CT Lung <small>(C -400, W 1600)</small> | |
397 </a> | |
398 </li> | |
399 <li class="wvToolbar__windowingPresetListItem"> | |
400 <a href="#" v-on:click="SetWindowing(300, 1500)"> | |
401 CT Abdomen <small>(C 300, W 1500)</small> | |
402 </a> | |
403 </li> | |
404 <li class="wvToolbar__windowingPresetListItem"> | |
405 <a href="#" v-on:click="SetWindowing(40, 80)"> | |
406 CT Bone <small>(C 40, W 80)</small> | |
407 </a> | |
408 </li> | |
409 <li class="wvToolbar__windowingPresetListItem"> | |
410 <a href="#" v-on:click="SetWindowing(40, 400)"> | |
411 CT Brain <small>(C 40, W 400)</small> | |
412 </a> | |
413 </li> | |
414 <li class="wvToolbar__windowingPresetListItem"> | |
415 <a href="#" v-on:click="SetWindowing(-400, 1600)"> | |
416 CT Chest <small>(C -400, W 1600)</small> | |
417 </a> | |
418 </li> | |
419 <li class="wvToolbar__windowingPresetListItem"> | |
420 <a href="#" v-on:click="SetWindowing(300, 600)"> | |
421 CT Angio <small>(C 300, W 600)</small> | |
422 </a> | |
423 </li> | |
424 </ul> | |
425 </div> | |
373 </div> | 426 </div> |
374 | 427 |
375 <div class="ng-scope inline-object"> | 428 <div class="ng-scope inline-object"> |
376 <button class="wvButton--underline text-center" | 429 <button class="wvButton--underline text-center" |
377 data-toggle="tooltip" data-title="Flip horizontally" | 430 data-toggle="tooltip" data-title="Flip horizontally" |
462 v-bind:height="viewport4Height" | 515 v-bind:height="viewport4Height" |
463 v-bind:show-info="showInfo" | 516 v-bind:show-info="showInfo" |
464 v-bind:active="activeViewport==4"></viewport> | 517 v-bind:active="activeViewport==4"></viewport> |
465 </div> | 518 </div> |
466 </div> | 519 </div> |
467 | 520 </div> |
468 </div> | 521 </div> |
469 </div> | |
470 </div> | 522 </div> |
471 | 523 |
472 | |
473 | |
474 <script type="text/x-template" id="windowing-content"> | |
475 <p class="wvToolbar__windowingPresetConfigNotice"> | |
476 Click on the button to toggle the windowing tool or apply a preset to the selected viewport. | |
477 </p> | |
478 | |
479 <ul class="wvToolbar__windowingPresetList"> | |
480 <li class="wvToolbar__windowingPresetListItem"> | |
481 <a href="#" onclick="app.SetPresetWindowing()"> | |
482 Preset | |
483 </a> | |
484 </li> | |
485 <li class="wvToolbar__windowingPresetListItem"> | |
486 <a href="#" onclick="app.SetWindowing(-400, 1600)"> | |
487 CT Lung <small>(L -400, W 1,600)</small> | |
488 </a> | |
489 </li> | |
490 <li class="wvToolbar__windowingPresetListItem"> | |
491 <a href="#" onclick="app.SetWindowing(300, 1500)"> | |
492 CT Abdomen <small>(L 300, W 1,500)</small> | |
493 </a> | |
494 </li> | |
495 <li class="wvToolbar__windowingPresetListItem"> | |
496 <a href="#" onclick="app.SetWindowing(40, 80)"> | |
497 CT Bone <small>(L 40, W 80)</small> | |
498 </a> | |
499 </li> | |
500 <li class="wvToolbar__windowingPresetListItem"> | |
501 <a href="#" onclick="app.SetWindowing(40, 400)"> | |
502 CT Brain <small>(L 40, W 400)</small> | |
503 </a> | |
504 </li> | |
505 <li class="wvToolbar__windowingPresetListItem"> | |
506 <a href="#" onclick="app.SetWindowing(-400, 1600)"> | |
507 CT Chest <small>(L -400, W 1,600)</small> | |
508 </a> | |
509 </li> | |
510 <li class="wvToolbar__windowingPresetListItem"> | |
511 <a href="#" onclick="app.SetWindowing(300, 600)"> | |
512 CT Angio <small>(L 300, W 600)</small> | |
513 </a> | |
514 </li> | |
515 </ul> | |
516 </script> | |
517 | 524 |
518 | |
519 <script type="text/x-template" id="viewport-template"> | 525 <script type="text/x-template" id="viewport-template"> |
520 <div v-bind:id="canvasId + '-container'" | 526 <div v-bind:id="canvasId + '-container'" |
521 v-bind:style="{ padding:'2px', | 527 v-bind:style="{ padding:'2px', |
522 position:'absolute', | 528 position:'absolute', |
523 left: left, | 529 left: left, |